WebTech -Wolf 4

• Kopfbereich eines Inhalts
• wichtig - ungültige Positionen des Headers:
  • Im Header gibt es keine Sub-Header
  • darf auch nicht in footer oder address verwendet werden

• Fussbereich
• wichtig - ungültige Positionen des Footers:
  • Im Footergibt es keine Sub-Footer
  • darf auch nicht in header oder address verwendet werden

• Kontaktinformationen zum Autor des Inhalts
• wird kursiv dargestellt
• ist keine Postanschrift, lediglich Info zum Autor

• Textabsatz in einem längeren Fliesstext
• Achtung: NIcht verwenden darf man innerhalb von <p> --> Überschriften <h1> ... 

• steht für break
• Zeilenumbruch erzwingen
• ist ein alleinstehendes Tag ohne Closing-Tag <br>

• optionaler Zeilenumbruch innerhalb eines Wortes
• ist ein alleinstehendes Tag ohne Closing-Tag und wird im Fliesstext integriert
• Alternative mit Trennstrich: &shy;........&shy;
• Mehrere Leerzeichen zwischen zwei Wörtern: &nbsp;&nbsp;&nbsp;&nbsp; --> 4 Leerzeichen

• thematische Trennung auf der Absatzebene
• alleinstehendes Tag ohne Closing-Tag

• Zitat in Form eines Textabsatzes, wird etwas eingerückt
• mit dem Attribut cite kann die Quelle verknüpft werden

Attribute:

• <blockquote cite="www.google.ch"></blockquote>

• einen allgemeinen Bereich definieren
• zunächst bewirkt er nichts anderes als eine neue Zeile
• bekommt seine Bedeutung erst mit CSS 
• --> Hauptverwendungszweck: definieren von Layoutbereichen
• oft wird das HTML-Attribut "class" verwendet --> so wird das div-Element einer Klasse zugeordnet die im CSS gestylet werden kann
• div sollte nur verwendet werden, wenn kein anderes Passendes HTML-Element vorhanden ist (header, footer etc.)

• Sollte für einen Hauptinhaltsbereich einer Webseite verwendet werden --> nur 1x verwenden
• Achtung: Nicht innerhalb von article, aside, footer, nav oder header verwenden
• wird wie div verwendet und erzeugt klassisch einen Zeilenumbruch
• ist ein Gruppierungselement (vgl. section ist ein Sektionselement)
• hat keinen EInfluss auf die Überschriftenstruktur

• Gruppieren oder Zusammenfassen von Inhalten zur gesonderten Beschreibung
• bestimmte Inhalte (Tabellen, Bilder, Videos etc.) von anderen HTML-Elementen oder Fliesstext absetzen
• Verknüpfung dieses Bereiches mit einer Beschriftung: <figcaption> (Bsp. Beschriftung der Abbildung)
• Beispiel:
  <figure> <img src="opera.jpg" />
  <figcatption>Abbildung 1: Darstellung Oper XY</figcaption>
  </figure>

• ul = unordered List
• li = list item
• ungeordnete Aufzählungsliste
  • Listenelement <li>
• Quasi Bullet Points (keine Nummerierung)
• Kann verschachtelt werden im SInne von mehreren Ebenen (Liste in der Liste)

• ol = ordered list
• geordnete Liste ist klassisch nummeriert
  1. Listenelement <li>
  2. ...
• eine Nummerierung in umgekehrter Reihenfolge ist möglich: <ol reversed="reversed"> </ol>
  • 5.
  • 4.
  • ...
• spezifische Nummerierung:
  <ol start="20">
      <li> Text </li>
      <li> Text </li>
      <li value="101"> Text </li>
  </ol>
• Kann verschachtelt werden im SInne von mehreren Ebenen (Liste in der Liste)

• ein Listenelement in einer ul- oder ol-Liste

• dl=description list
• eine Beschreibungsliste mit <dt> und <dd> Elementen
• Name-Wert-Zuordnungsliste
• Typische Anwendungsfälle: Glossar
• die dazugehörende Beschreibung wird direkt hinter dem dt-Element geschrieben
  Beispiel:
  <dl>
     <dt>FYI</dt>
     <dd> For your information</dd>
     <dt>XY</dt>
     <dd>Blabla</dd>
  </dl>

• der zu beschreibende Ausdruck vor dem dd-Element
• dt = description term (Beschreibungsausdruck)

• die Beschreibung, die hinter dem dt-Element folgt
• dd = definition description (Beschreibung)

• früher div-Elemente mit id, jeder konnte selber Namen(id) geben. Heute: einheitlich
• sinnvolle Gliederung der Webseite
• vereinfacht die Entwicklung der Webseite
• normale Nutzer/Leser merkt nichts
• Suchmaschine (google bevorzugt semantische Webseiten)
• neue intelligente Browser, die via Tastenkombination zur navigation gehen etc. --> navigation muss erkennbar sein
• sehbehinderte: Screenreader versteht Gliederung

