Was ist HTML?
HTML steht für Hyper Text Markup Language. Hierbei handelt es sich um eine Reihe vordefinierter Elemente, die auch als Tags bezeichnet werden und einem Browser mitteilen, welche Inhalte angezeigt werden sollen und wie diese Inhalte angezeigt werden sollen. Das bedeutet, dass ich eine leere Textdatei nehmen, einige HTML-Tags hinzufügen und der Browser weiß, wie meine Webseite angezeigt wird.
Was ist ein Tag?
Ein Tag ist eine Anweisung, die dem Browser mitteilt, wie bestimmte Inhalte auf dem Bildschirm angezeigt werden sollen. Manchmal bezeichnen Entwickler Tags als Elemente. Hier ist ein Beispiel für ein Tag mit Text darin.
Dieses Tag wird als Header-Tag bezeichnet. Das h im Tag-Namen zeigt uns und dem Browser an, dass wir mit einem Header-Tag arbeiten. Der nach dem h stehende Wert gibt die Größe des verwendeten Headers an. In diesem Fall ist 1 der größte Standardtext, den Sie im Browser anzeigen können. Die Ausgabe dieses Tags im Browser zeigt Hello World!
Was ist ein Attribut?
Ein Attribut ist ein zusätzlicher Wert, mit dem ein Tag konfiguriert oder das Verhalten des Tags angepasst werden kann. Hier ist ein perfektes Beispiel dafür, wie ein Tag mit einem hinzugefügten Attribut aussieht
Pizza hinzufügen
Der Wert des ID-Attributs kann beliebig sein, es darf jedoch kein Leerzeichen enthalten. Das zweite Attribut ist das Klassenattribut. Das Klassenattribut kann mehrere Werte annehmen, die beliebig sein können.
Globales Attribut
Das globale Attribut kann für alle Tags festgelegt werden. Sehen wir uns die vier am häufigsten verwendeten globalen Attribute an.
- id: Das erste ist das id-Attribut. Dies fügt dem Tag selbst keine visuelle Änderung hinzu. Es wird hauptsächlich für JavaScript und Styling mit CSS (Cascading Style Sheets) verwendet. Der ID-Attributwert muss auf einer bestimmten Seite eindeutig sein. Das bedeutet, dass keine zwei Tags in einer ID den gleichen Wert haben können
- class: class-Attribut ähnelt dem id-Tag, außer dass der Wert des Attributs auf einer bestimmten Seite mehrmals wiederholt werden kann. Diese werden hauptsächlich mit CSS und manchmal mit JavaScript verwendet.
- style: Das style-Attribut wird für Inline-CSS verwendet. Es sollte nach Möglichkeit vermieden werden.
- title: title liefert eine Kennung oder eine Art Tooltip für das Tag. Wenn sich die Maus über einem Tag befindet, auf dem der Titel angezeigt wurde.
Beispielsweise
Herzlich willkommen!
Block Level Element vs Inline Element
Das Folgende sind die Attribute des Blockebenenelements und des Inline-Elements.
Block Level Element
- Nimmt die gesamte Breite des übergeordneten Containers ein.
Inline-Element
- Nimmt den aktuellen Speicherplatz auf, der in vorhanden ist.
Hier ist eine grundlegende Illustration.
Dieser grüne Bereich repräsentiert den übergeordneten Container. In unserem Fall ist es das Browserfenster. Die Breite des Browsers, unseres übergeordneten Tags, entspricht der Breite des Elements auf Blockebene.
Diese rosa Bereiche repräsentieren unsere Block-Level-Elemente oder Tags. Wie Sie sehen, nehmen sie die gesamte Breite des übergeordneten Containers ein. Dies bedeutet, dass alle Tags in der nächsten Zeile beginnen müssen.
Diese nächsten drei blauen Bereiche sind Inline-Tags. Wie Sie sehen, befinden sie sich nebeneinander und nehmen nur die erforderliche Breite für den Inhalt ein, den sie enthalten. Dies ist sinnvoller, wenn wir diese Tags in Aktion sehen
Verschiedene grundlegende HTML-Tags
Lernen wir die verschiedenen HTML-Tags.
1) Tag - DOCTYPE
Der DOCTYPE teilt dem Browser mit, welche Art von Datei geöffnet wird. Da codieren wir in HTML5. HTML5 ist die neueste Version der HTML-Markup-Sprache, unser DOCTYPE ist extrem einfach. Beachten Sie, dass es kein schließendes Tag gibt.
DOCTYPE ist wie ein reguläres Tag und beginnt mit einer Klammer. Dann setzen wir das Ausrufezeichen und geben dann DOCTYPE ein. Wir haben Platz und geben dann HTML ein. Dieses Tag sagt dem Browser im Wesentlichen, dass diese Dokumente als HTML-Code bereitgestellt werden müssen.
2) Tag - HTML
Das HTML-Tag, auch als Root-Element bezeichnet, folgt dem DOCTYPE-Tag. Dieses Tag kann die normalen globalen Attribute plus das Attribut "Manifest" haben. Das HTML-Tag kann nur einmal in einer HTML-Seite verwendet werden.
Alles, was mit HTML zu tun hat, ist in diesem Tag verschachtelt. Dies bedeutet, dass sich alle unsere Tags zwischen dem Öffnen und Schließen der HTML-Tags befinden.
3) Markenkopf
Das Head-Tag enthält allgemeine Informationen zu der angezeigten Webseite. Innerhalb des Head-Tags wird ein einzelnes Tag hinzugefügt, mit dem der Browser bestimmte Details kennt, z. B. den Titel der Seite, den Autor der Seite und andere solche Informationen.
Nichts in diesem Head-Tag wird auf der Webseite angezeigt. In der aktuellen Browseranwendung werden jedoch einige Informationen angezeigt, z. B. der Titel der Registerkarte. Für dieses Tag stehen standardmäßig globale Attribute zur Verfügung.
4) Tag - Körper
Das Body-Tag informiert den Browser darüber, was auf der Seite angezeigt werden soll. Innerhalb des Körpers ist das Tag der Ort, an dem wir alle unsere Inhalte platzieren, wie z. B. Tags und Text. Alles, was sich innerhalb des Body-Tags befindet, wird auf der Webseite angezeigt.
Das Body-Tag wird nach dem Head-Tag innerhalb des HTML-Tags platziert. Es gibt nur ein Body-Tag pro Seite. Das Body-Tag kann standardmäßige globale Attribute haben.
5) Tag - Span
Unser erstes Tag ist das Span-Tag. Dieses Tag ist ein generischer Inline-Container. Das heißt, es ist kein Standardstil zugeordnet. Sie möchten dieses Tag verwenden, wenn Sie Texte gruppieren müssen, die Sie inline zusammenhalten möchten.
6) Tag - p
Das Absatz-Tag oder das p-Tag wird verwendet, wenn Sie einen Textabsatz zusammenhalten möchten. Dieses Element ist ein Element auf Blockebene, dh es nimmt die Breite seines übergeordneten Containers ein. Die ideale Verwendung ist, wenn Sie viel Text anzeigen müssen. Für dieses bestimmte Element sind nur globale Attribute zulässig.
7) Tag - div
Das Divisions-Tag oder allgemein als Divisions-Tag bezeichnet, ist ein generischer Blockcontainer. Dies bedeutet, dass Sie viele Tags zu einem Abschnitt Ihrer Website zusammenfassen können. Dieses Tag ist globale Attribute.
8) Tag - Sub
Das tiefgestellte Tag oder das tiefgestellte Tag ermöglicht, dass sich das nächste unter der normalen Textzeile befindet. Es ist ein Inline-Element, da es globale Attribute verwendet. Ein perfektes Anwendungsbeispiel wäre, die 2 im H2O wenig erscheinen zu lassen.
Beispiel: H 2 O
9) Tag - sup
Das hochgestellte Tag oder das sup-Tag, bei dem es sich um ein Inline-Element handelt, ermöglicht, dass sich der Text über der normalen Textzeile befindet. Ein Beispiel wäre, wenn es sich um eine mathematische Gleichung handelt. Beachten Sie, dass die 2 höher ist als der Rest des Textes in dieser Gleichung.
Beispiel: E = mc 2
Dies ist ein globales Attribut.
10) Tag - u
- U steht für Unterstreichung. Dadurch wird jeglicher Text innerhalb der offenen und geschlossenen Tags unterstrichen. Es ist ein Inline-Element und ein globales Attribut.
11) Tag - em
Das em-Tag steht für Betonung. In diesem Fall wird der Text durch Hervorheben von Text kursiv oder schräg dargestellt. Dieses Inline-Element wird verwendet, wenn Sie bestimmte Textteile hervorheben möchten. Dies ist ein globales Attribut.
12) Tag - stark
Wenn Sie Text fett formatieren möchten, verwenden Sie das starke Tag. Dieses Inline-Tag wird um den Text platziert, den Sie fett machen möchten. Genau wie das Emphasis-Tag. Das starke Tag verleiht Text auf Ihrer Website zusätzliche Bedeutung.
13) Tag - br
Das BR-Tag, das für eine Pause steht. Es gibt einige Tags, die kein schließendes Tag benötigen. Es ist weder ein Block- noch ein Inline-Element. Es ist ein globales Attribut.
14) Tag - Std
Das hr-Tag benötigt auch kein schließendes Tag, um es zu vervollständigen. Das hr-Tag, das für die horizontale Linie steht, erstellt eine Linie auf der Webseite. Es ist ein Block Level Element. Es ist ein globales Attribut.
Verschachtelte Elemente / Tags
- Tags verschachteln
- Wo sich ein Tag innerhalb eines anderen Tags befindet
Beispiel
16) Tag - li
Das li-Tag, das für ein Listenelement steht, ist das Tag, das verschachtelt wird. Innerhalb des li-Tags würden Sie alle Arten von Inhalten einfügen, bei denen es sich um eine Liste handelt.
17) Tag - ol
Das ol-Tag, das für die geordnete Liste steht, ist ein Container des verschachtelten li-Tags. Sie werden diese beiden Tags, das li- oder das ol-Tag, niemals für sich sehen. Da es sich um eine Liste von Bestellungen handelt, wird neben jedem Element in der Liste ein Wert angezeigt.
Standardmäßig werden in der Liste Zahlen verwendet.
Attribute
Global, umgekehrt, Start, Typ (a, A, I, i)
18) Tag - ul
Das ul-Tag oder die ungeordnete Liste ist genau wie das ol-Tag ein Container für das verschachtelte li-Tag. Im Gegensatz zum ol-Tag, das einen Zahlenwert neben jedem der Elemente in der Liste anzeigt, enthält dieses ul-Tag nur Aufzählungspunkte neben den Listenelementen in der Liste.
19) Markierung - h1, h2, h3, h4, h5, h6
Es gibt insgesamt sechs Header-Tags. Jede von ihnen hat eine eigene Nummer, die von 1 bis 6 beginnt. Das h1-Tag und alle anderen Header-Tags enthalten eine kurze Beschreibung für einen Text- oder Inhaltsabschnitt. Diese Tags sind globale Attribute.
20) Tag - a
Das Tag oder das Ankertag ist ein beliebtes Tag, da es Links zu anderen Seiten einer Website und Links zu externen Websites erstellt. Das Tag ist ein Inline-Element und verfügt neben den globalen Attributen über eine Vielzahl von Attributen.
Hallo Welt!
Das eine zusätzliche Attribut, das wir erwähnen werden, ist href. Dies steht für Hypertext Reference. Das Wichtigste ist, dass href das Attribut ist, in dem wir den Pfad angeben, damit wir auf eine andere Seite oder eine andere Website verlinken können.
Das Attribut href. Und wir wollen immer unseren Schluss-Tag setzen. Link zurück zur Google.com-Website.
Ausgabe
21) Tag - Abb
Das img-Tag oder das Bild-Tag gibt uns die Möglichkeit, Bilder auf unserer Seite anzuzeigen.
Jetzt werden Sie in diesem Beispiel bemerken, dass das Image-Tag kein schließendes Tag hat. Dies ist eine der wenigen Tags. Im Gegensatz zum br-Tag und dem hr-Tag kennzeichnen wir das Ende dieses Tags jedoch mit einem Schrägstrich. Einige nennen dies möglicherweise die Kurzform zum Schreiben eines abschließenden Tags.
Das src-Attribut und das alt-Attribut. Das src- oder das source-Attribut, wie Sie im Beispiel sehen, ist erforderlich.
Jetzt ist der Wert dieses Attributs der Pfad zu dem Foto, das wir anzeigen möchten. Der Pfad kann entweder ein absoluter Pfad oder ein relativer Pfad sein. Das andere Attribut ist das alt-Attribut. Dies steht für eine Alternative. Der Alt-Wert sollte das Foto beschreiben. Der Alternativtext wird im Browser wie folgt angezeigt. 
Fazit - Grundlegende HTML-Tags
HTML ist buchstäblich unglaublich große Themenbereiche, von denen man annimmt, dass sie sie besitzen. Wenn Sie es geschafft haben, so viel zu erreichen, sind Sie jedoch mehr als in der Lage, die Entwicklungskraft des Frontends optimal zu nutzen. Sie müssen viel sicherer sein, wenn Sie eine Webseite in ihre Elementelemente und anschließend in den mit HTML und CSS verknüpften Code aufteilen.
Empfohlene Artikel
Dies war eine Anleitung zu grundlegenden HTML-Tags. Hier diskutieren wir auch Was ist ein Tag? und verschiedene grundlegende HTML-Tags, zusammen mit der Bedeutung eines Attributs ?. Sie können sich auch die folgenden Artikel ansehen, um mehr zu erfahren -
- Einführung in HTML
- Erlernen Sie das Konzept von XHTML
- Was sind die HTML-Attribute?
- Anwendungen von HTML
- Einführung von HTML-Listenstilen
- HTML-Frames
- HTML-Blöcke