Primer lesson: jezik za označavanje hiperteksta

Jezik za označavanje hiperteksta (HTML)

HTML je kratica za Hypertext Markup Language. To je standardni označni jezik za dokumente dizajnirane za prikaz u web pregledniku. HTML-u mogu pomoći tehnologije kao što su Cascading Style Sheets (CSS) i skriptni jezici kao što je JavaScript.

Temelj weba

Internet je u svojoj srži ogromna mreža računala povezanih globalno. Primarni način na koji komuniciramo s ovom mrežom je putem World Wide Weba (WWW), sustava međusobno povezanih hipertekstualnih dokumenata kojima se pristupa putem interneta. U srcu WWW-a su web stranice, koje su dokumenti napisani u HTML-u. HTML pruža osnovnu strukturu web-mjesta, koja se zatim poboljšava i modificira drugim tehnologijama poput CSS-a i JavaScripta.

Struktura HTML dokumenata

HTML dokument je strukturiran prema skupu ugniježđenih oznaka, koji su elementi zatvoreni u uglastim zagradama. Ove oznake govore web pregledniku kako prikazati sadržaj. Primjer jednostavne strukture HTML dokumenta je:

 <!DOCTYPE html>
<html>
    <glava>
        <title>Naslov stranice</title>
    </head>
    <tijelo>
        <h1>Ovo je naslov</h1>
        <p>Ovo je odlomak.</p>
    </body>
</html>

Ovaj kod definira osnovnu web stranicu s naslovom, zaglavljem i odlomkom teksta.

HTML elementi i oznake

HTML dokumenti sastoje se od HTML elemenata. Svaki element predstavljen je početnom oznakom, nekim sadržajem i završnom oznakom. Početna i završna oznaka elementa su identične, osim što završna oznaka uključuje kosu crtu ispred naziva elementa.

Na primjer, oznaka <code><p></code> obuhvaća odlomak teksta i strukturirana je na sljedeći način:

 <p>Ovo je primjer odlomka.</p>

Različiti elementi služe različitim svrhama. Na primjer:

Oznake <code><h1>...</h1></code> do <code><h6>...</h6></code> koriste se za naslove.
Oznaka <code><a></code> definira hipervezu.
Oznaka <code><img></code> ugrađuje sliku u dokument.

Atributi

HTML elementi mogu imati atribute koji pružaju dodatne informacije o elementima. Atributi se nalaze unutar početne oznake elementa i često se daju u parovima ime/vrijednost kao što je <code>name="value"</code>.

Na primjer, za ugradnju slike koristimo oznaku <code><img></code> s atributom <code>src</code> (izvor) za navođenje URL-a slike:

 <img src="url do slike.jpg" alt="Opis slike">

Atribut <code>alt</code> pruža alternativni tekst za sliku ako se ne može prikazati.

Veze i navigacija

Upotreba oznake <code><a></code> stvara hiperveze koje su temelj međusobnog povezivanja Weba. Hiperveza može povezivati na drugu web stranicu, drugi odjeljak na istoj stranici ili čak na datoteku za preuzimanje. Na primjer:

 <a href="https://example.com">Posjetite Example.com</a>

Ovo stvara vezu na <code>https://example.com</code>.

Popisi

HTML nudi elemente za stvaranje popisa. Postoje dvije osnovne vrste popisa:

Nesređene liste (<code><ul></code>), gdje redoslijed stavki nije značajan. Stavke na nesređenom popisu označene su grafičkim oznakama.
Poredani popisi (<code><ol></code>), gdje je redoslijed stavki bitan. Stavke u poredanom popisu su numerirane.

Svaka stavka na popisu nalazi se unutar oznake <code><li></code> (stavka popisa).

HTML5

HTML5 je najnovija evolucija standarda, uvodeći mnoge nove značajke koje odražavaju moderne potrebe za multimedijskim i interaktivnim dokumentima. To uključuje nove strukturne elemente (<code><header></code>, <code><footer></code>, <code><article></code>, <code><section></code>) , grafički elementi (<code><canvas></code> za crtanje, <code><svg></code> za skalabilnu vektorsku grafiku) i medijski elementi (<code><audio></code> i <code ><video></code>).

Semantički HTML

Semantički HTML odnosi se na korištenje HTML označavanja za pojačavanje semantike ili značenja informacija na web stranicama. Umjesto da samo definira kako elementi izgledaju ili se ponašaju (to je posao za CSS i JavaScript), semantički HTML točno opisuje strukturu i vrstu sadržaja. Na primjer, oznaka <code><article></code> označava da je sadržaj unutar članka, dok oznaka <code><nav></code> označava navigacijski izbornik.

Korištenje semantičkog HTML-a poboljšava pristupačnost i mogućnost pretraživanja web sadržaja, čineći ga upotrebljivijim i vidljivijim.

Zaključak

HTML je temeljna tehnologija World Wide Weba, koja pruža osnovnu strukturu za web stranice. Korištenjem oznaka, atributa i elemenata, HTML omogućuje stvaranje strukturiranih dokumenata. Razumijevanjem i korištenjem HTML-a, može se stvoriti širok raspon sadržaja dostupnih na webu, od jednostavnih tekstualnih dokumenata do složenih interaktivnih multimedijskih iskustava. Kao temelj za razvoj weba, vladanje HTML-om neophodno je za svakoga tko želi dizajnirati ili razvijati za web.

jezik za označavanje hiperteksta