HTML und CSS für Designer

Unsichtbare Dokumentinformationen im <head>

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Im Satzprogramm finden sich die Dokumentinformationen oder Infobereiche, die weder ausgegeben noch auf den ersten Blick sichtbar sind - bei HTML ist das der Head-Container.

Transkript

Nach der Fertigstellung des Grundgerüsts können wir damit beginnen, die Inhalte aus dem Online-Magazin, also dem InDesign Dokument, in das HTML-Dokument zu übertragen. Sie werden sehen, dass es da viele Gemeinsamkeiten gibt. Starten wir im "head"-Bereich. Der "head"-Bereich selbst ist ein Sektor in dem HTML-Dokument der weitere Informationen aufnehmen soll. Das sind sowohl Informationen zum Dokument selber. Das sind Informationen für die -- wenn man das möchte -- Suchmaschinenoptimierung aber auch Steuerungsinformationen, das heißt das Einbinden von Stylesheets, von externen Dateien, von Skripten. Alles, was in dem "head"-Bereich steht, wird in einem Webbrowser nicht angezeigt. Es gibt eine Ausnahme, das ist der Titel, und der Titel ist sowohl für die Suchmaschinen wichtig, als auch für den Browser. Das zeige ich Ihnen mal. Ich habe also die Seite aufgerufen, und, wie man sieht, taucht hier oben "Reisemagazin über", na ja, gut, das ist kein "über", aber sie werden sehen, woran das liegt. Das wird gleich verschwinden, wenn die ersten Steuerungsinformation in den "head"-Bereich kommen, aber es fällt auf, in dem eigentlichen Anzeigebereich sieht man gar nichts, und der Titel taucht aber hier oben im Reiter auf. Das hat auch eine Bedeutung nachher für Suchmaschinen, eine sehr wichtige sogar. Wie geht's dann weiter? Am besten beseitigen wir diesen Fehler, und da der Fehler auftritt, bedeutet das, dass im Grunde hier vorne noch eine Information fehlt, und die Informationen, die dort schwerpunktmäßig drin stehen, die beginnen alle mit einem HTML-Befehl namens "meta". Und hier tragen Sie ein mit dem Attribut "charset", um was für einen Zeichensatz es sich handelt, und in HTML5, in dem wir arbeiten, steht da immer diese Zeile oder sollte sie zumindest drin stehen. Sie können da auch was anderes eintragen, aber das bietet sich nicht an. Da braucht man sich im Grunde gar keine großen Gedanken machen. Nehmen Sie die Zeile, dann können Sie das auch noch abspeichern, hier im Browser aktualisieren, und Sie sehen, schon verschwindet dieser Fehler hier oben. Diese Angabe hat mit dem Zeichensatz zu tun, und dass er vor allen Dingen auch Umlaute etc. vernünftig darstellen kann, zumindestens in den Fließtexten, wo wir sie auch benötigen, sowohl im Titel als auch später im "body"-Bereich. Schauen wir mal in unserem InDesign Dokument nach, was wir da so haben. Sie haben die Möglichkeit, in InDesign einen Infobereich zu definieren Das habe ich mal gemacht. Hier oben habe ich reingeschrieben, um was es geht. das ich der Autor bin, Beschreibung, Schlagwörter etc. Falls man sowas in dem Satzprogramm, mit dem man arbeitet, nicht findet, dann haben Sie aber mit Sicherheit so etwas wie die Dateiinformationen. Die gibt es selbstverständlich hier auch und sehen so aus, das ist im Grunde das gleiche: Dokumenttitel, Autor, Beschreibung und wir haben an der Stelle noch Stichwörter. Hier kann ich da eintragen "Schottland, Reisemagazin" oder zum Beispiel noch Küste, und damit deckt sich das nahezu eins zu eins mit den relevanten Vorgaben, die wir auch benötigen in der HTML-Programmierung. Ich wechsele dafür mal in den Editor, und lasse das hier ruhig mal stehen. "Reisemagazin" habe ich jetzt drinstehen, "Reisemagazin über Schottland" könnten wir auch abändern; "Schottland - Reif für die Insel", und dann hätten wir einen ganz wichtigen "tag", und ich möchte mich da darauf beschränken, was wirklich empfehlenswert ist. Sie werden, wenn Sie recherchieren, jede Menge Informationen finden, die Sie in den "head"-Bereich hineinbringen, aber wir beschränken uns wirklich auf das absolut Notwendige. Ein ganz wichtiger "tag", der sollte direkt nach dem Titel kommen, Das ist der "description tag". Sie sehen, jetzt werden die Attribute mit "name" eingeleitet, also nicht mehr mit einem speziellen "charset", und dann kommt die "description" mit dem Inhalt "content" gleich, und jetzt können Sie ganz normal hinein schreiben um was es geht. Also im Prinzip kann ich mir jetzt hier die Information kopieren in die Zwischenablage mit Command-C und trage sie hier mit Command-V ein und habe den Text nun hier drin stehen, und muss hinten den "meta"-Tag schließen. "meta"-Tags sind im übrigen auch Befehle, die nicht explizit einen öffnenden und schließenden "tags" haben, weil die müssen nicht einschließen -- das tun sie durch die Attribute. Dann haben wir noch einen Kandidaten. Das ist der Metatag: "keywords". "keywords", wie der Name schon sagt, da geht es darum, dieses Dokument mit Suchbegriffen auszustatten, und das haben wir hier genau so in meinem InDesign-Dokument. Also: "schottland" und "reisemagazin" und "küste". Es wird diskutiert, ob man das mit Umlauten schreiben sollte oder nicht oder es gibt es noch spezielle Zeichen. Dafür ist dann Zeit, wenn man sich hinterher näher beschäftigt, ob man da was optimieren kann oder nicht . Das ist das absolut Notwendige, was ich Ihnen empfehlen würde, was in diesen "head"-Bereich hinein kommt, und es gilt auch nur dann, wenn Sie die Seite veröffentlichen möchten. Trotzdem finde ich es gut, wenn man da hineinschreibt auch bei einem Workflow zur zum Beispiel Entwicklungsabteilung weil die Entwickler jetzt einfach wissen, was soll hier für eine Beschreibung rein. Ob sie die noch umformulieren oder aus SEO, Search Engine Optimisation, Gesichtspunkten anpassen. Das kommt darauf an, wie genau, wie präzise Sie die Vorgaben haben. Aber ich denke, das macht deutlich: Auch hier haben wir Gemeinsamkeiten zu einem Satz und Print-Dokument und dem, was in HTML geschrieben wird. Damit haben wir diesen Schritt gemacht und können das "index.html" abspeichern.

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!