< WebKészítés /> interaktív webszerkesztő tananyagok
Blokk szerű szöveges elemek
Rajta hát, lessük meg a body-ját! Minden, mi szemnek ingere, itt követhetjük el, a <body></body> címkék között. Az XHTML-ben megkötés, hogy nem lehet kapásból szöveget írni a törzsbe, hanem előtte valamilyen szöveges elemet, például egy bekezdést kell nyitnunk. Mielőtt rátérnék a többi megoldásra, tisztáznunk kell a következőket: blokk-szerűnek az egy v. több sor magas és teljes képernyő széles téglalapszerű elemet, sorbelinek pedig az egy sor magas és adott szélességü elemet hívjuk.
Esztétikus és praktikus a címek és alcímek kiemelése. Erre szolgálnak a header tag-ek: <h1></h1>, <h2></h2>, ... egészen <h6></h6>-ig. A számok itt a méreteket jelölik, ugyanis az 1 a legnagyobb és a 6 a legkisebb, de a gyakorlatban 1-3-ig használjuk őket. Jellemzőjük hogy általános esetben a böngésző alapértelmezése a tényleges méret, illetve előtte és utána térköz (üres sor) választja el őket a többi elemtől.
Ez után jöhet a fent említett bekezdés (v. általános szöveg) <p>...</p>. Ő is rendelkezik alapesetben a térköz tulajdonsággal. A bekezdésen belül a már ismert sortöréssel <br /> tördelhetjük a szöveget.
Ha próbáltál már pár sort megjeleníteni, láthattad, teljesen mindegy a fájlban hová teszed a sortörést vagy hány szóközt, illetve tab-ot használsz. Folyamatos szöveget kapsz eredményként csak egy-egy szóközzel. Ha mindenképpen ragaszkodni szeretnél ehhez a szöveges (txt) fájlokból ismert formázáshoz, használhatod a <pre>...</pre> (Preformatted ~ előre formázott) címkét. Ha pedig több ún. törés nélküli közöket szeretnél egymás után tenni, azt az ismételt szóközök helyére tett speciális karakterrel (további speciális karakterek listája itt) érheted el.
Idézetekhez (beljebb húzott bekezdés) szokás a <blockquote></blockquote> blokk idézetet használata. Megegyezik gyakorlatilag a fentiekkel, csak bal oldali margója nagyobb és benne közvetlenül csak blokk egység következhet.
Ha már a beljebb húzásoknál tartunk, meg kell említeni a klasszikus típusát, a felsorolást is. Három típusa, rendezett (Ordered List), rendezetlen (Unordered List) és definíció (Definition List) lista létezik. A Tag-jeik a rövidítésükből következnek: <ol></ol>, <ul></ul> és <dl></dl>. A különbség a rendezett és rendezetlen közt, hogy előbbi számozással illetve betűzéssel, ezzel szemben utóbbi csak egyforma szimbólumokkal jelölt. Ám ezekkel még csak a listát jeleztük, belső elemeiket (List Item) első kettőnél a <li> ... </li> címkék fogják közre. A definíció kicsit bonyolultabb, hiszen kell lenni egy definiáltnak (<dt> ... </dt>) és egy vagy több definíciónak (<dd> ... </dd>). Megjegyezném, hogy HTML-ben elég volt csak a nyitó <li>,<dt>,<dd>-t használni. Az őt követő szöveg mind egy elemet jelentett, amíg a következővel új elem nem lett létrehozva.
Bármilyen meglepő, a vonal (<hr />) is a fentiekhez hasonló ún. blokk egység. Végül pedig említeném a kontaktinformációk számára kitalált <address>...</address> címkét. Ritkán használjuk, tulajdonképpen csak egy sima bekezdés dőlt betűs szöveggel.
Vonalas szöveges elemek
De hogy formázhatunk egy-egy, a blokkon belüli kisebb szövegegységeket? Magától érthetődik: sorbeli elemmel! A méretet a környezetéhez képest növelhetjük, illetve csökkenthetjük a <big>nagyít</big> és <small>kicsinyít</small> Tag-ekkel. Beljebb húzáshoz a <q>behúzás</q>, vastagításhoz a <b>bold~vastag</b>, döntéshez a <i>italic~dőlt</i>, áthúzáshoz a <del>deleted~áthúzott</del>, alsó és felső indexhez pedig a <sup>felső</sup> és <sub>alsó</sub> használhatók. Utóbbiakat könnyen megjegyezhetjük, hiszen a "P" és "b" "karikája" jelzi a magasságot. Az <em></em> kihangsúlyoz és a <strong></strong> pedig még ennél is jobban. A HTML weblapok számára még alkalmazható a <strike>áthúz</strike> és az <s>strike~áthúz</s>, az <u>underline~aláhúz</u> és a <center>középre</center> is. Ők XHTML-ben kerülendők!
A speciális formázáshoz a HTML-ben a <font>...</font> címkét alkalmazták, az XHTML-ben viszont kerülendő ez a forma, így a <span>...</span> javasolt. A későbbiekben megtanuljuk majd őt tovább formázni, jelenleg csak azt kell tudni, hogy vele elkülöníthetők bizonyos szavak, szócsoportok a többitől egy blokkon belül. Speciális esetben még lehet használni: a <code>kód</code>, <samp>példa</samp> és <var>változó</var> címkéket programkódok megjelenítésére, és a <kbd>keyboard</kbd>-t billentyű jelzésére. A <cite>...</cite> más forrásból való ízelítésre jó, a <tt>...</tt> nyomtatott stílusú szöveget, a <dfn>...</dfn> zárt formula definícióját, a <bdo>...</bdo> kétirányú szöveget produkál. Az <abbr rövidítés~abbrevationtitle="gyorstipp" ></abbr> fontos funkciója pedig, hogy egy title attribútummal felvértezve meg fog jelenni a fölötte tartott egér hatására annak értéke (gyorstipp). Ennek egy változata az <acronym>mozaikszó</acronym>, mely ugyan szabványos, mégis egyre inkább kiszorulni látszik. Fontos, hogy ezt a title attribútumot minden HTML/XHTML body-beli eleme megkaphatja.
Eddig még senki sem írt hozzászólást... Légy te az első!
Új hozzászólás írásához lépj be fiókodba vagy regisztrálj oldalunkon!