WebTech -Wolf 4

• 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

<sup>

• eignet sich für mathematischen Ausdruck x²

<sub>

• tiefergestellter Text
• eignet sich für mathematischen Audruck: x_log

• Auszeichnung von Datums- und Zeitangaben
• maschinenlesbare Datums- und Zeitangaben
  • Datum: JJJJ-MM-TT
  • Uhrzeit: HH:MM
• Beispiele:
  • <p>Wir trafen uns an meinem <time datetime="2018-11-12">44. Geburtstag</time> bei <em>Bär</em>
  • <time datetime="2018-11-12T20:00">

• Text als Kleingedrucktes wie z.B. für Copyrith-Informationen, Lizenzinformationen oder juristische Hinweise auszeichnen

• Ruby-Annotationen
• Anmerkungssystem, wie es normalerweise in Japan verwendet wird.
• keine weiteren Detail, mehr im Buch

• einen allgemeinen Bereich innerhalb eines Textabsatzes auszeichnen

• Unterteilung des HTML-Dokuments in verschiedene Abschnitte/Sektionen
• Hinweis: für den normalen Nutzer wenig interessant (sinnbezogene Abschnitte die für den Leser nicht erkennbar sind)
• Hinweis: innerhalb jedes Sektionselementes beginnt die Zählung von Überschriften von vorne

• Unterteilung von Inhalten in einen in sich geschlossenen themenspezifischen Block
• hat in sich eine Struktur: header, footer

• marginale Informationen an der Seitenleiste
• bspw.: Partner-Websiten

• Navigation wie einer Sitemap oder der Hauptnavigation der Webseite
• Oft werden Aufzählungslisten (<ul> und <li> verwendet)

• Überschrift 1-6
• Hinweis: innerhalb eines Sektionselementes (section, article, aside oder nav) beginnen die Überschriften von vorn, jedoch in einer tieferen Hierarchieebene

• 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.)