So lernen Sie HTML

Video: HTML und CSS Tutorial für Anfänger | Eigene Webseite erstellen

Inhalt

Schritte
Teil 1 von 2: HTML-Grundlagen lernen
Teil 2 von 2: Erweitertes HTML
Tipps
Warnungen
Was brauchst du

HTML ist die Abkürzung für Englisch Hypertext-Auszeichnungssprache (Hypertext-Auszeichnungssprache). Dies ist der Code oder die Sprache, in der das grundlegende Markup von Websites erstellt wird. Das Lernen mag entmutigend erscheinen, wenn Sie noch nie programmiert haben, aber in Wirklichkeit benötigen Sie nur einen einfachen Texteditor und einen Internetbrowser. Vielleicht erkennen Sie sogar einige Beispiele für HTML-Markup, die Ihnen in Internetforen, benutzerdefinierten benutzerdefinierten Seiten oder wikiHow-Artikeln begegnet sind. HTML ist ein nützliches Werkzeug für jeden Internetnutzer, und das Erlernen der Grundlagen wird weniger Zeit in Anspruch nehmen, als Sie denken.

Schritte

Teil 1 von 2: HTML-Grundlagen lernen

1 Öffnen Sie ein HTML-Dokument. Die meisten Texteditoren (Notepad oder Notepad ++ für Windows, TextEdit für Mac, gedit für GNU / Linux) können zum Generieren von HTML-Dateien verwendet werden. Erstellen Sie ein neues Dokument und speichern Sie es mit Datei → Speichern unter im Webseitenformat oder ändern Sie die Dateierweiterung in .html oder .htm anstelle von .doc, .rtf oder einer anderen Erweiterung.
- Möglicherweise erhalten Sie eine Warnung, dass die Datei als "Nur-Text" statt im RTF-Format gespeichert wird oder dass Formatierungen und Bilder nicht gespeichert werden. Es ist in Ordnung; für HTML werden diese Optionen nicht benötigt.
2 Öffnen Sie die generierte Datei in einem Browser. Speichern Sie die leere Datei, suchen Sie sie auf Ihrem Computer und doppelklicken Sie darauf, um sie zu öffnen. Im Browser sollte sich eine leere Seite öffnen. Wenn dies nicht der Fall ist, ziehen Sie die Datei in die Adressleiste Ihres Browsers. Während Sie die HTML-Datei bearbeiten, können Sie diese Seite aktualisieren, um die Änderungen anzuzeigen.
- Bitte beachten Sie, dass Sie auf diese Weise keine Website im Internet erstellen. Andere Personen haben keinen Zugriff auf diese Seite und Sie benötigen keine Internetverbindung, um Ihre lokale Seite zu testen. Der Browser interpretiert einfach den HTML-Code und "liest" ihn wie eine Website.
3 Verstehen Sie, was Markup-Tags sind. Im Gegensatz zu normalem Text erscheinen Tags nicht auf der Seite. Stattdessen teilen sie dem Browser mit, wie die Seite und deren Inhalt angezeigt werden sollen. Die Variable "opening" enthält Anweisungen. Zum Beispiel kann es dem Browser mitteilen, dass der Text als Fett gedruckt... Es benötigt auch ein "end"-Tag, um dem Browser anzuzeigen, wo die Anweisung endet. In diesem Beispiel wird der Text zwischen den Start- und End-Tags fett dargestellt. Tags werden in ungleiche Zeichen geschrieben, aber das End-Tag beginnt mit einem Schrägstrich.
- Das öffnende Tag wird zwischen die Ungleichungszeichen geschrieben: Eröffnungs-Tag>
- Im schließenden Tag wird ein Schrägstrich vor dem Tag-Deskriptor (Name) platziert: /End-Tag>
- Lesen Sie weiter, um herauszufinden, wie die verschiedenen Tags verwendet werden. Für diesen Schritt müssen Sie sich nur das Aufnahmeformat merken. Tags werden zwischen die Ungleichungszeichen geschrieben:> und />
- In einigen Tutorials werden HTML-Tags als Elemente bezeichnet und der Text zwischen den öffnenden und schließenden Tags wird als Elementinhalt bezeichnet.
4 Geben Sie im Editor html> tag ein. Jede HTML-Datei muss mit einem Tag beginnen html> und mit einem Tag enden /html>... Diese Tags teilen dem Browser mit, dass der gesamte Inhalt zwischen den Tags in HTML vorliegt. Fügen Sie Ihrem Dokument diese Tags hinzu:
- HTML-Dateien beginnen oft mit der Zeile ! DOCTYPE html>Das bedeutet, dass Browser die gesamte Datei als HTML erkennen müssen. Diese Zeile ist nicht erforderlich, kann Ihnen jedoch bei der Behebung von Kompatibilitätsproblemen helfen.
- Wählen html> oben im Dokument.
- Drücken Sie mehrmals die Eingabe- oder Return-Taste, um mehrere Leerzeilen zu erstellen, und geben Sie dann ein /html>
- erinnere dich daran das Ganze Der Code, den Sie in diesem Artikel erstellen, muss zwischen diesen beiden Tags geschrieben werden.
5 Erstellen Sie einen Abschnitt head> in der Datei. Erstellen Sie zwischen den Tags html> und / html> ein öffnendes Tag Kopf> und das schließende Tag / Kopf>... Fügen Sie einige Leerzeilen dazwischen ein. Inhalte, die zwischen den Tags head> und /head> geschrieben werden, werden nicht auf der Seite selbst angezeigt. Befolgen Sie diese Schritte und Sie werden sehen, wofür dieses Tag steht:
- Schreiben Sie zwischen die Tags head> und /head> Titel> und / Titel>
- Zwischen den Tags title> und / title> schreiben Sie HTML lernen – wikiHow.
- Speichern Sie Ihre Änderungen und öffnen Sie die Datei in einem Browser (oder aktualisieren Sie die Seite, wenn die Datei bereits geöffnet ist). Sehen Sie den Text, der im Seitentitel über der Adressleiste angezeigt wird?
6 Erstellen Sie einen Körper> Abschnitt. Alle anderen Tags und Texte in diesem Beispiel werden in den Body-Bereich geschrieben, dessen Inhalt auf der Seite angezeigt wird. Nach schließendes tag / head>, aber Vor tag / html> Tags hinzufügen Körper> und / Körper>... Arbeiten Sie für den Rest dieses Artikels mit dem Body-Abschnitt. Ihre Datei sollte ungefähr so aussehen:
html>
Kopf>
title> HTML lernen – wikiHow / title>
/ Kopf>
Körper>
/ Körper>
/html>
7 Fügen Sie Text mit verschiedenen Stilen hinzu. Es ist Zeit, der Seite den echten Inhalt hinzuzufügen! Alles, was Sie zwischen den Body-Tags schreiben, wird auf der Seite angezeigt, nachdem es im Browser aktualisiert wurde. Verwende nicht Symbole oder >da der Browser versucht, den Inhalt als Tag anstelle von Text zu interpretieren. Schreiben Hallo! (oder was auch immer Sie möchten), dann versuchen Sie, diese Tags zum Text hinzuzufügen und sehen Sie, was passiert:
- em> Hallo zusammen! / em> macht den Text "kursiv": Hallo!
- stark> Hallo zusammen! / stark> macht den Text "fett": Hallo!
- s> Hallo zusammen! / s> durchgestrichener Text: ~~Hallo!~~
- sup> Hallo zusammen! / sup> zeigt die Schriftart als hochgestellt an:
- sub> Hallo zusammen! / sub> zeigt die Schriftart als tiefgestellten Index an: _Hallo!
- Probieren Sie verschiedene Tags zusammen aus. So wird es aussehen em> strong> Hallo zusammen! / strong> / em>?
8 Teilen Sie den Text in Absätze auf. Wenn Sie versuchen, mehrere Textzeilen in eine HTML-Datei zu schreiben, werden Sie feststellen, dass im Browser keine Zeilenumbrüche angezeigt werden. Um Text in Absätze zu unterteilen, müssen Sie Tags hinzufügen:
- p> Dies ist ein separater Absatz. / p>
- Auf diesen Satz folgt ein Zeilenumbruch br> vor dem Beginn dieser Zeile.
  Dies ist das erste Tag, das kein End-Tag erfordert. Diese Tags werden als "leere" Tags bezeichnet.
