uvod u html
DESCRIPTION
programiranje internet aplikacija. Pocetno. Uvod u HTMLTRANSCRIPT
Uvod u HTML
Hyper Text Markup Language
HTML jezik
HTML:
• je jezik za opis web strana
• nije programski jezik, već jezik za obeležavanje – markup language
• kod se prenosi http (Hyper Text Transfer Protocol) protokolom
• koristi markup tag-ove za opis web strana
• kod se kombinuje sa običnim tekstom
• kod se nalazi na web strani *.htm(l)
• kod interpretira web browser
Html tags (tag-ovi)
• Html tagovi su specijalne reči između zagrada
< i >
• Html tagovi se koriste u parovima kao <b> i </b>
• Prvi tag u paru je početni tag, a tag sa kosom crtom - / završni tag
• Iako se negde završni tag može izostaviti, trebalo bi da se uvek koriste u paru
• Html element se sastoji od para tagova, početnog i završnog
Html tagovi• Prazni html elementi su elementi bez sadržaja,
primer je <br/>
• Ovakvi elementi nemaju završni tag – pošto su prazni, pa je ispravan način pisanja sa kosom crtom na kraju – kao <br/>
• Iako bi element <br> bio ispravno protumačen od svih brouzera ne savetuje se zbog budućih verzija browser-a koje će možda striktnije poštovati standarde
• Html elementi – tagovi nisu case sensitive, na pr. <P> je isto što i <p>
Mala / velika slova u html-u
• Iako se na mnogim site-ovima koriste velika slova, preporuka World Wide Web Consortium - a (W3C) je korišćenje malih slova u verziji html 4 a obavezno je korišćenje malih slova u novijim verzijama html-a kao i u xhtml-u
Html - jednostavan primer
<html>
<head>
<title>Naslov web strane</title>
</head>
<body>
<h1>Naslov prvog nivoa</h1>
<p>Tekst paragrafa</p>
</body
</html>
Izgled prethodne web
strane primer.html u
web browser-u
Koji alat se koristi za razvoj / editovanje html koda
• Bilo koji editor, na pr. notepad
• Ali bolje je koristiti neki drugi
• Wordpad – windows, ne boji sintaksu
• Notepad2 free – boji sintaksu
• Notepad++ free – boji sintaksu
• Neki drugi windows / unix / linux editor
• NetBeans razvojno okruženje – free – proverava sintaksu - intellisens
Notepad ++
Notepad2
wordpad
NetBeans IDE razvojno okruženjepodržava
Java, C++, php, html, JavaScript
SeaMonkey all in one
• Navigator - browser
• Mail and Newsgroups
• Composer
• Address book
• IRC ChatChat Zilla
Osnovni html tagovi
• <html> i </html> tagovi označavaju početak i kraj čitave web strane
• Na web strani postoje dva dela nevidljivi i vidljivi koji se prikazuje u prozoru browser-a
• Nevidljivi deo web strane se nalazi između tagova <head> i </head>
• U nevidljivom delu web strane se nalaze tzv. meta tag-ovi koji se ne prikazuju već opisuju šta se nalazi na web strani. Meta informacije su informacije o informacijama
head html tagovi
• Između <head></head> tagova se mogu nalaziti sledeći meta tagovi:
• <title>Naslov web strane</title>
• <base> definiše podrazumevanu adresu
• <link> definiše resurse koje koristi web strana
• <meta> informacije za web browser-e i mašine za pretraživanje i indeksiranje. – description – opis sadržaja web site-a– keywords – ključne reči na site-u
html mета тагови• <meta name="description" content="Articles,
pictures, and stories
about exotic pets">
• <meta name="keywords" content="exotic pets, reptiles, amphibians, frog, toad, salamander, newt, siren, lizard, iguana, gecko, monitor, chameleon, dragons, turtles, tortoises, leopard, butterfly, butterflies, moth, bees, flies, stick insects, beetles, wasps, hornet, roaches, ants, cricket, grasshopper, tarantula, scorpion, centipede, millipede">
Vidljivi deo web strane• Vidljivi deo web strane je između tagova
<body> i </body>
• Tagovi <h1> i </h1> označavaju najveća slova za naslov najvišeg nivoa
• Shodno tome, postoje h1(najveći) – h6 (najmanji)
• Tagovi <p> i </p> označavaju paragraf – deo teksta ispred i iza koga je po jedan prazan red
• Zadnji tag </p> nije neophodan (za sada) ali ga treba stavljati
Tagovi h1 – h6
• <h1>This is heading 1</h1><h2>This is heading 2</h2><h3>This is heading 3</h3><h4>This is heading 4</h4><h5>This is heading 5</h5><h6>This is heading 6</h6>
Tagovi h1 – h6
web strana
h1h6.htm
Komentari u html-u
• <!-- This is a comment -->
• Sve što se nalazi između oznaka <!-- i --> je komentar, i to se zanemaruje – kao da nije ni prisutno na web strani
• Smisao je potpuno isti kao i u drugim jezicima, komentari za lakšu analizu listinga, kao i deo listinga koji je potrebno trenutno skloniti (radi testiranja na pr.) ali se ne želi brisanje
Novi red tag <br/>• Tag <br/> označava novi red u okviru istog
paragrafa
• Razlika u odnosu na paragraf je da se ne kreira prazan red između.
• Tag <br/> je jednostavan - prazan tag koji nema završni tag, dakle nema, ne postoji </br>
• Može da se koristi i samo tag <br>, ali se ne preporučuje, tj. preporučuje se </br> za budućnost, da ih budući čitači mogu pravilno interpretirati
Tag <hr/> horizontalna linija
<p>This is a paragraph1<br/>New line1</p>
<hr /><p>This is a paragraph2
<br/>New line2</p>
<hr /><p>This is a paragraph3
<br/>New line3</p>
Prikaz <hr/> u browser-u
Formatiranje teksta u html-u<html>
<body> <p><b>This text is bold</b></p> <p><strong>This text is strong</strong></p> <p><big>This text is big</big></p> <p><em>This text is emphasized</em></p> <p><i>This text is italic</i></p> <p><small>This text is small</small></p> <p>This is<sub> subscript</sub> and <sup>superscript</sup></p> <p><del>This is deleted text</del></p><p><ins>This is inserted text</ins></p></body>
</html>
Html formati u browser-u
Tagovi za formatiranje• Tagovi:
– <b> </b> bold - masna slova– <strong> </strong> između bold i regular– <big> </big> uvećana slova– <em> </em> emphasized - naglašena slova– <i> </i> italics – kurziv kao pisana i zakošena slova– <small> </small> umanjena slova– <sub> </sub> subscript – subskript, indeks– <sup> </sup> superscript – superskript, izložilac– <del> </del> deleted – izbrisana, precrtana slova– <ins> </ins> inserted – umetnuta slova
Computer formati<html><body><p><code>This text is computer
output</code></p><p><kbd>This text is keyboard output</kbd></p><p><samp>This text is sample</sample></p><p><tt>This text is teletype output</tt></p><p><var>This text is variable name</vat></p><p><pre>This text is preformated</pre></p></body></html>
Computer formati u browser-u
Computer format tagovi
• Tagovi:
<code> </code> - listing programa
<kbd> </kbd> keyboard – slova sa tastature
<samp> </samp> - uzorak slova
<tt> </tt> teletype – teleprinter slova
<var> </var> variable – promenljiva ime
<pre> </pre> preformated – preformairana slova
Ostali computer formati• <html>• <body>• <p><abbr>This text is abbreviation</abbr></p>• <p><acronym>This text is acronym</acronym></p>• <p><address>This text is address</address></p>• <p><bdo dir="rtl">This text is bdo output</bdo></p>• <p><blockquote>This text is long
quotation</blockquote></p>• <p><q>This text is short quotation</q></p>• <p><cite>This text is citation</cite></p>• <p><dfn>This text is definition</dfn></p>• </body>• </html>
Ostali formati u browser-u
Ostali computer format tagovi
<abbr> </abbr> abbreviation – skraćenica<acronym> </acronym> - skraćenica od početnih slova<address> </address> - adresa<bdo dir="rtl“ ili “ltr”> </bdo> BiDirectional Output – smer
ispisaatribut bdo tag-a dir definiše smer sa vrednostima rtl / ltr<blockquote> </blockquote> - dugačak navod<q> </q> quotation – tekst u navodu <cite> </cite> itation - tekst citata<dfn> </dfn> definition – tekst definicije
Atributi html elemenata• Html elementi mogu da imaju atribute koji
sadrže dodatne informacije o elementu
• Atributi se uvek navode u početnom tag-u
• Atributi se navode u sintaksnoj formi naziv atributa / vrednost atributa
• Vrednosti atributa treba da uvek budu u navodnicima. Najčešće su to dvostruki navodnici “, ali mogu biti i jednostruki navodnici
• Ako treba koristiti navodnike kao deo atributa, onda treba kombinovati jednostruke i dvostruke atribute name='John "ShotGun" Nelson'
Primeri atributa html elemenata• Element <table> definiše tabelu
• Atribut border određuje vidljivost linija tabele
• <table border="1"> znači da će linije tabele biti vidljive, dok odsustvo atributa border ili border=“0“ znači da se neće prikazati linije tabele, već samo sadržaj tabele
• Elemenat <a> predstavlja sidro – anchor za vezu ka drugim html stranicama
• <a href="http://www.w3schools.com">
• Vrednost atributa href predstavlja adresu druge html stranice na koju se prelazi
Primeri atributa html elemenata 2• Kao što je rečeno, elemenat <body> definiše
body tj. – vidljivi deo HTML documenta.• Atribut bgcolor definiše boju čitave pozadine
html stranice, tj. svega što obuhvata element <body> </body>
• <body bgcolor="yellow">• Vrednost atributa bgcolor je naziv boje u
zagradi• bgcolor je jedan od atributa koji izlazi iz
upotrebe, tako da se umesto toga preporučuje upotreba stilova
Html styles - stilovi• Atribut style koji se može koristiti sa raznim
html elementima određuje stil – izgled raznih html elemenata
• Korišćenje stilova je preporučeni način formatiranja html elemenata sada i u budućnosti
• Neki primeri stilova: – style="background-color:yellow"– style="font-size:10px"– style="font-family:Times"– style="text-align:center"
Elementi i atributi čija se upotreba ne preporučuje – deprecated - obsolete
• Elementi– <center> određuje centrirani sadržaj– <font> i <basefont> definiše html fontove– <s> i <strikeout> definiše precrtavanje– <u> definiše podvučeni – underline tekst
• Atributi– align definiše položaj elementa čiji je to atribut– bgcolor definiše boju pozadine– color definiše boju teksta
Stilovi koje treba koristiti umesto prethodno navedenih elemenata
• Podešavanje boje pozadine
• <body style="background-color:yellow">
• Podešavanje Font Family, Color and Size
• <p style="font-family:courier new; color:red; font-size:20px">
• Podešavanje pozicije teksta
• <h1 style="text-align:center">
Primer sa stilom background
• Gornji primer je sa site-a w3schools
• Sa leve strane je html kod koji može da se edituje – da se menja
• Pritiskom na dugme “Edit and Click Me >>” sa desne strane se pojavljuje web strana koja odgovara html kodu sa leve strane
Stari način podešavanja boje pozadine
Html links - veze• Link – hyperlink je veza, referenca koja sadrži
adresu ka nekom drugom resursu na web-u. To može biti druga web strana, deo tekuće strane, ili bilo koji drugi file, na pr sa slikom, multimedijom ili slično.
• Anchor – sidro je pojam koji se koristi za definisanje destinacije hyperlink-a koja se nalazi unutar tekućeg dokumneta.
• Html elemenat <a> (anchor) se koristi za definisanje i hiperlinka i sidra kao odredišta u tekućem dokumentu
URI / URL / URN• URI – Uniform Resource Identifier
• URL – Uniform Resource Locator
• URN – Uniform Resource Name
• http://name:password@webaddr:port/
Html link• <a href="uri">Link text</a>
• Atribut href u početnom tagu definiše adresu resursa koji se povezuje
• Vrednost atributa href označena kao uri sadrži adresu resursa na web-u
• “Link text” predstavlja sadržaj elementa <a> koji se na web strani pojavljuje kao dodatno označen, tj. predstavlja hyperlink
• <a href="http://www.w3schools.com/">Visit W3Schools!
</a>
Atributi html elementa• Ako se želi da se povezana strana preko
hyperlink-a otvori u novom prozoru, koristi se atribut target sa vrednošću elementa "_blank“
• target="_blank"
• <a href="http://www.w3schools.com/" target="_blank">Visit W3Schools!</a>
• Pomoću atributa name se navodi “sidro” – koje predstavlja lokaciju u tekućem dokumentu na mestu gde se nalazi element <a> sa atributom name.
Primer sa sidrom – tekući dokument
• Mesto u html dokumentu se označava sa:
• <a name=“oznaka">Tekst sa sidrom</a>
• Na ovako označen deo teksta “Tekst sa sidrom” se pravi hyper link sa:
• <a href="#oznaka">Hiperlink na sidro</a>
• Znak “#” – hash označava da se vrednost atributa href odnosi na sidro sa atributom name koji ima vrednost “oznaka” u tekućem dokumentu.
Primer sa sidrom – drugi dokument
• Ako se želi da hyperlink pokazuje na tačno određeni deo nekog drugog dokumenta, onda se u tom drugom dokumentu postavi sidro kao i u prethodnom primeru, a hyperlink treba da bude:
• <a href="http://www.w3schools.com/html_tutorial.htm#tips"> Jump to the Useful Tips Section</a>
• pri čemu u drugom dokumentu html_tutorial.htm na site-u http://www.w3schools.com, sidro ima vrednost atributa name=“tips”
Link na druge vrste dokumenata• Osim na html strane, hyperlink može da
pokazuje i na neke druge dokumente – file-ove koji nisu tipa html.
• Ako browser ne ume da otvori takav dokument, ponudiće mogućnost download-a takvog dokumenta ili izbor aplikacije koja eventualno može da otvori takav dokument – pdf dokument ili mp3, avi itd.
• Takođe, može da se napravi link za slanje email-a na neku adresu
Link za slanje email-a<html>
<body> <p> This is a mail link:
<a href="mailto:[email protected]?subject=Hello%20again"> Send Mail</a>
</p> <p> <b>Note:</b> Spaces between words
should be replaced by %20 to <b>ensure</b> that the browser will display your text properly.
</p> </body>
</html>
Html images• Slike se postavljaju na html stranu sa praznim
elementom <img> (image – slika)
• Atribut src određuje adresu resursa – slike
• Slika se pojavljuje na onom mestu u dokumentu na kome se nalazi <img> element.
• <img src="uri">
• Atribut alt se koristi za prikaz teksta ako slika iz nekog razloga ne može da se prikaže, što je dobra praksa.
• <img src="boat.gif" alt="Big Boat">
Slika kao pozadina web strane
Slika kao link
Tabele
• Tabela se definiše sa elementom <table>. Tabela se sastoji od vrsta i kolona.
• Vrste se definišu elementom <tr> - Table Row
• Vrste se definišu elementom <td> - Table Data
• Ovi elementi se redom umeću unutar elementa <table> za svaku vrstu i svaku ćeliju
• Definicija tabele unutar html srane predstavlja niz ugneždenih elemenata <tr> unutar <table> i elemenata <td> unutar <tr>
Table primer<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
Zaglavlja u tabeli
Tabela bez okvira
Tabela sa praznom ćelijom
IE primer
Ćelija u dve kolone
Ćelija u dve vrste
Pozadina tabele sa bojom i slikom
Pozadina i slike u ćelijama tabele
Tabela bez okvira
Tabela sa naslovom
Tag-ovi unutar ćelija tabele
Veličina ćelije
Razmaci između ćelija
Poravnavanje u tabelama
Okviri tabela
Okviri tabela 2
Okviri tabela 3
Okviri tabela 4
Okviri i granice tabela
<col> tag
for <table> tag
for <tr> tag
for <td> tag
<td> tag abbr attribue
Html lists (bullets – unordered list)
Html lists (ordered – numbered)
Razne uređene liste
Razne uređene liste 2
Razne neuređene liste
Ugneždene neuređene liste 2 nivoa
Ugneždene neuređene liste - 3 nivoa
Definicione liste
Razne html liste
Html forme•Forme u html-u služe za interakciju sa korisnicima
•Korisnici pomoću elemenata na formi mogu da unesu podatke koji se prosleđuju serveru i mogu da služe za automatsko generisanje web strane koja se dobija kao odgovor od servera
•Postoji sličnost html forme i forme desk top programa
•Razlika je u tome što se program koji prima i obrađuje podatke sa html forme nalazi na drugom računaru – web serveru
Elementi na html formi• Text polje
• Password polje
• Hidden polje
• Radio – option button
• Check box
• Drop down list
• Send button
• Clear button
• General button
Tekst polje
Password field
Radio button – option button
Check box elementi forme
method=“get” argumenti u komandnoj liniji
Jedan selektovan checkbox
Dva selektovana checkbox-a
Tri selektovana checkbox-a
method=“post”
Sve selektovano sa “post”
Drop down list – padajuća lista
Drop down list pre selected value
Option group – grupisanje stavki
Text area polje sa tekstom
Button - dugme
Field set – oblast sa podacima
Slanje email-a sa web forme
Startovan default program za email
Html colors – 16777216 boja u html-u
Okviri - frames• Okviri na web stranama služe za prikaz dve ili
više različitih html strana koje predstavljaju sadržinu okvira - frame
• Okviri mogu biti kombinovani na različite načine – horizontalni, vertikalni, kombinacija horizontalnih i vertikalnih
• Atributi cols i rows mogu biti zadati u % i pixels
• Okviri mogu da služe za navigaciju – linkovi u jednom okviru, a file na koji link pokazuje u drugom
Vertikalni okviri
Horizontalni okviri
Kombinovani okviri
Okvir za navigaciju
Sadržina file-a tryhtml_contents.htm
<a href ="frame_a.htm" target ="showframe">Frame a</a><br><a href ="frame_b.htm" target ="showframe">Frame b</a><br><a href ="frame_c.htm" target ="showframe">Frame c</a>
Inline okvir – okvir unutar html strane
Okvir sa adresiranjem dela dokumenta
Početak adresiranog dokumenta
Navigacija sa okvirom na deo dokumenta
Sadržaj file-a content.htm:
<a href ="link.htm" target ="showframe">Link without Anchor</a>
<br>
<a href ="link.htm#C10" target ="showframe">Link with Anchor</a>.
No frames – za stare browser-e (ko ih uopšte koristi ???)
Fiksna veličina okvira
Specijalni znaci u html-u
Znaci sa specijalnim značenjem u html-u se pišu na specijalan način
Znak “>“ se piše kao > (Greater Than) ili >
“gt” je entity name a “62” je entity number
Entity name je case sensitive!
Bolja je podrška browser-a za entity number nego name, ali se name lakše pamti
Višestruki razmak se piše kao  
Višestruki obični razmaci “ “ se odbacuju
Skupovi znakova u html-u• ASCII
• ISO character sets (ISO skupovi znakova)
• Podrazumevani – default skup znakova za savremene browser-e je ISO-8859-1
• Prvih 128 znakova se poklapa sa ASCII
• Ako web – html strana treba da koristi neki drugi skup znakova koji se razlikuje od ISO-8859-1, to se navodi u tagu <meta>
• Ništa ne smeta ni da se navede i podrazumevani ISO-8859-1- dobra praksa
Skup znakova koje koristi web strana
Prethodna strana sa promenjenim skupom znakova
Unicode standard• ASCII i ISO-xxxx-xx skupovi znakova su
ograničeni na 256
• Unicode označavanje omogućava korišćenje bilo kog znaka iz svetskih jezika i njihovo istovremeno korišćenje - kombinovanje na istoj web strani
• Unicode se implementira preko različitih skupova znakova
• UTF (Unicode Transformation Format) definiše veze – preslikavanja između vrednosti – kodova i znakova koje predstavljaju
Najčešće korišćeni unicode skupovi znakova
UTF – 8 Ћирилица U+400
Znaci koji se koriste za URL
• URL (Uniform Resource Locator) defniše adresu nekog resursa koji se koristi na web strani
• Znaci koji se koriste za URL se mogu navesti kao %xx gde su xx dve heksadekadne cifre u ISO-8859-1 skupu znakova
• Na pr. URL ne može da sadrži razmak, zbog čega se zamenjuje sa %20 (20hex = 32 dec)
