Aug 26, 2020
seen from Canada
seen from Brazil
seen from United States
seen from Germany
seen from United States
seen from China
seen from United States
seen from Netherlands
seen from France
seen from Türkiye
seen from United States
seen from United Kingdom
seen from United Kingdom
seen from Brazil
seen from Australia
seen from United Kingdom
seen from Israel
seen from United Kingdom
seen from United States
seen from Belgium
© Stefan Brenner { website }
Iceland
Images in HTML
Dies ist eine Zusammenfassung des Artikels: "Images in HTML" von Chris Heilmann
Bilder ja/nein
Achtung! Es gibt Gründe warum man nicht immer Bilder für eine HTML nützen sollte:
User die mit mobilen Geräten surfen, schalten Bilder wegen dem sowieso kleinem Bildschrim, oder der hohen Datenrate aus
Blinde oder sehbehinderte Menschen können Bilder gar nicht, oder wenn dann nur schlecht sehen
Menschen mit anderem kulturellen Hintergrund nehmen Symbole evtl. anderst war
Suchmaschinen analysieren (bisher) nur Text, keine Bilder
Deshalb: Bilder intelligent einsetzen und evtl. eine Alternative anbieten.
Einbinden der Bilder in HTML
Wichtig:
Wenn das Bild für den Inhalt der Seite wichtig ist, sollte es direkt im HTML (<img> Element) und mit dem passenden alternativen Text eingepflegt werden.
Wenn das Bild nur als Verschönerung dient ist es sinnvoller dies mit CSS einzubinden
Und so wird das JPG Beispielbild eingebunden:
<img src="Beispielbild.jpg">
hier ist zu beachten, dasss das Bild im selbern Ordner wie die index.html liegen muss!
Bei diesem Befehl wird das Bild zwar angezeigt, die HTML ist allerdings nicht valide. Hierfür wird ein alternativer Text (<alt>) benötigt. Wird das Bild aus einem bestimmten Grund nicht angezeigt (z.B. Bild kann nicht gefunden oder geladen werden, der Browser unterstützt keine Bilder oder ein User mit Seheinschränkungen ließt die HTML mit einer bestimmten Software), so tritt der "alt-Text an die Stelle des Bildes". Deshalb sollte dieser so aussagekräfitig wie möglich sein.
<img src="Beispielbild.jpg" alt="ein einfaches Beispielbild ohne Inhalt">
Achtung! Nicht mit zusätzlichen Informationen verwechseln die auftauchen wenn der Mauszeiger über dem Bild liegt. Hierfür gibt es das <title> -Attribut.
<img src="Beispielbild.jpg" alt="ein einfaches Beispielbild ohne Inhalt" title="ein super Beispielbild wie ich finde.">
longdesc - Ausführliche Beschreibung
Bei komplexen Bildern, zum Beispiel Schaubildern gibt es das <longdesc> - Attribut. Dieses Attribut verweist auf eine seperate HTML mit ausführlicher Beschreibung. Dies ist visuell nicht festzustellen, wird aber von Screenreadern erkannt und an die Userweitergegeben, ob sie den longdesc nutzen wollen.
Beispiel:
das Bild (inlineimagelongdesc.html) mit "longdesc-Attribut":
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Example of an inline image with longdesc</title> </head> <body> <img src="chart.png" width="450" height="150" alt="Chart showing the fruit consumption amongst under 15 year olds. Most children ate Pineapples, followed by Pears" longdesc="fruitconsumption.html"> </body> </html>
die "longdesc-HTML" (fruitconsumption.html):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Fruit consumption</title> </head> <body> <table summary="Fruit Consumption of under 15 year olds, March 2007"> <caption>Fruit Consumption</caption> <thead> <tr><th scope="col">Fruit</th><th scope="col">Amount</th></tr> </thead> <tbody> <tr><td>Apples</td><td>10</td></tr> <tr><td>Oranges</td><td>58</td></tr> <tr><td>Pineapples</td><td>95</td></tr> <tr><td>Bananas</td><td>30</td></tr> <tr><td>Raisins</td><td>8</td></tr> <tr><td>Pears</td><td>63</td></tr> </tbody> </table> <p><a href="inlineimagelongdesc.html">Back to article</a></p> </body> </html>
Schnellere Bilder
Standardmäßig weiß ein Browser nicht die Größe der Bilder. So läd er erst den ganzen Text und passt diesen dann an, wenn das Bild geladen ist. Dies kann man umgehen wenn man die Größe des Bildes schon vorher angibt. Somit wird dieser Bereich gleich für das Bild freigehalten. Zwar kann man das Bild auch per HTML sklieren, dies sollte aber vermieden werden. HTML skaliert zum einen die Bilder nicht verlustfrei und andererseits wird bei einem kleiner skaliertem Bild das Quellbild geladen, was sinnlose Ladezeit verursacht!
<img src="Beispielbild.jpg" alt="ein einfaches Beispielbild ohne Inhalt" title="ein super Beispielbild wie ich finde." width="400" height="360">
CSS
Wenn es darum geht Bilder in irgendeiner Art und Weise in der HTML auszurichten: CSS benutzen. HTML hat zwar auch ein paar dafür, ist aber lange nicht so einsetzbar und flexibel wie CSS. Somit ist die Ausrichtung mit HTML passé.
HTML links - let's build a web!
Dies ist eine Zusammenfassung des Artikels: "HTML links - let's build a web!" von Chris Heilmann...
Links
Links sind ein Bestandteil von Homepages und verweisen auf eine andere Quelle (ander HTML-Documente, Text-Dateien, PDF usw.). Es gibt sowohl Links, die automatisch vom Browser verbunden werden, als auch Links, die der User selbständig auslösen muss - so genannte anchors.
Jedes inline-Element kann zu einem anchor werden (element: <a>)
Eigenschaften eines anchors:
href: die Quelle auf die der Link verweist
id: dient das Ziel eines Links, dadurch kann man zu bestimmten Bereichen der HTML springen (!muss einzigartig sein, keine Leerzeichen, beginnt mit einem alphanumerischen Zeichen)
title: extra Infos wenn der User mit der Maus über den Text fährt
Da der "title" oft nicht aktiviert ist und ihn viele User auch übersehen, sollten wichtige Information über den Link nicht im "title" stehen, sondern im anchor oder einem kleinen Infotext.
Hier ein einfaches Beispiel mit den verschiedenen Link-Formen und ihren Elementen:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Different Link Example</title> <link rel="stylesheet" href="linkexamplestyles.css"> </head> <body> <h1>Different Link examples</h1> <h2>Example of in-page navigation with fragment identifiers, links and anchors</h2> <div id="nav"> <ul id="toc"> <li><a href="#sec1">Section One</a></li> <li><a href="#sec2">Section Two</a></li> <li><a href="#sec3">Section Three</a></li> <li><a href="#sec4">Section Four</a></li> <li><a href="#sec5">Section Five</a></li> </ul> </div> <div id="content"> <div> <h2><a id="sec1">Section #1</a></h2> <p><a href="#toc">Back to menu</a></p> </div> <div> <h2><a id="sec2">Section #2</a></h2> <p><a href="#toc">Back to menu</a></p> </div> <div> <h2><a id="sec3">Section #3</a></h2> <p><a href="#toc">Back to menu</a></p> </div> <div> <h2><a id="sec4">Section #4</a></h2> <p><a href="#toc">Back to menu</a></p> </div> <div> <h2><a id="sec5">Section #5</a></h2> <p><a href="#toc">Back to menu</a></p> </div> </div> <h2>Some other link examples</h2> <ul> <li><a href="http://developer.yahoo.com">Yahoo Developer Network</a></li> <li><a href="http://dev.opera.com/articles/view/the-freelancing-business-part-1-pricing/#marketing">Tips on marketing yourself</a></li> <li><a href="ftp://get.opera.com/pub/opera/win/">Download different Opera versions</a></li> <li><a href="http://farm1.static.flickr.com/56/188791635_0b8bdd808d.jpg?v=0">Photo of my book</a></li> </ul> </body> </html>
und hier der Link zu dieser HTML: Different Links
noch zur Erklärung:
<ul> und <li>
"ul" steht für "unordered list" und lässt den Browser eine Aufzählungsliste anzeigen "li" bedeutet "list" und makiert den Beginn (bzw. das Ende) eines neuen Aufzählunspunktes
<div>
steht für "division" und schließt das Dazwischenliegende in einen Bereich ein, d.h es beginnt eine neue Zeile im Fließtext
Je nachdem welchen aktuellen Status ein Link auf der Homepage hat (das ist ein Link, besuchter Link, mit der Maus darüberfahren, aktiver Link), sollte er demensprechend anderst aussehen um es dem User einfacher zu machen.
Get ready...HTML
Dies ist eine Zusammenfassung des Artikels:"Marking up textual content in HTML" von Mark Norman Francis...
Einführung in HTML
Freiräume
Der Platz zwischen einzelnen Wörtern oder ganzen Textabschnitten (z.B. und Leerzeichen, Tabs und Umbrüche) muss im HTML extra definiert werden und hat nichts mit dem "Platz" im HTML-Script zu tun.
Für das Formatieren des Textes ist nicht der Code, sondern so genannte Stylesheets vor
Beispiel:
<h3>In the
beginning</h3>
wird so dargestellt: In the beginning
also erhalten wir den gleichen Output auch bei dieser Schreibweise:
<h3>In the beginning</h3>
!Das pre Element stellt hierzu eine Ausnahme dar!
Bei diesem Tag wird der nachfolgende Code so behandelt als wäre es ein formatierter Text, man spricht auch von einem vorformatierten Text, und die Freiräume werden genauso übernommen, wie sie im Code dargestellt sind.
Block Elemente
Überschriften
Wenn eine Seite in logische Teile aufgeschlüsselt wird, sollte jede Sektion einen passende Überschrift (header) erhalten.
HTML definiert 6 Stufen von Header: h1, h2,h3,h4, h5, h6 (von höchster zur niedrigsten Priorität). Header mit der gleichen Zahl sind also auch gleich "wichtig".
Diese Headereinteilung macht es möglich das Dokument in einzelne Bereiche und Unterbereiche einzuteilen.
Dies hilft vor allem Screenreader und Suchmaschinen wie z.B. Google usw.
Allgemeine Paragraphen
Der Paragraph ist der Hauptbaustein für die meisten Dokumente.
Ein Paragraph wird im HTML durch ein p gekennzeichnet und hat keine besonderen Eigenschaften, kann jedoch später mit CSS verändert und formatiert werden.
Beispiel:
<p>das ist ein Paragraph</p>
Ein Paragraph ist die Zusammenfassung eines Satzes oder mehreren Sätzen, wie z.B. in Zeitungen und Büchern.
Er wird mit <p> eröffnet und mit einem </p> wieder geschlossen.
Zitate
Des Öfteren ist es nötig etwas zu Zitieren ihr gibt es einen so genannten <blockquote>tag.
Ein Blockquote Element kann allein kein Text enthalten und benötigt immer ein anderes Bock-Element z.B. ein Paragraph.
Wenn man die Quellseite verlinken möchte, gibt es den Befehl <blockquote cite= "Quelle">.
Beispiel:
<blockquote cite="hier steht die Internet-Adresse der Quelle>
<p>hier steht das entsprechende Zitat</p>
</blockquote>
Inline Elemente
Kurzzitate können innerhalb eines Paragraphen stehen und werden mit einem q eingefügt.
Beispiel:
<p>This did not end well for me. Oh well,<q lang="fr">c'est la vie</q> as the French say</p>
So sieht das dann im Browser aus:
This did not end well for me. Oh well, "c'est la vie" as the French say.
Die Anführungszeichen werden automatisch vom user-agent, passend zur jeweiligen Sprache eingefügt. Texthervorhebungen wie Kursiv, oder Fett werden ebenfalls mit einem bestimmten Tag (in diesem Fall <em> und <strong>) realisiert.
Ausflug in die Vergangenheit (never use!)
In früheren Versionen von HTML hat man den Text schon dort formatiert. Dies ist mittlerweile mit CSS überflüssig und sollte wenn möglich nicht angewendet werden. Die Formatierungen waren zum Beispiel:
font face="…" size="…" - anderer nicht Standardisierter Font
b - für Bolt, stattdessen em (emphasised) oder strong
s/strike - durchgeschlichenes Element (delete nutzen)
u - unterstrichen
tt - Teletype oder Monospace
big/small - Größe des Textes