HTML: definicija in uporaba za spletne strani, struktura in HTML5

Hyper Text Markup Language (HTML) je označevalni jezik za ustvarjanje spletnih strani. Spletne strani se običajno pregledujejo v spletnem brskalniku. Vsebujejo lahko pisanje, povezave, slike ter celo zvok in video. HTML se uporablja za označevanje in opisovanje vseh teh vrst vsebine, da jih lahko spletni brskalnik pravilno prikaže. HTML se lahko uporablja tudi za dodajanje metainformacij na spletno stran. Metainformacij spletni brskalniki običajno ne prikažejo in so podatki o spletni strani, npr. ime osebe, ki je stran ustvarila. Za oblikovanje slogov elementov HTML se uporabljajo kaskadne preglednice slogov (CSS), medtem ko se JavaScript uporablja za upravljanje elementov HTML in slogov CSS.

HTML je izdelal konzorcij World Wide Web Consortium (W3C). Obstaja več različic HTML. Od septembra 2018 je trenutni standard HTML poimenovan HTML 5 in je v različici 5.2.

Osnovna struktura HTML dokumenta

Vsak HTML dokument ima določeno strukturo, ki brskalniku pove, kako obdelati vsebino. Najbolj osnovni okvir vsebuje:

DOCTYPE – vrstica <!DOCTYPE html> pove brskalniku, da gre za HTML5.
<html> element – ovije celotno vsebino strani in lahko vsebuje atribut lang za jezik.
<head> – vsebuje metapodatke: <meta>, <title>, povezave do slogov (<link>) in druge nastavitve.
<body> – vsebuje vidno vsebino: besedilo, slike, povezave, obrazce, skripte itd.

Elementi, oznake in atributi

HTML uporablja elemente (tudi oznake ali tagi), npr. <p>, <h1>, <a>, <img>. Elementi se lahko vnesejo drug v drugega (gnezdenje). Atributi nudijo dodatne informacije o elementih, npr. href pri povezavah ali src pri slikah. Nekateri elementi so blokovni (npr. odstavki, naslovi), drugi so vrstični (npr. <span>, <a>).

HTML5 in semantična oznaka

HTML5 je prinesel več semantičnih elementov, ki bolje opisujejo namen vsebine in pomagajo pri SEO ter dostopnosti. Pomembni primeri so:

<header>, <nav>, <main>, <article>, <section>, <aside>, <footer>

Uporaba teh elementov olajša bralnikom zaslona, iskalnikom in razvijalcem razumevanje strukture strani.

Multimedija in interaktivnost

HTML5 vključuje vgrajeno podporo za avdio in video preko elementov <audio> in <video>, kar zmanjšuje odvisnost od vtičnikov. Za interaktivnost in dinamično spreminjanje vsebine pa se uporablja JavaScript, medtem ko se videz ureja s CSS.

Obrazci in pridobivanje podatkov

HTML omogoča ustvarjanje obrazcev z elementi, kot so <input>, <textarea>, <select> in gumbi. Z uporabo atributov (npr. type, required, placeholder) lahko določimo vrsto in osnovno validacijo v brskalniku. Za obdelavo podatkov na strežniku se običajno uporabljajo skripte (na strežniku) ali JavaScript za odjemalčevo obdelavo in pošiljanje po AJAX.

Metapodatki, SEO in dostopnost

Metapodatki v <head> (npr. <meta name="description">, <meta charset="utf-8">) izboljšajo delovanje strani, prikaz v iskalnikih in združljivost. Dostopnost (accessibility) pomeni uporabo pravilnih semantičnih elementov, alternativnih besedil za slike (alt), kontrasta barv in pravilnega fokusiranja za uporabnike z različnimi potrebami.

Orodja, standardi in validacija

Za kakovostno delo z HTML je priporočljivo uporabljati urejevalnike z oblikovanjem in preverjanjem sintakse, orodja za razvoj v brskalniku (Developer Tools) ter validatorje, npr. W3C validator. Sledenje standardom (W3C) pomaga zagotoviti združljivost med brskalniki in napredno podporo funkcij.

Dobre prakse

Uporabljajte HTML5 semantične elemente za jasno strukturo strani.
Ločite vsebino (HTML), obliko (CSS) in vedenje (JavaScript).
Vedno določite charset (npr. UTF-8) in uporabite ustrezne metapodatke.
Poskrbite za dostopnost in ustrezne alt opise za slike.
Validirajte HTML in preverjajte delovanje v več brskalnikih ter na mobilnih napravah.

HTML je temelj spleta — z razumevanjem osnov in sledenjem standardom lahko ustvarjate hitro, dostopno in vzdržljivo spletno vsebino.

Oznake

HTML uporablja posebne dele programskega jezika, imenovane "oznake", ki brskalniku sporočajo, kako naj bo spletna stran videti. Oznake so navadno v parih: začetna oznaka določa začetek bloka vsebine, zaključna oznaka pa konec tega bloka vsebine. Obstaja veliko različnih vrst oznak in vsaka ima drugačen namen. Za primere oznak glejte Osnovne oznake HTML spodaj.

