HTML für Anfänger:

Die Zeitleiste der Webtechnologien


2009

2005

2002

2000

1998

1997

1996

1994

1991

HTML5

AJAX

Tableless Web Design

XHTML1

CSS2

HTML4

CSS1 + JavaScript

HTML2

HTML

Contents

Einführung

Wenn Sie Webmaster werden und lernen möchten, wie man eine Website erstellt, ist die Aussicht, sich mit HTML vertraut zu machen, möglicherweise ziemlich entmutigend.

Dies kann jedoch nicht vermieden werden, da die überwiegende Mehrheit der von Ihnen besuchten Website-Zielseiten mithilfe von HTML-Elementen geschrieben und strukturiert wurde. In der Tat ist HTML jetzt wird von mehr als 74% aller bekannten Websites verwendet, Diese Sprache hilft auch dabei, alles vom Design Ihrer Website bis zur Qualität der darin enthaltenen Inhalte zu verbessern.

In diesem Handbuch werden die Grundprinzipien von HTML und seine potenziellen Anwendungen erläutert, bevor Beispiele für die einzelnen Elemente betrachtet werden, die Sie beim Codieren Ihrer Website verwenden.

Was ist HTML??

Prozentsatz der Websites, die verschiedene HTML-Unterkategorien verwenden

verschiedene Unterkategorien von HTML-Prozentsätzen

In einfachen Worten, HTML repräsentiert die Standard-Markup-Sprache zum Erstellen von Webseiten online. Es steht für Hyper Text Markup Language und hat in erster Linie die Aufgabe, die Struktur, das Layout und die Darstellung einzelner Zielseiten festzulegen. Während Webbrowser die HTML-Sprache nicht direkt anzeigen, spielt sie eine entscheidende Rolle bei der Erstellung einer sichtbaren, zugänglichen und benutzerfreundlichen Website.

HTML wird auch durch eine Reihe einzelner Elemente untermauert, die nach und nach Webseiten erstellen, die Präsentation von Inhalten strukturieren und Ihre Website zum Leben erwecken. Diese Elemente werden erstellt und in „Tags“ enthalten, die alternative Inhalte wie Überschriften, Absätze und ähnliche Beispiele definieren.

Wir werden diese Elemente und ihre Konstruktion im Folgenden genauer untersuchen und untersuchen, wie sie personalisiert werden können, um Ihrer Website Farbe, Links und variable Typografie hinzuzufügen.


Wo wird HTML verwendet??

Beliebte Websites mit HTML

Wo wird HTML verwendet?

Wie wir sehen können, ist die häufigste Anwendung für HTML das Design der einzelnen Zielseiten, aus denen Ihre Website besteht. Dies ist nicht die einzige Anwendung des beliebten Codierungswerkzeugs. Wenn Sie jedoch die zusätzlichen Verwendungsmöglichkeiten kennen, können Sie als neuer Webmaster die Sprache optimal nutzen. Hier sind einige der weiteren Möglichkeiten, wie HTML angewendet werden kann:

  • Erstellen Sie anpassbare Elemente auf einer vorhandenen Seite

    Wenn Sie Kommentare zu Blog-Posts oder vom Benutzer erstellte Inhalte auf Ihrer Website zulassen möchten, können Sie HTML-Codefragmente verwenden, um dies zu aktivieren. Mit diesen Elementen können Benutzer Schlüsselwörter hervorheben, Links einbetten und Kommentare formatieren, abhängig von den Einschränkungen, die Sie als Moderator festgelegt haben.

  • Erstellen Sie zusätzlichen Inhalt für E-Mail

    E-Mail verwendet auch HTML als Sprache für Rich-Text-Nachrichten, die Links, Text und eine Vielzahl anderer Elemente enthalten, die nicht nur im Klartext enthalten sein können. Wenn Sie also ein E-Book, das sich auf Ihre Website bezieht, per E-Mail freigeben möchten, können Sie HTML verwenden, um die Wirkung Ihrer Nachricht zu optimieren.

  • Grundlegendes zu Offline-Hilfedokumenten, die auf Ihrem Computer installiert sind

    Interessanterweise wird HTML als Format für computergestützte Hilfedokumente verwendet, auf die offline zugegriffen werden kann. Grundlegende HTML-Kenntnisse können Ihnen daher helfen, Probleme mit Ihrer Hardware zu verstehen und schneller zu beheben. Dies kann wiederum sicherstellen, dass Sie Ihre Website in Fällen, in denen sie offline ist, schneller wiederherstellen können.

