Transcript HTML5
Stella Sajčić
04.12.2013.
Sadržaj
Web stranica
HTML 5
HTML elementi
HTML struktura
Uređivanje teksta i stilovi
Brojčane i simboličke liste
Uvod u CSS
Što je to web stranica ?
Web stranica je spoji teksta, slike, animacije i zvuka
Internet danas broji na milijarde web stranica i
svakim danom ih je više i više
Primjer ?
HTML5
„jezik“ koje se koristi za izradu web stranica
Obične tekstualne datoteke
HTML elementi se sastoje od tagova koji su zapravo
naredbe
materijali za vježbu: http://sdrv.ms/1g4lp4Q
O HTML elementima
Html elementi se sastoje od 3 osnovna dijela:
1. tag koji otvara neki element
2. sadržaj elementa
3. tag koji zatvara taj element
<p> Ovdje učimo HTML </p>
Osnovna struktura HTML dokumenta
<html>
<head>
<title>Ime web stranice</title>
</head>
<body>
Tekst koji će sadržavati naša web strancia
</body>
</html>
<html>
<head>
<title>
<body>
<header>
<footer>
<nav>
<article>
<video>
....
1. Zadatak
Marija želi sljedeći tekst na web stranici:
“ S obzirom na malu površinu i zatvorenost Jadranskog mora, te velik
pritisak stanovništva, dupini u Jadranu suočeni su s više uzroka
ugroženosti.
Zagađenje mora, koje dolazi s kopna u obliku različitih otrovnih tvari,
procesom nakupljanja u organizmu u velikim količinama gomila se u
tkivima dupina, te ima dugoročan učinak na populaciju (smanjenje
reproduktivne sposobnost, smanjenja imuniteta i pojave bolesti).”
Unesite tekst unutar naredbe <body>
Ime web stranice je “O dupinima”
Rješenje:
<html>
<head>
<title> O dupinima</title>
</head>
<body>
S obzirom na malu površinu i zatvorenost Jadranskog mora, te velik
pritisak stanovništva, dupini u Jadranu suočeni su s više uzroka ugroženosti.
Zagađenje mora, koje dolazi s kopna u obliku različitih otrovnih tvari,
procesom nakupljanja u organizmu u velikim količinama gomila se u
tkivima dupina, te ima dugoročan učinak na populaciju (smanjenje
reproduktivne sposobnost, smanjenja imuniteta i pojave bolesti).
</body>
</html>
Uređivanje teksta
Za naslove, podnaslove koristimo naredbe <h1>, <h2> ...
Stilovi
<b> podebljano </b>
<i> ukošeno </i>
<u> podcrtano </u>
<p> novi odlomak </p>
<br/> novi red
podebljano
ukošeno
podcrtano
2. Zadatak
Marija nas je zamolila da joj postojeći tekst
izmjenimo na sljedeći način:
“Ugroženost dupina
S obzirom na malu površinu i zatvorenost Jadranskog mora, te velik
pritisak stanovništva, dupini u Jadranu suočeni su s više uzroka
ugroženosti.
Zagađenje mora, koje dolazi s kopna u obliku različitih otrovnih
tvari, procesom nakupljanja u organizmu u velikim količinama
gomila se u tkivima dupina, te ima dugoročan učinak na populaciju
(smanjenje reproduktivne sposobnost, smanjenja imuniteta i pojave
bolesti).”
Rješenje
<html>
<head>
<title>O dupinima</title>
</head>
<body>
<h1>Ugroženost dupina</h1>
<p>S obzirom na malu površinu i zatvorenost Jadranskog mora, te velik
pritisak stanovništva, dupini u Jadranu suočeni su s <b>više uzroka
ugroženosti.</b></p>
<p>Zagađenje mora, koje dolazi s kopna <u>u obliku različitih
otrovnih tvari</u>, procesom nakupljanja u organizmu u velikim
količinama gomila se u tkivima dupina, te ima dugoročan učinak na
populaciju (<i>smanjenje reproduktivne sposobnost, smanjenja
imuniteta i pojave bolesti</i>).</p>
</body>
</html>
Brojčane i simboličke liste
Postoje:
<ul> ... </ul>
<ol> ... </ol>
<ul type=“Neki simbol”>
<ul>
<li>Prvi red </li>
<li>Drugi red </li>
<li>Treći red </li>
</ul>
A – velika slova
a – mala slova
I – rimski brojevi
i – mali rimski brojevi
Postoji još: kružić (circle), ispunjeni kružić (disc) i kvadratić (square)
3. zadatak
Dodaj sljedeći tekst tako što ćeš tekst oblikovati na
sljedeći način:
Podnaslov iznad liste je “Podjela dupina”
Rješenje
<h2> Podjela dupina </h2>
<ul type="square">Dobri dupini klasificiraju se kao:
<li> Mammalia (sisavci), </li>
<li> Cetacea (kitovi), </li>
<li> Odontoceti (kitovi zubani), </li>
<li> Delphinidae (dupini), </li>
<li> Tursiops truncatus (Montague 1894) – dobri dupin</li>
</ul>
Ostalo
Linkovi na druge web stranice
<a href=“povijest.html“>Povijest</a>
<a href=“#”>Naslovnica</a>
Umetanje fotografija
<img src=“slika.jpg”/>
4. Zadatak
Napravi navigaciju iznad naslova “Ugroženost dupina”
koja će sadržavati sljedeće elemente: Početka, Novosti,
Zanimljivosti, Autor, Kontakt
Sljedeći tekst napišite u html dokumentu stavite ga unutar
<footer> naredbe:
“Više informacija možete potražiti na
http://hr.wikipedia.org/wiki/Oceansiki/Oceanski_dupini „
web stranicu pretvorite kao link i imenujte ga “Wikipediji”
Umetni slike “Dupini2.jpg”i “Dupini1.jpg” prije podnaslova
“Podjela dupina”
Rješenje
4.1.
4.3.
<nav>
<a href="#">Početna</a>
<a href="#">Novosti</a>
<a href="#">Zanimljivosti</a>
<a href="#">Autor</a>
<a href="#">Kontakt</a>
</nav>
<img src=“Dupini.jpg”/>
<img src=“Dupini2.jpg”/>
4.2.
<footeer> Više informacija možete potražiti na
<a href=„http://hr.wikipedia.org/wiki/Oceanski_dupini” >Wikipediji</a>
</footer>
Uvod u CSS - Oblikovanje stranice
Stilski jezik
Pozivanje css datoteke pišemo ispod <head> naredbe
<style type="text/css"> ... </style>
Primjer
Promjeni pozadinu <nav> i <footer> u sivu boju,a
<body> umetni sliku “pozadina.jpg”
Ime taga {
nakon svake naredbe ide ;
}
<style type=“text/css”>
Nav, footer{
Background-color: silver;
}
Body {
Background-image: url (“pozadina.jpg”);
}
</style>
<div> ... </div>
Rub ili okvir (border)
Border: black solid 5px;
Boja obruba
vrsta obruba
veličina
(solid – puni rub;
dashed – isprekidani rub;
none – bez ruba)
5. Zadatak
Slikama napravi crni isprekidajući obrub 3px, boji
po želji, lijeva margina neka je 15 px, desna 10px
Rješenje
<style type="text/css">
img{
border: black dashed 3px;
Margin-left: 15px;
Margin-right:10px;
}
</style>
Za one koji žele znati više
#id ime { ... }
Najbolje
ga je koristimo kada imamo samo jedan
atribut
.class ime { ... }
Koristimo
atributa
ga ako označujemo više naredbi s više
Primjer
U kodu smo napisali da <nav> i <footer> imaju
istu marginu, a sada preoblikuj da <nav> nije
centrirana
Pomoć!
U kodu smo stavili da <nav> i <footer> imaju “textalign: center”, da bi rješili zadatak moramo <footeru>
dodati ID ( npr. ime nek mu bude “prvi_ID” ) kojem bi
označavali da je samo on centriran
<footer id=“prvi_ID”>
Rješenje
CSS
nav, footer{
background-color:silver;
margin-left:50px;
margin-right:50px;
text-align:center;
}
#prvi_id{
text-align:center;
}
HVALA NA PAŽNJI
Email: [email protected]