Det här är den andra artikeln i vår serie om de absoluta grundarna för webbutveckling. Vår första artikel förklarade i detalj vad HTML är på en konceptuell nivå. Vi tittade på vad ett markup språk är, vilka taggar är och hur HTML jämförs med andra viktiga delar av webbutvecklingspussel som CSS.
Följ med oss idag när vi går vidare och ta en titt på varje grundläggande del av ett HTML-dokument. Jag ska förklara alla de sakerna överst i en HTML-fil som förvirrar dig och skissera den grundläggande strukturen som du följer för att skapa egna HTML-filer.
DOCTYPE
Det allra första som du vanligtvis ser i en HTML-fil är DOCTYPE-deklarationen. Innan HTML5 kan det här vara en mycket förvirrande bit kod som såg ut så här:
Det händer mycket här och varje del talar till webbläsaren, läsaren eller båda. Allmänheten? en del talar bara om tillgängligheten, som DTD står för Dokumenttyp Definition, som förklarar vilken version av HTML som används och det sista avsnittet är en URL som pekar på var DTD kan hittas.
Orden? Lös? (eller övergångs)? strikt? och? frameset? hänvisa till olika versioner av HTML 4, vilket möjliggjorde något annorlunda markup. Dessa var huvudsakligen bara för att hjälpa övergångsutvecklare från äldre versioner av HTML.
HTML5 DOCTYPE
Det finns flera DOCTYPE att välja mellan, vilket kan vara förvirrande för nya utvecklare. Lyckligtvis förenklar HTML5 helt situationen med en uppfriskande enkel DOCTYPE:
Se hur lätt det är jämfört? Det är verkligen en vacker sak.
Vad gör DOCTYPE?
Nu har vi sett vad en DOCTYPE ser ut som men vi har inte riktigt diskuterat vad det är gör. Svaret är att DOCTYPE berättar webbläsaren vilken typ av HTML som kan förväntas, vilket i sin tur påverkar hur webbläsaren gör sidan.
När du utforskar webbutveckling mer lär du dig att det finns en stor tonvikt på? Standardbaserad utveckling.? Den allmänna idén är att om vi alla följer vissa regler och standarder, kommer webbutveckling att vara en mer sammanhängande och konsekvent praxis. Det här är bättre för utvecklare, bättre för webbläsare och viktigast av allt, bättre för användarna.
DOCTYPE var ursprungligen utformade för att utlösa? Standardläge? i webbläsare, vilket innebar att sidan gjordes med nyare webbstandarder. På liknande sätt utlöses äldre sidor utan ett DOCTYPE-läge? i webbläsare, vilket gjorde det möjligt för äldre metoder att användas som inte skulle fungera korrekt i standardläget.
Den nya, mycket enkla HTML5 DOCTYPE stöds i alla större webbläsare, och det utlöser standardläget i alla. DOCTYPE hjälper dig också att validera din kod, vilket säkerställer att nuvarande standarder följs. Varje sida du skapar ska använda en DOCTYPE och förhoppningsvis vara helt standardkompatibel.
Rotelement
Efter DOCTYPE börjar HTML verkligen. Detta indikeras av HTML Root Element. Om hela din HTML är ett träd, är det här den rutt från vilken allt annat spirar.
Root Element definieras av en? Tagg? som vi lärde oss om i vår senaste artikel. I det här fallet är det? HTML? märka.
Observera att rotelementet innehåller ett språkattribut, i vårt fall engelska. Var alltid säker på att ange lämpligt språk för varje sida du skapar.
Allt annat som vi lägger till på denna sida ligger inuti Root Element. Det är behållaren för varje skrot av information och innehåll, den enda uteslutningen är DOCTYPE.
Huvudelement
Nästa sak som du kommer att stöta på i ett HTML-dokument är huvudet? sektion. Huvudetiketten är precis vad du förväntar dig att vara:
De saker som går in i huvudavsnittet är primärt informativa, det berättar både dig och webbläsaren om vissa saker om sidan som titeln, charsetet etc. Det här är också där du traditionellt laddar in viktiga externa resurser.
Det finns några viktiga saker som går in i en huvudetikett. Låt oss titta på dem en efter en.
Metataggar
Som du kan gissa, håll metataggar metadata om sidan. Metadata tar många former och kan innehålla nyckelord, författare, beskrivningar etc. Här är några noterbara inslag:
Teckenuppsättning
Detta är ganska tråkiga saker, charseten är vanligtvis inställd på UTF-8 och berättar väsentligen webbläsaren vilken teckenkodning som ska användas.
Dina sidor bör definitivt innehålla en indikation på vilken charset som ska användas. Tänk inte över det, det är bara en av de saker du behöver hålla i din mall. Nedan finns en typisk charsetdeklaration i HTML5.
Det här är ännu en sak som har blivit enklare med HTML5. Kolla in versionen av det här kodet som krävs för HTML 4.01:
Några andra typiska metataggar inkluderar beskrivning och författare. Här är ett snabbt och självförklarande exempel på var och en av dessa:
Beskrivning
Författare
Titel
En annan sak som går in i huvuddelen av ditt dokument är titeln taggen. Det här är en väldigt enkel kod, som bara anger vad du vill att sidans titel ska vara. Här är ett exempel:
Denna titel visas vanligen till användaren längst upp i mitten av webbläsarfönstret, på en flik, etc.
Länkar och skript
Det sista vi kommer att diskutera om huvudetiketten är införandet av externa resurser. På en mycket enkel webbsida ser du vanligtvis dessa som en formell text eller ett skript:
Här laddar jag i princip min CSS-fil samt jQuery (ett JavaScript-bibliotek) till sidan. Om dessa resurser ingår i källfilerna men inte kopplade till i huvudavsnittet, kommer de inte att fungera.Observera att länkarna för dessa kan antingen peka på något i den lokala mapphierarkin (som ovan) eller något som är värd på en annan webbserver.
Länken som används ovan för CSS-filen använder a länk relation (Rel =? Format?). För mer om länkrelationer, kolla in den här artikeln.
Också, som ett alternativ till att länka till externa filer, kan du bädda in kod direkt i huvudelementet. Här är ett exempel med CSS, men detsamma kan göras via? Scriptet? tagg och JavaScript (inbäddade skript placeras ofta i slutet av kroppselementet istället).
Body Element
Den sista delen av en HTML-sida är den viktigaste. Allt inuti kroppsdelen definierar innehållet och strukturen på din sida. När det gäller utvecklingstiden kommer du sannolikt att använda en uppsättning mall för allt ovan och tillbringa några minuter att anpassa det till specifika projekt. Resten av din HTML-tid kommer att spenderas inuti kroppselementet.
Få alltid att falla på plats
Nu när vi har gått igenom varje enskild bit av en HTML-fil, låt oss sammanföra det i en extremt grundläggande HTML5-mall.
En översikt
Tusen ursäkta för det här sinnets naturliga natur, nybörjare är ofta avstängd av kedsomhet vid den här tiden men hänger in där, den verkliga kulen i HTML är allt mellan kroppsetiketterna, som vi inte ens har diskuterat!
Alla dessa bitar var nödvändiga för att noggrant måla bilden av vad ett HTML-dokument faktiskt är. Vi ser nu att ett HTML-dokument har en DOCTYPE som berättar för webbläsaren hur man gör sidan och hjälper till att säkerställa att de korrekta standarderna används.
Vi vet också att det finns en uppsättning hierarki för hur HTML-sidor är strukturerad. Nästan allt men DOCTYPE kastas in i rotelementet, vilket betyder att det är "förälderelementet"? av huvud och kroppsdelar, som i sin tur har sina egna barn.
Den grundläggande strukturen i ett HTML-dokument kallas DOM, eller dokumentobjektmodellen. Detta kallas nästan alltid metaforiskt som ett träd och avbildas som bilden ovan. Vår egen Jack Rocheleau skrev en fördjupad titt på DOM-titeln Dykare Studie i WWW: s dokumentobjektmodell. För nästa uppsättning att förstå grundstrukturen för en HTML-sida, kolla in den artikeln.
Slutsats
Denna artikel representerar en mycket kort översikt över hur ett HTML-skelett är strukturerat och vilka typer av saker som vanligtvis ingår. Det är inte uttömmande, men bör fungera som en bra grundläggande introduktion till dessa ämnen.
När du bara börjar med kod, kommer de flesta bara att ge dig en mall för hela koden ovan utan att verkligen förklara vad det hela gör. Detta kan lämna ett betydande hål i din utbildning så det är viktigt att läsa igenom denna information och försöka förstå vad du kan.
Stanna med oss i denna serie och kolla tillbaka snart när vi svarar på en annan viktig fråga: Vad är CSS?