• header
• nav
• section
• article
• aside
• footer

• abbr = abbreviation, Abkürzung
• Abkürzungen oder Akronyme kennzeichnen
• Quasi eine Beschreibung mittels hover.
• <p> Das <abbr title="Wordl Wide Web"> WWW</abbr> ist voller....</p>

• Text als Quelle eines Arbeitstitels markieren
• wird oft kursiv dargestellt
• <p>Gemäss dem Buch<cite> HTML 5 - Das umfassende Handbuch</cite> </p>

<code>

• Computercode (Quellcode) innerhalb eines Textabsatzes auszeichnen
  <p> Das Element <code>Convert.ToInt32(var1);</code> enthält keine Attribute.<p/>

<pre>

• Für mehrere Zeilen Quellcode sollte das pre-Element verwendet werden. Dann werden die alle zeichen angezeigt, wie sie im Editor erfasst werden.
• Präformatierten Text auszeichnen. Alle Leerzeichen und Zeilenumbrüche werden so dargestellt, wie es im Text angegeben wurde.
  <p> Hier sehen Sie einen Quelltext</p>
  <pre><code>#include &lt;stdio.h&gt;
  
  int main(void)
  {puts("Hallo Welt!");
  Return 0;}</code></pre>

<kbd>

• kbd = keyboard, Tastatur
• wird verwendet um einen Fliesstext als Tastatureingabe zu markieren
  <p>Mit <kbd>Strg</kbd> + <kbd>A</kbd> heben Sie die entsprechende Taste hervor. 

<samp>

• wird für die Bildschirmausgabe von Programmen benutzt (Schrift of courir)
• <samp>Hallo Welt!</samp>

• einen Begriff definieren
• markiert ein Wort, das Sie anschliessend im noch folgenden Text erkären.
  <p> Ein <dfn>Smartphone</dfn> hat im Gegensatz zu einem Mobiltelefon mehr Computerfunktionalitäten.</p>

• Text als Variable auszeichnen
• kann ein mathematischer Audruck sein oder eine Variable einer Programmiersprache

• Textrichtung bei bidirektionalem Text ändern
• bspw. Text, der von rechts nach links geschrieben wird (Hebräisch)
• (Details im Buch)

• Text hervorheben, den Sie beim Sprechen besonders betonen würden.
• Achtung, nicht mit <i> verwechseln! --> es geht nicht um die Formatierung, sondern die Bedeutung!
• meist kursiv dargestellt
  <p><em>Bär</em> 

• inhaltlich besonders wichtige Wörter oder Passagen hervorheben.
• meist fett dargestellt
• Achtung: nicht mit <b> verwechseln! --> es geht nicht um die Formatierung, sondern die Bedeutung!
  <p><strong>Abgabetermin</p></strong>
  <p><em><strong> .... (kann kombiniert verwendet werden)

• zum Auszeichnen von Wörtern oder Passagen mit Fachausdrücken, Gedanken, fremdsprachigen Wörtern
• wird oft kursiv beschrieben --> wenn es hervorgehoben werden soll (sinngemäss) verwende <em>
• dient nur der formatierung (heute CSS)
• i sollte nur verwendet werden, wenn es kein anderes HTML-Tag gibt

• zum Auszeichnen von bedeutungsvollen Namen oder Schlüsselwörtern
• wenn es aber hervorgehoben werden soll (sinngemäss) --> verwende <strong>
• wird fett dargestellt
• dient nur der formatierung (heute CSS)
• i sollte nur verwendet werden, wenn es kein anderes HTML-Tag gibt

• Text durch eine Markierung hervorheben (quasi Textmarker)
• Praxis: Suche nachbestimmtem Begriff --> hebt Worte gelb hervor bspw.
• Achtung: mark wird nicht verwendet, um die Hintergrundfarbe zu formatieren --> span-Elemt mit CSS

• Wörter oder Passagen als zitierten oder gesprochenen Text auszeichnen "....."
• vgl. blockquote- Element: zitiert einen ganzen Absatz
• ist nicht dafür gedacht, einen Absatz mit Anführungs- und Schlusszeichen versehen will --> sondern sinngemäss!

<u>

• u = underline
• Text als Eigennamenunterstreichung oder fehlerhafte Wörter bzw. Passagen auszeichnen
• wird rot unterstrichen
  <p>Auch<u class="spell-checker">Rechtschribfehler</u></p>

<s>

• d = strike-through
• Text als nicht mehr gültig und veraltet auszeichnen
• text wird durchgestrichen

<ins>

• Text als neu hinzugefügt im überarbeiteten Sinn markieren
• ist das Gegenstück von del
• unterstrichener Text

<del>

• Text als gelöscht im überarbeiteten Sinn markieren
• durchgestrichener Text