HTML Hyper Text Markup Language Sintaksa HTML kda

  • Slides: 60
Download presentation
HTML Hyper Text Markup Language

HTML Hyper Text Markup Language

Sintaksa HTML kôda • HTML kôd se piše u jednostavnom tekstualnom editoru (npr. Noteped)

Sintaksa HTML kôda • HTML kôd se piše u jednostavnom tekstualnom editoru (npr. Noteped) • Kôd se piše unutar tag-ova (koji su okruženi dvijema zagradama < i >) • Oni browseru govore poziciju teksta / tablice /slike / veze i sl. na stranici • Tagovi obično dolaze u paru: početni <b> i završni </b> • Tagovi nisu osjetljivi na mala i velika slova, što znači da je <B> isto što i <b>

Sintaksa HTML kôda • Prvi tag u svakom HTLM dokumentu mora biti <html> i

Sintaksa HTML kôda • Prvi tag u svakom HTLM dokumentu mora biti <html> i on browsweru govori da je to početak html dokumenta • </html> označava kraj html dokumenta • Tagovi <head> i </head> označavaju da se tekst napisan unutar njih odnosi na zaglavlje dokumenta, koje se ne vidi unutar browsera • Tagovi <title> i </title> označavaju naslov web stranice i on se pojavljuje kao naziv prozora browsera • Tagovi <body> i </body> ograničavaju tekst koji će biti ispisan na web stranici • <b> i </b> su tagovi kojim se slova podebljavaju • Nakon što je html kôd napisan dokument se sprema sa nastavkom. html

Osnovni HTML tagovi • Naslov se definira tagovima od <h 1> do <h 6>

Osnovni HTML tagovi • Naslov se definira tagovima od <h 1> do <h 6> <h 1> Ovo je naslov </h 1> <h 2> Ovo je naslov </h 2> <h 3> Ovo je nsalov </h 3> <h 4> Ovo je naslov </h 4> <h 5> Ovo je naslov </h 5> <h 6> Ovo je naslov </h 6>

Osnovni HTML tagovi • Odlomci se definiraju sa <p> i </p> tagovima <p> Ovo

Osnovni HTML tagovi • Odlomci se definiraju sa <p> i </p> tagovima <p> Ovo je prvi odlomak </p> <p> Ovo je drugi odlomak </p>

Osnovni HTML tagovi • Tag se koristi kada želimo prijeći u slijedeći redak, a

Osnovni HTML tagovi • Tag se koristi kada želimo prijeći u slijedeći redak, a ne i u novi odlomak <p> Ovo je odlomak sa prelaskom u novi red. </p>

Osnovni HTML tagovi • Komentari unutar HTML kôda se koriste u slučaju kada želimo

Osnovni HTML tagovi • Komentari unutar HTML kôda se koriste u slučaju kada želimo iskomentirati dio kôda a da to ne bude vidljivo u browseru <!-- This is a comment -->

Tag Description <html> Definira HTML dokument <body> Definira tjelo dokumenta <h 1> to <h

Tag Description <html> Definira HTML dokument <body> Definira tjelo dokumenta <h 1> to <h 6> Definira naslove od 1 do 6 <p> Definira paragraf Definira nprijelaz u novu liniju <hr> Definira horizontalnu crtu <!--> Definira komentar

Primjer 1) <html> <head> <title> Moja prva web stranica </title> </head> <body> Ovo je

Primjer 1) <html> <head> <title> Moja prva web stranica </title> </head> <body> Ovo je moja prva web stranica. <b> Ovaj tekst je podebljan </b> </body> </html>

Primjer 2) <html> <head> <title> Jednostavan HTML dokument </title> </head> <body> <H 1> HTML

Primjer 2) <html> <head> <title> Jednostavan HTML dokument </title> </head> <body> <H 1> HTML dokument </H 1> Ovo je jednostavan dokument kojim se prikazuju <P><STRONG> masna slova </STRONG>, <EM> nakošenana slova </EM> i običan tekst <P> <HR> Pokazana je i mogućnost ubacivanja slike u dokument <IMG ALT=“Slika” SRC=“slika. gif> <P> Primjer za hipervezu<a href="http: //www. w 3 schools. com/">Visit W 3 Schools!</a> </body> </html>

