uvod u html
DESCRIPTION
HTML introductionTRANSCRIPT
![Page 1: Uvod u HTML](https://reader036.vdocuments.pub/reader036/viewer/2022082215/5695d2721a28ab9b029a7903/html5/thumbnails/1.jpg)
Izborna informatikaIII. Gimnazija Osijek
![Page 2: Uvod u HTML](https://reader036.vdocuments.pub/reader036/viewer/2022082215/5695d2721a28ab9b029a7903/html5/thumbnails/2.jpg)
![Page 3: Uvod u HTML](https://reader036.vdocuments.pub/reader036/viewer/2022082215/5695d2721a28ab9b029a7903/html5/thumbnails/3.jpg)
HTML 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML5 2014
![Page 4: Uvod u HTML](https://reader036.vdocuments.pub/reader036/viewer/2022082215/5695d2721a28ab9b029a7903/html5/thumbnails/4.jpg)
![Page 5: Uvod u HTML](https://reader036.vdocuments.pub/reader036/viewer/2022082215/5695d2721a28ab9b029a7903/html5/thumbnails/5.jpg)
![Page 6: Uvod u HTML](https://reader036.vdocuments.pub/reader036/viewer/2022082215/5695d2721a28ab9b029a7903/html5/thumbnails/6.jpg)
opis stranice, ključne riječi (za serverske robote) koje pomažu bržem pronalaženju stranice, naznaka vlasnika stranice, autora stranice
nevidljivi za posjetioca stranice
![Page 7: Uvod u HTML](https://reader036.vdocuments.pub/reader036/viewer/2022082215/5695d2721a28ab9b029a7903/html5/thumbnails/7.jpg)
![Page 8: Uvod u HTML](https://reader036.vdocuments.pub/reader036/viewer/2022082215/5695d2721a28ab9b029a7903/html5/thumbnails/8.jpg)
HTML tagovi – blok ili linijski elementi
<h1><p><ul><table>
<b><td><a><img>
![Page 9: Uvod u HTML](https://reader036.vdocuments.pub/reader036/viewer/2022082215/5695d2721a28ab9b029a7903/html5/thumbnails/9.jpg)
<h1>, <h2>, <h3>... <p> <a> <img> <div>
![Page 10: Uvod u HTML](https://reader036.vdocuments.pub/reader036/viewer/2022082215/5695d2721a28ab9b029a7903/html5/thumbnails/10.jpg)
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div class="content">
<h1>My first heading</h1>
<p>My first<a href="http://www.w3schools.com">paragraf</a>.</p>
<img src="w3schools.jpg" width="104" height="142"></div>
</body>
</html>
![Page 11: Uvod u HTML](https://reader036.vdocuments.pub/reader036/viewer/2022082215/5695d2721a28ab9b029a7903/html5/thumbnails/11.jpg)
![Page 12: Uvod u HTML](https://reader036.vdocuments.pub/reader036/viewer/2022082215/5695d2721a28ab9b029a7903/html5/thumbnails/12.jpg)
![Page 13: Uvod u HTML](https://reader036.vdocuments.pub/reader036/viewer/2022082215/5695d2721a28ab9b029a7903/html5/thumbnails/13.jpg)
![Page 14: Uvod u HTML](https://reader036.vdocuments.pub/reader036/viewer/2022082215/5695d2721a28ab9b029a7903/html5/thumbnails/14.jpg)
Pomoću editora otvorite index.html i nakon elementa <img> dodajte
Tri kratka paragrafa teksta
Pomoću tagova za formating oblikujte tekst
![Page 15: Uvod u HTML](https://reader036.vdocuments.pub/reader036/viewer/2022082215/5695d2721a28ab9b029a7903/html5/thumbnails/15.jpg)
<a href="http://www.google.hr">This is a link</a>
<a href="about.html">This is a link</a>
<a href="#top">Go to top</a>
<a href="mailto:[email protected]">Send
mail</a>
![Page 16: Uvod u HTML](https://reader036.vdocuments.pub/reader036/viewer/2022082215/5695d2721a28ab9b029a7903/html5/thumbnails/16.jpg)
![Page 17: Uvod u HTML](https://reader036.vdocuments.pub/reader036/viewer/2022082215/5695d2721a28ab9b029a7903/html5/thumbnails/17.jpg)
![Page 18: Uvod u HTML](https://reader036.vdocuments.pub/reader036/viewer/2022082215/5695d2721a28ab9b029a7903/html5/thumbnails/18.jpg)
![Page 19: Uvod u HTML](https://reader036.vdocuments.pub/reader036/viewer/2022082215/5695d2721a28ab9b029a7903/html5/thumbnails/19.jpg)
Input types
<input type="text">
<input type="password">
<input type="submit" value="Send">
<input type="radio" name="sex" value="male">
<input type="checkbox" name="vehicle" value="Bike">
<input type="button" value="Click me!">
![Page 20: Uvod u HTML](https://reader036.vdocuments.pub/reader036/viewer/2022082215/5695d2721a28ab9b029a7903/html5/thumbnails/20.jpg)
Textarea tag
<textarea rows="10"></textarea>
![Page 21: Uvod u HTML](https://reader036.vdocuments.pub/reader036/viewer/2022082215/5695d2721a28ab9b029a7903/html5/thumbnails/21.jpg)
![Page 22: Uvod u HTML](https://reader036.vdocuments.pub/reader036/viewer/2022082215/5695d2721a28ab9b029a7903/html5/thumbnails/22.jpg)
1. Otvorite folder example1 i u editoru otvorite index.html, about.html i contact.html
1. U about.html unutar CONTENT dijela ubacite
Sliku koju ćete skinuti u folder assets/img Tablicu s 3 kolone i 4 reda U navigaciju link na Google U contact.html dodajte elemente za ime, prezime, tekst poruke i slanje poruke
![Page 23: Uvod u HTML](https://reader036.vdocuments.pub/reader036/viewer/2022082215/5695d2721a28ab9b029a7903/html5/thumbnails/23.jpg)
Neki od novih elemenata
<header>, <footer>, <article>, <section>
<audio>, <video>
<svg>, <canvas>
![Page 24: Uvod u HTML](https://reader036.vdocuments.pub/reader036/viewer/2022082215/5695d2721a28ab9b029a7903/html5/thumbnails/24.jpg)
Novi input elementi
![Page 25: Uvod u HTML](https://reader036.vdocuments.pub/reader036/viewer/2022082215/5695d2721a28ab9b029a7903/html5/thumbnails/25.jpg)
![Page 26: Uvod u HTML](https://reader036.vdocuments.pub/reader036/viewer/2022082215/5695d2721a28ab9b029a7903/html5/thumbnails/26.jpg)
Otvorite folder example2
• U index.html ubacite strukturu tagova kao na slici • U header dio ubacite <h1> naslov• U nav dio ubacite listu s navigacijom (example1) • U section dio ubacite naslov <h2> i kontakt formu ime, prezime, datum, poruka i submit • U article dio ubacite naslov <h2>, sliku s interneta, paragraf<p> i link na Google • U footer dio ubacite informacije o autoru