So fügen Sie Bildcode in HTML ein. Arbeiten mit Bildern in HTML (wie man ein Bild einfügt, seine Größe ändert, aus einem Bild einen Link macht). Legen Sie die Bildbreite und -höhe mithilfe der Attribute „Width“ und „Height“ fest

HTML-Tag, der für die Anzeige des Bildes verantwortlich ist

• HTML-Bild kann ein beliebiges Bild im PNG-, JPEG- und GIF-Format sein.
• Bild-HTML-Code definiert durch Tag .
• HTML-Bild kann der Hintergrund einer Webseite sein.
• HTML-Bild kann als Hyperlink definiert werden.

Platzieren Sie im Ordner D\My_first_site\ oder in einem anderen Ordner, in dem Sie eine index.html-Datei haben, ein Bild mit der Erweiterung, beispielsweise .jpg, und benennen Sie es nach Belieben, zum Beispiel xxx .

Einfügen eines Bildes in den HTML-Code einer Seite:

Etikett - ungepaart. Achten Sie auf die Art und Weise, wie es schließt.

Attribute und Werte

• - erforderlich, es gibt die Quelle des Bildes an.
• alt="" – definiert einen Alternativtext, einen Kommentar, den ein Suchroboter liest, wenn er den Inhalt einer Webseite analysiert. Es muss auch markiert werden.
• width="" – definiert die Breite des Bildes in Pixel.
• height="" – definiert die Höhe des Bildes in Pixel.

Geben Sie die tatsächlichen Abmessungen an – so behalten Sie die ursprüngliche Bildqualität bei.

Für die Webentwicklung sind drei Bildformate anwendbar: PNG (.png), JPEG (.jpg) und GIF (.gif). Adobe Photoshop ist ein spezielles Tool zum Erstellen von Grafiken für Websites. Es kann verwendet werden, um ein Bildformat in ein anderes zu konvertieren.

HTML-Bild | Einzüge horizontal und vertikal

oder der horizontale und vertikale Abstand zwischen Bild und Text

Ergebnis:

Attribute und Werte

• hspace="" – definiert horizontaler Abstand zwischen Bild und Text.
• vspace="" – definiert vertikaler Abstand zwischen Bild und Text.

HTML-Hintergrundbild

oder ein durch ein Bild definierter Seitenhintergrund

Wir haben folgendes Bild:

Schreiben wir den Code für eine separate Seite:

Die Hintergrund- und Hintergrundbildattribute werden in behandelt.

Ein Bild einfügen und seine Reihenfolge → ../images/primer-img.jpg → siehe .

HTML-Bild – Link

Beispielcode:

border="0" – löscht den Rand des grafischen Links.

oder alle möglichen Möglichkeiten, Bilder zu zentrieren

Beispielcode:

Was ist hier zu beachten? → Erstens die Tatsache, dass die Abmessungen angegeben sind – dies beschleunigt das Laden des Bildes. Zweitens werden die alt=""-Attribute geschrieben, was auch dann sehr wünschenswert ist, wenn kein alternativer Text vorhanden ist. Im ersten Fall wurde die Zentrierung definiert HTML Parameter und im zweiten - unter Verwendung der linearen Einbindung von Cascading Style Sheets.

Wenn Sie im Internet surfen, sehen Sie auf vielen Seiten natürlich verschiedene Bilder, Banner, Fotos und Grafiken. 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 ein Tag zur Webseite hinzugefügt: . Das HTML-Dokument selbst dient lediglich der Anzeige des erforderlichen Bildes ohne es zu ändern.

Bei der Bildvorbereitung gibt es einige Dinge zu beachten.

