HTML-je skiriami šeši skirtingi antraštinių lygių tipai. Šie yra apibrėžiami naudojant elementus h1 iki h6.
<h1>Antraštės lygis 1</h1> <h2>Antraštės lygis 2</h2> <h3>Antraštės lygis 3</h3> <h4>Antraštės lygis 4</h4> <h5>Antraštės lygis 5</h5> <h6>Antraštės lygis 6</h6>
Taip, h1 reprezentuoja didžiausią, o h6 - mažiausią antraštę. HTML5 įvedė papildomų antraščių tipų, kurie bus parodyti vėliau.
Skirtingi antraščių lygiai padės jums struktūrizuoti tekstus. Kartoju, naršyklės paprastai nustato antraštės dydį. Tačiau jūs galite nurodyti jį išreikščiai naudojant CSS. Apie tai daugiau vėliau.
Antraščių lygius galite paprastai naudoti. Parašykite h, prieš tai pridėdami pageidaujamą lygio skaičių.
<h1>PSD-Tutorials.de</h1>
Už šito tipo antraščių automatiškai pridedamas eilučių pakeitimas ir atstumas nuo kito elemento.
Būtinai atkreipkite dėmesį, kad skaitmenys pradiniame ir uždarinėjime žymėjimų turi būti identiški.
Paragrafai apibrėžti
Be antraštės, tekstai taip pat susideda iš paragrafų. Tokius paragrafus HTML'e taip pat galima paprastai nustatyti naudojant p elementą. Taip pažymėtas paragrafas pagal nutylėjimą turi tam tikrą atstumą nuo sekamų elementų. Tai, koks ilgas galutinis paragrafo atstumas bus, vėlgi, gali būti valdomas CSS.'
Štai pavyzdys su dviem paragrafų apibrėžimais:
<p>Tai yra paragrafas</p> <p>Tai taip pat yra paragrafas</p>
Naršyklės automatiškai pakeis teksto eilutėmis teikdamos per mažą plotį, jei pvz., bus platus kaip naršyklės langas. Tai patogu, nes tai padės išvengti nereikalingo horizontalaus slinkimo. Be to, galite leisti teksto linijas pakeisti bet kuriame norimame etape. Tai būtina naudoti <br /> elementui. Atkreipkite dėmesį, kad tai yra taip vadinamas autonominis žymėjimas, kuris neturi uždaromo žymėjimo, bet tiesiog užsidaro pats.
<p>Šis skirtas darbuotojams, kurie trunka naktį ir dieną<br /> Rankomis ir protu dirba, kad užsidirbtų savo atlyginimą<br /> Kurie amžius eilės, ne tik už duoną<br /> Kraujavo už savo šalis ir skaičiavo mirtusius</p>
Pasitelkus <br />, nesvarbu, ar jis yra eilės pabaigoje, ar atskiroje eilutėje, rezultatas bus toks pat:
Dar kartą apie automatiškus naršyklių eilučių pakeitimus. Tai dažnai kelia problemų, nes negalima kontroliuoti, kur galutinai įvyks pakeitimas. Todėl gali atsirasti nepageidaujamų rezultatų. Tipiškas pavyzdys to yra versijos numeriai.
iPhone 5
Tai turėtų stovėti vienoje eilutėje. Eilutės pakeitimas tarp iPhone ir 5 neturėtų vykti čia.
iPhone 5
Tokius atvejus galima išvengti naudojant taip vadinamus apsaugotus tarpų simbolius. Pavyzdys:
Ši simbolių eilutė nusako apsaugotą tarpą. Naršyklėje tai bus rodoma kaip įprasta tarpas: 
Kad šie simboliai būtų aiškiai, negalite įterpti tarpų į šaltinio tekstą. Pvz., tokia situacija neveiktų:
Preformatuotas tekstas
Gali būti situacijų, kai tekstą norima atvaizduoti tiksliai taip, kaip jis yra išdėstytas šaltiniame tekste. Tipiškas pavyzdys yra programinio kodo pavyzdžiai, tokie, kokius dažnai rasite čia, PSD-Tutorials.de.
HTML leidžia apibrėžti preformatuotus teksto blokus tam tikriems tikslams. Naršyklė tuomet atsižvelgia į įtraukas, kaip jos yra nurodytos šaltiniame kode. Sekantis pavyzdys parodo, kaip tai galima padaryti:
<!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>
Teksto dalis, kuri turi būti rodoma kaip preformatuotas tekstas, apibrėžiama pre-elementų. Čia įklijuokite įtraukas ir kt. tiksliai taip, kaip jos turi būti atvaizduojamos naršyklėje.
Žiūrint į pavyzdinį kodą, pastebėsite keistus simbolius <?php ir ?>. Naršyklėje jie bus atvaizduojami kaip <?php ir ?>. Šaltiniame kode naudojamas variantas vadinamas simbolių maskavimu. Tai būtina, kai norite, kad naršyklė neinterpretuotų HTML savybinių simbolių. Jei tiesiog įdėtumėte kodą <?php, naršyklė manytų, kad tai yra PHP srities pradžia. Todėl simboliai turi būti maskuojami.
• Keiskite simbolį & į eilutę &
• Keiskite simbolį < į eilutę <
• Keiskite simbolį > į eilutę >
• Keiskite kabutes į "
Beje, pre tinkamas ne tik programinio kodo atvaizdavimui. Taip pat galite taip paprastai atvaizduoti lentelinius duomenis. Šiame pavyzdyje rodoma tipiška lentelė, kuri yra sukurtas tik per tarpus viename pre-elemente.
<pre> Tikslas Išvykimas Atvykimas Peronas ---------------------------------------------------------------- Berlin 10:23 14:30 2 Hamburg 11:09 13:20 13 München 12:04 15:45 1a </pre>
Rezultatas naršyklėje atrodo taip:
Iš tikrųjų naršyklė atsižvelgia į tarpus, kuriais yra nurodyti šaltiniame tekste. Pateiktas lentelės variantas veikia pakankamai gerai. Mažesnėms lentelėms manau tai yra visiškai tinkamas variantas. Tačiau kai duomenų apimtis tampa didesnė, geriau grįžti prie klasikinių HTML lentelės. Kaip jas apibrėžti, taip pat sužinosite šioje serijoje.
