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› szerkesztés
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› szerkesztés
‹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› szerkesztés
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 szerkesztés
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 szerkesztés
- Weboldalkészítő suli #3 - Építőkockák és egyéb okosságok Pcworld, 10-03-27