Web upotrebljivost - Logo

Tražilica

Nalazite se ovdje: Naslovnica >> Savjeti >> Web dizajn >> Uvod u HTML

Danas je:

Uvod u HTML

članak objavljen: 05. 02. 2009.

Napomena:
Ovaj članak je napisan za početnike, odnosno sve one koji se po prvi put susreću sa oblikovnim jezikom HTML (Hypertext Markup Language) kojim se definira struktura i sadržaj web dokumenata i pomoću kojega se izrađuju web stranice. Članak je podijeljen u nekoliko glavnih cjelina kako bi se čitatelj mogao jednostavnije snalaziti na stranici.

Brzi linkovi na određeni dio sadržaja stranice

Alati

Ispiši članak

Podijeli sadržaj sa tvojim prijateljima

1) Uvod u HTML

Napomena:
U ovoj lekciji ću govoriti o HTML-u, odnosno o njegovoj zadnjoj verziji XHTML-u - koji je neznatno unaprijeđen, a od HTML-a se razlikuje u nekoliko ograničenja i napomena. Dakle, kada govorim o HTML-u – mislim na njegovog mlađeg brata XHTML-a (ukoliko nije drugačije navedeno).
Također, neke engleske ili hrvatske nazive i kratice ću ponekad pisati i opisivati u njihovoj hrvatskoj inačici, npr.:
- HTML tag = HTML oznaka
- HTML dokument = web dokument = web stranica
- link = poveznica
- HTML = HTML
- (X)HTML = HTML i XHTML

HTML (Hypertext Markup Language) je jezik kojim se definira struktura i sadržaj web dokumenata i pomoću kojega se izrađuju web stranice. Dakle, HTML nije programski niti skriptni jezik, već je on jezik za oblikovanje prikaza web dokumenta koji govori web pregledniku kako prikazati sadržaje na web stranici – slike, tekst, tablice, formulare i ostale multimedijalne dokumente. Nadalje, HTML omogućava web dokumentima međusobno povezivanje putem hipertekstualnih veza tj. linkova.

Kako izgleda HTML dokument?
Ako ste mislili da je web stranica napisana u nekom teškom programskom jeziku ili je jednostavno nacrtana u nekom grafičkom programu – varate se – web stranica koju upravo gledate nije ništa drugo već najobičniji tekstualni dokument. Ako želite vidjeti kako izgleda web stranica ispod „haube“ – točnije njezin HTML kod, otvorite svoju omiljenu web stranicu u Internet Exploreru i odaberite u izborniku View>Source.

Razlike između HTML-a i XHTML-a
Za sve Vas koji ste već naučili HTML ili se ponekad koristite HTML oznakama (tag-ovima), a želite svoje web stranice kreirati u novijoj i standardnijoj inačici - XHTML-u, tada trebate biti svjesni slijedećih najbitnijih razlika između ova dva formata:

  1. ispravno ugnježđivanje XHTML elemenata (nesting elements)
    – svaki element treba biti zatvoren po istom redosljedu u kojem je bio otvoren
    - ispravno je: <b>Sutra je Dan državnosti, a danas idemo u <i>Italiju</i></b>
    - neispravno je: <b>Sutra je Dan državnosti, a danas idemo u <i>Italiju</b></i>
    -     nadalje, ograničenja koja su vezana za ugnježđivanje elemenata:
    - oznaka <a> ne može sadržavati unutar sebe druge oznake <a>
    - oznaka <form> ne može sadržavati unutar sebe druge oznake <form>
    - oznaka <button> ne može sadržavati unutar sebe
    <input>,<select>,<textarea>,<label>,<button>,<form>, <fieldset>,<iframe>
  2. završne oznake (< />)
    - svaka HTML oznaka treba imati određenu završnu oznaku (npr. <html> i </html>). Ukoliko je nema, XHTML dokument neće biti ispravan i kompatibilan sa standardom
    - ispravno je: <body>.....</body>, <p>.....</p>
    - neispravno je: <body>...., <p>......
  3. „prazni elementi“ (empty elements)
    - svaki prazan HTML element (npr. <meta>, <br> ili <img>) treba imati kosu crtu (/) napisanu odmah prije završne zagrade.
    - ispravno je: <br />, <img />, <meta />
    - neispravno je: <br>.....</br>, <img>.....</img>, <meta>.....</meta>
    - napomena: stavite prazan razmak između praznog taga i simbola / 
    - ispravno je: <br />
    - neispravno je: <br/>
    - popis nekih praznih HTML tagova napisanih ispravno u XHTML formatu: <br />, <img />,
    <hr />, <param />. <img />, <link />, <input /> i <meta />
  4. osjetljivost na veličinu slova (case sensitivity)
    - XHTML je vrlo osjetljiv na sve oznake i atribute oznaka
    - ispravno je koristiti npr. samo <a> ili <img> oznake koje su napisane malim slovima
    ­- neispravno je koristiti i miješati <a> i <A>, ili <IMG> oznake u kodu
  5. vrijednosti atributa trebaju biti pod navodnim znacima
    - sve vrijednosti atributa u XHTML-u, uključujući i numeričke vrijednosti trebaju biti napisane pod navodnim znacima
    - ispravno je: <img src=“slika.jpg“ />, <img width=“150“ />
    - neispravno je: <img src=slika.jpg />, <img width=150 />

