html elementi

Umetanje teksta

Tekst unosimo između početne i završne oznake elementa odlomka:
  <p>Tekst odlomka</p>
  Za prelazak u novi redak koristimo oznaku elementa <br />
  Želimo li umetnuti naslove na web stranicu koristimo elemente naslova. Naslove razlikujemo po veličini od najvećih naslova <h1> do najmanjih <h6>
  <h1>Naslov razine 1</h1>
  <h2>Naslov razine 2</h2>
  <h3>Naslov razine 3</h3>
  <h4>Naslov razine 4</h4>
  <h5>Naslov razine 5</h5>
  <h6>Naslov razine 6</h6>

Oblikovanje teksta

  <big>Velika slova u tekstu</big>
  <small>Mala slova u tekstu</small>
  
  <em>Naglašen tekst</em>
  <strong>Deblja slova u tekstu</strong>

  <sub>Slova u indeksu</sub>
  <sup>Slova u eksponentu</sup>

  <ins>Umetnut tekst</ins>
  <del>Obrisan tekst</del>

Web grafički formati

Tri osnovna grafička formata za web su:
jpg, jpeg - Joint Photographic Expert Group
gif - Graphics Interchange Format
png - Portable Network Graphics

Umetanje slike u HTML-u

Sliku umećemo korištenjem praznog elementa <img />
Dodjeljivanjem vrijenosti svojstvu src određujemo:
relativnu adresu: src="../images/krajolik.jpg"
URL adresu: src="http://www.mojwebdizajn.net/krajolik.jpg"
Postavljanjem svojstva height (visine) i width (širine) slike određujemo prostor koji će slika na web stranici zauzeti.

Numerički popisi

Numerički popis umećemo unutar oznaka elementa <ol>...</ol>.
Svaka stavka popisa nalazi se unutar oznaka <li>...</li>.
Primjer numeričkog popisa u html-u:
<ol>
  <li>Doručak</li>
  <li>Ručak</li>
  <li>Večera</li>
</ol>

Simbolički popisi

Simbolički popis umećemo unutar oznaka elementa <ul>...</ul>.
Svaka stavka popisa nalazi se unutar oznaka <li>...</li>.
Primjer simboličkog popisa u html-u:
<ul>
  <li>Mihovil</li>
  <li>Rafael</li>
  <li>Gabrijel</li>
</ul>

Poveznice (engl. link)

Poveznicu stavljamo u html kôd umetanjem oznake elementa <a>.
Uz oznaku elementa moramo navesti svojstvo href kojem dodjeljujemo vrijednost adrese na koju poveznica "skače".
<a href="http://www.mojwebdizajn.net">Web dizajn</a>

Tekst Web dizajn poveznica je na adresu: 
  http://www.mojwebdizajn.net

Relativne i apsolutne adrese

Relativne adrese koristimo radi fleksibilnosti web sjedišta. Primjer:
<a href="../../default.php">Naslovnica</a>

Korištenje apsolutne adrese pogodno je samo kod malih web sjedište. Primjer:
<a href="http://www.mojwebdizajn.net/html/uvod-u-html.php">Uvod u html</a>

Sidra (engl. anchors)

Primjer:

<h2 id="naslov1">Web dizajn</h2>
...
<h2 id="naslov2">Web dizajn</h2>
Poveznicu na sidro označavamo početnim znakom #

Primjer:
<a href="#naslov1">Skok na prvo poglavlje</a>

Poveznica u novom prozoru

Želimo li omogućiti očuvanje sadržaja postojećeg prozora i istovremeno prikazati sadržaj web stranice na koju pokazuje poveznica koristimo svojstvo target kojem dodjeljujemo vrijednost "_blank".
Primjer:
<a target="_blank" href="http://www.mojwebdizajn.net">Naslovnica</a>

Tablice

Tablice kreiramo pomoću slijedećih oznaka elemenata.
<table> i </table> - početak i kraj tablice
<th> i </th> - naslov tablice (engl. table header)
<tr> i </tr> - redak tablice (engl. table row)
<td> i </td> - ćelija u tablici (engl. table data)

Primjer naslova i retka tablice

<table>
  <tr>
    <td>1.</td>
    <td>Ivan</td>    
    <td>Horvat</td>
  </tr>
  <tr>
    <td>2.</td>
    <td>Petar</td>    
    <td>Ivić</td>
  </tr>
</table>

Svojstvo širine stupca tablice

Širinu stupca postavljamo pomoću css svojstva width koje umećemo u prvi redak ili naslov stupca tablice.

Svojstvu možemo dodijeliti:
relativnu vrijednost (u postotcima style="width: 30%;") ili
apsolutnu vrijednost (u pikselima style="width: 200px;").
Relativna vrijednost se mijenja zajedno s promjenom širine prozora web preglednika.

Zadatak za provjeru

Hvala na pozornosti!

Pitanja?