Share
Welkom bij de derde les van onze serie Web Design for Kids, HTML-structuur!
We zullen leren hoe we onze site's kunnen schrijven structuur met HTML. Deze structuur zorgt ervoor dat we klaar zijn voor de inhoud van de site, die we in de volgende les zullen toevoegen.
Als we het webontwerpproces zouden vergelijken met een gebouw (zoals een Tuts + Town-gebouw!), Zou de HTML zoiets zijn als het gebouw fundament en framing; het is de basis van waaruit al het andere is gebouwd.
Belangrijk! De bestanden die we in deze les zullen maken, kunnen hier worden gedownload.
We hebben al vaak over HTML in deze serie gesproken, maar hebben nog niet gesproken over wat het is precies, anders dan een "super coole geheime taal". Het internet draait allemaal om talen en communicatie, en HTML is een belangrijk onderdeel van dit alles.
HyperText Markup Language, HTML, is een taal die merkt op de inhoud van een site voor een browser om te begrijpen en weer te geven. Het geeft structuur aan een regulier oud tekstbestand dat een browser anders niet zou kunnen lezen.
We kunnen bijvoorbeeld geen alinea in onze teksteditors typen en verwachten dat een browser weet dat het een alinea is. De alineatekst moet binnen de juiste HTML-opmaak, een alinea of element (een beetje leuk uitziende tekst zoals de hier laat alleen zien dat deze tekst ook code is).
HTML is gemaakt van elementen die een belangrijke betekenis hebben, zoals het hierboven genoemde alinea-element. Elk element heeft een opening (het begin) en een afsluitende (het einde) -tag, met site-inhoud geschreven tussen deze twee tags.
Deze openings- en sluitingstags voor elk element worden geschreven tussen punthaken (zoals deze: < >), hoewel een afsluitende tag ook een schuine streep naar voren heeft (zoals deze: < / >).
In de vorige cursus hebben we ons websiteontwerp opgesteld en nu is het tijd om de structuur, of framing, van dit ontwerp voor te bereiden.
We beginnen dit door enkele algemene opmerkingen toe te voegen aan ons voorbeeld van de site om een beter idee te krijgen hoe dit het beste in kaart kan worden gebracht.
Binnen de lichaam van ons html-bestand zullen we verschillende primaire elementen hebben: hoofd, een hoofd deel en a footer.
We hebben ook gesproken over het instellen van sitebestanden in de vorige les, dus nu gaan we deze kennis in daden omzetten!
Onthouden: "Index" is de bestandsnaam en ".html" is de extensie, die ons het bestandstype vertelt.
Websites kunnen uit vele, vele pagina's bestaan, dus de hoofdpagina wordt altijd "index.html" genoemd om te zeggen "Hé, dit is waar het allemaal begint!"
Laten we nu eindelijk wat HTML schrijven.
Nu kunnen we onze structuur toevoegen. Nogmaals, beschouw dit als het samenstellen van een gebouw, we moeten de framing op zijn plaats krijgen.
Het allereerste stukje HTML dat we gaan schrijven is het die de browser vertelt: "Hé, dit is een HTML-document!"
Dan, daaronder, hebben we de element:
Al het andere zal zijn genesteld binnen dit element.
"Als een vogelnest?" Nou ja, misschien meer zoals nestelende poppen, of om bij ons nette stadsthema te blijven, geneste gebouwen. Nesten is wat er gebeurt als we een element plaatsen binnen van een andere.
Het stukje code hieronder toont een nesten van een paragraafelement binnen het lichaamselement, omdat het tussen de openings- en sluitingslabels van het lichaam leeft.
Dit alinea-element is genest in het body-element.
We maken de code in ons HTML-bestand leesbaarder door te duwen genesteld elementen verder naar rechts. Zoals dit:
OK, terug naar het werk ...
Nu genest hierin html element dat we willen toevoegen hoofd element.
De hoofd zal de bevatten titel van onze pagina, die zal verschijnen in een browsertabblad. Veel nesten!
Tuts Town
Veel van wat is inbegrepen in de hoofd van een HTML-document is niet zichtbaar op de website zelf, maar in plaats daarvan helpt het zoekmachines, zoals Google, te vertellen waar onze website over gaat.
Later, wanneer we een nieuw bestand maken om stijlen aan deze toe te voegen, zullen we deze twee documenten samen verbinden via een link die is toegevoegd in de hoofd. Het is dus een soort controlecentrum achter de schermen dat de bezoekers van onze website meestal niet te zien krijgen.
Alles op onze site dat we in de browser zullen zien, zal genest worden binnen de lichaam, en dit is waar het plezier echt begint!
De hoofd element is niet hetzelfde als de hoofd element waar we al over gesproken hebben. De hoofd leeft in de lichaam en bevat over het algemeen alle dingen bovenaan een site.
Het allereerste wat we bovenaan onze site hebben is een koptekst met wat tekst en een afbeelding van Tuts + Town.
Tuts Town
We zullen alleen de hoofd voor nu om voor te bereiden op de inhoud die moet worden opgenomen.
Het grootste deel van de site Tuts + Town bevat de belangrijkste informatie. De lijst met bedrijven in de stad is waar onze website over gaat, dus al deze inhoud zal leven binnen een element genaamd hoofd.
We zullen het hebben over de kleinere containers (zoals de drie verschillende groepen: Sleep, Food en Shop) binnen dit grotere hoofd container in de volgende les wanneer we de inhoud toevoegen.
De footer is het gedeelte helemaal aan het einde van de site. Meestal zien we hier enkele links, zoals voor Facebook en Twitter, of een kleine tekst die mensen laat weten wie de site heeft gemaakt.
We zullen een zin toevoegen trots zeggen dat we de site hebben gemaakt binnen de footer element.
Onthouden: op dit punt voegen we nog steeds elementen toe die zijn genest in de lichaam.
Laten we nu een laatste overzicht van onze HTML-structuur maken.
Het is gemakkelijk om afsluitende tags te vergeten, wat voor sommigen zorgt fouten op onze website. We willen ervoor zorgen dat elk tag die we hebben geopend, heeft een afsluitende tag.
Het lijkt erop dat alles is gesloten! Tijd om inhoud toe te voegen aan deze super solide structuur die we hebben gemaakt.
HTML laat ons nuttige notities schrijven binnen ons werk. Deze aantekeningen zullen niet op onze website verschijnen, maar zijn geweldig om nuttige stukjes informatie toe te voegen voor andere ontwerpers die onze code bekijken.
Het HTML-bestand voor deze les (die u kunt downloaden) bevat verschillende opmerkingen om ons dit beter te kunnen begrijpen.
In deze les hebben we geleerd wat HTML is wat elementen zijn, hoe nest deze elementen en hoe u een eenvoudige HTML-structuur kunt instellen met enkele algemene containerelementen.
In de volgende les zullen we de tekst en afbeeldingen van onze site toevoegen aan de nieuw gebouwde structuur.
Ik zie je in de stad!
Accentsconagua