web1

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

Inhaltsverzeichnis:

• Kommentare
• Horizontale Linie
• Überschriften
• Absätze und Zeilenumbrüche
• Typographische Feinheiten
• Zitate
• Aufzählungslisten
• Nummerreirte Listen
• Hyperlinks
• Grafiken
• Videos
• Audiodateie
• iFrame
• Tabelle
• 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 ein Kommentar element aus -->

↑ nach oben...

Horizontale Linie

Eine wagrechte linie fügt man mit dem hr-element ein. hr= horizontale ruler.

↑ nach oben...

Überschriften

HTML kennt insgesamt sechs hiwerarchiebenen für Überschriften. Sie unterscheiden sich hauptsächlich in den Schriftgrößen.

Ü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 (paragrph) beendet einen Textabsatz und fügt einen kleine text abstand dazu. Der Zeilenumbruch br (break) beendet lediglich eine zeile,aber nicht den Absatz. Der Absatzabstand wird unterdrückt. Das br-Element 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. Ratione mollitia qui pariatur, eum est, impedit quaerat quis molestiae, possimus consequuntur dicta, accusantium officiis sunt! Odio facere doloremque quo ab ipsum.

Repellat nesciunt maiores recusandae soluta est harum eligendi amet accusantium vero, quam explicabo veniam accusamus placeat ratione, magni voluptates quisquam tenetur quasi voluptas. Cumque dolore maiores quis, magni dolores, eum.

Labore asperiores nam animi, saepe culpa facilis perferendis quas hic quasi, quaerat ex molestias maxime autem ipsam repellendus atque.

Hier beginnt eine neue Zeile die vorrige Zeile haben wir mit einem br beendet.

↑ nach oben...

Typographische Feinheiten

Bendingter 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 Trennstrich 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 Kategorie "Luxusartikel" kostet immerhin 500000 €;. Das ist nichts für unsere Gehaltsklasse.

↑ nach oben...

Zitate mit q-Element

Zitate werden mit dem q-Tag(q 0 engl., quote, zietieren) ausgezeichnet. beispiel:
Wenn schei.. läuft, laüft´s scheiße! Oliver Kahn,ehemaliger Torwart.

Auch Joseph Pullitzer, amerik. Zeitungsverleger(1847-1911), hat einen klugen Ausspruch getätigt,der uns auch in der IT-Welt, insbesondere bei Dokumentation und Präsentationen, weiter hilft:
Schreibe kurz-und 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-Elemente umschließt die Liste. ul = unordered list, engl. ungeordnete Liste; li = list item, engl. Listenpunkt.

Das Berufsfördrungswerk 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
• Systemkauffrau/-mann -24 Monate
• Fachinformatiker/-in Anwendungsentwicklung - 24 Monaten
• Informatikkauffrau/-mann - 24 Monate

Verschachtelte Aufzählungslisten

Eine 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...

Nummerrierte Listen

Einfache nummerierete Liste

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

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

Verschachtelte nummerierte Liste

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

1. Respontivität
   • Flexible Darstellung auf unterschiedlichen Bildschirmgrößen
   • Flexible Positionierung von Menüs und Fotos
   • Flexible Skalierung von Schrift-und Bildgrößen
2. Barrierefreiheit
   • Auch blinde Website besucher 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 Inhalten/Struktur (html) und Design/Layout (css)

↑ nach oben...

Hyperlinks

Hyperlinks zu externen Webseiten

Um links auf externe Webseite zu setzen, werden i.d.R. URLs benutzt. Es handelt sich dabei um "absolute"Adressen. Beispiel:

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

Hyperlinks zu internen Webseiten

Bei internen Links gibt man relativeAdressen 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 Eben höher zu kommen, sind zwei Pünktchen und Schrägstrichen erforderlich. Beispiel:

Von hier aus wollen auf die Datei "internetseite.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 verlinkten Seitennamen, getrennt durch eine Raut #. Beispiel: siehe Seite interneseite.html

Hyperlinks auf Bilder

Klicken Sie auf das nachfolgende kleine Bild, um weitere Informationen über Venedig von der Wikipediaseite zu erfahren!

Hyperlinks zu Mailadressen mit mailto:

Wenn Sie mir eine Mail senden möchten, dann klicken Sie auf den Briefumschlag: ✉.Das besondere bei der Verlinkung von Mailadressen ist das "mailto": in der< Referenzangabe./p>

Download-Links

Möchte man Dateien zum Download auf der Webseite anbieten, muss nichts Besonderes bzgl. des Quellcodes beachten 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 Dateien direkt im browserfenster angezeigt oder zum Download angeboten. pdf- und Text- Dateien werden direkt im Browserfenster dargestellt.

