HTML – Lektion 8. Arbeiten mit Bildern – img-Tag

Bilder auf Webseiten können auf zwei Arten verwendet werden: als Hintergrund und als eigenständiges Bild. Es wird empfohlen, drei Grafikformate zu verwenden: JPEG, GIF und PNG. Alle Browser unterstützen sie; andere Formate erfordern möglicherweise spezielle Tools.

Normalerweise werden alle Bilder für eine Site in einem separaten Ordner gespeichert, beispielsweise „images“. Und die Pfade zu den Bildern sind genauso geschrieben wie in den Links. Wenn Sie es vergessen haben, werfen Sie einen Blick darauf.

In allen folgenden Beispielen werden die Pfade zu den Bildern basierend auf der Tatsache geschrieben, dass sich die Bilder im Bilderordner und die Seiten im Site-Ordner auf derselben Ebene befinden.

Hintergrundbilder

Das Hintergrundbild füllt den gesamten Raum des Elements aus, für das es angegeben ist. Also durch Angabe im Tag Attribut Hintergrund="fon.gif", füllt das fon.gif-Bild das gesamte Browserfenster aus.

Beispielcode: Ergebnis

Vergessen Sie bei der Angabe eines Dokumenthintergrundbildes nicht, auch den Parameter anzugeben bgcolor. Dies liegt daran, dass der Benutzer möglicherweise das Laden von Bildern deaktiviert hat schöner Hintergrund er wird es nicht sehen. Dann verwendet der Browser den Parameter bgcolor.

Bilder einbetten

Der Tag wird verwendet, um Bilder auf der Seite zu platzieren , das über einen einzelnen erforderlichen Parameter verfügt src, die die URL des Bildes angibt.

Beispielcode:

img-Tag Rest des Dokumentinhalts

Ergebnis:

Restlicher Dokumentinhalt

Stimmt, der Text neben dem Bild sieht nicht besonders schön aus.

Damit unsere Bilder so aussehen, wie wir es möchten, müssen wir sie ausrichten. Und der Parameter wird uns dabei helfen ausrichten.

Dieser Parameter hat mehrere Bedeutungen. Schauen wir sie uns alle anhand von Beispielen an.

Beispielcode mit Parameter align="left"

img-Tag mit dem Parameter align="left" Das Bild befindet sich links und der Text fließt rechts darum herum, wobei dieser Text mehrere Zeilen einnehmen kann.

Ergebnis:

Links befindet sich das Bild, rechts fließt der Text darum herum, wobei dieser Text mehrere Zeilen umfassen kann.

Beispielcode mit Parameter align="right"

img-Tag mit dem Parameter align="right" Das Bild befindet sich rechts und der Text fließt links darum herum, wobei dieser Text mehrere Zeilen einnehmen kann.

Ergebnis:

Das Bild befindet sich auf der rechten Seite und der Text umfließt es auf der linken Seite. Dieser Text kann mehrere Zeilen umfassen.

Beispielcode mit Parameter align="top"

img-Tag mit align="top" Der obere Rand des Bildes wird am höchsten Element der aktuellen Zeile ausgerichtet. Das Bild scheint in die Zeile eingebettet zu sein. Wenn das Bild groß ist, wird die Linie auf diese Höhe erweitert.

Ergebnis:

Der obere Rand des Bildes wird am höchsten Element der aktuellen Zeile ausgerichtet. Das Bild scheint in die Zeile eingebettet zu sein. Wenn das Bild groß ist, wird die Linie auf diese Höhe erweitert.

Beispielcode mit Parameter align="texttop"

img-Tag mit align="texttop" Der obere Rand des Bildes wird am höchsten Textelement der aktuellen Zeile (dem Großbuchstaben der Zeile) ausgerichtet.

Ergebnis:

Der obere Rand des Bildes wird am höchsten Textelement der aktuellen Zeile (dem Großbuchstaben der Zeile) ausgerichtet.

Beispielcode mit Parameter align="middle"

img-Tag mit dem Parameter align="middle" Richtet die Bildmitte an der Grundlinie der aktuellen Zeile aus.

Ergebnis:

Richtet die Bildmitte an der Grundlinie der aktuellen Zeile aus. * Die Schriftart ist groß, um den Unterschied zwischen Mittel- und Bauchmitte deutlicher zu machen

Beispielcode mit Parameter align="absmiddle"

img-Tag mit dem Parameter align="absmiddle" Richtet die Bildmitte an der Mitte der aktuellen Zeile aus.

Ergebnis:

Richtet die Bildmitte an der Mitte der aktuellen Zeile aus.

Beispielcode mit Parameter align="unten"

img-Tag mit dem Parameter align="bottom" Richtet den unteren Rand des Bildes an der Grundlinie der aktuellen Zeile aus.

Ergebnis:

Richtet den unteren Rand des Bildes an der Grundlinie der aktuellen Zeile aus.

Beispielcode mit Parameter align="absbottom"

img-Tag mit dem Parameter align="absbottom" Richtet den unteren Rand des Bildes am unteren Rand der aktuellen Zeile aus.

Ergebnis:

Richtet den unteren Rand des Bildes am unteren Rand der aktuellen Zeile aus.

Wenn der Text unter dem Bild platziert werden soll, müssen wir das Tag verwenden
mit Parameter klar, was ein Umströmen verhindert. Umströmen kann mit verhindert werden rechte Seite(rechts), auf der linken Seite (links) und auf beiden Seiten (alle).

Beispielcode:

Verbot des Bildverpackens
Andere Elemente des Dokuments

Ergebnis:

Andere Elemente des Dokuments

Bildgrößen

