Struktur eines HTML-Dokuments: Lernen Sie die Grundstruktur von HTML

Veröffentlicht: 2020-12-14

HTML wurde als Standard-Auszeichnungssprache für Dokumente verwendet, auf die im Internet über Browserdaten zugegriffen werden kann. HTML besteht aus einer Reihe von kurzen Elementen, Tags und Codes, die, wenn sie in einem strukturierten Format zusammengestellt werden, eine Webseite erstellen, die jeder mit ordnungsgemäßem Internetzugang anzeigen kann.

Es hat die Art und Weise verändert, wie Menschen arbeiten. HTML und CSS werden zusammen mit Javascript verwendet, um Elemente auf einer Webseite zu erstellen und zu manipulieren. Mit HTML können Ersteller verschiedene Rollen für jedes Element definieren, was ihnen volle Anpassungsfreiheit im Erstellungsprozess gibt.

HTML steht für Hyper Text Markup Language und wird verwendet, um Webseiten zu entwerfen, die auf Websites angezeigt werden.

Es gibt drei Hauptaspekte, die zusammengenommen beim Aufbau einer Webseite helfen.

HTML-Struktur – unterstützt die Strukturelemente
CSS-Stil – hilft beim Design und verleiht diesen Strukturelementen einen Stil
JS-Interaktion – ermöglicht die Interaktion zwischen diesen Elementen

In der HTML-Struktur werden die Elemente und Tags zur Kennzeichnung des Inhalts gegeneinander gepaart.

Jede im Internet verfügbare Seite enthält HTML-Tags. Diese Tags helfen dabei, Inhalte online mit einer klaren und offenen Perspektive anzuzeigen, die jederzeit moderiert und geändert werden können. Um die Dinge einfacher zu erklären, lassen Sie uns beschreiben, wie Elemente und Tags im Programm verwendet werden.

Die öffnenden und schließenden Elemente ändern sich, aber die Tags bleiben gleich. Die Tags werden vor und am Ende der Sätze eingefügt, sodass sie auf der Seite formatiert werden können. Eine ideale Webseite besteht aus drei Haupt- und wesentlichen Abschnitten:

Titel
Kopf
Körper

Das Head-Element wird verwendet, um den Anfang/die Überschrift des Head-Abschnitts hervorzuheben. Der Head-Bereich hilft immer als Beschreibung über die Seite. Der Inhalt innerhalb der Head-Tags, dh die Überschrift, wird als Quelle zur Identifizierung des Inhalts der Seite verwendet.

Nachfolgend sind alle Tags aufgeführt, die im Head-Element verwendet werden können:

<Basis>
<link>
<Meta>
<noscript>
<Skript>
<Stil>
<Titel>

Zum Beispiel:

<KOPF>

<TITLE> Ein Hallo-Welt-Beispiel in HTML<TITLE>

</HEAD>

Elemente auf Blockebene werden verwendet, um bestimmte Abschnitte einer Webseite zu identifizieren, sei es ein Absatz, Unterüberschriften oder einige zu erstellende Listen.

Absatz: <P>und </P>

Überschrift, Ebene eins:<H1>Überschrift, Ebene zwei:<H2>und </H2>

Horizontallineal:<HR> Zentrierung:<CENTER>

Fußzeile : Es gibt keine speziellen Tags, um dies zu kennzeichnen, aber es wird dennoch empfohlen, eine Fußzeile auf der Webseite zu haben, um zu helfen, die Abschnitte zu identifizieren, die Kontakt mit dem Autor erfordern. Sie können einen FAQ-Bereich oder eine E-Mail zum Abonnieren eines Newsletters enthalten.

<HTML>

<KOPF>

<TITLE>Ein Schuhunternehmen <TITLE>

</HEAD>

<KÖRPER>

<H1>Willkommen bei Amazing Shoes! </H1>: </H2>

<CENTER> Warum besuchen Sie nicht die <A HREF =..http://www.example1.com/..>Beispiel-Website

</A>

</MITTE>

</KÖRPER>

</HTML>

Der obige Abschnitt erläuterte die Hauptelemente einer Webseite mit einer HTML-Struktur.

Jetzt bewegen wir uns in Richtung der HTML-Quelle und versuchen zu verstehen, wie man sie verwenden kann, um die Programmstruktur und ihre Elemente zu verstehen.

Als Anfänger hilft dies sehr zu verstehen, wie andere Seiten entwickelt werden, und sie können als Referenz verwendet werden, um eine angepasste Version für Ihre eigene Webseite zu erstellen.

Klicken Sie irgendwo auf der Webseite auf die rechte Schaltfläche und wählen Sie dann "Seitenquelle anzeigen". Dadurch wird ein Fenster geöffnet, das den Quellcode der Seite enthält.

Um eine Seite zu inspizieren

