Uvlačenje teksta može se izvršiti na različite načine.
Međutim, ispitujemo najčešće tehnike uvlačenja teksta na vašoj web stranici radi kompatibilnosti s različitim preglednicima i pristupačnosti.
Preporučena metoda sa CSS-om i HTML-om
CSS je najčešće korišteni i preporučeni način za uvlačenje teksta ili odlomka.
Evo nekoliko primjera kako se CSS može koristiti za uvlačenje teksta.
Između vašeg elementa <head></head> HTML, stavila bi se svaka od ovih instanci.
Sljedeći kôd stvara klasu stila “tab” koja uvlači tekst i odlomak od 40 piksela ulijevo.
<style type="text/css">
<!--
.tab { margin-left: 40px; }
-->
</style>Gornji kôd možete koristiti u <head>, a na sljedeći način se koristi u odlomku <p>.
<p class="tab">Primjer kartice</p>CSS koji je uključen u vaš HTML dokument, kao što je gore pokazano, poznat je kao “in-line” CSS.
Zgodan je za brzo podešavanje, ali ga je teško mijenjati na duge staze.
Umjesto toga, sav svoj CSS kôd možete staviti u zasebnu datoteku s nastavkom .css.
Zatim se možete povezati s ovom pojedinačnom datotekom sa bilo koje HTML stranice i taj će dokument moći pristupiti svojstvima CSS-a.
Budući da je sav CSS definiran na jednoj lokaciji, upotreba vanjske CSS datoteke olakšava naknadno mijenjanje CSS-a.
Dodajte sljedeći redak u <head></head> element vašeg HTML dokumenta za povezivanje s vanjskom CSS datotekom (nakon oznake, a prije oznake).
U donjem primjeru smo nazvali našu .css datoteku osnovni.css.
<link rel="stylesheet" Type="text/css" href="http://www.example.com/osnovni.css">Nakon što se datoteka .css generira, izmijenite je i dodajte identičan CSS kôd, isključujući ekstenziju datoteke .css.
.tab { margin-left: 40px; }Konačno, nakon što obavite gore navedene korake, možete umetnuti bilo koji tekst pomoću iste metode, <p class=”tab”>.
Postoje i druge vrste uvlačenja.
Umjesto prethodnog CSS retka, koristili biste sljedeći redak samo ako želite samo uvući prvi red odlomka.
Preporučena metoda pomoću HTML-a
Pomoću ugrađenog stila u HTML-u možete postići iste rezultate kao gore.
Iako korištenje gornjeg primjera CSS-a olakšava održavanje na brojnim web stranicama, možete koristiti sljedeći primjer ako samo jednom morate koristiti stil.
<p style="margin-left: 40px">Ovaj tekst je uvučen.</p>Sadržaj u oznaci pasusa je u ovom prvom primjeru uvučen 40 piksela ulijevo.
Uvlačenje se ne primjenjuje ni na jednu drugu oznaku paragrafa.
<p style="text-indent: 40px">Ovaj tekst je uvučen.</p>
U ovom drugom primjeru samo će prvi red teksta u odlomku biti uvučen 40 piksela ulijevo.
U tom odlomku daljnji redovi teksta nisu uvučeni.
Drugačiji pristup
Oznake, kao što se vidi u sljedećem primjeru, su još jedna česta (ali netačna) tehnika uvlačenja teksta.
Iako je ovo prikladnija opcija, ima problema s pristupačnošću.
Ovaj element se koristi za citiranje teksta, a ne za uvlačenje.
<blockquote>Ovaj tekst će biti uvučen.</blockquote>