Jedes Bild hat eine in Pixel angegebene Größe. Wenn Sie ein Bild auf einer Seite einbetten, müssen Sie möglicherweise die Größe des Originalbilds reduzieren.

Zu diesem Zweck das Tag Es gibt Parameter Breite- Breite und Höhe- Höhe. Sie werden in Pixeln oder Prozentsätzen (Prozentsatz der Bildschirmbreite) angegeben.

Wenn Sie ein Bild laden, skaliert der Browser Ihr Bild automatisch auf die angegebenen Breiten- und Höhenparameter. Bedenken Sie jedoch, dass eine ungenaue Einstellung der Parameter zu einer Veränderung der Proportionen des Bildes und damit zu dessen Verzerrung führen kann.

Beispielcode:

Ergebnis:

Bilder vom Text trennen

Sie haben wahrscheinlich bemerkt, dass sich der Text sehr eng an die Bilder anlehnt. Es ist nicht immer schön. Es gibt Möglichkeiten, dieses Problem zu lösen hspace- horizontale Einkerbung und vspace- vertikaler Einzug. Einrückungen werden in Pixel angegeben.

Beispielcode:

Das img-Tag ist eingerückt. Der restliche Dokumentinhalt bleibt nicht mehr am Bild hängen.

Ein Bild einfügen

Ein ungepaartes Tag wird verwendet, um ein Bild in ein HTML-Dokument einzufügen , das an der Stelle im Dokument platziert wird, an der das Bild eingefügt werden soll. Dieses Tag verfügt über einen erforderlichen Parameter src, dessen Wert den Pfad zum gewünschten Bild im Verzeichnis Ihrer Site angibt.

So platzieren Sie beispielsweise ein Bild auf einer Seite:

Die folgende Zeile wird an der richtigen Stelle im Dokument platziert:

Dadurch erkennt der Browser das Stammverzeichnis der Site www.mysite.com es gibt ein Unterverzeichnis Bild 1.png

Hier haben wir den vollständigen Pfad (bzw absolute Adresse) zum Bild. Können Sie das angeben? relative Adresse Bilder:

Der Browser interpretiert diese Zeile wie folgt: In dem Verzeichnis, in dem sich dieses HTML-Dokument befindet, gibt es ein Unterverzeichnis Bild, es enthält ein Bild mit dem Namen 1.png, die auf der Seite platziert werden soll.

Hier ist ein Beispiel für die Angabe einer relativen Bildadresse, wenn Ihre Site eine komplexere Struktur hat und das vorherige Beispiel nicht geeignet ist:

Der Browser interpretiert diese Zeile wie folgt: eine Kombination von Zeichen ../ bedeutet, dass Sie von dem Verzeichnis, in dem sich dieses HTML-Dokument befindet, eine Ebene nach oben gehen müssen; und dann wie im vorherigen Beispiel: In dem Verzeichnis, in dem wir uns befinden, gibt es ein Unterverzeichnis Bild, es enthält ein Bild mit dem Namen 1.png, die auf der Seite platziert werden soll.

Aus Sicherheitsgründen ist es vorzuziehen, die relative Adresse des Bildes anzugeben, außer in Fällen, in denen Sie ein Bild auf einer anderen Website auf Ihrer Seite platzieren.

Bildabmessungen

Die Größe jedes Bildes wird durch zwei Parameter angegeben: Breite und Höhe. Am Tag Es gibt entsprechende Parameter: Breite Und Höhe. Diese Parameter nehmen Werte in Pixel (px) an.

Sie können die tatsächlichen Abmessungen des Bildes festlegen:

Dies ist nicht notwendig, aber nützlich, weil... beschleunigt den Ladevorgang einer Seite durch den Browser geringfügig (der Browser muss diese Werte nicht selbst berechnen). Wenn die Bildabmessungen sofort in den Tag-Parametern angegeben werden , dann wird diesem Bild Platz auf der Seite zugewiesen und die Struktur der Seite ändert sich beim Laden nicht mehr – der Text springt beispielsweise.

Oder Sie können das Bild durch Zuweisung von Parametern vergrößern oder verkleinern Breite Und Höhe andere Bedeutungen. Wenn Sie außerdem beide Parameter proportional ändern möchten, reicht es aus, nur einem von ihnen einen neuen Wert anzugeben und den zweiten einfach wegzulassen. Der Browser berechnet es automatisch.

Um unser Bild beispielsweise um das 1,5-fache zu vergrößern, können wir schreiben:

oder

Das Ergebnis wird das gleiche sein:

Mehr Optionen Breite Und Höhe kann Werte in Prozent annehmen. Aber! Bitte beachten Sie, dass es sich dabei um Prozentsätze der Browserfenstergröße handelt. In diesem Fall können Sie auch nur einen Parameter angeben und den zweiten weglassen.

Wenn wir beispielsweise möchten, dass das Bild genau die Hälfte unserer Seitenbreite einnimmt, müssen wir Folgendes schreiben:

Und wir bekommen:

Rahmen um das Bild

Am Tag Es gibt noch einen weiteren optionalen Parameter Grenze. Stellen Sie hiermit die Dicke des Rahmens um das Bild ein. Standardmäßig ist die Bildrahmendicke Null, d. h. kein Rahmen.

So können Sie beispielsweise unserem Bild einen 3 Pixel dicken Rahmen hinzufügen:

Das zeigt uns der Browser:

Die Rahmenfarbe entspricht der Textfarbe auf der Seite, die mit dem Parameter angegeben wird Text Etikett (Siehe Lektion 6. Seiteneigenschaften – Body-Tag-Parameter), die Standardfarbe ist Schwarz.

