A HTML-ben hat különbséget kell tenni hat különböző fejlécszint között. Ezeket a h1 és h6 elemek határozzák meg.
<h1>Fejlécszint 1</h1> <h2>Fejlécszint 2</h2> <h3>Fejlécszint 3</h3> <h4>Fejlécszint 4</h4> <h5>Fejlécszint 5</h5> <h6>Fejlécszint 6</h6>
Az h1 a legnagyobb, az h6 pedig a legkisebb fejlécet képviseli. HTML5-tel további lehetőségeket is bemutattak a fejlécek meghatározására, amelyeket később mutatok be.
A különböző fejlécszintek segítenek a szövegek strukturálásában. Példaként orientálódjatok a könyveknél. Ott van a könyvcím, ami összehasonlítható a h1 tartalmával. Egy HTML oldalon csak egy h1 elem szerepeljen. A további szövegrészeket a többi szintről származtassuk. A főcím után jön a h2. Az h2 alkapitányokat ismét az h3 elem jelöli.
Érdekesség: A fejlécszintek nagysága először a böngészők által van meghatározva. Ti magatok azonban a CSS használatával kifejezetten meghatározhatjátok azokat. Erről később bővebben.
<h1>PSD-Tutorials.de</h1>
Egy ilyen módon meghatározott fejlécléc mögött automatikusan egy sortörés és távolság lesz a következő elemektől.
Győződjetek meg róla, hogy az indító és záró tagben a számok megegyeznek.
Bekezdések meghatározása
Az újszövegek a fejlécek mellett természetesen bekezdésekből is állnak. Ezeket az HTML-ben szintén nagyon könnyen lehet megvalósítani. Erre a p elemet használjuk. Egy ilyen megjelölt bekezdés alapból bizonyos távolságot tart a következő elemektől. Hogy ez a bekezdés végül milyen nagy, azt a CSS-szel újra le lehet irányítani.
Itt egy példa két bekezdés meghatározásához:
<p>Ez egy bekezdés</p> <p>Ez is egy bekezdés</p>
A böngészőben való megtekintés a következőképpen néz ki:
A HTML5-ben nem kötelező megadni, hogy az megnyitott bekezdések zárásra kerüljenek-e </p>. Az áttekinthetőség érdekében azonban ténylegesen használnám a záró </p>.
Manuális sortörések
A folyamatos szöveg bekezdéseken belül, listákon stb. automatikusan sortörés történik a böngésző által, ha például szélesebb, mint az ablak. Ez gyakorlatias, végül is elkerülhető a felesleges vízszintes görgetés. Ezenkívül bárhol a szöveget sortörésre kényszeríthetitek. Ezt a <br /> elemmel tehetitek meg. Fontos megjegyezni, hogy ez egy ún. önálló címke, amelynek nincs saját záró címkéje, hanem gyakorlatilag saját magát zárja.
<p>Yeh, this one's for the workers who toil night and day<br /> By hand and by brain to earn your pay<br /> Who for centuries long past for no more than your bread<br /> Have bled for your countries and counted your dead</p>
A <br /> használatakor nem számít, hogy egy sor végén vagy egy új sorban van. Az eredmény mindkét esetben így néz ki:
Angol verzió: Once again, back on the automatic line breaks inserted by browsers. These are often problematic because you can not control where the break ultimately occurs. This can lead to unwanted results. A typical example is version numbers.
iPhone 5
Ez normális esetben egy sorban kellene hogy legyen. Így itt az iPhone és az 5 között nem kellene sortörésnek lennie.
iPhone 5
Ezt sőt védett szóközökkel is meg lehet akadályozni. Egy példa:
Ezzel a karakterláncossal egy védett szóköz lesz meghatározva. A böngészőben ez egy normális szóközként jelenik meg: 
Ehhez, ahogyan azt szeretnétek, ne illesszétek be a szövegbe a szóközöket. Például ez nem fog működni:
Elõformázott szöveg
Elõfordulhatnak olyan helyzetek, amikor a szöveget pontosan úgy kell megjeleníteni, ahogy a forráskódban van elrendezve. Tipikus példa erre a programlisták, amelyek gyakran megtalálhatóak itt is a PSD-Tutorials.de oldalon.
Ehhez az HTML lehetõvé teszi a preformázott szövegrészletek meghatározását. Ekkor a böngészõ figyelembe veszi a behúzásokat, ahogyan azok a forráskódban vannak. Az alábbi példa megmutatja, hogyan lehet ezt megvalósítani:
<!DOCTYPE html> <html lang="de"> <head> <title>PSD-Tutorials.de</title> <meta charset="UTF-8" /> </head> <body> <h1>"Hallo, Welt!" in PHP</h1> <pre> <?php echo "Hallo, Welt\\n"; ?> </pre> </body> </html>
Az a szakasz, amelyet előformázott szövegként kell megjeleníteni, a pre-elemen belül van meghatározva. Add oda az indentálásokat stb. pontosan úgy, ahogyan a böngésző végső sorának meg kell jeleníteni.
A kód példáját nézve azok a furcsa karakterek, <?php és ?> tűnhetnek fel nektek. Ezek a böngészőben <?php és ?> formában jelennek meg. Az a változat, amelyet a forráskódban használtak, az karakterek maszkolásának nevezete. Ez szükségessé válik, ha az HTML saját karaktereit nem szeretnénk, hogy a böngésző értelmezze. Ha a <?php karaktereket közvetlenül beírnátok a forráskódba, a böngésző azt gondolná, hogy egy PHP-zóna nyitó jelre utal. Ezért pedig meg kell védeni a karaktereket.
• Cseréld ki a karaktert & az & karakterláncra
• Cseréld ki a karaktert < az < karakterláncra
• Cseréld ki a karaktert > az > karakterláncra
• Cseréld a idézőjeleket " karakterre
Egyébként a pre nem csak a programlisták bemutatására alkalmas. A táblázatos adatokat is könnyedén lehet így megjeleníteni. Az alábbi példa mutat egy tipikus táblázatot, amelyet kizárólag szóközökkel határoznak meg a pre-elemen belül.
<pre> Célállomás Indulás Érkezés Vágány ---------------------------------------------------------------- Berlin 10:23 14:30 2 Hamburg 11:09 13:20 13 München 12:04 15:45 1a </pre>
A böngészőben az eredmény a következőképpen néz ki:
Tény, hogy a böngészők figyelembe veszik azokat a szóközöket, amelyeket a forráskódban definiáltok. A bemutatott táblázatváltozat egyébként jól működik. Kisebb táblázatok esetén megfelelőnek találom. Amint az adatmennyiség azonban bővül, érdemes a hagyományos HTML-táblázatokhoz fordulni. Hogy ezeket miképpen lehet definiálni, természetesen ennek a sorozatnak a keretein belül ismertetem.