Klicken Sie irgendwo auf der Webseite auf die rechte Schaltfläche und wählen Sie dann „Inspizieren“, um die Liste und die Arten von Elementen anzuzeigen, die zum Erstellen dieser bestimmten Webseite verwendet wurden. Es würde sowohl HTML als auch CSS enthalten, die über das Style-Panel geändert werden können.

Nachdem die grundlegende Struktur von HTML und seine Tags erklärt wurden, wollen wir uns nun dem Verständnis der grundlegenden Elemente zuwenden, die zum Schreiben von Inhalten in HTML erforderlich sind.

<p> Dieses Tag wird in einer Webseite verwendet, wenn ein Absatz benötigt wird, und um es zu beenden, wird das Tag </p> verwendet.

<br> Dieses Tag wird verwendet, um Zeilen zu brechen und wird meistens verwendet, um einzelne Zeilen zu schreiben, sei es Kontakt oder Adresse.

<hr> Dieses Tag wird verwendet, um den Inhalt der Webseite in zwei Abschnitte zu unterteilen.

Alle Tags hier sind in einem Beispiel-Webseitencode implementiert

Lernen: 21 Ideen für Webentwicklungsprojekte

EINGANG

<html>

<Kopf>

</head>

<Körper>

<h1>Struktur von HTML</h1>

<p>

Von upGrad Education<br>

<hr>

Lernen Sie die Grundlagen <br>

<hr>

Von upGrad Education<br>

</p>

</body>

</html>

Attribute

Bei allen genannten Tags wird ein Attribut verwendet, wenn zusätzliche Informationen benötigt werden. Die Attribute werden mit zwei Parametern definiert, nämlich 'Wert' und 'Name'.

Hier hat der 'name'-Parameter die Funktion, den Namen der Eigenschaft anzunehmen, von der angenommen wird, dass er ihr zugewiesen wird. Und der Parameter „value“ hat eine ähnliche Funktion, um den Wert der Eigenschaftsnamen zu übernehmen, die mit dem Element übereinstimmen.

<img> Dieses Attribut wird verwendet, um ein Bild in die Webseite einzufügen/einzufügen. Dieses Tag hilft bei der Angabe des Bildpfads. Und <height> und <width> geben die Höhe bzw. Breite des Bildes an.

<alt> Dieses Attribut wird angewendet, wenn das Bild aufgrund eines Verbindungsfehlers oder aus anderen Gründen nicht geladen werden kann. Das Alt-Tag dient als Untertitel für das Bild.

Melden Sie sich für Software Engineering-Kurse an den besten Universitäten der Welt an. Verdienen Sie Executive PG-Programme, Advanced Certificate-Programme oder Master-Programme, um Ihre Karriere zu beschleunigen.

Lesen Sie: 8 aufregende Ideen und Themen für Full-Stack-Projekte

Beispiel

<html>

<Körper>

<h2>Das src-Attribut</h2>

<p>HTML-Bilder werden mit dem img-Tag definiert, und der Dateiname der Bildquelle wird im src-Attribut angegeben:</p>

</body>

</html>

Zum Ändern des Textstils, der Größe, der Schriftart und anderer textbezogener Funktionen wird das <style>-Tag verwendet

Beispiel

<html>

<Körper>

<h2>Das style-Attribut</h2>

<p>Das Attribut wird verwendet, um Stile wie Farbe zu ändern:</p>

<p style="color:red;">Dies ist ein roter Absatz.</p>

</body>

</html>

Bei Anwendungen zur Textänderung stellt HTML auch Tags bereit, um den Text mithilfe dieser Tags an benutzerdefinierte Anforderungen anzupassen.

<b> – fetter Text
<strong> – Wichtiger Text
<i> – Kursiver Text
<em> – Hervorgehobener Text
<mark> – Markierter Text
<klein> – Kleinerer Text
<del> – Gelöschter Text
<ins> – Eingefügter Text
<sub> – Tiefgestellter Text
<sup> – Hochgestellter Text

Um den Artikel zusammenzufassen, haben wir die folgenden Funktionen und Grundlagen von HTML gelernt:

HTML-Struktur
Tags, Elemente und ihre Typen
Grundlegende Tags und ihre Anwendungen

All diese Funktionen, Tags und Attribute helfen, die Notwendigkeit von HTML zu verstehen.

Wenn Sie mehr über Full-Stack-Softwareentwicklung erfahren möchten, schauen Sie sich das Executive PG-Programm in Full-Stack-Softwareentwicklung von upGrad & IIIT-B an, das für Berufstätige konzipiert ist und mehr als 500 Stunden strenge Schulungen, mehr als 9 Projekte, und Aufgaben, IIIT-B-Alumni-Status, praktische praktische Abschlussprojekte und Arbeitsunterstützung bei Top-Unternehmen.

Bereiten Sie sich auf eine Karriere der Zukunft vor

Bewerben Sie sich jetzt für den Master in Software Engineering