web1

Im Nachfolgenden haben wir die wichtigsten HTML-Elemente zur Auszeichnung und Strukturierung des sichtbaren Inhalts einer Webseite ausprobiert. Durch Klicken auf das gewünschte Thema im Inhaltsverzeichnis können Sie direkt zu diesem Abschnitt springen.

Inhaltsverzeichnis:

• Kommentare
• Horizontale Linie
• Überschriften
• Absätze und Zeilenumbrüche
• Typographische Feinheiten
• Zitate
• Aufzählungslisten
• Nummerierte Listen
• Hyperlinks
• Grafiken
• Videos
• Audiodateien
• iFrame
• Tabellen
• Aufklappbare Seiteninhalte
• Container, Bereiche und Abschnitte

Kommentare

Kommentare sind für den Besucher unsichtbar. Sie dienen dem Entwickler als Notizfunktion im Quellcode. Abschnitte im Quellcode, die als Kommentar gekennzeichnet sind, werden nicht als ausführbarer Code interpretiert.

Jetzt folgt ein unsichtbarer Kommentar.

So sieht das unsichtbare HTML-Element aus:

<!-- So sieht ein Kommentar-Element aus -->

↑ Nach oben...

Horizontale Linie

Eine waagrechte Linie fügt man mit dem hr-Element ein. hr = horizontal ruler.

↑ Nach oben...

Überschriften

HTML kennt insgesamt sechs Hiwerarchieebenen für Überschriften. Sie unterscheiden sich hauptsächlich in der Schriftgröße.

Überschrift 1

Überschrift 2

Überschrift 3

Überschrift 4

Überschrift 5

Überschrift 6

↑ Nach oben...

Absätze und Zeilenumbrüche mit p und br

Der Absatz-Tag p (paragraph) beendet einen Textabsatz und fügt einen kleinen Textabstand dazu. Der Zeilenumbruch br (break) beendet lediglich eine Zeile, aber nicht den Absatz. Der Absatzabstandm wird unterdrückt. Das br-Elementm ist ein Standalone-Tag, d.h. es gibt nur einen öffnenden Tag, keinen schließenden. jetzt folgen drei mehrzeilige Absätze mit jeweils einem Absatzabstand zum nächsten:

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, voluptate. Porro fugit eius, veniam doloribus voluptatibus rem aperiam neque sunt consequuntur voluptatem at, qui et quasi repellat, dolorum quo excepturi.

Tempore nostrum adipisci nesciunt obcaecati nulla laborum perspiciatis nihil distinctio aut tempora accusantium, beatae nemo commodi, repellendus ratione, dignissimos assumenda molestiae soluta! Sunt, in quisquam! Eos nisi, dolores est quibusdam.

Repellat dolorem labore iure consequatur facere veritatis reprehenderit amet architecto praesentium at, officia aliquam ut.
Hier beginnt eine neue Zeile. Die vorhergehende Zeile haben wir mit br beendet. Quod perferendis cupiditate temporibus modi vel optio dolorum! Dolorum sed expedita sunt, atque placeat quae.

↑ Nach oben...

Typographische Feinheiten

Bedingter Trennstrich mit shy

Die Abkürzung "shy" bedeutet "soft hyphen", engl., "weicher Trennstrich". Ein bedingter Trennstrich wird nur dann angezeigt, wenn er am Zeilenende steht. Steht er mitten in der Zeile, bleibt er unsichtbar.
Beispiel ohne bedingten Trennstrich: Unser 5l-Bierfaß muss mit einer Bierfasskühlmanschette gekühlt werden.
Beispiel mit bedingten Trennstrich: Unser 5l-Bierfaß muss mit einer Bier­fass­kühl­man­schette gekühlt werden.
Beispiel mit bedingten Trennstrich und unterschiedlichen Texten: Unser 5l-Bierfaß muss mit einer Bier­fass­kühl­man­schette gekühlt werden.

Geschützter Leerschrit mit nbsp

