Hallo!
In diesem Video zeige ich Ihnen, wie Sie HTML-Content zu einer Seite hinzufügen.
Diese Seite werden wir gemeinsam erstellen.
Wir erstellen den HTML-Code für dieses Bild und die Navigation oben.
Wir erstellen auch die Überschriften in der Mitte und diesen Textabsatz.
Und wir fügen dieses Bild zur Seite hinzu.
Das alles läuft über HTML.
HTML ist die Basis jeder Website.
Diese HTML-Inhalte müssen jedoch auch formatiert werden.
Das geschieht per CSS (Cascading Style Sheet).
Das Wort „GOLDRUSH“ zum Beispiel wird im HTML-Code angelegt, also eingetippt und als Überschrift definiert.
Das CSS-Sheet bestimmt dann Farbe, Größe und Zeichenabstand.
Mit CSS werden auch der Abstand zum Begrenzungsrahmen definiert und die Hintergrundfarben.
All das wird mit CSS gemacht.
HTML bildet das Grundgerüst.
CSS sorgt für den Look.
In diesem Video befassen wir uns mit HTML.
Es gibt ein separates Tutorial zum Thema CSS, aber heute konzentrieren wir uns auf Schritt 1: HTML.
Wie sieht HTML ohne verknüpftes CSS-Sheet aus?
Die andere Registerkarte zeigt dieselbe Site ohne CSS.
Hier sehen Sie das Navigationsmenü und die Überschrift, die Bilder und den Textabsatz.
All diese Elemente werden wir hinzufügen.
Erst später, wenn CSS angewendet wird, erhält die Site auch ihren Look wie im Beispiel vorhin.
Ich werde nun Dreamweaver öffnen und den nötigen HTML-Code hinzufügen.
Zunächst einmal stelle ich sicher, dass ich im Entwickler-Modus bin.
Falls hier oben „Standard“ ausgewählt ist, klicke ich auf „Entwickler“ (Developer).
Ich habe die Site bereits 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).
Ich werde an dieser Stelle nicht näher darauf eingehen.
In einem anderen Video wird die Definition von Sites erläutert, falls Sie dabei Hilfe benötigen.
Das ist die HTML-Seite, die ich bearbeiten werde.
Sie heißt „rendered-index-start.html“.
Das Dokument enthält bereits einige HTML-Container.
In diese Container werde ich gleich den HTML-Code einfügen.
Sie bilden die grobe Struktur.
Sehen wir uns diese Container im Browser an.
Um eine Vorschau des Dokuments im Browser anzuzeigen, kann ich rechts unten auf dieses Symbol klicken.
Das ist die Echtzeitvorschau im Browser.
Ich wähle Google Chrome.
Diese hübsche Seite ist unsere Ausgangsbasis.
Wie Sie sehen, ist die Seite noch leer.
Die Container sind leer.
Sie warten auf den HTML-Code, den wir gleich erstellen.
Widmen wir uns dem ersten HTML-Element.
Ich kehre zu Dreamweaver zurück.
Als Erstes werde ich das Logo-Bild hinzufügen.
Der Container ist schon eingerichtet.
Hier füge ich nun das Bild ein.
Bilder erfordern ein Tag.
Ich beginne mit einer spitzen Klammer und tippe „img“ ein.
Mit diesem HTML-Tag wird ein Bild auf der Seite platziert.
Dann füge ich „src“ für die Quelle ein und drücke die Eingabetaste.
Dreamweaver gibt automatisch einen Teil der erforderlichen Syntax in HTML ein: ein Gleichheitszeichen und Anführungszeichen.
Dann wird eine praktische Liste zum Durchsuchen geöffnet.
Ich klicke auf „Durchsuchen“ (Browse).
Hier ist mein Bilderordner.
Ich nehme „logo-white.png“.
Dann gebe ich eine schließende spitze Klammer ein.
So fügt man ein Bild in HTML ein.
Die nächste HTML-Komponente ist die Navigation.
Das Navigationsmenü soll rechts oben sein.
In der Regel wird die Navigation in einen Container platziert wie diesen hier mit dem Namen „nav“ – für „Navigation“ – und anschließend mit einer sogenannten ungeordneten Liste aufgefüllt.
Bevor ich meine Liste erstelle, zeige ich Ihnen, wie eine fertige ungeordnete Liste aussieht.
Eine ungeordnete Liste ist eine Aufzählung.
Die Punkte lassen sich später per CSS entfernen, damit die Navigation besser aussieht.
Fangen wir an.
Spitze Klammern, gefolgt von „ul“.
So heißt das Tag für eine ungeordnete Liste.
Das schließe ich.
Alle Tags, die Sie erstellen, müssen geschlossen werden.
Wie zum Beispiel dieses hier.
HEADER umfasst ein öffnendes und ein schließendes Tag mit derselben Syntax bis auf den Schrägstrich.
Dasselbe gilt für das bereits vorhandene A-Tag.
Hier ist das öffnende Tag mit „a“, gefolgt vom schließenden Tag mit „/a“.
Hier ist das öffnende UL-Tag.
Ich füge eine öffnende spitze Klammer ein, gefolgt von einem Schrägstrich.
Dreamweaver erkennt meine Absicht und gibt den Rest automatisch für mich ein.
UL ist das übergeordnete Element.
Innerhalb des UL-Tags benötige ich Listenelemente.
Dabei handelt es sich um die Aufzählungspunkte, die als LI-Tags definiert werden.
Ich schließe das Tag nach demselben Prinzip.
Spitze Klammer, Schrägstrich.
Dreamweaver fügt den Rest ein.
Das ist meine Aufzählungsliste.
Innerhalb dieser Liste füge ich einen Link ein.
Dazu gebe ich eine öffnende Klammer ein, und ich verwende das automatisch vorgeschlagene A-Tag.
Das ist ein Anker-Tag zur Erstellung von Anker-Links.
Dann tippe ich „href“ ein.
Das ist die Hyperlink-Referenz, die auf die Seite oder die Website verweist, zu der Anwender weitergeleitet werden, wenn sie auf den Link klicken.
Ich habe „href“ eingetippt, den Pfeil nach unten und die Eingabetaste gedrückt, und Dreamweaver hat alles eingefügt.
Ganz einfach.
Als Ziel für diesen Link gebe ich einen Platzhalter ein, also einfach das Rautezeichen.
Hyperlinks sind ein bisschen komplizierter als zum Beispiel LI-Elemente.
Das ist aber kein Problem.
Ich schließe das Tag genauso wie die anderen.
Spitze Klammer, Schrägstrich, und Dreamweaver erledigt den Rest.
Innerhalb des A-Tags, also zwischen den Klammern, gebe ich den Text ein, der im Menü erscheinen soll.
Schauen wir uns im Browser an, was wir bisher gemacht haben.
Sehen Sie sich das an!
Da ist meine Navigation.
So ungefähr.
Das ist also ein Link in einem Listenelement, ein Aufzählungspunkt in einer ungeordneten Liste.
Sehr schön.
Sie fragen sich aber vielleicht, wo das Bild ist?
Das ist meine Schuld.
Es ist zwar da, hier oben, aber es ist ein weißes Logo auf weißem Hintergrund.
Das weiße Logo wird später mehr Sinn machen, wenn ich den grünen Hintergrund hinzugefügt habe.
Gut.
Ich füge nun die restlichen Listenelemente hinzu.
Momentan ist nur eins definiert, aber ich brauche fünf.
Ich wechsle zu Dreamweaver.
Ich habe fünf verschiedene Navigationsoptionen.
Ich kann den Cursor innerhalb des Tags platzieren, alles auswählen, kopieren, die Eingabetaste drücken und die Zeile einfügen.
Das funktioniert.
Noch einfacher ist es aber, den Cursor innerhalb des LI-Tags zu platzieren und Befehl+D auf dem Mac oder Strg+D auf dem PC zu drücken.
Das habe ich fünf Mal gemacht.
Den Text muss ich noch ändern.
Sie sehen hier „HOME“, „HOME“, „HOME“.
Ich kann den Text in „ABOUT“ (Über) ändern und auch die nächsten Link-Texte anpassen.
Das wollte ich Ihnen nur zeigen, um die Syntax zu erklären.
Das geht aber noch schneller.
Die Arbeit von soeben lösche ich wieder.
An dieser Stelle lasse ich mir von Dreamweaver helfen – bzw.
Emmet.
Ich benötige ein UL-Tag mit Listenelementen.
Und zwar fünf Stück.
Also, Sternchen, 5.
Innerhalb dieser Listenelemente brauche ich ein A-Tag.
Wenn ich die Eingabetaste drücke, passiert nichts.
Aber schauen Sie, was passiert, wenn ich die Tabulatortaste drücke.
Wenn das mal nicht die Sache verkürzt!
Tricks wie diese in Dreamweaver können die Erstellung einer Website deutlich beschleunigen.
Jetzt gebe ich die Raute ein.
Das ist, wie gesagt, nur ein Platzhalter, den ich später durch die tatsächlichen Links ersetzen werde, die auf meine erstellten Seiten verweisen.
Nun kommen die Namen der Navigations-Buttons, also „HOME“, „ABOUT“ (Über), „GALLERY“ (Galerie), „TICKETS“ und „CONTACT“ (Kontakt).
Das ist eine typische Navigationsstruktur.
Und so sieht der zugrunde liegende HTML-Code aus.
Sehen wir uns das im Browser an.
Sie wissen nun also, wie das HTML-Grundgerüst für die Navigation aussieht.
Nun möchte ich ein vordefiniertes CSS-Dokument an die HTML-Datei anhängen für den Rest dieses Tutorials.
Ich möchte mich in diesem Tutorial auf die Erstellung von HTML konzentrieren.
Aber ich möchte auch, dass der HTML-Code, den wir in diesem Video erstellen, nach etwas aussieht, wenn wir ihn zur Seite hinzufügen.
Ich werde nun das vordefinierte CSS-Sheet in Dreamweaver hinzufügen.
Ich kehre zu Dreamweaver zurück und hänge das CSS-Sheet an.
Das geht ganz oben im HEAD-Abschnitt.
Hier ist das öffnende Tag, und hier das schließende.
Ich klicke an eine beliebige Stelle dazwischen.
Sagen wir nach diesem „script“.
Um ein CSS-Sheet anzuhängen, ist eine lange Syntax erforderlich.
Ich greife auf einen kleinen Trick zurück, ähnlich wie der Trick vorhin.
Ich tippe „link“ ein und drücke die Tabulatortaste.
Toll, oder?
Ich habe alles, was ich brauche, um Dreamweaver mitzuteilen, dass ein Stylesheet angehängt werden soll.
Ich muss nur noch eine Referenz für das Stylesheet angeben.
In meinen Dateien auf der Seite ist ein Stylesheet, das ich bereits erstellt habe.
Ich klicke zwischen den Anführungszeichen und beginne, „st“ zu tippen, und schon schlägt Dreamweaver „styles.css“ vor.
Mit der Eingabetaste nehme ich den Vorschlag an.
Was ist nun passiert?
Ich sehe keinen Unterschied.
Zumindest nicht in der Code-Ansicht.
Sehen wir uns das Ergebnis im Browser an.
Fantastisch!
Das ist, wie gesagt, dieselbe HTML-Datei, jetzt aber mit einem CSS-basierten Layout, das ich zuvor erstellt habe.
Denken Sie daran, es gibt ein spezielles Video-Tutorial zum Thema CSS, das Sie sich ansehen können.
Per CSS-Anweisungen werden die Aufzählungszeichen und die Unterstreichungen entfernt, Blau wird Weiß, und das Menü wird nach rechts oben verschoben.
Jetzt ist das kleine Bild auf dem grünen Hintergrund sichtbar.
Darüber hinaus sind weitere Container auf der Seite formatiert.
Hier ist ein grünes Feld.
Es gibt auch ein weißes Feld und ein Verlaufsfeld.
Es gibt also einige Elemente auf der Seite, die per CSS gesteuert werden.
Wir kehren zum HTML-Projekt in Dreamweaver zurück.
Ich möchte nun Text hinzufügen – genauer gesagt: Überschriften.
Sehen wir uns die fertige Version an.
Die fertige Version umfasst mehrere Überschriften.
Das ist die Hauptüberschrift, also die Überschrift oberster Ebene.
Das ist die zweitwichtigste Überschrift.
Das wird die Überschrift zweiter Ebene und das die Überschrift dritter Ebene.
Die will ich nun in Dreamweaver hinzufügen.
Sie kommen in den Container, den ich vorhin unter „hero-content“ erstellt habe.
Ich gebe wieder die öffnende spitze Klammer ein.
Die erste Überschrift oben erhält das H2-Tag.
Schließendes Tag, öffnendes Tag, Schrägstrich.
Der Rest wird eingefügt.
Das ging schnell.
Aber es geht noch schneller.
Sie können das natürlich so machen.
Aber wenn ich nur „h2“ eingebe und die Tabulatortaste drücke, erhalte ich das hier.
Im H2-Tag gebe ich meinen Text ein.
Als Nächstes kommt das H1-Tag.
Ich gebe „Rendered“ ein.
So sieht das Ganze aus.
Hier ist die Überschrift zweiter Ebene.
Hier ist die Überschrift erster Ebene.
Jetzt füge ich die Überschrift dritter Ebene hinzu.
Erst „h3“ und dann die Tabulatortaste.
Diese hier schreibe ich aus, weil ich Ihnen ein Sonderzeichen zeigen will.
Ich gebe einen Bindestrich und dann „21, 2017“ ein.
Der Bindestrich funktioniert in manchen Browsern, aber nicht allen.
Wenn Sie ein Sonderzeichen hinzufügen müssen, wie diese hier zum Beispiel oder sonstige Zeichen, die keine Buchstaben oder Zahlen sind, benötigen Sie eine spezielle HTML-Syntax, um sicherzustellen, dass sie überall funktionieren.
Beginnen Sie immer mit einem kaufmännischen Und bzw.
Et-Zeichen.
Dreamweaver ist an dieser Stelle sehr hilfreich, weil ich mir nie merken kann, was wofür steht.
Für das Prozentzeichen gibt man zum Beispiel ein: Et-Zeichen, Raute, 37,Semikolon.
All das ergibt das Prozentzeichen.
Ich überprüfe das im Browser.
Der Browser hat das richtig interpretiert und zeigt das Prozentzeichen statt des komischen HTML-Codes.
Suchen wir die Entsprechung für den Bindestrich.
Das lösche ich.
Erinnern Sie sich, was zu Beginn stehen muss?
Das Et-Zeichen.
Ich scrolle nach unten.
Hier ist der Bindestrich, also Et-Zeichen, Raute, 45, Semikolon.
Das ist ein Bindestrich.
Überprüfen wir das im Browser.
Und hier ist er.
Sehr schön.
Ich gebe den restlichen Text ein: „SAN FRANCISCO“.
Da ist die Überschrift dritter Ebene.
Als Nächstes möchte ich Text in diesen weißen Bereich einfügen.
So sieht das Ergebnis aus.
Ein Intro-Text in großen Buchstaben.
Das machen wir jetzt.
Ein weiteres sehr nützliches HTML-Tag ist das P-Tag.
Das verwende ich für den Intro-Text.
In diesem DIV hier, diesem DIV-Container, gebe ich ein P-Tag ein.
P plus Tabulatortaste ergibt mein P-Tag.
P ist die Abkürzung für „Paragraph“ (Absatz).
Eine Website enthält meist sehr viele P-Tags.
Sie definieren Fließtext.
Ich werde einen großen Textblock einfügen.
Dank des CSS-Stylesheets, das ich bereits angehängt habe, wurden Schriftart und -größe gleich angepasst, damit alles schön aussieht.
Nun will ich diesen Bereich füllen.
Das sollte so aussehen.
Hübsches Bildchen.
Das fügen wir jetzt ein.
Das IMG-Tag kann ich noch schneller als vorhin eingeben.
Vorhin habe ich „img“ eingegeben, und dann „src“.
Das geht aber noch schneller.
Sie können sich vielleicht schon denken, wie.
Ich tippe „img“ ein und drücke die Tabulatortaste.
Schon wurde alles eingefügt.
Von hier aus wähle ich meinen Bilderordner aus, und ich rufe die Datei „goldrush.jpg“ auf.
Hier ist eine kleine Vorschau, danke.
Jetzt kommt der ALT-Text.
Er wird von Bildschirm-Leseprogrammen verwendet und außerdem angezeigt, wenn Bilder nicht geladen werden.
In diesem Fall gebe ich den Namen des Künstlers ein.
Ich sehe mir die Browser-Vorschau an.
Das Bild gefällt mir.
Es geht weiter.
Hier ist die Endversion.
Ich werde eine H2-Überschrift hinzufügen.
Das ist ein P-Tag.
Dieser H2-Text soll sich vom H2-Text hier oben unterscheiden.
Das P-Tag hier soll sich von diesem P-Tag unterscheiden.
Das erreiche ich mithilfe einer Klasse.
Ich verwende diesen Container hier.
Ich gebe „h2“ ein.
Also „h2“ und die Tabulatortaste.
Fertig.
Der Text lautet „Goldrush“.
Damit sich diese Überschrift von der anderen unterscheidet, füge ich eine sogenannte Klasse hinzu.
Ich füge „class“ ein, drücke die Eingabetaste, und schon ist die erforderliche Syntax da, einschließlich Gleichheitszeichen und Anführungszeichen.
Diese Klasse soll „artwork-title“ sein.
Das ist das Unterscheidungsmerkmal.
Es ist immer noch eine H2-Überschrift, nur eben mit dem CSS-Stil „artwork-title“.
Dadurch erhält der Text einen etwas anderen Look.
Dasselbe gilt für das P-Tag hier unten.
Ich schreibe „p“ und drücke die Tabulatortaste.
Ich füge eine Klasse hinzu.
Diese heißt „artwork-text“.
Ich füge den Text ein und öffne den Browser.
H2- und P-Tag sehen jetzt anders aus als die anderen oben.
Wir kommen zur Schaltfläche „See More“.
Sie bietet einen Link zum Anklicken.
Die füge ich unter dem P-Tag hinzu.
Ich kann, wie gesagt, „a href“ eintippen.
Das ist die langsamere Methode.
Schneller geht das, wenn Sie einfach ein A eingeben und die Tabulatortaste drücken.
Daraufhin wird alles eingefügt.
Ich habe derzeit noch keinen Link parat.
Stattdessen gebe ich die Raute ein.
Auch hier füge ich „class“ hinzu.
Ich füge die Klasse „see-more“ hinzu.
Der eigentliche Text, „See More“, wird zwischen den spitzen Klammern eingefügt.
Ich rufe die Browser-Vorschau auf.
„See More“.
Da ist mein Link.
Sehr schön.
Herzlichen Glückwunsch!
Sie haben HTML-Inhalte hinzugefügt.
Sie kennen die gängigsten Elemente wie P-Tags, H1, Bilder und Hyperlinks.
Das sind die grundlegenden Bausteine einer Web-Seite.
Wir haben ein bisschen geschummelt, weil die Formatierungen schon vorher definiert waren.
Ich möchte Ihnen zeigen, wie die gerade erstellten HTML-Inhalte aussehen, wenn das Stylesheet nicht angewendet wird.
Denn normalerweise erstellen Sie zuerst Ihr H1-Tag und dann den zugehörigen CSS-Code.
Es gibt zahlreiche hilfreiche Videos zum Thema CSS, die zusätzlich zu diesem Video verfügbar sind.
Ich entferne das Stylesheet und bin gespannt, was passiert.
Wenn ich in Dreamweaver nach oben scrolle, sehe ich diesen Link, der mein Stylesheet mit dieser Seite verknüpft.
Zum Löschen markiere ich die Zeile und entferne sie.
Hoppla.
Sie sehen, was im Hintergrund passiert ist.
Das ist die reine HTML-Version.
Hier sind die UL- und LI-Elemente.
Hier sind die H2-Überschriften sowie H1.
Dort ist ein Bild.
Hier sind einige Links und der Footer.
So sieht HTML ohne Stylesheet aus.
Die beiden ergänzen sich also perfekt.
Zuerst definieren Sie den HTML-Code auf Ihrer HTML-Seite.
Dann bringen Sie den Inhalt mithilfe des CSS-Sheets in eine ansehnliche Form.
Gut gemacht!
Das war's zum Thema Hinzufügen von HTML-Content zu Ihrer Web-Seite.
