Uvod u HTML
Post on 31-Jan-2016
252 Views
Preview:
DESCRIPTION
Transcript
Izborna informatikaIII. Gimnazija Osijek
HTML 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML5 2014
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
HTML tagovi – blok ili linijski elementi
<h1><p><ul><table>
<b><td><a><img>
<h1>, <h2>, <h3>... <p> <a> <img> <div>
<!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>
Pomoću editora otvorite index.html i nakon elementa <img> dodajte
Tri kratka paragrafa teksta
Pomoću tagova za formating oblikujte tekst
<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:username@gmail.com">Send
mail</a>
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!">
Textarea tag
<textarea rows="10"></textarea>
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
Neki od novih elemenata
<header>, <footer>, <article>, <section>
<audio>, <video>
<svg>, <canvas>
Novi input elementi
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
top related