Und wenn Sie den Frame nicht sehen möchten, erzwingen Sie den Parameter Grenze Nullwert:

Alternativer Text

Alternativer Text wird vom Browser anstelle des Bildes angezeigt, bis es geladen wird. Oder anstelle eines Bildes, wenn es aus irgendeinem Grund nicht angezeigt wird.

Wann und ob das Bild geladen wird, alternativer Text wird angezeigt, wenn Sie mit der Maus über genau dieses Bild fahren.

Um alternativen Text hinzuzufügen, verwenden Sie die Option alt Etikett , dem ein Zeichenfolgenwert zugewiesen wird, der in Anführungszeichen eingeschlossen werden muss.

Sie können mehrzeiligen Alternativtext erstellen.

Fügen Sie dazu einfach einen Zeilenumbruch in das HTML-Dokument ein.

Text">

Bildausrichtung

Für ein Bild gilt wie für einen Absatz das Konzept der Ausrichtung am Text und anderen Bildern auf der Seite. Sie können den Ausrichtungstyp auch über den Parameter festlegen ausrichten Etikett .

Nachfolgend finden Sie eine Tabelle möglicher Parameterwerte ausrichten:

Optionen Texttop, Spitze, Mitte, Bauchmuskeln, Grundlinie, unten Legen Sie die vertikale Ausrichtung des Bildes fest. Und die Parameter links Und Rechts Teilen Sie dem Browser mit, auf welcher Seite der Text stehen soll umfließen Bild.

Füllen Sie das Bild auf

Um zu verhindern, dass der Text dicht an das Bild grenzt, können Sie einen Abstand um das Bild festlegen. Dies können Sie über die Parameter tun hspace(linke und rechte Polsterung) und vspace(Leerzeichen oben und unten) des Tags .

Das folgende Beispiel zeigt, wie Text ein Bild umfließt, wobei das Bild links ausgerichtet ist und 5 Pixel Abstand um das Bild herum vorhanden ist:

In der Stadt Stockholm, in der ganz gewöhnlichen Straße, im ganz gewöhnlichen Haus, lebt eine ganz gewöhnliche schwedische Familie namens Svanteson. Diese Familie besteht aus einem ganz gewöhnlichen Vater, einer ganz gewöhnlichen Mutter und drei ganz gewöhnlichen Kindern – Bosse, Bethan und Baby.

Hier ist das Ergebnis im Browser:

In der Stadt Stockholm, in der ganz gewöhnlichen Straße, im ganz gewöhnlichen Haus, lebt eine ganz gewöhnliche schwedische Familie namens Svanteson. Diese Familie besteht aus einem ganz gewöhnlichen Vater, einer ganz gewöhnlichen Mutter und drei ganz gewöhnlichen Kindern – Bosse, Bethan und Baby.

Ein Bild in Teile aufteilen

Es gibt Zeiten, in denen Sie ein großes Bild auf einer Seite platzieren müssen. Dann dauert das Laden der Seite aber sehr lange. Was zu tun?

Eines der Möglichen Der beste Ausweg besteht darin, das Bild in Stücke zu schneiden und mithilfe einer Tabelle auf der Seite zu platzieren. Damit das Bild wie ein Ganzes aussieht, müssen der Rand der Tabelle und alle Polsterungen innerhalb und zwischen den Zellen entfernt werden. Diese. den entsprechenden Tag-Parametern zuordnen

Nullwerte: Grenze="0", Zellenabstand="0", cellpadding="0".

Im folgenden Beispiel teilen wir das Bild in 4 Teile auf. So wird die Tabelle aussehen:

Und hier ist das Ergebnis:

Hallo zusammen!!! In diesem Artikel erfahren Sie, wie Sie ein Bild in ein HTML-Dokument einfügen. Es ist überhaupt nicht schwierig. Zunächst möchte ich Ihnen jedoch einige Empfehlungen zu den Bildern auf der Webseite geben.

Beratung: Lassen Sie sich beim Platzieren von Bildern auf einer Webseite nicht von animierten Bildern hinreißen, da dies die Aufmerksamkeit des Lesers vom Wichtigsten ablenken wird – dem Text. Es ist besser, normale Bilder ohne Animation zu verwenden.
Versuchen Sie, auf Ihren Webseiten einzigartige Bilder zu verwenden. Sie können lesen, wie Sie ein einzigartiges Bild erstellen und wunderschöne Bilder machen.

Lass uns anfangen.

Wie füge ich ein Bild in HTML ein?
Also, wie gesagt, es gibt hier nichts Kompliziertes, fügen Sie diesen HTML-Code hinzu.

kartinka ist der Name des Bildes
jpg ist die Erweiterung des Bildes. Die Erweiterung kann GIF, PNG, BMP sein.

Befindet sich das Bild im Bilderordner, sieht der Pfad zum Bild wie folgt aus:

Bilder – der Name des Ordners, in dem sich das Bild „kartinka.jpg“ befindet.

Wenn sich das Bild auf einer anderen Website befindet, sieht der Code wie folgt aus:

https://www.site ist die Site-Adresse.

Beispiel :

Fügen Sie dazu einfach das Bild zwischen das Link-Element ein:

Attribute für Bilder

ALIGN – Dieses Attribut dient dazu, das Bild horizontal umzubrechen oder auszurichten.
links - Linksbündig, der Text fließt nach rechts.
Rechts - Bei rechtsbündiger Ausrichtung fließt der Text nach links.

Ergebnis :

richtige Ausrichtung

HSPACE – horizontaler Abstand vom Bild (in Pixel).
VSPACE – vertikaler Abstand vom Bild (in Pixel).

