`-tagger for å lage de separate elementene på en side. Vi skal lage en serie med `

`-elementer som vil inneholde bilder. ### Bilder En HTML-tagg som ikke trenger en lukketagg er ``-taggen, fordi den har et `src`-element som inneholder all informasjonen siden trenger for å gjengi elementet. Opprett en mappe i appen din kalt `images` og legg til alle bildene i [kildekode-mappen](../../../../3-terrarium/solution/images); (det er 14 bilder av planter). ### Oppgave Legg til disse plantebildene i to kolonner mellom ``-taggene: ```html

``` > Merk: Spans vs. Divs. Divs regnes som 'block'-elementer, og Spans er 'inline'. Hva ville skjedd hvis du endret disse divene til spans? Med denne markeringen vises plantene nå på skjermen. Det ser ganske dårlig ut, fordi de ennå ikke er stylet med CSS, og vi skal gjøre det i neste leksjon. Hvert bilde har alternativ tekst som vil vises selv om du ikke kan se eller gjengi et bilde. Dette er en viktig attributt å inkludere for tilgjengelighet. Lær mer om tilgjengelighet i fremtidige leksjoner; for nå, husk at alt-attributtet gir alternativ informasjon for et bilde hvis en bruker av en eller annen grunn ikke kan se det (på grunn av treg tilkobling, en feil i src-attributtet, eller hvis brukeren bruker en skjermleser). ✅ La du merke til at hvert bilde har samme alt-tekst? Er dette god praksis? Hvorfor eller hvorfor ikke? Kan du forbedre denne koden? --- ## Semantisk markering Generelt er det å foretrekke å bruke meningsfull 'semantikk' når du skriver HTML. Hva betyr det? Det betyr at du bruker HTML-tagger for å representere typen data eller interaksjon de er designet for. For eksempel bør hovedtittelen på en side bruke en `

`-tagg. Legg til følgende linje rett under åpningstagen ``: ```html

My Terrarium

``` Å bruke semantisk markering, som å ha overskrifter som `

` og uordnede lister som `
`, hjelper skjermlesere med å navigere gjennom en side. Generelt bør knapper skrives som `

`-taggen: ```html

``` ✅ Selv om du la til denne markeringen på skjermen, ser du absolutt ingenting bli gjengitt. Hvorfor? --- ## 🚀Utfordring Det finnes noen morsomme 'eldre' tagger i HTML som fortsatt er morsomme å leke med, selv om du ikke bør bruke utdaterte tagger som [disse taggene](https://developer.mozilla.org/docs/Web/HTML/Element#Obsolete_and_deprecated_elements) i markeringen din. Likevel, kan du bruke den gamle ``-taggen for å få h1-tittelen til å rulle horisontalt? (hvis du gjør det, ikke glem å fjerne den etterpå) ## Quiz etter forelesning [Quiz etter forelesning](https://ff-quizzes.netlify.app/web/quiz/16) ## Gjennomgang og selvstudium HTML er det 'prøvde og sanne' byggesystemet som har hjulpet til med å bygge nettet til det det er i dag. Lær litt om historien ved å studere noen gamle og nye tagger. Kan du finne ut hvorfor noen tagger ble utdaterte og noen lagt til? Hvilke tagger kan bli introdusert i fremtiden? Lær mer om å bygge nettsteder for nettet og mobile enheter på [Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-77807-sagibbon). ## Oppgave [Øv på HTML: Bygg en bloggmockup](assignment.md) --- **Ansvarsfraskrivelse**: Dette dokumentet er oversatt ved hjelp av AI-oversettelsestjenesten [Co-op Translator](https://github.com/Azure/co-op-translator). Selv om vi streber etter nøyaktighet, vær oppmerksom på at automatiserte oversettelser kan inneholde feil eller unøyaktigheter. Det originale dokumentet på sitt opprinnelige språk bør anses som den autoritative kilden. For kritisk informasjon anbefales profesjonell menneskelig oversettelse. Vi er ikke ansvarlige for eventuelle misforståelser eller feiltolkninger som oppstår ved bruk av denne oversettelsen.