3 hurtige genveje med HTML5
Livet er ikke altid nemt. Hjemmesider er sjove at lave, og jeg elsker det kreative element i arbejdet med hjemmesider. Men nogen gange drukner min kreativitet i de tekniske detaljer.
Med HTML5 er det endelig blevet nemmere at lave funktionelle og pæne hjemmesider, uden at skulle fedte rundt med for eksempel JavaScript.
Jeg har fundet 3 af de nye HTML5 tags, som med det samme vil gøre livet nemmere for dig.
1. <details>
Med <details> kan du nemt lave en overskrift med tilhørende tekst, som kan skjules og vises ved at klikke på enten overskriften eller den lille illustrative pil foran overskriften.
HTML-koden er ganske simpel. Overskrift og al tilhørende tekst pakkes ind i <details>. Selve overskriften defineres ved at omgive den med <summary>.
2. <video>
Integration af video på HTML-sider har været, for at sige det mildt, en smule udfordrende. Med HTML5 er der nu kommet et tag som er designet til formålet. Med ren HTML er det nu muligt med <video> at få vist din video i en simpel afspiller, hvor du kan:
- Starte og pause videoen
- Spole frem og tilbage i videoen
- Se hvor langt i videoen du er kommet
- Skrue op og ned for lyden
- Vælge om du vil se videoen i den angivet størrelse eller i fuldskærm
For at indsætte en video med HTML, skal du blot indsætte <video> med de ønskede attributter, og indenfor <video> indsætte reference til den video, du gerne vil vise.
3. <meter>
Integration af simpel grafik på en HTML-side kan nemt blive kompliceret, hvis det skal gøres med ren HTML.
Med <meter> kan du nu meget nemt og hurtigt illustrerer målinger eller skalaer med grafik, uden at skulle nørkle rundt med selve billederne.
Som udgangspunkt er grafikken grøn, og med attributten value angiver du værdien i skalaen, der obligatorisk går fra 0 til 1.
Du kan med attributterne min og max angive en minimumsværdi og en maksimumsværdi, og på den måde tilpasse value til din egen skala.
Ud over grøn grafik, kan du også få <meter> til at vise gul og rød grafik, ved at lirke med attributterne low, high og optimum. Det kræver lidt jonglering med værdierne i forhold til hinanden.
Kom i gang med HTML5
Der er ingen grund til at vente med at lære HTML5.
Med <details>, <video> og <meter> kan du nu meget nemmere integrere funktionalitet, video og grafik med HTML5. Det er tidsbesparende, enkelt og din kode er nem at lave.
Lær at lave websteder med HTML5 og CSS3
Vil du gerne lære mere HTML5, og også det nye CSS3, så har vi netop nu et kursus, hvor du kan lære at lave flotte og avancerede hjemmesider med HTML5 og CSS3.
Kurset kræver ingen forudsætninger, så er du helt ny i HTML og CSS, er dette kurset hvor du hurtigt kommer i gang og bliver opdateret i HTML5 og CSS3.
Brug foråret til at blive skarp på HTML og CSS, og tilmeld dig kurset på vores hjemmeside. Kurset bliver afholdt midt i marts i København og kan også tages som online-kursus.
Med forårshilsner fra
Pia Nilsson
Underviser hos App Academy
|
