Honlapkészítés Egyeteme/2.rész - HTML tagok

Az XHTML leggyakrabban használt tagjait vesszük sorba ebben a cikkben, a tagok hibáit vesszük sorra, párosítva a javított verzióval.

A Firefox böngészőhöz le lehet tölteni egy Web Developer Tools applikációt. Azt installálva a Firefox Nézet/Eszköztárak menüpontja alatt találjuk meg. Bekapcsolva láthatóvá válik a honlapok szerkezete, a CSS fül alatt az Edit CSS-t kipipálva máris látható az oldal CSS kódja. Stíluslapot módosítva azonnal megjelenik a változás a weblapon, ez arra jó, hogy tanulmányozzuk az egyes elemek funkcióit, megtervezzük saját oldalunk stílusát. A fontkészletek, betűméretek, színek itt állíthatók be. A View CSS menüponttot bejelölve már nem az alapbeállításnál alul megjelenő ablakban, a CSS szerkesztésénél látjuk a CSS stílust, hanem a böngésző nagy ablakában. Az összes ablak bezárása gombra kattintva részekként is láthatóak a CSS stílus kódok. A View Style information menüponttal a weboldal kijelölt részeinek kódját lehet megnézni, így gyorsabban azonosítható a keresett rész.

A CSS/Disable Styles/All Styles és az Information/Display Div Order funkciót bekapcsolva az elemeket piros téglalapokkal határolja el, bal felső sarokban egy sárga mezőben a div azonosítója látszik.

‹h1›...‹/h1›

A pageHeaderben, tehát az oldalfejlécben találjuk az oldal címét, alcímét. Hat különböző módon emelhetjük ki a szöveg címrészeit a ‹h1›, ‹h2›, ‹h3›,... ‹h6› tagokkal az XHTML, HTML nyelvben. Az angol heading szót jelöli a h betű a tag. Természetesen alkalmazni kell a zárótagot is mindig (). A ‹h1› nyitótaggal lehet a legnagyobb, a ‹h6› nyitótaggal a legkissebb címsort írni.

A ‹title› az oldal fejlécében más funkcióval bír. Fontos, hogy mindig a tagek funcióit megfelelően alkalmazzuk, nem törődve a végeredménnyel, a CSS stíluslapokkal az XHTML kódok megváltoztathatók.

A ‹p› nyitótaget és a ‹/p› zárótagot bekezdéseknél használjuk. A dokumentumoknál sűrűn találkozunk bekezdésekkel, jelölése az angol paragraph, azaz bekezdés szóból ered. A quickSummary, azaz rövid összefoglaló' a forráskód és a stíluslap letöltésére alkalmas. A preamble előszóként mutatja be röviden az oldalt.

A ‹a›...‹/a› tagek az angol anchor (horgony) szó kezdőbetűje. Egy oldalon belüli hivatkozásra szolgál. A href attribútum például a /zengarden-sample.html, a /zengarden-sample.css, tehát a hivatkozás címe, a title attribútum magyarázó funkcióval bír. A title attribútum akkor jelenik csak meg a weboldalon, ha az egeret a hivatkozás fölé visszük.

Az intro és supportingText részek könnyen értelmezhetőek a <div> <a> <p> <h1> <h2> tagek ismeretében.

A ‹span›...‹/span› tageket a <div> taggel együtt szokás emlegetni. Mindkettő a szövegrészen belül különít el blokkokat. A span egy szövegrészen belül teszi ezt, a div a dokumentumon belül különít el egy részt a dokumentum többi részétől.

Az ‹acronym›...‹/acronym› mozaikszavas tagek a szövegen belül egységes jelöléssel lehet kiemelni bizonyos részeket. A <acronym> tageket ritkán alkalmazzák. Itt is lehetőség van, mint az anchor alkalmazásánál title cimkét használni, az egér az acronym fölé húzásával tooltipként megjelenik a szöveg.

‹ul›‹ol›‹li›

‹ul›, ‹ol›, ‹li› tageket felsorolásnál használjuk. A linklist2 ‹div› ugyanúgy felöleli a dokumentumot, mint a linklist. A linklist2 három részre bontja az oldalt, ezek: lselect, larchives, lresources.

‹ul›
‹li›Honlapkészítés Egyeteme/1.rész - HTML‹/li›
‹li›Honlapkészítés Egyeteme/2.rész - HTML tagok‹/li›
‹li›Honlapkészítés Egyeteme/3.rész - Stíluslapok‹/li›
‹/ul›

A HTML kód végeredménye lehet szám alapú (ordered list, ‹ol›...‹/ol›) felsorolás és történhet pontokkal (unordered list, ‹ul›...‹/ul›):

* Honlapkészítés Egyeteme 1.rész - HTML
* Honlapkészítés Egyeteme 2.rész - HTML tagok
* Honlapkészítés Egyeteme 3.rész - Stíluslapok

Az (X)HTML-ben mindkettő esetén ‹li›...‹/li› tagpárt használunk. Van még egy listázási lehetőség, ez a definíciós lista, a későbbiekben kifejtésre kerül.

‹img›

