Hilfreiche Ratschläge

HTML-Bilder - ein Spickzettel für Anfänger

Pin
Send
Share
Send
Send


Letztes Mal haben wir uns die Auszahlungsoption angesehen. Bilder aus einem Ordner in PHP.

Im obigen Beispiel haben wir festgestellt, dass das Bild auf der Seite mithilfe von HTML-Tags angezeigt wird.
Und die Maße des Bildes haben wir direkt im HTML-Code eingetragen.

Jetzt zeige ich Ihnen, wie Sie die Bildgröße mithilfe des Stylesheets festlegen. Alle diese Daten werden in einer separaten Datei mit der Erweiterung css abgelegt und als Beispiel style.css bezeichnet.

Die Bildabmessungen werden durch die Parameter width und height festgelegt.
Um die Abmessungen für das Bild festzulegen und es über die CSS-Datei zu registrieren, müssen Sie eine Klasse für das src-Tag erstellen. Zum Beispiel schreiben>

Dann werden in der CSS-Datei die Dimensionen auf diese Weise geschrieben

Bei dieser Aufnahmeoption wird auf der Seite ein verzerrtes Bild angezeigt, wenn die tatsächliche Bildhöhe mehr als 170 Pixel beträgt, z. B. 400 Pixel. Es wird abgeflacht.

Um dies zu vermeiden, können Sie nur einen Parameter festlegen, die Bildbreite und die Standardhöhe, ohne die Bildproportionen automatisch zu verletzen:

Auf die gleiche Weise können Sie die Höhe und dann die Breite einstellen, wobei die Bildproportionen automatisch beibehalten werden.

Wenn wir die tatsächliche Größe des Bildes sehen möchten, ist es nicht erforderlich, die Größe des Bildes in der Datei anzugeben. Nur wenn wir ungefähr wissen, dass die Bildgröße die gesamte Seite einnimmt, sollten auf der Seite keine Tags vorhanden sein, die die Größe angeben.

Zum Beispiel eine Tabelle

oder block div

Wenn das Bild die gesamte Breite der Browserseite oder die gesamte Breite der Websitespalte einnehmen soll, muss die Breite in Prozent angegeben werden.

Auf diese Weise:

In diesem Beispiel haben wir die Option zum Festlegen der Bildgrößen mithilfe von CSS untersucht. Tatsächlich werden jedoch mit Hilfe der CSS-Datei alle Parameter für das Design der gesamten Site festgelegt. Es enthält alle Parameter für Größe, Aussehen, für alle Menüpunkte usw.

Für Webdesigner ist es eine schlechte Form, wenn Stile im HTML-Format zugeordnet werden. In der Vorlage werden nur Klassen und IDs für jedes Element registriert. Alle Stile werden in einer separaten CSS-Datei abgelegt.

Darüber hinaus können Sie auf ein Hintergrundbild nicht verzichten, wenn Sie ein überraschend schönes und einzigartiges Design Ihrer Website erstellen möchten. Wie ohne ihn Wie das geht, wird in diesem Abschnitt beschrieben, und wo das Hintergrundbild selbst platziert wird, finden Sie hier.

Und wenn Sie irgendwelche Meinungen über das gelesene Kommentarformular unten haben.

Wie binde ich ein Bild in HTML ein?

Um ein Bild in eine HTML-Seite einzufügen, wird ein einzelnes einfaches Tag verwendet:

Dabei ist xxx die Bildadresse. Befindet sich das Bild im selben Verzeichnis wie die Seite, sieht das Tag folgendermaßen aus:

Ein schneller und stabiler Internetzugang hat jedoch noch nicht alle Ecken der Welt erreicht, und es kommt vor, dass das Bild auf der Website einfach nicht geladen wird. Für solche Fälle gibt es das Konzept des alternativen Textes.

Es wird auf der Seite des Bildes zum Zeitpunkt seiner Unzugänglichkeit, des Ladens oder im Browsermodus "ohne Bilder" angezeigt. Es wird mit dem alt-Attribut des Tags hinzugefügt.

Ein Beispiel für das Hinzufügen von alternativem Text zu einer Bilddatei:

Größe von HTML-Bildern

Um die Anzeigegröße einer Bilddatei zu ändern, verwenden Sie die Tags height und width, wobei height die Höhe und width die Breite ist, gemessen in Pixel.

Bei Verwendung dieser Attribute reserviert der Browser zunächst Platz für den Grafikinhalt, erstellt ein allgemeines Seitenlayout, zeigt den Text an und lädt dann das Bild selbst.

Das Bild wird in einem Rechteck mit den angegebenen Größen platziert. Sind die Parameter kleiner oder größer als das Original, wird das Bild gestreckt oder komprimiert.

Wenn die Attribute height und width nicht verwendet werden, lädt der Browser das Bild sofort und verzögert die Anzeige von Text und anderen Seitenelementen.

Diese Parameter können sowohl in Pixel (die Bildgröße ist konstant und hängt nicht von der Bildschirmauflösung des Benutzers ab) als auch in Prozent (die Bildgröße hängt von der Bildschirmauflösung ab) angegeben werden.

Es ist zu beachten, dass Sie beim Ändern der Originalgröße des Bildes die Proportionen beibehalten müssen.

Geben Sie dazu nur den Wert eines der Parameter (Breite oder Höhe) an, und der Wert des zweiten Parameters wird automatisch berechnet.

HTML-Bildlayout

Wie bei vielen HTML-Tags

Bildlink

Verwenden Sie zum Erstellen eines Links in HTML das folgende Tag:

Um einen Grafiklink zu setzen, müssen Sie nur den Bild-Tag mit dem Link-Tag kombinieren.

Dies geschieht wie folgt:

Wie Sie sehen, kann die Grafikeinfügung ein Link sein und zu jeder Adresse weiterleiten, die in vollständiger oder gekürzter Version aufgezeichnet wurde, wenn Sie darauf klicken.

Wie kann ich ein Bild in HTML als Hintergrund festlegen?

Das Bild kann nicht nur als sichtbares Objekt in die Seite eingefügt, sondern auch als Hintergrund festgelegt werden. Um ein Bild als Hintergrund zu definieren, muss im Tag das Attribut background = ”xxx” angegeben werden, wobei xxx die Adresse des Bildes ist, das auf die gleiche Weise wie in den obigen Beispielen angegeben wurde.

Als Beispiel legen wir ein solches Texturbild als Hintergrundbild fest:

Diese Informationen zu den Tags und Attributen, die zum Einfügen des Bildes in die HTML-Seite der Site erforderlich sind, sind erschöpft.

Pin
Send
Share
Send
Send