Tutorial] Osnove HTML-A i Css-A

CENTAR ZA RAZVOJ I PRIMENU NAUKE, TEHNOLOGIJE I INFORMATIKE NOVI SAD

Osnove HTML-a i CSS-a Seminar za profesore informatike osnovne i srednjih škola Izrada prezentacija - Web prezentacije kao podrška nastavim i školskim aktivnostima. Predavač: Jovan Sandić

2008.

CNTI

Osnove HTML-a i CSS-a UVOD U HTML ................................................................... 2 HYPER JE SUPER! ............................................................ 2 ŠTA TO BEŠE HTML? ........................................................... 2 ELEMENTI HTML-A ............................................................ 3 STRUKTURA HTML DOKUMENTA ............................................ 3 ATRIBUTI ELEMENATA HTML-A.............................................. 4 VAŠA PRVA PRAVA INTERNET STRANICA .................................... 5 O ADRESAMA .................................................................... 6 ADRESE I ZAŠTO SU ONE BITNE... ............................................. 6 HYPERLINK (HIPER VEZA) ...................................................... 6 APSOLUTNI I RELATIVNI HIPRELINKOVI ...................................... 6 NASTAVAK SAGE O HTML-U............................................... 7 STRUKTURA HTML DOKUMENTA ............................................ 8 OBRADA TEKSTA ................................................................. 9 I DALJE TRAJE SAGA O HTML-U ........................................ 11 PRE NASTAVKA... .............................................................. 11 LISTE ............................................................................. 11 RAD SA SLIKAMA.... ........................................................... 12 LINKOVI .......................................................................... 13 DA, HTML SAGA NIJE GOTOVA......................................... 14 MAPIRANJE NA SLIKAMA... .................................................. 14 DODATNI ATRIBUTI BODY TAGA ............................................ 15

|2

SPECIJALNI KARAKTERI ........................................................ 16 META TAGOVI .................................................................. 16 TABELE ........................................................................... 17 UPLOAD FAJLOVA... ......................................................... 18 UPLOAD FAJLOVA NA SERVER (FTP) ....................................... 18 IZBOR FTP SOFTVERA ......................................................... 18 POTREBNI FTP PARAMETRI .................................................. 19 UPOZNAJMO I TESTIRAJMO JEDAN FTP PROGRAM ..................... 19 CSS – CASCADING STYLE SHEETS ...................................... 21 KASKADNI STILOVI ............................................................. 21 CSS SINTAKSA.................................................................. 22 CILJNI ELEMENTI ............................................................... 22 GDE MOŽE DA SE NALAZI CSS KOD ........................................ 23 REDOSLED SLAGANJA (PRIORITET) I INTERPRETACIJE STILOVA ........ 23 SVOJSTVA I VREDNOSTI ....................................................... 24 PONOVIMO NAUČENO I NAUČIMO NEŠTO NOVO O CSS-U ............ 25 PONOVIMO SINTAKSU ........................................................ 26 VREDNOSTI ATRIBUTA STILOVA ............................................. 28 ČESTE UPOTREBA STILOVA ................................................... 28 CSS BOX MODEL .............................................................. 29 CSS ZAKLJUČNO ............................................................... 32

Uvod u HTML HYPER JE SUPER! Da biste bili uspešan stvaralac Internet stranica morate dobro savladati Hyper Text Markup Language tj. HTML. HTML je jednostavan jezik za opis strukture i opis sadržaja Internet dokumenata koji se prikazuju u Internet čitačima (browser-ima). Postoje mnogi programi koji pojednostavljuju kreiranje HTML Internet strana (Macromedia Dreamweaver i Microsoft Front Page, recimo) ali potpuna kontrola nad izradom Internet dokumenta podrazumeva mnoge akcije i korekcije na najnižem nivou, odnosno intervencije u samom HTML kodu. Zato je neophodno da savladate osnove HTML-a, ako želite da se upustite u avanturu izrade Internet stranica. Znanje HTML-a nije prednost, već uslov da bi bili uspešan kreator Internet prezentacija. U ovoj lekciji pronaći ćete samo osnovne i uvodne informacije o HTML-u, a u sledećim lekcijama i mnogo više, o ovom jednostavnom a istovremeno moćnom alatu za izradu Internet stranica. Kad budemo familijarni sa HTML-om, upoznaćemo se i sa osnovama kaskadnih stilova, moćnom alatkom za opis izgleda sadržaja Internet dokumenata (Cascading Style Sheets) i sa gore pomenutim alatom Macromedia Dreamweaver-om.

