Net Beans

Uvod u HTML
Hyper Text Markup Language
HTML jezik
HTML: je jezik za opis web strana nije programski jezik, ve jezik za obeleavanje markup language kod se prenosi http (Hyper Text Transfer Protocol) protokolom koristi markup tag-ove za opis web strana kod se kombinuje sa obinim tekstom kod se nalazi na web strani *.htm(l) kod interpretira web browser
Html tags (tag-ovi)

Html tagovi su specijalne rei izmeu zagrada <i> Html tagovi se koriste u parovima kao <b> i </b> Prvi tag u paru je poetni tag, a tag sa kosom crtom - / zavrni tag Iako se negde zavrni tag moe izostaviti, trebalo bi da se uvek koriste u paru Html element se sastoji od para tagova, poetnog i zavrnog
Html tagovi
Prazni html elementi su elementi bez sadraja, primer je <br/> Ovakvi elementi nemaju zavrni tag poto su prazni, pa je ispravan nain pisanja sa kosom crtom na kraju kao <br/> Iako bi element <br> bio ispravno protumaen od svih brouzera ne savetuje se zbog buduih verzija browser-a koje e moda striktnije potovati 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 korienje malih slova u verziji html 4 a obavezno je korienje 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 okruenje free proverava sintaksu - intellisens
Notepad ++
Notepad2
wordpad
NetBeans IDE razvojno okruenje podrava 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 oznaavaju poetak 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 izmeu 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

Izmeu <head></head> tagova se mogu nalaziti sledei meta tagovi: <title>Naslov web strane</title> <base> definie podrazumevanu adresu <link> definie resurse koje koristi web strana <meta> informacije za web browser-e i maine za pretraivanje i indeksiranje.
description opis sadraja web site-a keywords kljune rei 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 izmeu tagova <body> i </body> Tagovi <h1> i </h1> oznaavaju najvea slova za naslov najvieg nivoa Shodno tome, postoje h1(najvei) h6 (najmanji) Tagovi <p> i </p> oznaavaju 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
 Sve to se nalazi izmeu oznaka  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 laku 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/> oznaava novi red u okviru istog paragrafa Razlika u odnosu na paragraf je da se ne kreira prazan red izmeu. Tag <br/> je jednostavan - prazan tag koji nema zavrni tag, dakle nema, ne postoji </br> Moe da se koristi i samo tag <br>, ali se ne preporuuje, tj. preporuuje se </br> za budunost, da ih budui itai 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> izmeu bold i regular <big> </big> uveana slova <em> </em> emphasized - naglaena slova <i> </i> italics kurziv kao pisana i zakoena slova <small> </small> umanjena slova <sub> </sub> subscript subskript, indeks <sup> </sup> superscript superskript, izloilac <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 skraenica <acronym> </acronym> - skraenica od poetnih slova <address> </address> - adresa <bdo dir="rtl ili ltr> </bdo> BiDirectional Output smer ispisa atribut bdo tag-a dir definie smer sa vrednostima rtl / ltr <blockquote> </blockquote> - dugaak 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 sadre dodatne informacije o elementu Atributi se uvek navode u poetnom tag-u Atributi se navode u sintaksnoj formi naziv atributa / vrednost atributa Vrednosti atributa treba da uvek budu u navodnicima. Najee 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> definie tabelu Atribut border odreuje vidljivost linija tabele <table border="1"> znai da e linije tabele biti vidljive, dok odsustvo atributa border ili border=0 znai da se nee prikazati linije tabele, ve samo sadraj 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 reeno, elemenat <body> definie body tj. vidljivi deo HTML documenta. Atribut bgcolor definie 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 preporuuje upotreba stilova
Html styles - stilovi

Atribut style koji se moe koristiti sa raznim html elementima odreuje stil izgled raznih html elemenata Korienje stilova je preporueni nain formatiranja html elemenata sada i u budunosti 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 preporuuje deprecated - obsolete