Ergebnis :

Einrückungen aus dem Bild

HEIGHT – Bildhöhe (Pixel).
WIDTH – Bildbreite (Pixel).

Ergebnis :

TITEL - Dies ist der Titel des Bildes. Der Titel wird angezeigt, wenn Sie mit der Maus über das Bild fahren.

title="(!SPRACHE: Hallo zusammen - Seite!!!!}">

Ergebnis :

Bildtitel

RAND – dieses Attribut ist für die Größe des Randes um das Bild verantwortlich. In solchen Fällen erscheinen Rahmen, wenn Sie ein Bild verlinken. Wenn Sie das BORDER-Attribut auf Null setzen, wird der Rahmen nicht angezeigt.

Ergebnis :

Und wenn Sie den Randwert auf 5 ändern:

Ergebnis :

Als Hintergrund kann jedes beliebige Bild verwendet werden. Fügen Sie dazu das Hintergrundattribut zum Body-Tag hinzu.

Hintergrund="Ihr_Hintergrund.jpg">

Text kann auf einem Bildhintergrund angezeigt werden.

Beispiel :

Ergebnis :

Bild als Hintergrund

In diesem Sinne könnte ich das Thema „So fügen Sie ein Bild in HTML ein“ beenden, aber ich weiß, dass viele an der Frage interessiert sind, wie man das Bild zentriert.
Um das Bild zu zentrieren, müssen Sie nur diesen Trick anwenden:

Das ist jetzt alles sicher. Fahren wir mit der nächsten Lektion fort.

Wenn man im Internet unterwegs ist, sieht man es natürlich auf vielen Seiten diverse Bilder, Banner, Fotos, grafische Bilder. Heute lernen wir, wie man Bilder in eine HTML-Seite einfügt.

Das Hinzufügen eines Bildes erfolgt in zwei Schritten: Zuerst wird eine Grafikdatei in der erforderlichen Größe und im erforderlichen Format vorbereitet und dann über das Tag zur Webseite hinzugefügt: . Das HTML-Dokument selbst dient lediglich der Anzeige des erforderlichen Bildes ohne es überhaupt zu ändern.

Bei der Vorbereitung Ihrer Bilder sind einige Dinge zu beachten.

1. Da die Webseite über das Netzwerk geladen wird, ist dies ein wesentlicher Faktor Größe („Gewicht“) der Grafikdatei, eingebettet in ein Webdokument. Je kleiner es ist, desto schneller wird das Bild angezeigt.

2. Sehr oft müssen die physischen Abmessungen eines Bildes (Breite und Höhe) durch Breite und Höhe begrenzt (reduziert) werden. Stellen Sie die Breite beispielsweise auf nicht mehr als 700–800 Pixel ein. Andernfalls passt das gesamte Bild nicht in das Browserfenster und es werden Bildlaufleisten angezeigt.

Grafikformate für Websites

Die beiden Hauptformate, die am häufigsten für Webgrafiken verwendet werden, sind: GIF Und JPEG. Eigenschaften wie: Multifunktionalität, Vielseitigkeit, geringes Quelldateivolumen mit ausreichender Kapazität gute Qualität, bediente diese Formate guter Service, wodurch sie effektiv als Standard für Webbilder definiert werden.

Es gibt auch ein Format: PNG, das auch von Browsern beim Hinzufügen von Bildern unterstützt wird und in zwei Varianten erhältlich ist: PNG-8 Und PNG-24. Allerdings Popularität PNG-Format Die Erkennung ist den GIF- und JPEG-Formaten deutlich unterlegen.

Normalerweise wird im Stammverzeichnis ein separater Ordner für Bilder (Bilder) erstellt und alle Bilder für die Site darin abgelegt. Manchmal gibt es mehrere solcher Ordner (wenn die Site-Struktur dies erfordert oder die Navigation für Sie einfacher ist). Dieser Ordner heißt am häufigsten: Bild oder Bilder (Bilder). Schreiben Sie im Webseitencode den vollständigen Pfad zur Grafikdatei (in der sich das Bild befindet) sowie den Namen Diese Datei(Bilder), die Sie in das HTML-Dokument einfügen möchten.

Wir schreiben Code, um ein Bild in eine Webseite einzufügen

Um Bilder in ein HTML-Dokument einzufügen, verwenden Sie die in angegebene Konstruktion Auflistung 8.1. Dieser Code wird an der gewünschten Stelle auf der Webseite eingefügt (wo Sie das Bild sehen möchten).

Auf unserer Web-Seite zum Thema Autos habe ich zwei Bilder vorbereitet und eingefügt. Den Einbettungscode für das erste Bild finden Sie in Listing 8.1.

Auflistung 8.1.

So sieht das erste eingefügte Bild auf der Webseite der Website aus:

Und jetzt werde ich detaillierter kommentieren, was geschrieben steht Auflistung 8.1.

Das Bild selbst wird mit dem Tag „eingefügt“: img src. Der vollständige Eintrag sieht so aus: img src="img/mers1.jpg", Wo „img/mers1.jpg“– zeigt an, dass sich unser Bild im Ordner befindet: Bild, und der Name der Grafikdatei (Bild): mers1.jpg.

Im Prinzip reicht das bereits aus, um ein Bild auf einer Webseite einzufügen, die restlichen Parameter sind optional, ich empfehle aber dennoch, diese immer zu registrieren, Andernfalls kann es zu geometrischen Verzerrungen im Bild kommen.

Schauen wir uns die zusätzlichen Optionen an:

