HTML ist die Abkürzung für Hyper Text Auszeichnungssprache, und ist der Code oder Sprache Das wird für die Erstellung von grundlegenden Website-Layouts verwendet. Es kann ein wenig entmutigend aussehen, wenn Sie noch nie etwas programmiert haben, aber alles, was Sie zum Ausprobieren brauchen, ist eine gewöhnliche Textbearbeitungsanwendung und ein Internetbrowser. Vielleicht erkennen Sie sogar HTML, das zum Ändern von Text in Online-Foren, benutzerdefinierten Online-Profilen oder sogar einigen wikiHow-Artikeln verwendet wird. HTML ist ein nützliches Werkzeug für jeden, der das Internet nutzt, und das Erlernen der Grundlagen braucht weniger Zeit als Sie denken.
Teil eins von zwei:
Einfaches HTML lernen
-
1 Öffnen Sie ein HTML-Dokument. Die meisten Textverarbeitungsprogramme, einschließlich Notepad oder Notepad ++ für Windows, TextEdit für Mac und gedit für GNU / Linux, können zum Schreiben von HTML-Dokumenten verwendet werden. Öffne ein neues Dokument und benutze es Datei → Speichern als im oberen Menü, um es als "Webseite" zu speichern, oder um die Dateierweiterung in ".html" anstelle von ".doc", ".rtf" oder einer anderen Erweiterung zu ändern.
- Möglicherweise wird eine Warnung angezeigt, dass Ihr Dokument in "Nur Text" anstelle von "Rich Text" geändert wird, oder dass spezielle Formatierungen und Bilder nicht ordnungsgemäß gespeichert werden. Das ist in Ordnung; HTML-Dokumente verwenden diese Optionen nicht.
-
2 Zeigen Sie Ihr Dokument mit einem Internetbrowser an. Speichern Sie Ihr leeres Dokument, suchen Sie dann das Dokumentsymbol auf Ihrem Computer und doppelklicken Sie, um es zu öffnen. Es sollte als leere Webseite in Ihrem Browser geöffnet werden. Ist dies nicht der Fall, ziehen Sie das Dateisymbol in die Adressleiste Ihres Browsers. Wenn Sie in diesem Lernprogramm Ihr HTML-Dokument bearbeiten, können Sie überprüfen, wie sich Ihre Webseite ändert.
- Beachten Sie, dass dadurch keine Website online erstellt wird. Es ist für andere Personen nicht zugänglich und Sie benötigen keine Internetverbindung zum Testen. Dies verwendet nur einen Browser, um Ihr HTML-Dokument zu lesen, als wäre es eine Website.
-
3 Markup-Tags verstehen Markup-Tags werden auf einer Webseite nicht wie normaler Text angezeigt. Stattdessen teilen sie Ihrem Webbrowser mit, wie die Seite und ihr Inhalt angezeigt werden sollen. Das "Start-Tag" enthält Anweisungen. Beispielsweise könnte es dem Browser mitteilen, dass Text als angezeigt werden soll Fett gedruckt. Sie benötigen auch ein "End-Tag", um dem Browser mitzuteilen, wo die Anweisungen gelten: In diesem Beispiel ist der gesamte Text zwischen dem Start-Tag und dem End-Tag fett gedruckt. Schreibe End-Tags auch in spitzen Klammern, aber beginne mit einem Schrägstrich nach der ersten Klammer.
- Schreiben Sie Start-Tags zwischen spitzen Klammern:
<
Start-Tag geht hier>
- Schreiben Sie End-Tags zwischen spitzen Klammern, setzen Sie jedoch nach der ersten Klammer einen Schrägstrich:
End-Tag geht hier
>
) - Lesen Sie weiter, um zu erfahren, wie Sie funktionale Markup-Tags schreiben. Für diesen Schritt müssen Sie sich nur an das grundlegende Format erinnern, in dem sie geschrieben sind: <> und
- Wenn Sie auch andere HTML-Lernprogramme verwenden, sehen Sie möglicherweise, dass sie die Tags als "Elemente" und den Text zwischen Start- und End-Tags als "Elementinhalt" bezeichnen.
- Schreiben Sie Start-Tags zwischen spitzen Klammern:
-
4 Schreibe deine erste Etikett. Jedes HTML-Dokument beginnt mit a
tag und endet mit a
Etikett. Dies sagt dem Browser, dass alles zwischen diesen Tags in HTML ist. Fügen Sie diese Tags zu Ihrem Dokument hinzu:
- Oft werden HTML-Dateien mit a gestartet
Zeile, die angibt, dass die Datei als Ganzes als HTML-Datei von Browsern gelesen werden soll. Es wird nicht benötigt, kann aber helfen, Kompatibilitätsprobleme zu lösen.
- Schreiben ganz oben in Ihrem Dokument.
- Schlagen eingeben oder Rückkehr mehrere Male, um sich etwas Platz zu geben, dann schreibe
- Denken Sie daran zu schreiben alles sonst in diesem Tutorial zwischen diesen beiden Tags.
- Oft werden HTML-Dateien mit a gestartet
-
5 Fülle das aus Teil Ihres Dokuments. Zwischen den und Tags, schreiben a Start-Tag und a End-Tag Gib dir Raum, um zwischen ihnen zu schreiben. Alles dazwischen wird nicht auf der Seite angezeigt. Probieren Sie Folgendes aus und sehen Sie, wo es angezeigt wird:
- Zwischen den und Tags, schreiben
und - Zwischen den
und Tags, schreiben Wie man HTML lernt - wikiHow. - Speichern Sie das Dokument und öffnen Sie es in einem Browser (oder speichern Sie das Dokument und aktualisieren Sie die Browserseite, falls diese bereits geöffnet ist.) Sehen Sie, was Sie oben im Browser oberhalb der Adressleiste geschrieben haben?
- Zwischen den und Tags, schreiben
-
6 Ein ... kreieren Sektion. Alles andere in diesem Anfänger-Dokument wird in einen Body-Abschnitt gehen, der tatsächlich auf der Webseite angezeigt wird. Nach das End-Tag, aber Vor das Tag, schreibe und . Für den Rest dieses Tutorials wird alles, was Sie schreiben, zwischen diesen Body-Tags eingefügt. Sie sollten jetzt ein Dokument haben, das wie folgt aussieht (ignorieren Sie die Aufzählungspunkte):
Wie man HTML lernt - wikiHow
-
7 Fügen Sie Text in verschiedenen Stilen hinzu. Jetzt ist es an der Zeit, etwas zu schreiben, was Sie tatsächlich in Ihrem Browser sehen können! Alles, was Sie in den Body-Tags schreiben, wird in Ihrem Browser angezeigt, nachdem Sie das HTML-Dokument gespeichert und die Browser-Seite aktualisiert haben. Nicht schreibe alles mit dem < oder > Symbole jedoch, da Ihr Browser versucht, es als HTML-Anweisung anstelle von normalem Text zu interpretieren. Versuch zu schreiben Hallo Welt! (oder irgendetwas anderes, das du magst), füge dann diese neuen Tags hinzu und schaue, was jedes Mal passiert:
-
Hallo Welt!
erscheint als "hervorgehobener Text:" Hallo Welt! -
Hallo Welt!
wird als "starker Text" angezeigt: Hallo Welt! -
wird mit einem durchgestrichenen Zeichen angezeigt:Hallo Welt!Hallo Welt! -
Hallo Welt!
wird als hochgestellt angezeigt: Hallo Welt! -
Hallo Welt!
wird als tiefgestellt angezeigt: Hallo Welt! - Versuchen Sie Kombinationen von diesen: Was macht
Hallo Welt!
aussehen wie?
-
-
8 Teilen Sie Ihren Text in Absätze auf. Wenn Sie versuchen, mehrere Zeilen Text in Ihrem HTML-Dokument zu schreiben, stellen Sie möglicherweise fest, dass die Zeilenumbrüche in Ihrem Browser nicht angezeigt werden. Sie müssen diese selbst codieren:
Dies ist ein separater Absatz.
-
Diesem Satz folgt ein Zeilenumbruch.
bevor dieser Satz beginnt.
Dies ist das erste Tag, das Sie gesehen haben, das kein End-Tag benötigt! Diese werden als "leere Tags" bezeichnet. - Überschriften erstellen, um die Namen der Abschnitte anzuzeigen:
: der größte HeaderÜberschrift
(die 2nd Ebenenheader)Überschrift
(die 3rd Ebenenheader)Überschrift
(die 4th Ebenenheader)Überschrift
(der kleinste Header)Überschrift
-
9 Erfahren Sie, wie Sie Listen erstellen. Es gibt verschiedene Möglichkeiten, Listen auf Ihrer Webseite zu schreiben. Probieren Sie die folgenden Codearten aus und sehen Sie, welche Ihnen gefällt. Beachten Sie, dass ein Paar Tags die gesamte Liste umgeht (z. B. die
- und
- und .
- Verwenden Sie diesen Code, um Aufzählungslisten zu erstellen:
- Ein Gegenstand
- Ein weiterer Artikel
- Ein weiterer Artikel
- Oder diesen Code, um nummerierte Listen zu machen:
- Gegenstand 1
- Punkt 2
- Punkt 3
- Oder diesen Code, um eine Liste zu erstellen, die Begriffe definiert:
- Kaffee
- - Heisses Getränk
- Leite
- - Kaltgetränk
-
10 Feuere deine Seite mit Zeilenumbrüchen, horizontalen Linien und Bildern auf. Jetzt ist es Zeit zu versuchen, Dinge neben Text auf Ihrer Seite hinzuzufügen. Probieren Sie die folgenden Tags aus oder klicken Sie auf die Links, um weitere Informationen zu erhalten. Sie müssen einen Online-Bildhosting-Dienst verwenden, damit Sie eine URL zum Verknüpfen mit dem Bild-Tag haben:
- Fügen Sie eine Zeile in HTML ein:
oder - Füge Bilder hinzu:
- Fügen Sie eine Zeile in HTML ein:
-
11 Verlinke mit anderen Orten auf der Seite. Sie können diesen Code auch verwenden, um Links zu anderen Seiten und Websites zu erstellen. Im Moment konzentrieren wir uns jedoch auf "Anker" oder bestimmte Stellen auf der Seite, mit denen Sie eine Verknüpfung herstellen können, da Sie möglicherweise noch keine Website haben:
- Machen Sie zuerst einen Anker mit der Tag an der Stelle auf der Seite, mit der Sie verlinken möchten. Nennen Sie es etwas beschreibend und einfach zu merken .:
Dies ist der Text, um den Sie den Anker legen.
- Benutze die
mit diesen Ankern oder einer anderen Webseite verlinken: Schreibe den Text oder das Bild, das hier als Link angezeigt wird.
- Um eine Verknüpfung zu einem Anker auf einer anderen Webseite herzustellen, fügen Sie nach der URL das Zeichen # hinzu, gefolgt vom Namen des Ankers. Zum Beispiel verlinkt https://www.wikihow.com/Learn-HTML#Tips zum Abschnitt Tipps auf dieser Seite.
- Machen Sie zuerst einen Anker mit der Tag an der Stelle auf der Seite, mit der Sie verlinken möchten. Nennen Sie es etwas beschreibend und einfach zu merken .:
Teil zwei von zwei:
Erfahren Sie mehr Advanced HTML
-
1 Erfahren Sie mehr über Attribute. Attribute werden innerhalb des Tags selbst platziert, wodurch zusätzliche Änderungen am "Elementinhalt" zwischen dem Start- und End-Tag vorgenommen werden. Sie stehen niemals allein. Sie sind im Format geschrieben Name = "Wert", woher Name ist der Name des Attributs (zum Beispiel "Farbe"), und Wert beschreibt diese spezifische Instanz (zum Beispiel "rot").
- Sie haben die Attribute tatsächlich schon einmal gesehen, wenn Sie dem Tutorial im grundlegenden HTML-Abschnitt gefolgt sind.
Tags verwenden die src Attribut, Anker verwenden die Name Attribut und Links verwenden das href Attribut. Seht, wie alle dem folgen ___="___" Format?
- Sie haben die Attribute tatsächlich schon einmal gesehen, wenn Sie dem Tutorial im grundlegenden HTML-Abschnitt gefolgt sind.
-
2 Experimentieren Sie mit HTML-Tabellen. Das Erstellen einer Tabelle oder eines Diagramms erfordert mehrere unterschiedliche Tags. Spielen Sie mit diesen Tags oder erfahren Sie mehr über HTML-Tabellen.
- Beginnen Sie mit Tabellentags um die gesamte Tabelle:
- Row-Tags um den Inhalt jeder Zeile:
- Spaltenüberschriften in der ersten Zeile:
- Zellen in nachfolgenden Zeilen:
- Hier ist ein Beispiel, wie alles zusammenpasst:
Spalte 1: Monat Spalte 2: Geld gespart Januar $100
- Beginnen Sie mit Tabellentags um die gesamte Tabelle:
-
3 Lerne die verschiedenen Kopf-Tags. Du hast das schon gelernt Tag, das am Anfang jedes Dokuments angezeigt wird. neben dem
tag, kann es die folgenden Arten von Tags enthalten: - Meta-Tags, die zur Verfügung gestellt werden Metadaten über eine Webseite. Diese Daten können von Suchmaschinen verwendet werden, wenn der Roboter das Internet durchsucht, um Websites zu finden und aufzulisten. Verwenden Sie eines oder mehrere, um Ihre Website in Suchmaschinen besser sichtbar zu machen Start-Tags (keine End-Tags erforderlich), jeweils mit genau einem Namensattribut und einem Inhaltsattribut, zum Beispiel: ; oder
- Tags werden verwendet, um andere Dateien mit der Seite zu verknüpfen. Dies wird hauptsächlich verwendet, um auf CSS-Stylesheets zu verweisen, die mit einer anderen Art von Codierung erstellt werden, um Ihre HTML-Seite durch Hinzufügen von Farbe, Ausrichtung Ihres Textes und viele andere Dinge zu ändern.
Facebook
Twitter
Google+