HyperText Markup Language

HyperText Markup Language Tehnički fakultet “Mihajlo Pupin” Zrenjanin

HTML • Datoteke tipa .htm ili .html su obične tekstualne datoteke koje se nalaze na disku web servera i za kojima prosleđujemo zahtev iz našeg browsera. • Web server ih iščitava sa diska i šalje našem web klijentu (browseru) putem HTTP protokola. • HTTP = HyperText Transfer Protocol • U HTML datotekama se, osim informacija, nalazi i način njihovog prikazivanja – kojom veličinom i vrstom slova će biti prikazan tekst, koja će biti boja slova ili pozadine, gde će se nalaziti slike, koja područja ekrana su hiperlinkovi itd.

HTML tagovi • Svi navedeni opisi koje browser obrađuje nalaze se u tzv. HTML tagovima. To su rezervisane reči koje se nalaze između znakova za veće i manje (<>). • Primer: <FONT>, <B>, <BR> itd • Tagove, kao i verzije HTML jezika (trenutno je važeća verzija 4.01 od 24.12.1999.) propisuje W3C internacionalni konzorcijum (http://www.w3c.org) • Neki od tih tagova moraju imati i početak i kraj (otvoreni i zatvoreni tag), a neki ne.

Struktura HTML dokumenta • HTML dokument po pravilu ima dve osnovne sekcije: HEAD i BODY (glava i telo). • Svaki HTML počinje i završava se istoimenim tagom (<HTML> … <HTML>), mada to nije neophodno. • Struktura: <HTML> <HEAD> … </HEAD> <BODY> … </BODY> </HTML>

Interpretiranje HTML-a • Ne interpretiraju svi browseri potpuno isto sav HTML kod, mada je situacija neuporedivo bolja nego u prošlosti. • Na tržištu browsera je vodeći MSIE, tako da se izgled stranica prilagođava uglavnom ovom programu. • Pored opisa izgleda stranice, veoma često HTML dokumenti sadrže i delove programskog koda, kojim se postiže funkcionalnost koju je nemoguće postići čistim HTML-om. • Skript jezici: JavaScript, VBScript.

Osnovni HTML tagovi • TITLE • Postavlja naslov u naslovnu liniju browsera: <HTML> <HEAD> <TITLE>Ovo je naslov stranice!</TITLE> </HEAD> <BODY> Ovo je tekst na stranici!!! </BODY> </HTML>

Osnovni HTML tagovi • <FONT FACE... SIZE... COLOR> • Određuje kojim oblikom slova, veličinom i bojom će biti ispisan tekst oivičen tagovima: <HTML> <HEAD> <TITLE>Ovo je naslov stranice!</TITLE> </HEAD> <BODY> <font face="verdana" size="+5" color="red">Ovo je crveni tekst</font> </BODY> </HTML>

Osnovni HTML tagovi • <B>, <I>, <U> • Služe osnovnim formatiranjima teksta: Bold (masni tekst), Italic (kurziv), Underlined (podvučeni tekst) <HTML> <HEAD> <TITLE>Ovo je naslov stranice!</TITLE> </HEAD> <BODY> <font face="verdana" size="+1" color="black"><B>Ovo je podebljani tekst</B></font><br> <font face="verdana" size="+1" color="black"><I>Ovo je tekst u kurzivu</I></font><br> <font face="verdana" size="+1" color="black"><U>Ovo je podvuceni tekst<U></font> </BODY> </HTML>

Osnovni HTML tagovi • <BR>, <HR> • Tag <BR> služi za prelazak u novi red, a <HR> podvlači liniju ispod teksta (Horizontal Rule) <HTML> <HEAD> <TITLE>Ovo je naslov stranice!</TITLE> </HEAD> <BODY> Posle ove recenice preci cemo u sledeci red,<BR> a zatim podvuci liniju.<HR> </BODY> </HTML>

Osnovni HTML tagovi • <P align = "..."> • Prelazak u novi paragraf. Moguće je ravnati paragrafe levo, centrirati ili ih ravnati desno. <HTML> <HEAD> <TITLE>Ovo je naslov stranice!</TITLE> </HEAD> <BODY> <P align="right">Ovaj tekst je ispisan desno…</p> <P align="center">…ovaj je na sredini…</p> <P align="left">…a ovaj levo, zar ne?</p> </BODY> </HTML>

Osnovni HTML tagovi • <H1>…<H6> • Stilovi naslova – od Heading 1 do Heading 6. <HTML> <HEAD> <TITLE>Ovo je naslov stranice!</TITLE> </HEAD> <BODY> <H1>Naslov nivoa 1</H1> <H2>Naslov nivoa 2</H2> <H3>Naslov nivoa 3</H3> <H4>Naslov nivoa 4</H4> <H5>Naslov nivoa 5</H5> <H6>Naslov nivoa 6</H6> </BODY> </HTML>

Osnovni HTML tagovi • <UL>, <OL> • (UN)Ordered List. Ovaj tag služi za nabrajanje, tj. za stvaranje liste stavki, koja može biti bulleted ili numbered: <HTML> <HEAD> <TITLE>Ovo je naslov stranice!</TITLE> </HEAD> <BODY> <UL> <LI>kafa <LI>caj <LI>mleko </UL> <OL> <LI>kafa <LI>caj <LI>mleko </OL> </BODY> </HTML>

Osnovni HTML tagovi • <A HREF> • Link ka drugoj HTML stranici ili drugom resursu. Za link ka nekoj drugoj stranici, van servera, treba navesti ceo URL, sa HTTP prefiksom. <HTML> <HEAD> <TITLE>Ovo je naslov stranice!</TITLE> </HEAD> <BODY> <FONT SIZE="+3"><A HREF="druga.html">Ovo je link ka drugoj stranici!</A><FONT> </BODY> </HTML>

Osnovni HTML tagovi • <A HREF="mailto:…"> • Uz rezervisanu reč MAILTO dobijamo linkove ka mail adresama. <HTML> <HEAD> <TITLE>Ovo je naslov stranice!</TITLE> </HEAD> <BODY> <FONT SIZE="+3"><A HREF="mailto:aruena@tfzr.uns.ac.rs">Posaljite mi mail!</A><FONT> </BODY> </HTML>

Osnovni HTML tagovi • <IMG SRC="..." ALIGN="" ALT="Tekst umesto slike" VSPACE="xx" HSPACE="xx" BORDER="xx" WIDTH="xx" HEIGHT="xx"> • Umetanje slike u dokument. Potrebno je navesti putanju do slike. I slika može biti hiperlink – samo je treba zatvoriti unutar <A> taga. <HTML> <HEAD> <TITLE>Ovo je naslov stranice!</TITLE> </HEAD> <BODY> <FONT SIZE="+2">Ovo je globus<FONT><BR> <IMG SRC=“globus.jpg" ALIGN="CENTER" ALT=“mapa" BORDER="1" WIDTH="334" HEIGHT="475"> </BODY> </HTML>

Osnovni HTML tagovi • <BODY BGCOLOR="#ffffcc" LINK="#ffffcc" VLINK="#ffffcc"> • Izmena boje pozadine stranice, linkova, posećenih linkova. Heksadecimalni kod boje ili konstanta (red, blue, white...) <HTML> <HEAD> <TITLE>Ovo je naslov stranice!</TITLE> </HEAD> <BODY BGCOLOR="#000000" LINK="#FFFFFF" VLINK="yellow"> <FONT SIZE="+2"><A HREF="druga.html">Ovo je link!</A><FONT></BODY> </HTML>

Osnovni HTML tagovi • <TABLE> • Kreiranje tabela. Jedan od najbitnijih tagova, jer ne služi samo za prikazivanje tabelarnih podataka, već i za pozicioniranje sadržaja na stranici. Koristi se kombinacija tri taga: TABLE, TR, TD <HTML> <HEAD> <TITLE>Ovo je naslov stranice!</TITLE> </HEAD> <TABLE BORDER="1" WIDTH="100%" CELLPADDING="5" CELLSPACING="5"> <TR> <TD BGCOLOR="#cccccc">Prva celija</TD> <TD><CENTER>Druga celija</CENTER></TD> </TR> </TABLE> </HTML>

HyperText Markup Language