↑ nach oben...

Grafiken

img-Elemente, mit denen Grafiken auf einer Webseite eingebunden werden, sollten von einem Blockelement umhüllt sein oder per (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"-Eigenschaft zentrieren.

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

Im Jahre 1954 wurden der Teide und die ihn umschließende Caldera als Nationalpark ausgewiesen. 2007 wurde dem Gebiet des Parks der Titel des UNESCO-Weltnaturerbes verliehen. Er war im Jahr 2013 der meistbesuchte Nationalpark der EU und stand an sechster Stelle der meistbesuchten Nationalparks weltweit. 2016 wurden erstmals mehr als vier Millionen Besucher gezählt.

Seit Ende der 1990er Jahre wird die Einhaltung des Naturschutzes durch die permanente Anwesenheit von Wildhütern verschärft kontrolliert. Wandern abseits der vorgegebenen Wege wird nicht geduldet. Man kann den Teide über einen gut beschilderten Weg besteigen. Auf 3260 Metern Höhe befindet sich eine Schutzhütte der Gemeindeverwaltung mit dem Namen Refugio de Altavista. Das historische Gebäude wurde saniert und hält eine Übernachtungsmöglichkeit bereit. Alternativ führt eine Seilbahn, die Teleférico del Teide, bis 160 Höhenmeter unterhalb des Gipfels. Von der Bergstation aus verzweigt sich ein Netz von Wanderwegen.

Für die Gipfelbesteigung ist eine Genehmigung des Büros der Nationalparkverwaltung in Santa Cruz de Tenerife erforderlich, die persönlich oder online zu beantragen ist. Die Erlaubnis mit einem Zeitfenster von zwei Stunden wird kostenlos erteilt, falls die Bedingungen auf dem Gipfel eine Besteigung erlauben und das Besucherkontingent für den entsprechenden Zeitraum noch nicht erschöpft ist.Keine Genehmigung benötigt, wer im Refugio de Altavista auf 3270 Metern Höhe übernachtet und den Gipfel vor neun Uhr besteigt. In der Woche nach Vollmond ist der Aufstieg vom Refugio zu dieser Zeit auch ohne Stirnlampe möglich.Rund 13 Kilometer nordöstlich des Gipfels befindet sich auf 2390 Metern Höhe das Observatorio del Teide des Instituto de Astrofísica de Canarias (IAC) mit seiner ESA Optical Ground Station (Lage). Sie dient einerseits der Satellitenbeobachtung sowie andererseits der Erprobung von optischen Kommunikationstechnologien für Raumfahrtanwendungen.

Rund 3,5 Kilometer südlich der Talstation der Teide-Seilbahn auf der Landstraße TF-21 befinden sich die Roques de García, ein Ensemble vielfarbiger Felsnadeln. Der markanteste Felsen heißt Roque Cinchado („Steinerner Baum“). Die Felsformationen sind vermutlich Reste des ursprünglichen Vulkans.

↑ 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 einem Video-Format:

video Element mit alternativen Video-Formaten:

YouTube-Videos

↑ nach oben...

Audiodateie

Die Einbindung von Audio Dateien funktioniert ähnlich wie bei Videodatein. Mit HTML5 wurde das Element "audio" eingeführt.

↑ nach oben...

iFrame

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

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

Rezept

Chefckoch

↑ nach oben...

Tabelle

Tabellen gelten als Nicht barrierefrei

Einfache Tabelle

Komplexe Tabelle mit verbunden Spaltenzellen (colspan)

Komplexe Tabelle mit verbundenen Zeilenzellen (rowspan)

↑ nach oben...

Aufklappbare Seiteninhalte mit details und summary

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

Beispiel 1 - nur 1 Überschrift

Beispiel 2 - mit fünf Überschriften

↑ nach oben...

Container, Bereiche und Abschnitte

Um größere Bereiche zu definieren, gibt es spezielle html-Element. Man unterscheidet zwischen Block-und Inline-Elemente. Bei den Blockelementen definiert man entweder individuelle Bereiche mit <div> oder man bereichsnamen, die in HTML5 standartisiert 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-Namen mit selektiert. Beispiel:
in HTML<div id="wrapper">
in css: #wrapper {}

Lorem ipsum dolor sit amet, consectetur adipisicing elit. class="grausig">Earum eum pariatur temporibus unde ab laudantium dolorem! Perspiciatis recusandae iusto ipsa consectetur vel magni, dignissimos autem quia, sequi commodi asperiores beatae!

↑ nach oben...