HTML - Bilder
Bilder sind sehr wichtig, um viele komplexe Konzepte auf einfache Weise auf Ihrer Webseite zu verschönern und darzustellen. Dieses Tutorial führt Sie durch einfache Schritte zur Verwendung von Bildern auf Ihren Webseiten.
Bild einfügen
Sie können jedes Bild in Ihre Webseite einfügen, indem Sie verwenden <img>Etikett. Im Folgenden finden Sie die einfache Syntax zur Verwendung dieses Tags.
<img src = "Image URL" ... attributes-list/>Das <img> -Tag ist ein leeres Tag. Dies bedeutet, dass es nur eine Liste von Attributen enthalten kann und kein schließendes Tag enthält.
Beispiel
Um das folgende Beispiel zu versuchen, lassen Sie unsere HTML-Datei test.htm und die Bilddatei test.png im selben Verzeichnis -
<!DOCTYPE html>
<html>
<head>
<title>Using Image in Webpage</title>
</head>
<body>
<p>Simple Image Insert</p>
<img src = "/html/images/test.png" alt = "Test Image" />
</body>
</html>Dies führt zu folgendem Ergebnis:
Sie können PNG-, JPEG- oder GIF-Bilddateien je nach Ihrem Komfort verwenden. Stellen Sie jedoch sicher, dass Sie den richtigen Bilddateinamen in angeben srcAttribut. Der Bildname unterscheidet immer zwischen Groß- und Kleinschreibung.
Das alt Attribut ist ein obligatorisches Attribut, das einen alternativen Text für ein Bild angibt, wenn das Bild nicht angezeigt werden kann.
Stellen Sie den Bildspeicherort ein
Normalerweise speichern wir alle Bilder in einem separaten Verzeichnis. Lassen Sie uns also die HTML-Datei test.htm in unserem Home-Verzeichnis behalten und ein Unterverzeichnis erstellenimages im Home-Verzeichnis, in dem wir unser Bild test.png aufbewahren.
Beispiel
Angenommen, unser Bildspeicherort ist "image / test.png", versuchen Sie das folgende Beispiel:
<!DOCTYPE html>
<html>
<head>
<title>Using Image in Webpage</title>
</head>
<body>
<p>Simple Image Insert</p>
<img src = "/html/images/test.png" alt = "Test Image" />
</body>
</html>Dies führt zu folgendem Ergebnis:
Stellen Sie die Bildbreite / -höhe ein
Sie können die Bildbreite und -höhe je nach Ihren Anforderungen mithilfe von festlegen width und heightAttribute. Sie können die Breite und Höhe des Bildes entweder in Pixel oder in Prozent seiner tatsächlichen Größe angeben.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Set Image Width and Height</title>
</head>
<body>
<p>Setting image width and height</p>
<img src = "/html/images/test.png" alt = "Test Image" width = "150" height = "100"/>
</body>
</html>Dies führt zu folgendem Ergebnis:
Stellen Sie den Bildrand ein
Standardmäßig wird das Bild von einem Rand umgeben. Sie können die Rahmenstärke in Pixel mithilfe des Rahmenattributs angeben. Eine Dicke von 0 bedeutet, kein Rand um das Bild.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Set Image Border</title>
</head>
<body>
<p>Setting image Border</p>
<img src = "/html/images/test.png" alt = "Test Image" border = "3"/>
</body>
</html>Dies führt zu folgendem Ergebnis:
Stellen Sie die Bildausrichtung ein
Standardmäßig wird das Bild auf der linken Seite der Seite ausgerichtet, Sie können es jedoch verwenden align Attribut, um es in der Mitte oder rechts zu setzen.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Set Image Alignment</title>
</head>
<body>
<p>Setting image Alignment</p>
<img src = "/html/images/test.png" alt = "Test Image" border = "3" align = "right"/>
</body>
</html>Dies führt zu folgendem Ergebnis:
Kostenlose Webgrafiken
Für kostenlose Webgrafiken einschließlich Mustern können Sie sich kostenlose Webgrafiken ansehen