HTML tutorijali: 2013

понедељак, 4. новембар 2013.

Uvod u HTML

Prvo da kažemo šta 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 uputstva kako prikazati stranicu. Za opis stranica se koriste tagovi koji se pišu unutar znakova . 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 svako ko 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)

Za postavljanje web stranice na internet, potreban vam je web hosting i neki FTP program. Preporucujem besplatan FTP program pod imenom Filezilla. Pogledajte uputstva za rad za Filezilla programom.

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>

Atributi

HTML atributi se koriste za proširivanje tagova. Imamo više vrsta atributa a neki od njih su:
Class ili ID atribut
Name atribut
Title atribut
Align atribut
Valign atribut

Class ili ID atribut
Te atribute ćemo najčešće koristiti kada imamamo stil definiran u CSS-u. Znači ako negdje u nekom CSS Style-u imamo definirano npr. pod klasom "odlomak" plava pozadina, bijela slova, bold slova i italic itd. Tada samo u HTML fajlu napišemo npr. <table class="odlomak">

Ali više o CSS-u pogledajte u CSS tutorijalu i sve će vam biti puno jasnije.

Name atribut
Sa name atributom dodjeljujemo ime nečemu, npr. polju za unos teksta:

Ime: <input type="text" name="ime">
Prezime: <input type="text" name="prezime">

Takve ćete kasnije formulare koristiti kada budete trebali raditi sa formularima.

Title atribut
Ovo je možda malo i zaboravljeni atribut i ne koristi se baš često, ali eto red je da i njega naučimo. Evo primjera kako dodati Title atribut:

<p title="Ja ucim HTML">Ovo je moj tekst</p>

Probajte sada doći mišem na rečenicu Ovo je moj tekst. (Naravno ne u html kodu nego kada usnimite i učitate stranicu)

Align atribut
Za razliku od title atributa align atribut se dosta često koristi. Njime određujemo poziciju nekog teksta, tablice, slike itd. Evo primjera

<p align="center">Ovo je moj tekst</p>
<p align="left">Ovo je moj tekst</p>
<p align="right">Ovo je moj tekst</p>

Valign atribut
Ovo je dosta slično kao i align atribut samo što se ovaj koristi za vertikalno pozicioniranje. Evo primjera sa napravljenom tablicom i pozicioniranim tekstom skroz na dno.

<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="307" valign="bottom" bgcolor="#CCCCCC">Ovo je moj tekst </td>
</tr>
</table>

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:

 tag za odlomak 
 podebljani tekst 
 nakrivljen tekst 
 "jaki" tekst 
 nakrivljen tekst 
 podignut tekst 
 spusten tekst 
<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.tutorijali.net/" target="_blank" >Tutorijali.net</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:tutor@tutorijali.net?subject=pomoc&body=trebam pomoc">tutor@tutorijali.net</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.tutorijali.net/tekst.txt">tekst dokument</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.tutorijali.net/">
</head>

Slikovni linkovi

Slikovne linkove ćete dobiti tako da napišete ovakav kod:

<a href="http://www.tutorijali.net" target="_blank>
<img src="neka-slika.jpg">
</a>

Uklonite rub tih slika ovako:

<a href="http://www.tutorijali.net" 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.tutorijali.net" 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.tutorijali.net/">

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

Tablice

Tablice su možda i najzbunjenije za početnike i neki kad to vide pobjegnu od HTML-a jer misle: "� ta će mi to kad imam Dreamweaver koji to umjesto mene obavi". E pa to nije baš tako. Ako budete možda nekad radili sa PHP-om ili ASP-om trebat će vam znanje "ručne" izrade tablica u HTML-u.

Za početak tablice koristimo <table>. U tom elementu postoje tagovi <tr> (redak) i <td> (stupac).
Evo primjera jedne tablice sa dva reda i dva stupca.

<table border="1">
<tr>
<td> Prvi red i prvi stupac </td>
<td> Prvi red i drugi stupac </td>
</tr>
<tr>
<td> Drugi red i prvi stupac </td>
<td> Drugi red i drugi stupac </td>
</tr>
</table>

Ovako pravimo ako imamo npr. jedan redak sa u prvom stupcu a u istom tom redku u drugom stupcu imamo dva redka.

Evo primjera:

<table border="1">
<tr>
<td rowspan="2">Jedan redak </td>
<td>Prvi redak</td>
</tr>
<tr>
<td>Drugi redak </td>
</tr>
</table>

Primjetite Rowspan s brojem 2. Taj broj označava koliko se redaka nalazi u drugom stupcu.

Kada imate dva redka i u prvom 1 stupac a u drugom 2 stupca. Onda koristite Colspan. Evo primjera:

<table border="1">
<tr>
<td colspan="2">Jedan redak </td>
</tr>
<tr>
<td>Prvi stupac </td>
<td>Drugi stupac </td>
</tr>
</table>

Cellspacing
Koristite cellspacing za razmak između rubova tablice. Pogledajmo primjer:

<table border="1" cellspacing="6">
<tr>
<td colspan="2">Jedan redak </td>
</tr>
<tr>
<td>Prvi stupac </td>
<td>Drugi stupac </td>
</tr>
</table>

Cellpadding
Cellpadding koristite kada želite odvojiti tekst od rubova tablice. Pogledajmo primjer:

<table border="1" cellpadding="15">
<tr>
<td colspan="2">Jedan redak </td>
</tr>
<tr>
<td>Prvi stupac </td>
<td>Drugi stupac </td>
</tr>
</table>

Boja pozadine

Boja pozadine odnosno bgcolor atribut se koristi za promijenu boje pozadine cijele stranice ili pojedinih elemenata kao što su tablice. Bgcolor možete staviti na više mjesta u HTML elemente ali mi vam prporučamo da bgcolor koristite samo za boju pozadine stranice a za tablice koristite CSS.

Evo primjera kako promijeniti boju pozadine stranice:

<body bgcolor="blue">
Boja pozadine je postavljena.
</body>

HTML sistem bojanja - imena boja
Sada ćemo naučiti neke boje koje koristimo u HTML-u.
Postoje 3 različite metode postavljanja pozadinske boje. Najjednostavniji je općeniti način (primjer: blue, green, red, silver, black, yellow...)

Evo 16 osnovnih boja:

Drugi način je Hexadecimalni način bojanja. Evo primjera:

<body bgcolor="#006699">
Boja pozadine je postavljena.
</body>

Ovdje možete vidjeti primjere boja.

Treći način bojanja je sa RGB vrijednostima. Pogledajmo primjer:

<body bgcolor="rgb(0,0,255)">
Boja pozadine je postavljena.
</body>

Treći način bojanja nije preporučljiv.

Primjer dodavanja pozadinske boje tablici

<table bgcolor="#006699" border="1">
<tr>
<td> Neka vrsta plave boje </td>
</tr>
</table>

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.

U sljedećem tutorijalu ćemo naučiti kako napravit Layout stranice pomoću 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

Kodiranje HTML dokumenata

Često vidim na internetu hrvatske webove kojima nedostaju hrvatski dijakritički znakovi (š,đ,č,ć,ž). Često ih ljudi jednostavno ne pišu jer im je valjda "preteško" pisati točno ali često zna biti slučaj da njihove web stranice ne podržavaju sve naše znakove.

Naime, svaki HTML dokument se treba kodirati u odgovarajućem skupu znakova tj. kodu.

Većina programa za stvaranje HTML datoteka koriste ISO-8859-1 kao preodređeni kod. Njemu je baza latinsko pismo s određenim dodatnim znakovima. Sljedeći jezici mogu koristiti ISO-8859-1 bez bojazni da im se neka slova neće točno prikazati: švedski, engleski, norveški, islandski, irski, danski, škotski, španjolski, portugalsk, njemački, itd.

Za hrvatski jezik je potreban drugi kod koji podržava naše dijakritičke znakove. Ustvari, postoje 2 koda koja su nam od koristi. Prvi je ISO-8859-2 i koriste ga mnogi slavenski jezici od kojih su neki poljski, hrvatski, češki, slovački, srpski (latinica), slovenski, itd. Drugi kod je UTF-8. On je uniformni koji je osmišljen da sadržava sve svjetke znakove . U njemu se može pisati ćirilicom, kineskim, japanskim, sanskrtom i gotovo svim pismima svijeta uz iznimke. Preporučam njegovo korištenje iz dva razloga. Prvi je taj što nikad ne znate kada ćete morati koristiti znakove koje vaš trenutni kod ne podržava a drugi je taj što većina današnjih tekstualnih editora koje koristimo za stvaranje HTML datoteka nema mogućnost kodiranja u ISO-8859-2 formatu.

To je bio uvod u kodiranje HTML dokumenata (ali i praktički svih ostalih) a sada je vrijeme da vam i pokažem kako se to radi. Primjera radi koristit ću par najpopularnijih tekstualnih editora.

Što svi često misle, kodiranje HTML dokumenta nije samo dodavanje sljedećeg meta taga u head dio stranice:

<meta http-equiv="content-type" content="text/html; charset=utf-8">

To vrijedi jedino ako koristite windows-1250 kodiranje što ne preporučam jer onda Linux, Mac i ostali korisnici neće ispravno vidjeti sve znakove. To kodiranje je SAMO za korisnike s Windowsima.

Osim što treba staviti taj dio koda u head dio dokumenta (a ni to nije uvijek potrebno) treba i SPREMITI datoteku u odgovarajućem kodiranju. Kod svakog editora je ovo drugačije a ja sam ovdje naveo nekoliko popularnijih. Ako koristite neki program koji nije ovdje naveden probajte naći opciju tipa file encoding, character encoding, encoding, file type ili slično te odaberite kodiranje koje želite. Većina programa, osim onih opširnijih kao Dreamweaver ili Frontpage, neće imati ISO-8859-2 ali i tako je bolje koristiti UTF-8.

Notepad

Kod spremanja datoteke imate polje Encoding. Odaberite UTF-8 umjesto ANSI.

Notepad++

Otiđite na Format->Encode in UTF-8 ili UTF-8 without BOM. BOM (byte order mark) je jedna stvarčica vezana uz UTF kodiranje ali je najbolje da je izbjegavajte jer stariji pretraživači (a i noviji nekad) znaju ispisati na početku dokumenta čudne znakove što je posljedica korištenja BOM-a.

Ako želite da vam svi novi dokumenti u Notepadu++ budu kodirani u UTF-8 onda kliknite na Edit->Preferences... i pod tabom New Document odaberite UTF-8 (sa ili bez BOM-a, po želji).

Stranice

понедељак, 4. новембар 2013.