Inhalt

• Schreiten
• Teil 1 von 2: Erlernen der Grundlagen von HTML
• Teil 2 von 2: Fortgeschrittenes HTML lernen
• Tipps
• Warnungen
• Notwendigkeiten

HTML ist die Abkürzung für Hyper Text Markup Languageist es der Code oder Sprache welches zum Erstellen von Websites verwendet wird. Es mag kompliziert aussehen, wenn Sie noch nie programmiert haben, aber um es auszuprobieren, benötigen Sie lediglich ein einfaches Textverarbeitungsprogramm und einen Internetbrowser. Möglicherweise erkennen Sie HTML-Code in Foren, Online-Profilen oder wikiHow-Artikeln. HTML ist eine nützliche Ressource für alle, die das Internet nutzen, und das Erlernen von HTML kann weniger Zeit in Anspruch nehmen, als Sie vielleicht erwarten.

Schreiten

Teil 1 von 2: Erlernen der Grundlagen von HTML

1. Öffnen Sie ein HTML-Dokument. Die meisten Textverarbeitungsprogramme, einschließlich Notepad oder Word für Windows und Text Editor für Mac, können zum Erstellen von HTML-Dokumenten verwendet werden. Öffnen Sie ein neues Dokument und wählen Sie im oberen Menü Datei → Speichern unter, um Ihr Dokument als Webseite zu speichern, oder ändern Sie die Dateierweiterung von ".doc", ".rtf" oder anderen Elementen in ".html" oder ".htm" ".
   • Möglicherweise wird jetzt eine Warnung angezeigt, die besagt, dass Ihr Dokument vom Rich-Text-Format (RTF) in das "Nur-Text" -Format geändert wird und dass einige Formatierungsoptionen und Bilder nicht ordnungsgemäß gespeichert werden. Sie können diese Warnung ignorieren. HTML-Dokumente verwenden diese Optionen nicht.
   • .html- und .htm-Dateien sind identisch. Es funktioniert beides.
2. Zeigen Sie Ihr Dokument mit einem Browser an. Speichern Sie Ihr leeres Dokument, schließen Sie es und doppelklicken Sie dann auf das Dokument an der Stelle, an der es gespeichert wurde, um es erneut zu öffnen. Ihr Dokument sollte jetzt von Ihrem Browser als leere Webseite geöffnet werden. Wenn dies nicht funktioniert, ziehen Sie das Dateisymbol in die Adressleiste Ihres Browsers. Wenn Sie später Ihr HTML-Dokument gemäß den Schritten in diesem Artikel bearbeiten, kehren Sie immer wieder zum Browser zurück, um zu überprüfen, wie die Änderungen im Code aussehen.
   • Hinweis: Ihre Webseite ist noch nicht online. Die Seite ist für andere nicht zugänglich und Sie benötigen keine funktionierende Internetverbindung, um sie zu testen. Sie verwenden einfach Ihren Browser, um das HTML-Dokument zu "lesen", als wäre es eine Website.
3. Verstehe, was "Tags" sind. Tags sind auf der endgültigen Webseite nicht sichtbar, wie dies bei normalem Text der Fall ist. Die Tags teilen Ihrem Browser mit, wie die Seite und der Inhalt auf der Seite angezeigt werden sollen. Das Start-Tag enthält Anweisungen. Beispielsweise kann es den Browser anweisen, den Text fett anzuzeigen. Das End-Tag wird benötigt, um dem Browser mitzuteilen, wo die Anweisungen gelten: In diesem Beispiel ist der gesamte Text zwischen dem Start- und dem End-Tag fett gedruckt. End-Tags werden ebenfalls in Klammern gesetzt, aber ein Schrägstrich folgt der ersten Klammer.
   • Schreiben Sie Start-Tags in Klammern: Dies ist der Starttag>
   • Schreiben Sie End-Tags in Klammern, setzen Sie jedoch nach der ersten Klammer einen Schrägstrich: /Dies ist das abschließende Tag>)
   • Lesen Sie später in diesem Artikel, wie Sie funktionale Tags schreiben. In diesem Schritt müssen Sie sich nur merken, wie Tags geschrieben werden sollen:> und />.
   • In anderen HTML-Kursen werden Tags auch als "Elemente" bezeichnet, und der Text zwischen dem Öffnen und Schließen von Tags wird auch als "Elementinhalt" bezeichnet.
4. Schreiben Sie Ihr erstes HTML> -Tag. Jedes HTML-Dokument beginnt mit einem html>Tag und endet mit einem / html>Etikett. Dies teilt dem Browser mit, dass alles zwischen diesen Tags in HTML geschrieben ist. Fügen Sie Ihrem Dokument diese Tags hinzu:
   • Schreiben html> oben in Ihrem Dokument.
   • Drücken Sie mehrmals die Eingabetaste oder kehren Sie zurück, um Platz zu schaffen, und schreiben Sie dann / html>
   • Erinnere dich alles in diesem Artikel zwischen diesen beiden Tags.