Nekatere oznake delujejo le v določenih brskalnikih. Na primer, oznaka <menuitem>, ki se uporablja za prikaz nečesa, ko oseba pritisne desni gumb miške, deluje samo v brskalniku Mozilla Firefox. Drugi brskalniki te oznake preprosto ne upoštevajo in normalno prikažejo napis. Mnogi ustvarjalci spletnih strani se izogibajo uporabi teh "nestandardnih" oznak, ker želijo, da so njihove strani v vseh brskalnikih videti enako.

Primer

Tukaj je primer strani v jeziku HTML.

1 <!DOCTYPE html> 2 < html> 3 < head> 4 < title> To je naslov strani </title> 5 </head> 6 < body> 7 < p> To je odstavek. </p> 8 < a href="https://www.domain.com"> To je povezava. </a> 9 < img src="image.jpg" alt="Image"> 10 </body> 11 </html>

Enostavna stran HTML bi bila naslednja: en sam odstavek z napisom "Hello world! ".

1 <!DOCTYPE html> 2 < html> 3 < head> 4 < title> Hi! </title> 5 </head> 6 < body> 7 < p> Hello world! </p> 8 </body> 9 </html>

Osnovne oznake HTML

Ime oznake	Ime	Funkcija	Primer kode
`<!DOCTYPE>`	Dotični tip	Opredeljuje vrsto dokumenta	<!DOCTYPE html>
`<html>`	HTML	Določi dokument HTML in zažene dokument HTML.	< html> Vsa koda</html>
`<head>`	Vodja	Vsebuje vso kodo, ki se ne uporablja za prikaz elementov na spletni strani.	< head></head>
`<title>`	Naslov	Določa naslov spletne strani (prikazan na zavihku) in se vnese v `<head>.`	<naslov> Spletna stran</title>
`<body>`	Telo	Vsebuje vidne elemente spletne strani (in vsebuje odstavek in več)	<body> Oznake Html</body>
`<h1>` do `<h6>`	Naslovi	Naslovi različnih velikosti (`<h1>` je največji)	< h1> Naslov</h1>
	Odstavek	Opredeljuje odstavek besedila	< p> TEKST</p>
	Sidro	Ustvarja aktivne povezave do drugih spletnih strani	< a href="www.domain.com"> Obiščite našo spletno stran</a>
`<img>`	Slika	Prikaže sliko na strani	< img src="ImageUrl" alt="Besedilo se prikaže, če slika ni na voljo">
`<br>`	Prekinitev	Vstavi enojni prelom vrstice	Besedilo < br> Besedilo
`<center>`	Center	Vsebino premakne na sredino strani	<center>Koda</center>
`<script>`	Scenarij	Ustvari skript na spletni strani, ki je običajno napisan v jeziku JavaScript.	< script> document. write("Hello World!")</script>

Uporaba oznak HTML

Izdelava spletne strani

Izdelava spletne strani je preprosta.Vse, kar si morate zapomniti, so oznake in vrstni red za izdelavo spletne strani.

Najprej morate poiskati prostor za vnos oznak HTML (priporočam beležnico) in vnesti oznake.

Tukaj je še en primer strani z oznako HTML.

<html>

<head>

<title> Pozdravljeni! <title>

<h1> Pozdravljen svet!</h1>

</head>

<body>

<p>

To je stran z oznako HTML.

</p>

Po: *Insert name here*

</footer>

</html>

Ko končate, shranite to v tej obliki: helloworld.htm

(brez presledkov)

In končali ste! Ko jo shranite v računalnik, vas bo, če pritisnete, poslala na vašo spletno stran v Googlu!

Vprašanja in odgovori

V: Kaj je HTML?

O: HTML je vrsta označevalnega jezika, ki se uporablja za ustvarjanje spletnih strani, ki vsebujejo pisanje, povezave, slike in avdiovizualne vsebine.

V: Kakšna je funkcija HTML?

O: Funkcija HTML je, da spletnim brskalnikom pove, kako naj bodo videti spletne strani, in doda meta informacije, kot je ime ustvarjalca spletne strani.

V: Kateri so primeri medijev, ki jih je mogoče vključiti v spletne strani, ustvarjene z uporabo HTML?

O: Nekateri primeri medijev, ki jih je mogoče vključiti v spletne strani, ustvarjene s HTML, so zvočne datoteke in videoposnetki.

V: Kako CSS dopolnjuje HTML?

O: CSS se uporablja za spreminjanje videza strani HTML.

V: Kakšna je vloga JavaScripta pri razvoju spletnih strani?

O: JavaScript je bistven skriptni jezik pri razvoju spletnih strani, saj spletnim stranem sporoča, kako naj se obnašajo, in lahko spreminja videz HTML in CSS.

V: Kdo je odgovoren za ustvarjanje HTML?

O: HTML je ustvaril konzorcij World Wide Web Consortium (W3C).

V: Katera je trenutna standardna različica HTML?

O: Od septembra 2018 je najnovejša standardna različica HTML 5, in sicer različica 5.2.