Primjer HTML koda: Osnove web razvoja

HTML je, bez pretjerivanja, glavni jezik Interneta, rođen s njim. Njegova odgovornost uključuje osnovni dizajn web stranica, njihovo logično strukturiranje i oblikovanje. Nema potrebe ići daleko za primjere HTML-a, samo otvorite preglednik. Bilo koja prikazana stranica je HTML koji tražite. Da bi ga bolje upoznali, pogledajte konzolu za razvojne programere.

Iza kulisa Interneta

Otvorite svoju omiljenu web-lokaciju u pregledniku Google Chrome. Ovaj preglednik ima najprikladniji razvojni panel, pa je idealan za učenje.

Da biste brzo došli do ploče, pritisnite tipkovnu tipku F12 na tipkovnici. Ako iz nekog razloga to ne uspije, pronađite potrebnu stavku u izborniku preglednika i odaberite je klikom na "Dodatni alati"> "Alati za razvojne programere".

Otvorit će se novi panel s nekoliko kartica, od kojih nam je potreban prvi - Elementi. Ovdje je opisan cijeli HTML kôd trenutne stranice.

Struktura HTML dokumenta

Pomoću panela moguće je na živom primjeru shvatiti kako je mjesto uređeno, vidjeti njegove sastavne dijelove. Važno je razumjeti da konačni izgled ne pruža samo HTML oznaka, već i stilovi opisani pomoću CSS-a. Na kartici Elements možete vidjeti samo osnovnu strukturu.

Sve komponente stranice uređene su u hijerarhijskom redu. Možete pregledati ugniježđene stavke pomoću strelica.

Na primjer, cijela HTML stranica je zamotana u blok s imenom HTML, unutar kojeg se nalaze spremnici za glavu i tijelo. Ako ih proširite, unutar njih možete pronaći još nekoliko razina elemenata s različitim imenima.

Preglednik ne prikazuje sve što se nalazi u odjeljku glave. Jedina iznimka je blok naslova koji se prikazuje na kartici. U "glavi" web-mjesta nalaze se servisne informacije potrebne za ispravan rad internetskog preglednika.

S druge strane, sadržaj odjeljka tijela vidljiv je korisniku. Konzola za razvojne programere omogućuje vam da vidite točno gdje se svaki pojedini blok nalazi na stranici. Da biste to učinili, samo postavite pokazivač na njega.

Slika zaslona prikazuje kako se ističe navigacijska traka:

Na vrhu se nalazi i element DOCTYPE. On se također poziva na podatke o uslugama.

Oznake i njihovi atributi

HTML skraćenica doslovno znači "Hypertext Markup Language". Odnosno, svaka web stranica je samo tekst označen na određeni način. Za njegovo oblikovanje koriste se posebni elementi - oznake (deskriptori).

Kako bi razlikovali oznaku od samog teksta, ona se nalazi u uglatim zagradama. Na primjeru HTML koda možete vidjeti razne oznake: html, head, body, header, div. Dva su tipa:

• Zatvaranje oznaka sa sadržajem ima dva dijela i tekst između njih. Primjerice, deskriptor zaglavlja se može zatvoriti. Drugi dio razlikuje se od prvog po prisutnosti kose crte ispred naziva oznake.
• Nezatvorene oznake bez sadržaja sastoje se samo od jednog dijela. Primjer je meta oznaka.

Napominjemo da su HTML deskriptori slobodni ugraditi jedni druge. Iznimka su nezatvorene oznake koje nemaju sadržaja, stoga se ništa ne može umetnuti u njih.

Važno je slijediti redoslijed zatvaranja. U konzoli možete vidjeti koliko su pažljivo ugrađene ručke. Vanjski se element ne može zatvoriti prije unutarnjeg.

Svaka oznaka može imati brojne parametre (atribute) koji definiraju njegova svojstva. U HTML-u, primjer je deskriptor hiperveze a i njegov href atribut, koji sadrži adresu stranice na koju će se povezati kada se klikne na vezu.

HTML za vizualno učenje

Za početnike web dizajnera, web programere i samo ljude koji su zainteresirani za osnove internetske tehnologije, učenje HTML-a je prvi korak u dugom, zanimljivom putovanju. Postoje stotine tečajeva i udžbenika koji prezentiraju informacije na najrazličitije načine. Odabrati među njima prikladne nije teško.

No, bez obzira na to koliko je dobar udžbenik, za uspjeh su potrebne još dvije komponente:

• iskustvo neovisnog slaganja sloga;
• proučavanje HTML-a drugih ljudi.

Konzola razvojnog programera u popularnim preglednicima (osim preglednika Google Chrome, dobre ploče možete pronaći u preglednicima Mozilla Firefox i Internet Explorer) najbolji je način za istraživanje web-stranica. To vam omogućuje da majstor osnovne obrasce izgleda, naučiti vidjeti konačni prikaz koda, pa čak i dinamički napraviti promjene u njemu.