5. Machen Sie den Kopf> Teil Ihres Dokuments. Zwischen den Tags html> und / html> schreiben Sie a Kopf>Starttag und a / head>-end tag. Machen Sie zwischen diesen Tags wieder etwas Platz. Alles, was zwischen diesen Tags geschrieben wird, ist auf der Webseite selbst nicht sichtbar. Führen Sie die folgenden Schritte aus und prüfen Sie, ob die Informationen angezeigt werden:
   • Schreiben Sie zwischen den Tags head> und / head>: Titel> und / title>
   • Zwischen den Tags title> und / title> schreiben Sie: Wie man HTML (mit Bildern) lernt - wikiHow.
   • Speichern Sie das Dokument und öffnen Sie es in einem Browser (oder speichern Sie das Dokument und aktualisieren Sie die Seite im Browser, wenn die Seite noch geöffnet war). Sehen Sie, was Sie gerade oben auf der Seite über der Adressleiste geschrieben haben?
6. Erstellen Sie einen Body> Abschnitt. Alles andere in diesem Anfängerdokument befindet sich im Abschnitt body> und wird auf der Webseite angezeigt. Nach dem das tag / head>, aber vor dem das Tag / HTML>, das Sie schreiben Körper> und / body>. Alles, was wir in diesem Artikel weiter diskutieren, platzieren wir zwischen den Body-Tags. Sie sollten jetzt ein Dokument haben, das so aussieht (ohne die Aufzählungszeichen):
   • html>
   • Kopf>
   • title> lerne HTML - wikiHow / title>
   • / head>
   • Körper>
   • / body>
   • / html>
7. Fügen Sie Text in verschiedenen Stilen hinzu. Jetzt ist es Zeit, dass Sie etwas schreiben, das tatsächlich im Browser sichtbar ist! Alles, was Sie in die Body-Tags schreiben, wird im Browser angezeigt, nachdem Sie die Änderungen gespeichert und die Seite im Browser aktualisiert haben. Schreiben nicht etwas mit den Zeichen und >weil Ihr Browser dies als HTML-Anweisung anstelle von einfachem Text interpretiert. Schreiben Sie zum Beispiel Hallo Welt! (Englisch für "Hallo Welt!", Dies ist der globale Standardtext als erstes Beispiel in einem Programmierkurs in einer bestimmten Programmiersprache) oder etwas anderes, und setzen Sie die folgenden Tags vor und nach dem Text und sehen Sie, was passiert:
   • em> Hallo Welt! / em> sieht aus wie kursiver Text: Hallo Welt!
   • stark> Hallo Welt! / stark> sieht aus wie fetter Text: Hallo Welt!
   • s> Hallo Welt! / s> sieht aus wie durchgestrichener Text: Hallo Welt!
   • sup> Hallo Welt! / sup> sieht hochgestellt aus:
   • sub> Hallo Welt! / sub> sieht aus wie Bildunterschrift: _{Hallo Welt!}
   • Kombinationen ausprobieren: Wie sieht em> strong> Hallo Welt! / strong> / em> aussteigen?
8. Teilen Sie Ihren Text in Absätze. Wenn Sie verschiedene Textzeilen in Ihr Dokument einfügen, werden alle Zeilen nacheinander platziert. Sie müssen selbst neue Zeilen und Leerzeilen programmieren:
   • p> Dies ist ein separater Abschnitt./p>
   • Dieser Satz steht in der ersten Zeile und dieser Satz in der nächsten.
     Dies ist das erste Tag, auf das wir stoßen und das kein End-Tag benötigt! Wir nennen so ein Tag eins leeres Tag.
   • Erstellen Sie Überschriften, um die Namen der Abschnitte deutlich zu machen:
     h1> header / h1>: der größtmögliche Header
     h2> header / h2> (der 2-Ebenen-Header)
     h3> header / h3> (der 3-Level-Header)
     h4> header / h4> (der 4-Level-Header)
     h5> header / h5> (der kleinstmögliche Header)