HTML oblikovanje teksta Tag Opis <b> Defines bold text <big> Defines big text <em>

HTML oblikovanje teksta Tag Opis <b> Defines bold text <big> Defines big text <em> Defines emphasized text <i> Defines italic text <small> Defines small text <strong> Defines strong text <sub> Defines subscripted text <sup> Defines superscripted text <ins> Defines inserted text <del> Defines deleted text <s> Izbjegavati. Use <del> instead <strike> Izbjegavati. Use <del> instead <u> Izbjegavati. Use styles instead

Tag Description <abbr> Defines an abbreviation <acronym> Defines an acronym <address> Defines an address

Tag Description <abbr> Defines an abbreviation <acronym> Defines an acronym <address> Defines an address element <bdo> Defines the text direction <blockquote> Defines a long quotation <q> Defines a short quotation <cite> Defines a citation <dfn> Defines a definition term

HTML slike • Slike se definiraju <img> tagom koji je prazan tj. nema svojeg

HTML slike • Slike se definiraju <img> tagom koji je prazan tj. nema svojeg duplića za kraj • Za prikaz slike na web stranici potreban je atribut src (dolazi od engl. riječi source) kojim se definira URL (točna adresa, putanja do mjesta gdje je slika pohranjena) slike koja se želi prikazati na stranici <img src="url">

 • Atribut alt se koristi za prikaz korisnički definiranog teksta koji će se

• Atribut alt se koristi za prikaz korisnički definiranog teksta koji će se pojaviti ako mišem prođemo preko slike na web stranici, ili ako se slika kojim slučajem ne može prikazati u browseru <img src="boat. gif" alt="Big Boat"> Tag Description <img> Defines an image <map> Defines an image map <area> Defines a clickable area inside an image map

Primjer 1 <html> <body> <p> An image: <img src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20415%20289%22%3E%3C/svg%3E' data-src="constr 4. gif" width="144" height="50"> </p>

Primjer 1 <html> <body> <p> An image: <img src="constr 4. gif" width="144" height="50"> </p> <p> A moving image: <img src="hackanm. gif" width="48" height="48"> </p> <p> Note that the syntax of inserting a moving image is no different from that of a non-moving image. </p> </body> </html>

Primjer 2 <html> <body> <p> An image from another folder: <img src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20415%20289%22%3E%3C/svg%3E' data-src="/images/netscape. gif" width="33"

Primjer 2 <html> <body> <p> An image from another folder: <img src="/images/netscape. gif" width="33" height="32"> </p> <p> An image from W 3 Schools: <img src="http: //www. w 3 schools. com/images/ie. gif"> </p> </body> </html>

HTML pozadina • Tag <body> može imati dva atributa kojima se definira pozadina •

HTML pozadina • Tag <body> može imati dva atributa kojima se definira pozadina • Pozadina može biti neka boja ili slika • Atribut bgcolor definira boju pozadine web stranice <body bgcolor="#000000"> ili <body bgcolor="rgb(0, 0, 0)"> ili <body bgcolor="black"> Svi postavljaju boju pozadine u crnu

 • Atribut background definira sliku koja će biti postavljena za pozadinu web stranice

• Atribut background definira sliku koja će biti postavljena za pozadinu web stranice • Vrijednost tog atributa treba biti URL slike koja se želi postaviti kao pozadina web stranice <body background="clouds. gif"> ili <body background="http: //www. w 3 schools. com/clouds. gif">

Primjer 1 <html> <body bgcolor="#d 0 d 0 d 0"> <p> This is a

Primjer 1 <html> <body bgcolor="#d 0 d 0 d 0"> <p> This is a paragraph. </p> <p> This is another paragraph. </p> </body> </html>