1. Da die Webseite über das Netzwerk geladen wird, ist ein wichtiger 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) in Breite und Höhe eingeschränkt (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

Es gibt zwei Hauptformate, die am häufigsten für Webgrafiken verwendet werden: GIF Und JPEG. Eigenschaften wie Vielseitigkeit, Vielseitigkeit, eine kleine Menge an Quelldateien mit ausreichend guter Qualität haben diesen Formaten gute Dienste geleistet und sie sogar zum Standard für Webbilder gemacht.

Es gibt ein anderes 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 ist die Popularität des PNG-Formats weitaus geringer als die der GIF- und JPEG-Formate..

Normalerweise wird für Bilder (Bilder) ein separater Ordner im Stammverzeichnis erstellt und alle Bilder für die Site werden diesem hinzugefügt. Manchmal gibt es mehrere solcher Ordner (wenn die Struktur der Site dies erfordert oder die Navigation für Sie einfacher ist). Dieser Ordner wird am häufigsten wie folgt bezeichnet: Bild oder Bilder (Bilder). Der vollständige Pfad zur Grafikdatei (in der sich das Bild befindet) wird in den Webseitencode geschrieben, ebenso wie der Name dieser Datei (Bild), die Sie in das HTML-Dokument einfügen möchten.

Schreiben von Code zum Einbetten eines Bildes in eine Webseite

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

Auf unserer We-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 trotzdem, sie immer vorzuschreiben, 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 in zwei Pixeln usw.

Wichtig! Wenn Sie planen, aus dem Bild einen Link zu machen, geben Sie unbedingt den Wert an: Grenze="0".

Breite="400"– gibt an, dass die Breite des Bildes beträgt: 400 Pixel(Geben Sie die tatsächliche Breite Ihrer Bilder ein).

Höhe="209"– gibt an, dass die Höhe des Bildes beträgt: 209 Pixel(Geben Sie die tatsächliche 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"– gibt einen Texteinzug um das Bild von 20 Pixeln an.

align="left"- Dies ist ein Tag, den Sie bereits kennen ... .. Richtig, es bedeutet linksbündig, es kann auch den Wert annehmen: Rechts- Richtige Ausrichtung.

alt="Vorderansicht des Autos" !}- hier wird der 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 ist.

Kommentare zu diesem Artikel (Lektion):

Können Sie mir bitte sagen, wo genau ich den IMG-Ordner erstellen muss?

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

Tatsache 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 es ganz für dich. Erstellen Sie im Stammverzeichnis (in dem sich alle HTML-Dateien Ihrer Site befinden) einen Ordner img . Platzieren Sie alle Ihre Bilder in diesem Ordner. Ändern Sie in der Auflistung mers1.jpg in den Namen Ihrer Datei. Ändern Sie auch die Werte für Breite und Höhe 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 einen Haufen Mercedes / jpeg ein. Auf der Seite erscheint nur ein Fenster mit die Aufschrift „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 registriert. HIER IST MEIN CODE: B

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

Nun, ich habe den Code kopiert und in mein Oval ohne Bild eingefügt. Im Oval oben ist 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 vor.

Wenn Sie bemerken, dass sich mein Bild im IMG-Ordner befindet

Sehr nützlicher Artikel für Anfänger „Webmaster“. Die einzige Bemerkung zum „alt“-Attribut. Bezogen auf die Abbildung im Artikel ergibt sich folgende Interpretation: „alt="Ansicht des vorausfahrenden Autos" – здесь прописывается альтернативный текст который высвечивается при наведении мыши на картинку." Не совсем точно: для рисунка - это прорегатива атрибута title. alt - альтернативный текст, который отобразится, если у пользователя графика отключена или картинка не загрузилась; title - атрибут, позволяющий отображать всплывающее пояснение к картинке при наведении на неё курсора.!}

Hier ist mein Code Warum ist das Bild also seitlich positioniert, obwohl 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 Urheberrechtsverletzung dar?

Erklären Sie, warum beim Hochladen eines HTML-Dokuments auf den Server leere Bereiche im Rahmen anstelle von Bildern vorhanden sind. Obwohl vor der Berechnung die Bilder so waren, wie sie sollten.

Dmitry, es gibt keine Wunder, 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 außer dem Bild wird auf der Seite angezeigt. Ich habe den ganzen Tag mit allen Mitteln versucht, aber nichts. Bitte sag mir was zu tun ist

AndreyK, bitte beziehen Sie sich auf meinen Brief. Ich kann in keiner Weise ein Bild einfügen, ich gebe alles richtig ein, aber in keiner Weise, es werden nur ein Rahmen und eine Inschrift angezeigt

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

Ich weiß nicht, warum alle es eilig haben!? Sie müssen die Codes nur nicht kopieren und dann einfügen, sondern 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. Als nächstes fahre ich das Gleiche (manuell) unten ein, es gibt keine Bilder – was für ein Wunder?

AndreyK, sag mir bitte, wo ist der Fehler? Wie viele haben es versucht, es funktioniert nicht ((

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

Es hat auch lange gedauert, 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

iiiiiiiiiuuuuuuuuuuuuuuuuuuum mein

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

Andrey, ich füge ein:

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

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

Nun, ich weiß nicht. Ich habe alle Kommentare gelesen. Ich habe alles versucht. Ich habe meine Daten 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 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. Das Kopieren mit Unterstreichung ist fehlgeschlagen. Ich habe auch versucht, es einzubauen. Immer noch kein Bild. Was ist los?

Wir fragen uns, wir antworten uns. Das Bild wurde lange Zeit 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 fand. Ich habe den Ordner in IMG umbenannt und alles hat geklappt. Ich habe fast zwei Tage damit verbracht. Aber es hat sich gelohnt.

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, können Sie mir sagen, wie man ein Bild oben, das zweite unten links und das dritte unten rechts platziert))))

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

