html (hyper text markup language) - Економска …hyper text markup language)...
TRANSCRIPT
Ekonomsko-trgovinska škola „Dositej Obradovid“ Alibunar
HTML
HTML je osnovni jezik za kreiranje strukture i sadržaja, kao i
formatiranje sadržaja stranica na Internetu
Pomoću njega možete menjati boju i veličinu teksta, boju
pozadine, umetnuti sliku i zvuk na Internet stranicu, ali ne
možete izračunati koliko je 2+2
HTML dokumenat je običan tekstualni dokumenat sa
ekstenzijom .htm ili .html, tako da se može kreirati i u bilo kom
od tekst editora, kao što su Notepad, WordPad, MS Word
Ekonomsko-trgovinska škola „Dositej Obradovid“ Alibunar
Svaki HTML dokument sastoji se iz:
• elemenata
• atributa elemenata
• deklaracija
Elementima formiramo strukturu i opisujemo izgled delova sadržaja
HTML dokumenta.
Svaki element se sastoji iz tri dela:
• početni tag
• sadržaj
• završni tag
Tag je specijalna sekvenca znakova – takozvani marker koji je
ograđen znacima < i >
<> - početni tag </ > - završni tag
Struktura HTML dokumenta
Ekonomsko-trgovinska škola „Dositej Obradovid“ Alibunar
Struktura HTML dokumenta
Svaki HTML dokument poseduje bar jedan elemenat najvišeg
nivoa – HTML tag
Otvorite Notepad (ili bilo koji drugi editor teksta i otkucajte):
< html >
</html >
Snimite dokument u
svoj folder pod
imenom prva.html ili
prva.htm
Pri snimanju u polju
Save As Type odaberite
All files a u polju
Encoding izaberite
Unicode
Ekonomsko-trgovinska škola „Dositej Obradovid“ Alibunar
Da bi ova stranica bila prava
HTML stranica fali joj sadržaj
Dvoklikom na ikonicu dokumenta
prva.html otvara se internet browser
(IE, Mozilla Firefox , Chrome,....) i
prikazuje potpuno praznu web
stranicu
Struktura HTML dokumenta
Ekonomsko-trgovinska škola „Dositej Obradovid“ Alibunar
Struktura HTML dokumenta
HTML dokument po pravilu ima dve osnovne sekcije: HEAD i BODY (glava i telo).
<html> <head> . . . </head> <body> . . . </body> </html>
Njime se opisuje zaglavlje HTML dokumenta
Njime se opisuje telo HTML dokumenta
Ekonomsko-trgovinska škola „Dositej Obradovid“ Alibunar
Struktura HTML dokumenta
U zaglavlju se definišu razni podaci koji učestvuju u
komunikaciji između Internet čitača (browser-a ) i Internet
servera
To su obično informacije o samom dokumentu (naslov, opis,
ključne reči, ime autora, itd)
Browser ne prikazjue informacije koje se nalaze između
tagova <head> i </head> osim sadržaja taga <title>
Sadržaj taga <title> je naslov HTML dokumenta koji će se
pojaviti u naslovnoj liniji web browser-a
Ekonomsko-trgovinska škola „Dositej Obradovid“ Alibunar
Struktura HTML dokumenta
<html> <head> <title> Naslov </title> </head> <body> . . . </body> </html>
Ekonomsko-trgovinska škola „Dositej Obradovid“ Alibunar
Struktura HTML dokumenta
Sve ono što vidimo u prozoru browser-a, tj. sadržaj stranice i HTML elementi za formatiranje (opis) tog sadržaja, nalazi se u telu dokumenta koji uokviruje <body> tag
U HTML dokumentu sme da postoji samo jedan par tagova <body> </body>
Ovaj element određuje glavni sadržaj dokumenta
Početni tag <body> ima atribute koji omogudavaju da se odrede karakteristike koje važe na nivou dokumenta:
• boja pozadine ili slika
• boja teksta
• boja posedenih ili neposedenih linkova, itd.
Ekonomsko-trgovinska škola „Dositej Obradovid“ Alibunar
Osnovni HTML tagovi
<html> <head> <title> Naslov </title> </head> <body> Ovo je neki tekst! </body> </html>
Vežba1.htm
Ekonomsko-trgovinska škola „Dositej Obradovid“ Alibunar
Atributi body taga
BGCOLOR – promena boje pozadine
<html> <head> <title> Naslov </title> </head> <body bgcolor=red> Ovo je neki tekst! </body> </html> Vežba2.htm
Ekonomsko-trgovinska škola „Dositej Obradovid“ Alibunar
Atributi body taga
Ovo može i preko heksadecimalne oznake boje
<html> <head> <title> Naslov </title> </head> <body bgcolor=„#FF00FF“> Ovo je neki tekst! </body> </html> Vežba3.htm
Ekonomsko-trgovinska škola „Dositej Obradovid“ Alibunar
Atributi body taga Umesto boje na pozadinu možete postaviti i sliku !
BACKGROUND=„sky.jpg“
<html> <head> <title> Naslov </title> </head> <body background=„sky.jpeg> Ovo je neki tekst! </body> </html> Vežba4.htm
Ekonomsko-trgovinska škola „Dositej Obradovid“ Alibunar
Font tag i njegovi atributi
<FONT FACE... SIZE... COLOR> Određuje kojim oblikom slova, veličinom(1-7) i bojom će biti ispisan tekst oivičen tagovima:
<body background=„sky.jpeg> <font face="verdana" size="5" color="red"> Ovo je font verdana crvene boje veličine 5 </font> </body> Vežba5.htm
Ekonomsko-trgovinska škola „Dositej Obradovid“ Alibunar
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> Naslov </title> </head> <body background=„sky.jpeg> Posle ove rečenice predidemo u novi red <br> a zatim podvudi liniju <hr> </body> </html> Vežba6.htm
Ekonomsko-trgovinska škola „Dositej Obradovid“ Alibunar
<B>, <I>, <U> Služe osnovnim formatiranjima teksta: Bold (masni tekst), Italic (kurziv), Underlined (podvučeni tekst)
Osnovni HTML tagovi
<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>
Vežba7.htm
Ekonomsko-trgovinska škola „Dositej Obradovid“ Alibunar
Osnovni HTML tagovi
<H1>…<H6> Stilovi naslova – od Heading 1 do Heading 6.
<html>
<head>
<title> naslov </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> Vežba8.htm
Ekonomsko-trgovinska škola „Dositej Obradovid“ Alibunar
<P align = "..."> Prelazak u novi paragraf. Moguće je ravnati paragrafe levo (left), centrirati (center) ili ih ravnati desno (right)
Osnovni HTML tagovi
<html>
<head>
<title> Naslov </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> Vežba9.htm
Ekonomsko-trgovinska škola „Dositej Obradovid“ Alibunar
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>Naslov </title>
</head>
<body>
<font size="3">
<a href=„Vežba2.htm">
ovo je link ka drugoj stranici!</a>
</font>
</body>
</html> Vežba10.htm
Ekonomsko-trgovinska škola „Dositej Obradovid“ Alibunar
I opet BODY tag
<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>Naslov </title>
</head>
<body bgcolor="#000000" link="#ffffff"
vlink="yellow">
<font size="3">
<a href=„Vežba2.htm">
ovo je link ka drugoj stranici!</a>
</font>
</body>
</html> Vežba11.htm
Ekonomsko-trgovinska škola „Dositej Obradovid“ Alibunar
<A HREF="mailto:…"> Uz rezervisanu reč MAILTO dobijamo linkove ka mail adresama.
Osnovni HTML tagovi
<html>
<head>
<title>Naslov </title>
</head>
<body>
<font size="+3">
<a href="mailto:ipetuhov@gmail.
com">
posaljite mi mail!</a><font>
</body>
</html> Vežba12.htm
Ekonomsko-trgovinska škola „Dositej Obradovid“ Alibunar
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.
<body>
<font size=„3">
Lepa sela lepo gore
</font><br>
<img src="lepa.jpg" align="center"
alt="nas najbolji film" border=„3"
width=„200" height=„300">
</body>
Vežba13.htm
Ekonomsko-trgovinska škola „Dositej Obradovid“ Alibunar
<UL>, <OL> Ovaj tag služi za nabrajanje, tj. za stvaranje liste stavki, koja može biti bulleted (ul) ili numbered (ol)
<body>
<ul>
<li>kafa
<li>caj
<li>mleko
</ul>
<ol>
<li>kafa
<li>caj
<li>mleko
</ol>
</body> Vežba14.htm
Nenumerisana lista
Numerisana lista
Osnovni HTML tagovi
Ekonomsko-trgovinska škola „Dositej Obradovid“ Alibunar
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
<TABLE>
Osnovni tag. On govori browseru "ovo je tabela", uz nekoliko atributa
kao što su veličina, debljina ivica itd..
<TR>
Ovaj tag (table row) označava horizontalne redove, koji se sastoje od
jedne ili više ćelija.
<TD>
Ovaj tag (table data) označava pojedinačni blok ili ćeliju unutar jednog
reda.
Ekonomsko-trgovinska škola „Dositej Obradovid“ Alibunar
TABLE tag
Svaka tabela mora da ima bar jedan red.
Evo tabele samo sa jednom ćelijom.
<body>
<table border=1>
<tr>
<td>pera</td>
</tr>
</table>
</body>
Vežba15.htm Red tabele
Ćelija
Debljina ivice tabele
Ekonomsko-trgovinska škola „Dositej Obradovid“ Alibunar
TABLE tag
Širina tabele se određuje pomoću:
<TABLE BORDER= WIDTH=100%>
<body>
<table border=1 width=100%>
<tr>
<td>pera</td>
</tr>
</table>
</body>
Vežba16.htm
Ekonomsko-trgovinska škola „Dositej Obradovid“ Alibunar
TABLE tag
Možemo podešavati i visinu tabele:
<TABLE BORDER=1 WIDTH=100 HEIGHT=75>
<body>
<table border=1
width=100 height=75>
<tr>
<td>pera</td>
</tr>
</table>
</body> Vežba17.htm
100
75
Ekonomsko-trgovinska škola „Dositej Obradovid“ Alibunar
TABLE tag
Takođe moguće je kontrolisati gde će se nalaziti sadržaj ćelije
<body>
<table border=1
width=100 height=75>
<tr>
<td align=center> pera</td>
</tr>
</table>
</body>
<TD ALIGN=LEFT, CENTER, RIGHT> ... </TD>
Vežba18.htm
Ekonomsko-trgovinska škola „Dositej Obradovid“ Alibunar
TABLE tag
Moguće je, takođe, kontrolisati i vertikalni položaj sadržaja ćelije.
<TD ALIGN=... VALIGN=TOP, MIDDLE, BOTTOM> ... </TD>
<body>
<table border=1
width=100 height=75>
<tr>
<td align=center valign=bottom>
pera</td>
</tr>
</table>
</body> Vežba19.htm
Ekonomsko-trgovinska škola „Dositej Obradovid“ Alibunar
TABLE tag
Slike se takođe mogu koristiti unutar tabela.
<TD> <IMG SRC=“ “WIDTH=.. HEIGHT=.. > </TD>
<body>
<table border=1
width=100 height=75>
<tr>
<td align=left valign=middle>
<img src=“pera.gif“
width=32 height=32>
</td>
</tr>
</table>
</body>
Vežba20.htm
Ekonomsko-trgovinska škola „Dositej Obradovid“ Alibunar
TABLE tag
A sada više ćelija u jednom redu
<BODY>
<TABLE BORDER=3 WIDTH=300
HEIGHT=75>
<TR>
<TD WIDTH=60%>Pera</TD>
<TD WIDTH=20%>Laza</TD>
<TD WIDTH=20%>Mika</TD>
</TR>
</TABLE>
</BODY> Vežba21.htm
Ekonomsko-trgovinska škola „Dositej Obradovid“ Alibunar
Tri ortaka od preko puta ulice vide šta se dešava, pa i oni žele da
uskoče u tabelu. Daćemo im čitav red.
TABLE tag
<TABLE BORDER=3 WIDTH=300
HEIGHT=75>
<TR>
<TD WIDTH=60%>Pera</TD>
<TD WIDTH=20%>Laza</TD>
<TD WIDTH=20%>Mika</TD>
</TR>
<TR>
<TD>Gaga</TD>
<TD>Sima</TD>
<TD>Đole</TD>
</TR>
</TABLE>
Vežba22.htm
Kao što ste možda i sami zaključili, atribut WIDTH iz prvog reda važi
i u drugom redu.
Ekonomsko-trgovinska škola „Dositej Obradovid“ Alibunar
TABLE tag
Korisna funkcija je zadavanje boja pozadine za pojedinačne ćelije,
redove, ili čitave tabele.
Za to se koristi atribut BGCOLOR
<TABLE BORDER=3 BGCOLOR=blue> <TR> <TD>Pera</TD> <TD>Laza</TD> <TD>Mika</TD> </TR> <TR> <TD>Gaga</TD> <TD>Sima</TD> <TD>Đole</TD> </TR> </TABLE> Vežba23.htm
Za celu tabelu
Ekonomsko-trgovinska škola „Dositej Obradovid“ Alibunar
TABLE tag
<TABLE BORDER=3> <TR BGCOLOR=yelow> <TD>Pera</TD> <TD>Laza</TD> <TD>Mika</TD> </TR> <TR BGCOLOR=red> <TD>Gaga</TD> <TD>Sima</TD> <TD>Đole</TD> </TR> </TABLE>
Bojenje pojedinačnih redova
Vežba24.htm
Ekonomsko-trgovinska škola „Dositej Obradovid“ Alibunar
TABLE tag
Bojenje pojedinačnih ćelija
<TABLE BORDER=3> <TR BGCOLOR=yellow> <TD>Pera</TD> <TD>Laza</TD> <TD>Mika</TD> </TR> <TR> <TD BGCOLOR=red>Gaga</TD> <TD BGCOLOR=blue>Sima</TD> <TD> Đole </TD> </TR> </TABLE>
Vežba25.htm
Ekonomsko-trgovinska škola „Dositej Obradovid“ Alibunar
TABLE tag
Atribut za boju u <TD> tagu jači je od onog u <TR> tagu, a ovaj od
onog u <TABLE> tagu
<TABLE BORDER=3 BGCOLOR=green> <TR BGCOLOR=yellow> <TD BGCOLOR=red>Pera</TD> <TD>Laza</TD> <TD>Mika</TD> </TR> <TR> <TD>Gaga</TD> <TD>Sima</TD> <TD>Đole</TD> </TR> </TABLE>
Vežba26.htm
Najjači tag Najslabiji tag
Ekonomsko-trgovinska škola „Dositej Obradovid“ Alibunar
TABLE tag
Za spajanje kolona koristi se atribut COLSPAN
<TABLE BORDER=3>
<TR>
<TD COLSPAN=2>Pera</TD>
<TD>Mika</TD>
</TR>
<TR>
<TD>Gaga</TD>
<TD>Sima</TD>
<TD>Đole</TD>
</TR>
</TABLE>
Prvo spajamo dve ćelije
Vežba27.htm
Ekonomsko-trgovinska škola „Dositej Obradovid“ Alibunar
TABLE tag
Sada spajamo sve tri kolone
<TABLE BORDER=3>
<TR>
<TD COLSPAN=3 ALIGN=CENTER>Pera
</TD>
</TR>
<TR>
<TD>Gaga</TD>
<TD>Sima</TD>
<TD>Đole</TD>
</TR>
</TABLE> Vežba28.htm
Ekonomsko-trgovinska škola „Dositej Obradovid“ Alibunar
TABLE tag
Uzgred, sva ostala HTML formatiranja mogu se primeniti unutar ćelije.
Neka nas podebljani Pera odvede facebook
<TABLE BORDER=3>
<TR>
<TD COLSPAN=3 ALIGN=CENTER>
<A HREF="http://facebook.com">
<B> Pera </B> </A>
</TD>
</TR>
<TR>
<TD>Gaga</TD>
<TD>Sima</TD>
<TD>Đole</TD>
</TR>
</TABLE>
Vežba29.htm
Ekonomsko-trgovinska škola „Dositej Obradovid“ Alibunar
TABLE tag
Za spajanje redova koristi se atribut ROWSPAN
Prvo spajamo dve ćelije
<TABLE BORDER=3>
<TR>
<TD ROWSPAN=2>Pera</TD>
<TD>Laza</TD>
<TD>Mika</TD>
</TR>
<TR>
<TD>Sima</TD>
<TD>Đole</TD>
</TR>
</TABLE>
Vežba30.htm