Webtechnologien
Wintersemester 2024
<!DOCTYPE HTML> <html lang="de"> <head> <meta charset="utf-8"> <title>Hypertext Markup Language</title> <meta name="viewport" content="width=792, user-scalable=no"> <base target="_blank"> <link rel="stylesheet" href="/assets/styles/presentation.css"> </head> <body class="list"> <div class="notes"> <a href="text.html" target="_parent">♯</a> <a href="/notes/" target="_blank">♫</a> </div> <header class="caption"> <h1>Hypertext Markup Language</h1> </header> <section bg="eiger_nordwand.jpg" id="html" class="slide cover"><div><h2>HTML</h2> <p>Hypertext Markup Language</p> <p class="note">Quelle: <a href="https://www.flickr.com/photos/125167502@N02/14202022387/in/set-72157645103340985">Markus Spiske</a></p> </div></section> <section class="slide" id="vor-langer-langer-zeit"><div><h2>Vor langer, langer Zeit</h2> <ul> <li>Dokumente verstreut, Referenzen purer Text</li> <li>mühsame Suche der passenden Datei anhand der Text-Referenz</li> <li>Berners-Lee suchte einfache Auszeichnungssprache für sein WorldWideWeb</li> </ul> <footer> <ul> <li>Damals auch hip: SGML, LaTeX, MS Word</li> <li>SGML: Standard Generalized Markup Language</li> <li>Tim Berners-Lee brauchte etwas Einfaches und baute es – erst einmal – selbst</li> <li>HTTP als simples Protokoll zum Laden weiterer Dokumente</li> <li>HTML als simple Auszeichnungssprache, basierend auf SGML (1986 standardisiert)</li> </ul> </footer> </div></section> <section class="slide" id="sgml"><div><h2>SGML</h2> <p><img src="oed-lexx-bungler.jpg" alt="SGML" class="right" /></p> <ul> <li>Standard Generalized Markup Language</li> <li>Metasprache zur Definition von Auszeichnungssprachen</li> <li>Trennung von Inhalt und Layout</li> <li>Markup sollte deklarativ und präzise sein</li> </ul> <p class="note right">Quelle: <a href="http://en.wikipedia.org/wiki/File:OED-LEXX-Bungler.jpg">Wikipedia</a></p> <footer> <ul> <li><strong>deklarativ</strong>: Beschreibung der Struktur des Dokuments statt des Verarbeitungsprozess</li> <li><strong>präzise</strong>: Gründlich ausgezeichnete Dokumente, damit sie auch von anderen Programmen verarbeitet werden können</li> <li> <p>letzteres Knackpunkt zu HTML5</p> </li> <li>Parser konnte für jedes Computer-System implementiert werden</li> <li>Sprache definiert nur abstraktes Layout ohne Festlegung der Umsetzung in eine Präsentation</li> <li>es wird nur die Funktion / Rolle eines Textstücks beschrieben</li> <li> <p>damit unabhängig vom Formatierer / Betrachter (z.B. Browser)</p> </li> <li>Bild: Oxford English Dictionary (1985)</li> </ul> </footer> </div></section> <section class="slide" id="sgml-1"><div><h2>SGML</h2> <pre class="highlight language-xml" data-lang="xml"><code><span class="cp"><!DOCTYPE article PUBLIC "-//OASIS//DTD DocBook V3.1//EN"></span> <span class="nt"><article></span> <span class="nt"><sect1</span> <span class="na">id=</span><span class="s">"introduction"</span><span class="nt">></span> <span class="nt"><title></span>Hello world introduction<span class="nt"></title></span> <span class="nt"><para></span> Hello world! <span class="nt"></para></span> <span class="nt"></sect1></span> <span class="nt"></article></span> </code></pre> <p class="note right">Quelle: <a href="http://newbiedoc.sourceforge.net/tutorials/docbook-guide/basic-docbook-guide.html.en">newbiedoc.sourceforge.net</a></p> <footer> <ul> <li>Aufbau <ol> <li>SGML-Deklaration</li> <li>Prolog mit Dokumententyp (Doctype)</li> <li>Dokument an sich, beginnend mit einem Element und seinen Kindern</li> </ol> </li> </ul> </footer> </div></section> <section class="slide" id="html-1"><div><h2>HTML</h2> <ul> <li>1989 von Tim Berners-Lee als Teil des WorldWideWeb entworfen</li> <li>Übernahm SGMLs Elemente zur Strukturierung von Texten: Absätze, Überschriften, Listen</li> <li>Fügte Anker-Element hinzu, um Dokumente zu verknüpfen</li> </ul> <footer> <ul> <li>Wahl von SGML war ein kluger Schritt – andere hätten vielleicht eigene Sprache erdacht</li> <li>Dadurch höhere Akzeptanz</li> <li>Zudem leicht verständlich</li> </ul> <p><strong>Bilder</strong></p> <ul> <li>1992 tauschte sich eine Gruppen von Web-Enthusiasten zur Zukunft von HTML aus</li> <li>Unter anderem darüber, wie Bilder eingebettet werden könnten (und ob überhaupt)</li> <li>Dann kam Marc Andreessen dazu und stellte seine Idee des <code class="language-plaintext highlighter-rouge"><img></code>-Tags vor</li> <li>Nicht alle stimmten zu, aber Mosaic hatte es schon eingebaut und so ist es bis heute</li> </ul> <p><strong>Unternehmen</strong></p> <ul> <li>Die Arbeit am Web verlief langsam, weil viel ehrenamtlich</li> <li>Große Firmen hatten wenig Interesse am WWW, weil unklar, ob sich damit Geld verdienen ließe</li> </ul> </footer> </div></section> <section class="slide" id="html-im-wandel-der-zeit"><div><h2>HTML im Wandel der Zeit</h2> <p><img src="html5_logo.svg" alt="HTML5" class="right" width="200" /></p> <ul> <li>Snapshot-Standardisierung durch W3C</li> <li>Lebendige Entwicklung durch WHATWG</li> <li>Viele neue HTML-Elemente</li> <li>HTML5 nicht mehr XML-konform</li> </ul> <p><img src="html5-timeline.png" alt="HTML5 Timeline" class="center" /></p> <p class="note">Quelle: <a href="http://www.w3.org/html/logo/index.html">w3.org</a></p> <footer> <ul> <li>XML: Kritiker bemängeln, dass mangelnde Härte zu Schlamperei führt</li> <li>HTML5 teilweise <q>Paving the Cowpath</q> (Pflastern der Trampelpfade) – Standardisieren von Dingen, die weitläufig genutzt werden aber wild gewachsen sind</li> </ul> </footer> </div></section> <section class="slide shout" id="code"><div><h2>Code</h2> </div></section> <section class="slide" id="syntax--tags"><div><h2>Syntax – Tags</h2> <pre class="highlight language-html" data-lang="html"><code><span class="c"><!-- Ich bin ein Kommentar --></span> <span class="c"><!-- Start / Ende --></span> Ein <span class="nt"><strong></span>richtig<span class="nt"></strong></span> schöner Tag. <span class="c"><!-- Selbstschließend (void elements) --></span> <span class="nt"><hr</span> <span class="nt">/></span> oder <span class="nt"><hr></span> <span class="c"><!-- Schachtelung --></span> <span class="nt"><h1></span>Die <span class="nt"><strong></span>Chance<span class="nt"></strong></span> des Tages<span class="nt"></h1></span> </code></pre> <footer> <ul> <li>Wenn nicht geschlossen, wird Geltungsbereich erahnt</li> <li>case insensitive: sollten aber klein geschrieben werden</li> <li>unbekannte = inline (aber nicht nötig)</li> </ul> </footer> </div></section> <section class="slide" id="syntax--attribute"><div><h2>Syntax – Attribute</h2> <pre class="highlight language-html" data-lang="html"><code><span class="c"><!-- Schlüssel-Wert-Paar --></span> <span class="nt"><input</span> <span class="na">value=</span><span class="s">"Goku"</span> <span class="na">placeholder=</span><span class="s">"Name"</span><span class="nt">></span> <span class="c"><!-- binäre Attribute (kann Wert haben, muss aber nicht) --></span> <span class="nt"><input</span> <span class="na">disabled</span><span class="nt">></span> <span class="c"><!-- Mehrere Werte als leerzeichengetrennte Liste --></span> <span class="nt"><input</span> <span class="na">class=</span><span class="s">"aktiv obligatorisch hervorgehoben"</span><span class="nt">></span> <span class="c"><!-- Custom Data Attributes --></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"notifications"</span> <span class="na">data-count=</span><span class="s">"3"</span><span class="nt">></span>Benachrichtigungen<span class="nt"></span></span> </code></pre> <footer> <ul> <li>Leerzeichen als Trenner</li> <li>Anführungszeichen empfohlen (doppelt und einfach)</li> <li>In XML müsste Wert gegeben werden, dann Name als Wert <code class="language-plaintext highlighter-rouge">required="required"</code></li> <li><a href="https://en.wikipedia.org/wiki/Nofollow"><code class="language-plaintext highlighter-rouge">rel="nofollow"</code></a> um Spam zu entschärfen</li> </ul> </footer> </div></section> <section class="slide" id="syntax--kodierung"><div><h2>Syntax – Kodierung</h2> <ul> <li>früher nötig für Nicht-ASCII</li> <li>heute nur noch für geschützte Zeichen (wenn UTF-8 o.ä.)</li> </ul> <div class="editor hide-css "> <pre class="highlight language-html" data-lang="html"><code><span class="ni">&auml;</span> <span class="ni">&szlig;</span> <span class="ni">&quot;</span> <span class="ni">&amp;</span> <span class="ni">&nbsp;</span> <span class="ni">&lt;</span> <span class="ni">&gt;</span> <span class="ni">&#9731;</span> </code></pre><pre class="highlight language-css" data-lang="css"><code><span class="nt">body</span> <span class="p">{</span> <span class="nl">font</span><span class="p">:</span> <span class="m">300%</span> <span class="nb">monospace</span><span class="p">;</span> <span class="p">}</span> </code></pre></div> <ul> <li><a href="http://de.selfhtml.org/html/referenz/zeichen.htm">Liste an Sonderzeichen</a></li> </ul> </div></section> <section class="slide" id="elemente"><div><h2>Elemente</h2> <ul> <li>Häufig synonym zu Tags verwendet</li> <li>Tags sind textliche Repräsentation</li> <li>Elemente sind das daraus gewonnene Ergebnis des Parsens</li> </ul> </div></section> <section class="slide" id="grundgerüst"><div><h2>Grundgerüst</h2> <div class="editor "> <pre class="highlight language-html" data-lang="html"><code><span class="cp"><!DOCTYPE html></span> <span class="nt"><html</span> <span class="na">lang=</span><span class="s">"de"</span><span class="nt">></span> <span class="nt"><head></span> <span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"utf-8"</span><span class="nt">></span> <span class="nt"><title></span> … <span class="nt"></title></span> <span class="nt"></head></span> <span class="nt"><body></span> … <span class="nt"></body></span> <span class="nt"></html></span> </code></pre></div> <footer> <ul> <li>Doctype früher länger und wichtig, wurde sich aber häufig nicht daran gehalten, weswegen Browser begannen, ihn zu ignorieren, darum heute so kurz (genannt: Standards Mode)</li> <li><code class="language-plaintext highlighter-rouge">html</code> als Wurzel-Element (muss nicht in HTML5, aber sollte)</li> <li><code class="language-plaintext highlighter-rouge">lang</code> sollte gesetzt sein, um Sprachsynthese-Tools zu helfen, die richtige Aussprache zu wählen etc</li> <li><code class="language-plaintext highlighter-rouge">head</code>: Bearbeitungshinweise</li> <li><code class="language-plaintext highlighter-rouge">body</code>: Anzuzeigender Inhalt</li> </ul> </footer> </div></section> <section class="slide" bg="bieber.jpg" style="background-position: 100%" id="grund-gerüst"><div><h2>Grund-<br />gerüst</h2> <p class="note">Quelle: <a href="https://twitter.com/SlexAxton/status/648429000746909696">@SlexAxton</a></p> <footer> <ul> <li>Conditional Comments</li> <li>HTML5-Boilerplate</li> <li>Modernizr</li> <li>leerer Head 😌</li> </ul> </footer> </div></section> <section class="slide" id="header"><div><h2>Header</h2> <pre class="highlight language-html" data-lang="html"><code><span class="c"><!-- Zusatzinformationen zum Dokument --></span> <span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"utf-8"</span><span class="nt">></span> <span class="c"><!-- Kodierung --></span> <span class="nt"><meta</span> <span class="na">name=</span><span class="s">"description"</span> <span class="na">content=</span><span class="s">"Hallo Google-Ergebnis-Liste."</span><span class="nt">></span> <span class="nt"><meta</span> <span class="na">http-equiv=</span><span class="s">"refresh"</span> <span class="na">content=</span><span class="s">"5; URL=http://andere.domain.de/"</span><span class="nt">></span> <span class="nt"><title></span>Einführung in HTML<span class="nt"></title></span> <span class="c"><!-- Dokumententitel --></span> <span class="c"><!-- Verweis auf externe Ressource --></span> <span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"style.css"</span><span class="nt">></span> <span class="nt"><link</span> <span class="na">rel=</span><span class="s">"shortcut icon"</span> <span class="na">href=</span><span class="s">"favicon.ico"</span><span class="nt">></span> <span class="c"><!-- Nicht nötig --></span> <span class="nt"><link</span> <span class="na">rel=</span><span class="s">"alternate"</span> <span class="na">type=</span><span class="s">"application/atom+xml"</span> <span class="na">href=</span><span class="s">"feed.atom"</span><span class="nt">></span> </code></pre> <footer> <ul> <li>Weitere Meta-Attribute: <code class="language-plaintext highlighter-rouge">author</code> (Autor des Dokuments), <code class="language-plaintext highlighter-rouge">keywords</code> (Beschreibende Schlagworte), <code class="language-plaintext highlighter-rouge">language</code> (verwendete natürliche Sprache), <code class="language-plaintext highlighter-rouge">robots</code> (Anweisungen an Suchmaschinen & Co, <code class="language-plaintext highlighter-rouge">INDEX</code>, <code class="language-plaintext highlighter-rouge">FOLLOW</code>, <code class="language-plaintext highlighter-rouge">NOINDEX</code>, <code class="language-plaintext highlighter-rouge">NOFOLLOW</code>)</li> <li>Keywords: <ul> <li>Herkunft aus Wissenschaft und dort sinnvoll</li> <li>Im Web heute irrelevant da von Suchmaschinen ignoriert, da manipulationsgefährdet</li> </ul> </li> </ul> </footer> </div></section> <section class="slide" id="elemente-1"><div><h2>Elemente</h2> <ul> <li>Historisch: Block / Inline, heute Kategorien</li> </ul> <object data="content-venn.svg"></object> <p class="note">Quelle: <a href="http://www.w3.org/TR/html5/content-models.html">W3C – Content Models</a> – Mehr: <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories">MDN – Content categories</a></p> <footer> <ul> <li>Inline: Im Fluss</li> <li>Block: Eigene, aufspannende Box</li> </ul> </footer> </div></section> <section class="slide" id="content-models"><div><h2>Content Models</h2> <table> <thead> <tr> <th scope="col">Name</th> <th scope="col">Beschreibung</th> </tr> </thead> <tbody> <tr> <td>Metadata</td> <td>Definiert Präsentation oder Verhalten des restlichen Inhalts.</td> </tr> <tr> <td>Sectioning</td> <td>Unterteilt semantisch. Definiert Scope von Headern und Footern.</td> </tr> <tr> <td>Heading</td> <td>Definiert den Kopf eines Bereichs.</td> </tr> <tr> <td>Phrasing</td> <td>Zeichnet den Text des Inhalts aus.</td> </tr> <tr> <td>Embedded</td> <td>Bindet andere Ressourcen ein.</td> </tr> <tr> <td>Interactive</td> <td>Inhalt, der zur Benutzer-Interaktion gedacht ist.</td> </tr> </tbody> </table> <footer> <ul> <li>Metadata: base, command, link, meta, noscript, script, style, title</li> <li>Sectioning: article, aside, nav, section</li> <li>Heading: h1, h2, h3, h4, h5, h6, hgroup</li> <li>Phrasing: a, br, button, img, input, select, small, span, strong, textarea, time</li> <li>Embedded: audio, canvas, embed, iframe, img, math, object, svg, video</li> <li>Interactive: a, audio, button, details, embed, iframe, img, input, keygen, label, menu, object, select, textarea, video</li> </ul> </footer> </div></section> <section class="slide" id="überschriften"><div><h2>Überschriften</h2> <div class="editor "> <pre class="highlight language-html" data-lang="html"><code><span class="nt"><h1></span>Eins<span class="nt"></h1></span> <span class="nt"><h2></span>Zwei<span class="nt"></h2></span> <span class="nt"><h3></span>Drei<span class="nt"></h3></span> <span class="nt"><h4></span>Vier<span class="nt"></h4></span> <span class="nt"><h5></span>Fünf<span class="nt"></h5></span> <span class="nt"><h6></span>Sechs<span class="nt"></h6></span> </code></pre></div> </div></section> <section class="slide" id="hervorhebung-von-text"><div><h2>Hervorhebung von Text</h2> <div class="editor auto hide-css "> <pre class="highlight language-html" data-lang="html"><code>Das muss <span class="nt"><strong></span>dringend<span class="nt"></strong></span> erledigt werden.<span class="nt"><br></span> <span class="nt"><em></span>Du<span class="nt"></em></span> hast doch gesagt: <span class="nt"><q></span>Machste eh nicht.<span class="nt"></q><br></span> Das Wort <span class="nt"><i></span>das<span class="nt"></i></span> ist ein Artikel.<span class="nt"><br></span> <span class="nt"><small></span>Copyright <span class="nt"><del></span>2023<span class="nt"></del></span> 2024 Foo Inc.<span class="nt"></small><br></span> <span class="nt"><code></span>public static void <span class="nt"><span</span> <span class="na">class=</span><span class="s">"function"</span><span class="nt">></span>main<span class="nt"></span></span>(String[] args)<span class="nt"></code></span> </code></pre><pre class="highlight language-css" data-lang="css"><code><span class="nt">body</span> <span class="p">{</span> <span class="nl">font-size</span><span class="p">:</span> <span class="m">150%</span><span class="p">;</span> <span class="nl">line-height</span><span class="p">:</span> <span class="m">1.5</span><span class="p">;</span> <span class="p">}</span> </code></pre></div> <footer> <ul> <li>Emphasis: Betonung</li> <li>Strong: Starke Betonung</li> <li><code class="language-plaintext highlighter-rouge">i</code>: Textabschnitt, der sich aus einem Grund vom Rest des Textes abhebt</li> <li>Gründe: Technische Fachbegriffe, fremdsprachliche Ausdrücke, Gedanken fiktionaler Charaktere</li> </ul> </footer> </div></section> <section class="slide" id="anreicherung-von-text"><div><h2>Anreicherung von Text</h2> <div class="editor auto hide-css "> <pre class="highlight language-html" data-lang="html"><code>Der Flieger nach <span class="nt"><abbr</span> <span class="na">title=</span><span class="s">"Derby Field Airport, Lovelock, USA"</span><span class="nt">></span>LOL<span class="nt"></abbr></span> wird am <span class="nt"><time</span> <span class="na">datetime=</span><span class="s">"2014-10-01 17:01"</span><span class="nt">></span>1. Oktober um 17.01 Uhr<span class="nt"></time></span> starten. </code></pre><pre class="highlight language-css" data-lang="css"><code><span class="nt">body</span> <span class="p">{</span> <span class="nl">font-size</span><span class="p">:</span> <span class="m">150%</span><span class="p">;</span> <span class="nl">line-height</span><span class="p">:</span> <span class="m">1.5</span><span class="p">;</span> <span class="p">}</span> </code></pre></div> </div></section> <section class="slide" id="auch-text"><div><h2>Auch Text</h2> <div class="editor auto hide-css "> <pre class="highlight language-html" data-lang="html"><code><span class="nt"><p></span>Ich bin ein eigener Absatz.<span class="nt"></p></span> <span class="nt"><p></span> Ich auch. <span class="nt"></p></span> <span class="nt"><pre></span> Mir ist jedes Leerzeichen wichtig.<span class="nt"></pre></span> </code></pre><pre class="highlight language-css" data-lang="css"><code><span class="nt">body</span> <span class="p">{</span> <span class="nl">font-size</span><span class="p">:</span> <span class="m">150%</span><span class="p">;</span> <span class="nl">line-height</span><span class="p">:</span> <span class="m">1.5</span><span class="p">;</span> <span class="p">}</span> </code></pre></div> </div></section> <section class="slide" id="links-und-bilder"><div><h2>Links und Bilder</h2> <div class="editor auto hide-css "> <pre class="highlight language-html" data-lang="html"><code><span class="nt"><img</span> <span class="na">src=</span><span class="s">"wikipedia.png"</span> <span class="na">title=</span><span class="s">"Wikipedia"</span><span class="nt">></span> <span class="nt"><img</span> <span class="na">src=</span><span class="s">"nischt.jpg"</span> <span class="na">width=</span><span class="s">"135"</span> <span class="na">height=</span><span class="s">"155"</span> <span class="na">alt=</span><span class="s">"Wikipedia"</span><span class="nt">></span> <span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://de.wikipedia.org/"</span><span class="nt">></span>Wikipedia<span class="nt"></a></span> </code></pre><pre class="highlight language-css" data-lang="css"><code><span class="nt">body</span> <span class="p">{</span> <span class="nl">display</span><span class="p">:</span> <span class="n">flex</span><span class="p">;</span> <span class="nl">justify-content</span><span class="p">:</span> <span class="n">space-around</span><span class="p">;</span> <span class="nl">align-items</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span> <span class="p">}</span> <span class="o">*</span> <span class="p">{</span> <span class="nl">font-size</span><span class="p">:</span> <span class="m">23px</span><span class="p">;</span> <span class="p">}</span> </code></pre></div> <footer> <ul> <li><code class="language-plaintext highlighter-rouge">width</code> und <code class="language-plaintext highlighter-rouge">height</code> helfen Browser, Größe vorher zu wissen und verhindern Sprünge</li> </ul> </footer> </div></section> <section class="slide" id="bilder"><div><h2>Bilder</h2> <p><img src="image.png" alt="Image-Tag" class="full" /></p> <footer> <ul> <li>Funfact: Die gleichen Leute, die sich <code class="language-plaintext highlighter-rouge">img</code> ausgedacht haben (Netscape) fanden dann auch, dass <code class="language-plaintext highlighter-rouge">img</code> zu kompliziert sei und bauten <code class="language-plaintext highlighter-rouge">image</code> als Alias ein</li> <li>Eine Studie aus dem Jahre 2005 zeigte, dass rund 0.2% aller Seiten das <code class="language-plaintext highlighter-rouge"><image></code> Element benutzen</li> <li>Weshalb es bis heute von jedem Browser schweigend unterstützt wird</li> </ul> </footer> </div></section> <section class="slide" id="links-und-bilder-1"><div><h2>Links und Bilder</h2> <div class="editor hide-css "> <pre class="highlight language-html" data-lang="html"><code><span class="nt"><a</span> <span class="na">href=</span><span class="s">"http://wikipedia.org/"</span><span class="nt">><img</span> <span class="na">src=</span><span class="s">"wikipedia.png"</span><span class="nt">></a></span> <span class="nt"><a</span> <span class="na">href=</span><span class="s">"http://wikipedia.org/"</span> <span class="na">target=</span><span class="s">"_blank"</span><span class="nt">></span>Wikipedia<span class="nt"></a></span> <span class="nt"><small></span>(öffnet neuen Tab)<span class="nt"></small></span> </code></pre><pre class="highlight language-css" data-lang="css"><code><span class="o">*</span> <span class="p">{</span> <span class="nl">font-size</span><span class="p">:</span> <span class="m">23px</span><span class="p">;</span> <span class="p">}</span> <span class="nt">a</span><span class="nd">:first-child</span> <span class="p">{</span> <span class="nl">display</span><span class="p">:</span> <span class="nb">block</span><span class="p">;</span> <span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">23px</span><span class="p">;</span> <span class="p">}</span> </code></pre></div> </div></section> <section class="slide" id="betitelte-bilder"><div><h2>Betitelte Bilder</h2> <div class="editor auto hide-css "> <pre class="highlight language-html" data-lang="html"><code><span class="nt"><figure></span> <span class="nt"><img</span> <span class="na">src=</span><span class="s">"wikipedia.png"</span> <span class="na">alt=</span><span class="s">"Wikipedia"</span><span class="nt">></span> <span class="nt"><figcaption></span>Die freie Enzyklopädie<span class="nt"></figcaption></span> <span class="nt"></figure></span> </code></pre><pre class="highlight language-css" data-lang="css"><code><span class="nt">body</span> <span class="p">{</span> <span class="nl">display</span><span class="p">:</span> <span class="n">flex</span><span class="p">;</span> <span class="nl">justify-content</span><span class="p">:</span> <span class="n">space-around</span><span class="p">;</span> <span class="nl">align-items</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span> <span class="p">}</span> <span class="o">*</span> <span class="p">{</span> <span class="nl">font-size</span><span class="p">:</span> <span class="m">23px</span><span class="p">;</span> <span class="p">}</span> </code></pre></div> <footer> <ul> <li><code class="language-plaintext highlighter-rouge">width</code> und <code class="language-plaintext highlighter-rouge">height</code> helfen Browser, Größe vorher zu wissen und verhindern Sprünge</li> </ul> </footer> </div></section> <section class="slide" id="iframes"><div><h2>iFrames</h2> <div class="editor "> <pre class="highlight language-html" data-lang="html"><code><span class="nt"><iframe</span> <span class="na">src=</span><span class="s">"https://beier.f4.htw-berlin.de/"</span> <span class="na">height=</span><span class="s">"321"</span> <span class="na">width=</span><span class="s">"357"</span> <span class="na">frameborder=</span><span class="s">"0"</span><span class="nt">></span> Kann keine iFrames. <span class="nt"></iframe></span> </code></pre></div> </div></section> <section class="slide" id="listen"><div><h2>Listen</h2> <div class="editor hide-css "> <pre class="highlight language-html" data-lang="html"><code><span class="nt"><ul></span> <span class="nt"><li></span>Tick<span class="nt"></li></span> <span class="nt"><li></span>Trick<span class="nt"></li></span> <span class="nt"><li></span>Track<span class="nt"></li></span> <span class="nt"></ul></span> <span class="nt"><ol></span> <span class="nt"><li></span>Schlafen<span class="nt"></li></span> <span class="nt"><li></span>Essen<span class="nt"></li></span> <span class="nt"><li></span>Lernen<span class="nt"></li></span> <span class="nt"></ol></span> <span class="nt"><dl></span> <span class="nt"><dt></span>HTTP<span class="nt"></dt></span> <span class="nt"><dd></span>Hypertext Transfer Protocol<span class="nt"></dd></span> <span class="nt"><dt></span>HTML<span class="nt"></dt></span> <span class="nt"><dd></span>Hypertext Markup Language<span class="nt"></dd></span> <span class="nt"></dl></span> </code></pre><pre class="highlight language-css" data-lang="css"><code><span class="o">*</span> <span class="p">{</span> <span class="nl">font-size</span><span class="p">:</span> <span class="m">23px</span><span class="p">;</span> <span class="p">}</span> </code></pre></div> <footer> <ul> <li>Anhand der <code class="language-plaintext highlighter-rouge">li</code>s zeigen, dass Tag nicht mehr geschlossen werden muss (aber schlechter Stil)</li> </ul> </footer> </div></section> <section class="slide" id="tabellen"><div><h2>Tabellen</h2> <div class="editor hide-css "> <pre class="highlight language-html" data-lang="html"><code><span class="nt"><table></span> <span class="nt"><tr></span> <span class="nt"><th></span>Stadt<span class="nt"></th></span> <span class="nt"><th></span>Land<span class="nt"></th></span> <span class="nt"><th></span>Fluss<span class="nt"></th></span> <span class="nt"></tr></span> <span class="nt"><tr></span> <span class="nt"><td></span>Berlin<span class="nt"></td></span> <span class="nt"><td></span>Deutschland<span class="nt"></td></span> <span class="nt"><td></span>Spree<span class="nt"></td></span> <span class="nt"></tr></span> <span class="nt"><tr></span> <span class="nt"><td></span>London<span class="nt"></td></span> <span class="nt"><td></span>England<span class="nt"></td></span> <span class="nt"><td></span>Themse<span class="nt"></td></span> <span class="nt"></tr></span> <span class="nt"></table></span> <span class="nt"><br><br></span> <span class="nt"><a</span> <span class="na">href=</span><span class="s">"http://css-tricks.com/complete-guide-table-element/"</span><span class="nt">></span>A Complete Guide to the Table Element<span class="nt"></a></span> </code></pre><pre class="highlight language-css" data-lang="css"><code><span class="o">*</span> <span class="p">{</span> <span class="nl">font-size</span><span class="p">:</span> <span class="m">23px</span><span class="p">;</span> <span class="nl">text-align</span><span class="p">:</span> <span class="nb">left</span><span class="p">;</span> <span class="nl">padding</span><span class="p">:</span> <span class="m">0</span> <span class="m">10px</span> <span class="m">10px</span> <span class="m">0</span><span class="p">;</span> <span class="p">}</span> </code></pre></div> </div></section> <section class="slide" id="formulare"><div><h2>Formulare</h2> <div class="editor auto hide-css "> <pre class="highlight language-html" data-lang="html"><code><span class="nt"><form</span> <span class="na">action=</span><span class="s">"index.php"</span> <span class="na">method=</span><span class="s">"POST"</span><span class="nt">></span> <span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">name=</span><span class="s">"stadt"</span> <span class="na">placeholder=</span><span class="s">"Stadt"</span><span class="nt">></span> <span class="nt"><label</span> <span class="na">for=</span><span class="s">"nl"</span><span class="nt">></span>Newsletter?<span class="nt"></label></span> <span class="nt"><input</span> <span class="na">id=</span><span class="s">"nl"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">name=</span><span class="s">"nl"</span> <span class="na">checked</span><span class="nt">></span> <span class="nt"><input</span> <span class="na">type=</span><span class="s">"number"</span> <span class="na">name=</span><span class="s">"alter"</span> <span class="na">value=</span><span class="s">"42"</span><span class="nt">></span> <span class="nt"><button</span> <span class="na">type=</span><span class="s">"submit"</span><span class="nt">></span>Absenden<span class="nt"></button></span> <span class="nt"></form></span> </code></pre><pre class="highlight language-css" data-lang="css"><code><span class="o">*</span> <span class="p">{</span> <span class="nl">font-size</span><span class="p">:</span> <span class="m">20px</span><span class="p">;</span> <span class="p">}</span> </code></pre></div> <footer> <ul> <li><code class="language-plaintext highlighter-rouge">radio</code>: Mehrfachoptionsfelder</li> <li><code class="language-plaintext highlighter-rouge">file</code>: Dateiauswahl</li> <li><code class="language-plaintext highlighter-rouge">reset</code>: Tabula Rasa</li> </ul> </footer> </div></section> <section class="slide" id="formulare--input-types"><div><h2>Formulare – Input Types</h2> <div class="editor hide-css "> <pre class="highlight language-html" data-lang="html"><code><span class="nt"><input</span> <span class="na">type=</span><span class="s">"password"</span><span class="nt">></span> <span class="nt"><input</span> <span class="na">type=</span><span class="s">"email"</span><span class="nt">></span> <span class="nt"><input</span> <span class="na">type=</span><span class="s">"tel"</span><span class="nt">></span> <span class="nt"><input</span> <span class="na">type=</span><span class="s">"url"</span><span class="nt">></span> <span class="nt"><input</span> <span class="na">type=</span><span class="s">"date"</span><span class="nt">></span> <span class="nt"><input</span> <span class="na">type=</span><span class="s">"week"</span><span class="nt">></span> <span class="nt"><input</span> <span class="na">type=</span><span class="s">"month"</span><span class="nt">></span> <span class="nt"><input</span> <span class="na">type=</span><span class="s">"time"</span><span class="nt">></span> <span class="nt"><input</span> <span class="na">type=</span><span class="s">"color"</span><span class="nt">></span> <span class="nt"><input</span> <span class="na">type=</span><span class="s">"number"</span><span class="nt">></span> <span class="nt"><input</span> <span class="na">type=</span><span class="s">"range"</span><span class="nt">></span> <span class="nt"><input</span> <span class="na">type=</span><span class="s">"search"</span><span class="nt">></span> </code></pre><pre class="highlight language-css" data-lang="css"><code><span class="o">*</span> <span class="p">{</span> <span class="nl">font-size</span><span class="p">:</span> <span class="m">17px</span><span class="p">;</span> <span class="p">}</span> <span class="nt">input</span> <span class="p">{</span> <span class="nl">display</span><span class="p">:</span> <span class="nb">block</span><span class="p">;</span> <span class="nl">width</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span> <span class="p">}</span> </code></pre></div> <footer> <ul> <li><code class="language-plaintext highlighter-rouge">text</code>: default</li> <li><code class="language-plaintext highlighter-rouge">hidden</code>: Nicht sichtbare Felder, werden auch übermittelt</li> <li><code class="language-plaintext highlighter-rouge">password</code>: Inhalt visuell verschleiert</li> <li><code class="language-plaintext highlighter-rouge">image</code> + <code class="language-plaintext highlighter-rouge">src</code>-Attribut: Bild-Button (uargs, dann doch gleich <code class="language-plaintext highlighter-rouge">button</code>)</li> </ul> </footer> </div></section> <section class="slide" id="formulare--input-attributes"><div><h2>Formulare – Input Attributes</h2> <div class="editor hide-css "> <pre class="highlight language-html" data-lang="html"><code><span class="nt"><input</span> <span class="na">autofocus</span><span class="nt">></span> <span class="nt"><input</span> <span class="na">inputmode=</span><span class="s">"numeric"</span><span class="nt">></span> <span class="nt"><input</span> <span class="na">autocomplete=</span><span class="s">"off"</span><span class="nt">></span> <span class="nt"><input</span> <span class="na">autocomplete=</span><span class="s">"email"</span><span class="nt">></span> <span class="nt"><input</span> <span class="na">autocomplete=</span><span class="s">"one-time-code"</span><span class="nt">></span> <span class="nt"><input</span> <span class="na">disabled</span> <span class="na">value=</span><span class="s">"nein"</span><span class="nt">></span> <span class="nt"><input</span> <span class="na">readonly</span> <span class="na">value=</span><span class="s">"nur zum Kopieren"</span><span class="nt">></span> <span class="nt"><input</span> <span class="na">minlength=</span><span class="s">"3"</span> <span class="na">maxlength=</span><span class="s">"7"</span><span class="nt">></span> <span class="nt"><input</span> <span class="na">required</span><span class="nt">></span> <span class="nt"><input</span> <span class="na">pattern=</span><span class="s">"^[0-9]{5}$"</span><span class="nt">></span> <span class="nt"><input</span> <span class="na">tabindex=</span><span class="s">"-1"</span><span class="nt">></span> </code></pre><pre class="highlight language-css" data-lang="css"><code><span class="o">*</span> <span class="p">{</span> <span class="nl">font-size</span><span class="p">:</span> <span class="m">17px</span><span class="p">;</span> <span class="p">}</span> <span class="nt">input</span> <span class="p">{</span> <span class="nl">display</span><span class="p">:</span> <span class="nb">block</span><span class="p">;</span> <span class="nl">width</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span> <span class="p">}</span> <span class="nt">input</span><span class="nd">:focus:valid</span> <span class="p">{</span> <span class="nl">background-color</span><span class="p">:</span> <span class="m">#caecae</span> <span class="p">}</span> <span class="nt">input</span><span class="nd">:focus:invalid</span> <span class="p">{</span> <span class="nl">background-color</span><span class="p">:</span> <span class="m">#ffcece</span> <span class="p">}</span> </code></pre></div> <footer> <ul> <li><code class="language-plaintext highlighter-rouge">one-time-code</code>: auto-insert für 2FA-SMS-Codes</li> <li><code class="language-plaintext highlighter-rouge">tabindex</code> kann auf jedem Element liegen, aber gerade bei Formularen sinnvoll (z.B. <code class="language-plaintext highlighter-rouge">tabindex="-1"</code> wird es beim Tabben ausgelassen, mit <code class="language-plaintext highlighter-rouge">0</code> fügt es sich in den normalen Fluss ein)</li> </ul> </footer> </div></section> <section class="slide" id="formulare--dropdown-liste"><div><h2>Formulare – Dropdown-Liste</h2> <div class="editor auto hide-css "> <pre class="highlight language-html" data-lang="html"><code><span class="nt"><select</span> <span class="na">name=</span><span class="s">"produkte"</span><span class="nt">></span> <span class="nt"><optgroup</span> <span class="na">label=</span><span class="s">"Defensiv"</span><span class="nt">></span> <span class="nt"><option></span>Schild<span class="nt"></option></span> <span class="nt"><option></span>Rüstung<span class="nt"></option></span> <span class="nt"></optgroup></span> <span class="nt"><optgroup</span> <span class="na">label=</span><span class="s">"Offensiv"</span><span class="nt">></span> <span class="nt"><option></span>Schwert<span class="nt"></option></span> <span class="nt"><option</span> <span class="na">selected</span><span class="nt">></span>Bogen<span class="nt"></option></span> <span class="nt"></optgroup></span> <span class="nt"><optgroup</span> <span class="na">label=</span><span class="s">"Premium"</span> <span class="na">disabled</span><span class="nt">></span> <span class="nt"><option></span>Heiltrank<span class="nt"></option></span> <span class="nt"><option></span>Tarnmantel<span class="nt"></option></span> <span class="nt"></optgroup></span> <span class="nt"></select></span> </code></pre><pre class="highlight language-css" data-lang="css"><code><span class="nt">body</span> <span class="p">{</span> <span class="nl">text-align</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span> <span class="p">}</span> </code></pre></div> </div></section> <section class="slide" id="container"><div><h2>Container</h2> <pre class="highlight language-html" data-lang="html"><code><span class="nt"><header></span> <span class="nt"><h1></span>Schau an was ich esse<span class="nt"></h1></span> <span class="nt"><nav></span> (...) <span class="nt"></nav></span> <span class="nt"></header></span> <span class="nt"><div></span> Bedeutungslose Hülle <span class="nt"></div></span> <span class="nt"><section></span> <span class="nt"><h2></span>Wochenmahl<span class="nt"></h2></span> <span class="nt"><article></span> <span class="nt"><h3></span>Nudeln<span class="nt"></h3></span> <span class="nt"><p></span>Nudeln mit Soße<span class="nt"></p></span> <span class="nt"></article></span> <span class="nt"><aside></span> <span class="nt"><a</span> <span class="na">href=</span><span class="s">"/archiv"</span><span class="nt">></span>Archiv des letzten Monats<span class="nt"></a></span> <span class="nt"></aside></span> <span class="nt"></section></span> <span class="nt"><footer></span> <span class="nt"><p></span>Lirum larum, Löffelstiel.<span class="nt"></p></span> <span class="nt"></footer></span> </code></pre> <footer> <ul> <li><code class="language-plaintext highlighter-rouge">section</code>: thematische Gruppierung von Inhalten typischerweise mit einer Überschrift</li> <li><code class="language-plaintext highlighter-rouge">article</code>: für sich geschlossene Abschnitte (können herausgelöst werden und ergeben noch Sinn)</li> <li><code class="language-plaintext highlighter-rouge">aside</code>: Am Rande erwähnenswert</li> </ul> </footer> </div></section> <section class="slide" id="spezielle-attribute"><div><h2>Spezielle Attribute</h2> <ul> <li><code class="language-plaintext highlighter-rouge">id</code> <ul> <li>dokumentenweiter, einzigartiger Name zur Identifizierung eines Elements</li> <li>id = fragment identifier, dadurch <q>verlinkbar</q></li> </ul> </li> <li><code class="language-plaintext highlighter-rouge">class</code> <ul> <li>Klassifizierung / semantische Gruppierung mehrerer Elemente</li> </ul> </li> <li><code class="language-plaintext highlighter-rouge">title</code> <ul> <li>Ergänzender Text zu einem Element (häufig für Toltips benutzt)</li> </ul> </li> </ul> <footer> <ul> <li>viertes wäre <code class="language-plaintext highlighter-rouge">style</code>, dazu nächstes Mal mehr</li> </ul> </footer> </div></section> <section class="slide" id="semantik"><div><h2>Semantik</h2> <ul> <li>Hervorhebung der Bedeutung / der Natur / des Wesens eines Inhalts</li> </ul> <div class="parts "> <div class="part"> <h3 id="elemente">Elemente</h3> <ul> <li>standardisierte, globale, maschinenlesbare Bedeutung</li> </ul> </div><div class="part"> <h3 id="klassen--ids">Klassen / IDs</h3> <ul> <li>frei wählbare, lokale, für Entwickler relevante Bedeutung</li> <li>selten für Maschinen bedeutsam</li> <li>primär Ankerpunkte für CSS und JavaScript</li> </ul> </div> </div> <footer> <ul> <li>HTML bietet zwei grundlegende Wege der semantischen Auszeichnung</li> <li>Klassen und IDs (als Attribute) <ul> <li>für eine lokale, anwendungsspezifische Bedeutung</li> <li>wenig bis keine semantische Bedeutung für Maschinen</li> </ul> </li> <li> <p><q>selten</q> weil Microformats</p> </li> <li>Styling ist egal! Semantik vor allem wichtig, für SEO und Accessibility mit Assistive Devices wie Screen Reader</li> <li>für nicht-indizierte Seiten wie In-House-Anwendungen deutlich weniger wichtig</li> </ul> </footer> </div></section> <section class="slide" bg="specgraph.png" style="background-position-x:75%" id="html5"><div><h2>HTML5</h2> <p class="note">Quelle: <a href="https://github.com/SirPepe/SpecGraph">SirPepe</a></p> </div></section> <section class="slide" id="links"><div><h2>Links</h2> <ul> <li><a href="https://html.spec.whatwg.org/dev/introduction.html">HTML: The Living Standard</a> – Developer Version</li> </ul> </div></section> <div class="progress"><div></div></div> <script src="/assets/scripts/shower.js"></script> <script src="/assets/scripts/shower-notes.js"></script> <script src="/assets/scripts/editor.js"></script> <script> document.querySelectorAll('[bg]').forEach(el => el.style.backgroundImage = `url(${el.attributes.bg.value})`); </script> </body> </html>