För några dagar sedan lade vi fram en introduktion till HTML5 och kortfattat behandlade några av innehållet som vi kommer att beskriva i denna serie. Dagens inlägg, som är den andra i serien fyra, kommer att ta en titt på hur man använder sex av de nya elementen i HTML5: kanfas, artikel, ljud, video, mätare och markering.
Tänk på att HTML5 inte är exakt redo för utbredd användning - så ändå inte ändra någonting på din webbplats. Var säker på att HTML5 faktiskt kommer snart, därför kan dessa koncept vara användbara inom en snar framtid.
The Canvas Element
Elementet är en ny behållare för grafik. Observera att duken bara är det, ett område där grafik kan placeras. Elementet ska innehålla endast två attribut: bredd och höjd. Här är ett exempel:
Den faktiska ritningen för det här exemplet görs i JavaScript. Nyckeln till att implementera grafiken i ditt skript är att referera till ett sammanhang genom metoden getContext. För nu är det enda kontext du kan ringa? 2d ?. Tänk på 2d-kontexten som ditt faktiska ritningsplan (definierat av HTML-kanvasstorleken) som börjar vid koordinaterna 0,0 (längst upp till vänster på skärmen). För att rita ett objekt bestämmer du först vilka koordinater objektet börjar. Om du till exempel vill rita något som är tio pixlar i från vänster och tio pixlar inifrån, är dina koordinater (10,10).
Det finns ett antal sätt att använda 2d-kontexten för att skapa grafik. Allt från enkla rektanglar till kurvor och gradienter stöds. För våra ändamål ska vi hålla det enkelt bara för att komma igång. Här är JavaScript, som implementerar de principer som beskrivs ovan:
Om du använder en stödd webbläsare (Safari, Firefox eller Opera) ska du se följande resultat när du kombinerar HTML och JavaScript som vi just tittade på.
Återigen, innan du gör någon ritning kom ihåg att implementera 2d-kontexten eller så kommer du inte att se någon grafik alls! Bara om du undrar vad det här fyller? skräp handlar om, här är en snabb förklaring av syntaxen för några av ritningsmetoderna.
Ritning rektanglar
Först och främst bör du veta att när du ser fyra siffror i formatet (0,0,0,0) representerar detta (avstånd från vänster, avstånd från topp, bredd, höjd). Låt oss nu titta på några specifika syntax exempel:
fillStyle =? rgb (50, 50, 50); Bestämmer färgen på fyllningen
fillRect (20, 20, 150, 150); Skapar en enkel fylld rektangel
strokeRect (20, 20, 150, 150); Skapar en streckad rektangel
clearRect (20, 20, 150, 150); Skapar ett transparent område (ett hål)
Teckningsformer
startPath (); Startar en bana
closePath (); Stänger en väg
flytta till (20, 20,); Lyft ritning pennan och startar på en ny plats
fyll (); Fyller den dragna formen
stroke (20, 20); Strykar den dragna formen
Mycket mer!
För mycket mer information om hur man ritar med JavaScript och hur man använder dukelementet, kolla in Mozillas handledning.
Också här är ett praktiskt Canvas Cheat Sheet från Jacob Seidelin.
Artikelelementet
Artikelelementet är helt enkelt ett sätt att hänvisa till ett blogginlägg, nyhetsartikel etc. på din sida. Här är syntaxen:
Som du kan föreställa dig, kommer det att göra det super enkelt att rikta och stryka artiklar i din CSS utan att definiera en klass.
Ljud- och videoelementen
Liksom artikelelementet är dessa helt enkelt behållare som innehåller innehåll. Återigen kan du se fördelen omedelbart när du börjar utforma dessa med CSS utan att behöva några anpassade klasser. Här är den enkla syntaxen för varje (någon text placerad mellan parentesen visas bara i icke-stödda webbläsare):
Ljud Attribut
Både ljud- och videoelementen innehåller viktiga attribut som du borde känna till. Låt oss först titta på dem för ljudelementet (källa: w3shcools).
Videofunktioner
Videonelementet innehåller alla samma attribut som ljudelementet samt 3 mer (source: w3shcools).
Meterelementet
Mätarelementet kan användas för att innehålla mätningar av alla slag (procent, poäng, dagräknare, etc.). Den här gången, innan vi tittar på ett exempel, går vi direkt in i attributen (igen, rakt från w3shcools).
De två speciellt viktiga attributen i denna uppsättning är max och min. Mätarelementet kan endast användas när mätningen har ett känt maximi- och minimivärde. Det betyder inte nödvändigtvis att du måste definiera en max och en min (du kan använda standard), bara att du måste vara medveten om vad de är. Här är ett exempel:
Observera att för första meter-elementet krävs specifikation av min och max eftersom intervallet var mellan 0 och 50. Den andra mätaren använde emellertid standardintervallet 1-100, eftersom procentandelar vanligen faller inom detta område.
Mark Element
Det sista elementet vi ska titta på är. Enkelt i konceptet kan markelementet markera en viss textdel för att göra det mer märkbart för läsaren. Här är ett exempel:
Nu kan vi använda markeringen för att enkelt rikta in det avsnitt vi vill markera i vår CSS:
Resultatet är snygg, markerad text som du kan upptäcka på ett ögonblick.
Slutsats
Sammanfattningsvis täckte vi sex helt nya element från HTML5. Först tittade vi på duk element, som är en behållare för en mängd olika grafiska objekt som du kan skapa med hjälp av ett antal JavaScript-funktioner. Då lärde vi oss om artikel element, vilket representerar ett nytt sätt att hänvisa till externt innehåll. Nästa skisserade vi hur man använder audio och video- taggar tillsammans med deras olika attribut samt hur man korrekt märker värden som faller inom ett visst område med hjälp av meter element. Slutligen upptäckte vi hur man markerade en viss del av texten med hjälp av markera element.
Jag hoppas att du har lärt så mycket att läsa detta som jag skrev det! Använd kommentarerna nedan för att ställa frågor som du kanske har eller dela med dig av HTML5-kunskapen. Nästa artikel i denna serie är kanske den viktigaste eftersom vi ska titta på några fler nya element som representerar några allvarliga semantiska förändringar i strukturen i HTML-filer. Så kolla tillbaka snart för att se hur du lägger ut din HTML-kod under de kommande åren!