Embed Size (px)
DESCRIPTION
Tutorijal HTML
Citation preview
HTML Elementi: HTML element je sve od pocetne oznake za tag do zavrsne oznake.
Ugnežđeni HTML elementi HTML dokumenata se sastoje đ h <!DOCTYPE html> <html> <body> <p>This is my first paragraph.</p> </body> </html> 3html elementa HTML, body i p
The <p> element: <p> E f š p k E p č z k <P> z v š k z k < / p >
The <body> element: <body> <p>This is my first paragraph.</p> </body> < y> E f š k O v c E p č z k <body> z v š k z k < / y >. u ov om primeru body element ima jedan ugnezdjen p element.
The <html> element: <html> <body> <p>This is my first paragraph.</p> </body> </html> html element predstavlja ceo HTML dokument u kome ce vidljivi deo biti sve ono st se nalazi u <body></body>
Prazni HTML elementi <br/> - p z p z š z č k z k
HTML Atributi: p h D v z p k,v c p …
Atributi se uvek navedeni u startu tagu. Atributi dolaze u paru / v k š : = " vrednost" Uv k v v z z k v v “ v ”
Headings - naslovi <h1> do <h6> (naslovi)- u okviru koga je moguce ubacivati i <p> tag
cineci heading tag kao blok sistem. Npr Koristite HTML zaglavlja samo za naslove. Ne koristite naslove da tekst bude veliki ili podebljan. Pretrazivaci koriste naslove za orjentaciju za strukturu i sadrzaj stranice. <h3> Naslov <p> Ovo je naslov<p> </h3> h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> <h5>This is heading 5</h5> <h6>This is heading 6</h6>
Lines – linije <hr> Oznaka kreira horizontalnu liniju u HTML stranice. hr k z odvajanje sadrzaja: <p>The hr tag defines a horizontal rule:</p> <hr><p>This is a paragraph</p> <hr><p>This is a paragraph</p> <hr><p>This is a paragraph</p>
Comments – komentari Komentari mogu biti umetnuti u HTML da bi bili v š č v z v K p v č nisu prikazani . <!-- This is a comment -->
Paragraphs – Pasusi Paragrafi su definisani sa <p> tagom. <p>This is a paragraph.</p> This is a paragraph. <p>This is a paragraph.</p> This is a paragraph. <p>This is a paragraph.</p> This is a paragraph. <br> - break- pauza koja prebacuje nastavak reci u drugi red . Moze se postaviti bilo gde u recenici. <p>This is<br>a para<br>graph with line breaks</p> This is a para graph with line breaks
Formatting Tags – formatiranje tagova
Formatiranje teksta <p><b>This text is bold</b></p> <p><strong>This text is strong</strong></p> <p><em>This text is emphasized</em></p> <p><i>This text is italic</i></p> <p><small>This text is small</small></p> <p>This is<sub> subscript</sub> and <sup>superscript</sup></p>
<b> Bold A <i> Italic A <u> Underline A <s> Strikeout A <small> Small A
<sub> Subscript AA
<sup> Superscript AA
<del> Delete A Preformatted text - <pre> <pre> This is preformatted text. It preserves both spaces and line breaks. </pre> <p>The pre tag is good for displaying computer code:</p> <pre> for i = 1 to 10 print i next i </pre>
"Computer output" tags - <code>Computer code</code> <br> <kbd>Keyboard input</kbd> <br> <samp>Sample text</samp> <br> <var>Computer variable</var> <br> Address – adresa <address> Written by W3Schools.com<br> <a href="mailto:[email protected]">Email us</a><br> Address: Box 564, Disneyland<br> Phone: +12 34 56 78 </address> Abbreviations and acronyms – skracenice i akronimi <p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p> <p>Can I get this <abbr title="as soon as possible">ASAP</abbr>?</p> <p>The title attribute is used to show the spelled-out version when holding the mouse pointer over the acronym or abbreviation.</p>
<a =””></ > Kada se misem predje preko akronima u donjem levom uglu pretrazivaca pokaze se pun naziv.
Quotations – znaci navoda <q> (navodnici) – <p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q>We hope they succeed.</p> WWF's goal is to: "Build a future where people live in harmony with nature." We hope they succeed. Z c v c z z v z k p k <p ="f ">, <p =" ",…> <q cite="URL"> atribut cite nije vidljiv u browseru, samo daje informaciju.
<blockqote> - f š k k c z zv <p>Here is a quote from WWF's website:</p> <blockquote cite="http://www.worldwildlife.org/who/index.html"> For 50 years, WWF has been protecting the f f h w ’ c v z , WWF w k in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally. </blockquote>
Here is a quote from WWF's website:
For 50 years, WWF h p c h f f h w ’ c v organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
<em>Emphasized text</em><br> <strong>Strong text</strong><br> <dfn>Definition term</dfn><br> <code>A piece of computer code</code><br> <samp>Sample output from a computer program</samp><br> <kbd>Keyboard input</kbd><br> <var>Variable</var>
Links – linkovi
HTML <a> tag definise hiperlink. Hiperveza (ili veza ) je č , p č , k na k k k i da odete na drugi dokument . N v v < >h f <a href="url">Link text</a> a a je elemenat koji definise hiperlink vezu a atribut href definise samo odrediste.
The target Attribute < =””> v c v v k target="_blank" – otvorice stranicu u novom prozoru
The id Attribute <a id="ime_linka ">pocetak linka na koji se klikne da bi se otislo</a> <a href="#ime_linka ">Ovde </a> Slika kao link: a href="default.asp"><img src="smiley.gif" alt="HTML tutorial" width="32" height="32"></a></p> Veza do lokacije na istoj strani (id attributeprimer) Link kao mail ka nekom: <p> This is an email link: <a href="mailto:[email protected]?Subject=Hello%20again"> Send Mail</a> </p> <p> <b>Note:</b> Spaces between words should be replaced by %20 to ensure that the browser will display the text properly. </p>
<head>
Definise naslov HTML dokumenta.
<base> - K < > z k v p z v UR p z v š z v v z c Base atributi:
<html> <base href="http://www.w3schools.com/images/"> <base target="_blank"> <body><img src="stickman.gif" width="24" height="39"></body> </html>
<link> f š z đ k p zv CSS-a <link rel="stylesheet" type="text/css" href="styles.css"> Attributes: <meta> - Koristite elemente <meta> v p , k č č , k k k p k <head> <meta name="description" content="Free Web tutorials"> <meta name="keywords" content="HTML,CSS,XML,JavaScript"> <meta name="author" content="Hege Refsnes"> <meta charset="UTF-8"> </head>
<title> Naslov stranice
<script> Oznaka se koristi za definisanje skripte , k š J v Sc p
<noscript> k z v z k k k k p v p v č č č k p v k - strani skriptovanje . <html> <body> <script> document.write("Hello World!") </script> <noscript>Sorry, your browser does not support JavaScript!</noscript> </body> </html>
<style> Stile oznaka se koristi za definisanje stila informacije za HTML dokumenta.
U < > v k k p č <head> <style type="text/css"> h1 {color:red;} p {color:blue;} </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>
CSS (Cascading Style Sheets) K š v Kako dodati stil informacije unutar <head> odeljku. <html> <head> <style type="text/css"> h1 {color:red;} h2 {color:blue;} p {color:green;} </style> </head> <body> <h1>All header 1 elements will be red</h1> <h2>All header 2 elements will be blue</h2> <p>All text in paragraphs will be green.</p> </body> </html> k k p v č K k p v v z k p v č , CSS-om. <a href="http://www.w3schools.com" style="text-decoration:none;">Visit W3Schools.com!</a> Link na spoljnu list stila. Kako da koristite <link> oznaku za povezivanje sa spoljnim izvorom stilizovanja. <head> <link rel="stylesheet" type="text/css" href="styles.css"> </head> SS - č :
– k k š < y > - k š < y > k <h > Spoljni - eksterni CSS fajl
Inline Styles <html> <body style="background-color:yellow;"> <h2 style="background-color:red;">This is a heading</h2> <p style="background-color:green;">This is a paragraph.</p> </body>
Style Example - Font, Color and Size <html> <body> <h1 style="font-family:verdana;">A heading</h1> <p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p> </body> </html>
Style Example - Text Alignment <h1 style="text-align:center;">Center-aligned heading</h1> <p>This is a paragraph.</p>
Internal Style Sheet <head> <style type="text/css"> body {background-color:yellow;} p {color:blue;} </style> <body> <p>Tekst plave boje</p> </body> </head>
External Style Sheet <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
Rad sa slikama <img> f š k c < > v : SR p v
N p : S k h čk c , k v z z c Savet : Da biste povezali sliku drugom dokumentu , jednostavno stavite <IMG> oznaku unutar <a> oznakama. Atributi: <img src="URL"> - <img alt="text"> - koristi da opise sliku <img height="pixels"> - visina u pikselima <img width="pixels"> - sirina u pikselima <img ismap> - predstavlja mapiranje slike sa koordinatama. Napomena ovo vazi samo ako img element ima i a element sa vazecim href atributom na internetu. <a href="http://www.uog-sumadija.com/"> <img src="http://www.uog-sumadija.com/wp-content/uploads/2012/07/logo-nov.jpg" alt="Logo" ismap> </a> Potrebna je prava adresa slike! <img usemap="#mapname"> - usemap koristi kao klijent slike sa druge internet stranice. USEMAP atribut je povezan sa imenom jednog <map> elementa ili ID atributa , i stv v z z đ < G> < p> N p :USE AP k k < > potomak jednog <a> ili <button> elementa <img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm"> <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm"> <area shape="poly" coords="124,58,8" alt="Venus" href="venus.htm"> </map> Objasnjenje: Prvi red je slika sa svojim izvorom (moze da bude slika sa nekog internet sajta), ima svoju sirinu i visinu (nije obavezno), Alternativni naziv i atribut usemap (koristi mapu) Od drugog reda pocinje mapa sa svojim imenom planetmap u okviru koga su
area (definise oblasti na slici): 1. <area shape="default|rect|circle|poly"> (definise oblike oblasti koji se obelezavaju na slici) 2. <area coords="value"> (koordinate) kod kvadrata imamo X1,X2 i Y1,Y2
kod kruga imamo X,Y, kao centar i radijus(tri koordinate) kod poly x1,y1,x2,y2,..,xn,yn
3. <area alt="text"> – elementa za alternativni naziv oblasti koju mapiramo na slici 4. <area href="URL"> – internet stranica ka kojoj idemo 5. <area target="_blank|_self|_parent|_top|framename"> - _blank Otvara povezanu dokument u
novom prozoru ili tab _self Otvara povezanu dokument u istom kad , k š k k _p O v p v z k kv č _top Otvara povezanu dokument u punom telo prozora framename Otvara povezani dokument u okviru imenu
Slika moze biti umetnuta sa kompjutera ili sa neke url adrese:
<img src="/images/stickman.gif" alt="Stickman" width="24" height="39"> <img src="http://www.w3schools.com/images/lamp.gif" alt="Lamp" width="15" height="15"> Slika moze da bude vodjica za internet adresu: <p> An image that is a link: <a href="http://www.w3schools.com"> <img src="smiley.gif" alt="Go to W3Schools!" width="42" height="42" border="0"> </a> </p>
Kreiranje mape na slici ka drugim slikama ili url <p>Click on the sun or on one of the planets to watch it closer:</p> <img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm"> <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm"> <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm"> </map> < h f=” ”> </ >
Rad sa slikama: Pozicioniranje slika, Kako da uskladi sliku unutar teksta – u HTML5 se radi iskljucivo u CSS-u
Slika pluta levo ili desno od teksta. <p> <img src="smiley.gif" alt="Smiley face" style="float:left" width="32" height="32"> A paragraph with an image. The image will float to the left of this text. </p>
<p> <img src="smiley.gif" alt="Smiley face" style="float:right" width="32" height="32"> A paragraph with an image. The image will float to the right of this text. </p> <p><b>Note:</b> Here we have used the CSS "float" property to align the image; as the align attribute is deprecated in HTML 4, and is not supported in HTML5.</p>
HTML Tables Definisane su <table> tagom Tabela je podeljena u redove (sa oznakom <TR> , v k p p k <TD> k c z " p c z ", p k < > Oz k k , k v , k , , c , ostale tabele , itd v v : - z v f c k < h> S - p k k < > mentom) Tekst u <th> elemenata su hrabri i centriran po defaultu. Tekst u <td> elemenata su redovni i levo poravnat po defaultu <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>
<h4>Table headers:</h4> <table border="1"> <tr> <th>Name</th> <th>Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> </tr> </table> <h4>Vertical headers:</h4> <table border="1"> <tr> <th>First Name:</th> <td>Bill Gates</td> </tr> <tr> <th>Telephone:</th> <td>555 77 854</td> </tr> </table> Prazne celije: <table border="1"> <tr> <td>Some text</td> <td>Some text</td> </tr> <tr> <td></td> <td>Some text</td> </tr> </table> Tabela sa NASLOVOM : <caption>title</caption> <table border="1"> <caption>Monthly savings</caption> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td>
<td>$50</td> </tr> </table>
Tagovi u sredini tabele: table border="1"> <tr> <td> <p>This is a paragraph</p> <p>This is another paragraph</p> </td> <td>This cell contains a table: <table border="1"> <tr> <td>A</td> <td>B</td> </tr> <tr> <td>C</td> <td>D</td> </tr> </table> </td> </tr> <tr> <td>This cell contains a list <ul> <li>apples</li> <li>bananas</li> <li>pineapples</li> </ul> </td> <td>HELLO</td> </tr> </table>
e i e ne <h4>Cell that spans two columns:</h4> <table border="1"> <tr> <th>Name</th> <th colspan="2">Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table> <h4>Cell that spans two rows:</h4> <table border="1"> <tr> <th>First Name:</th> <td>Bill Gates</td> </tr> <tr> <th rowspan="2">Telephone:</th> <td>555 77 854</td> </tr> <tr> <td>555 77 855</td> </tr> </table>
Table bez border linije: <h4>This table has no borders:</h4> <table> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table>
Tabele sa opcijom padding (postavljanje): <h4>Without cellpadding:</h4> <table border="1"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> <h4>With cellpadding:</h4> <table border="1" cellpadding="10"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table>
Cell spacing : <h4>Without cellspacing:</h4> <h4>With cellspacing="0":</h4> <h4>With cellspacing="10":</h4> <table border="1"> <table border="1" cellspacing="0"> <table border="1" cellspacing="10"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table>
<colgroup> <col> Oz k k đ v v z v k k kv <c p> <col span="number"> span – raspon - f š k <c > koji treba da obradi <table border="1"> <colgroup> <col span="2" style="background-color:red"> <col style="background-color:yellow"> </colgroup> <tr> <th>ISBN</th> <th>Title</th> <th>Price</th> </tr> <tr> <td>3476896</td> <td>My first HTML</td> <td>$53</td> </tr> <tr> <td>5869207</td> <td>My first CSS</td> <td>$49</td> </tr> </table>
<thead> <thead> Oznaka se koristi na p z v <thead> Element se koristi u kombinaciji sa <tbody> i <tfoot> elemenata da precizira svaki deo tabele ( zaglavlje , telo, p <thead> Oznaka moze k k k : K podgrupa jednog <table> elementa, nakon bilo <caption> i <colgroup> elemenata, a pre bilo <tbody> , <tfoot> i <tr> elementa. <head> <style type="text/css"> thead {color:green;} tbody {color:blue;} tfoot {color:red;} </style> </head> <body> <table border="1"> <thead> <tr> <th>Month</th> <th>Savings</th> </tr> </thead> <tfoot> <tr> <td>Sum</td> <td>$180</td> </tr> </tfoot> <tbody> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </tbody> </table> <p><b>Tip:</b> The thead, tbody, and tfoot elements will not affect the layout of the table by default. However, you can use CSS to style these elements.</p> </body> </html>
Pravljenje lista <ol> - ordered list (formirana lista) sa vec formiranim vrednostima pocevsi od 1 <li> - list item (stavka liste)
<li value="number"> - da vrednost pocinje od broja < =” ”> - da vrednost pocinje od broja <ol type="1|a|A|i|I"> - drednost krece od broja 1, od malog slova a, od velikog slova A, k … <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> <ol start="50"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> Za formatiranje brojeva ili tacaka HTML 5 ne podrzava atribut type pa oblikovanje mozemo raditi u CSS-u.
<ul> - Neuredjena (numericki) lista . Ima isto tag za <li> list item(stavke te liste)
<ul style="list-style-type:disc, circle , square "> - disk,krug kvadrat <h4>An Unordered List:</h4> <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> Primer umetnute-ugnezdjene liste: <h4>A list inside a list:</h4> <ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea</li> </ul> </li> <li>Milk</li> </ul>
Jos jedan primer: <h4>Lists inside a list:</h4> <ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea <ul> <li>China</li> <li>Africa</li> </ul> </li> </ul> </li> <li>Milk</li> </ul> An unorderedlist: An ordered list: List item The first list item List item The second list item List item The third list item
<dl> - definition list. < > Oz k k k c f š vk < > p vk
<h4>A Definition List:</h4> <dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl>
HTML Blocks HTML elementi mogu biti grupisani zajedno sa <div> i <span>. <div> Element HTML <div> element je blok nivo elementa k k k kontejner za grupisanje drugih HTML elemenata. < v> E p z č P v č p k z p p p <html> <body> <p>This is some text.</p> <div style="color:#0000FF"> <h3>This is a heading in a div element</h3> <p>This is some text in a div element.</p> </div> <p>This is some text.</p> </body> </html> < v> f š p k k <div> Oznaka se koristi za grupisanje blok -elemenata sa CSS-om.
<span> <p>My mother has <span style="color:blue;font-weight:bold">blue</span> eyes and my father has <span style="color:darkolivegreen;font-weight:bold">dark green</span> eyes.</p>
<span> Oznaka se koristi za grupisanje inline -elemenata u dokumentu . < p > Oz k p v z p p < p > Oz k z đ č k k k
HTML Layouts Raspored na web starnici i sam izgled je veoma bitan. <html> <body> <div id="container" style="width:500px"> <div id="header" style="background-color:#FFA500;"> <h1 style="margin-bottom:0;">Main Title of Web Page</h1></div> <div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;"> <b>Menu</b><br> HTML<br> CSS<br> JavaScript</div> <div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;"> Content goes here</div> <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;"> Copyright © W3Schools.com</div> </div> </body> </html>
HTML Forms and Input
<form> Oznaka se koristi za kreiranje HTML forme za unos podataka. form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more. A form can also contain select lists, textarea, fieldset, legend, and label elements. <input> <textarea> <button> <select> <option> <optgroup> <fieldset> <label> NAPOMENA:ne sme biti praznog prostora izmedju navodnika !!!
Savet: Koristite <label>-etiketa, element za definisanje <input> elemenata. <form> .input elements . </form> tacke predstavljaju tekst koji moze da se ubaci <form> <input></form> elemtn <input > ima atribute <input type="value">
Value: button - D f š klik misa ( uglavnom se koristi za JavaScript da aktivira isti )
checkbox – cekboks color - Defines a color picker date – definise datum datetime – datetime-local – email – file – sa Browse dugmetom hidden-Defines a hidden input field image-Defines an image as the submit button monthNew-Defines a month and year control (no time zone) numberNew-Defines a field for entering a number password-Defines a password field (characters are masked) radio-Defines a radio button rangeNew-Defines a control for entering a number whose exact value is not important (like a slider control) reset-Defines a reset button (resets all form values to default values) searchNew-Defines a text field for entering a search string submit-Defines a submit button telNew-Defines a field for entering a telephone number text-Default. Defines a single-line text field (default width is 20 characters) timeNew-Defines a control for entering a time (no time zone) urlNew - Defines a field for entering a URL weekNew-Defines a week and year control (no time zone)
TEXT area
<textarea>
<select> U <option> elementukoji se nalazi unutar <select> elementa f š se p v pc
<optgroup> < p p> S k z p h pc p Ak čk pc , p p v z h pc kš k v z k k <select> <optgroup label="Swedish Cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> </optgroup> <optgroup label="German Cars"> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </optgroup> </select>
<fieldset> <fieldset> Oznaka se koristi za grupisanje srodnih elemenata u formi. <fieldset> Oz k zv č k k p v z h Savet:<legend> f š v z <f >
Primer: Fieldset around form-data. Kako da napravite uokvirene elemenata u formi. <form> <fieldset> <legend>Personalia:</legend> Name: <input type="text"><br> Email: <input type="text"><br> Date of birth: <input type="text"> </fieldset> </form>
<label> < > f š z k z k < p > < > E č k š p z k k đ , z đ p š p v z korisnike, jer akokorisnik klikne na tekst u <label> elementa , on prebacuje kontrolu. Za atribut <label> oznake treba da bude jednak id atribut srodnih elementa da ih vezuje zajedno. <form action="demo_form.asp"> <label for="male">Male</label> <input type="radio" name="sex" id="male" value="male"><br> <label for="female">Female</label> <input type="radio" name="sex" id="female" value="female"><br><br> <input type="submit" value="Submit"> </form>
e n g i i e ni e e en i i for " atribut , ili postavljanjem element unutar <label> elementa.
Input Examples Radio buttons <form action=""> <input type="radio" name="sex" value="male">Male<br> <input type="radio" name="sex" value="female">Female </form> Checkboxes <form action=""> <input type="checkbox" name="vehicle" value="Bike">I have a bike<br> <input type="checkbox" name="vehicle" value="Car">I have a car </form> Simple drop-down list <form action=""> <select name="cars">
<option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option>
</select> </form>
Text area <textarea rows="10" cols="30"> The cat was playing in the garden. </textarea>
Create a button <form action=""> <input type="button" value="Hello world!"> </form>
Form Examples O r c s e s ni i i g e P š i <form name="input" action="html_form_action.asp" method="get"> First name: <input type="text" name="FirstName" value="Mickey"><br> Last name: <input type="text" name="LastName" value="Mouse"><br> <input type="submit" value="Submit"> </form> <p>If you click the "Submit" button, the form-data will be sent to a page called "html_form_action.asp".</p>
Forme sa checkbox opcijom: <form name="input" action="html_form_action.asp" method="get"> <input type="checkbox" name="vehicle" value="Bike">I have a bike<br> <input type="checkbox" name="vehicle" value="Car">I have a car <br><br> <input type="submit" value="Submit"> </form> <p>If you click the "Submit" button, the form-data will be sent to a page called "html_form_action.asp".</p>
Obrazac (Form) sa radio buttons opcijom : <form name="input" action="html_form_action.asp" method="get"> <input type="radio" name="sex" value="male">Male<br> <input type="radio" name="sex" value="female">Female<br> <input type="submit" value="Submit"> </form> <p>If you click the "Submit" button, the form-data will be sent to a page called "html_form_action.asp".</p>
Poslati e-mail sa obrazsca <h3>Send e-mail to [email protected]:</h3> <form action="MAILTO:[email protected]" method="post" enctype="text/plain"> Name:<br> <input type="text" name="name" value="your name"><br> E-mail:<br> <input type="text" name="mail" value="your email"><br> Comment:<br> <input type="text" name="comment" value="your comment" size="50"><br><br> <input type="submit" value="Send"> <input type="reset" value="Reset"> </form>
Novo u HTML-u 5 su sledeci elementi : <datalist> <datalist> Oznaka navodi spisak unapred definisanih opcija za <input> elemente. < > k z " A p " f kc < p > K c v p p k p f h pc k š unos podataka. K p k < p > v z < > <form action="demo_form.asp" method="get"> <input list="browsers" name="browser"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> <input type="submit"> </form> <p><b>Note:</b> The <datalist> tag is not supported in IE and Safari.</p> <datalist>New Specifies a list of pre-defined options for input controls <keygen>New Defines a key-pair generator field (for forms) <output>New Defines the result of a calculation
HTML Iframes <iframe src="URL"></iframe> URL adre p k c stranice. Atributi za visinu i sirinu se koriste za prikaz iframe . Ov k đ p k z p c k " 80 %" <iframe src="URL" width="value" height=" value "></iframe> F A đ c p k z (border-granica) oko iframe . Podesite vrednost atributa na " 0" da biste uklonili granice. <iframe src="URL" frameborder="0"></iframe>
Koristiti iframe kao meta za vezu <iframe src="demo_iframe.htm" name="iframe_a"></iframe> <p><a href="http://www.w3schools.com" target="iframe_a">W3Schools.com</a></p> <p>< >N :</ > Z k v f ,v z v f </p>
HTML Colors
HTML Color Names
HTML Entities
