HTML ist eine universelle Webseitenmarkierungssprache, die Grundlage für die Erstellung der Struktur und der visuellen Gestaltung von Inhalten. Es bietet verschiedene Möglichkeiten zum Einfügen und Anzeigen von grafischen Elementen auf einer Seite. Das Einfügen von Formen und Bildern ist eine der am meisten nachgefragten Webentwicklungsfunktionen, die das Design der Website erheblich verbessern und verschönern können.
Es gibt mehrere Möglichkeiten, Formen in HTML einzufügen, und jede hat ihre eigenen Vorteile und Einschränkungen. Eine der häufigsten und einfachsten Methoden ist die Verwendung eines Tags . Mit diesem Tag können Sie Bilder in die Seite einfügen, indem Sie den Pfad zur Bilddatei angeben. Die Verwendung dieses Tags ist jedoch begrenzt und es ist nicht möglich, Formen mit HTML zu erstellen.
Sie können die Tags und verwenden, um Formen mit HTML zu erstellen. Mit dem Tag können Sie Elemente wie Farbe, Linienstärke, Füllung und andere Attribute festlegen, um grafische Elemente wie Linien, Rechtecke, Kreise, Polygone usw. zu erstellen. Die Verwendung eines Tags erfordert jedoch Kenntnisse der SVG-Markup-Sprache (Scalable Vector Graphics) und einige Erfahrung im Umgang damit.
Das Tag bietet die Möglichkeit, mit JavaScript 2D-Grafiken auf einer Seite zu erstellen. Es gibt die volle Kontrolle über die Pixel auf dem Canvas und ermöglicht die Verwendung verschiedener Techniken zum Zeichnen von grafischen Elementen wie Rechtecken, Linien, Bézierkurven und anderen. Im Gegensatz zu einem Tag erfordert die Verwendung eines Tags einige Kenntnisse in der JavaScript-Programmierung.
Wie füge ich eine Form in HTML hinzu
Um eine Form zu HTML hinzuzufügen, können Sie ein Tag verwenden . SVG (Scalable Vector Graphics) bietet die Möglichkeit, Webgrafiken mit Vektorbildern zu erstellen.
Um Formen zu Ihrem HTML-Dokument hinzuzufügen, müssen Sie zuerst einen Container erstellen . Zum Beispiel:
Sie können dann verschiedene Elemente verwenden, um Formen wie (Rechteck), (Kreis), (Linie) usw. zu erstellen. Zum Beispiel, um ein Rechteck zu erstellen:
In diesem Beispiel bestimmen die Attribute x und y die Position des Rechtecks, während die Attribute width und height die Größe des Rechtecks angeben. Das Fill-Attribut legt die Füllfarbe der Form fest.
Sie können auch CSS verwenden, um Ihre Formen zu stylen. Zum Beispiel:
In diesem Beispiel haben wir die Rectangle-Klasse verwendet, um einen Stil aus CSS anzuwenden.
Vergessen Sie nicht, jedes Element mit einem entsprechenden Tag zu schließen. Zum Beispiel, für das Tag
Auf diese Weise können Sie Formen in HTML mit SVG hinzufügen und stilisieren. Fühlen Sie sich frei, mit verschiedenen Formen und Kombinationen zu experimentieren, um einzigartige grafische Elemente für Ihre Website zu erstellen.
Standardformen in HTML
Es gibt mehrere Standardformen in HTML, mit denen Sie verschiedene Grafiken auf einer Webseite erstellen können. Diese Formen können verwendet werden, um Inhalte zu entwerfen und zu strukturieren oder Daten visuell darzustellen.
Eine der häufigsten Standardformen ist ein Rechteck. Sie können ein Tag verwenden, um ein Rechteck in HTML zu erstellen und legen Sie die gewünschte Größe und Hintergrundfarbe mithilfe von Attributen fest style. Zum Beispiel:
Dieser Code erstellt ein Rechteck, das 200 Pixel breit und 100 Pixel hoch ist, mit einem roten Hintergrund.
Neben dem Rechteck können Sie auch Kreise und Ellipsen in HTML verwenden. Sie können ein Tag und JavaScript verwenden, um einen Kreis oder eine Ellipse zu erstellen. Zum Beispiel:
Dieser Code erstellt einen Kreis mit einem Radius von 50 Pixeln, der an einem Punkt zentriert ist (100, 100).
Sie können auch Linien in HTML verwenden. Um eine Linie zu erstellen, können Sie ein Tag verwenden und die Anfangs- und Endkoordinaten angeben, z. B.:
Dieser Code erstellt eine Linie von Punkt (100, 100) zu Punkt (300, 300) mit blauer Farbe und einer Breite von 2 Pixeln.
Es gibt auch die Möglichkeit, Polygone in HTML zu erstellen. Dazu können Sie ein Tag verwenden und die Koordinaten aller Stützpunkte angeben, z. B.:
Dieser Code erstellt ein Dreieck mit Eckpunkten an Punkten (200, 10), (250, 190) und (160, 210), mit roter Füllfarbe.
Es gibt auch andere Formen in HTML, wie Ovale, Polylinien und vieles mehr, aber diese vier Grundformen – ein Rechteck, ein Kreis, eine Linie und ein Polygon – sind die gebräuchlichsten und werden in HTML einfach erstellt.
Streifen und Rechtecke
Beispiel für die Verwendung von CSS zum Erstellen eines Streifens:
.stripe Rechteck - dies ist eine einfache Form mit vier Seiten, die auch mit CSS-Eigenschaften erstellt werden kann background-color und width und height. Um ein Rechteck zu erstellen, müssen Sie seine Breite, Höhe und Farbe angeben.
Beispiel für die Verwendung von CSS zum Erstellen eines Rechtecks:
.rectangle Sie können auch zusätzliche Eigenschaften für einen Balken und ein Rechteck festlegen, z. B. einen Rahmen (border), Abrunden von Ecken (border-radius) und Schatten (box-shadow), um ihnen ein interessanteres Aussehen zu geben.
Kreise und Ovale
Dieser Code erzeugt einen roten Kreis mit einem Durchmesser von 200 Pixeln.
Ein Oval ist eine Ellipse mit zwei verschiedenen Radien: groß und klein. Mit HTML und CSS können Sie auch Ovale erstellen. Dazu können Sie zwei Border-radius-Eigenschaften verwenden - eine für den vertikalen Radius (z. B. border-Radius: 50% 10%; ) und die andere für den horizontalen Radius (z. B. border-radius: 10% 50%; ). Wenn Sie beispielsweise ein Oval mit einer Breite von 200 Pixeln und einer Höhe von 100 Pixeln erstellen möchten, können Sie den folgenden Code verwenden:
Dieser Code erzeugt ein grünes Oval mit einer Breite von 200 Pixeln und einer Höhe von 100 Pixeln.
Auf diese Weise können Sie dank HTML und CSS leicht Kreise und Ovale in Webseiten einfügen und ein interessantes Design erstellen.
Polygone
Sie können beispielsweise eine Tabelle mit einer Zeile und einer Zelle verwenden, um ein Dreieck zu erstellen:
In diesem Beispiel hat die Tabellenzelle einen schwarzen Hintergrund und die angegebenen Breiten und Höhen. Die Zellgrenzen bilden eine dreieckige Form, indem Sie die Rahmenstile ändern.
Ebenso können Sie Polygone mit vielen Winkeln erstellen und die Größe und Farben der Zellen ändern, um die gewünschte Form zu erhalten.
Beachten Sie beim Erstellen eines Polygons, dass alle Flächen des Polygons geschlossen sein müssen, um eine korrekte geometrische Form zu erhalten.
Verwenden von CSS-Stilen zum Erstellen von Formen
In HTML können Sie CSS-Stile verwenden, um verschiedene Formen zu erstellen. Dies kann nützlich sein, wenn Sie Ihrem Design ein ästhetisch ansprechendes Element hinzufügen oder den Inhalt in Abschnitte aufteilen müssen.
Es gibt mehrere Möglichkeiten, Formen mithilfe von CSS-Stilen zu erstellen, eine davon ist die Verwendung der Border-Eigenschaft. Sie können beispielsweise ein Rechteck erstellen, indem Sie die Breite, Höhe und Farbe des Rahmens angeben.
Sie können auch einen Kreis erstellen, indem Sie die border-radius-Eigenschaft verwenden, um die Grenzen abzurunden.
Wenn Sie ein Dreieck erstellen müssen, können Sie die Border-Eigenschaft verwenden und eine Breite von Null für einen der Grenzen festlegen. In diesem Beispiel werde ich unten ein gleichschenkliges Dreieck erstellen.
Wenn Sie ein Polygon erstellen müssen, können Sie die transform-Eigenschaft verwenden, um das Element zu drehen. In diesem Beispiel werde ich ein Fünfeck erstellen.
Mit CSS-Stilen können Sie eine Vielzahl von Formen erstellen, die das Erscheinungsbild Ihrer Website verbessern oder ihm einen einzigartigen Stil verleihen. Experimentieren Sie und erstellen Sie Ihre eigenen Formen mit CSS!
