320 likes | 500 Views
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
E N D
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 naredbematerijali 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>
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 uzrokaugrož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> 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 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”> • 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>
Rub ili okvir (border) • Border: blacksolid5px; 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 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 • 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: sajcic.stella@gmail.com