HTML-Elemente: Veranschaulichung

Mit HTML werden Texte strukturiert. Der Browser stellt die Textstellen ihrer Struktur entsprechend optisch aufbereitet dar, z.B. werden Überschriften fett und in unterschiedlichen Größen dargestellt. Alleine mit HTML sieht der Text "altmodisch" aus, wie aus den Anfangszeiten des WWW. Doch das ist gewollt!

Zur optischen Gestaltung benutzt man in einem nachfolgenden Arbeitsschritt "Cascading Style Sheets", kurz CSS. Was man auf keinen Fall tun sollte ist, formatierende HTML-Elemente aus der Version HTML 3.2 zu verwenden. Diese Version war eine Sackgasse und wurde später durch die Entwicklung von CSS mehr als wettgemacht. Diese formatierende HTML-Elemente werden wir daher nicht lernen und sie werden hier auch bewußt nicht gesonders besprochen.

Welche Elemente aus HTML sollen verwendet werden und wie werden sie in einem Browser dargestellt?

zum Anfang der SeiteBlock-Elemente

Das sind vor allem Überschriften, Absätze sowie verschiedene Listen und Tabellen.

Inline-Elemente

Verwendet werden Betonungen (stark: <strong> und einfach: <em>), Abkürzungen (<abbr> - beim Lesen der Webseite mit der Maus draufzeigen) sowie Zitate (<q> und <cite>). Weiters gibt es noch Löschungen (<del>) und Einfügungen(<ins>), um Änderungen im Text aufzuzeigen.

Da HTML im wissenschaftlich, technischen Bereich entwickelt wurde, gibt es eine Anzahl von Auszeichnungen für die Darstelleung von Computerprogrammen wie: Code, (Keyboard-) Eingabe, Ausgabe (-beispiel), Variabel und Definition. Diese Definition ist im unteren Beispiel noch angeführt, da man sie eventuell im allgemeinen noch benutzen kann. Die anderen Auszeichnungen werden nur bei technischen Themen Sinn machen.

In diesem Beispiel sind die Auszeichnungen noch farblich hervorgehoben und beschriftet, um es besser zu verdeutlichen:

Lorem ipsum dolor sit amet, consetetur sadipscing (strong) elitr, sed diam nonumy eirmod tempor invidunt (em) ut labore et dolore magna aliquyam erat, sed S.P.Q.R.(abbr) diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum Julius Caesar (cite): Veni, vidi, vici (q). Stet clita kasd gubergren, no sea takimata sanktus (del) sanctus (ins) est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet (dfn), consetetur sadipscing elitr.

Hier nun die Darstellung, wie sie im Browser angezeigt wird:

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed S.P.Q.R. diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum Julius Caesar: Veni, vidi, vici. Stet clita kasd gubergren, no sea takimata sanktus sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

zum Anfang der SeiteBenannte Zeichen (mit & und ; maskierte Zeichen)

Anmerkung: Wenn man Unicode als Zeichensatz verwendet, können viele Zeichen wie z.B. Umlaute ganz normal im HTML-Code stehen.

In HTML können viele "Sonderzeichen" verwendet werden. Das sind vor allem benannte Zeichen: im Quellcode werden sie mit einem & begonnen, dann folgt der entsprechende Name und mit einem ; wird das Zeichen abgeschlossen, z.B. € (Name: euro): &euro;

Der Wechselkurs zwischen Euro und US-Dollar steigt. Dadurch kommen auch andere Währung wie das britische Pfund und der japanische Yen unter Druck: So bekommt man für 1 £ schon 70 ¢ und für 1 € bekommt man schon 160 ¥.

2014 entwickelte Frau Magª Mœrike Årsund die Legierung Supraleg®, die schon ab -130°C (±5‰) supraleitend ist.

a² + b² = c²    ©Pythagoras

»Es ist …«, stammelte er noch.

2 × ¼ = ½         a ≤ b

Heutzutage verwenden Installteure vorwiegend ¾ Zoll Rohre.

Verkaufe: Motorrad mit 750 cm³ und Stellplatz mit 3 m².

 

 

 

Hyperlink (Inlineelement)

Bilder (img)

REST

Vorschau:

Überschrift 1

Überschrift 2

Überschrift 3

Überschrift 4

Überschrift 5
Überschrift 6

Absatz

Vorschau:

  • erster Listeneintrag
  • zweiter Listeneintrag
  • dritter Listeneintrag
  1. erster Listeneintrag
  2. zweiter Listeneintrag
  3. dritter Listeneintrag
HTML
Hypertext Markup Language
CSS
Cascading Style Sheets