- Erstellen Sie Überschriften, um die Abschnittstitel anzuzeigen:
  h1> Überschriftstext / h1>: größter Titel
  h2> Überschriftstext / h2> (Überschrift der zweiten Ebene)
  h3> Überschriftstext / h3> (Überschrift der dritten Ebene)
  h4> Überschriftstext / h4> (Überschrift der vierten Ebene)
  h5> Überschriftstext / h5> (kleinster Titel)
9 Lernen Sie, Listen zu erstellen. Es gibt mehrere Möglichkeiten, Listen auf einer Webseite zu erstellen. Probieren Sie die folgenden Optionen aus und entscheiden Sie, welche Ihnen am besten gefällt. Beachten Sie, dass für die gesamte Liste ein Tag-Paar benötigt wird (z. B. ul> und / ul> für eine Aufzählungsliste), und jedes Listenelement wird mit einem anderen Tag-Paar hervorgehoben, z. B. li> und / li>.
- Aufzählungsliste:
  ul> li> Erste Zeile / li> li> Zweite Zeile / li> li> Und so weiter / li> / ul>
- Nummerierte Liste:
  ol> li> Eins / li> li> Zwei / li> li> Drei / li> / ol>
- Definitionsliste:
  dl> dt> Kaffee / dt> dd> - Heißgetränk / dd> dt> Limonade / dt> dd> - Kaltgetränk / dd> / dl>
