Wie schreibe ich eine HTML-Seite (mit Bildern) - Tipps

Video: Eigene Website mit HTML und CSS bauen | Tutorial für Anfänger 2020

Inhalt

Schritte
Teil 1: Wie ich HTML entdeckte
Rat
Warnung
Was du brauchst

HTML (HyperText Markup Language) ist eine grundlegende Sprache zum Erstellen von Webseiten. Es wurde als einfache und flexible Codierungssprache erstellt. Nahezu jede Website im Internet wird mit einer Form dieses Codes (ColdFusion, XML, XSLT) entwickelt. HTML ist leicht zu verstehen, aber Sie können noch lange darüber lernen, wenn Sie an seiner umfassenden Funktionalität interessiert sind. Um Ihrer Website Farbe und Spaß zu verleihen, können Sie grundlegendes CSS lernen, sobald Sie sich an eine grundlegende HTML-Seite gewöhnt haben.

Schritte

Teil 1 von 4: Erstellen eines Dokuments

Öffnen Sie einen einfachen Texteditor. NotePad ist eine gute Option und kann kostenlos heruntergeladen werden. Sie können HTML mit den meisten Texteditoren schreiben, aber komplexere Software mit automatischen Formatierungsfunktionen kann die Organisation Ihrer HTML-Seite erschweren.
- Verwenden Sie TextEdit nicht, da die Datei normalerweise in einem Format gespeichert wird, das Ihr Browser möglicherweise nicht als HTML erkennt.
- Sie können auch einen Online-HTML-Editor verwenden. Spezielle HTML-Bearbeitungsprogramme werden Anfängern nicht empfohlen.
Speichern Sie eine Datei als Webseite. Wählen Sie oben im Menü Datei → Speichern unter. Ändern Sie das Dateiformat in "Webseite", ".html" oder ".htm". Speichern Sie die Datei dort, wo Sie sie leicht finden können.
- Es gibt keinen Unterschied zwischen diesen drei Optionen.
Öffnen Sie die Datei in einem Browser. Doppelklicken Sie auf die Datei und sie wird automatisch als leere Webseite in Ihrem Browser geöffnet. Alternativ können Sie einen Browser wie Firefox oder Internet Explorer öffnen und dann mit Datei → Datei öffnen das Dokument auswählen.
- Diese Website ist nicht online. Es kann nur auf Ihrem Computer angezeigt werden.
Aktualisieren Sie die Webseite und sehen Sie sich die vorgenommenen Änderungen an. Geben Sie Folgendes in Ihr leeres Dokument ein: Hallo. Speichern Sie das Dokument. Aktualisieren Sie die leere Webseite in Ihrem Browser, und oben auf der Seite sollte das fett gedruckte Wort "Hallo" angezeigt werden. Wenn Sie in diesem Lernprogramm Ihren neuen HTML-Code testen möchten, speichern Sie das HTML-Dokument und aktualisieren Sie dann Ihr Browserfenster, um zu sehen, wie HTML kompiliert wird.
- Wenn Sie die Wörter sehen ""und"'' Erscheint in Ihrem Browser, die Datei wurde nicht korrekt in HTML kompiliert. Versuchen Sie es mit einem anderen Texteditor oder einem anderen Browser.
Lerne die Tags. HTML-Befehle werden in "Tags" geschrieben, die dem Browser mitteilen, wie Ihre Webseite kompiliert und angezeigt werden soll. Sie werden immer in einfache Anführungszeichen gesetzt
und werden nicht auf der Webseite angezeigt, wie Sie sie im obigen Beispiel verwendet haben:
- ist eine "Startkarte" oder "Eröffnungskarte". Alles, was nach diesem Tag geschrieben wird, wird als "fett" (fett auf einer Webseite) definiert.
- ist ein "End-Tag" oder "Closing-Tag", das Sie durch das Symbol / Zeichen unterscheiden können. Es kennzeichnet das Ende von fettem Text. Die meisten (nicht alle) Tags benötigen ein End-Tag, um zu funktionieren. Fügen Sie es daher unbedingt ein.
Erstellen Sie Ihr Dokument. Löschen Sie alles in Ihrem HTML-Dokument. Beginnen Sie von vorne mit dem folgenden Text, genau so, wie er geschrieben wurde (abzüglich der Aufzählungszeichen). Dieser HTML-Code teilt dem Browser mit, welche Art von HTML Sie verwenden und dass Ihr gesamtes HTML in den Tags platziert wird. und .
Fügen Sie die Kopf- (Kopf-) und Körper-Tags hinzu. HTML-Dokumente sind in zwei Teile unterteilt. Der Abschnitt "oben" enthält spezielle Informationen wie den Titel der Seite. Der Abschnitt "body" enthält den Hauptinhalt der Seite. Fügen Sie beide Abschnitte zu Ihrem Dokument hinzu und denken Sie daran, die End-Tags einzuschließen. Der neu hinzugefügte Text ist fett gedruckt:
Geben Sie Ihrer Seite einen Titel. Die meisten Karten im Kopfbereich sind für Anfänger unerheblich. Das Titel-Tag ist jedoch einfach zu verwenden und bestimmt, was als Name des Browserfensters oder auf der Registerkarte Browser angezeigt wird. Platzieren Sie die Start- und End-Tags Ihres Titels in den Head-Tags und schreiben Sie beliebige Überschriften zwischen diese Tags:
- Meine erste HTML-Seite.
Werbung

