Első lecke
Először töltsd le a forrást, és ebben kövesd a magyarázatot!
Első alkalommal egy egyszerű weblapot készítünk, ami két oldalból áll (és még nem szép, de legalább csúnya:). Megnézünk néhány egyszerű HTML tag-et, valamint megismerkedünk a CSS alapjaival.
A mintán látható, hogy egy bemutatkozó oldalt fogunk készíteni.
Amennyiben nem WYSiWIG szerkesztőt használsz, akkor kezdetnek használd a head.txt állományt. (Illeszd be a head.txt állományban található szöveget a szövegszerkesztődbe). Mentsd el index.html néven.
Mi található ebben a fájlban? A HTML kódunk fejrésze. Az első sorban megadjuk a böngészőnek, hogy milyen szabvány szerint kell értelmeznie a kódunkat. További lehetséges szabványok itt.
A <head> tag-ek között kötelező szerepeltetni a <title> címkét, amivel megadjuk a böngésző keretén megjelenő címet. A <meta> elemet arra használjuk, hogy megadjuk az oldalunk karakterkódolását (iso-8859-2), ezzel elérjük, hogy a magyar ékezetes karakterek is helyesen jelenjenek meg. Sok egyéb hasznos információ megadható a <meta> elem segítségével, de ezekről későbbi leckékben lesz szó.
A <link> tag-gel magadjuk az oldalhoz kapcsolódó stílusleírást, amivel formázni fogjuk az oldalunkat. Azt a css állományt majd akkor készítjük el, ha már a HTML dokumentununkkla végeztünk.
Látható, hogy a dokumentum törzse a <body> címkék között található. Ez a rész jelenti az oldalunkon megjelenő tartalmat.
Ezen az egyszerű oldalon is sok különböző HTML tag-et fedezhetünk fel. Nézzük ezeket sorban:
- <h1>, <h2>: ezek a címek az oldalunk logikai felépítésében játszanak szerepet, gyakorlatilag címsorként kezeljük őket. A HTML hat különböző címsortt különböztet meg (<h1>...<h6>). Fontos, hogy ezeket az elemeket ne használjuk arra, hogy például nagyobb betűvel szeretnénk írni, hanem csak akkor, ha az adott szöveg, ténylegesen cím.
- <ul>: felsorolást jelent, mégpedig nem számozott felsorolást. A hobbi oldalon találjuk a párját az <ol>-t, ami a számozott felsorolást jelenti.
- <li>: az <ul>-el és az <ol>-el csak a felsorolások elejét és végét adjuk meg. A konkrét felsorolás elemeket a <li> határozza meg.
- <p>: talán illett volna ezzel kezdeni. A leggyakrabban használt HTML címke, bekezdést jelent. A folyamatos szövegeinket bekezdésbe kell szerveznünk.
- <a>: ez a címke írja le a hivatkozást. Fontos, hogy ennek már van egy kötelező attribútuma, mégpedig a href, ami a hivatkozás útvonalát adja meg. Amennyiben külső hivatkozást adunk, meg (pl.: kissmark.comli.com), meg kell adnunk a teljes URL címet (http://...). Ha a saját oldalainkra (pl.: hobbi.html) hivatkozunk, elég relatív hivatkozást használnunk.
- <img />: kép beszúrása. Kötelező paramétere az src, amivel a beszúrandó képet adjuk meg, valamint az alt, mellyel egy szöveges leírást kell megadnunk a képhez.