Im Code ist alles korrekt, wenn nichts durcheinander ist, sollte alles funktionieren. Schreiben Sie jedoch den Namen der Datei (Bild) in englischen Buchstaben. Viele Server akzeptieren kein Latein.

Aber das Merkwürdige ist ... beim Aufrufen des Ordners mit anderen Namen wollte das Bild in keiner Weise erscheinen, obwohl der Pfad korrekt angegeben war. Sobald ich IMG anrief, erschien ich 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 verschreibe alles über einen Notizblock, ich mache alles richtig, vielleicht lohnt es sich nicht über einen Notizblock??

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

Der Pfad meines Bildes ist C:Dokumente und EinstellungenDenisDesktopkoffevinogradwwwImg und das Bild selbst heißt gif, der Name enthält auch 1.gif...Ich mache das im Editor tat und der vollständige Pfad wird nicht angezeigt. Mozilla sieht die Foto-Expoler-Hervorhebungen nicht 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. Viele Server zeigen Großbuchstaben nicht korrekt an.

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

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

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

Hallo, liebe Leser der Site-Site. Heute wenden wir uns einem interessanteren Thema zu, nämlich der Beilage Bilder. Damit unser Browser eine Seite mit einem Bild schnell laden und öffnen kann, benötigen wir ein OPTIMIERTES Bild (darüber, warum und wie Bilder optimiert werden). Um ein solches voroptimiertes Bild herunterzuladen, gehen Sie zu und speichern Sie dieses Bild, indem Sie mit der rechten Maustaste klicken und „Bild speichern unter“ auswählen.

Etikett und den Speicherort des Ordners mit Bildern

Um Bilder zu speichern, erstellen wir einen weiteren Ordner „Bilder“ in unserem HTML-Ordner und legen das Bild dort ab.

Versuchen wir, unser Bild mit einem Bild zwischen der Überschrift und dem ersten Absatz einzufügen. Dazu schreiben wir unser Tag in den Code . Dies ist eine Abkürzung für das englische Wort „image“ – ein Bild, und dies ist ein einzelnes Tag.

Das Tag selbst sagt dem Browser nicht viel. Daher müssen wir unbedingt die Attribute für das Tag angeben. Das wichtigste der Attribute ist das Attribut src – Quelle. Wir müssen die Quelle unseres Bildes angeben. In unserem Fall befindet sich das Bild im Bilderordner relativ zum HTML-Ordner. Diese. Wir müssen angeben, dass sich unser alarm.jpg-Bild im Bilderordner befindet. Und so sieht es aus.