Teil 2 von 4: Textformatierung

Fügen Sie Ihrem Körper Text hinzu. In diesem Abschnitt werden wir nur mit Body-Tags arbeiten. Der andere Text befindet sich weiterhin in Ihrem Dokument. Wir sparen jedoch Platz, indem wir ihn in diesem Lernprogramm nicht wiederholen. Schreiben Sie zwischen die Karten, was Sie wollen und und es wird als erster Inhalt auf Ihrer Seite angezeigt. Beispielsweise:
- Ich habe die Anweisungen von wikiHow befolgt, um eine HTML-Seite zu schreiben.
Fügen Sie Überschriften für den Text hinzu. Organisieren Sie Ihre Seite mit Überschriften-Tags, die den Browser anweisen, Text zwischen ihnen in einer größeren Schriftgröße anzuzeigen. Diese Tags werden auch von Suchmaschinen und anderen Tools verwendet, um festzustellen, worum es auf Ihrer Website geht und wie sie organisiert ist.

ist die größte Überschrift, und Sie können kleinere Überschriften bis zu erstellen

. Probieren Sie sie auf Ihrer Seite aus:
- Wilkommen auf meiner Seite.
- Ich habe die Anweisungen von wikiHow befolgt, um eine HTML-Seite zu schreiben.
- Mein heutiges Ziel:
- Erfüllte Ziele:
- Erfahren Sie, wie Sie Überschriften verwenden.
- Unvollständige Ziele:
- Weitere Informationen zum Formatieren von Tags.
Weitere Informationen zum Formatieren von Tags. Sie haben das "starke" Tag bereits gesehen, aber es gibt viele andere Möglichkeiten, Ihren Text zu formatieren. Probieren Sie diese Tags oder mehrere Tags gleichzeitig für dieselbe Textzeichenfolge aus. Denken Sie daran, End-Tags hinten hinzuzufügen!
- Wichtiger Text, der im Browser fett angezeigt wird.
- Hervorgehobener Text, der im Browser kursiv dargestellt wird.
- Text etwas kleiner als gewöhnlich. Die Größe dieses Textes wird automatisch geändert, wenn er in einer Überschrift verwendet wird.
- ~~Text ist nicht mehr relevant und wird mit einem Bindestrich angezeigt.~~
- Text wird später als andere Dokumente eingefügt und mit Unterstreichungen angezeigt.
Organisieren Sie Text auf Ihrer Seite. Möglicherweise haben Sie bemerkt, dass das Drücken der Eingabetaste nicht ausreicht, um den Text in einer anderen Zeile anzuzeigen. Mithilfe dieser Tags können Sie Absätze und Zeilenumbrüche erstellen oder Ihren Text auf andere Weise anordnen:
- Die Abkürzung für "Absatz" (Absatz) hält den gesamten Text zwischen diesen Tags in einem Absatz und trennt ihn vom Text darüber und darunter.
- Dieses Tag generiert Zeilenumbrüche. Fügen Sie kein End-Tag hinzu, da es keinen anderen Inhalt beeinträchtigt. Verwenden Sie dieses Tag in Gedichten oder Adresszeilen, nicht in Absätzen.
- ```
Wenn Sie den Text sehr genau anzeigen müssen, setzt dieses Tag den darin enthaltenen Text auf eine Schriftart mit fester Breite (jeder Buchstabe hat dieselbe Breite) und ermöglicht das Erstellen von Intervallen Leerzeichen und Zeilenumbrüche nach Belieben für die regelmäßige Bearbeitung anstelle von Tags.
```
- Dieses Tag definiert den Texttyp, der aus einer Quelle zitiert wird.
  Sie können die Quelle später mit beschreiben Karte zitieren.
