Share
Velkommen til den fjerde leksjonen i vår Web Design for Kids-serie, HTML-innhold.
I leksjonen rett før dette hoppet vi endelig inn i kodingen ved å bygge struktur av vår HTML-fil med noen HTML-elementer. Nå skal vi legge til nettstedet vårt innhold inn i denne strukturen.
Huske: De ferdige filene for denne leksjonen kan lastes ned her. Og hvis du sitter fast med noe, still spørsmål i kommentarfeltet helt nederst på denne siden!
Vi skal snakke om containere mye når du bygger et nettsted, så er det viktig å forstå hva de gjør.
Alt vårt innhold må plasseres i den riktige typen HTML beholdere. Beholderne er organisert med HTML-elementer. Hvert element betyr noe spesielt for nettleseren, og hjelper det å forstå alle ting på siden.
Å tenke på det på en annen måte, i illustrasjonen ovenfor inneholder bygningen alt: vinduer, en dør og en klokke. En av vinduene fungerer da som en annen beholder med en Tuts + Town designer inne.
Nå som vi har vår struktur på plass, kan vi fylle disse beholdere opp med innhold. Alle elementene vi la til i vår fil i forrige leksjon, hjalp oss med å bli organisert - de har gitt oss et sted å sette inn vår tekst og bilder.
La oss starte fra toppen!
Som vi snakket om, er toppteksten den aller beste delen av et nettsted og har sitt eget element, , som er den første som er nestet i kroppen vår.
Overskriften inneholder vanligvis en introduksjon og a navigasjon (en måte å finne andre steder på nettsiden) av noe slag. Vår nettside har en innbydende overskrift og et pent bilde, så la oss legge til dem!
Vi trenger å få "Velkommen til Tuts + By" på siden, som er nettstedets viktigste overskrift.
Det er seks forskjellige nivåer av overskrifter for et nettsted; h1 er det viktigste, h6 er minst viktig. I HTML er teksten for overskrifter skrevet i overskriftselementer: , , , , , eller .
"Velkommen til Tuts + By" er vår hovedoverskrift (det er veldig viktig), så vi vil skrive dette inn i åpnings- og lukkekoder av en element.
Velkommen til Tuts + Town
Nettleseren vil nå gjenkjenne denne teksten som vår innledende overskrift.
Også i overskriften har vi et herlig bilde av byen vår.
I vår hovedkatalog "tutstown" må du opprette en annen mappe, "bilder" og lagre alle bildene der inne.
Bilder legges til med en
Se det
/ettersrc = "bilder? Der har vi sagt "se i bildemappen/for en fil som heter townheader.svg ".Så, før vi er ferdig med
tag vil vi inkludere en beskrivelse med enaltEgenskap.Egenskaper er ting vi kan legge til elementer som hjelper til med å forklare dem, eller fortelle dem hvordan de skal fungere. Bare bestemte attributter fungerer innenfor enkelte elementer. en
elementet vil alltid ha asrcog enaltEgenskap.Viktig! en
elementet er selvlukkende. Dette betyr bare at åpningskoden også er den avsluttende taggen:La oss ta en titt!
På dette tidspunktet kan vi åpne nettstedet vårt i nettleseren til se hva vi har gjort så langt! Finn mappen "tutstown" og dobbeltklikk på "index.html". Dette bør åpne siden i nettleseren din.
Det er vår nettside! Det er ikke mye der nå, men vi handler om forandringen det. Fra nå av, når du vil se endringene i nettleseren, kan du lagre HTML-filen og deretter forfriske (ved hjelp av den lille sirkelen med et pilikon øverst) i nettleservinduet.
Du vil også legge merke til at vi ikke kan se våre skyer enda, fordi vi ikke har lagt til den gule bakgrunnen. Vi ser på ting som bakgrunnsfarger, posisjonering og dimensjonering i vår neste leksjon når vi dykker inn CSS.
Hoveddel
Hoveddelen av nettstedet vårt inneholder hoveddelen av informasjonen. Vi vil inneholde alt super nyttig innhold om byen vår i dette
element.Velkommen til Tuts + Town
seksjoner
Vi har tre beslektede grupper på vår nettside som vi vil organisere inn i tre seksjoner. En seksjon er et frittstående stykke av et nettsted som inneholder informasjon og har også sitt eget element:
.Mer strukturering!
Innenfor våre seksjoner har vi flere mindre rammer å bygge, som beholdere for små biter av tekst ved siden av bildene.
La oss gjøre denne delen av gangen. Hver seksjon har et nestet bilde og et element som inneholder litt tekst.
La oss se på strukturen for dette før vi legger til det faktiske innholdet:
![]()
Nå snakket vi om å legge til bilder tidligere. Dette bildet blir lagt til på samme måte som vårt topptekstbilde, men filnavnet og beskrivelsen vil være annerledes.
div
EN
![]()
Overskriften og butikklisten vil bli inkludert av dette
Overskrift
Vi ser at hver seksjon har en liten overskrift: Søvn, mat og butikk. Disse forteller oss om de små lister rett under hver enkelt. Vi brukte allerede en
for introduksjonen vår øverst på siden, så for disse vil vi bruke, som dette:
Sove
lister
Det finnes to typer HTML-lister, bestilt (med tall) og uordnet (med punktpunkter i stedet for tall). De er begge veldig praktiske måter å liste opp relatert informasjon til, og hver del av nettstedet inneholder kort uordnet liste (
) Med to elementer.Nestet innenfor hver liste er liste elementer. Dette er elementene som utgjør vår liste og de er skrevet inn
tags.
lenker
Lister vi nettopp har satt sammen er ment å være lenker til de forskjellige butikkstedene, slik at våre besøkende kan klikke på dem for å få mer informasjon. For å slå et ord (eller ord) inn i en klikkbar lenke, må vi pakke inn det ordet innen anker tags. Et ankerelement ser slik ut:
.Ligner på hvordan vår
Elementet har spesielle egenskaper, åpningentag må inneholde en Egenskap som inkluderer nettadressen til nettstedet vi vil at brukeren skal sendes til,hrefEgenskap.Følgende bit av kode ville gi oss en kobling knyttet til ordet "her" som ville ta brukeren til http://tutsplus.com/
For flere opplæringsprogrammer klikk her.Dette er akkurat slik vi legger til koblingene til listen vår, ved å pakke inn hver butiksnavn i en anker. Både åpning og lukking ankeretiketter vil være innenfor listen elementet,
. Den eneste forskjellen er at fordi disse ikke er ekte butikker, med ekte nettsteder, vil vi være å sette en#forhrefverdi og klikk på det vil ikke ta oss til et annet nettsted.Her er en titt på den aller første butikken som er oppført:
- The Snooze Inn
Vi opprettet en uordnet liste, nest et listepunkt i den aktuelle listen, og pakket inn butikknavnet i en ankermerke. Vær oppmerksom på at vi ikke har gjort noen styling ennå, men for nå vil forhåndsvisningen vise koblinger i en standard blå i stedet for oransje.
Seksjon Wrap Up
Når vi har en full seksjon fullført, må vi gjenta de samme nøyaktige trinnene for de to siste seksjonene. Hver gang vi må sørge for at innholdet endres. HTML-strukturen vil være den samme for alle tre seksjoner, men teksten og bildene vil være forskjellige.
Nå, la oss se på koden for alle tre seksjonene - det er ganske mye!
Sove
- The Snooze Inn
- Zzz Hotel
Mat
- Bare kaker
- Cake Too
Butikk
- Valpeparade
- Kule kattunger
bunntekst
EN
vil være det første elementet etter sluttkoden tilelement; det vil ikke være nestet inne i den.Vi kan da legge til vår sideelement på siden, som vil leve på samme nivå som hoved fordi de begge er nestet i kroppen.
Det eneste innholdet vi har i vår side er en setning om hvem som gjorde nettstedet vårt (vi gjorde!). Dette innholdet vil bli pakket inn i en
(avsnitt) element som er nestet i bunnteksten.Full forhåndsvisning
Har du vært glade for å lagre HTML-dokumentet og forfriske nettleseren når vi jobber? Jeg også! La oss ta en endelig titt før vi pakker opp:
En titt tilbake på elementene som brukes
Vi har snakket om mye av forskjellige elementer her, så la oss raskt vurdere de vi har brukt i vår HTML-fil:
Holder hele vår HTML Der legger vi informasjon om nettstedet </code></td> <td>Tittelen på nettstedet</td> </tr> <tr> <td><code><body></code></td> <td>Holder alt sidens innhold</td> </tr> <tr> <td><code></code></td> <td>Holder vår innbydende melding</td> </tr> <tr> <td> <code><h1></code> og <code><h2></code> </td> <td>Våre overskrifter</td> </tr> <tr> <td><code><img></code></td> <td>Tar et bilde på siden</td> </tr> <tr> <td><code><main></code></td> <td>For hovedinnholdet</td> </tr> <tr> <td><code><section></code></td> <td>Splits siden i seksjoner</td> </tr> <tr> <td><code><div></code></td> <td>En generell beholder</td> </tr> <tr> <td><code><ul></code></td> <td>En uordnet liste over ting</td> </tr> <tr> <td><code><li></code></td> <td>En liste i en liste</td> </tr> <tr> <td><code><a></code></td> <td>Brukes til å koble et sted</td> </tr> <tr> <td><code><footer></code></td> <td>Bunninnholdet</td> </tr> </tbody></table><h2>Konklusjon</h2><p>I dette kurset lærte vi alt om hvordan å plugge innhold inn i den super robuste HTML-strukturen vi laget med vår <i>bare hender</i> (vel og en datamaskin).</p><p>Neste vil vi lære å <em>stil</em> denne siden for å gjøre den så pen og innbydende som mulig, men også lettere å lese og bruke.</p><p>Se deg rundt i byen!</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">Webdesign</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">Webdesign for barn HTML-struktur</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">Webdesign for barn Gjør deg klar til å bygge et nettsted</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="/">no.accentsconagua.com</a><div class="h-block-a"></div></div> <div class="footer-text"> Interessant informasjon og nyttige tips om programmering. Nettstedutvikling, webdesign og webutvikling. Photoshop opplæringsprogrammer. Opprettelse av dataspill og mobile applikasjoner. Bli en profesjonell programmerer fra grunnen av. </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="Søke..."> <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
