Stella Sajčić 04.12.2013.

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”

http://hr.wikipedia.org/wiki/Oceansiki/Oceanski_dupini

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>

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

Stella Sajčić 04.12.2013.

Documents

Transcript of Stella Sajčić 04.12.2013.