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.

HTML und CSS für Designer

Der Befehlsaufbau

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Wie ist ein HTML-Befehl aufgebaut und was ist nötig, um die Befehlssyntax so schnell wie möglich verstehen zu können?

Transkript

Nun ist der Moment gekommen -- die Umsetzung eines Mockups eines Layout, einer Idee direkt mit HTML-Befehlen. Ich rufe dafür mal den Atom und den Browser auf, und damit wir jetzt auch wissen, mit welcher Befehlssyntax wir arbeiten müssen, gehe ιch ganz kurz auf diese Struktur ein. Κeine Bange, es ist gar nicht so kompliziert. Also, die HTML Grundlagen. Was man sich merken muss, ist die englische Sprachsyntax. Das bedeuten also, dass z. B. etwas wie ein Dokument nicht als Dokument bezeichnet wird, sondern in dem Falle als HTML. Das könnte jetzt auch document heißen, aber tut es einfach nicht. Also von der Seite kann man sich das auch leicht merken. Zum Beispiel so etwas wie eine Kopfzeile oder ein Titel, die kommen dann in der HTML-Syntax mit einer Bezeichnung "header" daher oder ein Text-Körper, oder was so als Content bezeichnet wird. Das wäre dann so weit wie ein "body". Also im Grunde nur ganz kurz zu der Kopfzeile, also eher Begriff "header". Kopfzeile ist nicht ganz treffend, weil dann haben wir so eine Vorstellung wie eine Zeile oben am Rand des Dokumentes. Besser ist, wenn man sich wirklich so eine Art Titelbild oder Titelseite eines Magazins vorstellt. Genau das übernimmt solch ein Header, und es muss Aufmerksamkeit erregen. Meistens hat er was mit Navigation zu tun, aber das nur schon mal im Vorfeld. Das zweite, was man sich merken muss, ist, Befehle haben die Bezeichnung "tag", ein HTML Befehl wird als HTML-"tag" bezeichnet, Befehle stehen in spitzen Klammern, und es ist auch verständlich, weil man jetzt zum Beispiel das Wort Body nimmt, das könnte hier auch heißen "Bewege deinen Body" und da ist es so, dass der Browser nicht weiß: Was ist jetzt ein Befehl und was ist Fließtext? Was ist etwas, das angezeigt werden soll? Befehle werden in der Regel nicht direkt angezeigt, sondern sie zeichnen nur etwas aus, und genau da sind wir auch bei den Namen "Hypertext Markup Language" HTML, im Grunde nichts anderes wie eine Auszeichnungssprache, also nicht mal eine richtige Programmiersprache. Und auszeichnen kennt der ein oder andere, der schon paar Jährchen im Geschäft ist, noch von ganz früher, dort gab es die ersten Textverarbeitungssysteme oder Desktop Publishing Systeme, wo man in einem Text, den man ausgeben wollte, auf einen Drucker oder auf einem entsprechenden Gerät, musste man dann ein Wort, was fett dargestellt werden sollte, mit speziellen Befehlen umklammern. Nichts anderes macht HTML. Nur damit der Browser auch weiß, was ist ein Befehl und was nicht, folgt dieser Befehl in spitzen Klammern. Ich möchte mal keinen direkten Befehl nehmen, sondern sage einfach, das sei jetzt der "tag", der Befehl, aber nicht der Tag, sondern der "tag" und diese Befehle kommen eben in spitzen Klammern daher. Und da ich etwas auszeichnen muss, muss dieser Befehl und der Browser auch wissen, was er denn auszeichnen soll, und bis wohin das geht. Entsprechend folgt, dass das es auch einen schließenden "tag" gibt, also einen schließenden Befehl, der dem Browser signalisiert, von dort bis dahin gilt dieser Befehl. Schließende "tags" werden immer mit einem Schrägstrich eingeleitet, d. h. spitze Klammer auf, Schrägstrich, und dann kommt der gleiche Name noch mal, wieder Befehl am Anfang im Vorfeld. Drittens, Befehle, also die "tags" werden gesteuert mit sogenannten Attributwerten. "Mit Attributen" -- klingt wieder furchtbar kompliziert, ist es aber nicht. Wenn ich hier ein "tag" habe, dann würde zum Beispiel ein solcher "tag", wenn man sich mal vorstellt, Ich habe einen ganz normalen Absatz, dann würde das bedeuten, wenn ich nur einen einzigen Befehl habe, das alle Absätze gleich aussehen würden. aber ich möchte ja zum Beispiel auch spezielle Formatzuweisungen diesem Absatz hinterher zuordnen, und das macht man mit sogenannten Attributen. Ich kürze das mal ab und Attribute -- das ist leicht -- kommen immer mit einem Gleichheitszeichen und Anführungsstrichen daher, und innerhalb der Anführungsstriche stehen Werte, und dann folgt wieder das übliche bekannte Prinzip: Die "tags" gehen bis zu einer Stelle, wo sie wieder geschlossen werden. Das war's. Vielleicht an der Stelle ganz kurz den Hinweis: Es gibt auch "tags" die nicht geschlossen werden, aber das sind besondere Fälle, und dass wird man beim Schreiben auch noch mal genauer sehen. Das war's im Grunde schon, was man sich an der Stelle merken muss. Wir haben eine englische Sprachsyntax. Wir haben Befehle, die "tags", die in spitze Klammern geschrieben werden. Diese "tags" öffnen und schließen sich -- meistens jedenfalls. Und wir haben Attribute, die den Befehlen noch einmal etwas mehr Feuer verleihen, bzw. wo ich bestimmte Werte den Befehlen auch nochmal zuordnen kann, so dass ich dort wesentlich flexibler bin als nur bei einem einzigen starren Befehl. Das ist die Voraussetzung, um nun das Nächste zu machen, nämlich ein Grundgerüst, die Dokumentenstruktur.

HTML und CSS für Designer

Steigen Sie als Designer ein in HTML und CSS. Sie gestalten ein responsives Reisemagazin und erleben dabei, dass der Workflow beim Gestalten nicht anders ist als gewohnt.

3 Std. 9 min (39 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

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!