HTML & CSS
HTML & CSS anzeigen [Spickzettel]

HTML-Seitenstruktur

</strong><br/> <strong>
Seiteninhalt

Die HTML-, Kopf- und Body-Elemente sind seit Mitte der neunziger Jahre Teil der HTML-Spezifikation und waren bis vor einigen Jahren die Hauptelemente, mit denen HTML-Dokumente strukturiert wurden.
Die Situation hat sich jedoch in den letzten Jahren dramatisch geändert, da HTML5 eine Reihe neuer Tags hinzugefügt hat, mit denen der Struktur eines HTML-Dokuments eine umfassende semantische Bedeutung hinzugefügt werden kann.

HTML-Dokumente sind erforderlich, um mit einer Dokumenttypdeklaration (informell ein „Doctype“) zu beginnen. In Browsern hilft der Doctype beim Definieren des Rendering-Modus. HTML5 definiert keine DTD. Daher ist in HTML5 die Doctype-Deklaration einfacher und kürzer.


Bevor Sie eine HTML-Seite erstellen können, müssen die Grundlagen vorhanden sein.

In der Regel besteht eine Seite aus drei Strukturelementen:

1. Header: Die Kopfzeile enthält Inhalte, die für alle Seiten Ihrer Website relevant sind, z. B. ein Logo oder einen Website-Namen sowie ein Navigationssystem. Die Kopfzeile wird auf jeder Seite angezeigt.

2. Hauptkörper: Dies nimmt den größten Bereich auf einer Webseite ein. Es enthält Inhalte, die für die angezeigte Seite spezifisch sind.

3. Fußzeile: Der Inhalt der Fußzeile enthält normalerweise Kontaktinformationen, eine Lieferadresse oder rechtliche Hinweise. Wie die Kopfzeile wird die Fußzeile auf jeder Seite angezeigt, befindet sich jedoch unten.

So sehen diese grundlegenden Strukturelemente aus, wenn sie zusammenkommen:


Sie können hier Text oder Code einfügen, z
Google Analytics-Tracking-Code für
Beispiel.

Der Hauptteil Ihrer Seite geht
Hier. Füllen Sie es mit Text und Bildern!

Hier ist ein weiteres Beispiel, bei dem Header-Tags und Absatz-Tags verwendet werden, um den Inhalt ästhetisch zu strukturieren. Außerdem haben wir ein Fußzeilentag für Inhalte unterhalb des Hauptteils einer Seite eingefügt:


Sie können hier Text oder Code einfügen, z
Google Analytics-Tracking-Code für
Beispiel.

Meine erste Überschrift

Willkommen auf meiner Website!

Kontaktinformationen könnten hier gehen


HTML-Tags

HTML-Tags

Ausgangspunkt für jeden HTML-Code sind einzelne Tags, mit denen Sie alle wichtigen Elemente erstellen und Ihre Webseiten strukturieren können. Im Folgenden werden wir uns die gängigsten Tags ansehen, bevor wir untersuchen, wie sie genutzt werden können, um bestimmte Elemente auf der Seite zu generieren:

Überschriften-Tags

Alle Online-Dokumente, einschließlich Webseiten, beginnen mit einer Überschrift. Diese werden mithilfe von HTML-Tags erstellt. In der Sprache sind derzeit bis zu sechs Elemente mit variabler Größe zulässig, mit denen Sie Ihren Inhalt mit zusätzlichen Titeln, Untertiteln und hervorgehobenen fett gedruckten Textzeilen strukturieren können. Um Ihre Überschrift zu beginnen, stellen Sie dem entsprechenden Text einfach das vor

,

,

,

,

oder
Tag abhängig von der gewünschten Größe.
Sie müssen dann am Ende der Überschrift ein schließendes Tag anwenden, um den Text zu kapseln. Dieses wird im HTML-Format wie folgt angezeigt:

