HTML struktura : HTML Structure

Struktura HTML dokumenta : HTML Structure


<!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 kodu web stranice je doctype deklaracija. Ona osigurava web pregledniku podatke o tome u kojoj je vrsti označnog jezika napisana stranica.

Ovaj doctype 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>

Dan za web dizajn!

HTML <head> element

<head> element sadrži elemente koji opisuju sam html dokument ili ga povezuju s vanjskim datotekom.

Slijedeći elementi mogu biti dodani u head dio: <title>, <base>, <link>, <meta>, <script> i <style>.

HTML <title> element

Element <title> web stranice pojavljuje se na naslovnoj traci web preglednika:

<title>Moj web dizajn</title>

HTML <base> element

Element <base> definira bazni URL za linkove ili datoteke u web stranici:

<base href="https://www.mojwebdizajn.net/" />

HTML <link> element

Element <link> učitava datoteke različitih vrsta, najčešće CSS datoteku:

<link rel="stylesheet" type="text/css" href="mojwebdizajn.css" />

HTML <meta> elementi

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" />

HTML <script> element

Element <script> povezuje se s vanjskom datotekom skripte ili u sebi sadrži skriptu:

<script type="text/javascript" src="js/jquery-1.4.1.js"></script>

HTML <style> element

Element <style> sadrži CSS stilove koji se primjenjuju na web stranici:

<style>
  p {
    color: blue;
    font-size:14px;
  }
</style>

HTML <body> element

<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" />

Primjer elementa tablice s naslovom stupaca, te dva retka i dva stupca:

<table>
  <tr>
    <th>Broj</th>
    <th>Ime</th>
  </tr>
  <tr>
    <td>1.</th>
    <th>Matej</th>
  </tr>
  <tr>
    <td>2.</th>
    <th>Luka</th>
  </tr>
</table>

Primjer elementa simboličkog popisa:

<ul><
  <li>Mihael</li>
  <li>Rafael</li>
  <li>Gabrijel</li>
</ul>