Šta to beše HTML? Internet, kao svetsku mreža računara, možete koristiti na više načina. Jedan od najpopularnijih načina upotrebe je pregledanje Internet stranica, proces popularno nazvan surfovanje Internetom. Svaka Internet stranica je hipertekstualan (Hypertext) dokumenat. Hipertekst se sastoji od meĎusobno povezanih delova teksta (ili drugih objekata) tako da čitalac (korisnik) interaktivno odreĎuje redosled čitanja (pregledanja). To praktično znači da dokumente na Internetu ne morate da čitate sekvencijalno kao knjigu, već se možete šetati kroz dokumenat, ili dokumente po želji. Možda bi bila najbolja analogija sa knjigom koja sadrži puno fusnota, gde čitalac kad naiĎe na nepoznat termin označen fusnotom, on preĎe na proučavanje fusnote na dnu stranice ili u na kraju knjige (endnote, index pojmova), i po završetku se vraća na mesto čitanja gde se nalazi nepoznat termin, pa dalje nastavlja čitanje redom, tj. sekvencijalno. Kad su u pitanju Internet dokumenti, sekvencijalno čitanje uopšte nije neophodno. Korisnik se kreće kroz Internet dokumente koristeći veze (linkove), pomoću kojih skače na različite delove dokumenta ili

posebne dokumente, u skladu sa svojim interesovanjima i potrebama. Kretanje kroz takve dokumente | 3 naziva se navigacija a ne čitanje. Veze (eng. Links) se nazivaju još i hipervezama (Hyperlinks). Ove veze ugraĎujemo u Internet dokumenat, pogaĎate, uz pomoć HTML-a. MeĎusobno povezani dokumenti na Internet-u ne sadrže samo tekstove već i različite sadržaje kao što su slike, zvuci, animacije, video materijale, pa se Internet može nazvati i hipermedijalnim sistemom. Sve ove medije i njihov meĎusoban odnos opisujemo i ugraĎujemo u Internet stranicu, opet uz pomoć HTML-a. Dakle, osnovni jezik za kreiranje strukture i sadržaja, kao i formatiranje sadržaja stranica na Internetu jeste HTML. Priča o nastanku HTML-a stara je koliko i sam Internet. Sa razvojem Interneta razvijao se i HTML, a jedan od najvećih ‟krivaca‟ za to je firma Netscape, koja je na samom početku na svoju ruku uvodila nestandardna proširenja u HTML jezik. Naravno, ni ostali proizvoĎači browser-a nisu puno zaostajali za Netscape-om, pa je za taj period razvoja Interneta vezana i priča o takmičenju proizvoĎača browser-a u uvoĎenju nestandardnih proširenja u iste, poznata pod imenom ‟Rat Browser-a‟. Da bi se izbegli dalji ‟ratovi‟ meĎu gigantima softverske industrije, proširenjima, standardima i novim verzijama HTML-a bavi se posebno zvanično telo zvano W3C komitet. Dakle, HTML je živ jezik koji se razvija! HTML nije programski jezik u onom smislu u kom su to C++ ili Visual Basic, jer ne sadrži komande, tipove podataka, operatore, promenljive i slične stvari. HTML je više jezik za opis Internet dokumenata. Pomoću njega možete menjati boju i veličinu teksta, boju pozadine, umetnuti sliku i zvuk na Internet stranicu, ali ne možete izračunati koliko je 2+2. U svojoj suštini HTML dokumenat je običan tekstualni dokumenat sa ekstenzijom .htm ili .html, tako da se može kreirati i u bilo kom od tekst editora, kao što su Notepad, WordPad, MS Word. Iako je izrada HTML stranica vrlo jednostavna, postoje pravila koja morate znati i poštovati ih pri izradi HTML dokumenata. Svaki HTML dokument sastoji se od deklaracija, elemenata i atributa elemenata. O deklaracijama reći ćemo više u nekoj od sledećih lekcija, a sada ćemo se posvetiti elementima i atributima.