Es gibt 12 Kategorien von Tags:


Dies ist Überschrift 1

Dies ist Überschrift 2

Dies ist Überschrift 3

Dies ist Überschrift 4

Dies ist Überschrift 5

Dies ist Überschrift 6

Führende HTML-Tags-Technologien
im Web teilen

0,27%

HTML5
Leinwand-Tag

0,29%

HTML5
Audio-Tag

0,69%

HTML5
Video-Tag

3,1%

HTML5
SVG-Tag

6,54%

HTML5
Tag einbetten


Nach der Bestätigung führt dies zu der folgenden Ästhetik auf Ihrer Website’s Zielseite:

Dies ist Überschrift 1

Dies ist Überschrift 2

Dies ist Überschrift 3

Dies ist Überschrift 4

Dies ist Überschrift 5

Dies ist Überschrift 6

Hier sind die verschiedenen Größen der variablen Überschriften deutlich zu sehen, ebenso wie die Tatsache, dass der Browser vor und nach der Überschrift eine Zeile hinzufügt. Sie werden auch feststellen, dass das schließende Tag am Ende des Überschriftentextes eine etwas andere Ästhetik hat, dies wird jedoch im folgenden Kapitel behandelt, da wir versuchen, Tags zum Definieren bestimmter Elemente zu verwenden.

Absatz-Tags

Video- und Audio-Unterstützung
Vergessen Sie Flash Player und andere Media Player von Drittanbietern und machen Sie Ihre Videos und Audiodaten mit dem neuen HTML5 wirklich zugänglich

Ein ähnliches Prinzip wird auf das Starten von Absatz-Tags angewendet, die durch dargestellt sind

. 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. Wieder einmal die

Das Tag sollte am Anfang des relevanten Textes platziert werden, bevor das alternative schließende Tag am Ende angewendet wird, um den Effekt zu vervollständigen. Im Gegensatz zu Überschriften-Tags gibt es jedoch keine verschiedenen Zahlen, die die Größe des im Absatz enthaltenen Textes ändern können. Zum Beispiel:

Dein erster Absatz

Ihr zweiter Absatz

Ihr dritter Absatz

Verwendung von HTML5-Video-Tags durch Websites auf der ganzen Welt

Land
Anzahl der Websites
Vereinigte Staaten
140.008
Russland
87.508
Deutschland
34.519
Großbritannien
26.609
Frankreich
25.697
Japan
23.578
Taiwan
19.798
Ukraine
19,204
Brasilien
16.773
China
16.523
Rest der Welt
265,371

Außerhalb des HTML-Formats wird der Text auf Ihrer fertigen Webseite wie folgt aufgeteilt:

Dein erster Absatz

Ihr zweiter Absatz

Ihr dritter Absatz

Zeilenumbruch-Tags

Die ersten Beispiele stellen die grundlegendsten HTML-Tags dar, aber es gibt andere, die ein anderes Format und alternative Abschlusseinstellungen verwenden. Nehmen Sie zum Beispiel Zeilenumbrüche, die eine Unterscheidung schaffen, bei der Textzeilen unterbrochen und in der folgenden Zeile fortgesetzt werden. Es gibt einen Hauptunterschied zwischen Zeilenumbrüchen und Absätzen im HTML-Bereich, da letztere Standardblockelemente sind, die Text enthalten, erstere eine Trennung innerhalb eines vorhandenen erstellen

Element.

Aus diesem Grund stellen Zeilenumbrüche ein leeres Element in HTML dar und werden daher weder durch Öffnen noch durch Schließen von Tags definiert. Stattdessen werden sie von der dargestellt
Tag, das in vorhandene eingefügt werden kann

Elemente, um Text aufzubrechen und möglicherweise wichtige Informationen hervorzuheben. Das einzelne Leerzeichen zwischen dem Zeichen br und dem Schrägstrich ist entscheidend, da das Tag sonst im HTML-Format nicht erkennbar ist.

Hier ist ein Beispiel:

ist das Zeichnungs-HTML5-Zeichnungs-Tag, mit dem Sie noch mehr Möglichkeiten der Web-Interaktivität und Webanimation nutzen können als mit den früheren Rich-Internet-Anwendungsplattformen wie Flash.
Sie können sogar Spiele mit HTML5 entwickeln Etikett. HTML5 bietet eine großartige, mobilfreundliche Möglichkeit, unterhaltsame, interaktive Spiele zu entwickeln

Guten Morgen

Vielen Dank für Ihre Anfrage, wir werden Sie kontaktieren, wenn wir etwas anderes benötigen.

Freundliche Grüße

Herr Jones

Nach dem Anwenden wird der Text wie folgt aufgeteilt:

Guten Morgen,

Vielen Dank für Ihre Anfrage, wir werden Sie kontaktieren, wenn wir etwas anderes benötigen.

Freundliche Grüße

Herr Jones

Wie Sie sehen, können Sie Zeilenumbrüche innerhalb eines vorhandenen Absatzelements beliebig oft anwenden, sofern sie einen Mehrwert bieten und die Informationen leichter verdauen. Sie werden auch sehen, dass die Tags zum Öffnen und Schließen von Absätzen unverändert bleiben. Zeilenumbruch-Tags werden verwendet, um das Layout des darin enthaltenen Textes zu ändern.

Dies ist eines der Beispiele dafür, wie HTML-Tags zum Ändern vorhandener Elemente verwendet werden können. Dies spielt eine wichtige Rolle bei der Definition des visuellen Layouts Ihrer Webseiten und Inhalte.

Horizontale Linien

Website-Kategorien, in denen HTML5 Canvas Tag verwendet wird

Website-Kategorien, in denen HTML5 Canvas Tag verwendet wird

Ebenso gibt es andere Tags, die innerhalb des verwendet werden können

Element oder um Textkörper auf Ihrer Webseite weiter zu trennen. Eine der am weitesten verbreiteten ist die


Tag, mit dessen Hilfe ein leeres Element erstellt werden kann, das eine visuelle, horizontale Linie zwischen alternativen Abschnitten eines Online-Dokuments zeichnet. Möglicherweise möchten Sie eine Linie zwischen zwei Textkörpern positionieren, um beispielsweise den Leser neu zu fokussieren oder einfach ein neues visuelles Element einzuführen. So erstellen Sie eine solche Unterbrechung in HTML:

Dein erster Absatz


Ihr zweiter Absatz

Hier wird durch die Unterbrechung zwischen den Stundenzeichen und dem Schrägstrich die Konstruktion eines leeren Elements hervorgehoben, während erneut kein schließendes Tag erforderlich ist, um den Effekt zu vervollständigen. Dadurch wird das folgende Bild erstellt:

Dein erster Absatz
________________________________________

Ihr zweiter Absatz

Dein erster Absatz
_______________________

Ihr zweiter Absatz

Mobile Browser haben HTML5 vollständig übernommen, sodass das Erstellen mobiler Projekte so einfach ist wie das Entwerfen und Erstellen für kleinere Touchscreen-Displays – daher die Beliebtheit von Responsive Design. Es gibt einige großartige Meta-Tags, mit denen Sie auch für Mobilgeräte optimieren können
78% der Inhaltsentwickler stimmen zu, dass die Struktur für die Erstellung mobiler Apps geeignet ist, und 68% geben an, dass sie für die Gestaltung aller Arten von Apps geeignet ist


Bild-Tags

Bild-Tags stellen auch leere Elemente in HTML dar, was wiederum bedeutet, dass sie kein schließendes Tag enthalten. Da sie nur Attribute enthalten, die sich auf die URL des Bildes beziehen, das Sie in die Site einbetten, werden sie einfach durch das definiert Tag am Anfang des Elements. Diese können an einer beliebigen Stelle auf Ihrer Website platziert werden, obwohl es ungewöhnlich ist, sie in vorhandene Elemente wie Absätze oder Überschriften aufzunehmen. So präsentiert sich ein typisches HTML-Bild-Tag:

etwas Text

