Hyper Text Markup Language

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) 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 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 <h1> do <h6> <h1> Ovo je naslov </h1> <h2> Ovo je naslov </h2> <h3> Ovo je nsalov </h3> <h4> Ovo je naslov </h4> <h5> Ovo je naslov </h5> <h6> Ovo je naslov </h6>

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 <br> se koristi kada želimo prijeći u slijedeći redak, a ne i u novi odlomak <p> Ovo <br> je odlomak <br> sa prelaskom u novi red. </p>

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

Tag Description <html> Definira HTML dokument <body> Definira tjelo dokumenta <h1> to <h6> Definira naslove od 1 do 6 <p> Definira paragraf <br> 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 moja prva web stranica. <b> Ovaj tekst je podebljan </b> </body> </html>

Primjer 2) <html> <head>
<title> Jednostavan HTML dokument </title> </head> <body> <H1> HTML dokument </H1> 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=" W3Schools!</a> </body> </html>

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> <u> Izbjegavati. Use styles instead

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 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 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="constr4.gif" width="144" height="50"> </p> A moving image: <img src="hackanm.gif" width="48" height="48"> Note that the syntax of inserting a moving image is no different from that of a non-moving image. </body> </html>

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

Svi postavljaju boju pozadine u crnu
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)"> <body bgcolor="black"> Svi postavljaju boju pozadine u crnu

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="

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> This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. </body> </html>

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

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>

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 Color HEX Color RGB #000000 rgb(0,0,0) #FF0000 rgb(255,0,0) #00FF00 rgb(0,255,0) #0000FF rgb(0,0,255) #FFFF00 rgb(255,255,0) #00FFFF rgb(0,255,255) #FF00FF rgb(255,0,255) #C0C0C0 rgb(192,192,192) #FFFFFF rgb(255,255,255) Primjer dobivanja boja kombiniranjem triju osnovnih boja

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
Većina modernih monitora može prikazati barem različitih boja.

000000 000033 000066 000099 0000CC 0000FF 003300 003333 003366 003399 0033CC 0033FF 006600 006633 006666 006699 0066CC 0066FF 009900 009933 009966 009999 0099CC 0099FF 00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF 00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF 330000 330033 330066 330099 3300CC 3300FF 333300 333333 333366 333399 3333CC 3333FF 336600 336633 336666 336699 3366CC 3366FF 339900 339933 339966 339999 3399CC 3399FF 33CC00 33CC33 33CC66 33CC99 33CCCC 33CCFF 33FF00 33FF33 33FF66 33FF99 33FFCC 33FFFF 660000 660033 660066 660099 6600CC 6600FF 663300 663333 663366 663399 6633CC 6633FF 666600 666633 666666 666699 6666CC 6666FF 669900 669933 669966 669999 6699CC 6699FF 66CC00 66CC33 66CC66 66CC99 66CCCC 66CCFF 66FF00 66FF33 66FF66 66FF99 66FFCC 66FFFF 990000 990033 990066 990099 9900CC 9900FF 993300 993333 993366 993399 9933CC 9933FF 996600 996633 996666 996699 9966CC 9966FF 999900 999933 999966 999999 9999CC 9999FF 99CC00 99CC33 99CC66 99CC99 99CCCC 99CCFF 99FF00 99FF33 99FF66 99FF99 99FFCC 99FFFF CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF CC3300 CC3333 CC3366 CC3399 CC33CC CC33FF CC6600 CC6633 CC6666 CC6699 CC66CC CC66FF CC9900 CC9933 CC9966 CC9999 CC99CC CC99FF CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF FF0000 FF0033 FF0066 FF0099 FF00CC FF00FF FF3300 FF3333 FF3366 FF3399 FF33CC FF33FF FF6600 FF6633 FF6666 FF6699 FF66CC FF66FF FF9900 FF9933 FF9966 FF9999 FF99CC FF99FF FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF

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 ć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 ' (does not work in IE) '

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 stranica, slika, zvuk, film i sl.) na web-u Sintaksa je: <a href="url">Tekst koji će biti prikazan u browseru</a> <a href= 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=" Jump to the Useful Tips Section</a> <a href="#tips">Jump to the Useful Tips Section</a>

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 target attribute of a link to "_blank", the link will open in a new window. </p> </body> </html>

<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> <h2>Chapter 3</h2> <h2><a name="C4">Chapter 4</a></h2> <h2>Chapter 5</h2> <h2>Chapter 6</h2> <h2>Chapter 7</h2> <h2>Chapter 8</h2>

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

Primjer 5 <html> <body> <p> This is a mail link:
<a 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. </body> </html>

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="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
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="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="frame_a.htm"> <frame src="frame_b.htm"> <frame src="frame_c.htm"> </frameset> </html>

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="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="tryhtml_contents.htm"> <frame src="frame_a.htm" name="showframe"> </frameset> </html>

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

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> </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 Heading</th> </tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </table>

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> </table>

Tagovi za oblikovanje tabela
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

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

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

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

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

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>

Definicijska lista osim pojmova sadrži i njihova objašnjena
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>

Tagovi za oblikovanje liste
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>

<h4>An Unordered List:</h4> <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> </body> </html>

<h4>An Ordered List:</h4> <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> </body> </html>

Hyper Text Markup Language

Similar presentations

Presentation on theme: "Hyper Text Markup Language"— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

Hyper Text Markup Language

Similar presentations

Presentation on theme: "Hyper Text Markup Language"— Presentation transcript:

Similar presentations

About project

Feedback