WebTech -Wolf 4
Semantische Verwendung von HTML-Elementen
Semantische Verwendung von HTML-Elementen
Set of flashcards Details
Flashcards | 45 |
---|---|
Language | Deutsch |
Category | Computer Science |
Level | Other |
Created / Updated | 17.01.2021 / 31.01.2021 |
Weblink |
https://card2brain.ch/box/20210117_webtech_wolf_4
|
Embed |
<iframe src="https://card2brain.ch/box/20210117_webtech_wolf_4/embed" width="780" height="150" scrolling="no" frameborder="0"></iframe>
|
Create or copy sets of flashcards
With an upgrade you can create or copy an unlimited number of sets and use many more additional features.
Log in to see all the cards.
Semantische Textauszeichnung: <var>
- Text als Variable auszeichnen
- kann ein mathematischer Audruck sein oder eine Variable einer Programmiersprache
Semantische Textauszeichnung: <bdo> und <bdi>
- Textrichtung bei bidirektionalem Text ändern
- bspw. Text, der von rechts nach links geschrieben wird (Hebräisch)
- (Details im Buch)
Semantische Textauszeichnung: <em>
- 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>
Semantische Textauszeichnung: <strong>
- 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)
Semantische Textauszeichnung: <i>
- 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
Semantische Textauszeichnung: <b>
- 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
Semantische Textauszeichnung: <mark>
- 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
Semantische Textauszeichnung: <q>
- 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!
Semantische Textauszeichnung: <u> und <s>
<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
Semantische Textauszeichnung: <ins> und <del>
<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
Semantische Textauszeichnung: <sup> und <sub>
<sup>
- eignet sich für mathematischen Ausdruck x2
<sub>
- tiefergestellter Text
- eignet sich für mathematischen Audruck: xlog
Semantische Textauszeichnung: <time>
- 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">
Semantische Textauszeichnung: <small>
- Text als Kleingedrucktes wie z.B. für Copyrith-Informationen, Lizenzinformationen oder juristische Hinweise auszeichnen
Semantische Textauszeichnung: <ruby>,<rp> und <rt>
- Ruby-Annotationen
- Anmerkungssystem, wie es normalerweise in Japan verwendet wird.
- keine weiteren Detail, mehr im Buch
Semantische Textauszeichnung: <span>
- einen allgemeinen Bereich innerhalb eines Textabsatzes auszeichnen
HTML-Dokument: Seitenstrukturierung: <body>
- darstellbarer Inhalt eines HTML-Dokumentes
HTML-Dokument: semantische Seitenstrukturierung: <section>
- 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
HTML-Dokument: semantische Seitenstrukturierung: <article>
- Unterteilung von Inhalten in einen in sich geschlossenen themenspezifischen Block
- hat in sich eine Struktur: header, footer
HTML-Dokument: semantische Seitenstrukturierung: <aside>
- marginale Informationen an der Seitenleiste
- bspw.: Partner-Websiten
HTML-Dokument: semantische Seitenstrukturierung: <nav>
- Navigation wie einer Sitemap oder der Hauptnavigation der Webseite
- Oft werden Aufzählungslisten (<ul> und <li> verwendet)
HTML-Dokument: Seitenstrukturierung: <h1><h2><h3><h4><h5><h6>
- Überschrift 1-6
- Hinweis: innerhalb eines Sektionselementes (section, article, aside oder nav) beginnen die Überschriften von vorn, jedoch in einer tieferen Hierarchieebene
HTML-Dokument: Seitenstrukturierung: <header>
- 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
HTML-Dokument: Seitenstrukturierung: <footer>
- Fussbereich
- wichtig - ungültige Positionen des Footers:
- Im Footergibt es keine Sub-Footer
- darf auch nicht in header oder address verwendet werden
HTML-Dokument: Seitenstrukturierung: <address>
- Kontaktinformationen zum Autor des Inhalts
- wird kursiv dargestellt
- ist keine Postanschrift, lediglich Info zum Autor
HTML-Elemente für Textstrukturierung: <p>
- Textabsatz in einem längeren Fliesstext
- Achtung: NIcht verwenden darf man innerhalb von <p> --> Überschriften <h1> ...
HTML-Elemente für Textstrukturierung: <br>
- steht für break
- Zeilenumbruch erzwingen
- ist ein alleinstehendes Tag ohne Closing-Tag <br>
HTML-Elemente für Textstrukturierung: <wbr>
- optionaler Zeilenumbruch innerhalb eines Wortes
- ist ein alleinstehendes Tag ohne Closing-Tag und wird im Fliesstext integriert
- Alternative mit Trennstrich: ­........­
- Mehrere Leerzeichen zwischen zwei Wörtern: --> 4 Leerzeichen
HTML-Elemente für Textstrukturierung: <hr>
- thematische Trennung auf der Absatzebene
- alleinstehendes Tag ohne Closing-Tag
HTML-Elemente für Textstrukturierung: <blockquote>
- 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>
HTML-Elemente für Textstrukturierung: <div>
- 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.)
-
- 1 / 45
-