Elementi
<center> odreuje centrirani sadraj <font> i <basefont> definie html fontove <s> i <strikeout> definie precrtavanje <u> definie podvueni underline tekst
Atributi
align definie poloaj elementa iji je to atribut bgcolor definie boju pozadine color definie boju teksta
Stilovi koje treba koristiti umesto prethodno navedenih elemenata

Podeavanje boje pozadine <body style="background-color:yellow"> Podeavanje Font Family, Color and Size <p style="font-family:courier new; color:red; font-size:20px"> Podeavanje 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 moe 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 nain podeavanja boje pozadine
Html links - veze

Link hyperlink je veza, referenca koja sadri adresu ka nekom drugom resursu na web-u. To moe biti druga web strana, deo tekue strane, ili bilo koji drugi file, na pr sa slikom, multimedijom ili slino. Anchor sidro je pojam koji se koristi za definisanje destinacije hyperlink-a koja se nalazi unutar tekueg dokumneta. Html elemenat <a> (anchor) se koristi za definisanje i hiperlinka i sidra kao odredita u tekuem dokumentu
URL / URI
URL Uniform Resource Locator URI Uniform Resource Identifier , URI http://tools.ietf.org/html/rfc1630 URL . http://name:password@webaddr:port/
Html link
<a href="url">Link text</a> Atribut href u poetnom tagu definie adresu resursa koji se povezuje Vrednost atributa href oznaena kao url sadri adresu resursa na web-u Link text predstavlja sadraj elementa <a> koji se na web strani pojavljuje kao dodatno oznaen, 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 vrednou elementa "_blank target="_blank" <a href="http://www.w3schools.com/" target="_blank">Visit W3Schools!</a> Pomou atributa name se navodi sidro koje predstavlja lokaciju u tekuem dokumentu na mestu gde se nalazi element <a> sa atributom name.
Primer sa sidrom tekui dokument

Mesto u html dokumentu se oznaava sa: <a name=oznaka">Tekst sa sidrom</a> Na ovako oznaen deo teksta Tekst sa sidrom se pravi hyper link sa: <a href="#oznaka">Hiperlink na sidro</a> Znak # hash oznaava da se vrednost atributa href odnosi na sidro sa atributom name koji ima vrednost oznaka u tekuem dokumentu.
Primer sa sidrom drugi dokument

Ako se eli da hyperlink pokazuje na tano odreeni 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.h tm#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 moe da pokazuje i na neke druge dokumente file-ove koji nisu tipa html. Ako browser ne ume da otvori takav dokument, ponudie mogunost download-a takvog dokumenta ili izbor aplikacije koja eventualno moe da otvori takav dokument pdf dokument ili mp3, avi itd. Takoe, moe 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:someone@microsoft.com?subject=Hello%2 0again"> 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 praynim elementom <img> (image slika) Atribut src odreuje adresu resursa slike Slika se pojavljuje na onom mestu u dokumentu na kome se nalazi <img> element. <img src="url"> Atribut alt se koristi za prikaz teksta ako slika iz nekog razloga ne moe da se prikae, to je dobra praksa. <img src="boat.gif" alt="Big Boat">
Slika kao pozadina web strane
Slika kao link
Tabele
Tabela se definie sa elementom <table>. Tabela se sastoji od vrsta i kolona. Vrste se definiu elementom <tr> - Table Row Vrste se definiu elementom <td> - Table Data Ovi elementi se redom umeu unutar elementa <table> za svaku vrstu i svaku eliju Definicija tabele unutar html srane predstavlja niz ugnedenih 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
Veliina elije
Razmaci izmeu 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 ureene liste
Razne ureene liste 2
Razne neureene liste
Ugnedene neureene liste 2 nivoa
Ugnedene neureene liste - 3 nivoa
Definicione liste
Razne html liste
Html forme
Forme u html-u slue za interakciju sa korisnicima Korisnici pomou elemenata na formi mogu da unesu podatke koji se prosleuju serveru i mogu da slue za automatsko generisanje web strane koja se dobija kao odgovor od servera Postoji slinost html forme i forme desk top programa Razlika je u tome to se program koji prima i obrauje podatke sa html forme nalazi na drugom raunaru 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 padajua 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 slue za prikaz dve ili vie razliitih html strana koje predstavljaju sadrinu okvira - frame Okviri mogu biti kombinovani na razliite naine horizontalni, vertikalni, kombinacija horizontalnih i vertikalnih Atributi cols i rows mogu biti zadati u % i pixels Okviri mogu da slue za navigaciju linkovi u jednom okviru, a file na koji link pokazuje u drugom
Vertikalni okviri
Horizontalni okviri
Kombinovani okviri
Okvir za navigaciju
Sadrina 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>
Inlline okvir okvir unutar html strane
Okvir sa adresiranjem dela dokumenta
Poetak adresiranog dokumenta
Navigacija sa okvirom na deo dokumenta
Sadraj 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 uopte koristi ???)
Fiksna veliina okvira
Specijalni znaci u html-u

