Uvod U HTML Prezentacija

EVROPSKI UNIVERZITET BRČKO
Tehnički Fakultet
Katedra Inženjerska informatika
Predmet: Web dizajn

TEMA: Uvod u HTML
STUDENT: PROFESOR:
Fuad Hasanović Prof. Dr Halid Žigić
1. HTML
1.1. Uvod u HTML
Prvo da ukratko objasnimo šta je to HTML.
HTML je skraćenica od HyperText Markup Language.
To je opisni jezik za stvaranje web stranica. Njime se opisuju 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 . Evo primjera:
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).
1.2. 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.
elementi namjena
<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:
1.3. 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
1.4. 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:
veličina od 1-7
-boja fonta:
-boju fonta možemo mijenjati na više načina:
koristeći hexa zapis boja
ili koristeći ime boje
-također boju fonta možemo zapisati i u rgb zapisu ali taj zapis nije uobičajen
-vrsta fonta:
-početno slovo:
1.5. 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)
Ovako izgleda kod za link u obliku teksta.

Sada ćemo se posvetiti ovom dijelu koda:
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
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
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"
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.
Slikovni linkovi
Slikovne linkove ćete dobiti tako da napišete ovakav kod:

Uklonite rub tih slika ovako:
1.6. Slike
Slike se mogu dodati na vašu stranicu sa ovim kodom:

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
u slučaju da se slika nemože učitati, biti će prikazana riječ "pas" unutar okvira slike.
Formatiranje slike
-VISINA I ŠIRINA
-VERTIKALNO I HORIZONTALNO PODEŠ ENJE
align (horizontalno)
-right
-left
-center
valign (vertikalno)
-top
-bottom
Ovo je popis mogućih podešenja slika. Primjer koda u kojem je slika podešena:
-center
Linkovi na slike
sa ovim kodom će browser prikazati sliku koja će voditi na neku stranicu kada kliknete na nju.
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
primjer koda koji će pretvoriti sliku u link na neku stranicu.
primjer koda koji će prikazati na stranici umanjenu sliku koja će biti link na veću sliku
1.7. 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.....
Rezultat će biti:
Proizvodi:
1. DVD
U prvom primjeru pomoću ovoga <ol type="a"> bi se ispisalo
2. CD
3. Tipkovnica
a. DVD
4. Monitor
b. CD
5. Miš
c. Tipkovnica
d. Monitor
Možete i odabrati što će biti umjesto brojeva
e. Miš
ovako:
Za <ul> možete birati između izgleda točkica.
<ol type="a">
<ol type="A">
<ul type="square">
<ol type="i">
<ul type="disc">
<ol type="I">
<ul type="circle"
1.8. Tablice
Tablice su možda i najkomplikovanije za početnike i zbog toga mnogi „bježe“ od HTML – a kada na red dođe
rad sa tablicama. Šta će mi to kad imam Dreamweaver koji to umjesto mene obavi?", je pitanje koje se često
postavlja. E pa to nije baš tako. Ako budete možda nekada radili sa PHP-om ili ASP-om trebati ć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.
Ovako pravimo ako imamo npr. jedan redak sa u prvom stupcu a u istom tom redku u drugom stupcu imamo dva
redka.
Evo primjera:
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:
Cellspacing
Koristite cellspacing za razmak između rubova tablice. Pogledajmo primjer:
1.9. 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:
HTML sistem bojenja - 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:
Ovdje možete vidjeti primjere boja.
Treći način bojanja je sa RGB vrijednostima.

1.10. 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.
Za pozadinske slike, zbog veličine slika, vam je najbolje koristiti tzv. Patterne odnosno minijaturne sličice
koje se stalno ponavljaju koliko je god široka tablica.
1.11. 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:
- OPIS KODA -
- Označava vrstu browsera namjenjenog za pregled
stranice
- 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,inače bi vas nakon 60 sekundi
preusmjerilo na net.hr stranicu.Također ako želite da se vaša stranica nakon 60 sekundi prebaci na neku drugu
stranicu promjenite url=”vašaStranica.com”
- OPIS KODA –
- Upisujući ovo u <head> stranica omogućavate
sebi pisanje na našem jeziku, te slova čćšđž
- OPIS KODA –
- Upisite vaše ime ili osobne podatke
- OPIS KODA –
Opis vaše web stranice

Uvod U HTML Prezentacija

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Uvod U HTML Prezentacija

Uploaded by

Copyright:

Available Formats

EVROPSKI UNIVERZITET BRČKO

Predmet: Web dizajn

Ta rečenica bi bila prikazana ovako:

Ovo je tekst za web stranicu.

Html elementi se sastoje od 3 osnovna dijela:

<HEAD> -ovaj element se treba nalaziti unutar <html>

<TITLE> -ovaj element se treba nalaziti unutar HEAD

<BODY> -sadržaj napisan unutar ovog elementa će se

<! -- sa ovim otvaramo komentar

U HTML-u se formatira uz pomoć tagova. Evo popisa najpoznatijih tagova za formatiranje:

<p> tag za odlomak </p>

koristeći hexa zapis boja

ili koristeći ime boje

(href- Hypertext Reference)

Ovako izgleda kod za link u obliku teksta.

ovaj dio govori na koji način će se otvoriti taj link:

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

Slike se mogu dodati na vašu stranicu sa ovim kodom:

-VERTIKALNO I HORIZONTALNO PODEŠ ENJE

Slike kao linkovi

primjer koda koji će pretvoriti sliku u link na neku stranicu.

Postoje 3 različite vrste lista. <ol>, <ul> i <dl>.

<ul> - unordered list; točkice

Npr. Ordered lista

Evo primjera kako promijeniti boju pozadine stranice:

HTML sistem bojenja - imena boja

Evo 16 osnovnih boja:

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

Ovdje možete vidjeti primjere boja.

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

Meta tagovi se uvijek postavljaju izmedju <head></head>!

You might also like