HTML oznake - Sa samo jednim klikom preuzmite html i css kôd s web stranice, otvorite ga u web pregledniku i učite na primjerima!
CDN pohrana slika i videa.
Pretvorba formata slika: webp...
Vrhunsko AI povećanje slika!
25Gb podataka.
Zašto ne sada?
Prednost ovog vodiča je u tome da učite na gotovim primjerima. Preuzmite html i css kôd s web stranice i učite kroz primjere!
Kako i drugdje, tako i ovdje postoji teorijski dio i praktičan dio. Teorijski dio obradit ćemo - bilo u članka o temi - bilo danom poveznicom koja na webu upućuje na područje koje treba proučiti. Napominjem kako je na u seriji članaka HTML za početnike obrađen dio vezan za html koji ovdje ne ćemo ponavljati.
Praktičan dio obavljat ćemo u MS Visual Code editoru koji omogućava lakši unos kôda u računalo. Osim editora potreban je i web preglednik MS Edge ili Google Chrome u koje ćete pregledavati učinjeno.
Moramo na početku reći kako se web stranica sastoji od tri osnovne cjeline. Sadržaja web stranice koji se unosi u html kôd. Zatim izgleda web stranice koji oblikujemo pomoću css stilova i na kraju ponašanja web stranice, koje određuje JavaScript kôd, često uz pomoć dodatnih biblioteka funkcija napisanih u JavaScriptu kao što je jQuery.
Ponašanje web stranice možemo gledati sa strane klijentskog računala tj. kôda koji se izvodi na našem računalu (kao što smo rekli to je JavaScript) ili sa strane serverskog računala (gdje to može biti php kôd). Serversko računalo je računalo na kojem je pohranjeno web sjedište.
Radi razumijevanja potrebno je reći kako se web sjedište sastoji od jedne ili više web stranica. Dakle u web pregledniku pregledavamo jednu po jednu web stranicu s nekog web sjedišta.
Web sjedište pohranjujemo na računalu na kojem imamo web hosting – hosting je naziv za uslugu pohrane web sjedišta na web serveru – računalu koje je 24 sata dnevno / 7 dana u tjednu / 365 dana u godini dostupno na Internetu.
HTML ili engleski HyperText Markup Language govori nam o bitnoj značajci html kôda. On se osim teksta sastoji od poveznica (engl. link ili hypertext). To je bitna razlika između Interneta i knjiga. Po knjizi se krećemo čitanjem ili listanjem knjige. Kod Interneta možemo "skakati" po njemu klikom na poveznicu (koja može biti tekst ili slika) te kretanjem po web stranicama istog ili drugog web sjedišta bilo gdje na zemaljskoj kugli.
U nazivu html - osim naznake da se radi o hipertekstu, dakle kako sadrži poveznice – kaže se i to kako je to označni jeziki (engl. Markup Language), dakle radi se o jeziku koji je opisan označnim kôdovima.
Html kôd se sastoji od html elemenata koji se pišu unutar šiljastih zagrada i nazivaju tagovima ili oznakama. Primjer html elemenata je <html>, <head>, <body>, <header>, <footer>...
Razlikujemo parne (ponegdje se nazivaju i dvostruke) i prazne (ili jednostruke) označne kôdove
Parne oznake (ili dvostruke oznake) sastoje se od početne i završne oznake između kojih se može nalaziti tekst ili drugi html elementi. Početna i završna oznaka html elementa se razlikuju u kosoj crti: tako je <body> početna oznaka body elementa, a </body> završna oznaka istog elementa.
Parne oznake uvijek moraju biti zatvorene (<body></body>)
Prazne oznake (ili jednostruke oznake) sastoje se samo od početne oznake. Početnu html oznaku praznog html elemenata prepoznajemo po kosoj crti: tako je <img /> oznaka praznog img elementa.
Na početku obavezno se mora nalaziti doctype oznaka kako se radi o html5 dokumentu: <!doctype HTML>
HTML elementi moraju biti pravilno ugniježđeni. Drugim riječima kada se unutar parnih oznake nalaze druge parne oznake prvo se mora zatvoriti unutarnja parna oznaka, a tek zatim se može (ali i ne mora) zatvoriti vanjska parna oznaka. Primjer ugniježđene parne oznake:
<html>
<head>
<meta charset="utf-8" />
</head>Dakle prije zatvaranja <html> parne oznake moramo zatvoriti unutarnju parnu oznaku <head>.
Što to znači "ali i ne mora" – to znači kako se prije zatvaranja vanjske parne oznaka može otvoriti i zatvoriti druga unutarnja parna oznaka. Primjer otvaranja druge parne oznake:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<h1>Moj web dizajn</h1>
</body>
</html>Dakle prije nego što smo zatvorili <html> parnu oznaku otvorili smo i zatvoriti dvije parne oznake <head> i <body>, a prije nego što smo zatvorili <body> parnu oznaku otvorili smo i zatvorili <h1> parnu oznaku.
html elementi moraju biti pravilno ugniježđeni
parni html elementi moraju uvijek biti zatvoreni <p></p>.
html elementi moraju biti napisani malim slovima
nazivi html svojstva (engl. attribute) moraju biti napisani malim slovima
vrijednost html svojstava mora se navesti unutar navodnika src="/slike/slika-1.jpg"