HTML naslovi se definišu pomoću "h" tagova i razlikuju po veličinama, ima ih šest i razlikuju se po veličini i to od najvećeg ka najmanjem:
...
<h1>This is a
heading</h1>
<h2>This is a
heading</h2>
<h3>This is a
heading</h3>
<h4>This is a
heading</h4>
<h5>This is a
heading</h5>
<h6>This is a
heading</h6>
...
Izgled ovog html koda u browseru:
HTML paragrafi se definišu pomoću "p" tagova:
...
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a<br />
paragraph</p>
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>
<p>This is a paragraph</p>
...
Izgled ovog html koda u browseru:
Ukoliko bilo gde unutar teksta postoji potreba da tekst pređe u novi red, upotrebljava se <br /> tag. Ovaj tag ne poseduje završni tag te se on zatvara kosom crtom pre znaka >.
Razmak između dva reda je različit ukoliko redovi pripadaju jednom ili dva paragrafa.
Ukoliko je potrebno da se ispiše horizontalna linija za razdvajanje delova dokumenta upotrebljava se <hr /> tag. Ovaj tag takođe ne poseduje završni tag i zatvara se kosom crtom pre znaka >.
HTML linkovi se definišu pomoću "a" tagova. Adresa linka je određena pomoću href atributa. Atributi se koriste za obezbeđivanje dodatnih informacija o HTML elementima i nalaze se unutar početnog taga.
...
<p>This is a paragraph.
<a href="http://www.google.com">Google</a>
This is the same paragraph.</p>
...
Izgled ovog html koda u browseru:
Ceo tekst između <a> i </a> tagova je link ka zadatoj stranici (Google).
Atributi se uvek upisuju u početne tagove. Atributi se uvek pišu u parovima ime_atributa="vrednost". Vrednosti se uvek pišu unutar navodnika. HTML dozvoljava ravnopravnu upotrebu jednostrukih i dvostrukih navodnika za zadavanje vrednosti atributa.
Napomena:
Ovde se može uočiti i jedno od osnovnih pravila u vezi tagova: tagovi
mogu biti ugneždeni. Unutrašnji tag se može nalaziti u spoljašnjem tagu, sa
time da se mora otvoriti i zatvoriti unutar spoljašnjeg taga.
U ovom primeru <p> tag je spoljašnji, a <a> tag unutrašnji.
HTML slike se definišu pomoću <img> taga.
Izvorni fajl slike je određen pomoću src atributa i sadrži kompletnu putanju do slike. Najčešći uzrok greške su velika i mala slova i njihovo pogrešno pisanje. preporuka je upotreba isključivo malih slova pri zadavanju imena fajlova i foldera na web-u. Windows ovu grešku ne registruje ukoliko se sa hard diska računara otvaraju html dokumenti.
Alternativni tekst se definiše pomoću alt atributa. Alternativni tekst se ispisuje umesto slike ukoliko browser ne može da ponađe sliku na zadatom mestu.
Atributi width i height definišu širini i visinu slike u pikselima
...
<img
src="http://www.atlagic.rs/Website_Under_Construction.gif" alt="Ovo je alternativni tekst"
width="180px" height="180px" />
...
Izgled ovog html koda u browseru:
Ovaj tag nema završni tag, te se zatvara kosom crtom pre znaka >.
Browseri veoma lepo regulišu smanjivanje ili uvećanje slike ukoliko se pazi na odnos širine i visine slike, da se slika ne deformiše.
Najvažnije osobine atributa su
Jezik dokumenta se deklariše u <html> tag-u. Jezik dokumenta se deklariše pomoću lang atributa. Deklarisanje jezika je poželjno upotrebiti. Prva dva karaktera su jezik, a druga dva dijalekt (naprimer: en-US, sr-RS, hu, ...).
<!DOCTYPE html>
<html lang="en-US">
<head>
...
</head>
<body>
...
</body>
</html>
Ukoliko se miš nađe iznad ovako definisanog paragrafa, prikazaće se pločica sa natpisom na koji je ispisana vrednost title atributa:
...
<p title="My title">This is a paragraph. This is a paragraph</p>
...
Izgled ovog html koda u browseru:
| Atribut | Opis |
|---|---|
| alt | Definiše alternativni tekst za sliku |
| disabled | Definiše elemenat koji je zabranjen |
| href | Definiše URL (web adresu linka) |
| id | Definiše jedinstveni id za element |
| src | Definiše URL (web adresu linka) za sliku |
| style | Definiše CSS stil elementa |
| title | Definiše dodatne informacije elementa (prikaz pločice sa ispisom) |
| value | Definiše vrednost teksta elementa. |
Osim title elementa u <head> tagu se zadaju dodatni podaci o dokumentu. Za pravilan ispis latiničnih karaktera unutar head taga se zadaje meta tag:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
...
</body>
</html>
Svaki HTML dokumenat ima podrazumevani stil (bela pozadina i crna boja teksta). Promena podrazumevanog stila se vrši pomoću style atributa.
Sintaksa style atributa je sledeća: style="property:value", sa time da je property (osobina) CSS osobina a value (vrednost) CSS vrednost.
Postoji mogućnost da se više različitih podešavanja stilova izvrši unutar jednog
style atributa, tada se parovi "property:value" razdvajaju tačka-zarezom:
style="property1:value1; property2:value2;..."
...
<h1>Black Heading</h1>
<h1 style="color:red">Red Heading</h1>
<h1 style="color:blue">Blue Heading</h1>
...
Izgled ovog html koda u browseru:
...
<body style="background-color:lightgray">
<h1>Heading</h1>
<p>This is a paragraph</p>
</body>
...
Izgled ovog html koda u browseru:
...
<h1 style="color:red">Red heading</h1>
<p style="color:blue">Blue paragraph</p>
...
Izgled ovog html koda u browseru:
...
<h1 style="font-family:verdana">Verdana heading</h1>
<p style="font-family:courier">Courier paragraph</p>
...
Izgled ovog html koda u browseru:
...
<h1 style="font-size:300%">This is a heading</h1>
<p style="font-size:160%">This is a paragraph</p>
...
Izgled ovog html koda u browseru:
...
<h1 style="text-align:center">This is a heading</h1>
<p style="text-align:justify">This is one paragraph.
This is one paragraph. This is one paragraph. This is one paragraph. This is one paragraph.
This is one paragraph. This is one paragraph. This is one paragraph. This is one paragraph.
This is one paragraph. This is one paragraph. This is one paragraph. This is one paragraph.
This is one paragraph. This is one paragraph. This is one paragraph. This is one paragraph.
This is one paragraph. This is one paragraph. </p>
...
Izgled ovog html koda u browseru:
HTML <b> element definiše zadebljani tekst, bez neke posebne važnosti.
...
<p>This is a normal paragraph.</p>
<p><b>This is a bold paragraph.</b></p>
...
Izgled ovog html koda u browseru:
HTML <strong> element definiše zadebljani tekst, sa posebnom važnošću.
...
<p>This is a normal paragraph.</p>
<p><strong>This paragraph is strong.</strong></p>
...
Izgled ovog html koda u browseru:
Browseri prikazuju <strong> podjednako kao i <b>, a <em> podjednako kao i <i>. Postoji bitna razlika u značenjima ovih tagova: <b> i <i> označavaju zadebljan i zakošen tekst. Tagovi <strong> i <em> označavaju zadebljan i zakošen tekst koji je ujedno i "važan".
HTML <i> element definiše zakošeni tekst, bez neke posebne važnosti.
...
<p>This is a normal paragraph.</p>
<p><i>This is an italic paragraph.</i></p>
...
Izgled ovog html koda u browseru:
HTML <em> element definiše naglašeni tekst, sa posebnom važnošću.
...
<p>This is a normal paragraph.</p>
<p><em>This paragraph is emphasized.</em></p>
...
Izgled ovog html koda u browseru:
Browseri prikazuju <strong> podjednako kao i <b>, a <em> podjednako kao i <i>. Postoji bitna razlika u značenjima ovih tagova: <b> i <i> označavaju zadebljan i zakošen tekst. Tagovi <strong> i <em> označavaju zadebljan i zakošen tekst koji je ujedno i "važan".
HTML <small> prikazuje tekst kao umanjen.
...
<p>This is a <small>small</small> text.</p>
...
Izgled ovog html koda u browseru:
HTML <mark> prikazuje tekst kao označen.
...
<p>This is a <mark>marked</mark> text.</p>
...
Izgled ovog html koda u browseru:
HTML <del> prikazuje tekst kao obrisan.
...
<p>This is a <del>deleted</del> text.</p>
...
Izgled ovog html koda u browseru:
HTML <ins> prikazuje tekst kao umetnut.
...
<p>This is an <ins>inserted</ins> text.</p>
...
Izgled ovog html koda u browseru:
HTML <sub> prikazuje tekst u donjem indeksu.
...
<p>This is a <sub>subscripted</sub> text.</p>
...
Izgled ovog html koda u browseru:
HTML <sup> prikazuje tekst u gornjem indeksu.
...
<p>This is an <sup>superscripted</sup> text.</p>
...
Izgled ovog html koda u browseru:
Komentari nisu vidljivi u HTML dokumentima, vide se samo u izvornom kodu stranice. Tekst komentara se nalazi unutar <!-- i --> taga.
...
<p>This is a paragraph.</p>
<!-- This is a comment. -->
<p>This is another paragraph.</p>
...
Izgled ovog html koda u browseru: