Share
Velkommen til den tredje leksjonen i vår Web Design for Kids-serie, HTML Structure!
Vi lærer å skrive på nettstedet vårt struktur med HTML. Denne strukturen vil gjøre oss klar for nettstedets innhold, som vi legger til i neste leksjon.
Hvis vi skulle sammenligne webdesignprosessen til en bygning (som en Tuts + Town-bygning!), Ville HTML være noe som bygningen fundament og framing; det er basen hvorfra alt annet er bygget.
Viktig! Filene vi skal lage i denne leksjonen kan lastes ned her.
Vi har allerede nevnt HTML mye i denne serien, men har ennå ikke snakket om hva det er nøyaktig, annet enn et "superkult hemmelig språk". Internett handler om språk og kommunikasjon, og HTML er en viktig del av alt dette.
HyperText Markup Language, HTML, er et språk som markerer opp et nettsteds innhold for en nettleser å forstå og vise. Det gir strukturen til en vanlig ol tekstfil som en nettleser ellers ikke ville kunne lese.
For eksempel kan vi ikke skrive inn et avsnitt i våre tekstredigerere og forventer at en nettleser bare vet at det er et avsnitt. Tekstteksten må være inne i riktig HTML-markup, et avsnitt eller element (noe morsomt å se tekst som her viser bare at denne teksten også er kode).
HTML er bygget av elementer som har viktig betydning, som avsnittet nevnt ovenfor. Hvert element har en åpning (begynnelsen) og en avsluttende (slutt) tag, med innhold på nettstedet skrevet mellom disse to kodene.
Disse åpnings- og lukkekodene for hvert element er skrevet innenfor vinkelbeslag (som disse: < >), selv om en avsluttende kode også har et fremoverstrekk (som dette: < / >).
I det forrige kurset har vi utarbeidet vårt webdesign og nå er det på tide å forberede strukturen eller rammen av dette designet.
Vi starter med dette ved å legge til noen generelle notater på forhåndssiden vår for å få en bedre følelse av hvordan du best kan kartlegge dette.
Innen kropp av vår html-fil vil vi ha flere primære elementer: a Overskrift, en hoved- del og a bunntekst.
Vi snakket også om hvordan du setter opp nettstedfiler i forrige leksjon, så nå skal vi sette denne kunnskapen i bruk!
Huske: "Indeks" er filnavnet og ".html" er utvidelsen, som forteller oss filtypen.
Nettsteder kan bestå av mange, mange sider, så hovedsiden er alltid kalt "index.html" for å si "Hei, dette er hvor alt begynner!"
La oss endelig skrive litt HTML.
Nå kan vi legge til vår struktur. Igjen, tenk på dette som å sette sammen en bygning, må vi få rammen på plass.
Den aller første delen av HTML vi vil skrive er som forteller nettleseren "Hei, dette er et HTML-dokument!"
Deretter, under det, trenger vi element:
Alt annet vil være nestet innenfor dette elementet.
"Som en fuglhytte?" Vel, kanskje mer som nesting dukker, eller å bo med vårt pent bytema, nestede bygninger. Nesting er hva som skjer når vi legger et element innsiden av en annen.
Bitt av koden nedenfor viser et avsnitt av elementet innenfor kroppselementet, fordi det lever mellom kroppens åpnings- og lukkekoder.
Dette avsnittet elementet er nestet inne i kroppselementet.
Vi gjør koden i vår HTML-fil lettere å lese ved å trykke nestet elementer videre til høyre. Som dette:
OK, tilbake til jobb ...
Nå nestet innenfor dette html element vil vi legge til en hode element.
De hode vil inneholde tittel av siden vår, som vises i en nettleserfane. Masse nesting!
Tuts Town
Mye av det som er inkludert i hode av et HTML-dokument er ikke sett på nettstedet selv, men hjelper i stedet med å fortelle søkemotorer, som Google, hva vårt nettsted handler om.
Også senere når vi lager en ny fil for å legge til stiler til denne, kobler vi disse to dokumentene sammen gjennom en lenke lagt til i hode. Så, det er som et kontrollsenter bakom scenene som våre nettstedets besøkende ikke kommer til å se for det meste.
Alt på vårt nettsted som vi vil se i nettleseren, vil bli nestet i kropp, og det er her moroa begynner virkelig!
De Overskrift elementet er ikke det samme som hode element som vi allerede har snakket om. De Overskrift lever innenfor kropp og inneholder vanligvis alle ting øverst på et nettsted.
Det aller første vi har på toppen av nettstedet vårt er en topptekst som inneholder litt tekst og et bilde av Tuts + Town.
Tuts Town
Vi vil bare legge til Overskrift for nå å forberede innholdet som skal inkluderes.
Hoveddelen av Tuts + Town-området inneholder den viktigste informasjonen. Listen over byen bedrifter er hva vår nettside handler om, så alt dette innholdet vil leve innenfor et element som heter hoved-.
Vi vil snakke om mindre containere (som de tre forskjellige gruppene: Søvn, mat og butikk) innenfor denne større hoved- container i neste leksjon når vi legger til innholdet.
De bunntekst er delen i slutten av nettstedet. Vi vil vanligvis se noen koblinger her, for eksempel for Facebook og Twitter, eller en liten tekst som bare lar folk få vite hvem som opprettet nettstedet.
Vi legger til en setning stolt sier at vi laget nettstedet innenfor bunntekst element.
Huske: På dette punktet legger vi fremdeles elementer som er nestet inn i kropp.
Nå, la oss gjøre en endelig gjennomgang av vår HTML-struktur så langt.
Det er lett å glemme lukkekoder, noe som vil forårsake noen feil på vår hjemmeside. Vi vil sørge for at hver tag vi åpnet har en lukkerkode.
Ser ut som alt er stengt! Tid til å begynne å legge til innhold i denne superfaste strukturen vi opprettet.
HTML lar oss skrive nyttige notater i arbeidet vårt. Disse notatene vil ikke vise seg på vår nettside, men er glimrende for å legge til nyttige biter av informasjon for andre designere som ser på vår kode.
HTML-filen for denne leksjonen (som du kan laste ned) har flere notater for å hjelpe oss å forstå det bedre.
I denne leksjonen lærte vi om hva HTML er hva elementer er, hvordan rede disse elementene, og hvordan du konfigurerer en grunnleggende HTML-struktur med noen vanlige beholderelementer.
I neste leksjon legger vi til teksten og bildene til nettstedet vårt i den nybygde strukturen.
Se deg rundt i byen!
Accentsconagua