Znaci sa specijalnim znaenjem u html-u se piu na specijalan nain Znak < se pie kao &gt (Greater Than) ili &#60 gt je entity name a 60 je entity number Entity name je case sensitive! Bolja je podrka browser-a za entity number nego name, ali se name lake pamti Viestruki razmak se pie kao &nbsp Viestruki obini 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 ISO8859-1, to se navodi u tagu <meta> Nita 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 ogranieni na 256 Unicode oznaavanje omoguava korienje bilo kog znaka iz svetskih jezika i njihovo istovremeno korienje - kombinovanje na istoj web strani Unicose se implementira preko razliitih skupova znakova UTF (Unicode Transformation Format) definie veze preslikavanja izmeu vrednosti kodova i znakova koje predstavljaju
Najee korieni unicode skupovi znakova
Znaci koji se koriste za URL

URL (Uniform Resource Locator) defnie 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 moe da sadri razmak, zbog ega se zamenjuje sa %20 (20hex = 32 dec)

Net Beans

Uploaded by

Document Information

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

Net Beans

Uploaded by

Copyright:

Available Formats

Uvod u HTML

Hyper Text Markup Language

Html tags (tag-ovi)

Mala / velika slova u html-u

Html - jednostavan primer

Izgled prethodne web strane primer.html u web browser-u

Koji alat se koristi za razvoj / editovanje html koda

SeaMonkey all in one

Osnovni html tagovi

head html tagovi

Vidljivi deo web strane

Tagovi h1 h6 web strana

Novi red tag <br/>

Tag <hr/> horizontalna linija

Prikaz <hr/> u browser-u

Formatiranje teksta u html-u

Html formati u browser-u

Computer formati u browser-u

Computer format tagovi

Ostali computer formati

Ostali formati u browser-u

Ostali computer format tagovi

Atributi html elemenata

Primeri atributa html elemenata

Primeri atributa html elemenata 2

Html styles - stilovi

Elementi i atributi ija se upotreba ne preporuuje deprecated - obsolete

Stilovi koje treba koristiti umesto prethodno navedenih elemenata

Primer sa stilom background

Stari nain podeavanja boje pozadine

Html links - veze

Atributi html elementa

Primer sa sidrom tekui dokument

Primer sa sidrom drugi dokument

Link na druge vrste dokumenata

Link za slanje email-a

Slika kao pozadina web strane

Slika kao link

Tabela bez okvira

Tabela sa praznom elijom

elija u dve kolone

elija u dve vrste

Pozadina tabele sa bojom i slikom

Pozadina i slike u elijama tabele

Tabela bez okvira

Tag-ovi unutar elija tabele

Razmaci izmeu elija

Okviri i granice tabela

for <table> tag

for <tr> tag

for <td> tag

<td> tag abbr attribue

Html lists (bullets unordered list)

Html lists (ordered numbered)

Razne ureene liste

Razne ureene liste 2

Razne neureene liste

Ugnedene neureene liste 2 nivoa

Ugnedene neureene liste - 3 nivoa

Razne html liste

Elementi na html formi

Radio button option button

Check box elementi forme

method=get argumenti u komandnoj liniji