9. Erfahren Sie, wie Sie Listen erstellen. Es gibt verschiedene Möglichkeiten, Listen auf einer Webseite zu erstellen. Probieren Sie die folgenden Methoden aus, um herauszufinden, was Ihnen am besten gefällt. Beachten Sie, dass ein Paar von Tags um die gesamte Liste platziert wird (z. B. ul> und / ul> Tags für ungeordnete Listen) und dass um jedes Element in der Liste ein anderes Paar von Tags platziert wird, z. B. li> und / li> .
   • Verwenden Sie den folgenden Code, um Listen mit Aufzählungszeichen zu erstellen:
     ul> li> Ein Artikel / li> li> Ein anderer Artikel / li> li> Ein anderer Artikel / li> / ul>
   • Oder diesen Code, um nummerierte Listen zu erstellen:
     ol> li> Punkt 1 / li> li> Punkt 2 / li> li> Punkt 3 / li> / ol>
   • Oder diesen Code, um eine sogenannte Definitionsliste zu erstellen:
     dl> dt> Kaffee / dt> dd> - Heißes Getränk / dd> dt> Milch / dt> dd> - Kaltes Getränk / dd> / dl>
10. Machen Sie Ihre Seite mit neuen Linien, horizontalen Linien und Bildern attraktiver. Jetzt ist es an der Zeit, Ihrer Seite weitere Dinge hinzuzufügen. Probieren Sie die folgenden Tags aus (das Bild muss online gestellt werden, damit Sie einen Link zum Bild verwenden können):
    • Fügen Sie eine Zeile ein: br> oder hr>
    • Bilder einfügen: img src = "the_url_of_your_image">
11. Fügen Sie Links zu anderen Stellen auf der Seite ein. Sie können diesen Code auch verwenden, um auf andere Seiten und Websites zu verlinken. Da Sie jedoch noch keine Website haben, konzentrieren wir uns auf "Anker", die bestimmte Stellen auf der Seite sind, auf die Sie verlinken können:
    • Erstellen Sie zunächst einen Anker mit dem Tag a> an der Stelle auf der Seite, auf die Sie einen Link erstellen möchten. Geben Sie Ihrem Anker einen eindeutigen Namen, an den Sie sich leicht erinnern können:
      
      a name = "Tips"> Dies ist der Text, um den Sie Ihren Anker platzieren./a>
    • Verwenden Sie das Tag href>, um einen Link zu Ihrem Anker oder zu einer anderen Webseite zu erstellen:
      
      a href = "URL der Webseite oder Name des Ankers auf dieser Seite"> Schreiben Sie den Text oder das Bild, der hier als Link angezeigt wird./a>
    • Um einen Link zu einem Anker auf einer anderen Seite zu erstellen, fügen Sie nach der URL das Zeichen # hinzu, gefolgt vom Namen Ihres Ankers. Mit http://www.wikihow.com/HTML-leren#Tips gelangen Sie beispielsweise direkt zum Abschnitt "Tipps" auf dieser Seite.

Teil 2 von 2: Fortgeschrittenes HTML lernen

1. Erfahren Sie mehr über Attribute. Attribute werden innerhalb des Tags platziert und verwendet, um zusätzliche Anpassungen am "Elementinhalt" zwischen Start- und End-Tag vorzunehmen. Sie stehen niemals alleine da. Sie sind folgendermaßen geschrieben: name = "value". Name repräsentiert den Namen des Attributs (zum Beispiel "Farbe") und Wert beschreibt diesen speziellen Fall (z. B. "rot").
   • Wenn Sie im vorherigen Teil dieses Artikels genau hingeschaut haben, sind Sie bereits auf Attribute gestoßen. Das Tag img> verwendet das Attribut srcverwendet ein Anker das Attribut Name und Links verwenden das Attribut href. Sie können erkennen, dass sie alle groß sind ___='___’ Folgen.
2. Experimentieren Sie mit HTML-Tabellen. Um eine Tabelle oder ein Diagramm zu erstellen, benötigen Sie mehrere Tags:
   • Beginnen Sie mit den Tabellen-Tags ("Tabelle" in Englisch) um die gesamte Tabelle:Tabelle> / Tabelle>
   • Platzieren Sie Tags um den Inhalt jeder Zeile: tr>
   • Platzieren Sie die Spaltenüberschriften in der ersten Zeile: th>
   • Platzieren Sie die Zellen in aufeinanderfolgenden Zeilen: td>
   • Dies ist ein Beispiel dafür, wie all dies zusammenkommt:
     
     Tabelle> tr> th> Spalte 1: Monat / th> th> Spalte 2: Geld gespart / th> / tr> tr> td> Januar / td> td> 100 € / td> / tr> / table>
