` oznake za stvaranje odvojenih elemenata na stranici. Stvorit ćemo niz `

` elemenata koji će sadržavati slike. ### Slike Jedna HTML oznaka koja ne treba završnu oznaku je `` oznaka, jer ima `src` element koji sadrži sve informacije potrebne za prikazivanje stavke na stranici. Stvorite mapu u svojoj aplikaciji pod nazivom `images` i u nju dodajte sve slike iz [mape izvornog koda](../../../../3-terrarium/solution/images); (ima 14 slika biljaka). ### Zadatak Dodajte te slike biljaka u dva stupca između oznaka ``: ```html

``` > Napomena: Spans vs. Divs. Divovi se smatraju 'blok' elementima, dok su Spans 'inline'. Što bi se dogodilo ako biste ove divove pretvorili u spanove? S ovim markupom biljke se sada prikazuju na ekranu. Izgleda prilično loše, jer još nisu stilizirane pomoću CSS-a, a to ćemo učiniti u sljedećoj lekciji. Svaka slika ima alt tekst koji će se pojaviti čak i ako ne možete vidjeti ili prikazati sliku. Ovo je važan atribut za uključivanje radi pristupačnosti. Saznajte više o pristupačnosti u budućim lekcijama; za sada zapamtite da alt atribut pruža alternativne informacije za sliku ako korisnik iz nekog razloga ne može vidjeti sliku (zbog sporog povezivanja, pogreške u src atributu ili ako korisnik koristi čitač ekrana). ✅ Jeste li primijetili da svaka slika ima isti alt tag? Je li to dobra praksa? Zašto ili zašto ne? Možete li poboljšati ovaj kod? --- ## Semantički markup Općenito, poželjno je koristiti značajan 'semantički' markup prilikom pisanja HTML-a. Što to znači? To znači da koristite HTML oznake za predstavljanje vrste podataka ili interakcije za koje su dizajnirane. Na primjer, glavni naslov na stranici trebao bi koristiti oznaku `

`. Dodajte sljedeći redak odmah ispod svoje početne oznake ``: ```html

My Terrarium

``` Korištenje semantičkog markupa, poput postavljanja naslova kao `

` i navođenja neuređenih popisa kao `
`, pomaže čitačima ekrana da se lakše kreću kroz stranicu. Općenito, gumbi bi trebali biti napisani kao `

`: ```html

``` ✅ Iako ste dodali ovaj markup na ekran, apsolutno ništa se ne prikazuje. Zašto? --- ## 🚀Izazov Postoje neki zanimljivi 'stariji' tagovi u HTML-u koji su još uvijek zabavni za isprobati, iako ne biste trebali koristiti zastarjele oznake poput [ovih oznaka](https://developer.mozilla.org/docs/Web/HTML/Element#Obsolete_and_deprecated_elements) u svom markupu. Ipak, možete li koristiti staru `` oznaku kako biste naslov h1 pomicali horizontalno? (ako to učinite, ne zaboravite je kasnije ukloniti) ## Kviz nakon predavanja [Kviz nakon predavanja](https://ff-quizzes.netlify.app/web/quiz/16) ## Pregled i samostalno učenje HTML je 'provjereni i pouzdani' sustav gradnje koji je pomogao izgraditi web kakav danas poznajemo. Naučite malo o njegovoj povijesti proučavajući stare i nove oznake. Možete li shvatiti zašto su neke oznake zastarjele, a neke dodane? Koje bi oznake mogle biti uvedene u budućnosti? Saznajte više o izradi stranica za web i mobilne uređaje na [Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-77807-sagibbon). ## Zadatak [Vježbajte svoj HTML: Izradite maketu bloga](assignment.md) --- **Odricanje od odgovornosti**: Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane ljudskog prevoditelja. Ne preuzimamo odgovornost za bilo kakva nesporazuma ili pogrešna tumačenja koja proizlaze iz korištenja ovog prijevoda.