Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Grundlagen der Webprogrammierung: Meine erste Website

Das HTML-Grundgerüst

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Grundsolide Vorarbeit: Das HTML-Grundgerüst ist der Mantel, mit dem Ihre Inhalte umhüllt werden.
05:41

Transkript

Ich habe jetzt hier meine Index-HTML geöffnet, aber natürlich verfügt sie noch über gar keinen Inhalt. Was wir jetzt als Nächstes brauchen, ist ein sogenanntes HTML-Grundgerüst. Und natürlich könnten wir das jetzt selbst schreiben, aber es gibt dafür dann datenwertweise eine Erweiterung innerhalb von BRACKETs. Und das bietet mir die Gelegenheit, Ihnen gleich zu zeigen, wie man mit solchen Erweiterungen sich das Leben noch zusätzlich leichter machen kann. Sie finden hier auf der rechten Seite eine Erweiterungs-Verwaltung, und wenn Sie hier drauf klicken, dann haben Sie mehrere Reiter. Einer behandelt die verfügbaren Zusätze, also Add-ons. Hier könnten Sie dann schon schauen, welche installiert sind, und hier geht es eigentlich nur um Designs. Und gleich als Allererstes gibt es hier die Möglichkeit, sich einen HTML Starter Template zu installieren. Und ich klicke hier auf "Installieren", geht sehr schnell, Installation ist abgeschlossen, also sage ich "Schließen" und sage hier "Schließen". Und fürs Erste merkt man davon noch nicht sehr viel. Aber wenn auf "Bearbeiten" klicke, bekomme ich jetzt hier unten die Möglichkeit, ein HTML5 Template zu erzeugen, und ich klicke drauf, und plötzlich habe ich hier in meinem Index-HTML tatsächlich ein HTML-Grundgerüst stehen. Und das können wir uns jetzt in aller Ruhe mal anschauen. Das Erste ist hier oben das sogenannte "doctype". Der "doctype" war früher ein ewig langes Gebilde mit unendlich vielen Zusätzen. Das hat sich zum Glück mit HTML5 geändert. Hier steht jetzt nur noch ein Rufzeichen, "doctype" und "html". Und diese Zeile ist für Browser gedacht, damit Browser wissen, in welcher Art und Weise sie mit einem Dokument umgehen müssen. Und diese sagt eben einem Browser, dass es sich hierbei um HTML5 handelt und eher nicht in irgendwelche seltsamen Modi wechseln muss, um mit der Seite etwas tun zu können. Das Nächste, was wir hier haben, ist ein sich öffnendes und sich schließendes HTML-Tag. Wann noch immer Sie diese Spitzenklammern sehen, das ist dann ein sogenanntes Tag. Fast alle Tags innerhalb von HTML bestehen aus zwei Elementen, nämlich aus einem öffnenden und einem sich schließenden Tag. Und alles, was dazwischen liegt, wird sozusagen von diesem Tag ummantelt. Dieses Ummanteln von Inhalten wird relativ oft passieren. Dran werden Sie sich schnell gewöhnen. Und die ganzen HTML-Befehle kommen alle innerhalb dieser HTML-Tags. Dann teilt sich ein Dokument in zwei prinzipielle Bereiche auf. Das eine ist der sogenannte "head"-Bereich. Im "head"-Bereich kommen diverse Informationen, zum Beispiel der Titel einer Seite. Der Titel einer Seite ist das, was im Browser dann ganz oben im Tab dargestellt wird. Dann kommen hier mal zwei grundlegende sogenannt "meta"-Tags. "meta"-Tags sind die Ausnahme, die die Regel bestätigen, sind kein schließendes Element bei sich, sondern leben einfach nur davon, dass sie innerhalb von einem Tag stehen. Hier geht es um den Zeichensatz. "charset=UTF8" ist der Zeichensatz, das heißt, ich gebe dem Browser die Information mit, dass mein Dokument als UTF8-Dokument interpretiert werden kann. Das setzt natürlich voraus, dass es auch als UTF8 abgespeichert wird. Ein in meinen Augen Vorteil vom BRACKETS ist der, dass BRACKETS ältere Kodierungen gar nicht übernimmt, das heißt, ich könnte eine Datei, die eben nicht mit UTF8 kodiert ist, gar nicht mehr öffnen in BRACKETS. Kann man das als Vorteil oder Nachteil sehen, ich finde es zum Selbstschutz gar nicht so schlecht. Der zweite Tag ist ein Tag, der angibt, für welches Ausgabegerät diese Seite gedacht ist. Und das ist eine sehr allgemein gehaltene Einstellung, nämlich hier geht es um den Viewpoint, also den Sichtpunkt, und da ist dieses "initial-scale=1.0" dazu da, um zu zeigen, dass diese Seite auf jeden Fall mal die gängigen Größen beliefert. Und in diesem "head"-Teil können noch ganz viel mehr meta-Tags stehen. In dem "head"-Teil, wenn ich bestimmte Dateien dann später einbinden möchte, mache ich das ebenfalls mit speziellen Tags. Aber das kommt dann später. Und der zweite Teil von dem HTML besteht aus dem sogenannten "body"-Tag. Hier kommt alles hinein, was dann im Browser tatsächlich wieder ausgegeben wird und was dann der Benutzer und der Betrachter meiner Seite auch sehen kann. Auch hier gibt es eben öffnende und schließende Tags, öffnende und schließende Tags. Wie gesagt, das ist etwas, was uns die ganze Zeit begleiten wird. Angenehm ist, dass Sie hier farbliche Unterscheidung haben. Würde irgendwo ein Tag fehlen, würde sich farblich etwas verändern, und Sie würden dann sofort sehen, dass es dann noch Nachholbedarf gibt. Aber das ist jetzt mal so das grundsätzliche HTML-Gerüst, und innerhalb dieses Gerüstes werden wir dann sämtliche Inhalte unterbringen.

Grundlagen der Webprogrammierung: Meine erste Website

Gestalten Sie in wenigen Stunden Ihre erste Website und lassen Sie sich dabei von der Idee über die Auswahl der Werkzeuge bis zur Veröffentlichung Ihrer Web-Präsenz begleiten.

2 Std. 53 min (29 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Software:
Exklusiv für Abo-Kunden
Erscheinungsdatum:09.05.2017

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!