3. Lernen Sie die anderen Tags kennen, die im Kopfbereich verwendet werden. Sie haben bereits den Tag-Kopf> gelernt, den Sie am Anfang jedes Dokuments platzieren. Zusätzlich zum Tag title> können sich im Kopfbereich weitere Tags befinden:
   • Meta-Tags werden zum Erstellen verwendet Metadaten über eine Webseite. Diese Daten werden von Suchmaschinen zur Kategorisierung von Webseiten verwendet. Um Ihre Seite für Suchmaschinen sichtbar zu machen, können Sie ein oder mehrere Meta-Tags platzieren (End-Tags sind nicht erforderlich). Jedes Tag muss genau ein Namensattribut und ein Inhaltsattribut enthalten, zum Beispiel: meta name = "description" content = "hier setzen Beschreibung ">; oder meta name = "keywords" content = "schreibe hier eine Liste von Schlüsselwörtern, immer durch Komma getrennt">
   • link> tags werden verwendet, um andere Dateien mit der Seite zu verknüpfen. Diese Seiten werden normalerweise zum Zuordnen von CSS-Stylesheets zu HTML-Seiten verwendet. Sie werden mit einer anderen Art von Code erstellt und dienen zum Bestimmen des Gesamtstils einer Seite.
   • script> -Tags werden verwendet, um Javascript-Dateien mit der HTML-Seite zu verknüpfen. Mit Javascript kann die Seite geändert werden, wenn der Benutzer etwas auf der Seite tut.
4. Spielen Sie mit HTML von vorhandenen Seiten. Das Anzeigen des Quellcodes von Webseiten ist eine hervorragende Möglichkeit, Ihre HTML-Kenntnisse zu erweitern. Klicken Sie mit der rechten Maustaste auf die Seite und wählen Sie "Quelle anzeigen", "Seitenquelle anzeigen" oder ähnliches. Finden Sie heraus, was ein bestimmtes Tag, das Sie nicht kennen, bewirkt, oder suchen Sie online nach der Antwort.
   • Sie können die Websites anderer Personen nicht bearbeiten, aber Sie können den HTML-Code in Ihr eigenes Dokument kopieren und damit herumspielen, um zu sehen, welche unterschiedlichen Anpassungen vorgenommen werden. Hinweis: Da auf vielen Websites CSS-Stylesheets verwendet werden, können möglicherweise nicht viele Farben oder andere Stile angezeigt werden.
5. Erfahren Sie mehr über HTML, indem Sie ausführlichere Artikel lesen. Es gibt viele Ressourcen im Internet, um mehr HTML-Tags wie W3Schools oder Codecademy zu beherrschen. Es sind auch viele HTML-Bücher verfügbar. Stellen Sie jedoch sicher, dass Sie eine aktuelle Ausgabe verwenden, da sich der HTML-Standard von Zeit zu Zeit ändert. Sobald Sie HTML auf einem guten Niveau beherrschen, können Sie sich an CSS wenden, um mehr Kontrolle über das Design und den Stil Ihrer Webseite zu erhalten. Danach ist der nächste Schritt normalerweise Javascript.

Tipps

• Es kann nützlich sein, eine einfache Webseite im Internet zu finden und dann mit dem Code herumzuspielen. Versuchen Sie, Text zu verschieben, die Schriftart zu ändern, die Bilder zu ändern, was immer Sie wollen!
• Sie können den Code mit einem Notizbuch aufschreiben, sodass Sie auf etwas zurückgreifen können, wenn Sie sich einen Moment nicht daran erinnern. Sie können diese Seite auch ausdrucken und als Referenz aufbewahren.
• XML und RSS werden heutzutage zunehmend auf Websites verwendet. Der Code scheint für das menschliche Auge unzugänglich zu sein, insbesondere wenn er im Quellcode angezeigt wird, aber die Funktionalität kann nützlich sein.
• Bei den in HTML verwendeten Tags wird nicht zwischen Groß- und Kleinschreibung unterschieden. Standardmäßig werden jedoch Kleinbuchstaben verwendet (wie in diesem Artikel beschrieben). Kleinbuchstaben für die Tags werden dringend empfohlen, auch aus Gründen der Kompatibilität mit XHTML.

Warnungen

• Einige Tags werden nicht mehr verwendet und wurden durch andere Tags ersetzt, die dasselbe tun, aber häufig mehr Optionen bieten.
• Wenn Sie sicherstellen möchten, dass Ihre Seite dem HTML-Standard entspricht, besuchen Sie die W3-Website, um Ihren Code anhand des aktuellen Standards zu testen. Viele Tags sind veraltet und wurden durch Tags ersetzt, die in modernen Browsern besser funktionieren.

Notwendigkeiten

• Ein Textverarbeitungsprogramm wie Notepad (Windows) oder Texteditor (Mac).
• ein Blatt Papier oder Notizbuch (Optional)
• Ein Programm, das speziell zum Schreiben von HTML entwickelt wurde, z. B. Notepad ++ für Windows oder TextWrangler für Mac (Optional)