Ein geschützter Leerschritt wirkt wie ein Magnet. Er hält zwei Wörter immer zusammen. Passen diese nicht mehr zusammen an das Zeilenende, werden beide Wörter in die nächste Zeile umgebrochen, also nicht zerrissen. Dies würde sonst unästhetisch aussehen. Beispiel:
Dieses smarte, hervorragende Produkt aus der Kateogorie "Luxusartikel" kostet immerhin 500000 €. Das ist nichts für unsere Gehaltsklasse.

↑ Nach oben...

Zitate mit q-Element

Zitate werden mit dem q-Tag (q = engl. quote, zietieren) ausgezeichnet. Beispiel:
Wenn's scheiß läuft, läuft's scheiße! Oliver Kahn, ehem. Torwart.

Auch Joseph Pullitzer, amerik. Zeitungsverleger (1847 - 1911), hat einen klugen Ausspruch getätigt, der uns auch in der IT-Welt, insbesondere bei Dokumentationen und Präsentationen, weiter hilft:
Schreibe kurz - uns sie werden es lesen
Schreibe klar - und sie werden es verstehen.
Schreibe bildhaft - und sie werden es im Gedächtnis behalten.

↑ Nach oben...

Aufzählungslisten

Einfache Aufzählungsliste mit ul und li

Eine einfache Aufzähliste ist eine Liste mit Blickfangpunkten links vorne und einer leichten Texteinrückung nach rechts. Das ul-Element umschließt die Liste. ul = unordered list, engl. ungeordnete Liste; li = list item, engl. Listenpunkt.

Das Berufsförderungswerk Schömberg bietet sieben IT-Ausbildungsmaßnahmen an. Sie unterscheiden sich in der Dauer und den Inhalten:

• PC-Supporter/-in - 6 Monate
• PC- und Netzwerkfachkraft - 12 Monate
• IT-Systemelektroniker/-in - 24 Monate
• Fachinformatiker/-in Systemintegration - 24 Monate
• Fachinformatiker/-in Anwendungsentwicklung - 24 Monate
• Systemkauffrau/-mann - 24 Monate
• Informatikkauffrau/-mann - 24 Monate

Verschachtelte Aufzählungsliste

Ein verschachtelte Liste bekommt man, wenn man nach dem Listitem nicht sofort schließt, sondern erst noch eine weitere ul- oder ol-Liste einfügt, und dann erst das li-Element schließt. Beispiel:

• 2-jährige Vollausbildung mit Facharbeiterbrief:
  1. SE
  2. FIS
  3. FIA
  4. SK
  5. INK
• Qualifizierungsmaßnahmen (JobFit)
  1. PCS
  2. PCN

↑ Nach oben...

Nummerierte Listen

Einfache nummerierte Liste

Bei der modernen Webentwicklung sollen mindestens diese vier Aspekte beachtet werden:

1. Responsivität
2. Barrierefreiheit
3. Performance
4. HTML5-Standard

Verschachtelte nummerierte Liste

Bei der modernen Webentwicklung sollen mindestens diese vier Aspekte beachtet werden:

1. Responsivität
   • Flexible Darstellung auf unterschiedlichen Bildschirmgrößen
   • Flexible Positionierung von Menüs und Fotos
   • Flexible Skalierng von Schrift- und Bildergrößen
2. Barrierefreiheit
   • Auch blinde Websitebesucher sollen am Inhalt teilhaben können
   • Die Struktur sollte für Screenreader optimiert sein.
3. Performance
   • Ladezeiten für Bilder optimieren
   • Quelltext nicht unnötig überladen
4. HTML5-Standard
   • Quellcode sollte valide sein. (mit Validator überprüfen lassen)
   • Strikte Trennung von Inhalt/Struktur (html) und Design/Layout (css).

↑ Nach oben...

Hyperlinks

Hyperlinks zu externen Webseiten

Um Links auf externe Webseiten zu setzen, werden i.d.R. URLs benutzt. Es handelst sich dabei um "absolute" Adressen. Beispiel:

