HTML izrada sajta

HTML (Hyper Text Markup Language) je osnovni jezik koji se primenjuje za izradu web sajtova i aplikacija. HTML nije programski jezik. Kako samo njegovo ime kaže on je markirni jezik.

Šta je HTML?

HTML je skraćenica od ' HyperText Markup Language '. To je jezik koji se koristi za kreiranje strukture i izgleda veb stranica. HTML se sastoji od niza elemenata, koji su predstavljeni tagovima, zatvorenim između ugaonih zagrada, < tag >. Ove oznake opisuju tip sadržaja koji se nalazi u njima, kao što su naslovi, paragrafi, slike i veze.

HTML je osnovni jezik za izradu sajtova i aplikacija. Da bi postali Front-end developeri moramo dobro da poznajemo HTML ali i još neke osnovne jezike i veštine. Na linku ispod, pročitajte osnovno o front-end development-u.
Front-end development osnove

Sledeći primer predstavlja jednostavnu stranicu sa glavnim naslovom, paragrafom teksta, link i sliku. U nastavku ćemo objasniti red po red koda. 


<!DOCTYPE html>
<html>
<head>
  <title>My Web Page</title>
</head>
<body>
  <h1>Welcome to my web page!</h1>
  <p>This is a simple example of an HTML document.</p>
  <a href="https://www.example.com">Learn more about HTML</a>
  <img src="image.jpg" alt="Example image">
</body>
</html>
  • <!DOCTYPE html>: Ovo je početni tag html stranice i on predstavlja oznaku verzije
  • <html>: Ovo je osnovni element HTML dokumenta i sadrži sve ostale elemente.
  • <head>: Ovaj element sadrži metapodatke o dokumentu, kao što su naslov i meta opisi.
  • <body>: Ovaj element sadrži vidljivi sadržaj veb stranice.
  • <h1> do <h6>: Ovi elementi se koriste za naslove, sa <h1> je najvažniji, a <h6> najmanje.
  • <p>: Ovaj element se koristi za pasuse teksta.
  • <a>: Ovaj element se koristi za pravljenje veza ka drugim veb stranicama ili drugim delovima iste veb stranice.
  • <img> : Ovaj element se koristi za ugrađivanje slika na veb stranicu.

HTML tagovi

HTML oznaka je reč ili skup znakova zatvorenih u ugaone zagrade < i >. Koriste se za definisanje strukture i izgleda veb stranice.

'HTML oznake' dolaze u parovima, sa oznakom za otvaranje i oznakom za zatvaranje. Završna oznaka ima kosu crtu / ispred naziva oznake. Na primer, početna oznaka za pasus je < p >, a završna oznaka je </p>.

Evo primera kako biste koristili oznaku pasusa da dodate tekst na veb stranicu:

<p>This is some text in a paragraph.</p>

Neke HTML oznake, kao što su <img> i <br>, ne zahtevaju oznaku za zatvaranje, oni se nazivaju void elementi.

Atributi HTML tagova

Atributi se koriste za pružanje dodatnih informacija o HTML elementu. Oni se dodaju u početnu oznaku elementa i imaju oblik parova ime-vrednost. Na primer, atribut 'src' se koristi za određivanje izvorne URL adrese za sliku, a atribut 'href' se koristi za određivanje odredišta veze.

Evo primera kako biste koristili atribute 'src' i 'alt' da dodate sliku na veb stranicu:

<img src="image.jpg" alt="An example image">

U ovom primeru, atribut 'src' je postavljen na „image.jpg“, što je URL datoteke slike, a atribut 'alt' je postavljen na „An ekample image“, što je tekstualni opis slike.

Neki uobičajeni atributi koji se koriste u HTML-u su 'id', 'class', 'style', 'title', 'src', 'alt', 'href', 'width', 'height' itd.

Vredi napomenuti da su neki atributi globalni i mogu se koristiti u bilo kom elementu, dok su drugi specifični za određene elemente. Zvanična W3C dokumentacija je dobar izvor za proveru koji atributi su dostupni za korišćenje za svaki HTML element.

Tagovi za formatiranje teksta

Postoji nekoliko HTML oznaka koje se mogu koristiti za formatiranje teksta na veb stranici. Neki od najčešćih uključuju:

  • <p>: Ova oznaka se koristi za pravljenje pasusa teksta.
  • <h1> do <h6>: Ove oznake se koriste za kreiranje naslova. <h1> je najvažniji naslov, dok je <h6> najmanje važan.
  • <strong> code>: Ova oznaka se koristi za podebljavanje teksta.
  • <em>: Ova oznaka se koristi za isticanje teksta, obično tako što se pravi kurziv.
  • <u> : Ova oznaka se koristi za podvlačenje teksta.
  • <s> : Ova oznaka se koristi za prikazivanje teksta kao precrtanog .
  • <mark> : Ova oznaka se koristi za isticanje teksta.
  • <abbr> : Ova oznaka je . koristi se za pravljenje skraćenice.
  • <sub> : Ova oznaka se koristi za pravljenje indeksnog teksta.
  • <sup> : Ova oznaka se koristi za kreiranje superscript teksta.
  • <blockkuote> : Ova oznaka se koristi za kreiranje bloka teksta koji je citiran iz drugog izvora.

U HTML5 postoji nekoliko oznaka koje se smatraju semantičkim, što znači da imaju specifično značenje i svrhu. Ove oznake daju dodatno značenje strukturi veb stranice, olakšavajući pretraživačima i čitačima ekrana da razumeju sadržaj.
Evo nekoliko primera semantičkih oznaka u HTML5:

'<header>': Ova oznaka se koristi za definisanje odeljka zaglavlja veb stranice. Obično sadrži naslov ili logo sajta i navigacioni meni. 

<header>
    <h1>My Website</h1>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
</header>

'<nav>: Ova oznaka se koristi za definisanje odeljka veb stranice koji sadrži veze za navigaciju.

'<article>': Ova oznaka se koristi da definiše samostalni deo sadržaja, kao što je post na blogu ili vest.

'<aside>': Ova oznaka se koristi za definisanje odeljka veb stranice koji sadrži sadržaj koji je povezan sa glavnim sadržajem, ali je odvojen od njega. Ovo može biti bočna traka, citat ili lista srodnih članaka.

'<figure>': Ova oznaka se koristi za definisanje figure, koja može biti slika, video, audio ili drugi tip medija. Često se koristi u kombinaciji sa oznakom <figcaption> da bi se obezbedio natpis za medije.

'<time>': Ova oznaka se koristi za definisanje datuma i/ili vremena na veb stranici. Može se koristiti za prikaz datuma članka ili događaja.

'<section>: Ova oznaka se koristi za definisanje odeljka veb stranice koji sadrži srodni sadržaj. Može se koristiti za grupisanje sadržaja koji imaju sličnu temu ili svrhu.

'<main>': Ova oznaka se koristi za definisanje glavnog sadržaja veb stranice. Trebalo bi da bude jedinstven za dokument i da izuzima sadržaj koji se ponavlja u skupu dokumenata kao što su zaglavlja, podnožja, navigacione trake itd.

Oznaka '<footer>' u HTML5 se koristi za definisanje odeljka podnožja veb stranice. Podnožje obično sadrži informacije kao što su autor veb stranice, informacije o autorskim pravima i veze do povezanih stranica.