Elementi HTML-a Elementima formiramo strukturu i opisujemo izgled delova sadržaja HTML dokumenata. Elementi mogu da se nalaze bilo gde u okviru HTML dokumenta. Svaki elemenat sastoji se iz tri dela: početni tag, sadržaj i završni tag. Tag je specijalna sekvenca znakova – takozvani marker (‟Markup‟) koji je ograĎen znacima „„. Završni tag razlikujemo od početnog po znaku „/‟ posle znaka „ i , osim sadržaja taga . Sadržaj taga je naslov HTML dokumenta koji će se pojaviti u naslovnoj liniji web browser-a.

BODY

Sve ono što vidimo u prozoru browser-a, tj. sadržaj stranice i HTML elementi za formatiranje (opis) tog sadržaja, nalazi se u telu dokumenta koje uokviruje tag. U HTML dokumentu sme da postoji samo jedan par tagova . Ovaj element specificira glavni sadržaj dokumenta. Početni tag ima atribute koji omogućavaju da se specificiraju karakteristike koje va\e na nivou dokumenta (boja pozadine ili slika, boja teksta, boja posećenih i neposećenih linkova, itd.) Komentar u HTML kodu

Komentari u HTML kodu se navode u sledećem obliku:

Komentar počinje sekvencom znakova (izmeĎu ova dva znaka može doći i razmak). Sve što se nalazi izmeĎu ove dve sekvence znakova Web browser će ignorisati. Ispod se nalazi jedan primer pravilno struktuiranog html dokumenta. [struktura.html-code] Naslov Tekst dokumenta.

U HTML-u ne postoji razlika izmeĎu malih i velikih slova za elemente u tagovima tako npr. , , i predstavljaju iste elemente. Preporučujemo da elemente HTML-a pišete malim slovima. TakoĎe sve suvišne znakove razmaka (space), tabulator i znake za novi red u Internet dokumentu Internet čitač ignoriše, ali njihovo postojanje utiče na veličinu Internet dokumenata. Stoga preporučujemo da ih izbegavate, jer popularnost i posećenost Vaših stranica, osim izgleda i sadržaja zavisi u velikoj meri i od brzine učitavanja istih. Neki elementi dopuštaju da se izuzme završni tag, na primer elemenat br. Elemenat br služi za prelom reda u HTML-u (kao kad pritisnete Shift+ENTER u programu za obradu teksta). Elemenat br ne zahteva završni tag u obliku . Još jedan primer HTML elementa koji dozvoljava da se izuzme završni tag je img elemenat, namenjen uključivanju slika na Internet stranicu.

Atributi elemenata HTML-a Elementi mogu da sadrže atribute kojima se opisuju specifični parametri elementa kao što su dužina, visina, lokacija objekta sa koje se elemenat učitava i slično. Atributi se uvek uključuju u početni tag, nikako u završni. Atribut se sastoji iz ključa i njemu dodeljene vrednosti i to se zapisuje na sledeći način: Naziv_Atributa="Vrednost_Atributa". Vrednost atributa ukoliko postoji je ograničena dvostrukim ili jednostrukim navodnicima (uobičajeno je da se navode dvostruki kako bi u okviru njih mogli postaviti i jednostruke ako se ukaže potreba za tim). Na primer, img elemenat poseduje src atribut koji obezbeĎuje lokaciju slike sa koje se slika učitava i atribut alt koji obezbeĎuje alternativni tekst koji će biti prikazan na mestu predviĎenom za prikazivanje slike ukoliko učitavanje slike na HTML stranicu ne uspe iz bilo kog razloga. Sintaksa img elementa je sledeća: .

Na primer:

gde je "Slike\" lokacija slike, a ‟SlikaLeviBaner.jpg‟ je ime slike koja se učitava.

|4

Pošto je pitanje ispravnog navoĎenja lokacije objekata koje uključujete u HTML stranicu od suštinske | 5 važnosti za njeno ispravno funkcionisanje, reći ćemo nešto više o adresiranju. Šta praktično znači izraz "\Slike\"? Znači da se fascikla ‟Slike‟ koja sadrži sliku ‟SlikaLeviBaner.jpg‟ nalazi na istoj lokaciji (u istoj fascikli, na istom disku...) na kojoj se nalazi i HTML stranica u čijem kodu se nalazi gore pomenuti img tag. Pomenuti način adresiranja zove se relativno adresiranje. Postoji i apsolutno adresiranje, odnosno navoĎenje pune adrese od korenskog direktorijuma, root-a. Recimo da se i fascikla ‟Slike‟ i HTML stranica koja sadrži gornji img tag nalaze na C disku ili na sajtu cnti.info. Apsolutne adrese u src atributu imgtag-a bi u tom slučaju izgledale ovako

