Hyper Text Markup Language

Hyper Text Markup Language
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
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
<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ženje podrž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 
Sve što se nalazi između 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 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
<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
<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
<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 ispisa atribut 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=" 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
<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

URL / URI URL – Uniform Resource Locator
URI – Uniform Resource Identifier То су практично синоними, URI је званично новији термин – акроним Општи облик за URL је на пр.

Html link <a href="url">Link text</a>
Atribut href u početnom tagu definiše adresu resursa koji se povezuje Vrednost atributa href označena kao url 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=" 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=" 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=" Jump to the Useful Tips Section</a> pri čemu u drugom dokumentu html_tutorial.htm na site-u 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 -a na neku adresu

Link za slanje email-a <html> <body>
<p> This is a mail link: <a 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. </body> </html>

Html images Slike se postavljaju na html stranu sa praynim 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="url"> 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> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </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>

Inlline 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 &gt (Greater Than) ili &#60 “gt” je entity name a “60” 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 &nbsp 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 Prvih 128 znakova se poklapa sa ASCII Ako web – html strana treba da koristi neki drugi skup znakova koji se razlikuje od ISO , to se navodi u tagu <meta> Ništa ne smeta ni da se navede i podrazumevani ISO 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 Unicose 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

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 skupu znakova Na pr. URL ne može da sadrži razmak, zbog čega se zamenjuje sa %20 (20hex = 32 dec)

Hyper Text Markup Language

Similar presentations

Presentation on theme: "Hyper Text Markup Language"— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

Hyper Text Markup Language

Similar presentations

Presentation on theme: "Hyper Text Markup Language"— Presentation transcript:

Similar presentations

About project

Feedback