Grenze="0"– zeigt an, dass das Bild keinen Rahmen hat. Versuchen Sie, 0 in eine andere Zahl zu ändern, zum Beispiel in 1 , - entspricht der Dicke des Rahmens um das Bild herum 1 Pixel, 2 – entspricht der Dicke des Rahmens um das Bild von zwei Pixeln usw.

Wichtig! Wenn Sie planen, ein Bild als Link zu verwenden, geben Sie unbedingt den Wert an: Grenze="0".

Breite="400"– gibt an, dass die Bildbreite beträgt: 400 Pixel(Geben Sie eine reelle Zahl für die Breite Ihrer Bilder ein.)

Höhe="209"- gibt an, dass die Bildhöhe beträgt: 209 Pixel(Geben Sie eine reelle Zahl für die Höhe Ihrer Bilder ein.)

Wenn Sie keine Parameter angeben: Breite Und Höhe, dann kann es zu geometrischen Verzerrungen im Bild kommen.

hspace="20"– zeigt eine 20-Pixel-Einrückung des Textes um das Bild herum an.

align="left"– Dies ist ein Tag, den Sie bereits kennen. Das ist richtig, es bedeutet linksbündig, es kann auch die Bedeutung haben: Rechts- Richtige Ausrichtung.

alt="Vorderansicht des Autos" !}– Hier wird Alternativtext geschrieben, der angezeigt wird, wenn man mit der Maus über das Bild fährt.

Genauso werden wir auch das zweite Bild auf der Webseite „einfügen“, mit dem einzigen Unterschied, dass es rechtsbündig ausgerichtet wird.

Kommentare zu diesem Artikel (Lektion):

Sagen Sie mir bitte, wo genau soll ich den IMG-Ordner erstellen?

Der IMG-Ordner ist nur ein herkömmlicher Name. Sie können ihn beliebig nennen, sofern Sie ihn später verstehen. Sie können es der Einfachheit halber überall erstellen, indem Sie es im Stammverzeichnis erstellen und alle Bilder dort ablegen.

Die Sache ist, dass nicht das Bild angezeigt wird, sondern nur die Inschrift. Was kann falsch sein? Danke.

Schauen Sie sich Listing 8.1 oben genau an. Nimm alles für dich. Erstellen Sie im Stammverzeichnis (in dem sich alle HTML-Dateien Ihrer Site befinden) einen IMG-Ordner. Platzieren Sie alle Ihre Bilder in diesem Ordner. Ändern Sie in der Auflistung mers1.jpg in den Namen Ihrer Datei. Ändern Sie außerdem die Breiten- und Höhenwerte entsprechend den tatsächlichen Abmessungen Ihrer Datei. Viel Glück.

Vielen Dank, es hat alles geklappt.

Hallo. Ich habe die gleiche Situation wie mein Vorredner: Ich schreibe den Code wie deiner, ich ändere nur den Dateinamen: Anstelle von mers.1/jpeg füge ich den Link Mercedes/jpeg ein. Auf der Seite erscheint nur ein Fenster mit dem Aufschrift oben „Vorderansicht des Autos“, und es gibt kein Bild. Meiner Meinung nach kann der Browser den Pfad zum Foto nicht finden oder es ist nicht richtig geschrieben. HIER IST MEIN CODE: B

Schauen Sie sich Ihren img/mercedes/jpeg-Code genau an. Sie haben richtig verstanden, der Browser findet den Pfad zur Grafikdatei nicht. 2. Der Dateiname ist falsch. Sehen Sie, wie ich mers1.jpg habe

Nun, ich habe den Code kopiert und eingefügt, ich habe ein Oval ohne Bild, im Oval ist oben ein Link!

Hallo! Das Problem ist das gleiche, ich habe am selben Ort wie die Site-Dokumente einen Ordner namens img erstellt, Bilder mit dem Namen 1.jpg werden in diesem Ordner gespeichert, ich schreibe alles wie in deinem Beispiel.

Falls Ihnen aufgefallen ist, dass sich mein Bild im IMG-Ordner befindet

Ein sehr nützlicher Artikel für Anfänger-Webmaster. Der einzige Vorbehalt gegenüber dem „alt“-Attribut. Bezogen auf die Abbildung gibt der Artikel folgende Interpretation: „alt="Frontansicht des Autos" – здесь прописывается альтернативный текст который высвечивается при наведении мыши на картинку." Не совсем точно: для рисунка - это прорегатива атрибута title. alt - альтернативный текст, который отобразится, если у пользователя графика отключена или картинка не загрузилась; title - атрибут, позволяющий отображать всплывающее пояснение к картинке при наведении на неё курсора.!}

Hier ist mein Code WARUM WIRD DAS BILD AUF DIE SEITE GESTELLT, WENN DIE AUFGABE DAFÜR IN DER MITTE LIEGT?

Und wenn ich ein Bild von der Website einer anderen Person mache, stellt das dann nicht eine Verletzung des Urheberrechts dar?

Erklären Sie beim Auslegen, warum HTML-Dokument An den Server werden anstelle der Bilder Leerzeichen im Rahmen angezeigt. Allerdings waren die Bilder vor der Anzeige so, wie sie sein sollten.

Dmitry, Wunder geschehen nicht, du hast irgendwo einen Fehler gemacht, überprüfe alle Pfade zu den Bildern, d.h. wie die Bilder im Code geschrieben werden.

Das ist mein Code, alles wird auf der Seite angezeigt, außer dem Bild, ich habe den ganzen Tag auf jede erdenkliche Weise versucht, aber nichts. Bitte sag mir was zu tun ist