Mit dieser Attributspezifikation für das Tag , geht der Browser, wenn er auf diesen Code stößt, zum Bilderordner und nimmt die Datei – das Bild alarm.jpg.

Aber das ist noch nicht alles. Es ist auch wünschenswert, die Breite und Höhe dieses Bildes anzugeben, da der Browser genau wissen muss, wie viel Platz er für dieses Bild zuweisen muss, und der gesamte Download schneller und vor allem ohne Blockversätze erfolgt.

Breiten- und Höhenattribute

Wenn wir die Abmessungen nicht angeben, zeigt der Browser das Bild auch korrekt an, es dauert jedoch etwas mehr Zeit, da er zuerst das Bild laden muss und erst danach bestimmen kann, wie viel Speicherplatz er zuweisen muss. Wenn Sie zunächst die Abmessungen für das Bild angeben, vereinfacht dies die Aufgabe für den Browser. Darüber hinaus passt der Browser durch Ändern der Bildgröße im Code auch die Größe entsprechend den angegebenen Abmessungen an.

Um die Größe des Bildes herauszufinden, klicken Sie mit der rechten Maustaste darauf und wählen Sie den Menüpunkt „Eigenschaften“. Gehen Sie als Nächstes auf die Registerkarte „Details“.

Wie Sie sehen, ist das Bild 307 Pixel breit und 450 Pixel hoch. Schreiben wir die Dimensionen in den Code:

alt-Attribut für alternative Beschriftung

Ein weiteres Tag-Attribut , was beim Hinzufügen eines Bildes unbedingt angegeben werden sollte – das ist alt. Es richtet sich an Internetnutzer, die die Anzeige von Bildern in ihrem Browser deaktiviert haben. Diese. Wenn Bilder im Browser deaktiviert sind, sieht der Benutzer anstelle unseres Bildes das Wort oder die Phrase, die wir für das Alt-Attribut schreiben. Darüber hinaus orientieren sich Suchmaschinen bei der Bestimmung des Wertes Ihrer Website am Alt-Attribut von Bildern, sodass dessen Einstellung obligatorisch ist.

Diese vier Attribute für ein Tag Es ist wünschenswert, beim Hinzufügen von Bildern zur Seite anzugeben. Ich werde noch einmal diese vier Attribute angeben: Quelle, Breite, Höhe und Alternativtext.

Schauen wir uns die Anzeige an:

Unsere Zeichnung erschien genau an der Stelle, an der sie hätte sein sollen. Wenn Sie jedoch bemerken, dass das Bild zwar nur 307 Pixel breit ist, weist der Browser ihm die gesamte Zeile zu. Sehr oft stellt sich die Aufgabe, den Text nach dem Bild umschließen zu lassen, d.h. stand mit ihr auf einer Linie. Eine solche Möglichkeit besteht. Die Umsetzung erfolgt mit dem uns Bekannten align-Attribut- Ausrichtung.

Das align-Attribut zum Ausrichten des Bildes

Dieses Attribut gilt für unser Tag . Für dieses Bild können wir die rechte Ausrichtung angeben ( Rechts), dann wird das Bild auf die rechte Seite des Bildschirms verschoben und der Text wird nach links umbrochen. Oder wir können die Linksausrichtung angeben ( links) – dann wandert das Bild auf die linke Seite des Bildschirms und der Text fließt nach rechts darum herum. Schreiben wir die Linksausrichtung für unser Tag .

Schauen wir uns nun an, was im Browser passiert ist.

Sie können sehen, dass der Text das Bild auf der rechten Seite umfließt, da wir dem Bild eine Linksausrichtung gegeben haben. Jetzt ändern wir die Ausrichtung zum rechten Rand.