Fügen Sie unsichtbaren Beschriftungstext hinzu. Kommentar-Tags werden auf der Webseite nicht angezeigt. Mit ihnen können Sie sich selbst in das HTML-Dokument einfügen, ohne den Inhalt zu beeinflussen. Fügen Sie kein End-Tag hinzu.
- Die Karten, die alleine gehen, ohne Tags zu beenden, werden als "leere Tags" bezeichnet.
Kombiniere sie zusammen. Der beste Weg, sich diese Tags zu merken, besteht darin, sie auf Ihrer Website zu verwenden. Hier ist ein Beispiel für die Verwendung der Karten in den Schritten, die Sie bisher gelernt haben. Versuchen Sie vorherzusagen, wie sie im Browser angezeigt werden, kopieren Sie sie dann in Ihr Dokument und finden Sie es heraus.
- Meine erste HTML-Seite.
- Willkommen auf meiner Website.
- Ich hoffe, Ihnen gefällt diese Seite!
  Ich habe es nur für dich gemacht.
- Teil 1: Wie ich HTML entdeckte
- Ich habe HTML bereits in gelernt ~~einer~~ zweiStunden, also bin ich jetzt ein Experte.
Werbung

Teil 3 von 4: Hinzufügen von Links und Bildern

Erfahren Sie mehr über Attribute. In Tags können zusätzliche Informationen geschrieben sein, die als Attribute bezeichnet werden. Diese Attribute werden durch zusätzliche Wörter in den Tags selbst im Formular dargestellt Eigenschaftsname = "spezifischer Wert". Beispielsweise kann jedes HTML-Tag das title-Attribut haben:
- Der einleitende Absatz ist hier.
  Benennen Sie den Absatz mit "Info", der angezeigt wird, wenn Sie den Mauszeiger über den Absatz auf der Webseite bewegen.
Links zu anderen Websites. Verwendung von Karten um einen Hyperlink zu einer anderen Webseite zu erstellen. Geben Sie die URL der Webseite ein, auf die mit dem href-Attribut verwiesen werden soll. Hier ist ein Beispiel, das auf die Webseite verweist, die Sie gerade lesen:
- Ihre Besucher Ihrer Website können auf diesen Text klicken, um dem Link zu folgen.
Fügen Sie dem Tag ein ID-Attribut hinzu. Ein weiteres Attribut, das jedes HTML-Tag verwenden kann, ist das Element "id". Schreiben Sie in jede Karte id = "vidu" oder verwenden Sie einen Namen, der keine Leerzeichen enthält. Es erzeugt keinen sichtbaren Effekt, aber wir werden ihn im nächsten Schritt verwenden.
- Fügen Sie Ihrem Dokument beispielsweise Folgendes hinzu:
  Dieser Absatz wird als Beispiel verwendet, um die Funktionsweise des ID-Attributs zu beschreiben.
