This page has been robot translated, sorry for typos if any. Original content here.

Arbeite mit Bildern

Arbeite mit Bildern

Webgrafiken spielen eine wichtige Rolle. Indem es die Monotonie langer Textseiten durchbricht, kann es einen Sinn für Kontext vermitteln, ein Element der Seitenästhetik sein oder als Werbung dienen (nicht zuletzt bei kommerziellen Aktivitäten). Mit allen Tugenden von Bildern können sie nicht missbraucht werden. Der Grund ist, dass die Mehrheit der Internetnutzer wegen ihrer hohen Kosten keinen Hochgeschwindigkeitszugang gewählt hat und eine große Anzahl von Bildern ihre exorbitanten Wartezeiten beim Laden verursachen, was zu einer "Grenze" der Geduld wird. Das optimale Verhältnis zwischen Grafikdateien beträgt 50-80 KB pro Seite. Um in diese Rahmen zu passen, Dateien im GIF- oder JPEG-Format zu komprimieren, können Sie fertige Bilder in diesen Formaten optimieren (nach dem Prinzip "Size-Quality").

Um zu den Beschreibungen der Werkzeuge der HTML-Sprache zu gelangen, die zum Platzieren von Bildern auf einer Webseite vorgesehen sind, sammeln Sie die notwendigen Bilder in einem Ordner. So sparen Sie viel Zeit.

Zum Einfügen von Bilddateien auf der Seite ist ein einzelnes <IMG> -Tag erforderlich . Hier sind seine Attribute:

  • SRC - gibt die Adresse des Bildes an. Betrifft immer das <IMG> -Tag
  • WIDTH - Bildbreite. (gemessen in Pixel (px))
  • HÖHE - Bildhöhe (px)
  • ALIGN - eine Möglichkeit, das Bild auf der Seite auszurichten (Werte links (links), rechts (rechts), oben (oben), unten (unten), Mitte (Mitte))
  • VSPACE - vertikaler Einzug von Text (px)
  • HSPACE - horizontaler Einzug aus Text (px)
  • ID oder NAME - weist einen Namen zu (wenn eine interne Verbindung zum Bild besteht)
  • BORDER - Rahmenstärke (px)
  • USEMAP - Referenzkarte
  • ALT - Kommentare, die sichtbar sind, wenn Sie den Mauszeiger über das Bild bewegen

Attribute für das <IMG> -Tag werden nach Bedarf angewendet, mit Ausnahme des ersten. Und der Code auf der Seite könnte so aussehen:

<IMG SRC = "img / tchk.gif" WIDTH = "5" HEIGHT = "5" HSPACE = "5" VSPACE = "5" BORDER = "0" ALIGN = "links">

Bitte beachten Sie , dass es kein schließendes Tag gibt </ img> .

Bildmaße sollten angezeigt werden - real, um eine falsche Darstellung von Bildern auf dem Bildschirm zu vermeiden.

Besonders hervorheben möchten wir das wichtige Attribut ALIGN . Mit seiner Hilfe wird das Bild auf dem Bildschirm positioniert:

  • relativ zum Text (der Bildcode wird in die <P> </ P> und <DIV> </ DIV> Container eingefügt und positioniert sich gegenseitig). Beispiel: <P ALIGN = "links"> <IMG SRC = " Adresse " ALIGN = "rechts"> Text </ P>
  • relativ zur Tabelle (der Bildcode wird in die Tabellenzelle eingefügt - der <TD> </ TD> Container ist mit der Zelle ausgerichtet)
  • relativ leere Seite

Hinweis: Das Bild kann nicht mit der üblichen Methode vertikal ausgerichtet werden. Platziere dazu den Container <P> </ P> oder <DIV> </ DIV> , in dem du " ALIGN " mit den gewünschten Werten platzierst.

Eine Referenzkarte ist ein Verfahren zum Verwenden von Verknüpfungen mit einem Bild, das herkömmlich in Teile unterteilt ist, wobei jedes Teil als eine Verbindung dient. Es basiert auf dem kartesischen Koordinatensystem, wobei (0,0) die obere linke Ecke des Bildes ist. Der Code solcher Referenzkarten ist ziemlich mühsam, wenn er manuell eingegeben wird. Daher empfehlen wir Anfängern, sich an grafische HTML-Editoren zu wenden, die den Link-Code in der fertigen HTML-Datei anzeigen.

Anstelle der Attribute VSPACE , HSPASE , BORDER und ALIGN ist es üblich, Cascading Stylesheets zu verwenden.

Um diesen Prozess vollständig zu verstehen, reicht eine Theorie nicht aus, also beginnen Sie mit praktischen Übungen auf Ihrem PC.