HTML Bilder
Die Bilder sind sehr wichtig, um zu verschönern sowie viele komplexe Konzepte in einfache Art und Weise auf Ihre Web-Seite darzustellen. Dieses Tutorial führt Sie durch einfache Maßnahmen, um die Bilder in Ihre Web-Seiten verwenden.
Bild einfügen
Sie können einfügen jedes Bild in Ihre Web-Seite, indem Sie unter Verwendung<img> tag. Im Anschluss ist die einfache Syntax diesen Tag zu verwenden.
<img src="Image URL" ... attributes-list/>
Die <img> Tag ist ein leeres Tag, was bedeutet, dass sie nur Liste der Attribute enthalten und es keine Schließen Tag hat.
Beispiel
Um folgende Beispiel versuchen, lassen Sie uns halten unsere HTML datei test.htm Und Bild datei test.png im gleichen Verzeichnis:
<!DOCTYPE html>
<html>
<head>
<title>Using Image in Webpage</title>
</head>
<body>
<p>Simple Image Insert</p>
<img src="test.png" alt="Test Image" />
</body>
</html>
Dies wird folgendes Ergebnis produzieren:
Simple Image Insert
Sie können verwenden PNG, JPEG oder GIF-Bilddatei auf der Grundlage Ihrer Komfort , aber stellen Sie sicher, korrekte Bilddateinamen angeben, in src -Attribut. Bildname immer case sensitive.
Die alt -Attribut ist ein verpflichtend attribut , das Gibt an einen alternativen Text für ein Bild gibt, wenn das Bild kann nicht angezeigt werden.
Set Bildstelle
In der Regel halten wir unsere alle Bilder in ein separates Verzeichnis. Lassen Sie uns also halten HTML-Datei test.htm in unserem Home-Verzeichnis und erstellen Sie ein Unterverzeichnis Bilder in der Home-Verzeichnis, wo wir unser Bild test.png halten.
Beispiel
Unter der Annahme, unser Bild Lage 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="images/test.png" alt="Test Image" />
</body>
</html>
>Dies wird folgendes Ergebnis produzieren:
Simple Image Insert
Set Bild Breite / Höhe
Sie können die Bildbreite und Höhe auf der Grundlage Ihrer Anforderung unter VerwendungBreite und Höhe Attribute. Sie können Gibt an Breite und Höhe des Bildes in Bezug auf entweder Pixel oder als Prozentsatz der Originalgröße .
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Set Image Width and Height</title>
</head>
<body>
<p>Setting image width and height</p>
<img src="/de/html/images/test.png" alt="Test Image" width="150" height="100"/>
</body>
</html>
Dies wird folgendes Ergebnis produzieren:
Setting image width and height
Set BildGrenz
Standardmäßig Bild werden einen Rahmen um sie haben, können Sie die Rahmenstärke in Form von Pixeln angeben unter VerwendungGrenz Atribute. Eine Dicke von 0 bedeutet, kein Rahmen um das Bild.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Set Image Border</title>
</head>
<body>
<p>Setting image Border</p>
<img src="test.png" alt="Test Image" border="3"/>
</body>
</html>
Dies wird folgendes Ergebnis produzieren:
Setting image Border
Set Bildausrichtung
Standardmäßig Bild werden auf der linken Seite der Seite auszurichten, aber Sie können verwendungausrichtung Attribut, um es in der Mitte oder rechts eingestellt.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Set Image Alignment</title>
</head>
<body>
<p>Setting image Alignment</p>
<img src="/de/html/images/test.png" alt="Test Image" border="3" align="right"/>
</body>
</html>
Dies wird folgendes Ergebnis produzieren:
Setting image Alignment
Kostenlose Web-Grafiken
für Kostenlose Web-Grafiken einschließlich Muster, die Sie hineinblicken kann Kostenlose Web-Grafiken