Link zu einem Element mit einer bestimmten ID. Jetzt können wir das Hyperlink-Tag verwenden, , um auf eine andere Stelle auf derselben Seite zu verlinken. Anstelle einer URL verwenden wir das Symbol #, gefolgt von dem ID-Wert, auf den wir verlinken möchten. Beispielsweise, Dieser Text wird mit der ID "vidu" auf den Text verlinkt.
- Bei allen HTML-Werten wird zwischen Groß- und Kleinschreibung unterschieden. "#VIDU" und "#vidu" werden beide mit demselben Speicherort verknüpft.
- Wenn Ihre Seite kurz genug ist, um die gesamte Seite auf einmal anzuzeigen, werden Sie wahrscheinlich nichts bemerken, wenn Sie auf einen Link in Ihrem Browser klicken. Ändern Sie die Größe des Fensters, bis die Bildlaufleiste angezeigt wird, und versuchen Sie es erneut.
Fotos hinzufügen. Karte ist ein leeres Tag, was bedeutet, dass kein End-Tag erforderlich ist. Alle Informationen, die der Browser zum Anzeigen des Bildes benötigt, werden mithilfe von Attributen hinzugefügt. Hier ist ein Beispiel für die Anzeige des wikiHow-Logos mit einer Beschreibung für jedes Attribut dahinter:
- Eigenschaften src = "" teilt dem Browser mit, wo sich das Foto befindet. (Beachten Sie, dass das Posten eines Fotos von einer anderen Website als unangemessen angesehen wird - und das Foto verschwindet, wenn die Seite nicht mehr aktiv ist.)
- Eigenschaften style = "" Es kann viele Dinge tun, aber vor allem wird es verwendet, um die Breite und Höhe eines Bildes in Pixel festzulegen. (Sie können stattdessen auch die separaten Attribute width = "" und height = "" verwenden. Dies kann jedoch zu seltsamen Größenänderungsproblemen führen, wenn Sie CSS verwenden.)
- Eigenschaften alt = "" ist eine kurze Beschreibung des Bildes, die der Benutzer sehen wird, wenn es nicht geladen werden konnte. Dies wird als Voraussetzung angesehen, da es für Screenreader für blinde Website-Besucher verwendet wird.
Werbung

Teil 4 von 4: Weitere Informationen Hinzufügen und Online-Schalten Ihrer Website