AndreyK, bitte kontaktieren Sie mich in meinem Brief. Ich kann überhaupt kein Bild einfügen, ich gebe alles richtig ein, aber nichts, nur der Rahmen und die Aufschrift erscheinen

Elvira, ich habe deinen Brief gelesen, ebenso wie alle anderen Kommentare und Briefe. Aber wo soll ich antworten... dem Dorf meines Großvaters???

Ich weiß nicht, warum alle so verärgert sind!? Sie müssen die Codes nur nicht kopieren und dann einfügen, sondern sie selbst schreiben und alles wird funktionieren ... hier ist der Text meines Bildes

Ich habe Ihren Eintrag kopiert, meine Werte eingefügt – da ist ein Bild. Dann tippe ich unten (manuell) das Gleiche ein – da ist kein Bild – was für ein Wunder?

AndreyK, sag mir bitte, wo ist der Fehler? Egal wie oft ich es versuche, es funktioniert nicht((

Andrey, sag mir, warum ich das Bild nicht sehen kann. Mein Code: Es gibt eine Inschrift, aber kein Bild. Meine Adresse: [email protected] Danke.

Ich habe auch lange gelitten, aber es hat funktioniert! Tatsächlich muss der imj-Ordner in einem HTML-Dokument geöffnet werden.

Ich werde es auf jeden Fall versuchen, danke

eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee

Ich habe auch lange gelitten, es stellte sich heraus, dass sich der Ordner mit den Bildern am selben Ort wie index.html befinden sollte, danke Elena

Andrey Ich füge ein:

Andrey Ich füge ein: und ich habe kein Bild im Dokument, nur eine Inschrift!!! Meine Adresse: [email protected]

mein Code...auch kein Bild. Der IMG-Ordner befindet sich im selben Ordner wie der Index ... Bitte helfen Sie. [email protected] Danke!

Nun, ich weiß nicht. Ich habe alle Kommentare gelesen. Ich habe alles versucht. Ich habe meine Informationen kopiert und eingefügt. Nichts funktioniert. Der Ordner mit den Bildern (img) befindet sich am selben Ort wie index.html. Aber es gibt kein Bild. Stattdessen gibt es ein rotes Kreuz und eine Aufschrift. Ich arbeite im IE-Browser. Folgendes habe ich eingegeben:

Ich habe mir anstelle des Fotos in der Lektion den HTML-Code der Seite angesehen: Der Code auf der Seite unterscheidet sich von dem in der Auflistung. Warum? und übrigens ist auf der Seite der Code „mers1.jpg“ unterstrichen. Beim Kopieren mit Unterstreichung ist ein Fehler aufgetreten. Ich habe versucht, es so einzufügen. Immer noch kein Bild. Was ist los?

Wir fragen uns, wir antworten uns. Ich habe lange gelitten und das Bild wurde nicht eingefügt. Es stellte sich heraus: 1, anstelle des src-Tags hatte ich srk 2. Ich war verwirrt, als ich den Pfad zum Bild zusammenstellte. Ich habe den Ordner in IMG umbenannt und alles hat funktioniert. Ich habe fast zwei Tage damit verbracht, aber es hat sich gelohnt.

Alles Liebe, aber jetzt wirst du dich für den Rest deines Lebens daran erinnern :) Ich mache natürlich Witze, sei nicht beleidigt. Aber im Ernst: Wenn jemand keine Absenderadresse hinterlässt, ist es für mich fast unmöglich, ihm zu helfen.

Hallo, sag mir, wie ich ein Bild oben, das zweite unten links und das dritte unten rechts platziere))))

..........Was ist mein Fehler, weil ein Bild fehlt?

Alles im Code ist korrekt, wenn nichts durcheinander ist, sollte alles funktionieren. Schreiben Sie jedoch den Namen der Datei (Bild) in englischen Buchstaben. Viele Server akzeptieren das lateinische Alphabet nicht.

Aber hier ist das Merkwürdige: Während ich dem Ordner verschiedene Namen gab, wollte das Bild nicht angezeigt werden, obwohl der Pfad korrekt geschrieben war. Sobald ich IMG anrief, erschien sie sofort. Was ist der Haken?

Marina, es gibt keinen Trick oder Provokation :). Im Code von Listing 8.1. Es wird angezeigt, dass sich dieses Bild im Ordner: img befindet. Wenn Sie den Namen des Ordners für Bilder auf Ihrem Host ändern und ihn dann in der Liste ändern, ist das der ganze Trick.

Ich versuche ein Bild einzufügen!!! Ich schreibe alles mit einem Notizblock auf, ich mache alles richtig, vielleicht lohnt es sich nicht, einen Notizblock zu verwenden??

Und ich öffne alles in Mozilla Fire Fox spätestens))

Der Pfad meines Bildes ist C:Dokumente und EinstellungendenisDesktopkoffevinogradwwwImg und das Bild selbst heißt gif, außerdem enthält der Name 1.gif...Ich mache das im Editor

Ich habe es getan und der vollständige Pfad wird nicht angezeigt. Mozilla sieht das Explorer-Foto nicht und markiert es mit einem roten Kreuz

Denis, benenne den IMG-Ordner in img um, d.h. alles in Großbuchstaben, und benennen Sie auch den Pfad dorthin um. Auf vielen Servern wird die Großschreibung nicht korrekt angezeigt.

Ich habe immer noch die gleiche Frage: Warum nicht Bilder, sondern nur die Inschrift. Ich habe einen separaten Ordner für die Site erstellt: Er enthält eine Webseite und eine Zeichnung. Eingefügt: HILFE WAS IST MEIN E-Mail-FEHLER: [email protected]