A képek használatakor írunk <img> taget. Amennyiben a kép funkcióval bír az oldalban, s nem csak dekorációként működik, akkor az XHTML-be szúrjuk. Ha design elemként van jelen, akkor CSS stíluselemként kell használni. A CSS lehetővé teszi, hogy az egyes <div> elemekhez képet használjunk háttérképként. A CSS használatával a képek sokkal pontosabban helyezhetők el az oldalon. A grafikonokat érdemes XHTML-be vágni, mert úgy jobban magyarázhatóak az egyes részek.

‹img src="images/logo.jpg" width="300" height="200" alt="PC World logo" /›

Ez az első üres tag, mert nincs szöveges része, így nem kell záró cimke sem. Felbontva az elemeket, az src attribútum (source) a kép helyt és az elérési útját jelöli. Ha a (X)HTML fileoktól elkülönítve egy mappába gyűjtük a képeket és a mappán keresztül adjuk meg az elérési utat, akkor mind gépünkön, mind feltöltve megjelennek a képek. Ellenkező esetben a képek útvonala megváltozik és újra kell írni.

A width a kép szélességét a height a magasságát adja meg pixelben. A weboldal gyorsabban töltődik be ha megadjuk az adatokat. A böngésző ki tudja számolni az értékek nélkül is, ha nem írunk width és height értéket csak lassabb az oldal. Nem érdemes a böngészőre hagyni a torzítás, mert a kép minősége jelentősen romlik.

Az alt attribútum, az alternative text attribútum, helyettesítő szöveget jelent, a képről ad információt. Nem jelenik meg a böngészőben a szöveg, csak az Internet Exporernél, ott is csak a tooltipként.

XHTML 7 parancsolata

1. Az XHTML oldalak mindig érvényes dokumentumtípus-definícióval (DTD) kezdődnek.

A DTD-ből kiderül, milyen verzióban készül az oldal, illetve annak típusát. A XHTML 1.0 háromnak fajtája van: a Strict (szigorú), a Transitional (átmeneti) és a Frameset (ezt nem használjuk). A Strict oldalaknál a tartalomról szól az oldal, a design a háttérbe szorul. A Transitional oldalaknál cimkékkel (‹center›, ‹font›) és attribútomokkal (border, bgcolor, alink, vlink, ..) változtatható a weboldal megjelenése. A Strictnél ez CSS stíluslapokkal oldható meg, mert egyébként az oldal struktúrális felépítésű. A Transitional, azaz az átmeneti oldalt a HTML-ről XHTML-re szokók használják, a gyakorlottabb programozók. Akik első honlapjuknak állnak neki, azok a Strictet használják.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <title>XHTML 1.0 Example</title>
 <script type="text/javascript">
</html>

2. Kisbetűket kell használni a kódban

A weblapoknál mindig kisbetűkkel programozunk. A HTML-nél nem volt ez feltétel, ott mindkettőt lehetett használni. Az XML-nél bizonyos esetekben egyiket, illetve másikat kellett használni. Az XHTML-nél az a szabály, hogy csak kisbetűvel lehet írni tageket és attribútumokat. A <DIV> HTML oldalban fordulhat elő, XHTML-ben nem.

Helytelen: <BODY><P ID="ONE">The Best Page Ever</P></BODY>
Helyes: <body><p id="ONE">The Best Page Ever</p></body>

3. Az Értékek mindig idézőjelek között vannak A HTML-nél lehetőség volt, amikor képeket hasztáltunk az értékeit a következőképpen megadni width=300, az XHTML-nél width="300" kódot kell írni idézőjel használatával.

Helytelen: <td rowspan=3>
Helytelen: <td rowspan='3">
Helyes: <td rowspan="3">
Helyes: <td rowspan='3'>

4. Le kell zárni a tageket. Nem szabad elfeledkezni a zárótag alkalmazásáról, illetve helyes használatáról.

Helytelen: <br>
Helyes: <br />

Helytelen: <p>This is a paragraph.<p>This is another paragraph.
Helyes: <p>This is a paragraph.</p><p>This is another paragraph.</p>

5. Címkék megfelelő egymásba ágyazása. Figyelni kell a tagek megfelelő sorrendjére a már megtanult felsorolási módszernél ‹ul›, ‹li›. Ez a szabály viszont a kódolás keresztezésre vonatkozik. Az egymásba ágyazott elemek nyitó és záró címkéi nem keresztezhetik egymást.

<div id=”Címkék egymásba ágyazása helytelenül”>
      <p>Helyetelenül <span>ágyazzuk</p> egymásba!</span>
      …
</div>

<div id=”Címkék egymásba ágyazása helyesen”>
      <p>Helyesen<span>ágyazzuk</span>egymásba!</p>
      …
</div>

Helytelen: <em><strong>This is some text.</em></strong>
Helyes: <em><strong>This is some text.</strong></em>

6. Kötelező infó a képekről. Az XHTML <img> alkalmazásánál mindig kell az alt attribútumba írni. <div id=”Képeknél alt”>

      <img src="xhtml.jpg" alt="wikicommon" />
       …
 <nowiki></div>

7. CDATA rossz használata

 <link rel="stylesheet" href="/style/screen.css" type="text/css" />
 <script type="text/javascript" src="/script/site.js"></script>

Források

• Weboldalkészítő suli #3 - Építőkockák és egyéb okosságok Pcworld, 10-03-27

← 1.rész - HTML ↑ Honlapkészítés Egyeteme ↑ 3.rész - Stíluslapok →