Svi HTML dokumenti se sastoje od elemenata koji se zovu oznaka ili tag, a koji imaju određene nazive napisane unutar zagrada manje od (<)  i  veće od (>) . Većina HTML oznaka su tzv. kontejneri koji imaju početnu i završnu naredbu npr. <html>....</html> unutar koji se nalazi sadržaj. Ove oznake govore web pregledniku kako treba prikazati sadržaj koji se nalazi između njih, npr.:

 <b>Oni idu u školu koja se nalazi u našem naselju.</b>

Ovaj cijeli tekst će u web pregledniku biti ovako prikazan:

Oni idu u školu koja se nalazi u našem naselju.

Dakle, tekst će biti prikazan podebljano jer se nalazi između dvije HTML naredbe <b> i </b> koje služe za oblikovanje teksta u podebljanom formatu. Zapamtite, da završni tag (npr. </b>) sadrži kosu crtu ispred naziva i završne zagrade koja web pregledniku govori da tu završava formatiranje teksta u podebljanom formatu; slijedeći tekst koji dolazi iza njega neće biti napisan u podebljanom formatu.Također, bitno je svaki HTML dokument spremiti sa ekstenzijom .html ili .htm

U nastavku ću navesti neke najosnovnije HTML oznake (tagove) koje ćemo koristiti u lekcijama koje slijede:

  1. Naslov (<h1>)
     Naslovi se koriste za oblikovanje najvećih i/ili najbitnijih sekcija na web stranici.

    U web pregledniku to izgleda ovako:

    Najveći naslov, Podnaslov, Manji podnaslov

    A u HTML kodu to izgleda ovako:
<h1>Najveći naslov</h1>   
  <h2>Podnaslov</h2>   
  <h3>Najmanji naslov</h3>
  1. Odlomak (<p>) Odlomci služe za definiranje početka i kraja nekog teksta i određivanje razmaka između njih.

    U web pregledniku to izgleda ovako:
    Ovo je prvi odlomak
    Ovo je drugi odlomak

    A u HTML kodu to izgleda ovako: 
<p>Ovo je prvi odlomak</p>
<p>Ovo je drugi odlomak</p>
  1. Odjeljak (<div>)
    Odjeljci služe kao “kontejneri” (odjeljci)  koji sadrže tekst, slike i sl. i definiraju sekcije unutar web stranice u punoj širini.

    U web pregledniku to izgleda ovako:
    Ovaj odjeljak sadrži tekst. I još neki tekst.

    A u HTML kodu to izgleda ovako: 
<div>Ovaj odjeljak sadrži tekst. I još neki tekst.</div>
  1. Span tag (<span>)
    Span tag služi za oblikovanje dijelova teksta unutar teksta odnosno normalnog toka teksta na web stranici.

    U web pregledniku to izgleda ovako:
    Ovo je glavna rečenica koja sadrži zeleni tekst, zatim ukošeni tekst i na kraju tekst koji ima crvenu boju pozadine

    A u HTML kodu to izgleda ovako: 
<p>Ovo je glavna rečenica koja sadrži 
<span style="color:green;">zeleni tekst</span>, 
zatim <span style="font-style:italic"> ukošeni tekst</span> 
i na kraju tekst koji ima <span style="background:red;">
crvenu boju pozadine</span></p>
  1. Link (<a>)
    HTML oznaka za link je <a> tag, koji služi za kreiranje linka odnosno poveznice sa nekom drugom web stranicom ili određenim mjestom na samoj stranici.

    U web pregledniku to izgleda ovako:
    Link na drugu stranicu

    A u HTML kodu to izgleda ovako: 
<a href=”stranica-2.html”>Link na drugu stranicu</a>
  1. Slika (<img>)
    - HTML oznaka za sliku je <img> tag, koji služi za umetanje slike u dokument

    U web pregledniku to izgleda ovako:


    A u HTML kodu to izgleda ovako: 
<img src="menu.gif" width="400" height="50" />
  1. Naslov (title)
    Title tag se nalazi u <head> tagu dokumenta i ne prikazuje se na stranici u web pregledniku, već se nalazi u naslovnoj traci web preglednika (na vrhu prozora) i definira – pogodili ste - naslov stranice

    U web pregledniku to izgleda ovako:

    A u HTML kodu to izgleda ovako: 
