Slike
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:
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.
Sada vaša stranica izgleda ovako:
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.
Vaša stranica sada ovako izgleda.
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 www.w3schools.com. 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.