Html Tags - Img - Bilder Und Grafiken In Webseite Einfügen

Trang chủ » Html Befehl Grafik Einfügen » Html Tags - Img - Bilder Und Grafiken In Webseite Einfügen

Có thể bạn quan tâm

logo Start | Webdesign | Galerie | Web-Tipp | Html-Tags | CSS | Tutorial | Impressum | Sitemap > Html-Tags - Bilder einfügen

hr-tag - Formatieren von Linien in Html

Die Verwendung von Linien ist eine einfache Möglichkeit eine Webseite in übersichtliche Abschnitte zu untergliedern. Die hier angeführten Attribute sollten aber wieder nur rein informatorischen Zwecken dienen und besser durch css ersetzt werden. Haben Sie nur eine kleine, private Website, die nicht häufig aktualisiert oder verändert werden muß und sich der Aufwandt css dafür zu lernen nicht lohnt (wobei wir der Meinung sind, dass css nicht so schwierig ist und sich der Aufwand in Grenzen hällt), können Sie die Attribute auch verwenden. Viele Browser stellen sie nach wie vor, mehr oder weniger zuverlässig dar. Der Internetexplorer, mit dem sehr viele Besucher unterwegs sind, hat kaum Probleme mit dem Darstellen von Linien, die über Attribute formatiert sind.
Html-Befehl Bedeutung
<hr > horizontale Linie
<hr width="50%" > horizontale Linie mit 50% Fensterbreite
<hr width="200" > horizontale Linie mit 200 Pixel Breite
<hr width="80%" size="5" > horizontale Linie mit 80% Fensterbreite und Höhe 5 Pixel
<hr size="20" width="200" align="left" > horizontale Linie linksbündig Höhe 20 Pixel, Breite 200 Pixel
<hr width="200" size="10" align="left" noshade > horizontale Linie Breite 200 Pixel, Höhe 10 Pixel, linksbündig, ohne Schatten
<hr width="80%" size="3" color="#FF0000"> horizontale Linie 80% Fensterbreite Höhe 3 Pixel, Farbe rot
Linien können auch als Grafiken eingeblendet werden, damit verschwindet der in verschiedenen Browsern angezeigte 3D-Effekt

Bilder in Html einfügen

Wollen Sie Bilder in Html einfügen, sollten Sie ebenfalls einer css-Formatierung den Vorrang geben. Es kann aber nicht schaden, zu wissen wie die Formatierung per html funktioniert um beispielsweise ältere Quelltexte zu verstehen und bearbeiten zu können. Verwenden Sie für die in diesen Beispielen enthaltenen Platzhalter "bild" oder "Dateiname" den Namen Ihrer einzubindenden Bilddatei. Um die Bilder mit Rahmen zu versehen oder zum Text auszurichten, können Sie entsprechende Attribute im img-Tag verwenden.
<img src ="bild.jpg" width="150" height="130" alt="Foto Schmetterling" > Foto SchmetterlingBild mit fester Breiten- und Höhenangabe
<img src ="bild.gif" width="150" height="130" border="5" alt="bild mit Rahmen" > bild mit RahmenBild mit fester Breiten- und Höhenangabe Rahmenstärke 5
<img src ="bild.gif" width="150" height="130" align="middle" border="5" alt="Text der angezeigt werden soll, wenn so wie hier das Bild fehlt" > Text der angezeigt werden soll, wenn so wie hier das Bild fehltBild mit fester Breiten- und Höhenangabe, Rahmenstärke 5 und alternativen Bildtext, am Text mittig ausgerichtet
<img src ="bild.gif" align="right" width="50" height="30" border="5" alt="Text der angezeigt werden soll, wenn das Bild fehlt" > Text der angezeigt werden soll, wenn das Bild fehltBild rechts ausgerichtet mit fester Breiten- und Höhenangabe, Rahmenstärke 5 und alternativen Bildtext
<center ><img src ="../bild.gif" border="2" width="50" height="30" alt="schmetterling Foto mittig" ></center > schmetterling Foto mittigfunktioniert bei zentriertem Bild nur so in den meisten Browsern
<div align="center" ><img src ="relativer Speicherort" border="2" width="50" height="30" alt="Bild css-formatiert mittig" ></div > Bild css-formatiert mittigfunktioniert bei zentriertem Bild nur so in den meisten Browsern - css-Formatierung - besser und neuer als vorheriges Bsp.

Html - Text am Bild ausrichten
<img src ="../bild.gif" align="top" width="50" height="50" border="1" alt="schmetterling text oben" > schmetterling text obenBild wird oben am Text ausgerichtet
<img src ="relativer Speicherort" align="middle" width="100" height="80" border="1" alt="schmetterling text mitte" > schmetterling text mitteBild wird vertikal mittig am Text ausgerichtet
<img src ="relativer Speicherort" align="bottom" width="50" height="50" border="1" alt="Bild schmetterling text unten" > Bild schmetterling text untenBild wird vertikal unten am Text ausgerichtet
<img src ="relativer Speicherort" align="bottom" width="50" height="30" border="1" vspace="15" alt="Bild vertical unten ausgerichtet" > Bild vertical unten ausgerichtetBild wird vertikal unten am Text ausgerichtet mit gleichmäßig verteiltem vertikalem linken und rechten Abstand zur Schrift
<img src ="relativer Speicherort" align="top" width="50" height="50" border="1" hspace="15" alt="Bild vertical oben" > Bild vertical obenBild vertikal oben am Bild ausgerichtet mit gleichmäßig verteiltem horizontalem linken und rechten Abstand zur Schrift
<br clear="right" > Zeilenumbruch der rechts Platz schafft
<body bgcolor="yellow" > oder <body background="img/Dateiname" > legt Hintergrund für die Webseite in gelb fest und ein Hintergrundbild, beides zusammen nur sinnvoll, wenn img transparente Stellen hat oder User die Bilder ausgeschalten hat
<bgsound="sound/Dateiname.wav" > spielt Hintergrundmusik ab, ohne Abschaltfunktion nicht zu empfehlen
> Start | Webdesign | Galerie | Web-Tipp | Html-Tags | CSS | Tutorial | Impressum | Sitemap

Từ khóa » Html Befehl Grafik Einfügen