<title>Ovo je naslov web stranice</title>
Na vrh Na vrh

2) Anatomija HTML elementa

Kao što sam već rekao, HTML dokumenti su tekstualni dokumenti koji sadrže HTML elemente. HTML elementi se definiraju pomoću HTML oznaka (tagova). HTML oznake su okružene zagradama < > i dolaze u parovima, npr. <a> i </a>. Tekst koji se nalazi unutar ovih oznaka je sadržajni element. (slika 1.)

HTML - Anatomija HTML elementa

Slika 1. Anatomija HTML elementa

Osnovni elementi web stranice
Osnovni HTML elementi koje treba imati svaka web stranica su: <html>, <head>, <title>, <body> i, naravno – sadržaj (slika 2.).

U HTML kodu to izgleda ovako:

<html>
<head>
<title>Moja stranica</title>
</head>
<body>
<p>Moj prvi tekst napisan u HTML kodu.</p>
</body>
</html>

HTML - Osnovni elementi HTML dokumenta

Slika 2. Osnovni elementi HTML dokumenta

Obratite pažnju na slijedeće:

  1. svi HTML elementi se nalaze unutar para oznaka <html> i </html>
  2. <html>,<head> i <body> se još zovu i strukturalni tagovi odnosno oznake koje definiraju glavnu strukturu („kostur“) web dokumenta
  3. svaka HTML oznaka ima početnu i završnu naredbu gdje se završna naredba razlikuje samo po kosoj crti prije naziva elementa, npr. <head> i </head>
  4. svaki par elemenata opisuje sadržaj koji se nalazi među njima, npr. <b> i </b> element će sadržaj koji se nalazi unuar ovih oznaka prikazati podebljano
  5. osim <html> oznake postoje još dvije bitne oznake koje sačinjavaju HTML dokument:
    1. <head>...</head> - sadrži sve potrebne informacije o web stranici, npr.: naslov stranice (<title>), poveznicu sa eksternim CSS dokumentom (<link>) itd...
    2. <body>...</body> - sadrži sve ono što želite prikazati na web stranici, npr. slike, tekstovi, flash animacije, forme i dr
Na vrh Na vrh

3) Atributi HTML oznaka

Atributi definiraju odnosno opisuju dodatna svojstva određenog HTML elementa, kao što su npr.: boja, veličina, ime, stil...Atributi su uvijek napisani u ovom formatu: naziv=“vrijednost“ (name=“value“)
Svi atributi odnosno njihove vrijednosi trebaju biti napisani pod navodnim znacima.

Primjeri:

<h1> tag će naslov centrirati horizontalno u web pregledniku. Atribut je align i ima vrijednost center.

<h1 align="center">Naslov</h1>

<hr> tag (horizontalna linija) će u web pregledniku biti prikazan u crvenoj boji. Atribut je color i ima vrijednost red.

 <hr color="red" />

<img> tag će u web pregledniku prikazati sliku koja se nalazi na računalu (u istoj mapi gdje se nalazi i sama web stranica), pod nazivom krug.png koja je 50px široka i 70px visoka i koja ima okvir debljine 1 px

<img  src="krug.png" width="50" height="70"  border="1" />

<a> tag govori web pregledniku da se klikom na riječi „Kontakti“ poveže sa stranicom koja se zove index.html, a koja se nalazi u mapi „kontakti“ 

<a href="kontakti/index.html">Kontakti</a>

4) Spremanje HTML dokumenta (izbornik File>Save)

Nakon što ste upisali osnovne HTML elemente i dodali tekst, stranicu je potrebno spremiti sa ekstenzijom .html , npr. index.html. Na taj način će web preglednik znati da je riječ o web stranici i ista će se prikazati u pregledniku.

Kako nazvati HTML dokument?
Svaki HTML dokument treba spremiti sa ekstenzijom .html, a sam naziv dokumenta napisati malim slovima. To je potrebno napraviti zato što su neki web serveri (npr. Linux) osjetljivi na veličinu slova u nazivu dokumenta. Npr. ako u adresnu traku web preglednika napišete INDEX.html, a naziv dokumenta je zapravo index.html isti se neće otvoriti i dobit ćete grešku “Page not found”. Ukoliko je potrebno naziv dokumenta napisati sa više riječi iste treba odvojiti ili znakom “minus” (–) ili znakom “donja crtica” (_), npr. o_nama.html ili kako-napraviti-web-stranicu.html. Specijalni znakovi i naša slova nisu dozvoljeni u nazivima HTML dokumenata, npr. $, ?, #, /, :, č, ć, š, ž, đ itd…
Prva stranica (index.html)
Svaki put kada otvarate određeno web mjesto (web site) u web pregledniku ili mapu unutar web mjesta, a niste izričito zatražili otvaranje određene web stranice, web preglednik će otvoriti preddefiniranu (default-nu) web stranicu odnosno index.html. Bitno je zapamtiti, da prva web stranica odnosno Naslovnica treba biti tako nazvana – index.html.

