Share
Välkommen till den fjärde lektionen i vår webbdesign för barnserie, HTML-innehåll.
I lektionen precis före detta hoppade vi äntligen in i kodningen genom att bygga strukturera av vår HTML-fil med vissa HTML-element. Nu lägger vi till vår webbplats innehåll in i denna struktur.
Kom ihåg: De färdiga filerna för den här lektionen kan hämtas här. Och om du fastnar med något, fråga frågor i kommentarfältet längst ner på den här sidan!
Vi kommer att prata om behållare mycket när man bygger en webbplats, så är det viktigt att förstå vad de gör.
Allt vårt innehåll måste placeras inuti rätt typ av HTML behållare. Behållarna är organiserade med HTML-element. Varje element betyder något speciellt för webbläsaren, vilket hjälper till att förstå alla saker på sidan.
Att tänka på det på ett annat sätt, i bilden ovan innehåller byggnaden allt: fönster, en dörr och en klocka. En av fönstren fungerar då som en annan behållare med en Tuts + Stadsdesigner inuti.
Nu när vi har vår struktur på plats kan vi fylla dessa behållare upp med innehåll. Alla de element som vi lagt till i vår fil i den tidigare lektionen hjälpte oss att bli organiserade - de har gett oss en plats för att infoga vår text och bilder.
Låt oss börja från toppen!
Som vi pratat om är rubriken den allra högsta delen av en webbplats och har sitt eget element, , vilken är den första som är inburen i vår kropp.
Rubriken innehåller i allmänhet en introduktion och a navigering (ett sätt att hitta andra platser på webbplatsen) av något slag. Vår hemsida har en välkomnande rubrik och en snygg bild, så låt oss lägga till dem!
Vi behöver få "Välkommen till Tuts + Town" på sidan, vilket är webbplatsens viktigaste rubrik.
Det finns sex olika nivåer av rubriker för en webbplats; h1 är det viktigaste, h6 är minst viktigt. I HTML skrivs texten för rubriker inom rubrikelement: , , , , , eller .
"Välkommen till Tuts + Town" är vårt huvudrubrik (det är väldigt viktigt), så vi skriver in det i öppnings- och stängningskoderna för en element.
Välkommen till Tuts + Town
Webbläsaren kommer nu att känna igen den här texten som vår inledande rubrik.
Också i rubriken har vi en härlig bild av vår stad.
I vår huvudsakliga "tutstown" -mapp behöver du skapa en annan mapp, "bilder" och spara alla bilder där inne.
Bilder läggs till med en
Se det
/eftersrc = "bilder? Där har vi sagt "titta i bilderna mappen/för en fil som heter townheader.svg ".Sedan, innan vi avslutar
tagg kommer vi att inkludera en beskrivning med enaltattribut.attribut är saker vi kan lägga till element som hjälper till att förklara dem mer eller berätta hur de ska arbeta. Endast vissa attribut fungerar inom vissa delar. En
elementet kommer alltid att ha ensrcoch enaltattribut.Viktig! En
elementet är självstängande. Detta betyder bara att öppningsetiketten också är stängningskoden:Låt oss ta en titt!
Vid denna tidpunkt kan vi öppna vår hemsida i webbläsaren till se vad vi har gjort hittills! Hitta mappen "tutstown" och dubbelklicka på "index.html". Detta borde öppna sidan i din webbläsare.
Det finns vår hemsida! Det finns inte mycket där nu, men vi handlar om förändringen som. Från och med nu kan du, när du vill se dina ändringar i webbläsaren spara HTML-filen och sedan refresh (med den lilla cirkeln med en pilikon upptill) i webbläsarfönstret.
Du märker också att vi inte kan se våra moln ännu, för att vi inte har lagt till den gula bakgrunden. Vi tittar på saker som bakgrundsfärger, positionering och limning i vår nästa lektion när vi dyker in CSS.
Huvudavsnittet
Huvuddelen av vår hemsida innehåller huvuddelen av informationen. Väl innehålla all super användbar innehåll om vår stad inom detta
element.Välkommen till Tuts + Town
sektioner
Vi har tre relaterade grupper på vår hemsida som vi kommer att organisera i tre sektioner. En sektion är en fristående del av en webbplats som innehåller information och har också ett eget element:
.Mer strukturering!
Inom våra avsnitt har vi fler mindre ramar att bygga, som behållare för de små bitarna av text bredvid bilderna.
Låt oss göra det här avsnittet åt gången. Varje sektion har en kapslad bild och ett element som innehåller lite text.
Låt oss ta en titt på strukturen för detta innan vi lägger till det faktiska innehållet:
![]()
Nu pratade vi om att lägga till bilder tidigare. Den här bilden läggs till på samma sätt som vår huvudbild, men filnamnet och beskrivningen kommer att vara annorlunda.
div
en
![]()
Rubriken och butikslistan kommer att finnas med av detta
Rubrik
Vi kan se att varje avsnitt har en liten rubrik: Sova, mat och butik. Dessa berättar om de små listorna precis under varje. Vi använde redan en
för vår introduktion längst upp på sidan, så för dessa kommer vi att använda, så här:
Sova
listor
Det finns två typer av HTML-listor, beordrade (med siffror) och obeställd (med punkter i stället för siffror). De är båda verkligen praktiska sätt att lista relaterad information och varje avsnitt på vår webbplats innehåller en kort obeställd lista (
) Med två saker.Nested inom varje lista är listobjekt. Dessa är de saker som utgör vår lista och de är skrivna inom
taggar.
länkar
De listor vi bara sätter ihop är tänkt att vara länkar till olika butikswebbplatser, så våra besökare kan klicka på dem för att få mer information. För att göra ett ord (eller ord) till en klickbar länk måste vi sätta in det här ordet inom ankare taggar. Ett ankareelement ser så här ut:
.Liknande hur vår
element har speciella attribut, öppningentaggen måste innehålla en attribut som inkluderar webbadressen till webbplatsen som vi vill att användaren ska skickas till,hrefattribut.Följande bit kod skulle ge oss en länk kopplad till ordet "här" som skulle ta användaren till http://tutsplus.com/
För mer handledning klicka här.Det här är exakt hur vi lägger till länkarna till vår lista genom att förpacka varje butiksnamn i en ankare. Både öppning och stängning ankare taggar kommer att ligga inom listan objektet,
. Den enda skillnaden är att eftersom dessa inte är riktiga affärer, med riktiga webbplatser, kommer vi att sätta en#förhrefvärde och klicka på det tar inte oss till en annan webbplats.Här är en titt på den allra första butiken som listas:
- Snooze Inn
Vi skapade en oorderad lista, näste ett listobjekt inuti den listan, och inpakade sedan butiksnamnet i en ankare. Tänk på att vi inte har gjort någon styling, men för närvarande visar vår förhandsvisning länkar i en standardblå istället för orange.
Avsnittsomslag
När vi har en fullständig sektion klar måste vi upprepa samma exakta steg för de två sista sektionerna. Varje gång vi behöver se till att innehållet ändras. HTML-strukturen kommer att vara densamma för alla tre sektioner, men texten och bilderna kommer att vara olika.
Nu, låt oss granska koden för alla tre avsnitt - det är ganska mycket!
Sova
- Snooze Inn
- Zzz Hotel
Mat
- Bara kakor
- Cake Too
affär
- Valparade
- Coola kattungar
sidfot
en
kommer att vara det första elementet efter den sista taggen avelement; Det kommer inte nestas inuti den.Vi kan sedan lägga till vårt sidfot på sidan, som kommer att leva på samma nivå som huvud eftersom de är båda nestade i kroppen.
Det enda innehållet vi har inom vår footer är en mening om vem som gjorde vår sida (vi gjorde!). Detta innehåll kommer att vara inslaget i en
(punkt) element som är näst i sidfoten.Full förhandsvisning
Har du glatt att spara HTML-dokumentet och uppdatera webbläsaren när vi jobbar? Jag också! Låt oss ta en sista titt innan vi sätter ihop:
En titt tillbaka på använda element
Vi har pratat om mycket av olika element här så låt oss snabbt granska de vi har använt i vår HTML-fil:
Håller alla våra HTML Där lägger vi information om webbplatsen </code></td> <td>Titeln på webbplatsen</td> </tr> <tr> <td><code><body></code></td> <td>Håller alla sidinnehåll</td> </tr> <tr> <td><code></code></td> <td>Håller vårt välkomna meddelande</td> </tr> <tr> <td> <code><h1></code> och <code><h2></code> </td> <td>Våra rubriker</td> </tr> <tr> <td><code><img></code></td> <td>Tar en bild på sidan</td> </tr> <tr> <td><code><main></code></td> <td>För huvudinnehållet</td> </tr> <tr> <td><code><section></code></td> <td>Splits sidan i sektioner</td> </tr> <tr> <td><code><div></code></td> <td>En allmän behållare</td> </tr> <tr> <td><code><ul></code></td> <td>En orörd lista över saker</td> </tr> <tr> <td><code><li></code></td> <td>En lista i en lista</td> </tr> <tr> <td><code><a></code></td> <td>Används för att länka någonstans</td> </tr> <tr> <td><code><footer></code></td> <td>Bottenhalten</td> </tr> </tbody></table><h2>Slutsats</h2><p>I den här kursen lärde vi oss allt om hur man pluggar innehållet i den super stabila HTML-strukturen vi gjorde med vår <i>bara händer</i> (ja, och en dator).</p><p>Nästa kommer vi att lära oss hur <em>stil</em> den här sidan för att göra den så vacker och inbjudande som möjligt, men också lättare att läsa och använda.</p><p>Vi ses runt om i staden!</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">Webbdesign</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">Webbdesign för 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">Webbdesign för barn Att bli redo att bygga en webbplats</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="/">ro.accentsconagua.com</a><div class="h-block-a"></div></div> <div class="footer-text"> Informații interesante și sfaturi utile privind programarea. Dezvoltarea de site-uri, web design si dezvoltare web. Tutoriale Photoshop. Crearea de jocuri pe calculator și aplicații mobile. Deveniți un programator profesionist de la zero. </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="Căutare..."> <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
