Diese Tutorial-Serie führt Sie durch das Erstellen und weitere Anpassen dieser Website mit HTML, der Standard-Auszeichnungssprache, die zur Anzeige von Dokumenten in einem Webbrowser verwendet wird. Es sind keine Vorkenntnisse im Programmieren erforderlich, aber wir empfehlen Ihnen, am Anfang der Serie zu beginnen, wenn Sie die Demo-Website nachbauen möchten.
Am Ende dieser Reihe sollten Sie eine Website haben, die bereit ist, in der Cloud bereitgestellt zu werden, und über grundlegende Kenntnisse in HTML verfügen. Wenn Sie wissen, wie man HTML schreibt, haben Sie eine solide Grundlage für das Erlernen weiterer Front-End-Webentwicklungsfähigkeiten, wie CSS und JavaScript.
Dieses Tutorial führt Sie in ein grundlegendes HTML-Dokument ein und zeigt Ihnen, wie Sie den Quellcode eines HTML-Dokuments in einem Browser anzeigen können.
HTML wird verwendet, um ein Dokument mit Anweisungen zu versehen, die einem Browser mitteilen, wie der Inhalt des Dokuments angezeigt und interpretiert werden soll. Zum Beispiel kann HTML dem Browser mitteilen, welcher Textinhalt als Überschrift und welcher Textinhalt als Absatz interpretiert werden soll. HTML wird auch verwendet, um Bilder hinzuzufügen und Links zu Text und Bildern zuzuordnen. Diese Anweisungen werden durch HTML-Tags kommuniziert, die wie folgt geschrieben werden: <tagname>. Viele, wenn auch nicht alle Tags, verwenden einen öffnenden und einen schließenden Tag, um den Inhalt, den sie verändern sollen, zu umschließen.
Um ein Gefühl dafür zu bekommen, wie diese Tags verwendet werden, lassen Sie uns einen Ausschnitt aus dem HTML-Code untersuchen. Der folgende HTML-Code zeigt, wie HTML-Tags verwendet werden, um Text zu strukturieren und Links und Bilder hinzuzufügen. Machen Sie sich keine Sorgen, wenn Sie die Tags nicht sofort verstehen – wir werden sie im nächsten Lernprogramm untersuchen.
<h1>Sammy's Sample HTML</h1><p>This code is an example of how HTML is written.</p><p>It uses HTML tags to structure the text.</p><p>It uses HTML to add a <a href="digitalocean.com/community">link</a>.</p><p>And it also uses HTML to add an image:</p><img src="https://html.sammy-codes.com/images/small-profile.jpeg"/>Dieser HTML-Code wird im Browser wie folgt gerendert:
Sie sollten nun ein Verständnis dafür haben, wie der HTML-Beispielcode in einem Browser gerendert wird. Als Nächstes werden wir lernen, wie man den Quellcode einer beliebigen Webseite mit einem Browser-Tool anzeigen kann.
Den Quellcode einer Webseite ansehen
Nahezu jede Webseite, der Sie begegnen, verwendet HTML zur Strukturierung und Darstellung von HTML-Seiten. Sie können den Quellcode jeder Webseite mit einem Webbrowser wie Firefox oder Chrome untersuchen. Navigieren Sie bei Firefox im oberen Menü auf den Menüpunkt „Extras“ und klicken Sie auf „Webentwickler/Seitenquelltext“, etwa so:
Im Firefox können Sie auch das Tastaturkürzel Command-U verwenden, um den Quellcode einer Webseite einzusehen.
Bei Chrome ist der Vorgang sehr ähnlich. Navigieren Sie zum oberen Menüpunkt „Ansicht“ und klicken Sie auf „Entwickler/Quellcode anzeigen.“ Sie können auch das Tastaturkürzel Option-Command-U verwenden.
Versuchen Sie, den Quellcode der Demo-Website zu inspizieren, die wir in dieser Tutorial-Serie bauen werden. Sie sollten eine Seite erhalten, die viel mehr HTML-Tags enthält als unser obiges Beispiel. Seien Sie nicht beunruhigt, wenn es überwältigend erscheint. Am Ende dieser Tutorial-Reihe sollten Sie ein besseres Verständnis dafür haben, wie man HTML-Quellcode interpretiert und wie man HTML zum Erstellen und Anpassen eigener Websites verwendet.
Hinweis: Wie bereits erwähnt, können Sie den Quellcode einer beliebigen Webseite mit den Werkzeugen des Firefox- oder Chrome-Webbrowsers untersuchen. Versuchen Sie, den Code einiger Ihrer Lieblingswebseiten zu inspizieren, um ein Gefühl für den zugrunde liegenden Code zu bekommen, der Webdokumente strukturiert. Obwohl der Quellcode dieser Websites wahrscheinlich mehr Sprachen als HTML enthält, wird das Erlernen von HTML Sie darauf vorbereiten, später weitere Sprachen und Frameworks für die Erstellung von Websites zu erlernen, falls Sie dies wünschen.