Wie erstellt man ein Bild so, dass es vergrößert oder verkleinert werden kann?

Aus irgendeinem Grund ist das Bild bei mir auch nicht zentriert. Was ist der Haken? Der Code sieht so aus:

Wir hoffen, dass dieser Artikel für Sie nützlich sein wird. Fröhliches Lesen!

Bilder lassen uns sofort verstehen, wie interessant eine bestimmte Website oder ein bestimmter Artikel für uns sein könnte, sie erzeugen eine Stimmung und können ein Thema auf neue Weise offenbaren. Manchmal sagt ein Foto mehr als tausend Worte.

Aber Sie sollten nicht daran teilnehmen, wenn Sie weder Instagram noch einen Online-Shop haben. Es empfiehlt sich, dass die Bilder:

• waren informativ
• Passen Sie das Farbschema Ihrer Website an
• angemessen waren

Wenn Sie kein passendes Foto haben, können Sie das sogenannte verwenden Fotostock (Fotobank) – ein Ort, an dem viele Fotos, Illustrationen und Vektorgrafiken gespeichert sind. Es gibt viele solcher Ressourcen, Sie haben vielleicht sogar von einer der größten gehört – Shutterstock, aber die Downloads dort sind kostenpflichtig.

Für diejenigen, die nicht gerne zu viel bezahlen, haben wir am Ende des Artikels vorbereitet Bonus- eine Liste mehrerer Fotobanken, in denen Sie eine riesige Menge hochwertiger, schöner Materialien absolut kostenlos herunterladen können :)

Bildformate

Im World Wide Web werden hauptsächlich drei Arten von Bildern verwendet:

GIF(Graphics Interchange Format - Bildaustauschformat)

Dies ist das erste Format, das im Internet verwendet wurde. Die Vorteile dieses Formats liegen in der Verfügbarkeit Animationen Dank der geringen Größe wird die Seite schnell geladen. Darüber hinaus unterstützt es die Transparenz. Nachteil - nur gebraucht 256 Farben(das ist eigentlich der Grund, warum die Größe klein ist), d.h. Es kann nicht für Vollfarbbilder verwendet werden.

jpeg, auch bekannt als jpg(Gemeinsame Fotoexpertengruppe - Gemeinsame Fotoexpertengruppe - dies ist der Name der Entwicklungsorganisation)

geeignet für die Erstellung hochwertiger Vollfarbbilder, Fotos. Da solche Bilder sehr groß sind, stellen sie in der Regel eine große Belastung für den Server dar. Wenn Sie ein JPEG komprimieren müssen (für ein geringeres Bildgewicht), empfehlen wir, die Größe des endgültigen Bildes zu übernehmen Vielfaches von acht , daher wird der Qualitätsverlust minimal sein.

png(Portable Netzwerkgrafiken - Tragbare Netzwerkgrafiken. Wird genauso ausgesprochen wie Ping, d. h. )

Dieses Format wurde ursprünglich für das Web entwickelt, d.h. Das Bild wiegt in der Regel wenig und verlangsamt die Seite beim Laden nicht. Dieses Format wurde erstellt, um das veraltete GIF zu ersetzen, unterstützt jedoch im Gegensatz dazu keine Animationen. Png-8, wie gif, verwendet nur 256 Farben. Format png-24 unterstützt 16 Millionen Farben, obwohl es schon ziemlich umfangreich ist. Png-32 enthält die gleiche Anzahl an Farben wie PNG-24 und ermöglicht Ihnen außerdem, ein Bild zu erhalten Mit transparenter Hintergrund , und Sie können den Grad der Transparenz anpassen. Beim Reduzieren der PNG-Größe kommt es zu keinem Verlust an Farbqualität.

Fassen wir zusammen

GIF- zur Animation

jpeg- für Fotos

png- für Icons, Buttons, Hintergründe, Logos, Screenshots, Zeichnungen, Texte, Fotos mit transparentem Hintergrund

Einfügen eines Bildes in eine HTML-Datei

Um der Seite ein Bild hinzuzufügen, verwenden Sie Etikett (aus dem englischen Bild - Bild, Bild). Dies ist ein einzelnes Tag und benötigt kein schließendes Tag. Dieses Tag enthält Attribute.

Attribut src(von der englischen Quelle - Quelle) gibt den Pfad zur Datei an (den Ort, an dem sich das Bild befindet). Wenn sich das Bild auf Ihrem Computer (die Website befindet sich noch in der Entwicklung) oder auf Ihrem Server befindet, verwenden Sie es relativer Link. Wenn das Bild aus dem Netzwerk stammt, ist ein absoluter Link erforderlich. Wie das geht, lesen Sie im Artikel „Links“.

Um also ein Bild mit Ihrer Webseite zu verbinden, müssen Sie Code wie diesen schreiben:

Alt-Attribut(von der englischen Alternative - Alternative) gibt den Text an, den der Benutzer sieht, wenn das Bild nicht geladen wird. Der Pfad ist falsch angegeben, das Bild wurde gelöscht, schlechtes Internet – die Gründe können viele sein und es ist wünschenswert, dass die Person versteht, was sich hinter diesem verhassten Symbol verbirgt.

Suchmaschinen achten sehr darauf, dass dieses Attribut ausgefüllt ist. Und der HTML-Validator (eine Ressource zur Überprüfung des Codes auf Richtigkeit) erkennt das Fehlen des Alt-Attributs als Fehler. Wenn alle Attribute werden ausgefüllt und wenn möglich auch mit Schlüsselwörtern versehen – die Sichtbarkeit Ihrer Seite wird deutlich erhöht, d.h. Es wird bei Suchanfragen häufiger angezeigt. Dies stammt aus dem Bereich SEO, und zu diesem Zeitpunkt reicht es für uns zu wissen, dass es ein solches Attribut gibt, und auf einer „lebenden“ Website muss es ausgefüllt sein. Während sich die Site auf unserer Festplatte befindet, kann sie leer bleiben.

