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

Einteilung und Abschnitte mit HTML <h2>, <p>, <img>

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Typographische Vorgaben wie Schriftart, Schriftschnitt und -gewicht bis hin zu Überschrifts- oder Fließtextdefinitionen sind ebenfalls in HTML sehr gut abzubilden.

Transkript

Die drei Artikel aus dem InDesign- Dokument besitzen natürlich auch Inhalt und dabei ist es vollkommen egal, ob Sie schon die Texte ausgearbeitet haben oder nicht. Ich habe hier auf jeden Fall die Titel und den Rest, der besteht einfach nur aus Mustertext. Das Schöne ist auch hier, dass man das im Grunde relativ einfach übernehmen kann. Ich markiere mir einfach diesen Text drücke "Steuerung + C" und speichere den in die Zwischenablage. Dass man hier Formatangaben mit übernimmt, da braucht man keine Bange zu haben weil wenn man in einem echten HTML Editor arbeitet, werden die nicht mit übertragen. - ich mache das etwas kleiner - Schauen wir uns das kurz im Hintergrund an. Wir haben also jetzt einen Textbereich im Artikel 1. Der besteht aus einer Überschrift und einem Fließtext. Hier noch mal auf die Absatzformate, die Überschrift selbst hat das Absatzformat "Header" und der Fließtext selber "Page". Und das ist nun wieder abzubilden im Artikelbereich und zwar im ersten Artikelbereich, und das ist leicht, wenn ich weiß dass die Überschrift der "Header 2" ist dann ist das in HTML hier "H2" und da schreibe ich dann "zurück zu den Wurzeln". Nichts Besonderes, wird einfach so übernommen wie es hier steht. Und der Fließtext, der in InDesign als "Page" drin steht, der wird mit dem Befehl "P" übernommen. "P" steht für "page" bzw. für den Absatz. Und genau dort hinein folgt der in die Zwischenablage kopierte Text mit "Command" oder "Steuerung+V". Und das ist das ganze Geheimnis, jetzt habe ich meinen Fließtext hier drin, und muss nur noch im Anschluss daran ein Bild übernehmen, denn das befindet sich ja auch noch hier an der Stelle. Ich sehe gerade, wir haben noch einen zweiten Absatz. Den muss ich natürlich auch übernehmen, also markiere ich mir den ebenfalls, "STRG+C" in die Zwischenablage, ich wechsele wieder hierhin zurück und das ganze Spiel noch einmal. Ich trage wieder ein "P" ein und Sie sehen, Ich schließe die Befehle immer direkt, weil wenn man da sehr viel Text dazwischen stehen hat, dann vergisst man das ganz schnell und deswegen mache ich das in der Regel immer auf und wieder zu und jetzt wieder "Command+V" und füge das Ganze ein. Ich hatte das in eine Zeile geschrieben, aber egal, es ist drin. Was uns dann letztendlich noch fehlt ist die Grafik. Da muss man ein wenig vorbereiten. Ich habe hier im Hintergrund bereits die notwendigen Ordner geöffnet. Wenn ich mich in der Fotoauswahl für Grafiken entschieden habe, die auch hier in InDesign übernommen wurden, dann muss ich diese auch meiner Website zur Verfügung stellen. Ich habe also die Fotoauswahl geöffnet und kopiere jetzt einfach diese vier Grafiken in den Website Ordner und zwar dort in den Ordner "images". Und jetzt muss ich mir ganz genau merken wie diese Dateien heißen. Ich habe hier den Scotland Header, ich habe Scottish Coast, Scottish Forest, Scottish Things. Das im Hintergrund ist Scottish Forest und genau das muss ich auch übernehmen. Einfach auch hier wieder Namen in die Zwischenablage. Es geht darum, welcher Befehl für die Bild Einbindung in HTML zuständig ist, und auch das ist relativ leicht. Das ist nämlich das Kürzel IMG von Image. Hier müssen wir eine Quelle angeben. Das Attribut dazu nennt sich "SRC" und steht für "Source". Auch das kann man sich relativ leicht merken. Und der Name ist "Scottish_Forest.jpg" Das alleine reicht aber nicht. Ich wechsele noch mal zu den Ordnern wenn wir uns das jetzt anschauen von der Struktur her, dann steht die HTML-Datei eine Ebene über dem Ordner "images" - die Fotoauswahl kann ich schließen - und die HTML-Datei hat aber hier im Hintergrund die Angabe dass es von der HTML-Datei nur den Aufruf "scottish_forest.jpg" gibt. Das ist aber nicht der Fall, denn ich muss ja einmal in diesen Ordner hinein und das schreibt man in HTML schlicht und ergreifend durch Angabe des Verzeichnisses also "images" und dann öffnen Sie die Klinke Schrägstrich nach rechts / und sie kommen an den Namen "scottish_forest.jpg" dran. Was dann noch übrig bleibt ist ein weiteres Attribut. Dieses Attribut hat den Namen "alt" und Sie erinnern sich, das ist uns auch in InDesign schon mal begegnet, denn dort kann man auch Informationen zu Grafiken hinterlegen. Der "alt-tag" steht nicht für das Alter oder vergleichbare Zeitangaben, sondern der "alt-tag", steht für "alternative graphics", denn es kann durchaus sein, dass ein Browser die Grafik nicht anzeigt, aus welchen Gründen auch immer. Er kann sie nicht laden oder es wird ausgeblendet. Jemand, der aber die Seite betrachtet bekommt dann diese Alternative zu sehen als Text, beispielsweise. Und man kann hier eine Beschreibung des Bildinhaltes hineinsetzen, oder zumindestens irgendetwas was einen Bezug zu dem Artikel herleitet. Ich schreib mal genau den Titel nochmal hin. Nicht ideal, aber es soll erstmal für den Zweck hier ausreichen. Dann schließe ich diesen Befehl wieder. Damit der Einbindung der Grafik und den Attributen die sich hier drin befindenden, der Import abgeschlossen ist, brauche ich auch hier das ist ein weiterer Befehl, keinen schließenden "Tag" und damit ist dieser erste Artikel bereits erledigt. Speichern wir das Dokument ab gehen in den Webbrowser und aktualisieren und wie Sie sehen das hat schon stark was von einer Website. Also zumindest kann man es lesen. Vom Design ist da noch nicht viel über, aber der Rest ist schon mal enthalten. Und Sie sehen, so füllt sich nun schrittweise die Seite und das Einzige, was man nun machen muss ist genau die gleiche Arbeit. Wir haben hier den nächsten Artikel. Man übernimmt den Fließtext, man übernimmt die Grafik. Um die Aufzählung kümmern wir uns noch, aber zumindest auch beim letzten Artikel haben wir eins, zwei, drei, vier "P"s in die wir Text hinein kopieren müssen ein H2 und einen Imagetag und das muss man jetzt nur noch in das HTML-Dokument übernehmen.

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)
Gute Ansätze und verständlich erklärt
shapead

Ich habe zwar mit html und css schon meine Erfahrungen gemacht und einfache Websites bereits selbst umgesetzt, trotzdem habe ich mir dieses Video zum Auffrischen angesehen. Diese Video ist ein guter Einstieg für alle Anfänger. Als Grafik-Designer gefällt mir die Idee mit dem Vergleich und Vorbereitung InDesign sehr gut. Ein paar Tipps konnte ich daher für mich auch herausholen.

 

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!