Sie sollten auch alternativen Text für Ihr Bild bereitstellen, damit die Benutzer ihn bei langsamen Ladezeiten oder bei Verwendung eines Bildschirmlesegeräts besser anzeigen können. Auf diese Weise zeigt der Browser den Zuschauern den Wert des alternativen Attributs an, wenn er kein Bild finden kann. Dies verwendet wieder das Bild-Tag, enthält jedoch einen anderen Satz von Attributen:

 HTML5 Icon

HTML-Elemente

HTML-Elemente

Zuvor haben wir uns angesehen, wie einfache HTML-Tags zum Definieren von On-Page-Elementen verwendet werden, und untersucht, wie sie mithilfe leerer Elemente mit Bild- und Zeilenumbruch-Tags weiter angepasst werden können. Dies hilft uns zu verstehen, welche Beziehung zwischen Tags und Elementen besteht und wie sie verwendet werden können, um verschiedene Arten von Inhalten auf Ihrer Website zu definieren.

Während alle Aspekte der HTML-Sprache beispielsweise durch ein Tag dargestellt werden, muss ein definiertes Element, das Inhalt enthält, sowohl ein Start- als auch ein Schluss-Tag haben. Überschriften und Absätze sind also HTML-Elemente, da sie Start- und Schließ-Tags verwenden, um den relevanten Text zu kapseln und zu erweitern. Im Gegensatz dazu enthalten leere Elemente entweder Attribute oder überhaupt keinen Inhalt, sodass sie in vorhandenen Elementen verwendet werden können, ohne dass ein schließendes Tag erforderlich ist.

HTML-Elemente definieren

HTML5 geht nirgendwo hin und da immer mehr Elemente übernommen werden, werden immer mehr Unternehmen beginnen, sich in HTML5 zu entwickeln

Bei der Verwendung von Beispielen wie Überschriften und Absätzen ist die korrekte Anwendung von Start- und Schließ-Tags von entscheidender Bedeutung. Es ist das Start-Tag (z

oder

), die beispielsweise das betreffende Element definiert, während das schließende Tag sicherstellt, dass dieses Element nicht über den Rest der Webseite fortgesetzt wird. Wenn Sie das Schließen nicht verwenden Tag am Ende eines gewünschten Absatzes. Der Text wird beispielsweise in einem einzelnen Block angezeigt, der unansehnlich und äußerst schwer zu lesen ist.

Alle schließenden Tags sind identisch mit den Start-Tags, abgesehen davon, dass die ersteren einen Schrägstrich vor den relevanten Zeichen enthalten. Also im Fall eines

Überschrift wird das schließende Tag sein , während für Absätze werden Sie immer verwenden um die Unterbrechung im Text zu definieren. Dies erfordert beim Codieren die Liebe zum Detail. Bei der Programmierung von Überschriften ist zu beachten, dass die von Ihnen verwendete Nummer (z. B. h1 oder h2) sowohl im Start- als auch im Schluss-Tag angewendet wird.

Nutzungshäufigkeit verschiedener HTML-Elemente

XHTML-Elementname
Kopf
Titel
html
Körper
ein
Meta
img
Tabelle
td
tr
br
p
Skript
Schriftart
div
b
Verknüpfung
Center
Spanne
bilden
Eingang
Stil
Std
stark
ich
hl
li
Noscript
Karte
Bereich
ul
wählen
Möglichkeit
h3
h2
Rahmen
Frameset
param
einbetten
em
u
Objekt
blockquote
Nein
Frames
tbody
iframe
klein
h4
Base
nord





























0
10
20
30
40
50
60
70
80
90
100

Verwenden verschachtelter HTML-Elemente

In dieser Phase ist klar, dass HTML-Dokumente und Webseiten aus einem Baum verschiedener Elemente bestehen, die als Bausteine ​​für eine Reihe von Assets dienen. Wir haben uns auch angesehen, wie diese Elemente gebildet und zur Strukturierung von Online-Inhalten verwendet werden können, und wir werden dies jetzt fortsetzen, indem wir verschachtelte HTML-Elemente betrachten.

