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:

  1. jpg, jpeg - Joint Photographic Expert Group
  2. gif - Graphics Interchange Format
  3. 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.aspx">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.aspx">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?