Share
Welkom bij de vierde les van onze serie Web Design for Kids, HTML Content.
In de les vlak daarvoor, zijn we eindelijk in de codering gesprongen door het bouwen van de structuur van ons HTML-bestand met enkele HTML-elementen. Nu zullen we onze site's toevoegen inhoud in deze structuur.
Onthouden: De voltooide bestanden voor deze les kunnen hier worden gedownload. En als je ergens last van hebt, stel dan vragen in het opmerkingenveld helemaal onderaan deze pagina!
We zullen het hebben over containers veel bij het bouwen van een website, dus het is belangrijk om te begrijpen wat ze doen.
Al onze inhoud moet in de juiste HTML-stijl worden geplaatst containers. De containers zijn georganiseerd met HTML-elementen. Elk element betekent iets speciaals voor de browser en helpt het alle dingen op de pagina te begrijpen.
Om het op een andere manier te bedenken, in de illustratie hierboven bevat het gebouw alles: ramen, een deur en een klok. Een van de vensters fungeert dan als een andere container met een ontwerper van de Tuts + Town erin.
Nu we onze structuur hebben kunnen we deze invullen containers up met inhoud. Alle elementen die we in de vorige les aan ons bestand hebben toegevoegd, hebben ons geholpen om orde op zaken te stellen - ze hebben ons een plek gegeven om onze tekst en afbeeldingen in te voegen.
Laten we beginnen vanaf de top!
Zoals we het hebben gehad, is de koptekst het bovenste deel van een website en heeft deze een eigen element, , welke de eerste is die in ons lichaam is genest.
De koptekst bevat meestal een inleiding en een navigatie (een manier om andere plaatsen op de website te vinden) van een soort. Onze website heeft een uitnodigende kop en een nette afbeelding, dus laten we ze toevoegen!
We moeten "Welkom bij Tuts + Town" op de pagina, die de belangrijkste is van de website titel.
Er zijn zes verschillende niveaus van rubrieken voor een site; h1 is het belangrijkste, h6 is het minst belangrijk. In HTML wordt de tekst voor koppen in headingelementen geschreven: , , , , , of .
"Welcome To Tuts + Town" is onze hoofdtitel (het is erg belangrijk), dus we typen dit binnen de openings- en sluitingslabels van een element.
Welkom bij Tuts + Town
De browser herkent dit stukje tekst nu als onze inleidende titel.
Ook in de kop hebben we een mooi beeld van onze stad.
In onze hoofdmap "tutstown" moet je een andere map, "afbeeldingen", maken en alle afbeeldingen daarin opslaan.
Afbeeldingen worden toegevoegd met een
Zie dat
/nasrc = "images? Daar hebben we gezegd: kijk in de map met afbeeldingen/voor een bestand met de naam townheader.svg ".Daarna, voordat we de
tag we zullen een beschrijving toevoegen met eenaltattribuut.attributen zijn dingen die we kunnen toevoegen aan elementen die hen verder helpen verklaren of hen vertellen hoe ze moeten werken. Alleen bepaalde kenmerken werken binnen bepaalde elementen. Een
element zal altijd eensrcen eenaltattribuut.Belangrijk! Een
element is zelfsluitend. Dit betekent alleen dat de openingstag ook de afsluitende tag is:Laten we een kijkje nemen!
Op dit punt kunnen we onze website in de browser openen voor zien wat we tot nu toe hebben gedaan! Zoek de map "tutstown" en dubbelklik op "index.html". Dit zou de pagina in uw browser moeten openen.
Daar is onze website! Er is niet veel daar nu, maar we gaan over de verandering die. Vanaf nu, wanneer je je wijzigingen in de browser wilt bekijken, kan dat opslaan het HTML-bestand en vervolgens verversen (gebruik die kleine cirkel met een pijlpictogram bovenaan) het browservenster.
U zult ook merken dat we onze wolken nog niet kunnen zien, omdat we de gele achtergrond niet hebben toegevoegd. We zullen kijken naar dingen als achtergrondkleuren, positionering en dimensionering in onze volgende les als we erin duiken CSS.
Hoofdsectie
Het belangrijkste gedeelte van onze website bevat het grootste deel van de informatie. Goed bevatten alle super nuttige inhoud over onze stad hierin
element.Welkom bij Tuts + Town
secties
We hebben drie verwante groepen op onze website die we in drie delen zullen organiseren secties. Een gedeelte is een zelfstandig stuk van een website dat informatie bevat en ook een eigen element heeft:
.Meer structurering!
Binnen onze secties hebben we meer kleinere frames om te bouwen, zoals containers voor de kleine stukjes tekst naast de afbeeldingen.
Laten we dit een voor een doen. Elke sectie heeft een geneste afbeelding en en een element dat wat tekst bevat.
Laten we de structuur hiervan bekijken voordat we de daadwerkelijke inhoud toevoegen:
![]()
Nu hadden we het al eerder over het toevoegen van afbeeldingen. Deze afbeelding wordt op dezelfde manier toegevoegd als onze headerafbeelding, maar de bestandsnaam en beschrijving zullen anders zijn.
div
EEN
![]()
De kop en de winkellijst worden hierin opgenomen
titel
We kunnen zien dat elke sectie een kleine kop heeft: slapen, eten en winkelen. Deze vertellen ons over de kleine lijsten direct onder elke lijst. We hebben al een
voor onze introductie aan de bovenkant van de pagina, dus voor deze zullen we gebruiken, zoals dit:
Slaap
lijsten
Er zijn twee soorten HTML-lijsten, bestelde (met cijfers) en ongeordende (met opsommingstekens in plaats van cijfers). Het zijn beide echt handige manieren om gerelateerde informatie te vermelden en elke sectie van onze site bevat een korte ongeordende lijst (
) Met twee items.Genest binnen elke lijst zijn lijst items. Dit zijn de items waaruit onze lijst bestaat en waarvan ze zijn geschreven
labels.
Links
De lijsten die we zojuist hebben samengesteld, zijn bedoeld koppelingen naar de verschillende winkelwebsites, zodat onze bezoekers erop kunnen klikken om meer informatie te krijgen. Om een woord (of woorden) in een klikbare link te veranderen, moeten we dat woord in zich opnemen anker -tags. Een ankerelement ziet er als volgt uit:
.Vergelijkbaar met hoe onze
element heeft speciale attributen, de openingtag moet een bevatten attribuut inclusief het webadres van de website waarnaar we willen dat de gebruiker wordt verzonden, dehrefattribuut.Het volgende stukje code zou ons een link geven die verbonden is met het woord "hier" dat de gebruiker naar http://tutsplus.com/ zou brengen
Klik hier voor meer tutorials.Dit is precies hoe we de links naar onze lijst zullen toevoegen door elke winkelnaam in een te verpakken anker. Zowel de openende als de laatste ankertags staan in het lijstitem, de
. Het enige verschil is dat omdat dit geen echte winkels zijn, met echte websites, we een#voor dehrefwaarde en door erop te klikken, hoeven we niet naar een andere website te gaan.Hier is een blik op de allereerste vermelde winkel:
- The Snooze Inn
We hebben een ongeordende lijst gemaakt, nestelen een lijstitem in die lijst en verpakken de winkelnaam in een ankertag. Houd er echter rekening mee dat we nog geen styling hebben gedaan, dus voorlopig zal onze preview links tonen in een standaard blauw in plaats van oranje.
Sectie Wrap Up
Zodra we een volledige sectie hebben voltooid, moeten we dezelfde exacte stappen herhalen voor de laatste twee secties. Elke keer moeten we ervoor zorgen dat de inhoud verandert; de HTML-structuur is hetzelfde voor alle drie de secties, maar de tekst en afbeeldingen zullen anders zijn.
Laten we nu eens kijken naar de code voor alle drie de secties - het is vrij veel!
Slaap
- The Snooze Inn
- Zzz Hotel
Voedsel
- Alleen maar cookies
- Cake ook
Winkel
- Puppy Parade
- Koele kittens
footer
EEN
zal het eerste element zijn na de afsluitende tag van deelement; het zal niet erin genest zijn.We kunnen dan ons footer-element toevoegen aan de pagina, die op hetzelfde niveau als main zal leven omdat ze allebei in het lichaam zijn genest.
De enige inhoud die we in ons voettekst hebben is een zin over wie onze site heeft gemaakt (we deden het!). Deze inhoud wordt ingepakt in een
(paragraph) element dat is genest in de voettekst.Volledige preview
Ben je enthousiast het HTML-document opgeslagen en de browser vernieuwd terwijl we werken? Ik ook! Laten we een laatste blik werpen voordat we afronden:
Een terugblik op gebruikte elementen
We hebben het erover gehad veel van verschillende elementen hier, dus laten we snel de versies bekijken die we in ons HTML-bestand hebben gebruikt:
Bevat al onze HTML Waar we informatie over de website plaatsen </code></td> <td>De titel van de website</td> </tr> <tr> <td><code><body></code></td> <td>Bevat alle pagina-inhoud</td> </tr> <tr> <td><code></code></td> <td>Houdt onze welkomstboodschap</td> </tr> <tr> <td> <code><h1></code> en <code><h2></code> </td> <td>Onze rubrieken</td> </tr> <tr> <td><code><img></code></td> <td>Brengt een afbeelding op de pagina</td> </tr> <tr> <td><code><main></code></td> <td>Voor de belangrijkste inhoud</td> </tr> <tr> <td><code><section></code></td> <td>Splitst de pagina op in secties</td> </tr> <tr> <td><code><div></code></td> <td>Een algemene container</td> </tr> <tr> <td><code><ul></code></td> <td>Een ongeordende lijst van dingen</td> </tr> <tr> <td><code><li></code></td> <td>Een lijstitem in een lijst</td> </tr> <tr> <td><code><a></code></td> <td>Gebruikt om ergens te linken</td> </tr> <tr> <td><code><footer></code></td> <td>De onderste inhoud</td> </tr> </tbody></table><h2>Conclusie</h2><p>In deze cursus hebben we alles geleerd over het aansluiten van inhoud op de superstevige HTML-structuur die we met onze hebben gemaakt <i>blote handen</i> (nou ja, en een computer).</p><p>Vervolgens zullen we leren hoe <em>stijl</em> deze pagina om het zo mooi en uitnodigend mogelijk te maken, maar ook gemakkelijker te lezen en te gebruiken.</p><p>Ik zie je in de stad!</p> <div class="rek-block"> <center> <ins class="adsbygoogle" style="display:inline-block;width:580px;height:400px" data-ad-client="ca-pub-3810161443300697" data-ad-slot="9434875811"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </center> </div> <div class="h-alltags"> <a href="articles/webdesign">Web ontwerp</a> </div> </div> </div> </div> </div> <div class="next_posts clearfix"> <div class="n_post"> <div class="next_posts-h1 left_nh1"><a href="/articles/webdesign/web-design-for-kids-html-structure.html">Webontwerp voor kinderen HTML-structuur</a></div> <div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_11/web-design-for-kids-html-structure.png');"></div> </div> <div class="n_post"> <div class="next_posts-h1 right_nh1"><a href="/articles/webdesign/web-design-for-kids-getting-ready-to-build-a-website.html">Web Design for Kids Klaar om een website te bouwen</a></div> <div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_11/web-design-for-kids-getting-ready-to-build-a-website.png');"></div> </div> </div> <footer> <div class="container"> <div class="footer-langs"> <ul class="site-langs-list"> <li><a href="https://www.accentsconagua.com"><i class="flag flag-DE"></i>Deutsch</a></li> <li><a href="https://fr.accentsconagua.com"><i class="flag flag-FR"></i>Français</a></li> <li><a href="https://nl.accentsconagua.com"><i class="flag flag-NL"></i>Nederlands</a></li> <li><a href="https://no.accentsconagua.com"><i class="flag flag-NO"></i>Norsk</a></li> <li><a href="https://sv.accentsconagua.com"><i class="flag flag-SE"></i>Svenska</a></li> <li><a href="https://it.accentsconagua.com"><i class="flag flag-IT"></i>Italiano</a></li> <li><a href="https://es.accentsconagua.com"><i class="flag flag-ES"></i>Español</a></li> <li><a href="https://ro.accentsconagua.com"><i class="flag flag-RO"></i>Românesc</a></li> </ul> </div> <div class="h-block"><a href="/">nl.accentsconagua.com</a><div class="h-block-a"></div></div> <div class="footer-text"> Interessante informatie en nuttige tips over programmeren. Website ontwikkeling, webdesign en webontwikkeling. Photoshop-zelfstudies. Creatie van computerspellen en mobiele applicaties. Word een volledig professionele programmeur. </div> </div> </footer> <div class="search"> <img class="searchico" src="//accentsconagua.com/img/search.svg" alt=""> </div> <div class="modal"> <div class="modal-content"> <span class="close-button">×</span> <input class="searchmain" type="text" id="search-input" placeholder="Zoeken..."> <ul class="searchli" id="results-container"></ul> </div> </div> <link rel="stylesheet" href="css/flags.css"> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script> <script> window.addEventListener("load", function(){ window.cookieconsent.initialise({ "palette": { "popup": { "background": "#edeff5", "text": "#838391" }, "button": { "background": "#4b81e8" } }, "theme": "classic", "position": "bottom-right" })}); </script> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <script src="js/scripts.min.js"></script> <script src="js/common.js"></script> <link rel="stylesheet" href="css/fontawesome-all.min.css"> <script> var modal = document.querySelector(".modal"); var trigger = document.querySelector(".search"); var closeButton = document.querySelector(".close-button"); function toggleModal() { modal.classList.toggle("show-modal"); } function windowOnClick(event) { if (event.target === modal) { toggleModal(); } } trigger.addEventListener("click", toggleModal); closeButton.addEventListener("click", toggleModal); window.addEventListener("click", windowOnClick); </script> <script src="https://unpkg.com/simple-jekyll-search@1.5.0/dest/simple-jekyll-search.min.js"></script> <script> SimpleJekyllSearch({ searchInput: document.getElementById('search-input'), resultsContainer: document.getElementById('results-container'), json: '/search.json', searchResultTemplate: '<li><a href="{url}">{title}</a></li>' }) </script> <script src="jquery.unveil2.min.js"></script> <script> $('img').unveil(); </script> </body> </html>
Accentsconagua
