Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

Grundlagen der Webprogrammierung: Meine erste Website

Text mit HTML strukturieren

Testen Sie unsere 2015 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Jetzt geht's an die Feinarbeit: Durch HTML-Tags wird die Struktur erst umgesetzt.
08:49

Transkript

So, ich habe in der Zwischenzeit etwas vorgearbeitet und habe jetzt den Text, so wie ich ihn hier als reine Textdatei schon habe, übernommen in einzelne Seiten meiner zukünftigen Webseite. Und das sieht jetzt folgendermaßen aus: Ich habe eine "Ausflug"-Seite. Auf der "Ausflug"-Seite werden dann unterschiedliche Vorschläge gemacht für diverse Ausflüge. Am Anfang habe ich einen kurzen einleitenden Text. Dann habe ich eine Seite "Gedanken", wo es um Gedanken zum Thema Wandern, zum Thema Bergwandern geht. Und natürlich habe ich eine "Impressum"-Seite. Die "Index"-Seite ist meine Startseite und eine "Über uns"-Seite. Diese "Über uns"-Seite, da wird nur kurz beschrieben wer wir sind und warum wir das tun, was wir tun. Ich habe überall oben in den Titelzeilen jetzt auch schon den richtigen Titel eingegeben. Und wir werden jetzt anhand der "Index"-Seite, die ich ebenfalls schon befüllt habe, unsere ersten HTML-Tags verwenden. So, beim Inhalt ist es so, dass ich hier als Überschrift, als Oberhauptüberschrift, Bergwelt stehen habe. Dann kommt ein Zitat von Nietzsche. Und dann stelle ich mir vor, dass ich auf der Titelseite einfach nur so kurze Anreißer-Texte habe, mit einem Link dann hin zur eigentlichen Seite. Um das umzusetzen, werden wir ganz pragmatisch vorgehen. Wir werden uns jetzt zuallererst einmal diese Seite so wie sie ist anschauen. Und dazu gibt es hier in "Brackets" so ein kleines Blitz-Zeichen und wenn Sie hier auf dieses Blitz-Zeichen draufklicken, dann passiert eines der Wunder von Brackets. Nämlich, nein, ich möchte mir diese Seite nicht übersetzen lassen, so. Und dann passiert nämlich folgendes. Bracket hat seinen eigenen, kleinen Webserver. Denn "127.0.0.1" ist prinzipiell der sogenannte "Local Host", das heißt, der Rechner vor Ort. Und nach dem Doppelpunkt, diese etwas kryptische Zahl, bezeichnet den Port, also die Schnittstelle über die jetzt Brackets arbeitet, um mir meine Index HTML-Datei zeigen zu können. Hier können Sie sehen, dass ohne Strukturierungshilfen das alles in einer einzigen langen Wurst beschrieben ist. Und der Sinn von HTML-Tags besteht jetzt darin, dieser Wurst etwas mehr Struktur zu geben. So und das machen wir auch gleich. Ich mache mal hier wieder zu, werde da geschimpft, dass ich es zugemacht habe, aber es wird darüber hinwegkommen. Gut, Bergwelt soll die Hauptüberschrift werden. Hauptüberschrift heißt "h1", also die Überschrift der obersten, ersten Ebene. Ich mache ein öffnendes Tag und schreibe "h1", schließe mein Tag wieder und einer der Vorteile von Bracket ist der, dass ich jetzt automatisch das schließende Tag mit dazu bekomme, das ich jetzt allerdings mit "STRG + X" ausschneide und mit "STRG + V" hinter meiner Bergwelt wieder einfüge. Dann werde ich vorerst einfach mal nur um mein Zitat ein Absatzzeichen machen. Ein Absatzzeichen in HTML ist ein "p" für das englische Wort "Paragraph". Und auch hier gehe ich genauso vor, ich schneide es aus mit "STRG + X" und füge es am Ende meines Absatzes wieder ein. Um diesen Bereich werde ich mich dann gleich noch genauer kümmern. Als nächstes identifiziere ich weitere Überschriften. Und hier ist es so, dass diese drei Überschriften auf quasi der selben Ebene liegen werden. Das heißt sie bekommen die Ebene "h2". Also Überschrift der zweiten Ebene, "h" übrigens kommt vom Wort "Header". Das kann ich jetzt bei allen dreien relativ schnell anwenden, ohne jetzt noch groß erklären zu müssen, weil es ja immer eigentlich dasselbe ist. Ich finde es jetzt vielleicht am Anfang sehr mühsam, dass ich mich nicht um das Schließen von Tags kümmern muss, weil das automatisch vom System übernommen wird, aber auf der anderen Seite bin ich sehr froh darüber. Denn normalerweise führt das Fehlen von Schluss-Tags nicht wirklich zu massiven Problemen, aber zu leidlichen Problemen. Das heißt, viele Browser sind schon klug genug, dass sie ahnen wo ein Tag eigentlich wieder geschlossen gehört, aber das machen eben nicht alle Browser, sondern nur viele Browser und dann haben Sie unterschiedliche Anzeigen und wissen nicht woher. So, jetzt werde ich auch noch den anderen Absätzen innerhalb dieses Dokuments diese Absatzbezeichnungen mitgeben. Und definiere damit eben schon ganz genau, wo ein Absatz beginnt oder endet. Hier könnte ich eventuell zwei Absatz daraus machen. Ja, sehen wir uns dann an wie das wohl am besten aussieht. So, und hier haben wir jetzt unseren letzten Paragraphen. Oben beim Zitat passiert jetzt noch etwas zusätzliches. Und zwar kann man Zitate mit Hilfe von HTML schon speziell auszeichnen. Das mag jetzt komisch klingen, aber das hat etwas damit zu tun, dass man in letzter Zeit sehr bemüht ist mit Semantik zu arbeiten. Semantik beschreibt die Tatsache, dass man Worten auch, oder Bezeichnungen gleich Inhalte mitgibt und aus diesen Begrifflichkeiten auch gleich inhaltliche Voraussetzungen quasi entstehen. Und nachdem es sich hier um ein Zitat handelt, gibt es ein spezielles Element, das heißt "blockquote" und wir werden jetzt unser gesamtes Zitat mit diesem "blockquote" umgeben. Hier wurde mir jetzt eben "blockquote" sogar schon, nachdem ich angefangen hatte zu schreiben, vorgeschlagen. So, und ich packe jetzt das gesamte Zitat in dieses "blockquote" rein. Damit nicht genug, verlangt HTML5 danach, dass wenn ich etwas zitiere, es auch ja die Person geben muss oder gelegentlich auch den Ort, wo dieses Zitat herkommt und dieses wird dann nochmal speziell ummantelt, speziell ausgezeichnet und zwar brauchen wir zuerst ein sogenanntes "footer"-Element. In diesem "footer"-Element kommt nachher noch ein sogenanntes "cite"-Element. "Cite" wird verwendet um deutlich zu machen, dass es sich eben hier um den Autor dieses Zitats handelt und Sie könnten da dann, wenn es eine Verlinkung gäbe zur Originalseite, auch die Verlinkung hier noch mit angeben. Aber jetzt fürs erste, reicht uns dieses Vorgehen. Es mag Ihnen jetzt kompliziert erscheinen, aber hat den Vorteil, dass diese besondere Struktur eben auch besonders ausgezeichnet wurde. So, mit "STRG + S" speichere ich jetzt meine Index-Seite. Und sehen wir uns jetzt an, was dieses Verteilen der Tags mit der Seite gemacht hat. Und schon können Sie sehen, dass plötzlich nur aufgrund dieser Tags und dieser Auszeichnung eine Struktur in die Wurst hineingekommen ist. Wir haben jetzt ganz deutlich erkennbar eine Überschrift erster Ebene, also eine Überschrift die größer ist als die anderen Überschriften. Diese wiederum haben dasselbe Erscheinungsbild, gehören also in dieselbe Ebene. Paragraphen sind schön abgegrenzt. Und hier haben wir eben das Zitat, das aufgrund dieser "blockquote"- und "cite"-Regelung gleich schon erste Formatierungen mitbringt, sodass wir sofort damit ein Zitat in Verbindung bringen. So wird also HTML ganz grundsätzlich einmal dazu verwendet, um bestimmten Elementen ihre Bedeutung, ihre Struktur zu geben. Und damit werden Seiten schon alleine nur mit HTML besser lesbar, obwohl sie sonst, außer mit den Mitteln, die ein jeder Browser von sich aus mitbringt, noch nicht gestaltet wurden.

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
Ihr(e) Trainer:
Erscheinungsdatum:09.05.2017
Laufzeit:2 Std. 53 min (29 Videos)

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!