Die Inhalte meiner Lernzielkontrolle zum Thema HTML sind das Thema
der dreiunddreißigsten Episode des Anwendungsentwickler-Podcasts.
TL;DR Mit meiner Lernzielkontrolle zu HTML kannst du Grundlagen
wiederholen, die für dich als IT-Azubi in der Anwendungsentwicklung
und für deine Abschlussprüfung relevant sind. HTML steht für
Hypertext Markup Language und gibt verknüpften Texten durch Tags
eine Bedeutung. Dazu gehören die Syntax mit Elementen und
Attributen sowie der Dokumentbaum, auf den JavaScript über das DOM
zugreift. Weitere Themen sind DOCTYPE, XML und valide Dokumente;
semantisches Markup hilft Suchmaschinen und Screenreadern dabei,
deine Inhalte zu verstehen. Kapitelmarken [00:00:01] Einstieg:
Lernzielkontrolle zu HTML [00:00:25] HTML in Ausbildung und
Abschlussprüfung [00:01:32] HTML und Hypertext [00:03:01]
Auszeichnungssprache und Semantik [00:04:57] Syntax: Tags und
Elemente [00:06:35] Kommentare in HTML [00:06:59] HTML-Entities und
UTF-8 [00:09:27] Attribute und Anführungszeichen [00:10:27] Leere
Elemente und empfohlener Schreibstil [00:12:05] Dokumentbaum mit
html, head und body [00:14:11] DOM und dynamische Inhalte mit
JavaScript [00:15:11] DOCTYPE und HTML5 [00:16:14] XML als
erweiterbare Auszeichnungssprache [00:17:37] W3C, DTD und
HTML-Standards [00:19:31] Wohlgeformtheit und Validität [00:21:42]
Semantisches Markup in HTML5 [00:23:16] Suchmaschinen und
Barrierefreiheit [00:24:56] Passende Elemente für deine Inhalte
[00:25:48] Fragen und begleitende Links [00:26:29] Ausbildungsplan
als Excel-Datei [00:27:02] Git-Workflows [00:27:24] Feedback und
Fragen zur Ausbildung [00:27:56] Newsletter und Checklisten zur
Prüfung [00:28:30] Ausblick: Mündliche Ergänzungsprüfung Inhalt
HTML: Hyptertext Markup Language Was ist Hypertext? Was ist eine
Auszeichnungssprache? Syntax: spitze Klammern, Kommentare, Entities
Tags, Elemente, Attribute Baumstruktur und DOM HEAD und BODY
DOCTYPE Unterschied zu XML Wohlgeformtheit und Validität
semantisches Markup Neuerungen in HTML5 W3C Literaturempfehlungen
Mit dem Buch von Brian Hogan* habe ich selbst vor einigen Jahren
HTML5 und CSS3 gelernt. Es ist inzwischen natürlich etwas in die
Jahre gekommen. Da es recht kurz ist, empfehle ich es meinen Azubis
als gute Einstiegslektüre. * Wer aber die volle Dröhnung HTML haben
will, dem sei eher das Handbuch aus dem Rheinwerk Verlag* mit über
1.000 Seiten empfohlen. Da bleibt keine Frage offen ;-) * Jürgen
Wolf - HTML5 und CSS3: Das umfassende Handbuch beim Rheinwerk
Verlag Links Permalink zu dieser Podcast-Episode RSS-Feed des
Podcasts Zeichensätze und -kodierung - Anwendungsentwickler-Podcast
#32 HTML5 Reference HTML 4 Document Type Definition Hypertext
Markup Language – Wikipedia Hypertext – Wikipedia HTML5 Style Guide
Extensible Markup Language – Wikipedia Document Object Model –
Wikipedia World Wide Web Consortium – Wikipedia Zusammenfassung
HTML in Ausbildung und Prüfung Ich prüfe mit meinen IT-Azubis
regelmäßig die Themen, die sie zuvor gelernt haben. Beim Thema HTML
gehören dazu Grundlagen, die auch in der schriftlichen oder
mündlichen Abschlussprüfung vorkommen können. Wenn du als
Fachinformatiker:in Anwendungsentwicklung ein Webprojekt für deine
Abschlussprüfung umsetzt, solltest du diese Begriffe erklären
können. Was HTML bedeutet HTML steht für Hypertext Markup Language.
Hypertext bezeichnet Textdokumente, die durch Links miteinander
verbunden sind. Ein Klick führt dich von einem Dokument zu einem
anderen. Tim Berners-Lee entwickelte dieses Prinzip am CERN, um
zusammengehörende Forschungsdokumente zu verknüpfen. Eine Markup
Language, also eine Auszeichnungssprache, gibt Textbestandteilen
eine Bedeutung. Mit h1 kennzeichnest du beispielsweise eine
Überschrift, mit p einen Absatz. Diese Bedeutung heißt auch
Semantik. Browser interpretieren die Elemente und stellen sie
entsprechend dar, etwa mit einer großen Überschrift oder einem
Abstand nach einem Absatz. Auch LaTeX arbeitet mit dem Prinzip,
Textbestandteilen eine Bedeutung zu geben. HTML dient dazu, Inhalte
auszuzeichnen; die für das Programmieren beschriebenen
Kontrollstrukturen wie Schleifen und Verzweigungen fehlen. Tags,
Elemente und Kommentare HTML-Tags stehen in spitzen Klammern. Ein
öffnendes Tag sieht beispielsweise so aus: . Beim schließenden Tag
steht ein Slash vor dem Namen: . Das vollständige Element umfasst
die Tags und den Inhalt dazwischen: html Meine Überschrift Ein Tag
bezeichnet dabei die einzelne öffnende oder schließende Markierung.
Kommentare schreibst du mit am Ende: html Damit kannst du auch
Teile eines Dokuments auskommentieren, wenn du etwas testest.
Sonderzeichen und HTML-Entities Wenn ein Zeichen im HTML-Kontext
eine besondere Bedeutung hat und als Text erscheinen soll, kannst
du es als Entity schreiben. Benannte Entities beginnen mit einem
kaufmännischen Und, gefolgt von einer Abkürzung und einem
Semikolon. Beispielsweise steht > für das Größerzeichen >.
Für Umlaute und viele weitere Sonderzeichen gibt es ebenfalls
Entities. Bei einem passend kodierten UTF-8-Dokument kannst du
deutsche Umlaute direkt schreiben. Ich empfehle Entities für
Zeichen, die HTML sonst als Teil seiner Syntax interpretieren
würde. Attribute und Schreibstil Attribute stehen im öffnenden Tag
und ergänzen ein Element um Eigenschaften. Du schreibst sie als
Schlüssel-Wert-Paare, etwa schlüssel="wert", wobei Leerzeichen
mehrere Attribute voneinander trennen. Ich empfehle, Attributwerte
immer in Anführungszeichen zu setzen. Das macht den Code lesbarer
und verringert Fehler. Enthält ein Wert Leerzeichen, sind die
Anführungszeichen erforderlich. Bei Elementen ohne Inhalt,
beispielsweise hr für eine horizontale Linie, bevorzuge ich die
Schreibweise . Diese Empfehlung orientiert sich an der XML-Syntax
und an dem verlinkten HTML-Styleguide. Auch die Tags für head und
body schreibe ich ausdrücklich ins Dokument. Dokumentbaum und DOM
Ein HTML-Dokument hat eine Baumstruktur, deren Wurzelelement html
ist. Darunter liegen head und body: Im head stehen Kopfdaten und
Metainformationen, beispielsweise Angaben zur Zeichenkodierung. Im
body stehen die sichtbaren Inhalte, darunter Texte und Bilder.
Weitere Elemente werden darin verschachtelt. Ein Ast enthält
untergeordnete Elemente; ein Blatt hat keine weiteren Elemente
unter sich. Das Document Object Model, kurz DOM, definiert, wie
Programme auf diesen Baum zugreifen können. Mit JavaScript kannst
du beispielsweise Kind- und Elternelemente auslesen oder Inhalte
verändern. Wenn du per AJAX einen Blogartikel vom Server nachlädst
und in den bestehenden Baum einfügst, aktualisiert der Browser den
betroffenen Teil der Seite. DOCTYPE, XML und Standards Am Anfang
eines HTML-Dokuments steht der DOCTYPE, der die verwendete
HTML-Version kennzeichnet. Für HTML5 lautet er: html XML steht für
Extensible Markup Language, also erweiterbare Auszeichnungssprache.
Damit kannst du eigene Elemente und Attribute festlegen und deine
Sprache erweitern. Die Syntax arbeitet ebenfalls mit Tags in
spitzen Klammern. Für HTML sind die erlaubten Elemente und
Attribute durch einen Standard festgelegt. Das W3C, ausgeschrieben
World Wide Web Consortium, wird als Gremium beschrieben, in dem
Unternehmen und weitere Beteiligte solche Standards abstimmen. Bei
XML können eine DTD, also Document Type Definition, oder ein
XML-Schema die Regeln einer Sprache beschreiben. Für ältere
HTML-Versionen existieren DTDs. HTML5 hat keine DTD, weil deren
Möglichkeiten für bestimmte Regeln zu eingeschränkt sind. In den
begleitenden Links findest du eine HTML5-Referenz sowie eine ältere
HTML-DTD. Wohlgeformt und valide Bei XML gehören Wohlgeformtheit
und Validität zu den Begriffen, die du auseinanderhalten können
solltest: Wohlgeformt bedeutet, dass ein Dokument die syntaktischen
Regeln erfüllt. Dazu gehören korrekt verschachtelte Tags und
Attributwerte in Anführungszeichen. Verschachtelte Elemente werden
in der passenden Reihenfolge geschlossen. Valide bedeutet, dass das
Dokument zusätzlich die Regeln der jeweiligen Sprache erfüllt,
beispielsweise die Vorgaben zu erlaubten Elementen und
Pflichtattributen. Ein valides XML-Dokument ist immer auch
wohlgeformt. Ein syntaktisch korrekt geschriebenes Element mit
einem selbst ausgedachten Namen kann gegen die vorgegebenen Regeln
verstoßen. Prüfprogramme können solche Fehler erkennen und dir
Hinweise geben. Semantisches Markup und Barrierefreiheit Mit HTML5
kamen zusätzliche Elemente hinzu, die Inhalte genauer beschreiben.
Dazu gehören beispielsweise header und footer sowie figure für
Abbildungen. Bei einem allgemeinen div vermittelt ein
CSS-Klassenname diese Bedeutung den verarbeitenden Programmen nicht
automatisch. Ich achte bei den HTML-Dokumenten meiner IT-Azubis
darauf, dass die gewählten Elemente zum Inhalt passen:
Überschriften erhalten passende Überschriftenelemente. Für
Aufzählungen stehen ul und li zur Verfügung. Absätze werden mit p
ausgezeichnet. Kopf- und Fußbereiche erhalten die entsprechenden
semantischen Elemente. Abbildungen können mit figure umschlossen
werden. Suchmaschinen können durch semantisches Markup erkennen,
welche Rolle ein Inhalt hat. Für Screenreader, die blinden Menschen
Webseiten vorlesen, sind solche Angaben ebenfalls relevant: Sie
können Überschriften entsprechend behandeln und Inhalte
verständlicher wiedergeben. Wenn du deine Website entwickelst,
solltest du auch Besucher:innen berücksichtigen, die eingeschränkt
sehen oder eine Maus schwer bedienen können. Begleitmaterial und
weitere Themen Unter anwendungsentwicklerpodcast.de/33 findest du
die erwähnten Links und kannst mir Fragen oder Hinweise als
Kommentar schicken. Per E-Mail erreichst du mich unter
mail@anwendungsentwicklerpodcast.de. Auf meiner Website stelle ich
außerdem einen Ausbildungsplan für Fachinformatiker:innen
Anwendungsentwicklung als Excel-Datei bereit. Damit lassen sich
Ausbildungsinhalte zeitlich zuordnen und verschieben....
Kommentare (0)
Melde dich an, um einen Kommentar zu schreiben.