Top Banner
Izborna informatika III. Gimnazija Osijek
26

Uvod u HTML

Jan 31, 2016

Download

Documents

Nidzixlogix

HTML introduction
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Uvod u HTML

Izborna informatikaIII. Gimnazija Osijek

Page 2: Uvod u HTML
Page 3: Uvod u HTML

HTML 1991

HTML 2.0 1995

HTML 3.2 1997

HTML 4.01 1999

XHTML 2000

HTML5 2014

Page 4: Uvod u HTML
Page 5: Uvod u HTML
Page 6: Uvod u HTML

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
Page 8: Uvod u HTML

HTML tagovi – blok ili linijski elementi

<h1><p><ul><table>

<b><td><a><img>

Page 9: Uvod u HTML

<h1>, <h2>, <h3>... <p> <a> <img> <div>

Page 10: Uvod u HTML

<!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
Page 12: Uvod u HTML
Page 13: Uvod u HTML
Page 14: Uvod u HTML

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

<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
Page 17: Uvod u HTML
Page 18: Uvod u HTML
Page 19: Uvod u HTML

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

Textarea tag

<textarea rows="10"></textarea>

Page 21: Uvod u HTML
Page 22: Uvod u HTML

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

Neki od novih elemenata

<header>, <footer>, <article>, <section>

<audio>, <video>

<svg>, <canvas>

Page 24: Uvod u HTML

Novi input elementi

Page 25: Uvod u HTML
Page 26: Uvod u HTML

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