10 Gestalten Sie die Seite mit Zeilenumbrüche, horizontale Linien und Bilder. Es ist an der Zeit, der Seite etwas anderes als Text hinzuzufügen. Probieren Sie die folgenden Tags aus oder folgen Sie den Links, um weitere Informationen zu erhalten. Verwenden Sie einen Online-Hosting-Dienst, um einen Link zu dem Bild zu erstellen, das Sie veröffentlichen möchten:
- Horizontale Linie: Std>
- Bild einfügen: img src = "image link">
11 Fügen Sie Links hinzu. Sie können diese Tags verwenden, um Hyperlinks zu anderen Seiten und Websites zu erstellen, aber da Sie noch keine Website haben, erfahren Sie jetzt, wie Sie Ankerlinks erstellen, d. h. Links zu bestimmten Stellen auf einer Seite:
- Erstellen Sie einen Anker mit dem a>-Tag, wo Sie auf der Seite verlinken möchten. Überlege dir einen klaren und einprägsamen Namen:
  
  a name = "Tipps"> Der Text, auf den Sie verlinken. / a>
- Verwenden Sie das href>-Tag, um einen relativen Link oder einen Link zu einer externen Ressource zu erstellen:
  
  a href = "Link zur Seite oder Ankername innerhalb der Seite"> Text oder Bild, das als Link dient. / a>
- Um auf einen relativen Link auf einer anderen Seite zu verlinken, fügen Sie nach dem Hauptlink und dem Namen des Ankers ein #-Zeichen hinzu. Beispielsweise verlinkt https://en.wikihow.com/learn-HTML#Tips auf den Tipps-Bereich dieser Seite.

Teil 2 von 2: Erweitertes HTML

1 Lernen Sie die Attribute kennen. Attribute werden in das Tag geschrieben und geben zusätzliche Informationen an. Das Format der Attribute ist wie folgt: Name = "Wert", wo Titel definiert ein Attribut (z. B. Farbe für ein Farbattribut), und der Wert gibt seinen Wert an (z. B. rot für Rot).
- Im vorherigen Abschnitt über HTML-Grundlagen wurden Attribute tatsächlich verwendet. Das img>-Tag verwendet das Attribut src, relative Link-Anker verwenden das Attribut Nameund die Links verwenden das Attribut href... Wie Sie bereits bemerkt haben, werden alle Attribute im Format geschrieben ___='___’.
2 Experimentieren Sie mit HTML-Tabellen. Die Erstellung einer Tabelle beinhaltet die Verwendung verschiedener Tags. Sie können experimentieren oder detailliertere Anweisungen lesen.
- Tabellen-Tags erstellen:tisch> / tisch>
- Schließen Sie den Inhalt jeder Zeile in der Tabelle in Tags ein: tr>
- Die Spaltenüberschrift wird durch das Tag definiert: die>
- Zellen in nachfolgenden Zeilen: td>
- Ein Beispiel für die Verwendung dieser Tags:
  
  Tabelle> tr> th> Spalte 1: Monat / th> th> Spalte 2: Sparen / th> / tr> tr> td> Januar / td> td> 5000 Rubel / td> / tr> / Tabelle>
