Kako napraviti grafičke oznake u HTML-u

Korištenje grafičkih oznaka pomaže razbiti velike dijelove teksta i istaknuti popise korisnih informacija. Točke s grafičkim oznakama lako je stvoriti u softveru za obradu teksta, ali kada upisujete HTML dokument, morate znati kôd za njihovu izradu. Za izradu popisa s grafičkim oznakama nije potrebno puno koda. Zamotajte svaki popis u

oznake, a zatim omotajte cijeli popis u oznake

ili "neuređen popis". Tada možete učiniti što god želite s popisom s grafičkim oznakama koristeći kod Cascading Style Sheet.

1. korak

Napišite tekst za svoje grafičke oznake. Započnite svaku točku na vlastitoj liniji. Zamotajte svaki redak u

i

oznake ovako:

Ovo je točka s grafičkim oznakama

Ovo je još jedna točka

2. korak

Napravite prazan redak iznad popisa s grafičkim oznakama i zatim upišite početni

oznaku na tom retku. Pronađite kraj svog popisa s grafičkim oznakama i zatim tamo stvorite još jedan prazan redak. Upišite završni

oznaku na toj liniji. Ako kasnije želite stilizirati popis pomoću CSS-a, dodajte atribut klase ili ID-a u početnu oznaku

. Evo primjera kratke liste s grafičkim oznakama s ID atributom:

• Metak jedan
• Drugi metak

3. korak

Upotrijebite "style" za izradu popisa s grafičkim oznakama pomoću CSS koda. Dodajte CSS kod između

oznake između i oznake ili možete napisati CSS kod u vanjsku .CSS datoteku i ugraditi datoteku pomoću oznake poput ove:. Promijenite "path/to/stylesheet.css" sa stazom do .CSS datoteke koju izradite. Upotrijebite atribut ID ili class za odabir popisa s grafičkim oznakama, na sljedeći način:

#mylist li { font-style:italic; }

Gornji kod odabire sve

oznake unutar oznake s ID-om "mylist." Zamijenite hash točkom pri odabiru atributom klase.

4. korak

Koristite svojstvo "list-style" u CSS-u da biste promijenili vrstu grafičke oznake. Dostupne vrste grafičkih oznaka uključuju otvorene krugove, popunjene diskove i kvadrate za nenumerirane, neabecedne popise. Evo primjera za kvadratne grafičke oznake:

#mylist li {list-style:square;}

Savjet

Koristite

umjesto
za stvaranje uređenih popisa. Zatim možete postaviti vrstu "stil popisa" na različite vrste brojeva ili slova.

Stvorite slikovne grafičke oznake navođenjem "none" za atribut "list-style", a zatim dajte svaki

• označite pozadinsku sliku koja se ne ponavlja, lijevo poravnanu. Dodajte ispunu na lijevu stranu svakog
• za pomicanje teksta, inače će se preklapati sa slikom.