odnosno

Prednost relativnog adresiranja je u tome što Vi bez bojazni možete premeštati HTML stranicu i fasciklu ‟Slike‟ gde god želite, sve će funkcionisati sjajno dok god su stranica i fascikla ‟Slike‟ na istoj lokaciji. Ako koristite apsolutne adrese, tada pri svakom premeštanju morate menjati direktno u HTML kodu sve adrese. To je u redu ako učitavate samo jednu sliku na stranicu, ali šta ako ih je više? Iako programi kao Dreamweaver, što ćemo videti kasnije, imaju rutinu koja će pokušati da Vas spase greške ako premeštate fajlove koji su linkovani (slike u našem primeru) i da zameni stare nevažeće linkove novima, greške su uvek moguće. Povedite računa o tome gde smeštate slike i slične objekte koje uključujete u HTML kod, jer se vrlo lako može desiti da se isti objekti ne prikažu ispravno na HTML stranici ako ste nešto zabrljali sa adresama. O adresama biće opet reči u nekom od sledećih tekstova, kad budemo govorili o postavljanju Internet prezentacije na Web server.

Vaša prva prava Internet stranica Pre nego preĎemo na izradu same HTML stranice, potrebno je da napomenemo da je svrha ovog primera da ukaže na jednostavnost izrade stranica uz pomoć HTML-a. Radićemo u lokalu, na Vašem računaru tako da ćemo koristiti apsolutne adrese u ovom primeru. Napravimo nekoliko fascikli u koje ćemo smestiti stranicu i sve objekte koju ćemo ugraditi u nju. Na C disku napravite novu fasciklu i dajte joj ime ‟Radna’. U fascikli ‟Radna’ napravite novu fasciklu ‟Slike‟. PronaĎite jednu lepu sliku na Vašem disku i iskopirajte je u fasciklu ‟Slike‟, pa je zatim preimenujte u ‟SlikaLeviBaner‟. U našem primeru slika je tipa jpg, ali Vi ne morate slediti naš primer, možete iskoristiti sliku bilo kog tipa, recimo png ili gif . Naravno, tada morate i svuda gde se u HTML kodu pojavljuje ime ‟SlikaLeviBaner.jpg‟ zameniti ga sa ‟SlikaLeviBaner.png‟ ili ‟SlikaLeviBaner.gif‟, u zavisnosti od tipa slike koju ste iskopirali. Vreme je da konačno napravimo Vašu prvu pravu Internet stranicu. Svi programeri i informatičari sigurno su u životu nebrojeno puta napravili aplikaciju „Zdravo svete“ počinjući da uče neki programski jezik, pa zašto bismo mi bili izuzetak? Dakle, napravićemo Internet stranicu na kojoj piše 'Zdravo HTML svete!'. Otvorite novi Notepad dokumenat i ukucajte u njemu: [zdravosvete.html-code] Moja prva Internet stranica Zdravo HTML svete!

Pri snimanju dajte ime dokumentu, recimo ‟zdravosvete.html‟, i smestite ga u fasciklu ‟Radna‟. Pokrenite ovu stranicu dvoklikom na ikonicu dokumenta zdravosvete.html. Uočite da ova stranica ima naslov ‟Moja prva Internet stranica‟ zahvaljujući tagu title koji se smešta u okviru head taga.

Kao što je već jednom napomenuto body tag sadrži atribute za kontrolu i format prikaza koji se odnose na | 6 telo dokumenta. Jedan od njih je bgcolor - pomoću koga se navodimo boju pozadine. Boju zadajete kao heksadecimalan broj prema RGB (RedGreenBlue - CrvenaZelenaPlava) kolornoj šemi, kojoj prethodi znak #. Prva dva heksadecimalna broja se odnose na crvenu, druga dva na zelenu i zadnja dva na plavu (npr. Crvena boja je #FF0000, Bela #FFFFFF, crna #000000,...).

O adresama Adrese i zašto su one bitne... Adrese su od velike važnosti za ispravno funkcionisanje Web-a. Ako imate neispravnu adresu, da li ćete stići na željeno odredište? Verovatno ne. Zato ćemo adresama na samom početku obratiti punu pažnju. Napominjemo još jednom da problemi sa adresama čine 80% problema sa kojima ćete se susretati u svom radu sa Web-om. Pretpostavljamo da kao nastavnici informatike posedujete odreĎena znanja o adresama.

