Share
Willkommen zur vierten Lektion unserer Web Design for Kids-Serie, HTML Content.
In der Lektion davor haben wir uns schließlich mit dem Programmieren in die Codierung eingelassen Struktur unserer HTML-Datei mit einigen HTML-Elementen. Jetzt fügen wir unsere Seiten hinzu Inhalt in diese Struktur.
Merken: Die fertigen Dateien für diese Lektion können Sie hier herunterladen. Und wenn Sie mit irgendetwas nicht weiterkommen, stellen Sie Fragen im Kommentarbereich ganz unten auf dieser Seite!
Wir werden über Container sprechen viel Wenn Sie eine Website erstellen, ist es wichtig zu verstehen, was sie tun.
Alle unsere Inhalte müssen in den richtigen HTML-Code eingefügt werden Behälter. Die Container sind mit HTML-Elementen organisiert. Jedes Element bedeutet für den Browser etwas Besonderes und hilft ihm, den gesamten Inhalt der Seite zu verstehen.
Anders ausgedrückt: In der Abbildung oben enthält das Gebäude alles: Fenster, eine Tür und eine Uhr. Eines der Fenster fungiert dann als weiterer Container mit einem Tuts + Town Designer.
Nun, da wir unsere Struktur eingerichtet haben, können wir diese füllen Behälter mit dem Inhalt auf. Alle Elemente, die wir in unserer vorherigen Lektion in unsere Datei aufgenommen haben, haben uns dabei geholfen, organisiert zu werden. Sie haben uns einen Platz gegeben, an dem Text und Bilder eingefügt werden können.
Beginnen wir von oben!
Wie gesagt, der Header ist der oberste Teil einer Website und hat sein eigenes Element, , Das ist das erste, das in unserem Körper verschachtelt ist.
Die Kopfzeile enthält in der Regel eine Einleitung und a Navigation (eine Möglichkeit, andere Orte auf der Website zu finden). Unsere Website hat eine einladende Überschrift und ein hübsches Bild, also fügen wir sie hinzu!
Wir müssen "Welcome to Tuts + Town" auf der Seite aufrufen, die die Hauptseite der Website darstellt Überschrift.
Es gibt sechs verschiedene Überschriftenebenen für eine Site. h1 ist das wichtigste, h6 ist das unwichtigste. In HTML wird der Text für Überschriften in Überschriftenelementen geschrieben: , , , , , oder .
"Welcome To Tuts + Town" ist unsere Hauptüberschrift (es ist sehr wichtig), deshalb geben wir dies in die Eröffnungs- und Schließungs-Tags von ein Element.
Willkommen bei Tuts + Town
Der Browser erkennt dieses Textstück nun als einleitende Überschrift.
Auch im Header haben wir ein schönes Bild von unserer Stadt.
In unserem Hauptordner "tutstown" müssen Sie einen weiteren Ordner erstellen, "images", und alle darin enthaltenen Bilder speichern.
Bilder werden mit einem hinzugefügt
Siehst du das
/nach demsrc = "Bilder? Dort haben wir gesagt: "Schauen Sie im Bilderordner nach/für eine Datei mit dem Namen townheader.svg ”.Dann, bevor wir fertig sind
tag fügen wir eine Beschreibung mit einaltAttribut.Attribute Dies sind Dinge, die wir Elementen hinzufügen können, die sie weiter erklären oder ihnen erklären, wie sie arbeiten sollen. Nur bestimmte Attribute funktionieren innerhalb bestimmter Elemente. Ein
Element wird immer einsrcund einaltAttribut.Wichtig! Ein
Element ist selbstschließend. Dies bedeutet nur, dass das öffnende Tag auch das schließende Tag ist:Lassen Sie uns einen Blick werfen!
An dieser Stelle können wir unsere Website im Browser öffnen sehen was wir bisher gemacht haben! Suchen Sie den Ordner "tutstown" und doppelklicken Sie auf "index.html". Dies sollte die Seite in Ihrem Browser öffnen.
Da ist unsere Website! Es ist nicht viel da jetzt, aber es geht uns darum, das zu ändern. Ab sofort können Sie Ihre Änderungen jederzeit im Browser anzeigen sparen die HTML-Datei und dann Aktualisierung (Verwenden Sie diesen kleinen Kreis mit einem Pfeilsymbol oben) das Browserfenster.
Sie werden auch bemerken, dass wir unsere Wolken noch nicht sehen können, weil wir den gelben Hintergrund nicht hinzugefügt haben. Wenn wir in die nächste Lektion einsteigen, werden wir in unserer nächsten Lektion Dinge wie Hintergrundfarben, Positionierung und Größenbestimmung betrachten CSS.
Hauptteil
Der Hauptteil unserer Website enthält den Hauptteil der Informationen. Gut enthalten all die super nützlichen Inhalte über unsere Stadt in dieser
Element.Willkommen bei Tuts + Town
Abschnitte
Wir haben drei verwandte Gruppen auf unserer Website, die wir in drei Gruppen einteilen werden Abschnitte. Ein Abschnitt ist ein eigenständiger Teil einer Website, der Informationen enthält und auch ein eigenes Element enthält:
.Mehr Strukturierung!
In unseren Abschnitten müssen wir mehr kleinere Rahmen erstellen, z. B. Container für die kleinen Textteile neben den Bildern.
Lassen Sie uns dies einen Abschnitt nach dem anderen machen. Jeder Abschnitt enthält ein verschachteltes Bild und ein Element, das Text enthält.
Werfen wir einen Blick auf die Struktur, bevor wir den eigentlichen Inhalt hinzufügen:
![]()
Jetzt haben wir vorher über das Hinzufügen von Bildern gesprochen. Dieses Bild wird auf dieselbe Weise wie unser Kopfbild hinzugefügt, aber der Dateiname und die Beschreibung unterscheiden sich.
Div
EIN
![]()
Die Überschrift und die Einkaufsliste werden darin enthalten sein
Überschrift
Wir können sehen, dass jeder Abschnitt eine kleine Überschrift hat: Schlaf, Essen und Laden. Diese erzählen uns von den kleinen Listen direkt unter jeder. Wir haben schon eine verwendet
für unsere Einführung oben auf der Seite, also werden wir diese verwenden, so was:
Schlafen
Listen
Es gibt zwei Arten von HTML-Listen, bestellt (mit Zahlen) und ungeordnet (mit Aufzählungszeichen statt Zahlen). Beide sind sehr praktische Möglichkeiten, um relevante Informationen aufzulisten, und jeder Abschnitt unserer Website enthält eine Kurzbeschreibung ungeordnet Liste (
) Mit zwei Artikeln.In jeder Liste sind verschachtelt Listenelemente. Dies sind die Elemente, aus denen sich unsere Liste zusammensetzt
Stichworte.
Links
Die Listen, die wir gerade zusammengestellt haben, sollen sein Links zu den verschiedenen Shop-Websites, damit unsere Besucher darauf klicken können, um weitere Informationen zu erhalten. Um ein Wort (oder Wörter) in einen anklickbaren Link zu verwandeln, müssen wir dieses Wort in sich einschließen Anker Stichworte. Ein Ankerelement sieht folgendermaßen aus:
.Ähnlich wie unser
Element hat spezielle Attribute, die ÖffnungDas Tag muss ein Attribut Dazu gehört die Webadresse der Website, an die der Benutzer gesendet werden sollhrefAttribut.Der folgende Code würde uns einen Link geben, der mit dem Wort "hier" verbunden ist und den Benutzer zu http://tutsplus.com/ führt.
Weitere Tutorials finden Sie hier.Genau so fügen wir die Links zu unserer Liste hinzu, indem wir jeden Shopnamen in einen einschließen Anker. Sowohl die öffnenden als auch die schließenden Ankertags befinden sich innerhalb des Listenelements, der
. Der einzige Unterschied ist, dass es sich bei diesen Shops nicht um echte Shops handelt#für diehrefWert und Klicken auf ihn führt nicht zu einer anderen Website.Hier ist der allererste Shop, der aufgelistet ist:
- Das Snooze Inn
Wir haben eine ungeordnete Liste erstellt, ein Listenelement in diese Liste geschachtelt und den Namen des Geschäfts in ein Ankertag eingebettet. Beachten Sie jedoch, dass wir noch kein Styling vorgenommen haben. Daher werden in der Vorschau Links standardmäßig in Blau statt in Orange angezeigt.
Abschnitt Nachbearbeitung
Sobald wir einen vollständigen Abschnitt abgeschlossen haben, müssen wir dieselben Schritte für die letzten beiden Abschnitte wiederholen. Jedes Mal müssen wir sicherstellen, dass sich der Inhalt ändert. Die HTML-Struktur ist für alle drei Abschnitte gleich, Text und Bilder sind jedoch unterschiedlich.
Lassen Sie uns nun den Code für alle drei Abschnitte überprüfen - es ist ziemlich viel!
Schlafen
- Das Snooze Inn
- Zzz Hotel
Essen
- Nur Kekse
- Kuchen auch
Geschäft
- Welpenparade
- Coole Kätzchen
Fußzeile
EIN
ist das erste Element nach dem schließenden Tag desElement; es wird nicht verschachtelt sein.Wir können dann unser Fußzeilenelement zur Seite hinzufügen, die auf der gleichen Ebene wie main lebt, da beide im Hauptteil verschachtelt sind.
Der einzige Inhalt, den wir in unserer Fußzeile haben, ist ein Satz darüber, wer unsere Site gemacht hat (wir haben es getan!). Dieser Inhalt wird in eine
(Absatz) Element, das in der Fußzeile verschachtelt ist.Vollständige Vorschau
Haben Sie das HTML-Dokument aufgeregt gespeichert und den Browser aktualisiert, während wir arbeiten? Ich auch! Werfen wir einen letzten Blick, bevor wir fertig sind:
Ein Blick zurück auf die verwendeten Elemente
Wir haben darüber gesprochen viel von verschiedenen Elementen hier, lassen Sie uns kurz die in unserer HTML-Datei verwendeten Elemente überprüfen:
Enthält alles HTML Wo wir Informationen über die Website eingeben </code></td> <td>Der Titel der Website</td> </tr> <tr> <td><code><body></code></td> <td>Enthält den gesamten Seiteninhalt</td> </tr> <tr> <td><code></code></td> <td>Hält unsere Begrüßung</td> </tr> <tr> <td> <code><h1></code> und <code><h2></code> </td> <td>Unsere Überschriften</td> </tr> <tr> <td><code><img></code></td> <td>Bringt ein Bild auf die Seite</td> </tr> <tr> <td><code><main></code></td> <td>Für den Hauptinhalt</td> </tr> <tr> <td><code><section></code></td> <td>Unterteilt die Seite in Abschnitte</td> </tr> <tr> <td><code><div></code></td> <td>Ein allgemeiner Container</td> </tr> <tr> <td><code><ul></code></td> <td>Eine ungeordnete Liste von Dingen</td> </tr> <tr> <td><code><li></code></td> <td>Ein Listenelement innerhalb einer Liste</td> </tr> <tr> <td><code><a></code></td> <td>Wird verwendet, um irgendwo zu verlinken</td> </tr> <tr> <td><code><footer></code></td> <td>Der untere Inhalt</td> </tr> </tbody></table><h2>Fazit</h2><p>In diesem Kurs haben wir gelernt, wie Sie Inhalte in die super robuste HTML-Struktur einfügen, die wir mit unserer erstellt haben <i>nackte Hände</i> (gut und ein Computer).</p><p>Als nächstes lernen wir es <em>Stil</em> Diese Seite soll es so hübsch und einladend wie möglich gestalten, aber auch einfacher zu lesen und zu verwenden.</p><p>Wir sehen uns in der Stadt!</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-Design</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 für Kinder 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 für Kinder Erste Schritte zum Erstellen einer Website</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="/">accentsconagua.com</a><div class="h-block-a"></div></div> <div class="footer-text"> Interessante Informationen und nützliche Tipps zur Programmierung. Website-Entwicklung, Webdesign und Webentwicklung. Photoshop-Tutorials. Erstellung von Computerspielen und mobilen Anwendungen. Werden Sie von Grund auf professioneller Programmierer. </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="Suche..."> <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
