HTML 1. deo

HTML1. deo

dr Suzana Marković, dipl.ing. [email protected]

W3C

World Wide Web Consortium (poznatija kao W3C) je organizacija koja se bavi standardizacijom tehnologija koje se koriste na vebu.

Osnovana je 1994. godine u saradnji između Massachusetts Institute of Technology (MIT) i Evropske organizacije za nuklearna istraživanja (CERN).

Inicijator osnivanja je autor veba Tim Berners-Lee koji je u to vreme radio na CERN-u.

W3C

Članovi W3C su:Google, Huawe, Oracle corporation,

Samsung Electronics Co, Ltd., IBM corporation i Mozilla Foundation, Intel Corporation, LGElectronics, PayPal, Microsoft, Macromedia, Apple, Adobe, Volkswagen AG, Yahoo!, Inc...

ovaj konzorcijum definiše pravila vezana za: HTML, CSS i XML i njihovu primenu, kao i pravila za WAP forum (Wireless Application

Protocols), Internet Engineering Task Force i Unicode konzorcijum.

http://www.w3schools.com

Šta je HTML?

Hypertext Markup Language (HTML) je serija standardnih kodova i konvencijadizajniranih za kreiranje stranica koje će biti prikazane u programima kakav je veb pretraživač.

Veb stranica uključuje formatirani tekst i komande što uslovljava da veb pretraživačučitava i prikazuje slike i druge multimedijalne elemente (film, zvuk, animacije) na istoj.

Komande govore kako će se tekst ili slika prikazati na stranici

HTML stranice imaju ekstenziju .html ili .htm

Šta je danas HTML?

U ranijim verzijama standarda (pre pojave XHTML-a) HTML je služio za formatiranje dokumenta.

Danas su oznake HTML-a “semantičke“ -definišu smisao (sadržaj) dokumenta.

Opšta ideja je da se odvoji suština odizgleda.

HTML definiše strukturu strane, a izgledse definiše preko CSS-a.

HTMLHTML je struktuirani opisni jezik koji se

koristi za izradu veb strana.HTML dokument je plain-text (ASCII) file

koji se kreira pomoću bilo kog tekst editora (npr. Notepad, Notepad++).

WYSIWYG HTML editori (Dreamweaver, Home Page, Front Page).

GML SGML HTML XML

Hipertekst

... je, tekst koji sadrži veze ili linkove ka drugim dokumentima ili na samog sebe.

Skup stranica (u obliku datoteka)međusobno povezanih linkovima koje su umetnute u stranice.

Za razliku od običnog teksta, koji se čita linearno (sleva na desno, odozgo naniže), hipertekst se čita prateći hiper-veze u tekstu, dakle, ne nužno na linearan način.

HTML

HTML nije programski jezik!Napravljen je u cilju kodovanja i prikazivanja veb dokumenata HTML dokument sadrži tagove koji određuju

format, podlogu i strukturu veb dokumenata Poseduje tagove kojima se kreiraju odnosi

između tekstulanih elemenata unutar jednog ili više dokumenata

Tekstualni elementi koji su povezani međusobno nazivaju se hipertekstulani elementi.

HTML i alati Za generisanje HTML stranice potrebno je imati:

tekst editor, npr. Notepad, Notepad++, ... HTML editor, koji može biti:

“source code” editor iWYSIWYG editor - (“What You See Is What You

Get”) editovanje veb stranice kao što će izgledati u veb pretraživaču, npr. Dreamviewer.

Stranica se može videti u okviru veb pretraživač-a:Google Chrome, Mozilla Firefox, Internet

Explorer, Opera,…

HTML i alati

Grafički editor – Adobe Photoshop, Macromedia Fireworks, Corel Photo-paint. Svrha:Kreiranje slikaPromena veličina slikaPromena broja boja slikaSnimanje slika u JPEG, GIF ili PNG formatu.Rad sa specifičnim karakteristikama različitih

grafičkih formata, kao što su transparentni GIF i progresivni JPEG.

HTML i alati

Alatke za animaciju – jedan od načina animacija slika na vebu je kreiranjeanimiranih GIF specifikacija, Flash animacije.

Multimedijalne alatke:Npr. Windows Live Movie Maker, besplatan

program za kreiranje video klipova i slide-show video animacija od fotografija i video snimaka.

Ili za kreiranje zvuka: npr. http://sr.downloadastro.com/windows-audio_i_muzika-snimanje_zvuka/

HTML i alati

Alati za kreiranje skripti:Aplikacije koje pomažu korisnicima u