Das Tag wird verwendet, um ein Bild zu einer HTML-Seite hinzuzufügen. Bild. Unterstützte Bildformate: PNG, GIF und JPEG. Zu den obligatorischen Attributen des Tags gehört das Attribut src, die die Adresse der Bilddatei angibt.

Eine einfache Möglichkeit, ein Bild in eine HTML-Site einzufügen:

Aber in dieser Form wird das Bild mit den Originalmaßen, ohne Ausrichtung, ohne zusätzliche Informationen angezeigt. Um ein Bild schöner und korrekter hinzuzufügen, müssen Sie daher zusätzliche Parameter verwenden. Betrachten wir sie genauer.

IMG-Tag-Attribute

Um ein Bild mithilfe eines Tags anzuzeigen Bild Folgende Parameter werden verwendet:

• Breite Höhe- gibt die Breite/Höhe des Bildes an (in Prozent oder Pixel);
• ausrichten- Bildausrichtung (rechts, links, Mitte);
• Grenze- bestimmt die Dicke des Rahmens um das Bild (in Pixel). Wenn das Attribut nicht explizit gesetzt ist, wird der Standardwert (border=0) verwendet;
• hspace/vspace– Gibt die Größe des horizontalen/vertikalen Abstands vom Bild zum umgebenden Inhalt an.

Betrachten wir nun, wie man ein Bild im HTML-Code erstellt:

Hier sind die Abmessungen in Pixel angegeben.

Responsive Bildgrößen mit HTML

Wenn Sie ein „Rubber“- oder „adaptives“ Website-Design erstellen, sollten Sie im HTML-Code des Bildes die Größe in Prozent angeben. Versuchen Sie, eine HTML-Seite mit dem folgenden Code zu erstellen (platzieren Sie zuvor ein Bild mit dem Namen „img.jpg“ neben der HTML-Datei) und ändern Sie die Größe des Browserfensters. Sie werden sehen, dass sich die Größe des Bildes abhängig von der Größe des Fensters ändert.

Absatz 1

Absatz 2

Im Nubex-Website-Builder können Sie mithilfe der Editor-Tools ein Bild hinzufügen. Mehr dazu erfahren Sie im Artikel.

Schauen wir uns als Nächstes an, wie Sie ein Bild in ein HTML-Dokument einfügen und dessen Anzeige anpassen. Zum Arbeiten benötigen Sie lediglich den oben genannten Editor und einen Browser.

Wenn Sie Notepad ++ dennoch nicht haben oder beim Herunterladen ein Problem auftritt und Sie von der Frage gequält werden: Wie fügt man im Notepad ein Bild in HTML ein?

Die Antwort ist einfach: Die Arbeit in einem normalen Notizblock unterscheidet sich nur dadurch, dass der Code nicht in verschiedenen Farben hervorgehoben wird, um die Lesbarkeit zu gewährleisten und den Code vom Text selbst zu trennen.

So fügen Sie ein Bild in eine HTML-Seite ein

Nach der Installation des Editors erscheint das entsprechende Element im Dropdown-Kontextmenü, wenn Sie mit der rechten Maustaste auf eine beliebige Datei klicken.

Um nun eine solche Datei zu bearbeiten, genügt es, das Kontextmenü aufzurufen, indem man mit der rechten Maustaste darauf klickt und dann „Mit Notepad++ bearbeiten“ wählt.

Mithilfe einer Testseite werden die Ergebnisse von Änderungen im Code beobachtet.

Um ein Bild in den HTML-Code einzufügen, wird ein einzelnes Inline-Tag verwendet Bild. Sein Hauptmerkmal ist die Quelle des Fotos.

Dabei kann es sich um eine beliebige Datei auf der Festplatte oder um einen Link zu einem im Netzwerk vorhandenen Bild handeln. Eingerahmt von Tags < p> p>.

Um ein Foto hinzuzufügen, müssen Sie die folgende Zeile eingeben:

So wird es im Editor aussehen:

Und so wird es auf der Seite angezeigt:

src gibt die Quelle des Bildes an. Ein Dateiname reicht aus, wenn sich die Bilddatei im selben Verzeichnis wie das HTML-Dokument befindet.

Wenn sich das Foto in einem anderen Verzeichnis befindet, müssen Sie den Pfad dazu angeben, beginnend mit dem Ordner, in dem sich die HTML-Datei befindet.

Beratung! Es ist wichtig zu berücksichtigen, dass der Pfad zur angegebenen Fotodatei keine kyrillischen Zeichen enthalten darf. Darüber hinaus ist beim Schreiben eines Dateinamens die Groß-/Kleinschreibung wichtig.

Als Quelle können Sie eine Abbildung aus dem Netzwerk verwenden. Dazu müssen Sie statt des Speicherorts auf der Festplatte lediglich einen Link dazu im Attribut angeben.

Dateipfadformattabelle

Um die Größe eines Bildes zu ändern, müssen Sie zwei Attribute hinzufügen: Breite Und Höhe. Der Wert wird auf die gleiche Weise wie jedes andere Attribut formatiert.

Nach dem Gleichheitszeichen müssen Sie die Größe in Pixel angeben.

Bei klar definierten Abmessungen der Abbildung wird diese auf der Seite wie folgt dargestellt:

Ein Bild ausrichten und bearbeiten

Wie füge ich ein Foto in HTML in der Mitte ein? Um die Position eines Bildes auf einer Seite zuzuweisen, verwenden Sie ausrichten im Zusammenhang mit dem Tag P.

Es gibt mehrere mögliche Werte: Center(Center), links(linker Rand) und Rechts(rechte Ecke).

So sieht das Bild auf der Seite aus, ausgerichtet auf die Mitte und den rechten Rand.

Wichtig! Um das Foto relativ zum Text statt zur Seite zu positionieren, muss das align-Attribut für das img-Tag verwendet werden. Die Werte sind die gleichen wie für das p-Tag-Attribut.

Abhängig vom angegebenen Wert ändert das Bild seine Position relativ zum Text.

Um ein Bild im Text zu platzieren, geben Sie einfach das Tag ein Bild(mit allen Rändern) in einem Textblock in .

Um einen Rahmen hinzuzufügen, verwenden Sie das Randattribut mit einem numerischen Wert, der die Dicke des Rahmens in Pixel angibt.

Um vertikale und horizontale Ränder festzulegen, verwenden Sie vspace Und hspace. Ihr Zahlenwert bedeutet den Abstand vom Text zum Bild, direkt in Pixel.

Im Beispielattribut vspace auf 50 Pixel eingestellt.

Die Größe des horizontalen Abstands gibt den Abstand an, den der Text haben wird, wenn er um das Bild gewickelt wird.

Zwei weitere nützliche Attribute - alt Und Titel. Der erste legt den Alternativtext zum Bild fest.

Wenn das Bild aus irgendeinem Grund nicht geladen wird, wird stattdessen der im Attributwert angegebene Text angezeigt.

Um die Fähigkeiten des Attributs auszuprobieren, können Sie die Datei aus dem im Code angegebenen Verzeichnis verschieben.

Als Attributwert angegebener Text Titel, zeigt einen Tooltip an, wenn Sie mit der Maus direkt über das Bild fahren. Im Code unterscheidet sich sein Aussehen nicht von anderen Attributen.

Nach dem Aktualisieren der Seite sieht das Ergebnis so aus:

Tag-Attributtabelle Bild

Nachdem Sie die oben genannten Informationen beherrscht haben, ist die Arbeit mit Bildern kein Problem mehr.

Das Hinzufügen, Formatieren und Platzieren von Bildern auf der Seite wird einfach und unterhaltsam sein.

Grundlagen von HTML. So fügen Sie ein Bild auf einer Webseite ein

So fügen Sie ein Bild in HTML ein – Bearbeitung, Ausrichtung, Attribute