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.

XML Grundkurs

XML im Browser darstellen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Am Ende soll jeder Text gut lesbar sein. Dazu gehört dessen typografische Darstellung. Dieser Film zeigt, wie das mit Hilfe von CSS realisiert wird.
04:55

Transkript

In diesem Film zeige ich Ihnen, wie man XML-Dateien in einem Browser darstellen kann. Ich habe hier in meinem Editor Oxygen die Datei '06_04_sample.xml' aufgemacht und diese Datei möchte ich jetzt gerne in einem Browser darstellen, sodass die Leute die sinnvoll lesen können und schau mir einfach an, wie das funktioniert. Zunächst öffne ich die Datei einfach mal im Browser und gucke, vielleicht funktioniert’s ja und vielleicht sieht die schon richtig toll aus, sieht sie leider nicht. Der Browser stellt einfach meine XML-Struktur dar und sagt mir, dass keine Style-Informationen mit dieser Datei verbunden sind. Da ist jetzt natürlich die Frage: Was tun? Wie kriege ich da jetzt Style-Informationen rein und was sind überhaupt diese Style-Informationen? Style-Informationen können, zum Beispiel, 'Cascading Style Sheets' sein. Ich habe hier schon die CSS-Datei, also eine Cascading Style Sheets-Datei 'adress.css' angelegt. Und Sie sehen hier, das sind die Elementnamen aus meiner XML-Datei: 'card', 'firstname', 'name' und 'email'. Im CSS heißen die jetzt Selektoren und dahinter stehen in geschweiften Klammern die Eigenschaften. Also das, wo ich reinschreibe, wie es dargestellt werden soll. 'card', da steht ja jetzt kein Text drin in diesem Element, aber ich sage im Prinzip, um eine solche Karte, um eine Angabe von einem Adress-Satz soll ein Rand sein {margin:1em}, also das heißt, das ist der äußere Rand, der 'Margin' um so einen Adress-Satz drum rum. Für 'firstname' habe ich jetzt einfach bloß eine Schriftgröße angegeben: "medium". Bei 'name' habe ich noch mehr angegeben, da habe ich jetzt gesagt: Okay, das soll eine andere Schriftart sein, es soll in sans-serif dargestellt sein. Ich will, dass ich den Namen immer sofort lese, das heißt er soll in der Font-size 'large' sein, also relativ groß und ich sage auch noch: in roter Farbe. Das heißt, ich sehe dann immer sofort den Namen und kann mich daran als erstes orientieren. Und die E-Mail, da habe ich jetzt gesagt: bitte gleicher Font wie der Name. Font-Size 'medium', also wieder so klein oder groß wie der Vorname und die Farbe Blau. Wie kriege ich jetzt diese CSS-Information in mein XML-File? Dafür muss ich eine Verarbeitungsanweisung da rein schreiben, eine Processing-Instruction. Das mache ich jetzt. Die kommt in den Prolog, die soll ja für die ganze XML-Datei gelten. Und die Syntax für eine Verarbeitungsanweisung ist, -- und ich habe hier einen assistierenden Editor hier mit Oxygen, also der sagt mir gleich: Hallo, willst du ein XML-Stylesheet da rein haben? Ich sage ja. Und dann kriege ich gleich die ganze Zeile mit den Attributen die ich brauche. Das ist natürlich sehr nett, da vergesse ich nichts und sage hier, das soll eine Text-CSS-Datei sein. Und die Referenz dazu, das ist praktisch der Dateiname. Wenn das jetzt nicht im gleichen Ordner liegt, muss ich auch noch den Pfadnamen angeben; aber es liegt ja im gleichen Ordner und das ist "adress.css". So, ich speichere die Datei. Gehe jetzt wieder in meinem Browser und rufe die Datei auf und siehe da, der Inhalt ist jetzt schon besser angelegt, viel besser dargestellt. Also so ungefähr wie ich es haben wollte, nicht ungefähr, sondern genau so, wie ich es in CSS angegeben habe. Mir gefällt das Ganze jetzt noch nicht, weil ich will eigentlich, dass die Adress-Sätze nicht nebeneinander so in einer langen Zeile angezeigt werden, sondern ich möchte, dass die untereinander angezeigt werden. Das heißt, ich muss nochmal in mein CSS gehen und etwas ändern. Ich gehe in die CSS-Datei und sage: Okay, so ein Satz, so ein Adress-Satz das ist ja praktisch mein 'card'-Element und ich muss da jetzt was in den Eigenschaften ändern. Ich will, dass das wirklich als ein einzelner Block dargestellt wird. Die Darstellung, das ist die Eigenschaft "display" in CSS. Hier wird mir auch schon angegeben: 'compact', 'inline', 'inline-block'. Ich will halt wirklich, dass es als ein Block ist, also wirklich abgegrenzt von allem Anderen. Ich muss die Eigenschaften mit einem Semikolon voneinander trennen, in den geschweiften Klammern drin. Speichere jetzt natürlich meine CSS-Datei. Muss jetzt nichts mehr hier ändern, weil es ist ja die gleiche CSS-Datei die verbunden ist mit dem XML, also im XML ändere ich gar nichts. Und gehe wieder in den Browser, lade das Ganze neu und es wird untereinander angezeigt, so wie ich’s haben möchte. Sie haben jetzt einen kleinen Einblick bekommen, wie ich XML-Dateien vernünftig angezeigt, in einen Browser bekomme.

XML Grundkurs

Lernen Sie, wie XML-Dateien aufgebaut sind, worauf es ankommt, wenn man XML editiert, und was Dokumentenklassen sind.

2 Std. 28 min (28 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Software:
Exklusiv für Abo-Kunden
Erscheinungsdatum:07.11.2016

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!