Uvod u HTML
Prvo da kažemo što je to HTML.
HTML je skraćenica od HyperText Markup Language.
To je opisni jezik za stvaranje web stranica. Njime se opisuje izgled dokumenta, pozicije slika, veličina teksta, boja pozadine, boja slova itd.
HTML stranice nisu ništa drugo nego obične tekstualne datoteke koje sadržavaju upute kako prikazati stranicu. Za opis stranica se koriste tagovi koji se pišu unutar znakova < i >. Evo primjera:
Ovo je <b> tekst </b> za web stranicu.
Ta rečenica bi bila prikazana ovako:
Ovo je tekst za web stranicu.
Kako su HTML stranice ništa drugo nego obične tekstualne datoteke možete ih izrađivati u bilo kojem tekstualnom editoru pa čak i u najjednostavnijem Notepadu koji dolazi s Windowsima.
Umjesto tekstualnih editora, kao što je Notepad, možete koristititi vizualne editore za izradu web stranica kao što su Macromedia Dreamweaver ili Microsoft Frontpage. Vizualni editori web stranica se nazivaju i WYSIWYG editori. What You See Is What You Get
Sa WYSIWYG editorima nemate neku veliku potrebu za učiti HTML, ali svatko tko se želi imalo ozbiljnije baviti izradom web stranica mora naučiti HTML jer je HTML majka svih web stranica i sve počinje od njega.
Sve html stranice koje napravite moraju imati ekstenziju .html ili .htm (npr. mojastranica.html)
Slika kao pozadina
Pozadinsku sliku možete koristiti u bilo kojem elementu (tablicama, odlomcima, body tablice...)
Ovdje ćemo naučiti kako pomoću HTML-a napraviti da slika bude kao pozadina ali inače kada naučite HTML radite to CSS-om.
Evo primjera kako pomoću HTML-a postaviti neku sliku kao pozadinu u tablici.
<table height="200" width="500" background="http://www.nekastranica.com/slike/slika.jpg" >
<tr>
<td>Ova tablica ima pozadinsku sliku </td>
</tr>
</table>
Za pozadinske slike, zbog veličine slika, vam je najbolje koristiti tzv. Patterne odnosno minijaturene sličice koje se stalno ponavljaju koliko je god široka tablica.
Meta Oznake
Meta tagovi se uvijek postavljaju izmedju <head></head>!
Na pocetku svakog html dokumenta,ovisi o programu u kojem pisete vas html kod, prvu liniju zauzima ova linija koda:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- OPIS KODA -
- Oznacuje vrstu browsera namjenjenog za pregled stranice
<meta http-equiv=”REFRESH” content=”60;url=http://www.net.hr”>
- OPIS KODA –
- Refresh stranice svakih 60 sekundi,zelite li mjenjati vrijeme za koje ce se vasa stranica refreshati promjenite broj 60 u bilo koji broj.To ce se samo dogoditi ako izbrisete url=http://www.net.hr,inace bi vas nakon 60 sekundi preusmjerilo na net.hr stranicu.Takodjer ako zelite da se vasa stranica nakon 60 sekundi prebaci na neku drugu stranicu promjenite url=”vasaStranica.com”
<meta http-equiv=”KEYWORDS” content=”more,plaza,odmor”>
- OPIS KODA –
- Kljucne rijeci na koje reagira web pretrazivac,u content=” upisite kljucne rijeci koje karakteriziraju vas site.
- Nemojte misliti da cete odmah dospjeti na neki poznatiji web pretrazivac
<meta http-equiv=”Content-Type” content=”text/html;charset=windows-1250”>
- OPIS KODA –
- Upisujuci ovo u <head> stranica omogucavate sebi pisanje na hrvatskom jeziku,te slova čćšđž
<meta name=”author” content=”Vase ime “>
- OPIS KODA –
- Upisite vase ime ,ili osobne podatke
<meta name=”DESCRIPTION” content=”Opis vase web stranice”>
- OPIS KODA –
Opis vase web stranice
Elementi
Html elementi se sastoje od 3 osnovna dijela:
1. tag koji otvara neki element
2. sadržaj elementa
3. tag koji zatvara taj element
<b>
ovo je podebljani tekst
</b>
ELEMENTI:
<HTML>
-sa ovim elementom počinje i završava svaka web stranica
<HEAD>
-ovaj element se treba nalaziti unutar <html> elementa
-browser ne prikazuje sadržaj unutar ovog elementa
<TITLE>
-ovaj element se treba nalaziti unutar HEAD elementa
-riječi koje napišete unutar ovog elementa će biti prikazane na vrhu web browsera
<BODY>
-sadržaj napisan unutar ovog elementa će se prikazivati na web stranici, to znači tu idu tekst, slike...
PRIMJER:
<html>
<head>
<title>moja stranica</title>
</head>
<body>
moj tekst
</body>
</html>
Komentari
Sa komentarima možete pisati bilo gdje unutar skripte a taj tekst neće biti prikazivan na stranici, tj. moći će se vidjeti samo ako otvorite skriptu sa code editorom. Na ovaj način možete ostavljati sebi poruke unutar skripte i sa njima npr. skrenuti pozornost na jedan dio skripte, ili sa ovime možemo jedan dio skripte isključiti, a sačuvati kod tog dijela, kojeg možemo ponovno aktivirati ako izbrišemo sljedeće:
<! -- sa ovim otvaramo komentar
--> sa ovim zatvaramo komentar
<html>
<head>
<body>
ovo je tekst
<! --kojeg cu izbrisati -->
</body>
</head>
</html>
Formatiranje
U HTML-u se formatira uz pomoć tagova. Evo popisa najpoznatijih tagova za formatiranje:
<p> tag za odlomak </p>
<b> podebljani tekst </b>
<em> nakrivljen tekst </em>
<strong> "jaki" tekst </strong>
<i> nakrivljen tekst </i>
<sup> podignut tekst </sup>
<sub> spusten tekst </sub>
<del> precrtan tekst </del>
<code> tekst kompjuterskog koda </code>
-veličina fonta:
<font size="6"> velicina fonta 6</font>
veličina od 1-7
-boja fonta:
-boju fonta možemo mijenjati na više načina:
<font color="#770000">ovaj tekst je u hexaboji #770000</font>
koristeći hexa zapis boja
<font color="blue">ovaj tekst je plav</font>
ili koristeći ime boje
-također boju fonta možemo zapisati i u rgb zapisu ali taj zapis nije uobičajen
-vrsta fonta:
<font face="Bookman Old Style, Book Antiqua, Garamond">ovom paragrafu je promijenjen font</font>
-početno slovo:
<font size="5" face="Georgia, Arial" color="blue">P</font>ocetno slovo
Linkovi
Vaši linkovi mogu voditi na unutrašnjost stranice(internal) ,na kojoj se nalaze (npr. link "na vrh"
, na stranicu unutar vaše domene(local) ili na neku drugu stranicu izvan vaše domene(global).
O tome ovisi koji ćete href atribut koristiti:
internal href="#strelica"
local href="../slike/slika.jpg"
global href="http://www.hotmail.com"
(href- Hypertext Reference)
Tekst linkovi
<a href="http://www.gaming.com.ba/" target="_blank" >Gaming</a>
Ovako izgleda kod za link u obliku teksta.
Sada ćemo se posvetiti ovom dijelu koda:
target="_blank"
ovaj dio govori na koji način će se otvoriti taj link:
_blank" otvara novu stranicu u novom prozoru
_self" otvara novu stranicu u trenutačnom prozoru
_parent" otvara novu stranicu u okvir koji je "nadređen" linku
_top" otvara novu stranicu u trenutačno otvorenom prozoru, poništavajući sve ostale okvire
Strelice
<b>linkovi<a name="top"></a></b>
<a href="#top">na vrh</a>
sa ovim kodom korisnika će se vratiti na vrh stranice kada on stisne link "na vrh".
Prva linija koda se stavlja ondje gdje želimo da nas stranica odvede kada kliknemo na link "na vrh"; "linkovi" će biti prikazano na browseru, ali će do njega biti skriven dio "top" i onda kada kliknemo na link "na vrh" ta linija koda će potražiti koju će varijablu tražiti, u našem slučaju pronaći će "top", i odvest nas na taj dio teksta.
Email linkovi
<a href="mailto:[email uklonjen]?subject=pomoc&body=trebam pomoc">[email uklonjen]</a>
sa ovim kodom ,kojeg možemo staviti bilo gdje na stranicu, otvorit ćemo vaš email klijent na pisanju nove email poruke sa naslovom "pomoc" i sadržajem poruke "trebam pomoc"
Download linkovi
<a href="http://www.gaming.com.ba/thank_you_b.gif">Slika</a>
sa ovim kodom možete stavljati link na vaše datoteke u domeni (ili datoteke na internetu).
Baza
Dobra je ideja odrediti defaultnu stranicu na koju će ići svi linkovi ako oni ne rade, tj. ako nemogu pronaći stranicu na koju se odnose.
<head>
<base href="http://www.gaming.com.ba/">
</head>
Slikovni linkovi
Slikovne linkove ćete dobiti tako da napišete ovakav kod:
<a href="http://www.gaming.com.ba" target="_blank>
<img src="neka-slika.jpg">
</a>
Uklonite rub tih slika ovako:
<a href="http://www.gaming.com.ba" target="_blank>
<img src="neka-slika.jpg" border="0">
</a>
Slike
Slike se mogu dodati na vašu stranicu sa ovim kodom:
<img src="XXX" />
XXX zamijenite sa jednim od sljedećega
src="pas.gif" slika se nalazi u istom direktoriju kao i HTML stranica
src="../pas.gif" slika se nalazi u prijašnjem direktoriju od HTML stranice
src="../slike/pas.gif" slika se nalazi u direktoriju "slike" , prijašnjem direktoriju od HTML stranice
Alternativni atribut
<img src="slomljenlink/pas.gif" alt="pas" />
u slućaju da se slika nemože učitati, biti će prikazana riječ "pas" unutar okvira slike.
Formatiranje slike
-VISINA I � IRINA
<img src="pas.gif" height="100" width="100">
ako želite vi odrediti veličinu slike a ne da vam browser to odredi koristite kod iznad. Ovo može biti korisno kada vam se stranica počne "raspadati" zbog veličine slika i teksta.
-VERTIKALNO I HORIZONTALNO PODE� ENJE
align (horizontalno)
-right
-left
-center
valign (vertikalno)
-top
-bottom
-center
Ovo je popis mogućih podešenja slika. Primjer koda u kojem je slika podešena:
<p>Ovo je neki tekst</p>
<p>
<img src="pas.gif" align="left">
ovo je opet neki tekst koji će se nalaziti na desno od slike
</p>
Linkovi na slike
<a href="http://www.gaming.com.ba" target="_blank>
<img src="pas.gif">
</a>
sa ovim kodom će browser prikazati sliku koja će voditi na neku stranicu kada kliknete na nju.
<a href="http://www.espn.com" target="_blank>
<img src="ahman.gif" border="0">
</a>
sa ovim kodom odredili ste da neće biti okvira oko slike. Ako želite da slike imaju okvir, zamijenite 0 sa nekim brojem.
<a href="sunset.gif">
<img src="thmb_sunset.gif">
</a>
ovaj kod će prikazati manju verziju slike koja će biti link na veću stranicu. Naravno, manju sliku vi morate napraviti.
Thumbnails-to je naziv za smanjene verzije slika, napravljene da bi se stranica brže učitavala ili zbog estetskih razloga. Thumbnail ima link na sliku u punoj kvaliteti.
Slike kao linkovi
<a href="http://www.gaming.com.ba/">
<img src="pas.gif"> </a>
primjer koda koji će pretvoriti sliku u link na neku stranicu.
<a href="pas.gif"> <img src="thmb_pas.gif"> </a>
primjer koda koji će prikazati na stranici umanjenu sliku koja će biti link na veću sliku.
Liste
Postoje 3 različite vrste lista. <ol>, <ul> i <dl>.
<ul> - unordered list; točkice
<ol> - ordered list; brojevi
<dl> - definition list; točkice
Npr. Ordered lista
Između <ol> i </ol> stavljate <li> tekst </li>
Znači
Proizvodi:
<ol>
<li> DVD </li>
<li> CD </li>
<li> Tipkovnica </li>
<li> Monitor </li>
<li> Miš </li>
</ol>
Rezultat će biti:
Proizvodi:
1. DVD
2. CD
3. Tipkovnica
4. Monitor
5. Miš
Možete i odabrati što će biti umjesto brojeva ovako:
<ol type="a">
<ol type="A">
<ol type="i">
<ol type="I">
U prvom primjeru pomoću ovoga <ol type="a"> bi se ispisalo
a. DVD
b. CD
c. Tipkovnica
d. Monitor
e. Miš
Za <ul> možete birati između izgleda točkica.
<ul type="square">
<ul type="disc">
<ul type="circle">
eto nadam se da sam pomogao
