HTML (Hyper Text Markup Language) - Економска …Hyper Text Markup Language)...

HTML

(Hyper Text Markup Language)

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


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



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


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




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



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



<html> <head> <title> Naslov </title> </head> <body> . . . </body> </html>



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.


Osnovni HTML tagovi

<html> <head> <title> Naslov </title> </head> <body> Ovo je neki tekst! </body> </html>

Vežba1.htm


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


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


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


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


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


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


color="black"> <I> Ovo je tekst u

kurzivu </I> </font><br>


color="black"> <U> Ovo je podvuceni

tekst <U> </font>

</BODY>

Vežba7.htm


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>






</body>

</html> Vežba8.htm


<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


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


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>


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



<A HREF="mailto:…"> Uz rezervisanu reč MAILTO dobijamo linkove ka mail adresama.

Osnovni HTML tagovi

<html>

<head>


</head>

<body>

<font size="+3">

<a href="mailto:ipetuhov@gmail.

com">

posaljite mi mail!</a><font>

</body>



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


<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


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.


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


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


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>


100

75


TABLE tag

Takođe moguće je kontrolisati gde će se nalaziti sadržaj ćelije

<body>

<table border=1


<tr>

<td align=center> pera</td>

</tr>

</table>

</body>

<TD ALIGN=LEFT, CENTER, RIGHT> ... </TD>

Vežba18.htm


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


<tr>

<td align=center valign=bottom>

pera</td>

</tr>

</table>



TABLE tag

Slike se takođe mogu koristiti unutar tabela.

<TD> <IMG SRC=“ “WIDTH=.. HEIGHT=.. > </TD>

<body>

<table border=1


<tr>

<td align=left valign=middle>

<img src=“pera.gif“

width=32 height=32>

</td>

</tr>

</table>

</body>

Vežba20.htm


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


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.


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


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


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


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


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


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


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


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


TABLE tag

Naravno, i ovi atributi (COLSPAN i ROWSPAN) se mogu koristiti

istovremeno.

<TABLE BORDER=3>

<TR>

<TD ROWSPAN=2>Pera</TD>

<TD COLSPAN=2>Laza</TD>

</TR>

<TR>

<TD>Sima</TD>

<TD>Đole</TD>

</TR>

</TABLE>

Vežba31.htm

HTML (Hyper Text Markup Language) - Економска …Hyper Text Markup Language)...

Documents

Transcript of HTML (Hyper Text Markup Language) - Економска …Hyper Text Markup Language)...