Hyperlink (Hiper veza) Neformalna definicija Hyperlink-a: hyperlink je referenca ili navigacioni elemenat u dokumentu ka drugoj sekciji istog ili drugog dokumenta koji može biti na istom ili drugom domenu. Često hyperlink skraćujemo na link. Hypertext (u značenju više od teksta) je oblik teksta koji egzistira na Web-u koji je funkcionalno bogatiji od običnog tekstualnog dokumenta jer omogućava korisniku da istražuje druge Hiper tekstove, odnosno Web stranice povezanih sa prvom stranicom specifičnim rečima ili slikama. Veza izmeĎu prve stranice i drugih se ostvaruje upravo hiperlinkovima definisanim na specifičnim rečima, slikama,... Hiperlink nije ništa drugo do adresa zapisana u odreĎenom obliku. Kada kreiramo hiperlink, odredište ove adrese je zapisano u konkretnom formatu, koji se još skraćeno naziva URL (Uniform Resource Locator). URL sadrži u sebi adresu web servera (lista poddomena sve do internet domena najvišeg nivoa), putanju do stranice (fajla) i sam naziv fajla (web stranice). URL takoĎe identifikuje protokol koji upravlja datim tipom resursa (fajlova), kao što su HTTP ili FTP. Na primer, posmatrajmo adresu http://www.cnti.info/forumi/phpBBInf/Index.php http:// je oznaka Hyper Text Transfer Protocol-a www.cnti.info je adresa servera, www je poddomen domena cnti, a oba su poddomeni domena info /forumi/phpBBInf/ je putanja do fajla (web stranice) Index.php je ime fajla (web stranice)

Apsolutni i relativni hiprelinkovi Hiperlinkove možemo razvrstati na relativne i apsolutne. Apsolutni hiperlinkovi (URL-ovi) sadrže potpune adrese, uključujući tip protokola, naziv web servera, putanju do fajla i naziv fajla. Relativnom URL-u nedostaje jedan ili više delova potpune adrese. Nedostajući delovi adrese se formiraju u odnosu na tekuću stranicu na kojoj se nalazi sam URL. Na primer, ukoliko nedostaju tip protokola i web server, web čitač će iskoristiti, protokol i naziv domena sa trenutne stranice. http://www.cnti.info/forumi/phpBBInf/index.php je apsolutna adresa /forumi/phpBBInf/index.php je primer relativne adresa u odnosu na neku tekuću stranicu Uobičajena je praksa da se unutar stranica na Web-u koriste relativni URL-ovi koji sadrže samo delimičnu putanju i naziv fajla. Koncentrišimo se samo na adrese. Uzmimo da postoji sledeća hijerarhija fascikli na našem serveru www.cnti.info, odnosno u korenskom direktorijumu www.

Recimo da u fascikli Docs postoji dokumenat Index.htm. Recimo da u fascikli jpg postoji slika logo.jpg. Ako se obraćate apsolutnom adresom slici logo.jpg ona glasi ovako http://www.cnti.info/Primer/Slike/jpg/logo.jpg . Ovakvom adresom možemo se obratiti dokumentu

logo.jpg sa bilo koje stranice na Web-u. Ako se obraćate dokumentu Index.htm koji se nalazi u fascikli Docs apsolutnom adresom ona će glasiti ovako http://www.cnti.info/Primer/Docs/index.htm . Dakle, kad koristite apsolutne adrese one uvek navode punu putanju od korenske fascikle do ciljnog fajla. U slučaju Web-a korenska fascikla se zamenjuje prvo oznakom protokola http:// a zatim i imenom web servera/domenom www.cnti.info i na nju se dodaje putanja do fajla sa imenom fajla na kraju. Kada apsolutno adresiranje nije dobro? Ako premestite sajt na novi server svuda u svim dokumentima treba promeniti prvi deo (domenski deo) adrese. Na primer ako selite www.cnti.co.yu na adresu www.cnti.info onda je neophodno svuda u apsolutnim linkovima na svim stranicama morate zameniti ove dve vrednosti. Ovo se relativno lako radi sa programima poput dreamweaver-a, ali ne dajte se zavarati u pitanju je posao koji nije naivan i vrlo lako se može pogrešiti. Druga potencijalno problematična osobina asolutnih adresa je njihova dužina koja raste sa usložnjavanjem hijerarhije i što je adresa duža lakše je pogrešiti odnosno teže je baratati njome. Ako želimo da referenciramo sliku logo.jpg na stranici index.htm to možemo da uradimo referenciranjem apsolutne i relativne adrese. Videli smo da apsolutna adresa u sebe uključuje punu putanju do fajla http://www.cnti.info/Primer/Slike/jpg/logo.jpg. Na bilo kojem fajlu u okviru cnti.info domena pa i na celom Web-u da upotrebite u HTML kodu ovu adresu slika logo.jpg biće ispravno referencirana. Ukoliko fajlove sajta premestimo na neki drugi server, recimo www.cnti.co.rs gornji link neće raditi sve dok ga ne zamenimo ispravnim (http://www.cnti.co.rs/Primer/Slike/jpg/logo.jpg). Kako se pravi relativna adresa?

