Share
Välkommen till den tredje lektionen i vår webbdesign för barnserie, HTML-struktur!
Vi lär oss hur du skriver vår webbplats strukturera med HTML. Denna struktur kommer att göra oss redo för webbplatsens innehåll, vilket vi lägger till i nästa lektion.
Om vi skulle jämföra webbdesignprocessen till en byggnad (som en Tuts + Town-byggnad!) Skulle HTML vara något som byggnaden fundament och inramning; det är basen från vilken allt annat är byggt.
Viktig! Filerna som vi kommer att skapa i den här lektionen kan hämtas här.
Vi har redan nämnt HTML mycket i den här serien, men har ännu inte pratat om vad det är exakt, annat än ett "super cool secret language". Webben handlar om språk och kommunikation, och HTML är en viktig del av allt detta.
HyperText Markup Language, HTML, är ett språk som markerar upp en webbplats innehåll för en webbläsare att förstå och visa. Det ger struktur till en vanlig ol textfil som en webbläsare annars inte skulle kunna läsa.
Till exempel kan vi inte skriva in ett stycke i våra textredigerare och förvänta oss att en webbläsare bara vet att det är en paragraf. Stycktexten måste vara inuti rätt HTML-markup, ett stycke eller element (vilken som helst rolig rolig text som här visar bara att texten även är kodad).
HTML är byggt av element som har viktig betydelse, som det ovan nämnda stycket. Varje element har en öppning (början) och en avslutande (slutet) -taggen, med webbplatsinnehåll som skrivs mellan dessa två taggar.
Dessa öppnings- och stängningskoder för varje element skrivs inom vinklar (som dessa: < >), även om en slutgiltig tagg också har ett framåt snedstreck (så här: < / >).
I den föregående kursen ritade vi vår webbdesign och nu är det dags att förbereda strukturen eller utformningen av denna design.
Vi börjar med att lägga till några allmänna anteckningar på vår förhandsgranskning av webbplatsen för att få en bättre känsla av hur man bäst kartlägger det här.
Inom kropp av vår html-fil kommer vi att ha flera primära element: a rubrik, en huvud del och a sidfot.
Vi pratade också om hur du ställer in sidfiler i den tidigare lektionen, så nu ska vi lägga denna kunskap i aktion!
Kom ihåg: "Index" är filnamnet och ".html" är förlängningen, vilket berättar för filtypen.
Webbplatser kan bestå av många, många sidor, så huvudsidan kallas alltid "index.html" för att säga "Hej, det här är allt det börjar!"
Nu, låt oss äntligen skriva lite HTML.
Nu kan vi lägga till vår struktur. Återigen, tänk på det här som att sätta ihop en byggnad, vi måste få ramverket på plats.
Den allra första delen av HTML vi ska skriva är som berättar webbläsaren "Hej, det här är ett HTML-dokument!"
Då, under det, behöver vi element:
Allting kommer att bli kapslade inom detta element.
"Som en fågelbo?" Tja, kanske mer som nestande dockor, eller att stanna med vårt snygga stadstema, kapslade byggnader. Nesting är vad som händer när vi lägger ett element inuti av en annan.
Biten av koden nedan visar ett styckeelement nesting inom kroppselementet, eftersom det lever mellan kroppens öppnings- och stängningskoder.
Detta styckeelement är näst inuti kroppselementet.
Vi gör koden i vår HTML-fil lättare att läsa genom att trycka kapslade element till höger. Så här:
OK, tillbaka till jobbet ...
Nu nestad inom detta html element vi kommer att vilja lägga till en huvud element.
De huvud kommer att innehålla titel av vår sida, som kommer att dyka upp i en webbläsarfliken. Massor av häckning!
Tuts Town
Mycket av det som ingår i huvud av ett HTML-dokument ses inte på webbplatsen utan hjälper till att berätta för sökmotorer, som Google, vad vår webbplats handlar om.
Senare när vi skapar en ny fil för att lägga till stilar till den här kommer vi att ansluta dessa två dokument tillsammans genom en länk som läggs till i huvud. Så det är typiskt som en kontrollcentral bakom kulisserna som vår webbplats besökare inte får se för det mesta.
Allt på vår sida som vi kommer att se i webbläsaren kommer att vara näst i kropp, och det är här det roliga börjar verkligen!
De rubrik elementet är inte detsamma som huvud element som vi redan har pratat om. De rubrik bor inom kropp och innehåller i allmänhet alla saker på toppen av en webbplats.
Det allra första vi har högst upp på vår webbplats är en rubrik innehållande lite text och en bild av Tuts + Town.
Tuts Town
Vi lägger bara till rubrik för att förbereda sig för innehållet som ska ingå.
Huvuddelen av Tuts + Town-webbplatsen innehåller den viktigaste informationen. Listan över stadens affärer är vad vår webbplats handlar om, så allt innehåll kommer att leva inom ett element som heter huvud.
Vi kommer att prata om de mindre behållarna (som de tre olika grupperna: Sova, Mat och Butik) inom denna större huvud behållare i nästa lektion när vi lägger till innehållet.
De sidfot är delen i slutet av webbplatsen. Vi brukar se några länkar här, till exempel för Facebook och Twitter, eller lite text som bara låter folk veta vem som skapade webbplatsen.
Vi lägger till en mening stolt säger att vi gjort webbplatsen inom sidfot element.
Kom ihåg: Vid denna punkt lägger vi fortfarande till element som är inbädda i kropp.
Nu, låt oss göra en slutgiltig recension av vår HTML-struktur hittills.
Det är lätt att glömma stängningskoder, vilket skulle orsaka vissa fel på vår hemsida. Vi vill se till att varje tagg som vi öppnade har en stängningskod.
Ser ut som allt är stängt! Tiden för att börja lägga till innehåll till denna supera solida struktur som vi skapade.
HTML låter oss skriva användbara anteckningar inom vårt arbete. Dessa noter kommer inte visa sig på vår hemsida, men är briljanta för att lägga till användbara bitar av information för andra designers som tittar på vår kod.
HTML-filen för den här lektionen (som du kan ladda ner) har flera anteckningar som hjälper oss att förstå det bättre.
I den här lektionen lärde vi oss om vad html är vad element är hur bo dessa element, och hur man ställer in en grundläggande HTML-struktur med några vanliga containerelement.
I nästa lektion lägger vi till vår webbplats text och bilder i den nybyggda strukturen.
Vi ses runt om i staden!
Accentsconagua