Bilder in Websites einbauen ist einfach – dass sie auch gut aussehen ist jedoch nicht trival. Mit einem kleinen Code-Schnipsel können Sie alle Bilder optimal einbauen. Das Layout wirkt professioneller. Hier mal zwei Beispiele: Der HTML-Code zum Einbau eines Bildes mit der Angabe von Höhe und Breite lautet:
<img src="Bildpfad/bild.jpg" width="100" height="80">
Wenn Sie Höhe und Breite angeben, weiß der Browser von vornherein wie viel Platz er freihalten muss, und baut die Seite gleich richtig auf. Wie Sie sehen wird das Bild jedoch nicht schön umflossen, sondern nur eine Zeile beginnt am Ende des Bildes. Darum sollten Sie den Quelltext immer um die folgende Standardangabe erweitern.
style="margin: 0px 5px 5px 0px; float:left; border:0;"
Der erste Bereich margin gibt die Abstände zum Text an: der erste Wert den Abstand nach oben, der zweite den Abstand nach rechts, der dritte den Abstand nach unten und der letzte den Abstand nach links. float=left gibt an dass das Bild links ist und umflossen wird, und border=0 bedeutet, dass wenn das Bild verlinkt ist kein störender Rand um das Bild gelegt wird. Im oberen Beispiel sehen Sie einen zusätzlichen Rahmen, der hier schwarz ist, aber auch blau oder rot sein könnte. Diesen Codeschnipsel sollten Sie abspeichern und immer parat haben. Natürlich lassen sich Bilder idealerweise über die Styles definieren;-)
Schlagwörter: CSS, HTML
Diese Artikel könnten Sie interessieren:
Firefox Addon StylishDas Firefox Addon Stylish ermöglicht es Ihnen Websites optisch so zu verändern wie Sie das möchten. So können Sie den Seitenhintergrund, Farben oder Schriftarten einfach [...]
Tabellen ohne Zeilenumbruch formatierenWer eine HTML-Tabelle sauber darstellen möchte hat oft das Problem, dass einzelne Spalten zu klein sind, und Texte oder Bezeichnungen in dieser Tabelle umbrechen. Die [...]
HTMLcolor erzeugt Farbcodes für Webdesign und CSSEin pfiffiges kleine Tool um sich die Farbcodes für seine Website zusammenzustellen ist HTMLcolor. Über drei Schieberegler verändern Sie die RGB-Anteile Ihrer Farbcodes. Sie können [...]
Fehler im Quellcode findenWichtig, ebenso für eine gute Darstellung, wie auch für ein gutes Ranking bei Suchmaschinen ist ein fehlerfreier Quellcode. Google & Co wissen es zu schätzen, [...]
NVU – kostenloser Web-EditorNVU ist ein kostenloses Werkzeug zum Editieren Ihrer Webseiten. Er basiert auf dem Composer von Mozilla.Das Programm selbst bietet Ihnen drei Möglichkeiten Ihre Website zu [...]
swa: Natürlich ist es sinnvoll den Speicher aufzurüsten. Dass es Geräte gibt bei denen das nicht geht ...
Timo: Ich tippe auch darauf das sich alle damit vertun!, denn eben habe ich auch die Klappe auf der Rücks ...
Metehan: Im Internet kursieren so viele Meinungen, man solle bei dem Gerät den Speicher auf 2 GB aufrüsten. ...
FibreFoX: Das ist ein toller Hinweis, um die Performance ein wenig zu optimieren, allerdings hat diese Optimie ...
Siggi: das ist ein tolles teil. leider bekomme ich diese eingabefeld-typen nicht richtig hin. ich möchte z ...
interdoc: So etwas suche ich schon lange, da ich mich nicht an die .htaccess heran wage.
Christian: Mag schon günstig sein, aber ob mit den Komponenten wirklich jemand etwas anfangen kann ist die and ...
Unter Social Media fallen so bekannte Dienste wie Facebook und Twitter. Ohne Kenntnisse von HTML kann jeder Inhalte veröffentlichen und mit Freunden networken.
Der Firefox ist der beliebteste Browser. Für ihn, aber auch für Google Chrome, gibt es eine Menge an Addons/Erweiterungen.
Fast jeder nutzt Windows. Mit den richtigen Tricks und Kniffen kann man sein System optimieren und beschleunigen.
Die Schwächen von Notebooks und Netbooks sind meist versteckt. Das gilt auch für PCs und Tablet-PCs.
Was meinen Sie dazu?