Samstag, 30. September 2023

15:41

Anleitung Kapitel III.: Text und ( weboptimierte ) Grafiken einbinden

Text im Html-Dokument einbinden

Wenn alle Seiten angelegt sind, kann nun der Text eingebunden werden. Öffnen Sie dazu jeweils die zu bearbeitende Seite im Html-Editor. In der Html-Ansicht des Editors wird ersichtlich, wo die Inhalte einzufügen sind. Inhalts- oder Textabschnitte, die einer speziellen Formatierung oder Positionierung bedürfen, liegen häufig innerhalb eines <div>- bzw. <span>-Tags. Weiter unten finden Sie die wichtigsten Tags, die vorerst einmal ausreichen werden, um den Text in die Vorlagen einzubinden. Übrigens sind die Abschnitte, in die die Inhalte einzufügen sind, im Html-Text (Quelltext) bei allen Homepagevorlagen durch Kommentare gekennzeichnet.

BEISPIEL
Code Html-Dokument:

<html>
<head>
<title>Beispiel</title>
<link rel="stylesheet" type="text/css" href="css/beispiel.css">
</head>
<body>
<h1>Überschrift 1</h1>
<h2>Überschrift 2</h2>
<h3>Überschrift 3</h3>
<h4>Überschrift 4</h4>
<h5>Überschrift 5</h5>
<h6>Überschrift 6</h6>
<!-- Ich bin ein Kommentar, der normalerweise nicht auf der Browseroberfläche erscheint. -->
<p>Ich bin ein normaler Text in einem Absatz.</p>
<div>Ich bin eine absolut positionierte Div-Box und befinde mich da, wo Sie mich nicht vermuten. Sie können mich sogar auch scrollen, obwohl ich kein Iframe bin.</div>
<p>Ich bin ein <span>hervorgehobener Textabschnitt</span> ...</p>
<table>
  <tr>
    <td>Ich darf nur in der Zelle einer Tabelle geschrieben werden und habe einen Rahmen sowie eine andere Hintergrundfarbe erhalten.</td>
  </tr>
</table>
</body>
</html>

Code für den CSS-Style:

body  { background: #C42460; font: normal 12px arial, tahoma; }
table { background: #FFF; border: 1px solid #000; padding: 5px; margin-top: 25px; }
div   { background: #000; color: #FFF; height: 60px; width: 150px; border: 1px solid #FFF; overflow: auto; position: absolute; left: 120px; top: 60px; padding: 5px; }
span  { background: #000; color: #FFF; padding: 1px 2px; border: 1px solid #FFF; }
h1    { font-size: 20px; }
h2    { font-size: 18px; }
h3    { font-size: 16px; }
h4    { font-size: 14px; }
h5    { font-size: 13px; }
h6    { font-size: 12px; }
h1, h2, h3, h4, h5, h6 { margin: 2px; }

Beispiel im Browser ansehen.
Mehr zur Formatierung mit CSS erfahren Sie auf der nächsten Seite in Kapitel IV.

Grafiken für das Web vorbereiten und optimieren

Bevor Sie Ihre Fotos oder Grafiken in die Html-Dokumente einbinden, die für Ihre Webseite vorgesehen sind, sollten Sie sich zuerst davon überzeugen, dass sich alle Grafiken bereits im Webordner 'images' befinden. Die Bilddateien sollten noch vor dem Upload zum Server physisch auf die Größe gebracht werden, in der sie auch ausgegeben werden, um dadurch die Ladezeit der Webseite bei Aufruf im Browser so gering wie möglich zu halten. Ein Bildbearbeitungsprogramm wäre aufgrund einer Optimierung von Grafiken zwecks Komprimierung bzw. Konvertierung deren sehr nützlich und sinnvoll. Häufig reicht hierfür schon eine kostenlose Software ( Freeware ) für Bildbearbeitung völlig aus.

Beispiel: Es liegt eine Grafikdatei in der Bildgröße von etwa 3000 x 2000px im JPG-Format vor, die unbearbeitet einen Speicherplatz von ca. 750 KB einnimmt. Nun wird die Bilddatei auf das Ausgabeformat von 300 x 200px gebracht, wobei sie nun mit einer Bildqualität von 'Mittel' wieder in dasselbe Dateiformat (*.jpg) abgespeichert werden soll. Nach der angewandten Komprimierung hat die Grafik dann nur noch einen Speicherbedarf von ca. 25 KB. Der dadurch entstandene Qualitätsverlust ist relativ gering und sollte aufgrund einer optimaleren Ladezeit, der optisch nur minimal wahrnehmbar ist, mit einkalkuliert werden. Experimentieren Sie selbst ein wenig bis das optimalste Ergebnis erreicht ist!

Weboptimierte Grafiken - wieso ist das so wichtig? Grafiken, die nicht oder nur minimal optimiert sind, können für Ihre Webseite fatale Folgen bzgl. der Besucherzahl nach sich ziehen, das häufig auf eine zu hohe Ladezeit zurückzuführen ist. Versetzen Sie sich selbst einmal in die Lage, wenn eine von Ihnen aufgerufene Seite einfach nicht laden will - Was tun Sie dann? ... mit höchster Wahrscheinlichkeit warten Sie nicht länger als etwa 10 Sekunden und ist die Seite bis dato nicht geladen, klicken Sie sie möglicherweise ab. Vermutlich kehren Sie auch zu keinem späteren Zeitpunkt auf diese Seite zurück. Genau der selbe Fall könnte auch bei Ihrer Webseite eintreten, sofern Sie diesen Faktor unberührt lassen. Tun Sie sich also selbst einen Gefallen, indem Sie die für Ihre Homepage vorgesehenen Grafiken optimieren - Ihre Besucher werden es Ihnen mit einem höheren Traffic danken!

TIPP: Um die Ladezeit im Browser möglichst gering zu halten, sollte die Grenze von 50 KB pro Seite nicht überschritten werden. Dabei sind alle dort eingebundenen Elemente wie der Html-Text, Grafiken, Scripte etc. zu berücksichtigen.

Wer möchte, kann das auch über folgenden Ladezeit-Checker überprüfen - im Übrigen finden Sie dort auch weitere interessante sowie nützliche Online-Tools!

JPG, GIF oder PNG?

Für das Web sind Grafiken nur in den Dateiformaten wie JPG, GIF oder PNG geeignet. Maßgebend bei der Entscheidung ist die Auswahl des richtigen Formats über Ladezeit und Qualität der Grafik. Nachfolgend sind die Unterschiede der Formate aufgeführt, um Ihnen die Entscheidung ein wenig zu erleichtern:

Mit bis zu 16,7 Millionen Farben kann eine Grafik im JPG, bzw. auch JPEG (Joint Photographic Experts Group) genannt, gespeichert werden. Es lässt sich relativ gut komprimieren, hat aber den Nachteil, dass der Qualitätsverlust bei einer zu starken Komprimierung ziemlich hoch sein kann. Transparente Grafiken sind beim JPG tabu und werden daher nicht unterstützt. Geeignet sind Grafiken wie Fotos von hoher Bildqualität, mit filigranem oder stark strukturiertem Muster sowie welche mit Farbverläufen.

Das GIF (Graphics Interchange Format) lässt sich verlustfrei komprimieren wie auch das PNG. Der Nachteil jedoch ist, dass es maximal bis nur zu 256 Farben pro Bild speichern kann. Für Grafiken von sehr hoher Bildqualität wie Fotos oder Grafiken mit Farbverläufen sollte es besser nicht zum Einsatz kommen. Das Format eignet sich eher für Grafiken wie Buttons, Icons, Cliparts sowie welche mit Schrift. Übrigens lassen sich mit GIFs auch Animationen realisieren, indem mehrere, leicht voneinander abweichende Bilder in einer einzigen Datei gespeichert werden, um sie im Browser beweglich darzustellen. Außerdem unterstützt das GIF transparente (nur binäre also 100%ige Transparenz) Hintergründe von Grafiken, allerdings erst mit dem neueren 89er-Format (im älteren 87er-Format noch nicht).

Das PNG (Portable Network Graphics) vereint alle Vorteile vom GIF und JPG und wurde speziell für den Einsatz im WWW entwickelt. Es kann verlustfrei komprimiert werden und kann ebenfalls 16,7 Millionen Farben speichern wie das JPG. Das Highlight: das PNG unterstützt die Alpha-Kanal-Transparenz, die allerdings nur in modernen Browsern korrekt dargestellt werden kann.

Weitere Infos zu Transparenzen & Alpha-Kanal-Transparenzen finden Sie hier oder bei Wikipedia!

Grafiken einbinden

Die bereits weboptimierten Bilder oder Grafiken können Sie nun mit Hilfe des Html-Editors einbetten oder weisen den entsprechenden Befehl direkt per <img>-Tag im Html-Dokument an, wie folgt:

<img src="images/pic.gif" alt="pic" width="230px" height="170px">

...

Tipp: Richtig ist die Schreibweise "170px", falsch wäre "170 px"! Es gilt allgemein, das zwischen einem Wert und der Maßeinheit kein Leerzeichen enthalten sein darf. Gleiches gilt auch für alle anderen Maßeinheiten, wie z. B. "em", "pt", "%" etc.!

Der <img>-Tag:

img (image) = Bild: Der <img>-Tag weist den Browser an, eine Grafik auszugeben.
src (source) = Quelle der Bilddatei: Mit 'src' wird dem Browser übermittelt, wo sich die Bilddatei befindet.
alt = alternativer Text des Bildes: Ein Text, der anstatt der Grafik angezeigt wird, falls das Bild nicht geladen werden kann oder nicht vorhanden ist.
width = Bildbreite, height = Bildhöhe
px = Pixel: Maßeinheit der Grafik

Der Text sowie die Grafiken sind nun in die Html-Dokumente eingebettet und es geht dann weiter auf der nächsten Seite mit Kapitel IV. Dort erhalten Sie einen kleinen Einblick über das Formatieren in einer extern ausgelagerten CSS-Datei.

Das könnte Sie vielleicht auch interessieren:
[ Transparenzen & Alpha-Kanal-Transparenzen ]

zurück
 weiter



© 2007 - 2023 Copyright by homepage-vorlagen-webdesign.de | Hosted by 1&1 Internet SE

Diese Seite wurde zuletzt am 02.06.2018 20:16 aktualisiert.