Gledanje web stranice u web pregledniku
Prije nego što web stranicu prebacimo na udaljeno računalo odnosno web server i na taj način je pokažemo našim prijateljima, trebamo provjeriti I testirati je li sve ispravno napisano u HTML kodu. Npr. ako smo našu web stranicu spremili na hard disk u C:\test\index.html dovoljno je kopirati cijelu putanju u adresnu traku web preglednika (slika 3.) ili koristiti izbornik File>Open i potražiti dokument index.html na disku C: u mapi test.

HTML - Otvaranje HTML dokumenta u web pregledniku

Slika 3. Otvaranje HTML dokumenta u web pregledniku

5) Tipovi dokumenata u XHTML-u (Document Type Declaration)

XHTML dokument, da bi bio sukladan standardima koje propisuje World Wide Web Consortium (www.w3.org) treba imati definiran tip dokumenta odnosno Document Type Declaration (DTD) koji određuje koje HTML oznake i koji atributi se koriste za opisivanje sadržaja i strukture stranice u XHTML dokumentu. U prijevodu to znači na koji način će moderan web preglednik koji je sukladan sa najnovijim web standardima - prikazati web stranicu.

Postoji tri tipa DTD-a koja su propisana za XHTML dokument:

  1. Striktni (Strict) – isključuje u svojem kodu upotrebu svih zastarjelih odnosno nestandardnih HTML elemenata i atributa, npr. <font> ili atribut align
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
  1. “Prijelazni” (Transitional) – uključuje sve elemente iz specifikacije HTML 4, ali uz pridržavanje određenih specifičnosti za pisanje oznaka i atributa u kodu
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
  2. “Okvirni” (Frames) – isti kao i Transitinal, ali se koristi kod stranica koje sadrže okvire (frames)
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">

Znam, sada ste sigurno pomislili: “Pa, neću valjda trebati pamtiti ovaj kod i upisivati ga svaki put kada kreiram novu web stranicu?” – Naravno, da ne! Ovu “kobasicu” od teksta ne trebate pamtiti – prilikom kreiranja novog dokumenta u Dreamweaveru, ista će biti automatski ubačena na određeno mjesto u zaglavlje dokumenta, zajedno sa svim ostalim osnovnim HTML elementima (slika).

HTML - Tranzicijski tip HTML dokumenta

Slika 4. Tranzicijski tip HTML dokumenta

Savjet:
Ako želite da vaš XHTML dokument bude sukladan najnovijim web standardima, kompatibilan sa najnovijim verzijama web preglednika (npr. Internet Explorer 7, Firefox 2 ili Opera 9), ispravno validiran u programima za provjeru ispravnosti napisanog koda (W3C Validator) i na kraju ispravno semantički napisan - potrebni su slijedeći elementi:
1. ispravan tip XHTML dokumenta (DTD tip) smješten ispred <head> elementa
2. svi elementi trebaju biti smješteni unutar <html> i </html> elemenata
3. svi elementi i njihovi atributi trebaju biti ispravno ugnježđeni, upareni, zatvoreni i napisani malim slovima
4. svi atributi odnosno vrijednosti atributa trebaju biti napisani pod navodnim znacima, npr.
<table bgcolor="#FF0000">
5. koristiti HTML elemente prema značenju sadržaja koji opisuju, npr.: HTML oznaka <p>...</p> se treba koristiti isključivo za definiranje odlomka (nije dobro koristiti više <p> oznaka za redom da bi se napravili razmaci odnosno prazan prostor među njima); zatim <h1>...</h1> se treba koristiti za najveći i najglavniji naslov na stranici; <em>...</em> se treba koristiti za naglašavanje sadržaja (ne koristiti <i>...</i> - italic, kao što se koristilo u starijim verzijama HTML-a) ; umjesto <b>...</b> - bold treba koristiti <strong>...</strong>...

Autorska prava

Svi članci objavljeni na web stranicama www.web-upotrebljivost.com, uključujući tekstualne, grafičke, programske i ostale materijale, zaštićeni su Zakonom o autorskim pravima.

Distribucija odnosno korištenje članka je dozvoljena samo pod slijedećim uvjetima:

  • Sadržaj članka ne smije se mijenjati ili nadopunjavati
  • Potrebno je navesti izvor prema orginalnom sadržaju na ovim stranicama sa direktnim linkom koji se nalazi ispod kopiranog sadržaja i to: www.web-upotrebljivost.com, Dario Šuveljak, Zagreb

 

Na vrh Na vrh

blog comments powered by Disqus