Hej igen alla läsare :) I detta inlägg hade jag tänkt gå igenom stegen för att skapa vår alldeles första, HTML5-mall (väldigt simplifierad med bara det väsentligaste ”for now” – mer avancerad kommer att gås igenom i ett annat inlägg framöver).
Mallen vi kommer att skapa/visa här kommer ni sen kunna använda som den fundamentalaste grunden som kan utgöra startpunkten för alla era HTML5-webbsidor framöver att utgå från innan man fortsätter vidare till att skapa layout och sådant.
Vi kommer försäkra oss om att mallsidan vi skapar är validerad enligt W3C’s validator för HTML5-standarden, vi kommer även försöka visa på vad de olika delarna på sidan fyller för funktion och varför man bör ha med dem :)
Först och främst, allmänna grunden för webbsida (ej standardenlig, bristfällig, men basic)
<html>
<head>
<title></title>
</head>
<body>
this is the bare-minimum of any website OUTSIDE of any standards...
the <html>-tag to indicate to the browser that it's a web document to be interpreted.
the <head>-tag that will hold meta-data for the webpage as well as site-title text and load javascripts, css-styles, etc.
the <body>-tag that holds the entire websites body - that will be visible to the website visitors (with some exceptions in a few cases)...
</body>
</html>
Vänligen OBSERVERA dock att ovan INTE ÄR REKOMMENDERAT att faktiskt koda till ”riktiga webbplatser”. Där saknas några grejer som i kombination med ovan kod, gör webbdokumentet standardenligt utefter den standard man väljer.
Skulle ni besöka W3C HTML Validator verktyg och skriva in ovan kod, så kommer ni få 1 st. ERROR och 4 st. VARNINGAR. (för koden bortsett från texten inuti <body>-taggen)
ERROR-meddelandet som ges kommer se ut såhär:
no document type declaration; implying ”<!DOCTYPE HTML SYSTEM>”
: The checked page did not contain a document type (”DOCTYPE”) declaration. The Validator has tried to validate with a fallback DTD, but this is quite likely to be incorrect and will generate a large number of incorrect error messages. It is highly recommended that you insert the proper DOCTYPE declaration in your document — instructions for doing this are given above — and it is necessary to have this declaration before the page can be declared to be valid.
Ovan felmeddelande talar om att vår mallkod saknade Document Type Definition, vilket innebär att ingen standard för koden man skriver är angiven, vilket också innebär att det är ”fritt fram” för webbläsaren att anta vilken standard man kodar i – och ni kan säkert gissa hur väl/illa det hade kunnat gå om webbläsaren skulle välja fel standard.. :/
Några av VARNINGAR-meddelandena kommer att vara:
1. Unable to Determine Parse Mode!
: The validator can process documents either as XML (for document types such as XHTML, SVG, etc.) or SGML (for HTML 4.01 and prior versions). For this document, the information available was not sufficient to determine the parsing mode unambiguously, because:
- in Direct Input mode, no MIME Media Type is served to the validator
- No known Document Type could be detected
- No XML declaration (e.g
<?xml version="1.0"?>) could be found at the beginning of the document.- No XML namespace (e.g
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">) could be found at the root of the document.As a default, the validator is falling back to SGML mode.
Vilket i stort sett betyder att mallkoden vi angav ovan saknade tillräcklig med information för att indikera att det var en webbsida vi kodade. Vilket kan ställa till en del problem när webbläsaren ska försöka tolka koden och presentera element till besökaren för kod som den egentligen inte är helt säker på att den förstår.
2. No
DOCTYPEfound! Checking with default HTML 4.01 Transitional Document Type.: No DOCTYPE Declaration could be found or recognized in this document. This generally means that the document is not declaring its Document Type at the top. It can also mean that the DOCTYPE declaration contains a spelling error, or that it is not using the correct syntax.
The document was checked using a default ”fallback” Document Type Definition that closely resembles “HTML 4.01 Transitional”.
Learn how to add a doctype to your document from our FAQ.
Verkar praktiskt taget vara samma som vårt första och enda ERROR-meddelande.
3. No Character encoding declared at document level
: No character encoding information was found within the document, either in an HTML
metaelement or an XML declaration. It is often recommended to declare the character encoding in the document itself, especially if there is a chance that the document will be read from or saved to disk, CD, etc.See this tutorial on character encoding for techniques and explanations.
Ovan varningsmeddelande säger i stort sett att inget har angetts för att indikera på vilket språk sidan kodas, eller vilken teckenkodning som skall användas – detta kan i sin tur leda till att t ex. Svenska tecken som Å, Ä och Ö- bokstäverna blir jätteknasiga när de skall presenteras, då webbläsaren inte har den blekaste aning om vilket ”språk” de tillhör/vilken teckenkodning som kan ordentligt presentera tecknen.
Det fjärde varnings-meddelandet var p.g.a. att jag validerade ovan mallkod genom att i stort sett klistra in koden direkt i validatorn, och kan därför ignoreras.
Enda anledningen att jag visar denna grundkod för en HTML-webbsida, är i pedagogiskt syfte att visa på att detta är de allra viktigaste delarna av en webbsida, ett ”bare-minimum” som man kan säga på engelska. Det allra minsta som är nödvändigt för att göra ett webbdokument helt enkelt.
Det är bra kunskaper att ha och det är bra att känna till vilka delar, och i vilken utsträckning man kommer att använda dem. Om ni sen vill kan ni gärna experimentera själva genom att t ex. ta bort <body> taggen, eller kanske <title> taggen från koden och sedan testa klistra in koden i validatorn och köra den igen, se om ni får nya felmeddelande och vad de i sådana fall säger :)
Min rekommendation är att ni bör sträva efter att ha validerad kod för er webbplats, detta försäkrar om att inga onödiga fel riskerar att drabba er i stunden eller längre in i utvecklingsprocessen!
Lite insikt i de olika delarna
Som somliga av er säkert känner till publicerade jag ett inlägg tidigare: Dissekering av webbsida & Genomgång av dess tre fundamentalaste beståndsdelar: DTD, HEAD, BODY , som ger en koncis introduktion till delarna vi har tagit med i vår grundmall ovan. I det inlägget nämner jag även lite snabbt DTD som inte finns med i vår mall ovan, om man vill koda efter en standard (vilket är säkrast och föredraget för bäst- och förutsägbara resultat) så bör man åtminstone känna till att en DTD skall finnas med överst på sidan.
Längre ned i detta inlägg kommer jag även gå igenom en ”korrekt” HTML5 Boilerplate för att ni även ska se och lära er hur det ”korrekta” sättet att bygga basen för en webbsida går till på med dagens senaste moderna webbstandard, HTML5.
Visdomsord innan kodande inleds
Tänk på visdomsorden och rekommendationerna som nämndes och togs upp i inlägget: Bra kodningsprinciper och praktiker för HTML-kodning från XML.
För att vara konsistenta och även demonstrera kunskaperna vi tagit del av bör vi koda vår HTML-mallsida utefter de bra principer och praktiker för HTML-kodning som vi tidigare gått igenom.
Användbar och bra tillgänglig kodmall från andra källor
Innan vi börjar med vår egen mall tänkte jag snabbt nämna att det redan finns en framtagen mall som jag själv brukade utgå från för många av mina tidigare webbsidor, skapad av HTML5Doctor.com och deras kodare, länk till mallen kan hittas på vår Länkar-sida, eller på följande länk: HTML5Doctor.com: html5-boilerplate.
Deras mallsida har det väsentligaste och det nödvändigaste, och den blir dessutom godkänd av W3C HTML5 Validator verktyg för att vara enligt HTML5-Kodstandard(!).
Deras kodmall ser ut som följer:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>HTML 5 complete</title> <!--[if IE]> <script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <style> article, aside, details, figcaption, figure, footer,header, hgroup, menu, nav, section { display: block; } </style> </head> <body> <p>Hello World</p> </body> </html>
Och som ett ”FYI” (For Your Information) inför framtiden angående indentering, så brukar detta vara upp till er som kodar, men för det mesta verkar det populäraste vara att endast börja indentering vid block-element i respektive område (head/body).
Och vad jag då menar med detta är som ni kan se ovan så är det första ”block-elementet” i <head> taggen vårt <style> block där man kan placera On-page CSS-stilmalls kod (mer om detta i inlägg om CSS-kodning senare framöver), där har HTML5Doctor.com valt att indentera, och när det gäller <body> taggen har de endast ett s.k. ”inline-element” (paragraf-taggen (<p>)) som då inte är ett ”block-element” och behöver därför inte indenteras. Men som sagt, detta väljer ni själva hur ni vill göra, men det kan annars vara kul att veta hur man brukar avgöra var det är lämpligt med indentering :)
Genomgång av HTML5Doctors HTML5-boilerplate
Document Type Definition – DTD
Först i HTML5Doctors kodmall kan vi se en DTD för HTML5, som indikerar att standarden koden är skriven utefter, är just det: HTML5.
<!DOCTYPE html>
HTML & HEAD- taggarna
Därefter följer bastaggarna vi är bekanta med sen tidigare, <html> och <head>.
Meta tagg för teckenkodning
Sen följer en intressant tagg vi tidigare inte sett, nämligen en ”meta tagg” (<meta>), dessa används för att förmedla meta-data för en webbsida, i det här fallet är meta taggen dedikerad till förmedling av teckenkodning (charset för character set). I andra fall kan meta taggar användas för att förmedla sökmotorindexerings nyckelord, sökmotorindexerings sidbeskrivningar, sökmotorindexerings robotregler för sidan (hur sidan skall indexeras), m.m.
Vår charset meta tagg är satt till värdet UTF-8, vilket är en idag väldigt populär teckenkodning, faktum är att det är rekommenderad ”default standard teckenkodning” för HTML-kodning.
Direkt citat från HTML5Doctor’s artikelsida för deras HTML5-Boilerplate säger följande för teckenkodnings meta-taggen:
This final, more complete boilerplate also indicates the character set. Without it, some characters will not render properly.
Mer info om UTF-8 och Unicode teckenkodning
Vid intresse av att läsa mer om UTF-8 som teckenkodning, vänligen se Engelska Wikipedias artiklar om UTF-8 och Informationssida om UTF-8 på webben :) Och för mer information om Unicode som UTF-8 kodar tecknen till, finns följande Engelska Wikipedia sida för Unicode till ert förfogande.
TITLE-tagg
Därefter följer sidans <title> tagg som ni bör ha goda kunskaper om vad den fyller för funktion(er).
HTML5 Shiv och IE-hack för att få HTML5 att funka
Nästa del av boilerplaten är ett Internet Explorer ”hack” för att använda ett script kallat ”HTML5 Shiv” med syfte att få HTML5 att funka i äldre versioner av Internet Explorer (, såväl som Firefox 2 verkar det som), som saknar stöd för standarden.
<!--[if IE]>
<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Vad HTML5 Shiv är, och gör
HTML5 Shiv är ett JavaScript fix (kräver alltså JavaScript aktiverat i webbläsaren för att fungera) & script som får äldre ovetande webbläsare att tolka de nya HTML5-elementen korrekt så att man sen kan använda dem och ge dem CSS-stilar utan att det blir oväntade fel och missförstånd när webbläsaren försöker sen översätta och tolka sidan.
Vad detta innebär är att de äldre webbläsarna har inga standard CSS-stilar för hur de nya HTML5-elementen är tänkta att presenteras (alla taggar har ju sina egna egenskaper för hur de fungerar och skall presenteras som webbläsaren får från standarden, saknas standarden dock = brist på standard stilar, egenskaper etc.), vad JavaScript då gör är att gå igenom sidan, identifiera de nya HTML5-elementen, och tilldela dem de nödvändiga egenskaperna (typ CSS-stilar) för att ”verka fungera som de är tänkta”.
Ni kan läsa mer om HTML5 Shiv på: deras GitHub sida: https://github.com/afarkas/html5shiv
Enda nackdelen med HTML5 Shiv är ju som sagt att det finns folk som inte litar på JavaScript och därför har det inaktiverat, då många använde det förr för att göra ”dåliga” saker på webben, vilket oftast lämnade besökare till vissa sidor med en sur eftersmak i munnen, p.g.a. irriterande eller ovälkomna webbupplevelser med reklam, virus, och andra otrevligheter.
ATT TÄNKA PÅ (Visdomsord): Tänk på detta när ni själva designar egna webbupplevelser, vilka besökare det är ni utvecklar webbsidan för, har de JavaScript aktiverat? Använder de gamla webbläsare? Osv. Frågor värda att ställa och ta med i beräkningarna för hur en webbsida skall byggas. Idag finns ännu ett element att överväga, och det är Hur era besökare kommer att besöka er webbsida, kommer de göra det via dator, mobil, surfplatta, eller annat? Vad stödjer den enheten som just dina besökare använder för att visa din webbsida? Behöver du kanske vidta speciella designåtgärder för om de använder pekskärm, eller ej? osv :)
On-page CSS-stilmalls kodblock
Nästa del i HTML5Doctors boilerplate är ett <style> block-element som sträcker sig över flera rader, som håller On-page CSS-stilar, vilket sällan är rekommenderat – speciellt om man har många undersidor, men anledningen till deras användning i det här fallet, är då deras mall enbart är tänkt att utgöras av 1 enstaka fil! Och då är det okej :) Annars vid större webbprojekt bör man överväga att placera denne CSS-kod i ett extern CSS-kods dokument, men mer om detta senare när vi börjar gå igenom CSS-kodning.
CSS-koden som HTML5Doctor har angivet i detta On-page CSS-blockelement är kod för att informera (även här) ovetandes webbläsare om hur block-level element skall presenteras genom att lista alla elementen och tilldela alla elementen en och samma stil, nämligen display as block.
Slutligen body och stängning av öppnade taggar
Sedan följer det gamla vanliga som ni kan se, <head> taggen stängs, innan <body> taggen öppnas och stängs, för att representera webbsidans ”kropp” som sen kommer bli presenterad för besökarna.
Slutkläm & presentation av framtida inplanerat inlägg
Det är inget fel med att använda någon annans kodmall, speciellt inte när den är så välgjord som den vi gick igenom ovan. Personligen är det min favorit kodmall att utgå från (eller brukade vara åtminstone), dock så har jag numera vidareutvecklat den en aning för mina egna sidor jag brukar bygga, dels har jag piffat upp den med PHP som förebyggande för att ha multipla undersidor med samma mallkod – för att undvika att behöva ändra på varje enstaka undersida bara för att alla har samma sidhuvud/sidfot, t ex. Med hjälp av PHP dynamisk konstruktion av kodmallen så används en och samma sidhuvud, respektive sidfot till samtliga sidor.
Jag inkluderar även för mina egna sidor:
- Externt stylesheet (CSS-stilmall för samtlig CSS koder),
- ibland en CSS ”printstyles” alternativ extern stilmall (för utskrifts stilar för sidor – inte ofta dock),
- meta-taggar för On-page sökmotoroptimering,
- favicon inkludering,
- ibland eget visitor-tracking PHP-script,
- Google Analytics i botten av sidan,
- jQuery kod såväl som JavaScript filer (om det används för sidan),
- LESS CSS preprocessor kod om jag använder det för CSS-kodningen (inte ofta),
- Eric Meyers CSS-Reset v.20 för HTML5-reset,
- Ibland Modernizr för HTML5/CSS3 feature detection (JavaScript bibliotek som hjälper till att upptäcka stöd för HTML5 och CSS3 funktioner hos besökaren, så man då kan vidta åtgärder baserat på om stöd skulle saknas, eller ej)
- Google Fonts för typografiskt teckensnitt stöd och-
- ibland övriga JavaScript filer.
Såja! Då har vi gått igenom HTML5-kodmall ordentligt i det här inlägget.
Låna gärna av ovan presenterade mallkod, experimentera på egen hand, lägg till, ta bort, och jämför vad som händer och se vad som blir annorlunda vid validering av koden.
Tills nästa gång ;)