HTML-Tutorial für Anfänger
On September 28, 2021 by adminWenn Sie Webmaster werden und lernen wollen, wie man eine Website erstellt, finden Sie die Aussicht, sich mit HTML vertraut zu machen, vielleicht ziemlich entmutigend.
Dies lässt sich jedoch nicht vermeiden, da die überwiegende Mehrheit der Webseiten, die Sie besuchen, mit HTML-Elementen geschrieben und strukturiert wurden. Tatsächlich wird HTML heute von mehr als 74 % aller bekannten Websites verwendet, wobei diese Sprache auch dazu beiträgt, alles zu verbessern, vom Design Ihrer Website bis hin zur Qualität der darin enthaltenen Inhalte.
In diesem Leitfaden werden wir die Grundprinzipien von HTML und seine Anwendungsmöglichkeiten untersuchen, bevor wir uns Beispiele für die einzelnen Elemente ansehen, die Sie bei der Codierung Ihrer Website verwenden.
Was ist HTML?
In einfachen Worten stellt HTML die Standardauszeichnungssprache für die Erstellung von Webseiten im Internet dar. Die Abkürzung steht für Hyper Text Markup Language und dient in erster Linie dazu, die Struktur, das Layout und die Präsentation der einzelnen Landing Pages festzulegen. Obwohl Webbrowser die HTML-Sprache nicht direkt anzeigen, spielt sie eine zentrale Rolle bei der Erstellung einer sichtbaren, leicht zugänglichen und benutzerfreundlichen Website.
HTML wird auch durch eine Reihe von einzelnen Elementen unterstützt, die nach und nach Webseiten aufbauen, die Präsentation von Inhalten strukturieren und Ihre Website zum Leben erwecken. Diese Elemente werden innerhalb von „Tags“ erstellt und enthalten, die abwechselnde Inhalte wie Überschriften, Absätze und ähnliche Beispiele definieren.
Wir werden diese Elemente und ihren Aufbau im Folgenden genauer untersuchen und dabei auch darauf eingehen, wie sie personalisiert werden können, um Farbe, Links und variable Typografie in Ihre Website einzuführen.
Die Zeitleiste der Webtechnologien:
- 1991 – HTML
- 1994 – HTML2
- 1996 – CSS1 + JavaScript
- 1997 – HTML4
- 1998 – CSS2
- 2000 – XHTML1
- 2002 – Tabellenloses Webdesign
- 2005 – AJAX
- 2009 – HTML5
Wo wird HTML verwendet?
Populäre Websites, die HTML verwenden:
- Wikipedia.org
- Google.com
- YouTube.com
- Facebook.com
- Yahoo.com
- Baidu.com
- Reddit.com
Wie wir sehen, ist die häufigste Anwendung für HTML die Gestaltung der einzelnen Landing Pages, aus denen Ihre Website besteht. Dies ist jedoch nicht die einzige Anwendung des beliebten Programmierwerkzeugs. Wenn Sie die zusätzlichen Einsatzmöglichkeiten verstehen, können Sie als neuer Webmaster das Beste aus der Sprache herausholen. Hier sind einige weitere Anwendungsmöglichkeiten für HTML:
- Erstellen Sie anpassbare Elemente innerhalb einer bestehenden Seite. Wenn Sie beabsichtigen, Kommentare zu Blogbeiträgen oder die Veröffentlichung von nutzergenerierten Inhalten auf Ihrer Website zuzulassen, können Sie HTML-Codefragmente verwenden, um dies zu ermöglichen. Diese Elemente ermöglichen es den Benutzern, Schlüsselwörter hervorzuheben, Links einzubetten und Kommentare zu formatieren, je nach den Einschränkungen, die Sie als Moderator festlegen.
- Erstellen Sie zusätzliche Inhalte für E-Mails. E-Mail verwendet HTML auch als Sprache für Rich-Text-Nachrichten, die Links, Text und eine Vielzahl anderer Elemente enthalten, die in reinem Text nicht dargestellt werden können. Wenn Sie also ein Ebook, das sich auf Ihre Website bezieht, per E-Mail weitergeben möchten, können Sie HTML verwenden, um die Wirkung Ihrer Nachricht zu optimieren.
- Offline-Hilfedokumente verstehen, die auf Ihrem Computer installiert sind. Interessanterweise wird HTML als Format für computerbasierte Hilfedokumente verwendet, die offline zugänglich sind. Grundlegende HTML-Kenntnisse können Ihnen daher helfen, Probleme mit Ihrer Hardware zu verstehen und schneller zu beheben, was wiederum dazu führen kann, dass Sie Ihre Website schneller wiederherstellen können, wenn sie offline gegangen ist.
HTML-Seitenstruktur
Bevor Sie eine HTML-Seite aufbauen können, müssen die Grundlagen vorhanden sein.
Typischerweise besteht eine Seite aus drei Strukturelementen:
- Kopfzeile: Die Kopfzeile enthält Inhalte, die für alle Seiten Ihrer Website relevant sind, z. B. ein Logo oder den Namen der Website sowie ein Navigationssystem. Die Kopfzeile ist auf jeder Seite zu sehen.
- Hauptteil: Dieser nimmt den größten Bereich einer Webseite ein. Er enthält spezifische Inhalte für die angezeigte Seite.
- Fußzeile: Der Inhalt der Fußzeile enthält in der Regel Kontaktinformationen, eine Lieferadresse oder rechtliche Hinweise. Wie die Kopfzeile erscheint die Fußzeile auf jeder Seite, aber sie ist unten positioniert.
So sehen diese grundlegenden Strukturelemente aus, wenn sie zusammenkommen:
<html>
<head>
Hier können Sie Text oder Code einfügen, wie zum Beispiel einen
Google Analytics Tracking Code.
</head>
<body>
Der Hauptteil deiner Seite kommt
hier hin. Füllen Sie ihn mit Text und Bildern!
</body>
</html>
Hier ist ein weiteres Beispiel für die Verwendung von Kopfzeilen-Tags und dem Absatz-Tag, um den Inhalt ästhetisch zu strukturieren. Außerdem haben wir ein Footer-Tag für Inhalte unterhalb des Hauptteils einer Seite eingefügt:
<html>
<head>
Hier können Sie Text oder Code einfügen, wie z.B. einen
Google Analytics Tracking Code
.
</head>
<body>
<h1>Meine erste Überschrift</h1>
<p>Willkommen auf meinerWebsite!</p>
<Fußzeile>
<p>Kontaktinformationen könnten hier stehen</p>
</fußzeile>
</body>
</html>
HTML-Tags
Der Ausgangspunkt für jeden HTML-Code sind einzelne Tags, mit denen alle wichtigen Elemente erstellt werden können und die zur Strukturierung der Webseiten beitragen.
Führende Technologien für HTML-Tags im Web
- HTML5 Canvas Tag – 0,27%
- HTML5 Audio Tag – 0,29%
- HTML5 Video Tag – 0,69%
- HTML5 SVG Tag – 3,1%
- HTML5 Embed Tag – 6.54%
Im Folgenden werfen wir einen Blick auf die gebräuchlichsten Tags, bevor wir untersuchen, wie sie genutzt werden können, um spezifische On-Page-Elemente zu erzeugen:
Überschriftstags
Alle Online-Dokumente, einschließlich Webseiten, beginnen mit einer Überschrift. Diese werden mit Hilfe von HTML-Tags aufgebaut, wobei die Sprache derzeit bis zu sechs Elemente in unterschiedlicher Größe zulässt, die es Ihnen auch ermöglichen, Ihren Inhalt mit zusätzlichen Titeln, Untertiteln und hervorgehobenen Zeilen mit fettgedrucktem Text zu strukturieren. Um Ihre Überschrift zu beginnen, stellen Sie dem entsprechenden Text einfach den Tag <h1> , <h2> , <h3> , <h4> , <h5> oder <h6> vor, je nach gewünschter Größe.
Dann muss am Ende der Überschrift ein abschließender Tag angebracht werden, um den Text zu kapseln, der im HTML-Format wie folgt angezeigt wird:
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
Nach der Bestätigung wird dies auf der Landing Page Ihrer Website wie folgt aussehen:
Das ist die Überschrift 2
Das ist die Überschrift 3
Das ist die Überschrift 4
Das ist die Überschrift 5
Das ist die Überschrift 6
Hier sind die verschiedenen Größen der variablen Überschriften deutlich zu erkennen, ebenso wie die Tatsache, dass der Browser eine Zeile vor und nach der Überschrift einfügt. Sie werden auch feststellen, dass der schließende Tag am Ende des Überschriftstextes eine etwas andere Ästhetik hat, aber darauf werden wir im folgenden Kapitel eingehen, wenn wir uns mit der Verwendung von Tags zur Definition spezifischer Elemente befassen.
Absatz-Tags
Ein ähnliches Prinzip gilt für den Beginn von Absatz-Tags, die durch <p> dargestellt werden. Auf diese Weise können Sie Ihren Inhalt strukturieren und in relevante Absätze unterteilen, was wiederum zu einem einfacheren und nahtloseren Leseerlebnis führt. Auch hier sollte der <p>-Tag am Anfang des entsprechenden Textes stehen, bevor der alternative schließende Tag am Ende angebracht wird, um den Effekt zu vervollständigen. Im Gegensatz zu den Überschriften-Tags gibt es jedoch keine verschiedenen Zahlen, die die Größe des Textes im Absatz verändern können.
Zum Beispiel:
<p>Your First Paragraph</p>
<p>Your Second Paragraph</p>
<p>Your Third Paragraph</p>
Außerhalb des HTML-Formats wird der Text auf Ihrer fertigen Webseite wie folgt aufgeteilt:
Ihr erster Absatz
Ihr zweiter Absatz
Ihr dritter Absatz
Zeilenumbruch-Tags
Die ersten Beispiele stellen die grundlegendsten HTML-Tags dar, aber es gibt auch andere, die ein anderes Format und alternative Schlusszeichen verwenden. Ein Beispiel ist der Zeilenumbruch, mit dem eine Unterscheidung getroffen wird, bei der Textzeilen umbrochen und in der nächsten Zeile fortgesetzt werden. Es besteht ein wesentlicher Unterschied zwischen Zeilenumbrüchen und Absätzen im Bereich HTML, denn während letztere Standard-Blockelemente sind, die Text enthalten, schafft ersterer eine Trennung innerhalb eines bestehenden <p>-Elements.
Daher stellen Zeilenumbrüche in HTML ein leeres Element dar und werden daher weder durch öffnende noch schließende Tags definiert. Stattdessen werden sie durch den <br />-Tag dargestellt, der in bestehende <p>-Elemente eingefügt werden kann, um den Text zu unterbrechen und möglicherweise wichtige Informationen hervorzuheben. Das einzelne Leerzeichen zwischen dem Zeichen <be> und dem Schrägstrich ist entscheidend, da der Tag sonst im HTML-Format nicht erkennbar ist.
Hier ein Beispiel:
<p>Guten Morgen<br/>
Vielen Dank für Ihre Anfrage, wir werden uns bei Ihnen melden, falls wir noch etwas benötigen. <br />
Mit freundlichen Grüßen<br />
Herr J. Einsen</p>
Einmal angewandt, wird dies den Text wie folgt aufbrechen:
Guten Morgen,
Vielen Dank für Ihre Anfrage, wir werden uns mit Ihnen in Verbindung setzen, wenn wir noch etwas benötigen.
Mit freundlichen Grüßen
Herr Jones
Wie Sie sehen, können Sie Zeilenumbrüche innerhalb eines bestehenden Absatzelements beliebig oft einfügen, solange sie einen Mehrwert darstellen und die Informationen leichter verdaulich machen. Sie werden auch sehen, dass die Tags für den öffnenden und schließenden Absatz unverändert bleiben, während die Tags für den Zeilenumbruch verwendet werden, um das Layout des darin enthaltenen Textes zu ändern.
Dies ist eines der Beispiele dafür, wie HTML-Tags verwendet werden können, um bestehende Elemente zu ändern, was eine Schlüsselrolle bei der Definition des visuellen Layouts Ihrer Webseiten und Inhalte spielt.
Horizontale Linien
Auch andere Tags können innerhalb des <p>-Elements oder zur weiteren Trennung von Textkörpern auf Ihrer Webseite verwendet werden. Eines der am häufigsten verwendeten Tags ist das <hr>-Element, mit dessen Hilfe ein leeres Element erstellt werden kann, das eine visuelle, horizontale Linie zwischen alternativen Abschnitten eines Online-Dokuments zieht. Sie können zum Beispiel eine Linie zwischen zwei Textabschnitten setzen, um den Leser neu zu orientieren oder einfach ein neues visuelles Element einzuführen. So erzeugen Sie eine solche Unterbrechung in HTML:
<p>Your First Paragraph</p>
<hr />
<p>Your Second Paragraph</p>
Hier hebt die Unterbrechung zwischen den hr-Zeichen und dem Schrägstrich die Konstruktion eines leeren Elements hervor, während wiederum kein schließendes Tag erforderlich ist, um den Effekt zu vervollständigen. So entsteht das folgende Bild:
Ihr erster Absatz
Ihr zweiter Absatz
Bild-Tags
Bild-Tags stellen in HTML ebenfalls leere Elemente dar, was wiederum bedeutet, dass sie keinen schließenden Tag aufweisen. Da sie nur Attribute enthalten, die sich auf die URL des Bildes beziehen, das Sie auf der Website einbetten, werden sie einfach durch den <img >-Tag am Anfang des Elements definiert. Sie können an beliebiger Stelle auf Ihrer Website platziert werden, obwohl es unüblich ist, sie in bestehende Elemente wie Absätze oder Überschriften einzufügen. So sieht ein typisches HTML-Bild-Tag aus:
<img src=“url“ alt=“some_text“ style=“width:width;height:height;“>
Sie sollten auch einen alternativen Text für Ihr Bild angeben, der bei langsamen Ladezeiten oder der Verwendung von Bildschirmlesegeräten hilft, es zu betrachten. Wenn der Browser ein Bild nicht finden kann, zeigt er den Betrachtern den Wert des alternativen Attributs an. Auch hier wird das Bild-Tag verwendet, aber mit einer anderen Reihe von Attributen:
<img src=“ wrongname.gif “ alt =“ HTML5 Icon“ style=“ width: 128px; height : 128px; “ >
HTML-Elemente
Zuvor haben wir uns angesehen, wie einfache HTML-Tags verwendet werden, um Elemente auf der Seite zu definieren, während wir auch untersucht haben, wie sie weiter angepasst werden können, indem leere Elemente verwendet werden, die Bild- und Zeilenumbruch-Tags enthalten. Dies hilft uns, die Beziehung zwischen Tags und Elementen zu verstehen und wie sie verwendet werden können, um verschiedene Arten von Inhalten auf Ihrer Website zu definieren.
Während alle Aspekte der HTML-Sprache durch ein Tag dargestellt werden, muss ein definiertes Element, das Inhalte enthält, sowohl ein Anfangs- als auch ein Schlusstag haben. Überschriften und Absätze sind also HTML-Elemente, weil sie Anfangs- und End-Tags verwenden, um den entsprechenden Text zu kapseln und zu ergänzen. Im Gegensatz dazu enthalten leere Elemente entweder Attribute oder gar keinen Inhalt, so dass sie innerhalb bestehender Elemente verwendet werden können, ohne dass ein schließendes Tag erforderlich ist.
Definieren von HTML-Elementen
Bei der Verwendung von Beispielen wie Überschriften und Absätzen ist die korrekte Anwendung von Anfangs- und Schlusstags entscheidend. Das Anfangs-Tag (z.B. <h1> oder <p>) definiert das betreffende Element, während das Schluss-Tag sicherstellt, dass dieses Element nicht auf der restlichen Webseite fortgesetzt wird. Wird das schließende </ p>-Tag beispielsweise am Ende eines gewünschten Absatzes nicht verwendet, erscheint der Text in einem einzigen Block, der unansehnlich und äußerst schwer lesbar ist.
Alle schließenden Tags sind mit den beginnenden Tags identisch, abgesehen von der Tatsache, dass erstere einen Schrägstrich vor den entsprechenden Zeichen enthalten. Im Falle einer <h1>Überschrift lautet der schließende Tag also </ h1>, während Sie bei Absätzen immer </ p> verwenden, um den Textumbruch zu definieren. Bei der Programmierung von Überschriften ist darauf zu achten, dass die von Ihnen verwendete Nummer (z. B. h1 oder h2) sowohl im Anfangs- als auch im End-Tag verwendet wird.
Verwendung von verschachtelten HTML-Elementen
In diesem Stadium ist es klar, dass HTML-Dokumente und Webseiten aus einem Baum verschiedener Elemente bestehen, die als Bausteine für eine Reihe von Inhalten dienen. Wir haben uns auch angesehen, wie diese Elemente geformt und zur Strukturierung von Online-Inhalten verwendet werden können, und wir werden dies nun fortsetzen, indem wir uns verschachtelte HTML-Elemente ansehen.
Genauso wie leere Elemente und eigenständige Tags (wie <br / >) in definierte HTML-Elemente eingefügt werden können, können sogenannte verschachtelte Elemente auch innerhalb von Inhalten wie Überschriften und Absätzen untergebracht werden. Dazu gehören Beispiele wie fette und kursive Schrift und unterstrichener Text. Sie können verwendet werden, um Ihrem Inhalt Persönlichkeit zu verleihen und das Auge des Lesers auf bestimmte Punkte von Interesse zu lenken.
Fett, kursiv und durchgestrichen in HTML
Angenommen, Sie möchten ein Wort innerhalb eines bestehenden Absatzelements hervorheben. Sie können dies erreichen, indem Sie es fett machen, indem Sie einfache Tags innerhalb des Standardelements <p> verwenden. Mit HTML programmieren Sie dies wie folgt:
<p>Ich möchte, dass <b>dieses</b> Wort fett dargestellt wird. </p>
Hier hat das verschachtelte Element sowohl einen Anfangs- als auch einen Schlusstag, die jeweils ein ähnliches Format wie Überschriften und Absätze haben. Sie können nahtlos in bestehende Elemente eingefügt werden und führen in diesem Fall zu den folgenden Ergebnissen:
Ich möchte, dass dieses Wort fett gedruckt wird.
Angenommen, Sie möchten auch die Typografie dieses Wortes ändern, so dass es auch kursiv gedruckt wird. Dies kann einfach durch Hinzufügen eines weiteren verschachtelten Elements erreicht werden, das wie folgt kodiert werden sollte:
<p>Ich möchte, dass <b><i>dieses</b></i> Wort fett gedruckt wird.</ p>
Wie Sie sehen, wurden die Tags für den Beginn und das Ende der Kursivschrift einfach in das <p>Element integriert. Dadurch wird der Inhalt des Elements nun so umgewandelt, dass er wie folgt aussieht:
Ich möchte, dass dieses Wort fett gedruckt wird.
Natürlich können Sie sich entscheiden, dass Sie dieses Wort lieber anders hervorheben möchten. Sie können daher ein anderes verschachteltes Element verwenden, z. B. das Durchstreichen (das durch die Tags <s> und </s> dargestellt wird. Diese Tags können auf die gleiche Weise innerhalb des <p>-Elements angewendet werden und sehen in HTML wie folgt aus:
<p>Ich möchte, dass <s>dieses</s> Wort durchgestrichen wird. </p>
In diesem Fall wird der Text wie folgt auf Ihrem Dokument oder Ihrer Landing Page erscheinen:
Ich möchte, dass dieses Wort durchgestrichen wird.
Dies bietet einen Einblick in die Elemente, die durch Tags gebildet werden können, die wiederum die Struktur Ihrer Webseiten und deren Inhalt definieren. Darüber hinaus können auch leere und verschachtelte Elemente verwendet werden, um den Inhalt weiter zu definieren.
HTML-Attribute
Wenn Tags die Bausteine sind, die Elemente konstruieren und definieren, dann können HTML-Attribute verwendet werden, um ihre Eigenschaften (wie Stil, Farbe und Sprache) anzupassen. Alle HTML-Elemente haben Kernattribute, die Kerninformationen liefern und immer innerhalb des stat-Tags angegeben werden. Sie werden in der Regel paarweise verwendet und haben oft das folgende Format: name=“value“
Vereinfacht ausgedrückt, steht der Name für die Eigenschaft, die Sie festlegen möchten, während der Wert sich auf die spezifischen Kriterien bezieht, die Sie einbeziehen möchten.
Es gibt eine große Anzahl von Attributen, die auf Ihre HTML-Elemente angewendet werden können, aber diejenigen, die für angehende Webmaster am wichtigsten sind, sind:
Das Attribut „lang“
Das einfachste Attribut definiert die Sprache des Dokuments und seiner Elemente. Es wird mit dem Attribut „lang“ deklariert, und obwohl es leicht übersehen wird, hat es den Vorteil, dass der Inhalt für Bildschirmleser und Suchmaschinen besser zugänglich ist. Es wird in der Regel am Anfang des Dokuments in folgendem Format dargestellt:
<html lang=“en-US“ >
Nach dem lang-Attribut geben die ersten beiden Buchstaben die Sprache an (in diesem Fall Englisch). Nach dem Bindestrich geben die nächsten beiden Buchstaben den Dialekt an, der jedoch nicht bei jeder Sprache vorhanden ist. Es ist wichtig, dass Sie dieses Attribut richtig verwenden, wenn Sie Ihr Publikum erfolgreich ansprechen wollen.
Das Attribut ‚align‘
Wir haben bereits das Format von HTML-Attributen (name=“value“) angesprochen, und die beste Verkörperung dessen ist, wenn Sie versuchen, den Inhalt innerhalb Ihrer Elemente auszurichten. Sie können z. B. beschließen, alle Absätze auf einer bestimmten Seite zentriert auszurichten, wobei die Ausrichtung die Eigenschaft ist, die Sie festlegen möchten. Anschließend ist „center“ der Wert des Attributs, obwohl Sie die Wahl haben, Ihren Text links oder rechts auszurichten.
Beispiel:
<p align="center" >This text is center aligned</p>
Damit werden Ihre <p>Elemente in der Mitte der Seite ausgerichtet und ein einheitliches Layout geschaffen, das den Besonderheiten Ihrer Website entspricht (siehe unten):
Dieser Text ist mittig ausgerichtet
Dieser Text ist mittig ausgerichtet
Dieser Text ist mittig ausgerichtet
Das ‚href‘-Attribut
Wenn Sie eine sichtbare Website aufbauen wollen, ist es wichtig, dass Sie sowohl eingehende als auch ausgehende Links einbinden. Der Aufbau eines Link-Portfolios, das Backlinks zu internen Landingpages enthält, ist ebenfalls eine praktikable Strategie, weshalb Sie lernen müssen, wie man diese in HTML kodiert.
HTML-Links werden mit dem <a>Tag definiert, der den Ziellink zusammen mit dem zugehörigen Ankertext enthält, der die URL enthält. Es ist das Attribut „href“, das die Adresse der Website angibt, das jedoch als Teil des Start-Tags integriert ist. Es ist in HTML wie folgt kodiert:
<a href=“https://www.google.com“ >Google</a>
Dies hebt den Unterschied zwischen dem Start- und dem Schlusstag deutlich hervor und wird auf Ihrer Landing Page wie folgt übersetzt:
Das Attribut „Farbe“
Dies ist ein weiteres wichtiges Attribut, denn die Verwendung von Farben kann Ihrer Website Leben einhauchen und gleichzeitig dazu beitragen, wichtige Kontraste und eine starke Designästhetik zu schaffen. In HTML kann eine Farbe durch ihren Namen angegeben werden, obwohl es auch möglich ist, einen RGB- oder einen HEX-Wert zu verwenden, um dieses Ziel zu erreichen. Die erste Option ist jedoch am einfachsten zu befolgen, da sie auch auf Überschriften, Absätze und andere Elemente auf Ihrer Seite angewendet werden kann.
Dies ist ein Stilattribut, wobei die von Ihnen gewählte Farbe den Wert darstellt, den Sie festlegen möchten. Wenn Sie zum Beispiel die Farbe Rot auf die Hauptüberschrift anwenden, sieht es wie folgt aus:
<h3 style=“color:red“>Textfarbe durch Verwendung von rot</h3>
Nach der Anwendung wird dieses Element auf Ihrer Website wie folgt aussehen:
Textfarbe in Rot
Auch hier gibt es eine klare Unterscheidung zwischen dem einleitenden und dem abschließenden Tag, die das Element definieren, während dies eines der am einfachsten anzuwendenden Attribute in HTML ist. Außerdem wird das name=“value“-Format von HTML-Attributen hervorgehoben, was das Erlernen und Anwenden dieser Attribute auf Ihrer Website wesentlich erleichtert.
Testen Sie es selbst
Mit einem grundlegenden Verständnis von HTML und seinen einzelnen Elementen besteht der nächste Schritt darin, einige einfache Projekte durchzuführen und Ihr theoretisches Wissen anzuwenden, um praktische Herausforderungen zu lösen.
In der folgenden Übung haben wir einen Text vorgestellt und gebeten, verschiedene Aspekte mit HTML zu formatieren. Verwenden Sie den Leitfaden und alles, was Sie bisher gelernt haben, um die Aufgabe zu lösen, während Sie sich auf die Programmierung Ihrer eigenen Website vorbereiten.
<h1>Main Header
<p>Welcome to our website, Example.com! We hope you enjoy reading our content , feel free to reach out to us. </p>
<p>Thanks for visiting! </p>
<p>Learn more. </p>
Fragen:
- Vervollständigen Sie das Kopfzeilenelement mit dem richtigen schließenden Tag.
- Machen Sie die Kopfzeile fett.
- Fügen Sie eine horizontale Linie unter der Kopfzeile ein.
- Verwenden Sie das Farbattribut und schattieren Sie „Danke für den Besuch“ in Grün
- Fügen Sie diesen Hyperlink (https://www.w3schools.com/html/) in den Ankertext „Erfahren Sie mehr.“
- Verwenden Sie im Kopf der Seite das Format name=“value“, um die Absätze links auszurichten
Statistiken und Fakten zur HTML-Sprache
- Die HTML-, head- und body-Elemente sind seit Mitte der 1990er Jahre Teil der HTML-Spezifikation, und bis vor einigen Jahren waren sie die wichtigsten Elemente, die zur Strukturierung von HTML-Dokumenten verwendet wurden. Die Situation hat sich jedoch in den letzten Jahren dramatisch verändert, da HTML5 eine Reihe neuer Tags hinzugefügt hat, die verwendet werden können, um der Struktur eines HTML-Dokuments eine reichhaltige semantische Bedeutung zu verleihen.
- HTML-Dokumente müssen mit einer Document Type Declaration (informell „doctype“) beginnen. In Browsern hilft der Doctype dabei, den Rendering-Modus zu definieren. HTML5 definiert keine DTD; daher ist die Doctype-Deklaration in HTML5 einfacher und kürzer.
- Mobile Browser haben HTML5 vollständig übernommen, so dass die Erstellung von Projekten für mobile Geräte genauso einfach ist wie das Entwerfen und Konstruieren für die kleineren Touchscreen-Displays – daher die Popularität von Responsive Design. Es gibt einige großartige Meta-Tags, die es Ihnen ermöglichen, auch für mobile Geräte zu optimieren.
- 78 % der Inhaltsentwickler stimmen zu, dass die Struktur für die Erstellung von mobilen Apps geeignet ist, und 68 % sagen, dass sie für die Gestaltung aller Arten von Apps geeignet ist.
- HTML5 verfügt außerdem über eine Reihe großartiger APIs, die es Ihnen ermöglichen, ein besseres Benutzererlebnis und eine leistungsfähigere, dynamischere Webanwendung zu erstellen – hier eine kurze Liste der nativen APIs:
- Drag and Drop (DnD)
- Offline-Speicherdatenbank
- Verwaltung des Browserverlaufs
- Dokumentenbearbeitung
- Zeitgesteuerte Medienwiedergabe
- HTML5 wird nicht von einem einzigen Unternehmen kontrolliert. Eine seiner besten Eigenschaften liegt in der Tatsache, dass es ein offener Standard ist. Entwickler haben die Freiheit, ihrer Kreativität freien Lauf zu lassen und so viele Funktionen und Merkmale hinzuzufügen, wie sie nur können.
- Im Vergleich zu anderen Browsern wird bei jeder Aktualisierung von Google Chrome darauf geachtet, dass die Unterstützung für HTML5 enthalten ist. Außerdem ist der Standardplayer von YouTube jetzt HTML5 und die Flash-Anzeigen von Google werden jetzt in HTML5 umgewandelt.
- Nutzung von HTML5 durch Entwickler (nach Region):
- Nord- und Lateinamerika – 70%
- Südamerika – 61%
- ASPAC – 60%
- Australien – 60%
- Europa – 59%
- Afrika – 50%
Abschluss
Während HTML erst 1991 geschaffen wurde (die erste Version der Programmiersprache wurde 1995 eingeführt), hat es sich schnell zu einem bahnbrechenden Werkzeug für die Gestaltung funktioneller und optisch ansprechender Websites entwickelt. Der Einfluss von HTML entwickelt sich weiter, und die neueste Version (HTML5) wird von einer wachsenden Zahl von Websites auf der ganzen Welt übernommen.
In dieser Hinsicht ist das Erlernen der grundlegenden Elemente von HTML und deren Anwendung der wichtigste Schritt, um eine erfolgreiche, sichtbare und letztlich wettbewerbsfähige Website zu erstellen.
Schreibe einen Kommentar