Webbutveckling med HTML och CSS

Mediefiler

• I mappen L9a/media finns en ljudfil i formatet mp3 och en videofil i formatet mp4. Dessa ska du konvertera till två andra format, så att vi har flera filer att arbeta med i övningarna.
• Gå till https://online-audio-converter.com/ och konvertera filen music.mp3 till formatet ogg. Ladda ner den konverterade filen music.ogg och lägg den i media-mappen.
• Gå till https://convert-video-online.com/ och konvertera filen mopedrally.mp4 till formatet webm. Ladda ner den konverterade filen mopedrally.webm och lägg den i media-mappen.

Öppna i Visual Studio Code

• Öppna mappen L9a i VSC.
• Öppna filerna lab9a-1.html och style.css samt öppna sidan i Live Server.

Ljud

• Lägg in start- och sluttagg för ett audio-element i HTML-filen. Ta med attributet controls i starttaggen.
  • Attributet controls har inget värde, så skriv endast controls inom taggen.
  • Med detta attribut anger man att kontrollpanelen, med bl.a. knapp för att starta och stoppa ljudet, ska visas.
• Referera till ljudfilerna:
  • Inom audio-elementet lägger du in ett source-element. Ta med ett src-attribut med referens till filen music.ogg (ange rätt sökväg) samt ett type-attribut med "audio/ogg".
  • Lägg in ytterligare ett source-element med referens till music.mp3 och typen "audio/mp3".
• Efter de båda source-elementen lägger du in en länk för nedladdning av mp3-filen.
  • Denna länk visas endast i webbläsare som inte har stöd för audio-elementet.
• Under audio-elementet lägger du in den HTML-kod som finns i filen music-attribution.txt.
  • Det är alltid viktigt att referera till upphovsmannen enligt dennes önskemål.
• Prova att spela ljudet i webbläsaren.
• Testa även andra attribut som loop och autoplay, se lista på attribut på https://www.w3schools.com/tags/tag_audio.asp
• I CSS-koden lägger du in en regel för audio med width: 600px;
  • Detta blir storleken på kontrollpanelen.

Video

Video-elementet

• Lägg in start- och sluttagg för ett video-element. Ta med attributet controls.
• Lägg in två source-element med mopedrally.mp4 och "video/mp4" respektive mopedrally.webm och "video/webm".
• Efter de båda source-elementen lägger du in en länk för nedladdning av mp4-filen.
• Prova att spela filmen i webbläsaren.

Poster och andra attribut

• Lägg in attributet poster med en referens till filen mopedrally.jpg i video-elementets starttagg.
• Fler attribut kan du se på https://www.w3schools.com/tags/tag_video.asp

Undertexter

• Efter source-elementet lägger du till ett track-element med attributen src="media/subtitles-sv.vtt" kind="subtitles" srclang="sv" label="Svenska".
  • Elementet track måste ligga efter source. Annars blir det fel då du validerar HTML-koden.
• Prova i webbläsaren. Klicka på symbolen i kontrollraden, för att slå på textning.
• Prova också att lägga in attributet default i track-elementet.
  • Då visas textningen automatiskt, när filmen spelas. Den användare som inte vill ha textningen, får då stänga av den.
• Lägg in ytterligare ett track-element med src="media/subtitles-en.vtt" kind="subtitles" srclang="en" "label="Engelska".

CSS-kod

• Lägg in en regel för video med width: 500px; (eller valfri storlek).
  • Height anpassas automatiskt.
• Lägg också in en regel för video::cue med font-size: 2rem; och line-height: 2.5rem;
  • Denna regel gäller för undertexterna.

Video från YouTube

• Ta fram valfri film på YouTube.
• Klicka på knappen Dela och sedan Bädda in.
• Kopiera HTML-koden och klistra in den i ditt eget HTML-dokument.
• Fixa till koden:
  • Ta bort attributet frameborder, som är gammalt och inte finns i HTML5.
  • I CSS-filen lägger du istället in en regel för iframe med border: none;

Validera

• Validera koden på https://validator.nu/ och rätta eventuella fel.

Arbetsfiler

• Öppna filerna lab9a-2.html och style.css samt öppna sidan i Live Server.

Karta

• Gå till Google maps, ta fram valfri plats och zooma in kartan till önskat område.
• Klicka på menyknappen (tre vågräta streck) längst upp till vänster.
• Välj Dela eller bädda in karta.
• Klicka på Bädda in karta.
• Klicka på Kopiera HTML.
• Klistra in koden i ditt HTML-dokument.
• Storleken på kartan kan ändras med width och height antingen direkt i HTML-koden eller med hjälp av CSS.

Vägbeskrivning

• Klicka på knappen för vägbeskrivning (blå symbol med vit böjd pil) i Google maps.
• Ange två platser. Välj önskat färdsätt.
• Gör likadant som ovan för att dela, bädda in och kopiera HTML-kod, som du klistrar in i ditt HTML-dokument.

Satellitbild

• Växla till satellitvy ("knappen" längst ner till vänster) och ta fram önskad plats.
• Gör likadant som ovan, för att ta fram HTML-koden till ditt HTML-dokument.

Gatuvy

• Ta fram önskad plats och zooma in. Gå ner på gatunivå (med den gula gubben) och vrid till den vy du vill ha.
• Klicka på de tre prickarna och välj Dela eller bädda in bild. Gör sedan likadant som ovan, för att ta fram HTML-koden och klistra in i ditt HTML-dokument.

En väderwidget

• Gå till https://www.vackertvader.se och sök fram önskad plats.
• Klicka på Väderwidget, längst ut till höger i navigeringsmenyn.
• Välj form, färg och vad som ska finnas med.
• Kopiera HTML-koden och klistra in i ditt HTML-dokument.