HTML

von | Nov 20, 2017 | HTML-CSS | 0 Kommentare

HTML

In den ersten Versionen der „Hypertext Markup Language“ war es die Aufgabe von HTML einen Text zu strukturieren und auch zu formatieren. Das Strukturieren erfolgte durch so genannte Tags, das Formatieren ebenfalls über Tags und über Attribute in den Tags. Diese Vermischung von Struktur und Format war sehr unübersichtlich.

In den aktuellen Versionen von HTML sind diese Schreibweisen veraltet und alle Formatierungen werden durch so genannte StyleSheets vorgenommen, die mit dem HTML-Kode verbunden sind. Diese Formatierung gab es eigentlich auch schon in den Anfängen von HTML, nur wurde damals die Trennung von Struktur und Aussehen nicht so strikt eingehalten.

Browser sind bei HTML-Seiten fehlertolerant

Das ist eine formal korrekte Webseite (html-0.htm)

[code lang=“html“]
<!DOCTYPE html>
<html>
<head>
<title>Titel der Webseite</title>
</head>
<body>
<p>Hello ClubComputer</p>
<p>Heute ist der 24. Oktober</p>
</body>
</html>
[/code]

Wenn man aber nur die Textzeilen schreibt (html-1.htm)

[code lang=“html“]
<p>Hello ClubComputer</p>
<p>Heute ist der 24. Oktober</p>
[/code]

…oder überhaupt nur den Text

[code lang=“html“]
Hello ClubComputer
Heute ist der 24. Oktober
[/code]

wird der Browser das korrekt anzeigen, obwohl die formalen Regeln nicht eingehalten worden sind. (Im letzten Beispiel ohne Tags erfolgt kein Zeilenumbruch.)

Aber es kann sein, dass bei Fehlern im Code verschiedene Browser wegen der Fehler zu verschiedenen Ergebnissen kommen.

Die Elemente einer HTML-Datei

Eine HTML-Datei besteht aus Tags, Attributen innerhalb der Tags und Texten zwischen öffnenden und schließenden Tags.

Tags

Es gibt 118 HTML-Tags, von denen aber einige in HTML 5 nicht mehr unterstützt werden. Dennoch werden sie im Sinne der HTML-Fehlertoleranz immer noch korrekt ausgeführt. Die meisten der folgenden Tags treten paarweise auf: <p>Hier ist ein Text</p>. Einige werden nur in einer selbstschließenden Version verwender: <br/> <hr/> <img …/>.

!--...-- • !DOCTYPE  • a • abbr • acronym • address • applet • area • article • aside • audio • b • base • basefont • bdi • bdo • big • blockquote • body • br • button • canvas • caption • center • cite • code • col • colgroup • datalist • dd • del • details • dfn • dialog • dir • div • dl • dt • em • embed • fieldset • figcaption • figure • font • footer • form • frame • frameset • h1 ... h6 • head • header • hr • html • i • iframe • img • input • ins • kbd • label • legend • li • link • main • map • mark • menu • menuitem • meta • meter • nav • noframes • noscript • object • ol • optgroup • option • output • p • param • picture • pre • progress • q • rp • rt • ruby • s • samp • script • section • select • small • source • span • strike • strong • style • sub • summary • sup • table • tbody • td • textarea • tfoot • th • thead • time • title • tr • track • tt • u • ul • var • video • wbr

HTML strukturiert ein Dokument aber bindet auch weitere Dateien ein. Zum Formatieren sind das Stil-Vorschriften (Style-Sheets, .css), für die Interaktion sind es JavaScript-Programme (.js) und darüber hinaus auch alle Medien-Dateien (.jpg, .mp3, .mp4 uvam.)

Attribute

Ein Absatz schaut beispielsweise so aus:

[code lang=“html“]
<p>Hier ist der Text</p>
[/code]

p steht für „paragraph“. Die spitzen Klammern dienen zur Unterscheidung von Text. Wollte man eine solche spitze Klammer als Text anzeichen, braucht man ein HTML-Ersatzzeichen: &lt; &gt;.

[code lang=“html“]
<p>Hier ist eine öffnende Klammer &lt; im Text</p>
[/code]

In jedem öffnenden Tag können auch Attribute eingefügt sein. Wichtige Attribute sind id, title, class, style. Beispiel (html3.htm):

[code lang=“html“]
<p id="p110" class="MeinAbsatz" title="Erklärung zum Text">Hier ist der Text</p>
[/code]

id ist eine eindeutige Benennung für ein bestimmtes Tag; class ist ein Name, der mehreren Tags zugewiesen werden kann, die dann gemeinsam formatiert werden können; title enthält einen Text, der als Sprechblase erscheint, wenn die Maus über das Objekt fährt.

Das Tag p und die Attribute id und class können in einer Stildatei formatiert werden.

Bilder

Das Einfügen von Bildern erfolgt mit dem img-Tag (html-3.htm):

[code lang=“html“]
<img src="http://d.pcnews.at/i/2013pcn.png" />
[/code]

Links

Ein zentrales Element in HTML-Dateien sind Links, die der Leser des Dokuments dazu benutzen kann, zu anderen Inhalten im Internet zu gelangen (html-3.htm).

[code lang=“html“]
<a href="http://pcnews.at" target="_blank">Zur PCNEWS-Homepage</a>
[/code]

Hinweise

  • Alle hier in Klammen gesetzten Dateien findest Du auf der Seite http://sex.clubcomputer.at -> webseiten zum Ausprobieren.
  • Die Beispiele in diesem Beitrag sind auch in einem Foliensatz zu finden.
  • Beachte auch den Beitrag „Websprachen lernen“, in dem zahlreiche Links zu dem hier besprochenen Thema zu finden sind.

 

Kommentar absenden

Zur Werkzeugleiste springen