1 / 32

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

Download Presentation

Stella Sajčić 04.12.2013.

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. Stella Sajčić 04.12.2013.

  2. Sadržaj • Web stranica • HTML 5 • HTML elementi • HTML struktura • Uređivanje teksta i stilovi • Brojčane i simboličke liste • Uvod u CSS

  3. Š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 ?

  4. 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

  5. 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>

  6. Osnovna struktura HTML dokumenta <html> <head> <title>Ime web stranice</title> </head> <body> Tekst koji će sadržavati naša web strancia </body> </html>

  7. 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”

  8. 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>

  9. Uređivanje teksta Za naslove, podnaslove koristimo naredbe <h1>, <h2> ...

  10. Stilovi • <b> podebljano </b> podebljano • <i> ukošeno </i> ukošeno • <u> podcrtano </u> podcrtano • <p> novi odlomak </p> • <br/> novi red

  11. 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).”

  12. 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>

  13. 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>

  14. 3. zadatak • Dodaj sljedeći tekst tako što ćeš tekst oblikovati na sljedeći način: • Podnaslov iznad liste je “Podjela dupina”

  15. 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>

  16. Ostalo • Linkovi na druge web stranice<a href=“povijest.html“>Povijest</a> <a href=“#”>Naslovnica</a> • Umetanje fotografija <img src=“slika.jpg”/>

  17. 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”

  18. 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”/>

  19. 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>

  20. <div> ... </div>

  21. Rub ili okvir (border) • Border: blacksolid5px; Boja obruba vrsta obruba veličina (solid – puni rub; dashed – isprekidani rub; none – bez ruba)

  22. 5. Zadatak • Slikama napravi crni isprekidajući obrub 3px, boji po želji, lijeva margina neka je 15 px, desna 10px

  23. Rješenje <style type="text/css"> img{ border: black dashed 3px; Margin-left: 15px; Margin-right:10px; } </style>

  24. 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

  25. 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”>

  26. Rješenje • CSS nav, footer{ background-color:silver; margin-left:50px; margin-right:50px; text-align:center; } #prvi_id{ text-align:center; }

  27. HVALA NA PAŽNJI Email: sajcic.stella@gmail.com

More Related