Probleme apsolutnih adresa zaobilazimo upotrebom relativnih adresa. Relativna adresa se pravi tako što navodimo putanju od tekućeg fajla sa kojeg referenciramo do prvog zajedničkog pretka sa fajlom na koji se referenciramo, a zatim navodimo putanju od zajedničkog pretka do fajla na koji se referenciramo. U našem primeru, da bi referencirali sa Index.htm dokumenat logo.jpg ispravna relativna adresa bi bila sledeća ../Slike/jpg/logo.jpg. Podsetimo da je u fascikli Docs dokumenat Index.htm, a u fascikli jpg slika logo.jpg. Dakle, sekvenca znakova ../ ima značenje nivo više, i već na tom nivou u našem primeru smo stigli do prvog zajedničkog pretka naša dva fajla (fascikla Primer): onog koji referencira (Index.htm) i onog na koji se referencira (logo.jpg). Zamislite da se fizički krećete kroz hijerarhiju: izlazimo iz fascikle Docs i nalazimo se u fascikli Primer. Odatle prosto putujemo do dokumenta logo.jpg kroz fasciklu Slike i fasciklu jpg. Prednost relativnog adresiranja je u tome što možete premeštati fasciklu Primer sa njenim sadržajem koliko god hoćete, gornji relativni link će ispravno raditi dokle god se ne naruši postojeća hijerarhija. Napominjemo ovde da čak i prosto preimenovanje fascikle jpg narušava konzistentnost svih adresa koje se referenciraju na sadržaj fascikle jpg pre njenog preimenovanja. Jednostavno rečeno, nemojte menjati imena fascikli nakon što ste se linkovali na njihov sadržaj. Ovo pravilo važi iz apsolutne i za relativne adrese ravnopravno. Ovde postoji i izuzetak, kad je u pitanju domen, sve kombinacije su dozvoljene. Na primer, www.cnti.info i www.cnti.INFO i www.CNTI.info su iste adrese. Uočite, ponovo napominjemo, da u nastavku putanje nakon domena nije svejedno da li su mala ili velika slova. Da bi adresa bila ispravna moraju se identično navesti imena fascikli u putanji do odredišnog fajla. U tom smislu adrese ../Slike/jpg/logo.jpg ../Slike/Jpg/logo.jpg nikako nisu iste, i na to treba obratiti pažnju od samog starta. Ovakve greške su jako teško uočljive, sa adresama treba baratati oprezno.

Nastavak sage o HTML-u Podsetimo se i proširimo svoja znanja: HTML -je skraćeno od Hyper Text Markup Language. HTML dokument je obična tekstualna datoteka sa tekstom i tagovima. HTML je case insensitive, ne pravi

|7

se razlika izmeĎu malih i velikih slova u HTML elementima (BODY = Body = body). Preporuka je da | 8 koristimo mala slova. Sadržaj dokumenta opisujemo tagovima, odn tagove koristimo da definišemo izgled dokumenta. Svaki tag ima otvarajući tag: . Većina ih ima i zatvarajući tag: . Oni tagovi koji nemaju zatvarajući elementa zovu se prazni tagovi. Prazan tag izgleda ovako: a sreće se i u obliku . Potonji zapis je praktičniji. Da rezimiramo, tag je specijalni tekst tkz. "markup"-marker koji je ograĎen sa "". A završni tag uključuje i znak "/" posle znaka "