Eine der bekanntesten und ältesten Referenzseiten für Webtechnologien ist die Seite wiki.selfhtml.org

Hyperlinks zu internen Webseiten

Bei internen Links gibt man relative Adressen an. Dies bedeutet, man muss wissen, wo man in der Verzeichnishierarchie ist und wohin verlinken will. Um eine Ordnerebene nach unten zu gelangen, ist die Angabe des Namens des Unterordners notwendig. Um eine Ebene höher zu kommen, sind zwei Pünktchen und Schrägstrich erforderlich. Beispiel:

Von hier aus wollen auf die Datei "interneseite.html" verlinken, die sich im Unterordner "samples" befindet.

Hyperlinks zu Textmarken innerhalb einer Webseite

Möchte man zu einer bestimmten Stelle innerhalb einer Seite verlinken, kennzeichnet man die Stelle mit einem eindeutigen Namen (id="name") und setzt diesen Textmarken hinter den verlinkte Seiten Namen, getrennt durch eine Raut #. Beispiel: siehe Seite "interneseite.html".

Hyperlinks auf Bilder

Klicken Sie auf das nachfolgende kleine Bild, um weitere Information über Löwenzahn von der Wikipediaseite zu erfahren!

Hyperlinks zu Mailadressen mit mailto:

Wenn Sie mir eine Mail senden möchten, dann klicken Sie auf den Briemumschlag: ✉. Das Besondere bei der Verlinkung von Mailadressen ist das "mailto:" in der Referenzangabe.

Download-Links

Möchte man Dateien zum Download auf der Webseite anbieten, muss nichts Besonderes bzgl. des Quellcodes beachtet werden. Man muss die Dateinamen (Groß-/Kleinschreibung EXAKT beachten!) einfach nur "ganz normal" verlinken. Siehe nachfolgende Beispiele:

• pdf-Datei
• Word-Datei
• Excel-Datei
• Text-Datei

Je nach Dateityp werden die Inhalte der Darteien direkt im Browserfenster angezeigt oder zum Dowload angeboten. pdf- und Text-Dateien werden i.d.R. direkt im Browserfenster dargestellt.

↑ Nach oben...

Grafiken

img-Elemente, mit denen Grafiken auf einer Webseite eingebunden werden, sollten von einem Blockelement umhüllt sein (z.B. <figure>>) oder per CSS von einem Inline-Element zu einem Block-Element umgewandelt werden (display; block;). Ist das img-Element zu einem Block-Element geworden, lässt es sich per CSS sehr leicht in der Mitte mit der "margin"-Eingenschaft zentrieren.

Möchte man, dass der nachfolgende Text um das Bild herumfließt (links oder rechts), denn kann dies mit CSS und der "float"-Eigenschaft realisiert werden.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima fuga, adipisci repellendus? Beatae ipsum laudantium ad, officiis illum! Sit quas tempore dignissimos assumenda. Repudiandae libero pariatur illo deserunt ipsa aspernatur possimus optio voluptatibus eligendi officia itaque, accusamus explicabo odit dolore.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga aliquid magni repellat dolore velit repudiandae pariatur aut sapiente dolor ut, quia dolores quasi unde quod deserunt recusandae fugiat? Placeat officia aliquid harum laboriosam tempore, sunt, modi doloribus laborum. Quas magnam molestias atque, delectus laboriosam sint itaque consequatur. A quae autem perferendis molestiae, harum deleniti nam, aliquid, explicabo totam beatae ducimus.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia temporibus asperiores magnam cum perferendis earum doloremque aliquam, sit velit obcaecati hic quasi in totam vitae eum ex commodi pariatur possimus sed, ratione repudiandae quas magni provident distinctio vero? At reprehenderit doloribus, facilis ut nihil qui, nisi porro recusandae pariatur possimus.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima fuga, adipisci repellendus? Beatae ipsum laudantium ad, officiis illum! Sit quas tempore dignissimos assumenda. Repudiandae libero pariatur illo deserunt ipsa aspernatur possimus optio voluptatibus eligendi officia itaque, accusamus explicabo odit dolore.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga aliquid magni repellat dolore velit repudiandae pariatur aut sapiente dolor ut, quia dolores quasi unde quod deserunt recusandae fugiat? Placeat officia aliquid harum laboriosam tempore, sunt, modi doloribus laborum. Quas magnam molestias atque, delectus laboriosam sint itaque consequatur. A quae autem perferendis molestiae, harum deleniti nam, aliquid, explicabo totam beatae ducimus.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia temporibus asperiores magnam cum perferendis earum doloremque aliquam, sit velit obcaecati hic quasi in totam vitae eum ex commodi pariatur possimus sed, ratione repudiandae quas magni provident distinctio vero? At reprehenderit doloribus, facilis ut nihil qui, nisi porro recusandae pariatur possimus.

