Za dostupnost hrvatskih dijakritičkih znakova (č, ć, đ, š i ž) u tekstu, rabimo utf-8 raspored znakova.
Trebamo najprije definirati html5 standard, umetanjem elementa <!doctype html>. Zatim je potrebno, unutar <head> elementa, umetnuti <meta> element i dodijeliti svojstvu charset vrijednost utf-8.
Isprobajte sljedeći primjer:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Hrvatski dijakritički znakovi</title>
</head>
<body>
<h1>Šuštanje lišća u šumi</h1>
<p>Čudesan je džem od jagoda.</p>
</body>
</html>Želimo li prikazati odlomak (engl. paragraph) na web stranici, koristimo html element <p>. Odlomak je blok element i svaki put počinje u novom retku.
Pogledajte sljedeći primjer:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Html odlomci</title>
</head>
<body>
<h1>Html odlomci</h1>
<p>Ova web stranica ima tri odlomka.</p>
<p>Idemo korak po korak.</p>
<p>Došli smo do početka.</p>
</body>
</html>Html razlikuje 6 veličina naslova. Najveći je naslov veličine 1, kojem odgovara element <h1>, a najmanji je naslov veličine 6, kojem odgovara element <h6>.
<h1> i <title>Razlikujemo naslove <h1> do <h6> koji su ispisani u prozoru web preglednika, od naziva web stranice <title> koji je ispisan na kartici web stranice.
Evo html primjera s naslovima:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Html naslovi</title>
</head>
<body>
<h1>Glavni naslov</h1>
<h2>Naslov veličine 2</h2>
<h3>Naslov veličine 3</h3>
<h4>Naslov veličine 4</h4>
<h5>Naslov veličine 5</h5>
<h6>Naslov veličine 6</h6>
</body>
</html>Google preporučuje stavljanje samo jednog glavnog naslova, u jednom html dokumentu, no to je na vama. Važno je istaknuti kako tekst koji se nalazi u glavnom naslovu, ima posebnu težinu u SEO optimizaciji web stranice.
Za podebljanje teksta, rabimo element <b> (engl. bold). Ako želimo tekst istaknuti, također možemo koristiti element <strong>.
<b> i <strong>Html element <b> označava podebljani tekst, dok html element <strong> označava tekst koji ima veću važnost. Sadržaj <strong> elementa je također prikazan podebljanim slovima.
Za naglašavanje rabimo element <em> (engl. emphasized) koji ima sličnu zadaću kao i element <i> (engl. italic). Html element <mark> element, definira tekst koji treba biti istaknut ili označen.
<i> i <em>Html element <em> označava naglašen tekst. Sadržaj elementa je najčešće prikazan nakošenim slovima. Html element <i>, označava tekst koji je drugačijeg glasa ili raspoloženja. Sadržaj je također prikazan nakošenim slovima
Kada želimo tekst podvući koristimo element <u> (engl. underline). Želimo li u odlomak umetnuti tekst, koji će biti prikazan manjim slovima od ostalog teksta, koristimo element <small>.
Tekst u indeksu prikazujemo pomoću <sub> elementa (engl. subscript), a u eksponentu pomoću <sup> elementa (engl. superscript).
Želimo li naglasiti dio teksta, koji smo umetnuli u novoj doradi html dokumenta, označit ćemo ga elementom <ins> (engl. insert). Sadržaj <ins> elementa web preglednici obično prikazuju podvučenim tekstom. Tekst koji smo nakon nekog vrjemena izbacili iz web stranice, označavamo elementom <del> (engl. delete). Sadržaj <del> elementa web preglednici obično prikazuju s crtom preko teksta.
elementi sadržaja, linijski elementiSve html elemente za oblikovanje teksta zovemo elementima sadržaja. Uz sadržaj, oni imaju početnu i zavšnu oznaku. Oni su i linijski elementi (ostaju u istom retku kada ih umetnemo unutar drugog blok ili linijskog elementa).
Primjer načina uporabe opisanih html oblikovanja:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML oblikovanje</title>
</head>
<body>
<p>Korištenje em elementa možemo <em>istaknuti</em> tekst.</p>
<p>Radimo preinake <del>pa smo izbacili</del> ovaj dio teksta.</p>
<p>Sljedeći dio teksta smo <ins>umetnuli</ins>.</p>
<p><b>Ruđer</b> Bošković je <i>veliki znanstvenik</i>.</p>
<p>Strong elementa daje <strong>važnost</strong> tekstu.</p>
<p>Ovaj dio teksta je <mark>označen</mark>.</p>
<p>Obična i <u>podvučena</u> slova.</p>
<p>Obična i <small>smanjena</small> slova.</p>
<p>Ovdje koristimo indeks: H + 2O = H<sub>2</sub>O.</p>
<p>Ovdje koristimo eksponent: P = r<sup>2</sup>π.</p>
</body>
</html>Kada želimo razlomiti dva dijela web stranice vodoravnom crtom, koristimo element <hr /> (engl. horizonatal rule). Umetnuta crta zauzima zadano 100% roditeljskog elementa. Dodavanjem svojstva width, mijenjamo širinu crte. Vrijednost svojstva možemo umetnuti bilo u postotcima % ili pikselima px. Želimo li promijeniti debljinu crte, koristimo svojstvo size.
Ovaj primjer zorno prikazuje, kako rabiti vodoravnu crtu:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Html vodoravna crta</title>
</head>
<body>
<p>Skriptni jezici i web programiranje.</p>
<hr size="8" />
<p>Uvod u baze podataka.</p>
<hr width="50%" />
</body>
</html>Web preglednik zanemaruje prelazak u novi retak unutar kôda html dokumenta.
Želimo li prisiliti web preglednik da prijeđe u novi redak u tekstu, koristimo element <br /> (engl. break).
Primjer uporabe elementa <br />:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Html novi redak</title>
</head>
<body>
<p>Gundulić: <br />O lijepa, o draga, o slatka slobodo!<br />
Teci Savo, Dravo teci.</p>
</body>
</html>Web preglednik također zanemaruje naše višestruke razmake u tekstu i prikazuje na web stranici samo jedan razmak.
Ponekad želimo unutar tekst umetnuti više od jednog razmaka. Tada na mjestu gdje želimo dodatan razmak, trebamo umetnuti grafički simbol .
Sljedeći primjer, puno govori o beskorisnosti umetanja novih redaka i više uzastopnih razmaka:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Html razmaci</title>
</head>
<body>
<p>Zemlja se vrti oko Sunca.</p>
<p>Zemlja se vrti oko Sunca.</p>
<p>Zemlja se vrti
oko
Sunca.</p>
</body>
</html>Html element <pre> (engl. preformatted) koristimo za unos unaprijed formatiranog teksta. Jednostavnije rečeno, tekst koji će web preglednik prikazati zajedno sa svim razmacima i svakim prijelazom u novi redak treba se nalaziti unutar elementa <pre>. Sva slova teksta unutar html elementa <pre> su iste širine. Koristi se i posebna vrsta slova u odnosu na ostali tekst na web stranici.
Pogledajte!
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Html predefinirani tekst</title>
</head>
<body>
<pre>Zemlja se vrti
oko
Sunca.</pre>
</body>
</html>CDN pohrana slika i videa.
AI povećanje slika.
Pretvorba formata slika: webp...
25Gb podataka.
Zašto ne sada?
