html 1. deo
TRANSCRIPT
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<!-- Ovo je komentar -->
Dakle, komentar počinje sekvencom znakova <!-- (između ovih znakova ne sme da postoji nijedan razmak), a završava se 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<!--header>Sekcija moze imati svoj heder</header --><article>1. članak u sekciji 1</article><!--footer>Sekcija moze imati svoj futer</footer --></section><section style="background:lightblue;">Ovo je 2. sekcija<article>1. članak u sekciji 2</article></section><footer>Ovo je futer</footer>