HTML + CSS az alapoktól

Szerző:   |   2010-11-15

Kilenc részes videó sorozat, amiben lépésenként megyünk végig a HTML és CSS rejtelmein egészen az alapoktól. A kódoláshoz a Notepad++ nevű programot használjuk. Ha kérdésed van, kommentelj!

Első rész

Videó

Második rész

A második részben elkezdjük a CSS lehetőségeit taglalni.

Videó Videó

Harmadik rész

A harmadik rész a táblázatok használatáról szól.

Videó Videó

Negyedik rész

Ebben a részben a számozott és számozatlan listákkal foglalkozunk. A hangminőség ezúttal botrányos lett, többet ígérem nem fordul elő 🙂

Videó

Ötödik rész

Képek használata, illetve a background-image által nyújtott lehetőségek.

Videó

Hatodik rész

Címsorok és anchor-ok. 5:50-nél ejtettem egy kis hibát, amit a videóban kis írtam. Nem font:, hanem font-size lenne helyesen.

Videó

Hetedik rész

A hetedik részben a DIV-ekkel foglalkozunk. Ez az utolsó amiben új tag-et veszünk, a következőben már csak ismétlés lesz, illetve még van a fejemben egy bónusz anyag is 🙂

Videó

Nyolcadik rész

Az utolsó előtt részben átismételjük az eddig tanultakat.

Videó

Kilencedik rész

Az utolsó részben a CSS3 újdonságaival foglalkozunk, illetve kapunk egy kis betekintést, hogy miért nem kedvelik a webdesignerek az Internet Explorert. 🙂 A videóban bemutatott dolgok többsége egyébként a 9-es verzióban már működik. Megint sikerült mást gépelnem, mint amit mondok, 6:10-nél értelemszerűen border-radius-t kellene írni 🙂

Videó