korišćenju JavaScripta u “cut-and-paste”varijanti

JavaScript Tools (http://developer.telerik.com/featured/what-to-expect-from-javascript-in-2016-frameworks).

WHATWG

Web Hypertext Application Technology Working GroupRazličite grupe veb proizvođača razvijaju HTML5

nezavisno od W3CKljučni motiv grupa je kreiranje platforme za

dinamičke veb aplikacije.

Verzije HTML-a

Verzija Godina nastanka

HTML 1991

HTML 2.0 1995

HTML 3.2 1997

HTML 4.01 1999

XHTML 2000

HTML5 2014

XHTML

HTML razvoj fokusira se na kreiranje HTMLelemenata kompatibilnih sa XML (eXtensible Markup Language) - standard dizajniran da bude osnova za mnoge markup jezike.

XML - koristi se za kreiranje i definisanje markup jezika za specifične aplikacije, u industriji, itd.

Zbog važnosti XML-a, cilj W3C konzorcijuma je: prepisati HTML u XML tako da standardi budu kompatibilni.

Rezultat prerade HTML u XML – XHTMLXHTML je HTML napisan kao XML.

Zašto novi standard?

Mnogi veb pretraživači podržavaju XML,tako da je XHTML samo jedan modul odmnogo različitih XML-zasnovanih jezika koji je razumljiv pretraživačima i drugim aplikacijama.

Mogućnost kreiranja matematičkih specifikacija

Različiti tipovi uređaja (mobilni telefoni, računari) i aplikacija za pristup vebu

HTML ELEMENTI

Opisni jezici poput HTML sastoje se od kodova, koji se nazivaju elementi (tagovi) i koji se koriste za opisivanje strukture i izgleda dokumenta.

Čitač veba interpretira HTML elemente i na osnovu njih prikazuje dokument na ekranu.

HTML tagovi služe za označavanje različitih elemenata u HTML dokumentu.

HTML tag se označava sa znakom “manje od” (<), imena taga, i znakom “veće od” (>).

Tagovi su obično upareni <tag> … </tag>

Tagovi Tag <html> se nalazi na početku svakog

HTML dokumenta koji govori browseru da je fajl koji je upravo počeo da učitava HTML dokument i da kao takvog treba i da ga prikaže.

Na kraj HTML dokumenta se stavlja završni HTML tag:</html> koji govori browseru da je to kraj HTML dokumenta.

Završni tag se dobija dodavanjem znaka "/„ i označava mesto na kom prestaje dejstvo početnog taga.

Vrste tagova

Grupa

Prosti tagovi

Oznaka Objašnjenje

Koriste se za opisivanje jednostavnih elemenata logičke strukture.

Opisuju izgled dela teksta Y.Složeni tagovi

Tagovi sa atributima

<X>

<X> Y </X>

<X A1=„a“ A2 = „b“ …> Y </X>

Opisuju atribute koji pružaju dodatne informacije o delu teksta Y.

Osnovna struktura htmldokumenta

<html><head>

<title>Naslov stranice </title></head><body>

Neki sadržaj</body>

</html>

HEAD deo

Svaki HTML dokument se sastoji od dvadela: zaglavlja (engl. head) i tela (engl. body).Zaglavlje se odvaja tagovima <head> i

</head> a telo dokumenta tagovima: <body> i </body>.

Sve ono što se napiše u zaglavlju dokumenta neće se prikazati u prozoru browser-a već obično služi samo da pruži neke informacije o stranici.

BODY deo

Sve ono što je napisano između tagova <body> i </body>

predstavlja telo dokumentapojaviće se kao sadržaj prezentacije u

prozoru browser-a.

Osnovni HTML tagovi<html> element je koreni element HTML

stranice<head> element sadrži meta informacije o

dokumentu<title> element specificira naslov veb

dokumenta<body> element sadrži vidljivi sadržaj

stranice.

Pravila jezika HTML

HTML dokumenti su struktuirani Jezik HTML ne pravi razliku između malih i velikih

slova HTML prepoznaje samo jedan razmak HTML elementi treba da su zatvoreni, osim ako su

prazni Elemente jezika HTML treba ugnježdavati Atribute jezika HTML treba smeštati u znakove

navoda Čitači ignorišu nepoznate atribute i elemente jezika

HTML

XHTML

XHTML skr. za EXtensible HyperText Markup Language

XHTML skoro je identičan HTML-uXHTML striktniji je od HTML-aXHTML je HTML definisan kao XML

aplikacijaXHTML ima podršku u svim značajnijim

pretraživačima.

XHTML nasuprot HTML-u

XHTML DOCTYPE je obavezan*The xmlns** atribut u tagu <html> je

obavezanTagovi <html>, <head>, <title>, <body>

su obavezniXHTML elementi moraju biti pravilno

ugnježdeniXHTML elementi moraju biti zatvoreni, čak i

kada su prazni (hr, br, img…)

XHTML nasuprot HTML

XHTML elementi pišu se malim slovimaXHTML elementi moraju imati jedan root

elementAtributi jezika XHTML pišu se malim slovima

i treba ih smeštati u znakove navodaNije dozvoljena minimizacija atributa (svaki

atribut je oblika svojstvo=„vrednost svojstva“ i tako se moraju i pisati).

XHTML dokument sa minimumom zahtevanih tagova

<!DOCTYPE html PUBLIC "‐//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1‐transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head><title>Naslov strane</title>

</head>

<body>Neki sadržaj

</body>

</html>

HTML5 dokument sa minimumom zahtevanih tagova

<!DOCTYPE html>

<html><head><title>Naslov strane</title></head>

<body>Neki sadržaj

</body>

</html>

Osnovne HTML komande<!DOCTYPE html> - deklaracija definiše da

je dokument pisan u html5<!DOCTYPE> deklaracija označava tip

dokumenta i pomaže browser-ima da prikažu veb stranicu korektno.

Da bi se dokument korektno prikazao, browser mora znati tip dokumenta i verziju jezika za opis dokumenta.

Mora da se pojavi jednom na vrhu stranice (pre bilo kog HTML taga).

<!DOCTYPE> deklaracija nije „case sensitive“.

HTML

HTML nije WYSIWYG (What You See Is What You Get – ono što vidiš to ćeš i dobiti)

HTML2. deo

dr Suzana Marković, dipl.ing. [email protected]

Primer 1.

Pokrenite program za obradu teksta Notepad i unesite sledeći kod:

<!DOCTYPE html><html><head><title>Primer 1</title></head><body>Ovo je tekst na stranici.

</body></html>

2

Tagovi

body

p wbr pre br h1-h6 span

Liste:ol, ul, li

Link:a

Slike:img

<b> - bold, <strong> - važan tekst<i> - italik, <em> - naglašen tekst<mark> - markiran, <small> - mali<del> - obrisan, <ins> - insertovan

<sub> - sabskript, <sup> - superskript

Kontrola teksta

Formatiranjeteksta

hr

HTML atributi

Atributi – jedan ili više njih – umeću se u oznaku da bi čitaču dali dodatne informacije o načinu na koji treba da izvrši naredbu oznake

4

HTML naredbe i atributi dati su unutar uglastih zagrada

Atribut

<body bgcolor = “red” text = “black” >

Atribut

HTML naredba

Ime atributa

Ime atributa

VrednostVrednost

Oznaka <body>

• Oznaka <body> specificira glavni sadržaj dokumenta

• Ima atribute koji omogućavaju da se specificiraju karakteristike dokumenta (boja pozadine ili slika, boja teksta, boja posećenih i neposećenih linkova, akcije koje se izvršavaju kada se dokument učita, ili ako se ne učita iz nekog razloga, itd.)

• Na primer<body bgcolor=“yellow" text="black" link="blue" vlink="green" alink="red">

...</body>

pozadinu boji u žuto, boja teksta je crna, posećeni linkovi su zelene boje, neposećeni plave, a aktivni crvene.

5

Kontrola toka teksta

Kada je tekst neformatiran – širina prozora čitača određuje broj reči koji će čitač u svakom redu na ekranu prikazati

Neformatiran tekst je običan tekst unesen u HTML dokument između početne i završne oznake tela koda (<body> </body>) kao u sledećem primeru:

<body>Kada unosite neformatirani tekst u HTML dokument, nije bitno kako taj tekst unutar dokumenta izgleda jer čitač ne prepoznaje znakove Ctrl ili Enter kao ispravne alatke formatiranja.

</body>

6

Kontrolisanje formata teksta

Oznake za početak i kraj pasusa <p> </p>• Oznaka </p> obeležava kraj jednog i

istovremeno početak sledećeg pasusa –govori čitaču da umetne prazan red, a zatim u redu ispod praznog počne naredni pasus

Oznaka za prelom reda <br>• Oznaka govori čitaču da pređe u sledeći red

pre nego što prikaže ono što se još nalazi na strani

7

Primer 2.

<html>

<head>

<title>Pasus</title>

</head>

<body>

<p> Tekst između dve oznake pasusa čini jedan pasus. Svaki pasus ima jednu ili više rečenica. </p>

<p> Sledeći pasus počinje ovde. Prazan red se umeće između dva pasusa. </p><p> Tekst je prikazan u prvom redu <br>Tekst je prikazan u drugom redu </p>

</body>

</html> 8

Nelomivi razmak

Čitač prelama tekst tako da odgovara širini prozora čitača čak i kad odredimo koja će reč biti poslednja u raširenom prozoru

Moguće je upisati znak za nelomivi razmak između reči koje želimo da čitač prikaže u istom redu:

<body> Ovde postoji više praznih mesta

</body>

9

Rezervisani znakovi u HTML-u: &oznaka;

Znak Oznaka Opis" " navodnik' ' apostrof& & ampersand< < manje> > veće

<p> Pasuse navodimo unutar oznake <p>... </p></p>

Tag wbr Novi tag u HTML verziji 5 i koristi se u slučaju dugačkih

spojenih reči (engl. Word break) <p>

Da bi naucili AJAX, morate se prethodno upoznati sa XML<wbr>Http</wbr>Request objektom.</p>

U primeru postoji izuzetno dugačka reč XMLHttpRequest.

Ukoliko ova reč bude poslednja u prikazu pretraživača, tj. ukoliko ne bude mogla da stane u prozor pretraživača, nad njom će biti izvršen prelom, tj. neće celokupno preći u novi, pa će na primer u jednom redu ostati XML, a u drugom preostali deo reči HttpRequest.

Wbr tag drži reč u celosti.

Tag pre

Ukoliko imate potrebu da tekst bude struktuiran sa puno praznina (primer stihova pesme) korišćenje <br> taga kao i znakova može biti zamorno ako ne i besmisleno.

Tada se koristi tag pre koji govori pretraživaču da sav sadržaj unutar njega prikaže obraćajući pažnju na to kako je unet u html dokumentu.

Primer 3.

Menjanje veličine teksta pomoću oznaka nivoa naslova

• Naslovi se mogu istaći korišćenjem elemenata h1, h2, h3, h4, h5 i h6

• Elemenat h1 daje najveću veličinu slova, a h6 najmanju

• Svaki od ovih elemenata počinje u novom redu, a browser-i dodaju još malo praznog mesta pre naslova

• U okviru naslova se može navesti atribut align*, koji određuje horizontalno poravnanje; vrednost ovog atributa može biti jedna od sledećih: left, center, right

14

Primer 4.<html>

<head>

<title>Pasusi</title>

</head>

<body>

<h1 align="center">Prvi naslov</h1>

<p>Ovo je prvi pasus.</p>

<p>Ovo je drugi pasus.</p>

<br>

<h3 align="left">Podnaslov</h3>

<p>Ovo je treći pasus ispred kog je bio jedan prazan red.</p>

<br>

<p align="right">Ovo je pasus koji je desno poravnat.</p>

<p align="center">Ovo je pasus koji je centriran.</p>

</body> 15

Tag span

Span tag namenjen je formatiranju teksta unutar paragrafa, najcešće u situacijama kada želimo da neku reč posebno formatiramo u odnosu na ostatak paragrafa, povećamo njen font, promenimo joj boju, podvučemo je, itd.

<p>Ovo je prva recenica paragrafa. Zatim sledi <span>druga<span>recenica paragrafa. Iza nje sledi treca recenica paragrafa a iza nje jos jedna. Sve ove recenice deo su jednog te istog paragrafa.</p>

Kontrolisanje formata teksta

• Najčešće oznake formata teksta su:• <b> </b> Tekst koji se nalazi između

oznaka Bold biće prikazanim podebljanimfontom

• <i> </i> Tekst koji se nalazi između oznaka Italic biće prikazanim kurzivom

• <u> </u> Tekst koji se nalazi između oznaka Underline biće podvučen

• Inline tagovi u dokumentu - mogu se slobodno koristiti unutar pasusa, naslova i sl. 17

Tagovi strong i em

B i i su stilovi, a strong i em tagovi dodeljuju neko značenje obeleženom tekstu

U većini pretraživača daju isti efekat kao <b> i <i> a razlika je u sledećem: Tekst unutar strong i em elemenata može biti dodatno

stilizovan: promenjena boja ili veličina teksta dok sa <b> i <i> to nije slučaj.

Na nekim uređajima (npr. mobilnom telefonu) sav tekst je već podebljan pa samim tim <b> ne znači ništa. Tada strong može da ga podvuče

Razlika dolazi do izražaja i u slučaju čitanja različitim „screen reader“ uređajima (za slepe osobe) kada <b> ne znači ništa dok <strong> može značiti pojačan ton pri izgovoru teksta koji se nalazi unutar njega.

Markiranje teksta

Oznaka mark bi trebala da služi za isticanjeteksta koji je u trenutnom kontekstu od posebnog značaja za čitaoca.Dobar primer bi bilo obeležavanje svihrezultata pretrage na stranici.

Da li je ovo <mark>značajna</mark> reč u tekstu?

Rad sa fontovima

• Ako drugačije nije naznačeno, posetioci veb lokacije vide tekst stranice u svom podrazumevanom fontu i stilu, podrazumevane boje i veličine.

• Upotrebom početne i završne oznake fonta (<font></font>) kontroliše se tekst na ekranu posetioca*

• Da bi tekst ponovo imao podrazumevane vrednosti čitača veba, stavlja se oznaka </font> na kraj teksta koji je menjan atributima oznake <font>

• Atributi color, size i face

Definisanje boje u HTML-u

• Boja se, kroz odgovarajući atribut, može se zadati brojem ili imenom.

• Imena boja zadaju se na engleskom: red, green, blue, …• https://www.w3schools.com/colors/colors_name

s.asp

• vrednosti boja mogu biti heksadecimalne vrednosti (npr. #FF0000, #008000, #FFFF00, #0000FF itd.) koje predstavljaju količine crvene, zelene i plave koje čitač treba da pomeša da bi dobio odgovarajuću boju.• https://www.w3schools.com/colors/colors_picker.asp

Menjanje veličine teksta

• Ukoliko se ne naznači veličina fonta, čitač veba će tekst prikazati u podrazumevanoj veličini

• Podrazumevane veličine znakova se razlikuju, ali su najčešće od 12 do 14 tačaka

• Za promenu veličine, pored atributa size mogu se koristiti oznake:– <basefont size= “”> <basefont > - mogućnost menjanja

veličine slova; atribut size daje veličinu,– <big> </big> - daje veći font za 1 od zadatog,– <small> </small> - daje manji font za 1 od zadatog,– <sub> </sub> - Oznake indeksa (prikazuju tekst malo niže od

okolnog teksta)– <sup> </sup> - Oznake eksponenta (prikazuju tekst malo

iznad okolnog teksta)

Definisanje stila pomoću style atributa

Style* atribut se koristi za specificiranje stila elementa kao što je boja, font, veličina itd.

Atributi slika: width, height, altAtribut linka: href

<p style="color:red">Ovo je crveni tekst</p>

<p>Boja jednog <span style="color:orange">dela teksta nije</span>plava.</p>

Atribut title Tooltip ili infotip ili hint je uobičajni

element Grafičkog korisničkog interfejsa. Kada korisnik kursorom pređe preko objekta, a da

ne klikne na objekat, tooltip se može pojaviti kao "mali pravougaonik" sa informacijama o stavci preko koje je prešao kursor.

Tooltip se obično ne pojavljuje na mobilnim operativnim sistemima, zbog toga što nemaju kursor.

<p title="Ovo je tooltip"> Predjite mišem preko paragrafa i videćete tooltip.</p>

Umetanje komentara

Komentar je specifična oznaka

Dakle, komentar počinje sekvencom znakova  (između ova dva znaka može doći i razmak)

Stavljanje HTML oznaka komentara oko iskaza koji se želi sakriti - čitač ignoriše te iskaze dok se ne uklone oznake komentara

Struktura html stranice –html5 tagovi

<section>Definiše odeljak u html dokumentu ili vebstrani; može grupisati sadržaj po temama; može imati svoje zaglavlje i podnožje;

<article> Definiše članak

<aside> Odeljak za bočni stubac<header> Definiše zaglavlje dokumenta ili odeljka<footer> Definiše podnožje dokumenta ili odeljka

<nav> Definiše navigacione linkove (hiperveza)

Primer<html><head><meta charset="utf-8"><title> O nama </title></head><body><header>Ovo je prostor hedera</header><nav> Link1 Link2 Link3</nav><aside style="width:30%;background:gray;margin-left:70%">Bocni stubac.</aside><section style="background:pink;">Ovo je 1. sekcija<article>1. članak u sekciji 1</article></section><section style="background:lightblue;">Ovo je 2. sekcija<article>1. članak u sekciji 2</article></section><footer>Ovo je futer</footer>

Documents

HTML 1. deo