Um Webseiten und sogar ganze Seiten zu erstellenEs ist bekannt, dass eine spezielle HTML-Markup-Sprache (Hypertext Markup Language) verwendet wird, aber ohne Fotos und verschiedene Bilder wäre jede Seite einfach strukturierter und langweiliger Text. Deshalb wird ein spezieller Code verwendet, um der Site Bilder hinzuzufügen, der extrem einfach zu verwenden ist und es Ihnen ermöglicht, ein Bild an einer bestimmten Stelle auf der Seite in HTML einzufügen oder es als Hintergrund zu verwenden.
Um Code zu schreiben, müssen Sie sich entscheidenWelches Programm dafür? Jetzt gibt es eine große Anzahl von ihnen, eines der bekanntesten ist NotePad ++. Es hat eine Reihe von Funktionen, die sehr nützlich beim Schreiben von Code sind, ermöglicht es Ihnen, Fehler zu identifizieren und nicht in den Tags verwirrt zu werden. Wenn Sie jedoch nicht die Möglichkeit haben, spezialisierte Programme zu verwenden, können Sie einen einfachen Notizblock verwenden, der Code ändert sich nicht.
Nachdem Sie sich für ein Programm zum Schreiben von Code entschieden haben,Sie müssen verstehen, was Sie darin schreiben, wie Sie ein Bild in Notepad oder ein anderes Programm in HTML einfügen. Beginnen Sie mit dem Tag . Es ist dieses Tag, das das Bild im HTML-Dokument deklariert, es ist single und erfordert keine Schließung.
Wir haben in dem Code erklärt, den wir verwenden werdenBild, aber wir haben es noch nicht festgelegt. So, wie man ein Bild in HTML einfügt? Dazu benötigen wir das src-Attribut, das mit unserem Tag verwendet wird. Dieses Attribut gibt den Speicherort unseres Bildes an, unabhängig davon, ob es sich auf einer Site oder auf unserem Computer befindet.
Das -Tag hat ein anderes Attribut, alt.Es wird verwendet, um die Beschreibung des Bildes im Browser sichtbar zu machen, wenn das Bild selbst aus irgendeinem Grund nicht geladen werden kann. Seine Anwesenheit ist auch wünschenswert, damit sehbehinderte Menschen wissen können, welches Bild auf der Website vorhanden ist, weil der Text, der im Sinne dieses Attributs ist, von Bildschirmlesern gesprochen wird. Der endgültige Code mit den Attributen src und alt sieht wie folgt aus:
Unter anderem hat das -Tag ein anderesTitelattribut Wenn Sie mit der Maus über das Bild fahren, wird der alternative Text in einem Tooltip angezeigt. Diese Funktion wird jedoch nur vom Internet Explorer unterstützt, sodass solche Hinweise in anderen Browsern spezielle Plug-ins erfordern. Tooltips werden zusammen mit dem alt-Attribut verwendet, sie sind nicht erforderlich, aber wenn Sie sie verwenden, sieht der Code wie folgt aus:
Um ein Bild in den Text mit HTML einzufügen, haben wirherausgefunden. Aber was, wenn wir das Bild etwas mehr oder weniger machen wollen? Um dies zu tun, bietet HTML spezielle Attribute: Breite (Breite) und Höhe (Höhe). Die Werte dieser Attribute können entweder in Prozent oder in Pixeln angegeben werden. Wenn Sie die Breite in Pixel und die Höhe in Prozent festlegen, hat der Code die folgende Form:
Wenn Sie nur eines der Größenattribute angeben, dannDie Sekunde wird automatisch berechnet, aber um die Proportionen des Bildes zu erhalten. Wenn Sie beide Parameter angeben, ist es wichtig, sich daran zu erinnern, dass sich das Bild bei Überschreitung der ursprünglichen Größe ausdehnt und bei kleineren Abmessungen schrumpft.
Und wenn wir ein Bild nicht verwenden wollenText, und fügen Sie ein Bild im Hintergrund in HTML, wie es geht? Dazu benötigen wir das
-Tag, ohne das kein HTML-Dokument funktionieren kann. Es enthält alle sichtbaren Inhalte des Dokuments und seine Attribute können die Größe, Schriftfarbe und den Hintergrund festlegen. Es ist sehr einfach, ein Bild als Hintergrundbild in HTML einzufügen, dafür müssen wir das Hintergrundattribut verwenden. Dieser Code sieht folgendermaßen aus:
...
Bei der Gestaltung ist der Hintergrund der Webseite besserVerwenden Sie solche Bilder, mit denen Sie interessante visuelle Effekte erzielen können, die aber die normale Wahrnehmung des Textes nicht beeinträchtigen. Es ist jedoch zu beachten, dass Sie möglicherweise die Größe und Farbe Ihrer Schriftart ändern müssen, um das Lesen zu erleichtern.
Manchmal ist es notwendig, dass das Bild neben warText, der es auf die eine oder andere Weise umgeht. Aber wenn Sie ein Bild nur innerhalb der Linie einfügen, dann wird es grafisch hässlich aussehen, der Text wird unvorsichtig gebrochen. Wie fügt man ein Bild in HTML ein, so dass das Bild organisch in das Seitendesign passt? Dazu benötigen wir das align-Attribut des -Tags. Dieses Attribut kann zwei Werte annehmen: links und rechts.
Wenn Sie den Wert von links verwenden, wird das Bild links vom Text platziert und das rechte Attribut wird rechts davon verwendet. Dieser Code sieht folgendermaßen aus:
oder
Wenn der Text zwischen zwei Bildern liegen soll, sieht der Code wie folgt aus:
Und nach diesem Code wird der Text eingefügt, der zwischen diesen beiden Bildern geschlossen werden muss.
Bilder ermöglichen es Ihnen, die Website zu diversifizieren, zu machenes ist heller, attraktiver und einprägsamer, aber vergessen Sie nicht, dass zu viele Bilder das Laden der Website verlangsamen und vom Text ablenken werden.