Primjer 2 <html> <body bgcolor="#ffffff" text="yellow"> <p> This is a paragraph. </p> <p> This

Primjer 2 <html> <body bgcolor="#ffffff" text="yellow"> <p> This is a paragraph. </p> <p> This is another paragraph. </p> </body> </html>

Primjer 3 <html> <body background="background. jpg"> <h 3>Image Background</h 3> <p>Both gif and jpg

Primjer 3 <html> <body background="background. jpg"> <h 3>Image Background</h 3> <p>Both gif and jpg files can be used as HTML backgrounds. </p> <p>If the image is smaller than the page, the image will repeat itself. </p> </body> </html>

Vrijednosti boja • HTML boje se mogu definirati heksadecimalnim brojevima za kombinacije crvene, zelene

Vrijednosti boja • HTML boje se mogu definirati heksadecimalnim brojevima za kombinacije crvene, zelene i plave boje (RGB) • Najmanja vrijednoat je 0 (hex #00) a najveća vrijednost je 255 (hex #FF) Color HEX Color RGB #000000 rgb(0, 0, 0) #FF 0000 rgb(255, 0, 0) #00 FF 00 rgb(0, 255, 0) #0000 FF rgb(0, 0, 255) #FFFF 00 rgb(255, 0) #00 FFFF rgb(0, 255) #FF 00 FF rgb(255, 0, 255) #C 0 C 0 C 0 rgb(192, 192) #FFFFFF rgb(255, 255) Primjer dobivanja boja kombiniranjem triju osnovnih boja

 • Moguće je koristiti i nazive za boje: aqua, black, blue, fuchsia, gray,

• Moguće je koristiti i nazive za boje: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow … • U vrijeme kad je većina računala podržavala samo 256 različitih boja definirana je tabela sa 216 boja koje su se sigurno prikazivale na web stranici. • Danas kada većina računala može prikazati milione različitih boja nije potrebno držati se te tabele, već postoji tabela sa engl. nazivima boja

 • Kombinacijom triju osnovnih boja (RGB) moguće je dobiti 16 miliona različitih boja

• Kombinacijom triju osnovnih boja (RGB) moguće je dobiti 16 miliona različitih boja • Većina modernih monitora može prikazati barem 16 384 različitih boja.

00000033 000066 000099 0000 CC 0000 FF 003300 003333 003366 003399 0033 CC 0033

00000033 000066 000099 0000 CC 0000 FF 003300 003333 003366 003399 0033 CC 0033 FF 006600 006633 006666 006699 0066 CC 0066 FF 009900 009933 009966 009999 0099 CC 0099 FF 00 CC 00 00 CC 33 00 CC 66 00 CC 99 00 CCCC 00 CCFF 00 00 FF 33 00 FF 66 00 FF 99 00 FFCC 00 FFFF 330000 330033 330066 330099 3300 CC 3300 FF 333300 33333366 333399 3333 CC 3333 FF 336600 336633 336666 336699 3366 CC 3366 FF 339900 339933 339966 339999 3399 CC 3399 FF 33 CC 00 33 CC 33 33 CC 66 33 CC 99 33 CCCC 33 CCFF 33 FF 00 33 FF 33 33 FF 66 33 FF 99 33 FFCC 33 FFFF 660000 660033 660066 660099 6600 CC 6600 FF 663300 663333 663366 663399 6633 CC 6633 FF 666600 666633 66666699 6666 CC 6666 FF 669900 669933 669966 669999 6699 CC 6699 FF 66 CC 00 66 CC 33 66 CC 66 66 CC 99 66 CCCC 66 CCFF 66 FF 00 66 FF 33 66 FF 66 66 FF 99 66 FFCC 66 FFFF 990000 990033 990066 990099 9900 CC 9900 FF 993300 993333 993366 993399 9933 CC 9933 FF 996600 996633 996666 996699 9966 CC 9966 FF 999900 999933 999966 999999 CC 9999 FF 99 CC 00 99 CC 33 99 CC 66 99 CC 99 99 CCCC 99 CCFF 99 FF 00 99 FF 33 99 FF 66 99 FF 99 99 FFCC 99 FFFF CC 0000 CC 0033 CC 0066 CC 0099 CC 00 CC CC 00 FF CC 3300 CC 3333 CC 3366 CC 3399 CC 33 CC CC 33 FF CC 6600 CC 6633 CC 6666 CC 6699 CC 66 CC CC 66 FF CC 9900 CC 9933 CC 9966 CC 9999 CC 99 CC CC 99 FF CCCC 00 CCCC 33 CCCC 66 CCCC 99 CCCCCCFF 00 CCFF 33 CCFF 66 CCFF 99 CCFFCC CCFFFF FF 0000 FF 0033 FF 0066 FF 0099 FF 00 CC FF 00 FF FF 3300 FF 3333 FF 3366 FF 3399 FF 33 CC FF 33 FF FF 6600 FF 6633 FF 6666 FF 6699 FF 66 CC FF 66 FF FF 9900 FF 9933 FF 9966 FF 9999 FF 99 CC FF 99 FF FFCC 00 FFCC 33 FFCC 66 FFCC 99 FFCCCC FFCCFF FFFF 00 FFFF 33 FFFF 66 FFFF 99 FFFFCC FFFFFF

HTML znakovni entiteti (specijalni znakovi) • Pojedini znakovi u HTML-u imaju specijalno značenje (kao

HTML znakovni entiteti (specijalni znakovi) • Pojedini znakovi u HTML-u imaju specijalno značenje (kao npr. znak “manje od < kojim se definira početak HTML tag-a) • Znakovni entitet se sastoji od 3 dijela: - znaka & - imena entiteta ili #broj entiteta - i ;

HTML znakovni entiteti Ako se u HTML-u ostavi 10 praznina između dvije riječi browser

HTML znakovni entiteti Ako se u HTML-u ostavi 10 praznina između dvije riječi browser će ih odrezati na samo jednu. Ukoliko želimo imati između dvije riječi više od jednog praznog mjesta potrebno je korisiti znakovni entitet   Result Description Entity Name Entity Number non-breaking space     < less than < < > greater than > > & ampersand & & " quotation mark " " ' apostrophe &apos; (does not work in IE) '

Result Description Entity Name Entity Number ¢ cent ¢ ¢ £ pound £ £

Result Description Entity Name Entity Number ¢ cent ¢ ¢ £ pound £ £ ¥ yen ¥ ¥ § section § § © copyright © © ® registered trademark ® ® × multiplication × × ÷ division ÷ ÷ € euro € € Š capital S with caron Š Š š small S with caron š š Ð capital eth, Icelandic Ð Ð

HTML veze (linkovi) • Koriste se kad se želimo povezati s drugim dokumentima (web

HTML veze (linkovi) • Koriste se kad se želimo povezati s drugim dokumentima (web stranica, slika, zvuk, film i sl. ) na web-u • Sintaksa je: <a href="url">Tekst koji će biti prikazan u browseru</a> <a href=http: //www. w 3 schools. com/ target="_blank">Visit W 3 Schools!</a> • Atribut target definira gdje će dokument biti otvoren • Atribut name definira točno mjesto na koje će se skočiti klikom na navedeni link <a name="label">Text to be displayed</a> <a name="tips">Useful Tips Section</a> <a href="http: //www. w 3 schools. com/html_links. asp#tips"> Jump to the Useful Tips Section</a> <a href="#tips">Jump to the Useful Tips Section</a>

Primjer 1 <html> <body> <p> <a href="lastpage. htm"> This text</a> is a link to

Primjer 1 <html> <body> <p> <a href="lastpage. htm"> This text</a> is a link to a page on this Web site. </p> <a href="http: //www. microsoft. com/"> This text</a> is a link to a page on the World Wide Web. </p> </body> </html>

Primjer 2 <html> <body> <p> You can also use an image as a link:

Primjer 2 <html> <body> <p> You can also use an image as a link: <a href="lastpage. htm"> <img border="0" src="buttonnext. gif" width="65" height="38"> </a> </p> </body> </html>

Primjer 3 <html> <body> <a href="lastpage. htm" target="_blank">Last Page</a> <p> If you set the

Primjer 3 <html> <body> <a href="lastpage. htm" target="_blank">Last Page</a> <p> If you set the target attribute of a link to "_blank", the link will open in a new window. </p> </body> </html>

Primjer 4 <html> <body> <p> <a href="#C 4">See also Chapter 4. </a> </p> <h

Primjer 4 <html> <body> <p> <a href="#C 4">See also Chapter 4. </a> </p> <h 2>Chapter 1</h 2> <p>This chapter explains ba bla</p> <h 2>Chapter 2</h 2> <p>This chapter explains ba bla</p> <h 2>Chapter 3</h 2> <p>This chapter explains ba bla</p> <h 2><a name="C 4">Chapter 4</a></h 2> <p>This chapter explains ba bla</p> <h 2>Chapter 5</h 2> <p>This chapter explains ba bla</p> <h 2>Chapter 6</h 2> <p>This chapter explains ba bla</p> <h 2>Chapter 7</h 2> <p>This chapter explains ba bla</p> <h 2>Chapter 8</h 2> <p>This chapter explains ba bla</p>

<h 2>Chapter 9</h 2> <p>This chapter explains ba bla</p> <h 2>Chapter 10</h 2> <p>This

<h 2>Chapter 9</h 2> <p>This chapter explains ba bla</p> <h 2>Chapter 10</h 2> <p>This chapter explains ba bla</p> <h 2>Chapter 11</h 2> <p>This chapter explains ba bla</p> <h 2>Chapter 12</h 2> <p>This chapter explains ba bla</p> <h 2>Chapter 13</h 2> <p>This chapter explains ba bla</p> <h 2>Chapter 14</h 2> <p>This chapter explains ba bla</p> <h 2>Chapter 15</h 2> <p>This chapter explains ba bla</p> <h 2>Chapter 16</h 2> <p>This chapter explains ba bla</p> <h 2>Chapter 17</h 2> <p>This chapter explains ba bla</p> </body> </html>

Primjer 5 <html> <body> <p> This is a mail link: <a href="mailto: someone@microsoft. com?

Primjer 5 <html> <body> <p> This is a mail link: <a href="mailto: someone@microsoft. com? subject=Hello%20 again"> Send Mail</a> </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 okviri • Upotrebom okvira moguće je prikazati više od jedne web stranice u

HTML okviri • Upotrebom okvira moguće je prikazati više od jedne web stranice u istom prozoru browsera • Svaki HTML dokumentt se naziva okvir (engl. frame) i nezavisan je od ostalih okvira • Tag <frameset> definira kako će se prozor browsera podjeliti u okvire

HTML okviri • Npr: <frameset cols="25%, 75%"> <frame src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20415%20289%22%3E%3C/svg%3E' data-src="frame_a. htm"> <frame src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20415%20289%22%3E%3C/svg%3E' data-src="frame_b. htm"></frameset> Ovdje

HTML okviri • Npr: <frameset cols="25%, 75%"> <frame src="frame_a. htm"> <frame src="frame_b. htm"></frameset> Ovdje je prozor podijeljen na dva stupca pri čemu prvi zauzima 25 % širine prozora browsera a drugi zauzima 75 %. HTML dokument pod nazivom frame_a. htm e se smjesiti u prvi stupac, dok će dokument pod nazivom frame_b. htm biti smješten u drugom stupcu.

HTML okviri Tag Opis <frameset> Definira glavne okvire <frame> Definira podprozore (okvire) <noframes> Definira

HTML okviri Tag Opis <frameset> Definira glavne okvire <frame> Definira podprozore (okvire) <noframes> Definira dijelove bez okvira za browsere koji ne podržavaju okvire <iframe> Definira unutarnje podprozore

Primjer 1 <html> <frameset cols="25%, 50%, 25%"> <frame src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20415%20289%22%3E%3C/svg%3E' data-src="frame_a. htm"> <frame src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20415%20289%22%3E%3C/svg%3E' data-src="frame_b. htm"> <frame

Primjer 1 <html> <frameset cols="25%, 50%, 25%"> <frame src="frame_a. htm"> <frame src="frame_b. htm"> <frame src="frame_c. htm"> </frameset> </html>

Primjer 2 <html> <frameset rows="25%, 50%, 25%"> <frame src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20415%20289%22%3E%3C/svg%3E' data-src="frame_a. htm"> <frame src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20415%20289%22%3E%3C/svg%3E' data-src="frame_b. htm"> <frame

Primjer 2 <html> <frameset rows="25%, 50%, 25%"> <frame src="frame_a. htm"> <frame src="frame_b. htm"> <frame src="frame_c. htm"> </frameset> </html>

Primjer 3 <html> <frameset rows="50%, 50%"> <frame src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20415%20289%22%3E%3C/svg%3E' data-src="frame_a. htm"> <frameset cols="25%, 75%"> <frame src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20415%20289%22%3E%3C/svg%3E' data-src="frame_b.

Primjer 3 <html> <frameset rows="50%, 50%"> <frame src="frame_a. htm"> <frameset cols="25%, 75%"> <frame src="frame_b. htm"> <frame src="frame_c. htm"> </frameset> </html>

Primjer 4 <html> <frameset rows="50%, 50%"> <frame noresize="noresize" src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20415%20289%22%3E%3C/svg%3E' data-src="frame_a. htm"> <frameset cols="25%, 75%"> <frame

Primjer 4 <html> <frameset rows="50%, 50%"> <frame noresize="noresize" src="frame_a. htm"> <frameset cols="25%, 75%"> <frame noresize="noresize" src="frame_b. htm"> <frame noresize="noresize" src="frame_c. htm"> </frameset> </html> • Atribut noresize se koristi kada ne želimo da korisnik može mijenjati veličinu okvira povlačenjem okvira.

Primjer 5 <html> <frameset cols="120, *"> <frame src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20415%20289%22%3E%3C/svg%3E' data-src="tryhtml_contents. htm"> <frame src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20415%20289%22%3E%3C/svg%3E' data-src="frame_a. htm" name="showframe"> </frameset>

Primjer 5 <html> <frameset cols="120, *"> <frame src="tryhtml_contents. htm"> <frame src="frame_a. htm" name="showframe"> </frameset> </html>

Primjer 6 <html> <body> <iframe src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20415%20289%22%3E%3C/svg%3E' data-src="default. asp"></iframe> <p>Some older browsers don't support iframes. </p>

Primjer 6 <html> <body> <iframe src="default. asp"></iframe> <p>Some older browsers don't support iframes. </p> <p>If they don't, the iframe will not be visible. </p> </body> </html>

Primjer 7 <html> <frameset cols="20%, 80%"> <frame src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20415%20289%22%3E%3C/svg%3E' data-src="frame_a. htm"> <frame src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20415%20289%22%3E%3C/svg%3E' data-src="link. htm#C 10"> </frameset>

Primjer 7 <html> <frameset cols="20%, 80%"> <frame src="frame_a. htm"> <frame src="link. htm#C 10"> </frameset> </html>

HTML tabele • Tabele se definiraju tagom <table> • Tabela je podijeljena u redove

HTML tabele • Tabele se definiraju tagom <table> • Tabela je podijeljena u redove ( <tr> tag) i svaki redak je podijeljen u ćelije ( <td> tag) <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> </tr> </table> Atribut border definira debljinu okvira tablice. Ako se eksplicitno ne navede okvir tabele neće se vidjeti u browseru.

Naslovi u tabeli • Naslov se definira tagom <th> <table border="1"> <tr> <th>Heading</th> <th>Another

Naslovi u tabeli • Naslov se definira tagom <th> <table border="1"> <tr> <th>Heading</th> <th>Another Heading</th> </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> </tr> </table>

Prazne ćelije u tabeli • One se u većini browsera ne prikazuju dobro, pa

Prazne ćelije u tabeli • One se u većini browsera ne prikazuju dobro, pa je dobro u ćeliju koja treba biti prazna dodati prazno mjesto (  ) <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <td>row 2, cell 1</td> <td>  </td> </tr> </table>

Tagovi za oblikovanje tabela Tag Description <table> Defines a table <th> Defines a table

Tagovi za oblikovanje tabela Tag Description <table> Defines a table <th> Defines a table header <tr> Defines a table row <td> Defines a table cell <caption> Defines a table caption <colgroup> Defines groups of table columns <col> Defines the attribute values for one or more columns in a table <thead> Defines a table head <tbody> Defines a table body <tfoot> Defines a table footer

<html> <body> <p> Each table starts with a table tag. Each table row starts

<html> <body> <p> Each table starts with a table tag. Each table row starts with a tr tag. Each table data starts with a td tag. </p> <h 4>One column: </h 4> 1 <table border="1"> <tr> <td>100</td> </tr> </table> <h 4>One row and three columns: </h 4> <table border="1"> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> </table> Primjer

<h 4>Two rows and three columns: </h 4> <table border="1"> <tr> <td>100</td> <td>200</td> <td>300</td>

<h 4>Two rows and three columns: </h 4> <table border="1"> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table> </body> </html>

<html> <body> <h 4>With a normal border: </h 4> <table border="1"> <tr> <td>First</td> <td>Row</td>

<html> <body> <h 4>With a normal border: </h 4> <table border="1"> <tr> <td>First</td> <td>Row</td> </tr> <td>Second</td> <td>Row</td> </tr> </table> <h 4>With a thick border: </h 4> <table border="8"> <tr> <td>First</td> <td>Row</td> </tr> <td>Second</td> <td>Row</td> </tr> </table> Primjer 2

<h 4>With a very thick border: </h 4> <table border="15"> <tr> <td>First</td> <td>Row</td> </tr>

<h 4>With a very thick border: </h 4> <table border="15"> <tr> <td>First</td> <td>Row</td> </tr> <td>Second</td> <td>Row</td> </tr> </table> </body> </html>

HTML liste (popisi) • HTML podržava točkanje, nabrajanje i definicijske liste • Točkanje se

HTML liste (popisi) • HTML podržava točkanje, nabrajanje i definicijske liste • Točkanje se definira tagom <ul>, pri čemu svaki element popisa započinje tagom <li> <ul> <li>Coffee</li> <li>Milk</li> </ul>

 • Nabrajanje započinje tagom <ol>, pri čemu svaki element popisa započinje tagom <li>

• Nabrajanje započinje tagom <ol>, pri čemu svaki element popisa započinje tagom <li> <ol> <li>Coffee</li> <li>Milk</li> </ol> Definicijska lista osim pojmova sadrži i njihova objašnjena Definira se tagom <dl>, pri čemu se svaki pojam definira tagom <dt> a njegovo objašnjenje tagom <dd>

<dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl>

<dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl>

Tagovi za oblikovanje liste Tag Description <ol> Defines an ordered list <ul> Defines an

Tagovi za oblikovanje liste Tag Description <ol> Defines an ordered list <ul> Defines an unordered list <li> Defines a list item <dl> Defines a definition list <dt> Defines a definition term <dd> Defines a definition description <dir> Deprecated. Use <ul> instead <menu> Deprecated. Use <ul> instead

Primjer 1 <html> <body> <h 4>An Unordered List: </h 4> <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li>

Primjer 1 <html> <body> <h 4>An Unordered List: </h 4> <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> </body> </html>

Primjer 2 <html> <body> <h 4>An Ordered List: </h 4> <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li>

Primjer 2 <html> <body> <h 4>An Ordered List: </h 4> <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> </body> </html>