3 Lernen Sie die zusätzlichen Kopfabschnitt-Tags. Sie haben bereits das Tag head> kennengelernt, das am Anfang jeder HTML-Datei steht. Neben dem title>-Tag gibt es noch weitere Tags für diesen Abschnitt:
- Meta-Tags, die . enthalten Metadatenvon Suchmaschinen verwendet, um die Site zu indizieren. Um Ihre Site in Suchmaschinen leichter auffindbar zu machen, verwenden Sie einen oder mehrere öffnende Meta-Tags (schließende Tags sind nicht erforderlich).Verwenden Sie ein Attribut und einen Wert pro Tag: meta name = "description" content = "page description">; oder meta name = "keywords" content = "kommagetrennte Keywords">
- Link>-Tags, die auf Dateien von Drittanbietern verweisen, z. B. Stylesheets (CSS), die mit einem anderen Codierungstyp erstellt werden und Ihnen ermöglichen, die HTML-Seite mithilfe von Farbe, Textausrichtung und vielen anderen Funktionen zu ändern.
- Die script>-Tags, die verwendet werden, um JavaScript-Dateien an die Seite anzuhängen. Diese Dateien werden benötigt, um die Seite interaktiv zu ändern (als Reaktion auf Benutzeraktionen).
4 Experimentieren Sie mit dem HTML-Code anderer Websites. Das Anzeigen des Quellcodes anderer Webseiten ist eine großartige Möglichkeit, HTML zu lernen. Sie können mit der rechten Maustaste auf die Seite klicken und Quelle anzeigen oder etwas Ähnliches aus dem oberen Menü Ihres Browsers auswählen. Versuchen Sie herauszufinden, was ein unbekanntes Tag bewirkt, oder suchen Sie im Internet nach Informationen darüber.
- Obwohl Sie die Websites anderer Personen nicht bearbeiten können, können Sie den Quellcode in Ihre Datei kopieren, um später mit Tags zu experimentieren. Bitte beachten Sie, dass CSS-Markup möglicherweise nicht verfügbar ist und Farben und Formatierungen anders aussehen können.
5 Beginnen Sie mit der Erkundung detaillierterer Anleitungen. Es gibt viele Seiten im Internet, die sich mit HTML-Tags beschäftigen, wie zum Beispiel W3Schools oder HTMLbook. Es gibt auch gedruckte Bücher zum Verkauf, aber versuchen Sie, die neueste Ausgabe zu finden, wenn sich die Standards ändern und weiterentwickeln. Besser noch, Sie beherrschen CSS, um viel mehr Kontrolle über das Layout und das Erscheinungsbild Ihrer Website zu haben. Nach dem Erlernen von CSS lernen Webdesigner normalerweise JavaScript.

Tipps

Notepad ++ ist ein großartiges kostenloses Programm, ähnlich wie normales Notepad, aber Sie können Ihren Code online in Ihrem Browser speichern und testen. (Es unterstützt auch fast jede Sprache - HTML, CSS, Python, JavaScript usw.)
Suchen Sie eine einfache Seite im Netz, speichern Sie den Code auf Ihrem Computer und experimentieren Sie damit. Versuchen Sie, Text zu verschieben, die Schriftart zu ändern, Bilder zu ersetzen - was auch immer!
Sie können ein Notizbuch führen, in das Sie Tags schreiben, damit Sie sie immer zur Hand haben. Sie können diese Seite auch ausdrucken und darauf verweisen.
Wenn Sie Code schreiben, gehen Sie sorgfältig vor, damit Sie und andere ihn verstehen können. Verwendung - Kommentar hier einfügen -> für HTML-Kommentare: diese werden nicht auf der Seite reflektiert, sind aber im Codedokument sichtbar.
XML und RSS werden immer beliebter. Der Code für Seiten, die XML- und RSS-Technologien enthalten, ist für einen unerfahrenen Benutzer schwieriger zu lesen und zu verstehen, aber diese Tools sind sehr nützlich.
Bei Markup-Tags in HTML wird die Groß-/Kleinschreibung nicht beachtet, wir empfehlen jedoch, nur Kleinbuchstaben (wie in den Beispielen in diesem Artikel) sowohl für die Standardisierung als auch für die XHTML-Kompatibilität zu verwenden.

Warnungen

Einige Tags sind in den letzten Jahren nicht mehr verwendet worden und wurden durch neue ersetzt, die die gleichen oder einige zusätzliche Effekte haben.
Wenn Sie Ihre Seite testen möchten, besuchen Sie die W3-Site und prüfen Sie die modernen HTML-Anforderungen. HTML-Standards ändern sich im Laufe der Zeit und einige Tags werden durch neue ersetzt, die in modernen Browsern besser funktionieren.