Html-Tags - Bilder einfügenhr-tag - Formatieren von Linien in HtmlDie 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ügenWollen 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" > |  Bild mit fester Breiten- und Höhenangabe |
| <img src ="bild.gif" width="150" height="130" border="5" alt="bild mit Rahmen" > | Bild 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" > | |
| <img src ="bild.gif" align="right" width="50" height="30" border="5" alt="Text der angezeigt werden soll, wenn das Bild fehlt" > | Bild 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 > | |
| <div align="center" ><img src ="relativer Speicherort" border="2" width="50" height="30" alt="Bild css-formatiert mittig" ></div > | |
Html - Text am Bild ausrichten |
|
| <img src ="../bild.gif" align="top" width="50" height="50" border="1" alt="schmetterling text oben" > | Bild wird oben am Text ausgerichtet |
| <img src ="relativer Speicherort" align="middle" width="100" height="80" border="1" alt="schmetterling text mitte" > | Bild wird vertikal mittig am Text ausgerichtet |
| <img src ="relativer Speicherort" align="bottom" width="50" height="50" border="1" alt="Bild schmetterling text unten" > | Bild 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 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 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 |
|
|
|