45 hozzászólás

  1. 2014. június 23. hétfő - 13:03

    Szia!

    Nagyon tetszik az oldal és a videók is szuperek!
    Örülök, hogy megtaláltam és fejlődhetek a segítségével egészen az alapoktól.
    Sok-sok olyan kérdésemre megkapom a választ ami az évek alatt összegyűlt. Még nem láttam minden videót, de izgatottan várom a többit.

    Végre haladok a “webdolgaimmal”.

    Szép napot neked és köszönöm… 🙂

    • 2014. június 29. vasárnap - 19:00

      Örülök!

  2. 2013. augusztus 5. hétfő - 11:49

    Hello nekem az lenne aproblámám hogy amikor megnyitom a weboldalt akkor úgy írja hogy localhost azzal mit tegyek?? előre is köszönöm

  3. 2013. május 4. szombat - 20:20

    Hello! megtudnád mondani hogy meik notepad++ verziót használód!
    Előre is köszi

    • 2013. május 5. vasárnap - 21:40

      Mindig a legfrissebbet.

  4. 2012. február 1. szerda - 14:39

    Sziasztok!
    Annyi kérdésem lenne, hogy a különböző meta tag-ekben használhatóak a különleges (pl. é,ő,ű) karakterek? A kódolást persze én is UTF-8 BOM nélkülire állítottam. Bocsi, ha hülye a kérdés, de kezdő vagyok…

    Szép napot mindenkinek! 🙂

  5. 2011. december 16. péntek - 19:31

    Egy php oldal készítéséhez melyik kódolást ajánlod?
    Köszi a válaszodat előre Cyrex 🙂

    • 2011. december 19. hétfő - 09:18

      UTF-8 mindig minden körülmények között 🙂

  6. 2011. október 2. vasárnap - 19:39

    Bocsi már megtaláltam:D
    Előttem írónak: http://www.w3.org/QA/2002/04/valid-dtd-list.html

  7. 2011. október 2. vasárnap - 19:36

    Szia!

    Kérhetnék egy linket a w3.org nál kikeresendő részhez? Egyszerűen nem találom.
    Előre is köszi 😀

  8. 2011. szeptember 10. szombat - 15:29

    Szia! kérlek megadnád pontosan a w3c.org os linket a HTML ekhez? előre is köszi 😀

  9. 2011. június 14. kedd - 17:12

    Ismét egy kérdésem lenne, nem tudom…lehet, hogy láma kérdés. Mindenestre nekem nagyon furcsa. Tehát a a kódolás amit írok a notepad-be az nekem fekete-fehér, de neked mindenféle szín és kijelölés látható. Idáig még csak a fele van kész az 1. oldalnak… nem tudom később állítasz e be valamit vagy nekem nem jó. Előre is köszi a segítséget!

    • 2011. június 14. kedd - 20:06

      1. ugye notepad++? 🙂
      2. el van mentve html-ként?
      3. Nyelv menü / H / HTML be van állítva nyelvnek?
      4. Beállítások / Stílusok beállításai-nál válaszd ki a html-t és ott tudod beállítani a színeket

    • 2011. június 15. szerda - 12:10

      Köszönöm Lexar!!!
      Sima txt-ben volt csak elmentve 😀

  10. 2011. június 1. szerda - 20:51

    Heló!
    Segítséget kérnék, mert eddig működött a honlap amit apum iskolájának szerkesztek és most valamiért a Firefox és az Opera nem képes beolvasni az utf 8 kódolási parancsot a html kódból.
    Google Chrome és Internet Expoler 9 alatt pedig tökéletesen működik.
    Ha valakinek van valami ötlete azt megköszönném!

    http://belusuli.weboldala.net

    Üdv.: BeluDavid

    • 2011. június 2. csütörtök - 09:07

      A szolgáltató oldalán ez áll: “A WEBszerver iso-8859-2 karakterkódolást használ!”
      Vidd normális szolgáltatóhoz az oldalt.

  11. 2010. december 31. péntek - 21:47

    Nagyon aranyos és nyugtató hangod van. Öröm hallgatni =) Egyébként egyetértek az előttem szólóval.. Messze a legjobb tutorial az egész neten 🙂 Mármint azok közül, ami ingyenes.. 😀 Mivel pénzt még nem költöttem rá.

    • 2011. január 2. vasárnap - 10:06

      Ha gondolod fizethetsz érte, nem tiltom meg :mrgreen:

  12. 2010. december 30. csütörtök - 12:42

    Na nagy nehezen megoldottam de fogalmam sincs már hogy működik de sikerült

  13. 2010. december 29. szerda - 18:16

    még lenne egy kérdésem ami nagyon fontos van egy oldalam vagyis hát még készül és vagy egy olyan div amire 2px-es dotted szürke vonalat használtam alsó körvonalnak de abból a divből lesz még tobb is ezért azt akarom hogy a last-childján ne legyen alsó körvonal de egyszerűen sehogy se akar működni pedig már csináltam az oldal másik részén is egy ilyen megoldást és ott működik egyébként a kód ez :
    div.doboz_neve {
    height: 172px;
    border-bottom: 2px dotted grey;
    }
    div.doboz_neve:last-child {
    border-bottom: 0;
    }
    mi a hiba?

    • 2010. december 29. szerda - 19:10

      Küldj valami linket ahol meg tudom nézni.

    • 2010. december 29. szerda - 22:20
    • 2010. december 29. szerda - 22:21

      jah am a letöltések /epizódok / dragonball zed nél van de ahoz be kell jelntkezned

    • 2010. december 30. csütörtök - 09:09

      Működik amit csináltál, csak Internet Explorer alatt nem, mivel a 8-as verzióig nem támogatja a last-child szelektort.

    • 2010. december 30. csütörtök - 12:10

      de én google crhome allat néztem :O

  14. 2010. december 27. hétfő - 22:15

    Valaki nem tudja hogy az ultrawbnek mi az ip címe vagy mie me php-hoz kellene de csak az atwnek tudom :/

    • 2010. december 27. hétfő - 22:22

      bocsánat nem ip cím hanem local host

    • 2010. december 28. kedd - 10:26

      Mihez kell neked? MySQL kapcsolódáshoz?

    • 2010. december 28. kedd - 21:30

      igen de már meg van 😀

  15. 2010. december 27. hétfő - 21:54

    Köszi a választ átmentem uw-re és jó a karakterkódolás 😀 kösz mégegyszer

  16. 2010. december 27. hétfő - 18:21

    Nekem is az a bajom hogy megadom hogy utf-8 BOM nélkül kódolás legyen meta tagben leírom ezt: és mikor feltöltöm tárhelyre akkor az Ü meg Ö betűk meg igazából az összes ákezetes betű ilyen furcsa karakterként jelenik meg :/

    • 2010. december 27. hétfő - 18:32

      Ultraweb?

    • 2010. december 27. hétfő - 20:36

      az mi ?:$

    • 2010. december 27. hétfő - 20:38

      bocs előb írtam mint gondolkoztam az az http://www.uw.hu ? mer ak nem ATW-t hazsnálom

    • 2010. december 27. hétfő - 20:50

      Én írtam baromságot, ATW-t akartam írni. Az ATW szerverén másnak is volt problémája az UTF8-al. Két dolgot tehetsz: vagy keresel másik tárhelyet, vagy átalakítod az oldalad ISO-8859-2 kódolásra és akkor az ATW-n is menni fognak az ékezetes karakterek.

  17. 2010. november 20. szombat - 20:03

    köszi, eddig azért nem néztem meg, a második videódat, mert nincs hangja a gépemnek, majd csak hétfőn lessz.

  18. 2010. november 20. szombat - 19:42

    Heló!
    Sok videódnál láttam, hogy egymás melett van a notepad++-ban, a css és html. Ezt hogy kell megoldani?

    • 2010. november 20. szombat - 19:52

      Nézd meg a második részt, abban látni fogod, hogyan kell.

  19. 2010. november 16. kedd - 19:19

    Nagyon jó videó! Már alig várom a következőt! Az interneten még nem találtam eddig olyan videósorozatot ami rendesen elmagyarázza a html-t… Sok sikert a többihez!

    • 2010. november 16. kedd - 20:41

      Már kész a második rész, csak még nem volt időm feltölteni. Úgy gondolom, hogy ez a szett legalább 5 részes lesz, de lehet, hogy több. Nincs előre elképzelt tematika, elkezdem felvenni, aztán mondom ami eszembe jut :mrgreen:

  20. 2010. november 16. kedd - 18:31

    Huuu, köszönöm a vidit, ez nagyon jól jöt…
    de van egy html filem, amit ha feltöltök 1 tárhelyre, akkor a betük “furák lesznek” a betükódols miatt..

    • 2010. november 16. kedd - 20:40

      Mi a dokumentum kódolása? A META teg-ben mit adtál meg?

    • 2010. november 18. csütörtök - 14:24

      ezt adtam meg a meta-ba
      a kódolás is UTF-8 BOM nélkül

      nem tudom mi lehet a baj 🙁

    • 2010. november 18. csütörtök - 15:14

      köszönöm !!!

    • 2010. november 27. szombat - 13:43

      Szia, küldtem e-mailt 😉

      Köszy előre is

