Hallo!
In diesem Video zeige ich Ihnen, wie Sie mit HTML die Struktur einer Website festlegen.
Die Website „RENDERED“ dient als Referenz.
Ich werde nicht die gesamte Website erstellen, sondern nur die grundlegenden HTML-Bausteine.
Auf dieser Site sehen Sie hier oben einen HTML-Header mit einem Logo auf der linken und der Navigation auf der rechten Seite.
Direkt darunter ist der Hauptabschnitt mit dem großen RENDERED-Text und dem Video.
Darunter befindet sich das Intro.
Hier unten sehen Sie links eine Grafik und rechts die zugehörige Beschreibung.
Zum Schluss gibt es einen Footer hier unten.
Ich werde diese Website jetzt in Dreamweaver nachbilden.
Das ist die fertige Website, die Sie gerade gesehen haben.
Ich befinde mich im Modus „Entwickler“ (Developer).
Ich habe die Site außerdem in Dreamweaver definiert, zur Verwaltung der Projektdateien.
Sie müssen dasselbe tun, damit Sie mir hier folgen können.
Wählen Sie dazu „Site > Neue Site“ (Site > New Site).
In einem anderen Video wird die Definition von Sites erläutert, falls Sie dabei Hilfe benötigen.
Ich öffne die Datei „html-layout-index-start.html“.
Als Erstes werde ich einen Seitentitel hinzufügen.
Jede Seite muss einen Titel haben.
Momentan steht hier „Unbenannt“ (Untitled).
Ich ändere den Titel in „RENDERED“.
Erledigt.
Was ist ein Seitentitel?
Der Titel wird oben im Browser und in Google-Suchergebnissen angezeigt.
Sehen wir uns das Ergebnis kurz im Browser an.
Dazu verwende ich die Echtzeitvorschau im Browser hier unten rechts und wähle Google Chrome.
Und Sie sehen eine Seite!
Habe ich denn überhaupt etwas gemacht?
Aber sicher!
Sehen Sie hier oben den Text „RENDERED“?
Das ist der Seitentitel.
So weit, so gut.
Jetzt werde ich diese große, weiße Seite ausgestalten, indem ich HTML-Code zur Seite hinzufüge.
Ich beginne also mit dem HTML-Layout.
Diese Kommentare dienen zur Orientierung, damit ich weiß, wo was hingehört.
Text, der in solchen Kommentarklammern steht, wird vom Browser ignoriert und ist nur für uns Menschen gedacht.
Und weiter geht's.
Unter dem Kommentar „Header“ erstelle ich einen Einzug und gebe den ersten HTML-Code für das Layout ein.
Ich gebe eine öffnende spitze Klammer und „head“ ein.
Noch bevor ich fertig getippt habe, zeigt Dreamweaver praktische Codehints an.
Zur Auswahl stehen „head“ und „header“.
Ich wähle „header“.
Ich schließe den Text mit einer spitzen Klammer ab.
Jedes Tag besteht aus zwei Teilen.
Hier ist der öffnende Teil.
Jetzt gebe ich den schließenden Teil ein.
Ich gebe eine öffnende spitze Klammer ein und danach einen Schrägstrich.
Dreamweaver füllt den Rest automatisch auf.
Jedes Layout-Tag in HTML besteht aus einem öffnenden – hier ist unser Header – und einem schließenden Teil mit demselben Wort, nur mit einem Schrägstrich davor.
Für das BODY-Tag gilt das Gleiche: Hier ist das öffnende und hier das schließende Tag.
Oder das HEAD-Tag.
Hier ist der öffnende und dort der schließende Teil mit dem Schrägstrich.
Warum habe ich ein HEADER-Tag erstellt?
Tags wie HEADER, MAIN und FOOTER sind vordefinierte HTML5-Tags, die die Strukturelemente einer Seite festlegen.
Für diese Website verwende ich zunächst einige dieser vordefinierten Elemente.
Später werde ich dann eigene erstellen.
Ich rufe wieder die Echtzeitvorschau im Browser auf, um das Ergebnis zu prüfen.
In der Browser-Vorschau prüfe ich meinen Code in einem echten Browser, in diesem Fall Chrome.
Hier ist meine Site.
Das graue Feld oben ist mein Header.
Doch woher stammt dieses graue Feld?
Normalerweise ist, wenn Sie ein HEADER-Tag hinzufügen wie ich eben, das Element im Browser unsichtbar.
Ich habe jedoch im Vorfeld eine CSS-Datei verknüpft, damit Sie das HEADER-Element hier sehen können.
Nur zur Veranschaulichung.
Zurück in Dreamweaver zeige ich Ihnen, wie ich vorgegangen bin.
Hier ist das HEADER-Tag.
In diesem Tutorial geht es primär um HTML5-Layout-Elemente.
Aber jedem Element – wie dem Header hier – muss gesagt werden, was es tun soll.
Es braucht Anweisungen bezüglich seiner Größe oder Farbe.
Daher habe ich ein CSS-Sheet mit Formatierungsanweisungen erstellt.
Hier oben sehen Sie es.
Ich klicke darauf.
Hier werden die Größe des Headers und seine Farbe festgelegt.
Ein anderes Video beschäftigt sich speziell mit dem Thema CSS-Formatierung.
Ich beschränke mich daher nur auf die HTML5-Layout-Elemente.
Ich kehre zum Quell-Code zurück.
Als Nächstes möchte ich ein NAV-Tag einfügen.
Der Header ist also der große Block oben, dieses halbtransparente schwarze Feld.
Das NAV-Tag soll rechts oben hin.
Ich möchte es innerhalb des Header-Abschnitts platzieren.
Ich beginne eine neue Zeile, gebe den Text „nav“ ein und schließe das Tag.
Dann folgen eine öffnende spitze Klammer und ein Schrägstrich, und das Programm fügt den Rest ein.
Danke, Dreamweaver!
Es gibt bereits CSS-Code, der den NAV-Bereich formatiert und im Browser sichtbar macht.
Ich kehre zum Browser zurück.
Hier ist mein NAV-Tag.
Das NAV-Tag befindet sich innerhalb des Headers.
Durch den CSS-Code wird es weiß angezeigt.
Das sind zwei wichtige HTML-Tags, die ich hinzugefügt habe.
Zurück zu Dreamweaver.
Ich füge ein paar Leerzeilen ein, um diese Abschnitte voneinander zu trennen.
Das ist mein Header.
Jetzt beginnt der Hauptteil.
Wie beim Header gebe ich für diesen Abschnitt zuerst eine öffnende spitze Klammer ein.
Dann gebe ich den Text „main“ und das schließende Tag mit öffnender Klammer und Schrägstrich ein, das Dreamweaver für mich fertigstellt.
Das ist mein MAIN-Abschnitt.
Er wird ziemlich groß.
Ich füge eine Leerzeile ein.
Das erste Element wird der Hauptabschnitt, also das große grüne Feld mit dem Video, und dann folgt der Intro-Bereich als einfaches weißes Feld.
Jetzt verwende ich ein SECTION-Tag zur Unterteilung der verschiedenen Teile meiner Web-Seite.
Ein SECTION-Tag ist ein vordefiniertes HTML5-Tag wie HEADER und MAIN.
Ich gebe „section“ ein und schließe das Tag.
Wenn Sie es umständlich finden, diese Klammern und Schrägstriche einzugeben, kann Dreamweaver Ihren Workflow noch weiter beschleunigen.
Wenn Sie nur „section“ ohne die spitzen Klammern und Schrägstriche eingeben und dann die Tabulatortaste drücken, wird das Tag automatisch vervollständigt.
Auch für Anfänger ist dieser Trick eine große Hilfe bei der Syntax.
Sie müssen nur prüfen, ob alles an der richtigen Stelle steht.
Jetzt füge ich einen Abschnitt für das Hauptfeld hinzu.
Und hier soll ein weiterer Abschnitt stehen.
Ich drücke die Tabulatortaste – nicht die Eingabetaste.
Das ist der Abschnitt für mein Intro.
Mein Problem: Ich möchte dieses SECTION-Tag formatieren.
Der obere Abschnitt soll grün, der untere weiß sein.
Aber beide heißen gleich.
Der CSS-Code wird daher beide grün oder beide weiß darstellen.
Die Lösung: Ich unterscheide beide Elemente mithilfe einer Klasse.
So kann ich Eigenschaften individuell festlegen.
Bisher habe ich vordefinierte Tags verwendet.
Der Header heißt immer „header“ und das NAV-Tag „nav“.
Jetzt erstelle ich eine Klasse.
Ich füge ein Leerzeichen nach „section“ ein und gebe „class“ ein.
Wie Sie sehen, gibt Dreamweaver automatisch das Wort „class“ vor.
Ich muss also einfach nur die Eingabetaste drücken, und die restliche Syntax wird vorgegeben.
Sie können das Gleichheits- und die beiden Anführungszeichen auch manuell eingeben.
Zwischen den Anführungszeichen muss der Klassenname stehen.
Hier müssen Sie einen eindeutigen Namen angeben.
Bisher habe ich immer vordefinierte Tags verwendet.
Das HEADER-Tag heißt immer „header“ und das NAV-Tag immer „nav“.
Jetzt mache ich jedoch Folgendes: Ich verwende ein eindeutiges Wort, in diesem Fall „hero“.
Sie sehen, dass „hero“ vorgegeben wird.
Das liegt daran, dass ich vorher bereits ein CSS-Sheet erstellt habe.
Erinnern Sie sich, wie ich vorhin die ersten Tags für Sie sichtbar gemacht hatte?
Aus diesem CSS-Sheet werden jetzt diese Namen abgerufen.
Wenn Sie Ihre eigene Website erstellen, geben Sie selbst diese Klassennamen vor.
Weil dieses CSS-Sheet jedoch schon erstellt wurde, kann ich diese Liste verwenden.
So kann ich diesen ersten Abschnitt identifizieren.
Das Gleiche mache ich bei dieser Klasse.
Ich drücke die Eingabetaste.
Diese Klasse nenne ich „intro“.
Jetzt wechsle ich zum Browser, um die Ergebnisse zu prüfen.
Hier ist der Header.
Das wäre das transparente schwarze Feld unterhalb des grünen Hintergrunds.
Hier sind das NAV-Tag und das große Hauptfeld.
Und darunter liegt ein weißes Infofeld.
Zurück zu Dreamweaver.
Jetzt kümmere ich mich um den Grafikabschnitt.
Vorher möchte ich jedoch kurz das finale Projekt anzeigen, damit Sie die Struktur erkennen.
Sie sehen oben den Header, hier den Navigationsbereich, das große Hauptfeld und den Infobereich.
Und um diesen Abschnitt geht es jetzt.
Der Grafikabschnitt besteht aus zwei Teilen.
Links befindet sich meine Grafik.
Und hier die zugehörige Beschreibung.
Auf geht's.
Wie zuvor füge ich eine Leerzeile und einen Einzug ein.
Ich gebe einen neuen Abschnitt ein mit dem bereits bekannten Trick: „section“ eingeben und Tabulatortaste drücken.
Dann gebe ich die Klasse ein.
Ich wähle „artworks“ aus.
Gibt es dafür auch eine Abkürzung?
Aber sicher!
Sie geben „section“ ein.
Bevor Sie die Tabulatortaste drücken, geben Sie einen Punkt und dann die Klasse ein: „artworks“.
Dann drücken Sie die Tabulatortaste.
Alles wird automatisch vorgegeben.
In den Abschnitt bette ich ein sogenanntes ARTICLE-Tag ein.
Ich gebe eine Klammer und „article“ ein.
Warum erstelle ich dieses Tag?
Ein ARTICLE-Tag umschließt den wichtigsten Inhalt der Seite.
Quasi das Herzstück der Seite.
Es gibt viele andere wichtige Abschnitte und Tags, die wir bereits behandelt haben.
Aber das sind Elemente, die sich wiederholen.
Ich gebe das ARTICLE-Tag ein.
Ich verwende die lange Methode.
Es ist eine Klasse erforderlich.
Und diese heißt „artwork“.
Das ist also das ARTICLE-Tag.
Hier kommen die wirklich wichtigen Inhalte rein.
In diesem Fall sind das die Grafik und ihre Beschreibung.
Ich habe ein SECTION- und ein ARTICLE-Tag angelegt.
Als Nächstes folgt ein DIV-Tag.
Mit einem DIV-Tag wird ein Bereich unterteilt.
Es wird in Situationen wie dieser verwendet: Ich habe ein SECTION-Tag erstellt und das ARTICLE-Tag verwendet.
Ich kann nicht zurückgehen und noch ein SECTION-Tag anlegen.
Ich kann auch nicht zwei ARTICLE-Tags anlegen.
Das DIV-Tag ist ein hilfreiches, wiederverwendbares Wrapper-Tag.
Es ist ideal für unser Beispiel mit einer Grafik und ihrer Beschreibung.
Die DIV-Klasse ist „artwork-piece“.
Denken Sie daran: Der Klassenname muss eindeutig sein.
Hier wird der Name aus dem bereits erstellten CSS-Sheet vorgegeben.
Schließen und Schrägstrich eingeben.
Das war für die linke Seite der Website.
Jetzt beschäftige ich mich mit der anderen Seite.
Ich gebe eine DIV-Klasse ein.
Sie gilt für die Beschreibung und heißt „artwork-description“.
Schließen und fertig.
Jetzt prüfe ich die Site im Browser.
Hier sind die beiden kleinen DIVs.
Links „artwork-piece“ und rechts „artwork-description“.
Als letztes HTML-Layout-Element werde ich Ihnen das FIGURE-Tag vorstellen.
Es wird oft als Container für ein Bild verwendet.
Daher füge ich es im Grafik-Tag ein.
Es befindet sich dann in diesem Bereich, in dem das Bild für die Website definiert wird.
Ich gebe „figure“ ein und schließe das Tag.
Innerhalb des FIGURE-Tags kann ich recht flexibel ein oder mehrere Bilder festlegen, für die Beschriftungen erforderlich sind.
Alle Bilder müssen in diesem FIGURE-Tag aufgeführt sein, damit Bild und Beschriftung einander zugeordnet werden.
Auch dieses FIGURE-Tag wurde bereits formatiert.
Also prüfe ich das im Browser.
Sehen Sie das hellblaue Feld?
Zum Schluss möchte ich noch den Footer einfügen.
Ich springe nach unten bis zu meinem Kommentar.
Ich gebe „footer“ ein und drücke die Tabulatortaste.
Erneut prüfe ich das im Browser.
Und hier sehen Sie meinen Footer.
Ich füge keine Inhalte hinzu.
Wir konzentrieren uns in diesem Video nur auf die Grundbausteine eines HTML5-Layouts.
Die wesentlichen Objekte.
Es interessiert Sie vielleicht, wie die Seite ohne das vordefinierte CSS-Sheet, nur mit dem HTML-Code, aussehen würde – also ohne die Anweisungen im CSS.
Das ist mein HTML-Code, der durch das CSS-Sheet formatiert wird.
Wenn kein CSS-Sheet vorhanden wäre, das die Formatierung vorgibt, würden Sie das hier im Browser sehen.
Es ist dieselbe Seite.
Der HTML-Code ist da, aber noch steht nicht fest, was er tun soll.
Die Struktur ist vorhanden, nur die Formatierung durch CSS fehlt.
Nicht vergessen: Es gibt ein anderes Video speziell zum Thema CSS-Formatierung.
Ich verknüpfe rasch wieder das CSS.
In diesem Video wurden die Bausteine eines HTML5-Layouts erläutert.
Ich habe Ihnen die Tags HEADER, MAIN und FOOTER vorgestellt und sie mit SECTION-Tags in verschiedene Abschnitte aufgeteilt.
Ich habe das ARTICLE-Tag und abschließend das FIGURE-Tag erläutert.
Jetzt wissen Sie, wie Sie HTML-Layout-Elemente zu einer Website hinzufügen können.
Geschafft!
