Inhalt
- Was ist HTML?
- Texteditoren
- Editor und TextEdit
- Klammern
- Atom
- Texteditor-Vergleich
- Erstellen Sie eine HTML-Datei
- Zeigen Sie Ihre Datei in einem Browser an
- Den Kodex erklären
- Danke fürs Lesen
- Helfen Sie mir, eine bessere Vorstellung davon zu bekommen, wo meine Leser mit HTML stehen
Bret schreibt seit mehr als 10 Jahren HTML und beherrscht auch CSS, JavaScript und React. Bret ist derzeit bei TCN beschäftigt
Was ist HTML?
HTML steht für Hypertext Markup Language. HTML ist keine Sprache im herkömmlichen Sinne, sondern in dem Sinne, dass es sich um ein Tool handelt, das aus Schlüsselwörtern und Befehlen besteht, mit denen Programmierer mit Computern kommunizieren. HTML wird von Webdesignern verwendet, um Websites wie Facebook, Twitter und HubPages zu erstellen. In diesen Beispielen werden auch verschiedene andere Tools verwendet. Für jemanden, der zuerst etwas über das Entwerfen von Websites lernt, ist HTML das erste Tool, das er lernen sollte, wie man es verwendet.
Texteditoren
Zum Schreiben von HTML benötigen Sie einen Texteditor. Ein Texteditor unterscheidet sich von Programmen wie Word, die zum Schreiben von Büchern oder Aufsätzen entwickelt wurden. Programme wie Word verfügen über hilfreiche Tools wie Absatzgestaltung und automatische Großbuchstaben. Diese Tools sind jedoch nicht hilfreich für das Schreiben von HTML. Tatsächlich können sie es sehr schwierig machen, dies zu tun. Verwenden Sie niemals Word, um HTML zu schreiben. Andererseits verfügen Texteditoren häufig über Tools, die speziell für die Programmierung entwickelt wurden. Es gibt viele Texteditoren, aber ich werde mich auf die drei konzentrieren, die ich am häufigsten verwendet habe.
Editor und TextEdit
Notepad oder TextEdit, wenn Sie einen Mac verwenden, ist wahrscheinlich das grundlegendste, das ein Texteditor erhält, und es ist sehr einfach, eine HTML-Datei mit einem dieser Programme zu erstellen und zu bearbeiten. Der Nachteil ist, dass weder Notepad noch TextEdit hilfreiche Tools zum Schreiben von HTML bieten. Wenn Sie jedoch nur schnell und einfach etwas schreiben möchten, reicht beides aus, um die Aufgabe zu erledigen.
Klammern
Klammern sind eine gute Wahl für Anfänger. Es ist nur geringfügig schwieriger zu lernen, wie man es benutzt als Notepad / TextEdit, und es hat den zusätzlichen Vorteil, dass es für HTML und CSS entwickelt wurde. Klammern enthalten viele Tools, die beim Schreiben von HTML hilfreich sind, z. B. Vorschläge zur automatischen Vervollständigung, Textmarker für aktuelle Zeilen, Live-Vorschau und Textmarker für Klammern. Wenn Sie sich nicht sicher sind, was diese Tools sind oder tun, ist das in Ordnung. Sie müssen nur wissen, dass sie in Zukunft für Sie sehr hilfreich sein werden, wenn Sie weiterhin HTML verwenden. Für alle, die an einfachem HTML und CSS arbeiten, ist dies der Editor, den ich empfehlen würde.
Atom
Atom ist ein sehr anpassbarer Texteditor. Es verfügt über viele hilfreiche Tools und kann neben HTML auch für viele andere Programmiersprachen verwendet werden. Leider kann seine enorm anpassbare Natur überwältigend sein, wenn Sie neu in der Programmierung sind. Ich habe Atom selbst für viele Projekte verwendet und es macht mir als Editor wirklich Spaß, aber wenn Sie neu in der Programmierung sind oder nur einfaches HTML und CSS ausführen, würde ich einen der beiden anderen Editoren empfehlen. Abgesehen davon möchte ich Sie dennoch ermutigen, Atom auszuprobieren, nachdem Sie sich mit der Programmierung vertraut gemacht haben oder beabsichtigen, ein fortgeschritteneres Projekt durchzuführen.
Texteditor-Vergleich
| Programm | Lernkurve | Hilfreiche Tools |
|---|---|---|
Editor / TextEdit | Minimal | Keiner |
Klammern | Klein | Hilfreiche Tools für HTML |
Atom | Kann überwältigend sein | Viele erweiterte Tools |
Erstellen Sie eine HTML-Datei
Wenn Sie einen Editor ausgewählt haben, öffnen Sie ihn, erstellen Sie eine neue Datei und speichern Sie sie als index.html (alles in Kleinbuchstaben). Die ".html" teilt Internetbrowsern mit, dass diese Datei HTML enthält, und der Name "index" teilt den Browsern mit, dass dies die Standardhomepage Ihrer Website ist. Sie können diese Datei jetzt tatsächlich in Ihrem Webbrowser öffnen und anzeigen, aber es wäre nur eine leere Seite. Fügen Sie also Text hinzu! Kopieren Sie den folgenden Text und fügen Sie ihn in Ihre index.html-Datei ein.
! DOCTYPE html> html lang = "en"> Kopf> / Kopf> Körper> Hallo Welt !! WILLKOMMEN AUF MEINER WEBSITE!! / body> / html>
Zeigen Sie Ihre Datei in einem Browser an
Ich werde erklären, was jede Zeile bedeutet, aber zuerst wollen wir sehen, wie Ihre Website aussieht. Fahren Sie fort und speichern Sie Ihre Datei erneut. Um Ihre Datei in einem Browser zu öffnen, klicken Sie mit der rechten Maustaste auf die Datei und wählen Sie "Öffnen mit". Wählen Sie dann Ihren Browser aus (siehe Abbildung unten).
Ihr Browser sollte eine Seite öffnen, die dem folgenden Bild ähnelt.
Herzlichen Glückwunsch, Sie haben eine einfache Website erstellt! Es sieht jetzt vielleicht nicht nach viel aus, aber alle Websites fangen klein an. Mit etwas mehr Zeit und Mühe können wir es zu etwas viel Schönerem machen.
Den Kodex erklären
Jetzt wäre ich kein sehr guter Lehrer, wenn ich den Code, den wir gerade verwendet haben, nicht erklären würde. Öffnen Sie Ihre Datei erneut, und wir werden den Code Zeile für Zeile durchgehen. Wenn Ihre Datei in einem Browser geöffnet wird, wenn Sie versuchen, darauf zu klicken, klicken Sie mit der rechten Maustaste auf die Datei und wählen Sie erneut "Öffnen mit". Wählen Sie diesmal jedoch Ihren Editor anstelle eines Browsers aus.
Diese erste Zeile teilt dem Browser einfach mit, in welcher Programmiersprache sich die Datei befindet.
! DOCTYPE html>
Diese beiden Zeilen werden als öffnende und schließende Tags bezeichnet. Ein öffnendes Tag teilt dem Browser mit, wann ein bestimmter Abschnitt Ihrer Website beginnt, und das schließende Tag gibt an, wo er enden wird. Es ist üblich, Zeilen zwischen übereinstimmenden Tags einzurücken, damit Ihr Text leichter zu verstehen ist. Durch Drücken der Tabulatortaste auf Ihrer Tastatur wird ein Einzug in die aktuell ausgewählte Zeile erstellt. Diese spezifischen Tags werden als HTML-Tags bezeichnet und teilen dem Browser mit, dass alles zwischen ihnen HTML ist. Der Teil "lang =" en "ist so, dass der Browser weiß, dass der Innentext in Englisch ist.
html lang = "en"> / html>
Dies sind die Kopfmarken. Text zwischen diesen Tags wird nicht auf Ihrer Website angezeigt. In diesem Abschnitt befindet sich der Code, der dem Browser den Titel der Website mitteilt, wo Sie Styling-Tools wie spezielle Schriftarten erhalten und wo das Registerkartensymbol für Ihre Website gespeichert ist. Für dieses Projekt lassen wir diesen Abschnitt leer.
Kopf> / Kopf>
Alles, was Sie auf Ihrer Website anzeigen möchten, wird zwischen diesen Body-Tags platziert. Dies wird der "Körper" Ihrer Website sein.
Körper> / Körper>
Dies ist einfacher Text. Jeder einfache Text, der in Ihren Body-Tags platziert wird, wird auf der Website angezeigt. Einige Sonderzeichen wie "&" werden nicht auf Ihrer Website angezeigt, können jedoch mithilfe von Zeichenreferenzen angezeigt werden. Beispielsweise sieht "Tom & Jerry" auf Ihrer Website wie "Tom & Jerry" aus.
Hallo Welt!! WILLKOMMEN AUF MEINER WEBSITE!!
Insgesamt können diese Tools verwendet werden, um eine einfache Website zu erstellen.
! DOCTYPE html> html lang = "en"> Kopf> / Kopf> Körper> Hallo Welt !! WILLKOMMEN AUF MEINER WEBSITE!! / body> / html>
Danke fürs Lesen
Vielen Dank, dass Sie diesen Artikel gelesen haben. Wenn Sie Fragen haben, hinterlassen Sie bitte unten einen Kommentar. Gerne helfe ich Ihnen bei Problemen mit diesem Projekt oder mit HTML im Allgemeinen. Darüber hinaus finden Sie hier einige Links zu einigen der hilfreicheren Websites für HTML.
- HTML-Tutorial
Gut organisierte und leicht verständliche Webbuilding-Tutorials mit vielen Beispielen für die Verwendung von HTML, CSS, JavaScript, SQL, PHP und XML.
- Lernen Sie HTML - Kostenloses interaktives HTML-Tutorial
LearnHTML.org ist ein kostenloses interaktives HTML-Tutorial für Leute, die schnell HTML lernen möchten.
- Kostenlose Tutorials zu HTML, CSS und PHP - Erstellen Sie Ihre eigene Websiteenhomepage - HTML.net
Kostenlose Tutorials zu HTML, CSS und PHP - Erstellen Sie Ihre eigene Website - Kostenlose Tutorials zu HTML, CSS und PHP - Erstellen Sie Ihre eigene Website
Helfen Sie mir, eine bessere Vorstellung davon zu bekommen, wo meine Leser mit HTML stehen
Dieser Artikel ist genau und nach bestem Wissen des Autors. Der Inhalt dient nur zu Informations- oder Unterhaltungszwecken und ersetzt nicht die persönliche Beratung oder professionelle Beratung in geschäftlichen, finanziellen, rechtlichen oder technischen Angelegenheiten.