Hozzászólás

Keresés a blogon
Kategóriák
Legújabb hozzászólások
  • Bootstrap 4 setup

    Shift + Tab...

  • Bootstrap 4 setup

    Hali. Hogy csinálod azt a videókban, hogy egyszerre törölsz több sor tabulátorát is? Hogy kijelölsz egy részt és azok mögül mind törölsz tabulátort eg...

  • Dia szkennelés házilag

    Örülök, hogy segített az írás....

  • Dia szkennelés házilag

    Nagyon szépen köszönöm, hogy leírta próbálkozásait, mert engem is gondolkodásra késztetett. Több száz diaképem van, de én sem akartam kisebb vagyont k...

  • Adobe XD VS. Lunacy

    Ez egy lebutított vektorgrafikus rajzolóprogram, semmi több. Ha az alkalmazásod / weboldalad tartalmaz raszteres elemeket, azokat PS-ben kell külön le...

  • Adobe XD VS. Lunacy

    Szerintem (ez csak az én meglátásom) az XD inkább csak mobil alkalmazás fejlesztésére van. Nem igazán látom azokat a funkciókat benne amiket PS-ben. N...

  • Adobe XD VS. Lunacy

    A Photoshop sosem volt igazán weboldal tervező program. A Fireworks közelebb volt hozzá annak idején, de azt megszüntették. Más kérdés, hogy még mindi...

  • Adobe XD VS. Lunacy

    Meg a PS amúgy sem ingyenes, szóval az Xd egy jó alternatíva az ilyen esetekre....

  • Adobe XD VS. Lunacy

    Dehogynem. Csak most ez a divat, hogy kattintható prototípusokat hozzunk létre....

  • Adobe XD VS. Lunacy

    PS nem megfelelő?...

  • Adobe XD VS. Lunacy

    Az Xd vel fogom csinálni a weboldalak layoutját ezentúl....

  • Adobe XD VS. Lunacy

    A Lunacy-ban az "images, comments, messages" részt nem sikerűlt egyenlő távolságra alakítani :) Maradjunk az XD-nél :)...