Slike.

Презентација на тему: "Slike."— Транскрипт презентације:

1 Slike

2 Uz odgovarajuće slike je svaki tekst mnogo jasniji i ljepši, zar ne
Uz odgovarajuće slike je svaki tekst mnogo jasniji i ljepši, zar ne?  Vrijeme je da naučimo kako da našu stranicu obogatimo i tim sadržajem. Napravite novi folder unutar foldera MojSajt i nazovite ga slike. U tom folderu čuvaćete sve slike koje se nađu na vašoj stranici odn. sajtu. Npr. u folderu slike sačuvaćemo sliku pod nazivom webdesign.png. Kada ste to uradili, vaš trenutni sadržaj foldera MojSajt je ovakav:

3 Ući ćete u vaš fajl index. html putem vašeg code editor-a
Ući ćete u vaš fajl index.html putem vašeg code editor-a. Da biste umetnuli sliku koristićete <img> tag, koji nema svog zatvarajućeg para. Na mjestu gdje želite da postavite sliku upišite sljedeće: <img src="slike/webdesign.png"/> Putanja do slike U prikazanom slučaju, slika će na stranici biti ispod naslova, paragrafa i linka jer je img tag postavljen ispod h1, p, a i br taga.

4 Sada vaša stranica izgleda ovako:

5 Vrijeme je da sliku koja je na vašoj web stranici stilizujemo uz pomoć CSS-a. Napišite sljedeće i pratite izmjene na stranici. Width vrijednost određuje širinu a height visinu slike. Pomoću border vrijednosti definisali smo okvir slike. 2px je vrijednost border atributa i odnosi se na debljinu okvira, solid na stil, a white na njegovu boju. Border-radius je zaoblio ivice okvira.

6 Vaša stranica sada ovako izgleda.

7 Ne samo tekst, možemo linkovati i sliku i to tako što img tag umetnemo između otvorenog i zatvorenog a taga: Klikom na sliku ona će nas odvesti na sajt Slike su veoma bitan element svakog sajta, i o njima ćete još mnogo toga učiti. Za početak je dobro da zapamtite ono što smo ovdje pomenuli.