Bestätigen Sie Ihren HTML-Code. Die HTML-Validierung prüft, ob Ihr Code fehlerhaft ist. Wenn Ihre Site nicht korrekt angezeigt wird, kann die Validierung Ihnen helfen, den Fehler zu finden, der das Problem verursacht. Es kann Ihnen auch mehr über HTML beibringen, indem festgestellt wird, dass der Code auf dem Display gut aussieht. Es wird jedoch aufgrund neuer Aktualisierungen im HTML-Standard nicht mehr empfohlen. Die Verwendung von ungültigem HTML macht Ihre Website nicht unbrauchbar, kann jedoch Probleme verursachen oder in verschiedenen Browsern instabil angezeigt werden.
- Probieren Sie einen kostenlosen Online-Validierungsdienst von W3C aus oder suchen Sie online nach einem anderen HTML 5-Validierungstool.
Weitere Informationen zu Tags und Attributen. Es gibt viele andere HTML-Tags und -Attribute und viele Orte, an denen Sie sie lernen können:
- Probieren Sie w3schools und HTML Dog aus, um weitere Tutorials und vollständige Listen mit Tags zu erhalten.
- Suchen Sie eine Webseite, die Ihnen gefällt, und verwenden Sie dann die Funktion "Seitenquelle anzeigen" Ihres Browsers, um den HTML-Code selbst abzurufen. Kopieren Sie es in Ihr Dokument und untersuchen Sie, wie es funktioniert.
- Lesen Sie andere Artikel und erfahren Sie, wie Sie Tabellen in HTML erstellen, Meta-Tags verwenden, um die Wahrscheinlichkeit zu erhöhen, dass Sie sie über Suchmaschinen finden, oder eine Abteilung verwenden. Legen Sie einen Bereich auf der Seite fest) und einen Bereich (der zum Festlegen des Stils des Textelements verwendet wird), um den Stil durch CSS zu unterstützen.
Holen Sie sich Ihre Website online. Wählen Sie einen Dienst zum Hosten Ihrer Website aus, und laden Sie dann beliebig viele HTML-Seiten in Ihre persönliche Webdomain hoch. Dazu müssen Sie eine FTP-Upload-Software verwenden, aber auch viele Web-Verleihdienste bieten diesen Service an.
- Wenn Sie auf Seiten oder Bilder verlinken, die sich direkt auf Ihrer Website befinden, müssen Sie die vollständige Adresse verwenden. Wenn Ihr Domain-Name beispielsweise www.chuyengiahtmlsieudang.com lautet, dann Der Text befindet sich in diesen Tags wird auf "www.chuyengiahtmlsieudang.com/nhatky/thuhai.html" verlinken
Fügen Sie Stile mit CSS hinzu. Wenn Ihre HTML-Seite etwas eintönig aussieht, lernen Sie die Grundlagen von CSS, um Farben, verschiedene Schriftarten und eine bessere Kontrolle darüber hinzuzufügen, wo Elemente platziert werden. Durch das Verknüpfen eines CSS- "Stylesheets" mit einer HTML-Seite können Sie im Handumdrehen drastische Änderungen vornehmen und den Stil des gesamten Textes innerhalb eines bestimmten Tags dynamisch anpassen. Sie können hier ein wenig mit der grundlegenden Formatierungsebene herumspielen oder in detailliertere Tutorials im CSS-Tutorial von HTML Dog eintauchen.
Fügen Sie Ihrer Website JavaScript hinzu. JavaScript ist eine Programmiersprache, mit der Sie Ihren HTML-Seiten viele Funktionen hinzufügen können. Die JavaScript-Befehle werden zwischen den Start- und End-Tags eingefügt und kann verwendet werden, um interaktive Schaltflächen hinzuzufügen, mathematische Probleme zu berechnen und vieles mehr. Weitere Informationen finden Sie in den w3c-Beispielen. Werbung

Rat

Die in diesem Lernprogramm verwendete Doctype-Deklaration (verwendete Dokumenttypdeklaration) lautet "Loose HTML 4.0.1 Transitional" (HTML 4.0.1 nicht enger Übergang), ein einfaches Format. für Anfänger zu verwenden. Verwenden () eine Alternative zum Kompilieren durch den Browser in einem strengen HTML 5-Format, das der empfohlene (wenn auch weniger häufig verwendete) Standardstil ist.

Warnung

Der Zweck von HTML besteht darin, Inhalte in einem globalen Format zu halten. Es hat keine Kontrolle über die Präsentation Ihrer Website, wie z. B. die Hintergrundfarbe und die genaue Platzierung der Elemente. Es gibt zwar noch Tags, mit denen Sie dies tun können, es ist jedoch eine gute Idee, CSS zu verwenden, um eine kontrollierbarere und konsistentere Website zu erstellen.

Was du brauchst

Ein einfacher Texteditor wie NotePad oder TextEdit
Ein Webbrowser wie Internet Explorer oder Mozilla Firefox
(Optional) Ein HTML-Editor wie Adobe Dreamweaver, Aptana Studio oder Microsoft Expression Web