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

Aufzählungen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Ist man gewohnt, mit Aufzählungen oder nummerierten Listen zu arbeiten, so ist der Einsatz einer "Ordered" oder "Unordered List" schnell zu verstehen.

Transkript

Das HTML-Dokument nimmt bereits richtig Formen an. Wir haben den Titel, wir haben Untertitel, wir haben Fließtext, wir haben Grafiken und wir haben Hyperlinks. Was gibt uns unser Vorlagendokument noch? Die Aufzählung, ganz genau. Diese Aufzählung, die wir hier drin haben, die besteht auch im Wesentlichen nur aus einem Absatzformat, und das habe ich auch schon so genannt: "ordered list". Das Absatzformat selber, das hat ja hier die Information, das Ganze ist nummeriert, und Sie wissen, dass Sie auch andere Möglichkeiten wählen können. Also anstatt der Nummerierung kann man verschiedene Varianten der Nummerierung wählen oder eben ganz anders. Also keine Nummerierung als Listentyp, sondern Aufzählungszeichen wie Pünktchen oder Carets etc. Und genau das gibt es auch wieder in HTML. Also, immer wieder Gemeinsamkeiten, die bereits bekannte Dinge nur etwas anders ausdrücken. Eine solche Aufzählung, die trägt man in HTML entsprechend ein. Ich habe das hier bereits mal vorbereitet, damit ich das besser finde. Sie sehen gleich, wie man eine weitere nette Funktion in HTML verwenden kann. Das hier ist ein bisschen eingegraut. Das ist ein Kommentar. Kommentare werden im Browser nicht angezeigt, und Kommentare werden so eingeleitet, wie Sie hier sehen. Also auch wieder ein Befehl innerhalb von spitzen Klammern, dann folgt aber ein Ausrufezeichen und zwei Bindestriche, und das Ganze muss mit zwei Bindestrichen wieder geschlossen werden. Vergisst man das, dann hat man auf einmal alles eingegraut bis sowas kommt, das würde dann auch nicht mehr dargestellt. Schön ist nun, dass Sie in Kommentare eine Erinnerung reinschreiben können, oder Dinge, woran Sie denken möchten. Gerade auch für so einen Designprozess hinterher ganz interessant. Eine letzte Anmerkung dazu: Sie sollten keine Romane reinschreiben, denn anders als in anderen Programmen wird der Webbrowser Kommentare, die Sie geschrieben haben, laden müssen. Es ist Text und verlängert Ladezeit, da müssten Sie zwar viel reinschreiben, es ist aber nicht so, dass man ganze Romane hinterlegen sollte sondern einfach kurz und knackig die Info, die man nicht vergessen möchte. Oder solch eine Variante, die man besser und schneller finden kann. Wie füge ich nun eine Aufzählung ein? Das Ganze ist wieder in einem Container, und der Container muss ja wissen, wie es hier in dem Kommentar steht: Von wo bis wohin sollen denn jetzt einzelne Absätze aufgezählt werden? Der Befehl dazu ist ziemlich simpel: "ol" von "ordered list". Das Ganze soll bis an diese Position gehen. "ol" Das würde jetzt noch nicht funktionieren, weil die Absätze, die wir hier drin haben, die "p"s, keine Listenelemente sind. Und damit habe ich auch schon verraten, Listenelemente von dieser "ordered list", also einer nummerierten Liste, die werden mit "li" eingetragen. Das Ganze geht dann bis dahin. Jetzt muss ich nur einfach darauf achten, dass ich alle "p"s, die innerhalb der "ordered list" stehen, durch "li" und schließendes "/li" ersetze. Da hilft mir der Editor wieder schön. Man sieht jetzt, das ist wirklich der, den ich schließe, weil beide jetzt grau sind. "li" - jetzt muss ich den suchen. Wenn ich den nehme sollte, dann werde ich merken, der springt direkt da rein. Das ist er nicht, also gibt es irgendwo ein "li", das steht weiter hinten; da. Ein "p" meinte ich, das "li" steht jetzt da. Und jetzt passt das. Das Ganze mache ich hier noch einmal an der Stelle, und hier sowie - last but not least - an der Position. Das war schon der ganze Prozess, um eine nummerierte Liste zu erzeugen. Ich speichere ab, schalte in den Browser, um das Ganze zu kontrollieren, aktualisiere das, schon steht hier unten eine nummerierte Liste. Möchte ich das Ganze jetzt tatsächlich wie auch in InDesign eben gezeigt nicht als nummerierte Liste, sondern mit Aufzählungszeichen haben, ist auch das ziemlich simpel. Dann ist das eben keine "ordered list", sondern eine "unordered list". Also ein "ul". Ich tausche das einfach mal aus, ich speichere wieder ab, schalte um, aktualisiere - und wie man sieht: Jetzt habe ich Aufzählungspunkte. Gar nicht so schwer. Das möchte ich natürlich nicht, also bleibe ich beim "ol". Sie sehen, gar nicht so schwer. Das Einzige, was man jetzt noch hinzufügen muss, ist der Footer-Bereich. Dann ist das HTML-Dokument bereits abgeschlossen.

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!