HTML - universelle Markup-Sprache zum Erstellen von Webseiten. Mit HTML können Sie die Struktur des Inhalts definieren, aber diese Elemente werden normalerweise mit CSS formatiert. Wenn Sie ein Menü auf einer Webseite ohne CSS erstellen möchten, befolgen Sie diese Anweisungen.
-
. Jeder Menüpunkt muss in ein Tag gewickelt werden
. Dadurch wird eine hierarchische Struktur für Ihr Menü erstellt.
4. Interaktivität hinzufügen: Um Ihrem Menü Interaktivität hinzuzufügen, können Sie JavaScript verwenden. Zum Beispiel, wenn Sie den Mauszeiger über ein Menüelement bewegen, seine Farbe ändern oder eine Animation hinzufügen.
Mit diesen Schritten können Sie ein einfaches Menü in HTML erstellen, ohne CSS zu verwenden. Denken Sie jedoch daran, dass die Verwendung von CSS die Elemente einer Webseite flexibler stilisieren kann und der empfohlene Ansatz zum Erstellen von Menüs und anderen Webdesignelementen ist.
Was ist ein Menü in HTML
Das Menü kann sich an verschiedenen Stellen auf einer Webseite befinden, z. B. an der Oberseite (Kappe) oder an der Seitenleiste. Es kann Links zu verschiedenen Seiten oder Abschnitten der Website enthalten, was die Navigation auf der Website für die Benutzer einfacher und intuitiver macht.
Normalerweise wird jeder Menüpunkt als Hyperlink () oder Schaltfläche dargestellt. Jedes Element kann mit verschiedenen HTML-Elementen dekoriert werden, z. B. titel-Tags (
), Paragraphen (
), Listen (
Menü in HTML ist eines der wichtigsten Werkzeuge zum Erstellen von Navigation auf Websites und Anwendungen. Es ermöglicht Benutzern, schnell durch die Website zu navigieren und die benötigten Informationen zu finden.
Warum sollte ich ein Menü ohne CSS erstellen
Das Erstellen von Menüs ohne CSS mag heute etwas seltsam erscheinen, da die meisten Websites CSS verwenden, um ihre Elemente zu gestalten und zu stylen. Es gibt jedoch mehrere Situationen, in denen das Erstellen eines Menüs ohne CSS hilfreich sein kann.
1. Spezifische Anforderungen an die Gestaltung
In einigen Fällen kann das Erstellen eines Menüs ohne CSS von Vorteil sein, wenn Sie ein spezielles Design benötigen, das mit CSS schwierig oder unmöglich zu erreichen ist. Anstatt komplexe CSS-Stile zu verwenden, können Sie ein Menü in HTML mithilfe von Tabellen und Zellen erstellen und sein Aussehen und Layout manuell steuern.
2. Kontrolle über Stile
Wenn Sie die Menüelemente absolut positionieren müssen, ohne andere Stile auf der Seite zu stören, kann das Erstellen eines Menüs ohne CSS Ihnen mehr Kontrolle über sein Layout und seine Stile geben. Sie können unvollständige Tabellen oder andere HTML-Elemente verwenden, um ein Menü zu erstellen und das Layout des Menüs mithilfe von HTML-Attributen oder sogar eingebetteten Stilen zu steuern.
3. Kompatibilität mit älteren Browsern
In einigen Fällen kann es bei der Entwicklung für ältere Browser zu Einschränkungen bei der Verwendung moderner Technologien, einschließlich CSS, kommen. Das Erstellen von Menüs ohne CSS kann eine Lösung sein, um die Kompatibilität mit solchen Browsern zu gewährleisten und eine angemessene Anzeige auf allen Plattformen zu gewährleisten.
Im Allgemeinen hat das Erstellen eines Menüs ohne CSS seine eigenen Merkmale und Einschränkungen, kann aber in einigen Situationen eine nützliche und effektive Lösung sein. Sie müssen die spezifischen Anforderungen und Bedingungen Ihres Projekts berücksichtigen, bevor Sie entscheiden, ob Sie CSS verwenden, um ein Menü zu stylen oder es ohne es zu erstellen.
Abschnitt 1: Grundprinzipien
Das Erstellen eines Menüs ohne CSS kann eine ziemlich einfache Aufgabe sein. Ein solches Menü basiert auf der Verwendung von Listen, nämlich Tags
- (nicht nummerierte Liste) und
- (Listenelement). Am Anfang müssen Sie erstellen
- das Tag, das als Container für Menüelemente fungiert. Innerhalb dieses Tags müssen Sie alle Menüpunkte mit hinzufügen
- Kennung. Jeder Menüpunkt stellt ein separates Listenelement dar. Um beispielsweise ein Menü mit den Elementen "Startseite", "Über uns", "Dienstleistungen" und "Kontakte" zu erstellen, können wir den folgenden Code verwenden:
Nachdem Sie alle Menüpunkte hinzugefügt haben, können Sie ihr Aussehen mit CSS anpassen, dies ist jedoch nicht mehr notwendig und hängt von Ihren Bedürfnissen und Vorlieben ab. Mit diesen Grundprinzipien können Sie ein einfaches Menü ohne CSS erstellen. Wenn Sie jedoch ein komplexeres Menü mit Untermenüs erstellen oder sein Aussehen ändern müssen, müssen Sie CSS verwenden. In den folgenden Abschnitten werden erweiterte Methoden zum Erstellen von Menüs mit CSS behandelt.
Verwenden von Listen
Eine ungeordnete Liste wird mit einem Tag erstellt- es befinden sich Listenelemente, die mit einem Tag gekennzeichnet sind
- . Jedes Element in der Liste wird als Marker dargestellt. Zum Beispiel:
- Menüpunkt 1
- Menüpunkt 2
- Menüpunkt 3
Eine geordnete Liste erstellt im Gegensatz zu einer ungeordneten Liste nummerierte Elemente. Es wird ein Tag verwendet, um es zu erstellen
- . Zum Beispiel:
- Menüpunkt 1
- Menüpunkt 2
- Menüpunkt 3
Der Hauptvorteil der Verwendung von Listen zum Erstellen von Menüs ist die Einfachheit und Verständlichkeit des Codes. Beachten Sie dabei, dass ein solches Menü statisch ist und sich nicht an verschiedene Bildschirme anpassen oder sich dynamisch ändern kann.
Wenn Sie ein komplexeres Menü oder die Möglichkeit zum Hinzufügen von Stilen und Animationen benötigen, müssen Sie CSS oder JavaScript verwenden.
Anwenden von Stilen
Durch das Anwenden von Stilen in HTML können Sie das Erscheinungsbild von Elementen ändern, einschließlich Farbe, Schriftart, Größe, Einzug und mehr. Zum Anwenden von Stilen auf Elemente wird CSS verwendet, in dem Sie verschiedene Regeln und Eigenschaften festlegen können.
Sie können Inline-Stile verwenden, um Stile auf Elemente anzuwenden, indem Sie sie mit dem style-Attribut festlegen. Zum Beispiel:
Это текст с синим цветом и размером шрифта 18 пикселей
Sie können auch externe Stile verwenden, die in einer separaten CSS-Datei beschrieben werden und mit einem Tag an ein HTML-Dokument angehängt werden . Zum Beispiel:
In einer CSS-Datei können Sie Stile für verschiedene Selektoren definieren, z. B.:
Sie können Stile auch mithilfe von Klassen und IDs, die in der HTML-Datei definiert sind, auf Elemente anwenden. Zum Beispiel:
Это текст с синим цветом шрифта
Это текст с увеличенным размером шрифта
Anschließend können Sie in der CSS-Datei Stile für die entsprechenden Klassen und Bezeichner definieren:
.blue-text #large-textAuf diese Weise können Sie durch die Verwendung von Stilen ein harmonisches und schönes Design für eine Webseite erstellen.
Abschnitt 2: Erstellen eines einfachen Menüs
In diesem Beispiel wird jeder Menüeintrag in ein Tag gewickelt
Das Ergebnis wird wie eine Liste von Menüpunkten aussehen, die mit CSS gestylt werden können. Alternativ können Sie jedem Menüelement Links hinzufügen, indem Sie sie in ein Tag wickeln . Zum Beispiel:
Erstellen einer Liste
so erstellen Sie eine geordnete Liste: - Der erste Punkt der Liste
- Der zweite Punkt der Liste
- Dritter Punkt der Liste
Dieser Code erstellt eine Liste, in der jedem Element eine Sequenznummer zugewiesen wird:
- Der erste Punkt der Liste
- Der zweite Punkt der Liste
- Dritter Punkt der Liste
und
in Kombination mit dem Tag
wir können ganz einfach verschiedene Listen auf Webseiten erstellen.Hier ist ein Beispiel für eine Liste, die sowohl geordnete als auch ungeordnete Elemente enthält:
- Der erste geordnete Listeneintrag
- Der zweite geordnete Listeneintrag
- Erster ungeordneter Listeneintrag
- Zweiter ungeordneter Listeneintrag
- Der dritte geordnete Listeneintrag
- Der erste geordnete Listeneintrag
- Der zweite geordnete Listeneintrag
- Erster ungeordneter Listeneintrag
- Zweiter ungeordneter Listeneintrag
- Der dritte geordnete Listeneintrag
Dieser Code erstellt eine Liste, die ungeordnete Elemente in einer geordneten Liste enthält:
Hinzufügen von Links
Um Links in Menüs in HTML zu erstellen, müssen Sie Tags verwenden. Dieses Tag wird zum Erstellen von Hyperlinks verwendet.
Um einen Link zu erstellen, müssen Sie ein href-Attribut angeben, das die Adresse enthält, zu der der Link führen soll. Wenn Sie beispielsweise einen Link zur Masterseite erstellen möchten, müssen Sie den folgenden Code angeben:
In diesem Beispiel ist die Adresse index.html ist relativ, dh es bezieht sich auf die aktuelle Datei. Wenn Sie eine absolute Adresse angeben möchten, müssen Sie sie vollständig angeben.
Sie können auch Text hinzufügen, mit dem der Link angezeigt wird. Zum Beispiel:
In diesem Beispiel wird der Text "Über das Unternehmen" als Link zur about-Seite angezeigt.html . Wenn Sie auf diesen Link klicken, wird der Benutzer zur angegebenen Seite weitergeleitet.
Abschnitt 3: Erstellen eines Dropdown-Menüs
In HTML können Sie ein Dropdown-Menü mit einer Kombination von Tags erstellen `
`. Dazu sollten einige Schritte befolgt werden.
Schritt 1: Erstellen Sie eine Tabelle mit zwei Spalten. Die erste Spalte enthält die Namen der Menüelemente und die zweite Spalte enthält deren Inhalt.
| Пункт меню 1 | Содержимое пункта меню 1 |
| Пункт меню 2 | Содержимое пункта меню 2 |
| Пункт меню 3 | Содержимое пункта меню 3 |
Schritt 2: Blenden Sie den Inhalt jeder Tabellenzeile außer der ersten mit CSS aus. Fügen Sie dazu den Stil "display" hinzu: none;" für Elemente `
| Пункт меню 1 |
| Пункт меню 2 |
| Пункт меню 3 |
Schritt 3: Fügen Sie JavaScript-Code hinzu, um den Inhalt jedes Menüelements anzuzeigen, wenn Sie den Mauszeiger darüber bewegen. Fügen Sie dazu das Attribut `onmouseover` dem Tag ' hinzu
| Пункт меню 1 |
| Пункт меню 2 |
| Пункт меню 3 |
Wenn Sie nun den Mauszeiger über den Namen eines Menüelements bewegen, wird dessen Inhalt angezeigt.
