Neposredno iza doctype deklaracije dolazi <html> element, unutar kojeg je html dokument podijeljen u dva dijela: <head> i <body>.
Zašto ne sada?
CDN pohrana slika i videa.
Pretvorba formata slika: webp...
Vrhunsko AI povećanje slika!
25Gb podataka.
Zašto ne sada?
<!DOCTYPE html>
<html>
<head>
<title>Naslov web stranice</title>
</head>
<body>
<p>Odlomak koji se prikazuje u prozoru web stranice</p>
</body>
</html>
Prvi element koji se pojavljuje u izvornom kôdu web stranice je doctype deklaracija. Ona osigurava web pregledniku podatke o tome u kojoj je vrsti označnog jezika napisana stranica.
Ova doctype deklaracija opisuje web stranicu kao HMTL5 dokument.
Neposredno iza doctype dolazi <html> element. Unutar <html> elementa web stranica je podijeljena u dva glavna dijela: <head> i <body>.
<head> element sadrži elemente koji opisuju sam html dokument ili ga povezuju s vanjskim datotekom.
Neki od html elementa koji mogu biti dodani u head dio su: <base>, <title>, <meta>, <link>, <script> i <style>.
Element <title> web stranice pojavljuje se na naslovnoj traci web preglednika:
<title>Moj web dizajn</title>
Element <base> definira bazni URL za linkove ili datoteke u web stranici:
<base href="https://www.mojwebdizajn.net/" />
Element <link> učitava datoteke različitih vrsta, najčešće CSS datoteku:
<link rel="stylesheet" type="text/css" href="mojwebdizajn.css" />
Element <meta> dostavlja dodatne informacije o stranici, npr. koji raspored znakova se koristi na web stranici, opis web stranice, ključnih riječi...:
<meta name="title" content="HTML Struktura : Moj web dizajn" />
Element <script> povezuje se s vanjskom datotekom skripte ili u sebi sadrži skriptu:
<script type="text/javascript" src="js/main.js"></script>
Element <style> sadrži CSS stilove koji se primjenjuju na web stranici:
<style>
p {
color: blue;
font-size:14px;
}
</style>
<body> sadrži elemente čiji se sadržaj prikazuje na web stranici:
Primjer elementa odlomka:
<p>Ovo je primjer teksta u odlomku</p>
Primjer elementa naslova:
<h1>Naslov veličine 1</h1>
Primjer praznog elementa za prelazak u novi red:
<br />
Primjer elementa poveznice (linka):
<a href="https://www.mojwebdizajn.net">Poveznica na web stranicu</a>
Primjer elementa slike:
<img src="krajolik.jpg" alt="Krajolik" />
Primjer elementa tablice s naslovom stupaca te dva retka i dva stupca:
<table>
<tr>
<th>Broj</th>
<th>Ime</th>
</tr>
<tr>
<td>1.</td>
<td>Matej</td>
</tr>
<tr>
<td>2.</td>
<td>Luka</td>
</tr>
</table>
Primjer elementa simboličkog popisa:
<ul>
<li>Mihael</li>
<li>Rafael</li>
<li>Gabrijel</li>
</ul>