↑ Nach oben...

Videos

Videos werden in HTML5 mit dem "video-Element ganz einfach eingebunden. Drei Video­formate werden von den meisten Browsern unterstützt:

1. .mp4
2. .ogg
3. .webm

video-Element mit 1 Video-Format:

video-Element mit alternativen Video-Formaten:

YouTube-Videos einbinden

↑ Nach oben...

Audiodateien

Die Einbindung von Audiodateien funktioniert ähnlich wie Videodateien. Mit HTML5 wurde das Element "audio" eingeführt.

↑ Nach oben...

iFrame

Mit dem iframe-Element kann man innerhalb einer Webseite externe Inhalte anzeigen lassen.

Der nachfolgende inlineframe zeigt eine Speisekarte an, die mit dem Windows-Editor als einfache Textdatei ertellt wurde. Dies kann auch ein Endkunde ohne HTML-Kenntnisse pflegen und so seine Webseite aktuell halten.

Tageskarte

Google Maps Landkarte

Hier wohne ich:

↑ Nach oben...

Tabellen

Tabellen gelten als NICHT barrierefrei und sollten deshalb nach Möglichkeit vermieden werden. Eine Tabelle sollte lediglich zum Auflisten von Text und Zahlen in Zeilen und Spalten benutzt werden. Auf gar keinen Fall sollte dieses Element zur Layoutgestaltung einer Webseite herangezogen werden.

Einfache Tabelle

Komplexe Tabelle mit verbunden Spaltenzellen (colspan)

Komplexe Tabelle mit verbunden Zeilenzellen (rowspan)

↑ Nach oben...

Aufklappbare Seiteninhalte mit details und summary

Mit den Elementen details und summary kann man einen Akkordeon-Effekt erzeugen. Klickt man auf den Dreieckspfeil wird der darunter verborgene Inhalt durch Aufklappen sichtbar gemacht.

Beispiel 1 - nur 1 Überschrift

Beispiel 2 - mit 5 Überschriften

Beispiel 3 - mit 1 Überschrift

Themen, die der IT-Ausbilder B. Becker im 1. Halbjahr unterrichtet hat:

↑ Nach oben...

Container, Bereiche und Abschnitte

Um größere Bereiche zu definieren, gibt es spezielle html-Elemente. Man unterscheidet zwischen Block- und Inline-Elementen. Bei den Blockelementen definiert man entweder individuelle Bereiche mit <div> oder man bedient sich der sog. "semantischen" Bereichsnamen, die in HTML5 standardisiert wurden. Zum Beispiel: header, footer, main, aside, nav, section, article usw..

Individuellen Bereichselementen sollte man einen Namen geben mit id=" " oder class=" ". id-Bereiche dürfen nur 1x auf der Webseite vorkommen, class-Bereiche dagegen beliebig oft. Im CSS werden id-Namen mit # und class-Namenn mit . selektiert. Beispiel:
in html: <div id="wrapper">
in css: #wrapper {}

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat eaque cupiditate saepe, fugiat, obcaecati veritatis similique iste pariatur sapiente nobis vero perspiciatis debitis amet a laborum dignissimos id illo ipsum. Lorem ipsum dolor sit amet, consectetur adipisicing.

↑ Nach oben...