Share
Willkommen zur dritten Lektion unserer Web Design for Kids-Reihe, HTML Structure!
Wir werden lernen, wie man unsere Website schreibt Struktur mit HTML. Diese Struktur wird uns auf den Inhalt der Site vorbereiten, den wir in der nächsten Lektion hinzufügen werden.
Wenn wir den Webdesign-Prozess mit einem Gebäude (wie einem Tuts + Town-Gebäude!) Vergleichen, wäre der HTML-Code so ähnlich wie der des Gebäudes Stiftung und Rahmung; es ist die Basis, auf der alles andere aufgebaut ist.
Wichtig! Die Dateien, die wir in dieser Lektion erstellen werden, können Sie hier herunterladen.
Wir haben in dieser Serie bereits viel über HTML gesprochen, aber noch nicht darüber gesprochen, was es ist genau, anders als eine "super coole Geheimsprache". Im Web dreht sich alles um Sprachen und Kommunikation, und HTML ist dabei ein wichtiger Bestandteil.
HyperText Markup Language, HTML, ist eine Sprache, in der Markierungen den Inhalt einer Website, damit ein Browser sie verstehen und anzeigen kann. Sie gibt einer regulären alten Textdatei eine Struktur, die ein Browser ansonsten nicht lesen kann.
Beispielsweise können wir keinen Absatz in unseren Texteditoren eingeben und erwarten, dass ein Browser nur weiß, dass es sich um einen Absatz handelt. Der Absatztext muss innerhalb des richtigen HTML-Markups, eines Absatzes oder sein Element (jeder etwas komisch aussehende Text wie der hier zeigt nur, dass dieser Text auch Code ist).
HTML ist gebaut aus Elemente die wichtige Bedeutung haben, wie das oben erwähnte Absatzelement. Jedes Element verfügt über ein Anfangs- (Anfangs-) und ein Endetag (Ende), wobei der Inhalt der Website zwischen diesen beiden Tags geschrieben wird.
Diese öffnenden und schließenden Tags für jedes Element werden in spitze Klammern geschrieben (wie folgt: < >), obwohl ein schließender Tag auch einen Schrägstrich (wie folgt) hat: < / >).
Im vorigen Kurs haben wir unser Website-Design entworfen und nun ist es an der Zeit, die Struktur oder die Gestaltung dieses Designs vorzubereiten.
Wir fangen damit an, indem wir unserer Website-Vorschau einige allgemeine Anmerkungen hinzufügen, um ein besseres Gefühl dafür zu bekommen, wie man das am besten ausformuliert.
Innerhalb des Karosserie In unserer HTML-Datei haben wir mehrere Hauptelemente: a Header, ein Main Teil und a Fußzeile.
Wir haben auch darüber gesprochen, wie Sie Site-Dateien in der vorherigen Lektion einrichten. Jetzt werden wir dieses Wissen in die Tat umsetzen!
Merken: "Index" ist der Dateiname und ".html" ist die Erweiterung, die den Dateityp angibt.
Websites können aus vielen, vielen Seiten bestehen, daher heißt die Hauptseite immer "index.html" und sagt "Hey, hier fängt alles an!"
Nun schreiben wir endlich etwas HTML.
Jetzt können wir unsere Struktur hinzufügen. Stellen Sie sich dies als ein Gebäude vor. Wir müssen die Rahmung anbringen.
Das allererste Stück HTML, das wir schreiben werden, ist das das sagt dem Browser "Hey, das ist ein HTML-Dokument!"
Dann brauchen wir das Element:
Alles andere wird sein verschachtelt innerhalb dieses Elements.
„Wie ein Vogelnest?“ Nun, vielleicht mehr Puppen verschachteln, oder bei unserem gepflegten Stadtthema bleiben, verschachtelte Gebäude. Verschachtelung ist das, was passiert, wenn wir ein Element platzieren Innerhalb von einem anderen.
Der folgende Code zeigt die Verschachtelung eines Absatzelements innerhalb das Körperelement, weil es zwischen den öffnenden und schließenden Tags des Körpers lebt.
Dieses Absatzelement ist innerhalb des Hauptelements verschachtelt.
Wir machen den Code in unserer HTML-Datei durch Drücken besser lesbar verschachtelt Elemente weiter rechts. So was:
OK, zurück zur Arbeit…
Nun, in diesem verschachtelt html Element wollen wir hinzufügen Kopf Element.
Das Kopf wird das enthalten Titel unserer Seite, die in einem Browser-Tab angezeigt wird. Viel Verschachtelung!
Tuts Town
Vieles, was im enthalten ist Kopf eines HTML-Dokuments wird nicht auf der Website selbst angezeigt, sondern hilft Suchmaschinen, wie Google, zu sagen, worum es bei unserer Website geht.
Wenn wir später eine neue Datei erstellen, um Stile zu dieser Datei hinzuzufügen, verbinden wir diese beiden Dokumente über einen im Link hinzugefügten Link Kopf. Es ist also so etwas wie ein Kontrollzentrum hinter den Kulissen, das die Besucher unserer Website größtenteils nicht sehen können.
Alles auf unserer Website, das wir im Browser sehen, wird in der eingebettet Karosserie, Und hier beginnt der Spaß erst richtig!
Das Header Element ist nicht dasselbe wie das Kopf Element, über das wir bereits gesprochen haben. Das Header lebt im Karosserie und enthält im Allgemeinen das gesamte Material oben auf einer Website.
Das allererste, was wir oben auf unserer Website haben, ist ein Header, der Text und ein Bild von Tuts + Town enthält.
Tuts Town
Wir werden nur das hinzufügen Header um sich auf den Inhalt vorzubereiten.
Der Hauptteil der Tuts + Town-Site enthält die wichtigsten Informationen. Die Liste der Stadtunternehmen ist das, worum es auf unserer Website geht, daher wird der gesamte Inhalt in einem Element mit dem Namen leben Main.
Wir werden über die kleineren Behälter (wie die drei verschiedenen Gruppen: Schlaf, Essen und Laden) in diesen größeren sprechen Main Container in der nächsten Lektion, wenn wir den Inhalt hinzufügen.
Das Fußzeile ist der Teil ganz am Ende der Site. In der Regel werden hier einige Links angezeigt, z. B. für Facebook und Twitter, oder ein kleiner Text, der lediglich den Benutzern mitteilt, wer die Site erstellt hat.
Wir werden einen Satz hinzufügen stolz zu sagen, dass wir die Website innerhalb der Fußzeile Element.
Merken: An dieser Stelle fügen wir noch Elemente hinzu, die in der eingebettet sind Karosserie.
Lassen Sie uns jetzt eine letzte Überprüfung unserer HTML-Struktur durchführen.
Das Schließen von Tags wird leicht vergessen, was einige verursachen würde Fehler auf unserer Website. Das wollen wir sicherstellen jeden Das Tag, das wir geöffnet haben, hat ein schließendes Tag.
Sieht aus wie alles geschlossen ist! Es ist an der Zeit, der von uns erstellten superfesten Struktur Inhalte hinzuzufügen.
Mit HTML können wir hilfreiche Notizen in unsere Arbeit schreiben. Diese Notizen werden auf unserer Website nicht angezeigt, sind aber hervorragend für das Hinzufügen hilfreicher Informationen für andere Designer, die sich unseren Code ansehen.
Die HTML-Datei für diese Lektion (die Sie herunterladen können) enthält mehrere Hinweise, damit wir sie besser verstehen können.
In dieser Lektion haben wir gelernt, was HTML ist, was Elemente sind, wie zu Nest diese Elemente und wie Sie eine grundlegende HTML-Struktur mit einigen allgemeinen Containerelementen einrichten.
In der nächsten Lektion fügen wir den Text und die Bilder unserer Website in die neu erstellte Struktur ein.
Wir sehen uns in der Stadt!
Accentsconagua