Im folgenden Beispiel haben wir bewusst einen nicht vorhandenen Pfad für das Bild angegeben, damit Sie sehen können, wie das Alt-Attribut funktioniert

Höhe und Breite der Bilder

Sie können auch die Höhe und Breite des Bildes festlegen, wenn das Originalbild z.B. mehr als Sie brauchen.

In HTML5 empfiehlt es sich, dies mit CSS oder zu tun Stilattribut , so:

In diesem Beispiel haben wir 30 % der Breite genommen, nicht des Originalbildes, sondern der Größe des Browserfensters. Bei Breite = 100 % wird das Bild in voller Breite des Browsers geöffnet. Denken Sie an diese Funktion Prozent, als Maßeinheiten.

Hätten wir übrigens nur die Breite geschrieben, wäre das Ergebnis dasselbe gewesen, versuchen Sie es mit:

Sie können auch die Breite und Höhe festlegen Pixel. Bei unserem Panda, dessen ursprüngliche Größe 1196 x 796 Pixel beträgt, müssen wir die Proportionen beibehalten, damit das Tier beim Komprimieren nicht leidet, und hier kann man nicht auf einen Taschenrechner verzichten. Nehmen wir an, wir möchten die Größe des Bildes um das Dreifache reduzieren, dann müssen wir die Abmessungen auf 399 x 265 Pixel einstellen.

Bitte beachten Sie, dass es beispielsweise bei einer proportionalen Vergrößerung des Bildes ausreicht, nur einen Parameter anzugeben. Breite. Der Smart-Browser selbst berechnet die volle Größe des Bildes.

Versuchen Sie, diesen Code auszuführen, und sehen Sie sich das Ergebnis an:

Stellen Sie immer die Bildabmessungen ein. Normalerweise dauert das Laden von Bildern länger als der Rest des HTML-Codes. Wenn der Browser weiß, wie viel Platz er für Bilder reservieren muss, kann er mit dem Laden der Website fortfahren, ohne auf das Laden der Bilder warten zu müssen.

Eine kleine Mottenkugel

Wenn Sie zufällig am Code einer in HTML-4 oder sogar früher erstellten Website herumbasteln, werden Sie feststellen, dass die Bildgrößen mithilfe von Sonderfunktionen festgelegt werden Breitenattribute Und Höhe. Dies ist eine veraltete Methode, obwohl sie in HTML5 immer noch gültig ist. Wir empfehlen jedoch die Verwendung von Stil, weil Die Breiten- und Höhenattribute können durch interne oder externe Stile beeinflusst werden, die im Browser oder in Ihrer CSS-Datei gespeichert sind. Wir werden näher darauf eingehen, wenn wir uns CSS ansehen, schauen uns aber zunächst nur ein Beispiel dafür an, wie sich Stile auf die Höhen- und Breitenattribute auswirken.

In diesem Fenster gibt es 3 Registerkarten: Auf der ersten sehen Sie den HTML-Code, auf der zweiten den CSS-Code und auf der letzten – wie immer – das Ergebnis. Dies funktioniert so, als wäre die erste Registerkarte eine index.html-Datei, die zweite eine style.css-Datei und die dritte ein Browser. Nun sagt unser CSS, dass alle Elemente mit dem img-Tag eine Breite von 100 % haben. Die Standardgrößen der Breiten- und Höhenattribute werden in Pixel angegeben, sodass hier keine Einheiten hinzugefügt werden müssen.

Der Unterschied in den Ergebnissen ist offensichtlich :)

Auch in älteren HTML-Versionen wurden folgende Attribute verwendet:

ausrichten, mit dem das Bild horizontal oder vertikal ausgerichtet wurde.

hspace- Einrückung links und rechts des Bildes zum umgebenden Inhalt (zum Beispiel Text oder ein angrenzendes Bild)

vspace- Einrückung oben und unten vom Bild zum umgebenden Inhalt.

Grenze- Legen Sie die Dicke des Rahmens um das Bild fest (standardmäßig ist sie Null).

Heutzutage werden all diese Manipulationen (und noch viel mehr) mithilfe von CSS durchgeführt, daher haben wir uns entschieden, Sie hier nicht damit zu belästigen. Wenn Sie immer noch daran interessiert sind, wie Sie mit diesen Attributen arbeiten, schreiben Sie in die Kommentare, wir werden diesen Artikel hinzufügen :)

Platzieren eines Bildes im Code

Von dort aus platzieren wir unser Tag hängt davon ab, wie es im Browser angezeigt wird.

Beispiel Nr. 1 – vor dem Absatz:

Elemente wie

UND

beziehen auf Blockelemente . Sie beginnen immer in einer neuen Zeile und nehmen die gesamte verfügbare Breite des Browserfensters ein. Wenn Sie Erster sind , und danach ein Blockelement, zum Beispiel ein Absatz, wird dieser in die nächste Zeile verschoben.

Beispiel Nr. 2 – am Anfang des Absatzes

Dies ist ein Inline-Element, es passt in ein Blockelement und beginnt keine neue Zeile. Im obigen Beispiel wird der Text aufgrund des Codes um das Bild herum umbrochen innen registriert

Bildunterschriften für Illustrationen

Um ein Foto auf einer Seite zu markieren oder zu signieren, verwenden Sie Etikett