HTML naslovi, podebljan i nakošen tekst, indeks i eksponent, razmaci i prazni redci, vodoravne crte, citati, umetanje i brisanje teksta.
CDN pohrana slika i videa.
Pretvorba formata slika: webp...
Vrhunsko AI povećanje slika!
25Gb podataka.
Zašto ne sada?
HTML razlikuje 6 razina naslova u tekstu. Naslovi se međusobno razlikuju po veličini fonta. Najveći je glavni naslov (naslov veličine 1) odnosno element <h1>, a najmanji je naslov veličine 6 odnosno element <h6>. Potrebno je razlikovati naslove <h1> do <h6> unutar teksta web stranice od naslova web stranice <title> koji se ispisuje na kartici web stranice.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML naslovi</title>
</head>
<body>
<h1>Ovo je glavni naslov </h1>
<h2>Ovo je naslov razine 2</h2>
<h3> Ovo je naslov razine 3</h3>
<h4> Ovo je naslov razine 4</h4>
<h5> Ovo je naslov razine 5</h5>
<h6> Ovo je naslov razine 6</h6>
</body>
</html>Želimo li umetnuti tekst unutar web stranice najjednostavnije je koristiti za to html elemente odlomka: <p> (engl. paragraphs). Svaki html odlomak počinje u novom retku. Želimo li oblikovati tekst koristimo oznake elemenata za podebljan ili nakošen tekst, tekst u eksponentu ili indeksu i druge.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML odlomci</title>
</head>
<body>
<p>Odlomak se sastoji od jedne ili više rečenica. </p>
<p>Svaki odlomak počinje u novom retku.</p>
<p>Poglavlja u knjizi imaju podnaslove. </p>
<p>Unutar podnaslova može se nalaziti jedan ili više odlomaka.</p>
</body>
</html>HTML omogućava podebljavanje dijela teksta pomoću elementa <strong>. Ovaj element je linijski što znači da on ne uzrokuje prijelaz u novi redak za razliku od elementa odlomka <p> koji je blok element i nakon njega web preglednik prelazi u novi redak.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML podebljano</title>
</head>
<body>
<p>Pomoću ovog elementa <strong>podebljamo</strong> slova</p>
<p>U opisu možemo <strong>važnije stvari</strong> podebljati.</p>
</body>
</html>Pomoću HTML-a možemo nakositi dio teksta korištenjem elementa <em>. Ovaj element je također linijski što znači da on ne uzrokuje prijelaz u novi redak za razliku od elementa odlomka <p> koji je blok element (nakon njega web preglednik prelazi u novi redak).
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML nakošen tekst</title>
</head>
<body>
<p>Pomoću ovog elementa možemo <em>nakositi</em> tekst.</p>
<p>Marko Polo je putovao u <em>Kinu</em>.</p>
</body>
</html>U html-u možemo umetati tekst u indeks i eksponent kao u primjeru H20 ili z2 = x2 + y2. I html elementi za prikazivanje teksta u indeksu i eksponentu su linijski elementi.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML indeks i eksponent</title>
</head>
<body>
<p>x<sup>2</sup>+y<sup>2</sup> = z<sup>2</sup>
koristimo za opisivanje kružnice.</p>
<p>Količinu CO<sub>2</sub> je u porastu zbog povećanog prometa.</p>
</body>
</html>U slijedećem primjeru možemo vidjeti kako se web preglednik ponaša kada uzastopno umetnemo više uzastopnih razmaka u tekst. On više od jednog razmaka zanemaruje.
Ovdje također vidimo što se događa s umetanjem prelaska u novi redak u tekstu (pritiskom tipke Enter). I on je ignoriran od strane web preglednika.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML razmak</title>
</head>
<body>
<p>Mjesec se okreće oko zemlje.</p>
<p>Mjesec se okreće oko zemlje..</p>
<p>Mjesec se okreće
oko
zemlje.</p>
</body>
</html>Želimo li umetnuti novi redak u tekst potrebno je koristiti poseban element za to. Njegova oznaka je <br /> koja dolazi kao kratica engleske riječi break. Ovaj element je prazan te ima samo početnu oznaku.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML novi redak</title>
</head>
<body>
<p>Zemlja se okreće oko <br />sunca. Četiri godišnja <br />doba.</p>
</body>
</html>Želimo li odijeliti dva dijela web stranice vodoravnom crtom koristimo element <hr />. Crta zauzima 100% roditeljskog elementa ako drugačije ne naznačimo pomoću svojstva width. I ovaj element ima samo početnu oznaku.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML vodoravna crta</title>
</head>
<body>
<p>Putovanje u središte zemlje.</p>
<hr />
<p>Gospodar prstenova.</p>
<hr width="50%" />
</body>
</html>HTML omogućava umetanje citata u tekst. Za to nam služi element <blockquote>. Tko je citiran u tekstu određuje vrijednost dodijeljena svojstvu <cite> u početnoj oznaci elementa <blockquote>.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML citati</title>
</head>
<body>
<blockquote cite="https://www.mojwebdizajn.net ">
<p>Želiš li početi s web dizajnom?</p>
</blockquote>
<p>Kao što je navedeno, <q>ljudi traže istinu.</q></p>
</body>
</html>Trebamo li koristiti kratice, u html za to nam služi element <abbr> gdje svojstvu title dodjeljujemo vrijednost punog naziva. Za korištenje akronima koristimo element <acronym> u kojem također svojstvu title dodjeljujemo puni naziv akronima.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML kratice</title>
</head>
<body>
<p><abbr title="Profesor">Prof</abbr> Ruđer Bošković
je bio fizičar i astronom.</p>
<p><acronym title="National Aeronautics and Space Administration">NASA
<dfnacronym> istražuje svemir.</p>
</body>
</html>Definicije u html označavamo elementom <dfn>.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML definicije</title>
</head>
<body>
<p><dfn>crna rupa </dfn>
je prosto u svemiru iz kojega ništa ne može izaći.</p>
</body>
</html>HTML omogućava i unos adrese pomoću elementa <address>.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML adresa</title>
</head>
<body>
<address>
<p><a href="mailto:[email protected]">[email protected]</a></p>
<p>Braće Radić 12. Zagreb</p>
</address>
</body>
</html>Ponekad je potrebno u html-u označiti da smo umetnuli unutar teksta nove dijelove koje se nisu tu prije nalazili. Html element koji nam to omogućava je <ins> koji je kratica od engleske riječi insert.
Ako neke dijelove teksta želimo označiti kao obrisane u odnosu na prethodnu inačicu teksta, koristimo html element <del> koji je kratica od engleske riječi delete.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML umetanje i brisanje</title>
</head>
<body>
<p>Ovo je <del>najgora</del> a ovo <ins>najbolja</ins> ideja.</p>
</body>
</html>Želimo li precrtati dio teksta omeđimo ga html elementom <u>. Naziv dolazi od engleske riječi underline.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML precratno</title>
</head>
<body>
<p>Stara cijena računala je:</p>
<p><u>2995kn</u><p>
<p>Sada je samo 1995kn</p>
</body>
</html>