1 / 60

HTML

HTML. H yper T ext M arkup L anguage. 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

tommy
Télécharger la présentation

HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML Hyper Text Markup Language

  2. 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>

  3. 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

  4. Osnovni HTML tagovi • Naslov se definira tagovima od <h1> do <h6>

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

  6. Osnovni HTML tagovi • Tag <br> se koristi kada želimo prijeći u slijedeći redak, a ne i u novi odlomak

  7. 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

  8. HTML oblikovanje teksta

  9. 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

  10. 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

  11. Primjer 1 <html> <body> <p> An image: <img src="constr4.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>

  12. Primjer 2 <html> <body> <p> An image from another folder: <img src="/images/netscape.gif" width="33" height="32"> </p> <p> An image from W3Schools: <img src="http://www.w3schools.com/images/ie.gif"> </p> </body> </html>

  13. 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

  14. 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

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

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

  17. Primjer 3 <html> <body background="background.jpg"> <h3>Image Background</h3> <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>

  18. 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) Primjer dobivanja boja kombiniranjem triju osnovnih boja

  19. 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

  20. 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.

  21. 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 ;

  22. 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 &nbsp;

  23. 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.w3schools.com/ target="_blank">Visit W3Schools!</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.w3schools.com/html_links.asp#tips"> Jump to the Useful Tips Section</a> <a href="#tips">Jump to the Useful Tips Section</a>

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

  25. 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>

  26. 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>

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

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

  29. Primjer 5 <html> <body> <p> This is a mail link: <a href="mailto:someone@microsoft.com?subject=Hello%20again"> 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. </p> </body> </html>

  30. 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

  31. 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.

  32. HTML okviri

  33. 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>

  34. 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>

  35. 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> </frameset> </html>

  36. 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> </frameset> </html> • Atribut noresize se koristi kada ne želimo da korisnik može mijenjati veličinu okvira povlačenjem okvira.

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

  38. 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>

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

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

  41. Naslovi u tabeli • Naslov se definira tagom <th>

  42. 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 (&nbsp;)

  43. Tagovi za oblikovanje tabela

More Related