` oznake za stvaranje zasebnih 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 element `src` 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. Divs se smatraju 'blok' elementima, a Spans 'inline'. Što bi se dogodilo da ove divove pretvorite u spanove? S ovim markupom biljke se sada prikazuju na ekranu. Izgledaju prilično loše, jer još nisu stilizirane pomoću CSS-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 atribut alt pruža alternativne informacije za sliku ako korisnik iz nekog razloga ne može vidjeti sliku (zbog sporog povezivanja, pogreške u atributu src 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čajne 'semantike' 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 korištenja `

` za naslove i `
` za neuređene liste, pomaže čitačima ekrana da se kreću kroz stranicu. Općenito, gumbi bi trebali biti napisani kao `

`: ```html

``` ✅ Iako ste dodali ovaj markup na ekran, ne vidite apsolutno ništa prikazano. Zašto? --- ## 🚀Izazov Postoje neki zanimljivi 'stariji' HTML tagovi koji su još uvijek zabavni za igranje, 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 `` da natjerate naslov h1 da se pomiče vodoravno? (ako to učinite, ne zaboravite je ukloniti nakon toga) ## Kviz nakon predavanja [Kviz nakon predavanja](https://ff-quizzes.netlify.app/web/quiz/16) ## Pregled i samostalno učenje HTML je 'provjereni' sustav gradnje koji je pomogao izgraditi web u ono što je danas. Naučite malo o njegovoj povijesti proučavajući neke 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 mockup 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 kakve nesporazume ili pogrešne interpretacije koje proizlaze iz korištenja ovog prijevoda.