HTML 2. lecke

...amit a html tag-ekről tudni kell Az első leckében elkészítettük az első és lehető legegyszerűbb html oldalt, amellyel megjelenítettünk egy üzenetet. Hurrá! Értelmezzük a beírt kódokat és szabályokat a kódíráshoz.

HTML tag-ek

A html dokumentum egy szöveges állomány, elemekből épül fel, s az egyes elemek felépítéséhez, meghatározásához használjuk a tag-eket.

• A html tag-ek definiálják, határozzák meg a html dokumentum elemeit. Html elem lehet egy kiemelt szövegrész, egy bekezdés, a dokumentum feje, törzse,... Ilyen elem volt az 1.leckében a honlap címét megadó:<title>Honlapom címe</title> ahol az elemet bevezeti egy <title> tag és a végén lezárja ennek a párja: </title>
  Ez a cím fog megjelenni a böngésző ablakának címsorában, a html elemet meghatározó tag title szövege miatt.
• Minden tag-et két jel ölel át: a kisebb < és nagyobb jel > (csúcsos zárójelnek is mondják őket)
• Normál esetben a tag-ek párosával léteznek: a html elem kezdetét meghatározó nyitó tag (pélkánkban a html dokumentum címének kezdetét jelölő <title>) és a végét jelző záró tag (példánkban a cím szövegét lezáró </title>) Léteznek páratlan tag-ek is, pl a soremelést megvalósító tag a <br>, vagy a vízszintes vonalat megjelenítő tag a <hr> Nem feledkezhetünk meg azonban arról, hogy a html kód felett már eljárt az idő. A továbbfejlesztések és szabványoknak köszönhetően az XML-ben és XHTML-ben már minden tag-et zárni kell :-), erről még később. Az biztos, hogy a honlapkészítést a html tanulásával érdemes kezdeni. Itt egy határoló vonalat látsz, amelyet a hr szimpla tag jelenít meg:
• A nyitó és záró tag között helyezkedik el a html elem tartalma. Mostani példánkban a html dokumentum címének szövege ez a bizonyos html elem tartalma: 'Honlapom címe'
• A tag szövege nem kis- és nagybetű érzékeny. Ez azt jelenti, hogy ugyanúgy értelmezi a böngészőnk a <title> -ként leírt tag-et, mint a <TITLE> kódot, nincs közöttük különbség, így is megadhatjuk és úgy is, az eredmény ugyanaz.
  Fontos: a W3C (World Wide Web Consortium) a webes szabványok megalkotói a kisbetűs tag-ek használatát ajánlják itt a HTML 4-ben, s a követekező generációs XHTML-ben szintén!

Tag attribútumok, tulajdonságok

Minden tag bír, bírhat tulajdonságokkal, vagy jellemzővel, amelyeket együttesen attribútumnak mondunk. Egy ilyen attribútum további tulajdonsággal ruházza fel a magába foglalt html elemet.

• Az attribútumot egy név - érték páros ad meg, amelyeket egyenlőségjel köt össze. Pl.: border="3", amely attribútuma lehet egy bekezdésnek, táblázatnak, stb - 3 pontos szegéllyel látja el a tag tartalmát.
• Minden attribútum számára létezik egy egyértelműen meghatározó, egyedi név Az előző pontban írt attribútumban a border az attribútum neve
• Az attribútum értékét dupla macskakörmök (felső idézőjelek) között kell megadni. Példánkban a border attribútum értéke 3, amelyet macskakörmök között adtunk meg. Megengedett a szimpla macskaköröm használata is, egymásba is ágyazható módon, azzal a feltétellel, hogy mindig az utóbb kezdett tag-et kell előbb lezárni. Azon, ritkán előforduló helyzetről van itt szó, amikor az attribútum értékébe a macskakörmöt is szeretnénk bele foglalni: name='A nap "Jóreggelt" köszöntéssel kezdődik'
• Az attribútumot a nyitó tag-be kell beírni, szóközzel választva el a tag nevétől és az esetleges további attribútumoktól. Pl az elválasztó vonalnak adjunk sárga színt:
  

  <hr color="yellow">

  A színek elnevezéseit itt találhatod meg.

Egy apró gyakorlat

A leckében emlegettem a szimpla tag-eket, hát próbáld ki a soremelést meghatározó br tag-et és a hr elválasztó vonal tag-eket!

• Az első honlap forrását megnyitva az editorban, a body nyitó és záró tag-je közé írj be pár sor szöveget, majd jelenítsd meg a böngésződben, illetve frissítsd a tartalmat, miután a forráskód módosítást már mentetted! Látni fogod, hogy hiába írtad az editorban külön sorokba a szöveget, a böngésződ folyamatos szöveget jelenít meg :-)
• Szúrj a forráskódba a megfelelő helyekre, ahol sortörést szeretnél elérni soremelés tag-et:
  

  <br>

  , majd mentsd a módosításokat és frissítsd a böngésződ tartalmát, az eredmény meggyőző, ugye?

   

• Szúrj be határoló vonalat, ehhez az alábbi kódot kell a forráskódba beszúrnod:
  

  <hr color="yellow">

Csatolmányként ide tettem a html dokumentumot, a bejelentkező felhasználók számára. (a honlap sajátossága miatt került a végére a .txt amelyet letöltés után le kell vágnod a fájl nevéből)