Ebenso wie leere Elemente und eigenständige Tags (wie
können in definierte HTML-Elemente integriert werden, sogenannte verschachtelte Elemente können auch in Inhalten wie Überschriften und Absätzen enthalten sein. Dazu gehören Beispiele wie fett und kursiv und unterstrichener Text. Sie können angewendet werden, um Ihren Inhalten Persönlichkeit zu verleihen und den Leser auf bestimmte Punkte von Interesse aufmerksam zu machen.

Fett, kursiv und unterstrichener Text in HTML

Lassen’s sagen, dass Sie ein Wort in einem vorhandenen Absatzelement hervorheben möchten. Sie können dies erreichen, indem Sie es fett machen und einfache Tags innerhalb des Standards verwenden

Element. Mit HTML programmieren Sie dies wie folgt:

ich möchte diese Wort, um mutig zu sein.


Hier hat das verschachtelte Element sowohl ein Start- als auch ein Schluss-Tag, von denen jedes ein ähnliches Format wie die mit Überschriften und Absätzen verknüpften hat. Sie können nahtlos in vorhandene Elemente verwendet werden. In diesem Fall werden die folgenden Ergebnisse erzielt:

ich möchte diese Wort, um mutig zu sein.

Nun lass’s sagen, dass Sie auch die Typografie dieses Wortes so ändern möchten, dass es auch kursiv ist. Dies kann einfach durch Hinzufügen eines weiteren verschachtelten Elements erreicht werden, das wie folgt codiert werden sollte:

ich möchte diese Wort, um mutig zu sein.

Wie Sie sehen können, wurden die kursiven Start- und Schließ-Tags einfach in die integriert

Element. Dadurch wird der Inhalt innerhalb des Elements so transformiert, dass er wie folgt aussieht:

HTML-Titel waren und sind das wichtigste HTML-Signal, mit dem Suchmaschinen verstehen, worum es auf einer Seite geht. Wenn Ihre HTML-Titel als schlecht oder nicht beschreibend eingestuft werden, ändert Google sie
ich möchte diese Wort, um mutig zu sein.

Natürlich können Sie entscheiden, dass Sie dieses Wort lieber anders hervorheben möchten. Sie können daher ein alternatives verschachteltes Element verwenden, z. B. Unterstreichung (dargestellt durch das und Stichworte. Diese Tags können auf die gleiche Weise innerhalb von angewendet werden

Element, das in HTML wie folgt aussieht:

ich möchte diese Wort unterstrichen werden.

In diesem Fall wird der Text auf Ihrem Dokument oder Ihrer Zielseite wie folgt angezeigt:

Neue semantische Elemente, die HTML5 eingeführt hat, erleichtern angehenden Entwicklern das Lesen erheblich. Anstatt Zeile für Zeile von zu sehen
und Elemente, definierte Tags wie
,
und
ich möchte diese Wort unterstrichen werden.

Dies bietet einen Einblick in Elemente, die durch Tags gebildet werden können, die wiederum die Struktur Ihrer Webseiten und den Inhalt definieren, den sie enthalten. Nicht nur dies, sondern auch leere und verschachtelte Elemente können verwendet werden, um Ihren Inhalt weiter zu definieren.

HTML-Attribute

Globale Attribute sind Attribute, die allen HTML-Elementen gemeinsam sind. Sie können für alle Elemente verwendet werden, obwohl die Attribute für einige Elemente möglicherweise keine Auswirkung haben. Globale Attribute können für alle HTML-Elemente angegeben werden, auch für diejenigen, die nicht im Standard angegeben sind


Wenn Tags die Bausteine ​​sind, die Elemente erstellen und definieren, können HTML-Attribute verwendet werden, um ihre Eigenschaften (wie Stil, Farbe und Sprache) anzupassen. Alle HTML-Elemente verfügen über Kernattribute, die Kerninformationen bereitstellen und immer im stat-Tag angegeben werden Sie kommen in der Regel paarweise vor und werden daher häufig im folgenden Format angezeigt: name =”Wert.“

In einfachen Worten stellt der Name die Eigenschaft dar, die Sie festlegen möchten, während sich der Wert 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. Für junge Webmaster sind jedoch folgende Attribute am relevantesten:

Das Lang-Attribut

Als grundlegendstes Attribut definiert dies die Sprache des Dokuments und seiner Elemente. Es wird mit dem deklariert ‘lang’ Attribut, und obwohl es leicht übersehen wird, hat es den Vorteil, dass der Inhalt für Bildschirmleser und Suchmaschinen zugänglicher wird. Es wird normalerweise am Anfang des Dokuments in folgendem Format angezeigt:

Es wurden mehrere grundlegende Attributtypen erkannt, darunter:

erforderliche Attribute, Wird von einem bestimmten Elementtyp benötigt, damit dieser Elementtyp ordnungsgemäß funktioniert

optionale Attribute, wird verwendet, um die Standardfunktionalität eines Elementtyps zu ändern

Standardattribute, unterstützt von einer Vielzahl von Elementtypen

Ereignisattribute, Wird verwendet, um Elementtypen zu veranlassen, Skripts anzugeben, die unter bestimmten Umständen ausgeführt werden sollen


Nach dem lang-Attribut geben die ersten beiden Buchstaben die Sprache an (in diesem Fall Englisch). Nach dem Bindestrich legen die nächsten beiden Buchstaben den Dialekt fest, obwohl dieser nicht für jede Sprache vorhanden ist. Es ist wichtig, dass Sie dieses Attribut richtig einsetzen, um Ihr Publikum erfolgreich zu erreichen.

Das Attribut “Ausrichten”

Wir haben bereits das Format der HTML-Attribute (name =) angesprochen”Wert), und die beste Verkörperung davon tritt auf, wenn Sie versuchen, den Inhalt innerhalb Ihrer Elemente auszurichten. Sie können beispielsweise alle Absätze auf einer bestimmten Seite zentrieren, wobei die Ausrichtung die Eigenschaft ist, die Sie festlegen möchten. Anschließend, ’Center’ ist der Wert des Attributs, obwohl Sie die Wahl haben, Ihren Text nach links oder rechts auszurichten. Zum Beispiel:

Dieser Text ist mittig ausgerichtet

Arten von Apps, die mit HTML5 erstellt wurden

Produktivität
54%
Nützlichkeit
38%
Verbraucher
35%
LOB
22%
Soziales Netzwerk
18%
Unterhaltung
17%
Lebensstil
12%
Reise
9%
Spiele
8%
Andere
13%

Dies wird Ihre ausrichten

Elemente in der Mitte der Seite und erstellen Sie ein einheitliches Layout, das der spezifischen Art Ihrer Website entspricht (siehe unten):

Dieser Text ist mittig ausgerichtet
Dieser Text ist mittig ausgerichtet
Dieser Text ist mittig ausgerichtet

Das Attribut “Href”

HTML5 enthält außerdem eine Reihe großartiger APIs, mit denen Sie eine bessere Benutzererfahrung und eine leistungsfähigere, dynamischere Webanwendung erstellen können. Hier eine kurze Liste nativer APIs:
  • Drag & Drop (DnD)
  • Offline-Speicherdatenbank
  • Browserverlaufsverwaltung
  • Dokumentbearbeitung
  • Zeitgesteuerte Medienwiedergabe

Wenn Sie eine sichtbare Website erstellen möchten, ist es wichtig, dass Sie sowohl eingehende als auch ausgehende Links einbinden. Das Erstellen eines Link-Portfolios mit Backlinks zu internen Zielseiten ist ebenfalls eine praktikable Strategie. Daher müssen Sie lernen, wie Sie diese in HTML codieren.

HTML-Links werden mit dem definiert Tag, das den Ziellink zusammen mit dem zugehörigen Ankertext enthält, in dem sich die URL befindet. Es ist der ‘href ’ Attribut, das die Site-Adresse angibt. Dieses Attribut ist jedoch Teil des Start-Tags. Es ist in HTML wie folgt codiert:

Google

Dies unterstreicht deutlich die Unterscheidung zwischen dem Start- und dem Schluss-Tag und wird auf Ihrer Zielseite wie folgt übersetzt:

HTML5 wird nicht von einem Unternehmen kontrolliert. Eine der besten Eigenschaften liegt in der Tatsache, dass es sich um einen offenen Standard handelt. Entwickler haben die Freiheit, ihrer Kreativität freien Lauf zu lassen und so viele Funktionen und Features wie möglich hinzuzufügen


Das Attribut “Farbe”

Dies ist ein weiteres wichtiges Merkmal, da die Verwendung von Farbe Ihrer Website Leben einhauchen und gleichzeitig wichtige Kontraste und eine starke Designästhetik schaffen kann. In HTML kann eine Farbe unter Verwendung ihres Namens angegeben werden. Es ist jedoch auch möglich, einen RGB- oder einen HEX-Wert zu verwenden, um dieses Ziel zu erreichen. Die erstere Option ist jedoch am einfachsten zu befolgen, kann jedoch auch auf Überschriften, Absätze und andere Elemente auf Ihrer Seite angewendet werden.

HTML5 Canvas
HTML5 Canvas anzeigen [Spickzettel]

Dies ist ein Stilattribut, wobei Ihre Farbauswahl den Wert darstellt, den Sie festlegen möchten. Wenn Sie beispielsweise die Farbe Rot auf eine Hauptüberschrift anwenden, sieht sie folgendermaßen aus:

Hintergrundfarbe mit Rot eingestellt

Nach der Anwendung wird dieses Element auf Ihrer Website wie folgt angezeigt:

Hintergrundfarbe mit Rot eingestellt
Im Vergleich zu anderen Browsern stellt jedes Google Chrome-Update sicher, dass HTML5 unterstützt wird. Außerdem ist der Standard-Player von YouTube jetzt HTML5 und die Flash-Anzeigen von Google werden jetzt in HTML5 konvertiert


Auch hier gibt es eine klare Unterscheidung zwischen den Start- und Schluss-Tags, die das Element definieren, während dies eines der am einfachsten in HTML anzuwendenden Attribute ist. Außerdem wird der Name = weiter hervorgehoben”Wertformat der HTML-Attribute, wodurch das Lernen und Anwenden dieser Attribute auf Ihrer Website erheblich vereinfacht wird.

Teste dich 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.

Browserbasierte Anwendungen, auf denen HTML5 ausgeführt wird, können die Geolokalisierung problemlos verwenden

In der unten beschriebenen Übung haben wir einen Text außer und haben darum gebeten, verschiedene Aspekte mit HTML zu formatieren. Verwenden Sie den Leitfaden und alles, was Sie bisher gelernt haben, um die Herausforderung abzuschließen, während Sie sich darauf vorbereiten, Ihre eigene Website zu codieren.
________________________________________

Hauptkopfzeile

Willkommen auf unserer Website Example.com! Wir wünschen Ihnen viel Spaß beim Lesen unserer Inhalte und können sich gerne an uns wenden.

Danke für den Besuch!

Erfahren Sie mehr.

Verwendung von HTML5 durch Entwickler
(nach Region)

Nord- und Lateinamerika
70%
Südamerika
61%
ASPAC
60%
Australien
60%
Europa
59%
Afrika
50%

________________________________________

Fragen:

  1. Ergänzen Sie das Header-Element mit dem richtigen schließenden Tag.
  2. Machen Sie den Header fett.
  3. Fügen Sie eine horizontale Linie unter die Überschrift ein.
  4. Verwenden Sie das Farbattribut und den Farbton ‘Danke für den Besuch’ in grün
  5. Fügen Sie diesen Hyperlink ein (https://www.w3schools.com/html/) in den Ankertext “Lernen
    Mehr.”
  6. Verwenden Sie am Anfang der Seite den Namen =”Wertformat zum Linksausrichten der Absätze


Fazit

Während HTML erst 1991 erstellt wurde (mit der ersten Version der Codierungssprache, die 1995 eingeführt wurde), hat es sich schnell zu einem wegweisenden Werkzeug für die Gestaltung funktionaler und optisch ansprechender Websites entwickelt. Der Einfluss von HTML entwickelt sich ebenfalls weiter. Die neueste Iteration (HTML5) wird von einer wachsenden Anzahl von Websites auf der ganzen Welt übernommen.

In dieser Hinsicht ist das Erlernen der Grundelemente von HTML und deren Anwendung der wichtigste Schritt, den Sie beim Aufbau einer erfolgreichen, sichtbaren und letztendlich wettbewerbsfähigen Website unternehmen werden.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me

    Like this post? Please share to your friends:
    Adblock
    detector
    map