stella sajčić 04.12.2013
DESCRIPTION
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 - PowerPoint PPT PresentationTRANSCRIPT
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 elementa3. 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 utkivima dupina, te ima dugoročan učinak na populaciju (smanjenjereproduktivne sposobnost, smanjenja imuniteta i pojave bolesti).</body></html>
Uređivanje teksta
Za naslove, podnaslove koristimo naredbe <h1>, <h2> ...
Stilovi
<b> podebljano </b> podebljano <i> ukošeno </i> ukošeno <u> podcrtano </u> podcrtano
<p> novi odlomak </p> <br/> novi red
2. Zadatak
Marija nas je zamolila da joj postojeći tekst izmjenimo na sljedeći način: “Ugroženost dupinaS 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”>
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)
<ul><li>Prvi red </li><li>Drugi red </li><li>Treći red </li> </ul>
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.
<nav>
<a href="#">Početna</a>
<a href="#">Novosti</a>
<a href="#">Zanimljivosti</a>
<a href="#">Autor</a>
<a href="#">Kontakt</a>
</nav>
4.2.
<footeer> Više informacija možete potražiti na
<a href=„http://hr.wikipedia.org/wiki/Oceanski_dupini” >Wikipediji</a>
</footer>
4.3.
<img src=“Dupini.jpg”/>
<img src=“Dupini2.jpg”/>
Uvod u CSS - Oblikovanje stranice
Stilski jezik Pozivanje css datoteke pišemo ispod
<head> naredbe
<style type="text/css"> ... </style>
Ime taga {nakon svake naredbe ide ;
}
PrimjerPromjeni pozadinu <nav> i <footer> u sivu boju,a <body> umetni sliku “pozadina.jpg”
<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 obrubavelič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 ga ako označujemo više naredbi s
više atributa
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 “text-align: 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
CSSnav, footer{background-color:silver;margin-left:50px;margin-right:50px;text-align:center;}
#prvi_id{text-align:center;}
Email: [email protected]
HVALA NA PAŽNJI