Bare Bones-Webseite - Gunook

2024 Autor: John Day | [email protected]. Zuletzt bearbeitet: 2024-01-30 07:20

Heute werden wir eine sehr einfache, nackte Webseite von Grund auf neu erstellen. Wir sprechen über HTML-Elemente, das Styling Ihrer Webseite (Farben, Schriftarten, Ausrichtung usw.) und schließlich, wie Sie ein Bild in Ihre Webseite einfügen!

Am Ende dieser Anleitung verfügen Sie über die grundlegenden Fähigkeiten, um eine Webseite von Grund auf neu zu erstellen, und entdecken, dass die Codierung nicht so schwer ist, wie es scheint!

Schritt 1: Notepad verwenden

Wir werden Notepad unter Windows verwenden, um unsere erste Webseite zu erstellen. Obwohl jeder Texteditor ausreicht, ist Notepad auf Windows-Rechnern vorinstalliert, so dass es ein guter Ausgangspunkt ist.

Um den Notizblock zu öffnen, gehen Sie zu Ihrer Suchleiste in der unteren linken Ecke Ihres Bildschirms und geben Sie "Notizblock" ein. Wählen Sie dann die Anwendung "Notepad", die in den Suchergebnissen angezeigt wird. Ein neues Fenster sollte geöffnet werden.

Schritt 2: Hinzufügen des grundlegenden HTML-Dokumentenbaums

Alle Webseiten müssen einer Standard-Skelettstruktur folgen, damit Ihr Webbrowser (Chrome, Firefox, Edge, Internet Explorer, Safari…) Ihre Webseite verarbeiten und anzeigen kann.

Dies wird als HTML-Dokumentenbaum bezeichnet. Geben Sie im Editor das HTML-Element "Elemente" oder "Tags" ein, wie im Screenshot angezeigt. Gerne auch kopieren und einfügen:

Schritt 3: Speichern als.html-Seite

Nachdem wir nun unsere grundlegende HTML-Struktur in Notepad haben, speichern wir sie, damit wir keine Arbeit verlieren und unsere Änderungen im Verlauf des Instructable sehen können.

1. Wählen Sie „Datei“> „Speichern unter…“(Screenshot 1)
2. Ändern Sie den Dateityp in "Alle Dateien" (Screenshot 2)
3. Geben Sie Ihrer Datei einen Namen Ihrer Wahl. Merken Sie sich, wo Sie das Dokument auf Ihrem Computer speichern, damit Sie es später öffnen können. HINWEIS: Der wichtigste Teil beim Speichern dieser Datei ist das Anhängen von ".html" an das Ende des Dateinamens. Dadurch kann Ihr Computer sie als Webseite erkennen. Wenn Sie also Ihre Datei "my_webpage" benennen möchten, fügen Sie am Ende.html hinzu, z. B. "meine_webseite.html"

Schritt 4: Hinzufügen eines Titels zu Ihrer Webseite

Wir haben also die grundlegende HTML-Struktur, die Webbrowser benötigen, um unsere Webseite zu interpretieren und anzuzeigen, aber wir haben keinen Inhalt. Lass uns das ändern!

Das erste, was wir tun sollten, ist, unserer Webseite einen Titel zu geben. Fast alle Webseiten haben einen Titel. Dies wird auf der Registerkarte in Ihrem Webbrowser angezeigt (siehe Screenshot). Ich werde meiner Webseite den Titel "Taylor's Website" geben. Dazu müssen wir ein 'title'-Element hinzufügen.

Taylors Website

An dieser Stelle werden Sie feststellen, dass jedes Tag ein "Öffnen"-Tag und ein "Schließen"-Tag hat. Wie zum Beispiel

und.

Dies dient dazu, zu erkennen, wo der Titel beginnt und wo er endet. Fast alle HTML-Tags folgen diesem, es gibt jedoch einige Ausnahmen.

Schritt 5: Hinzufügen von Inhalten zu Ihrer Webseite

Nun, wir haben einen Titel für unsere Webseite, aber wir haben noch keinen tatsächlichen Inhalt dafür. Lassen Sie uns etwas Flair hinzufügen!

Wir haben unserer Webseite einen Titel mit einem 'title'-Element hinzugefügt. Geben wir unserer Webseite einen großen, aufmerksamkeitsstarken Header, indem wir ein 'h1'-Element verwenden, das ein Überschriftenelement ist.

Taylors Website

Willkommen auf meiner Webseite

Schritt 6: Anzeigen unserer bisherigen Änderungen

Wir haben einen Titel, wir haben einige Inhalte, schauen wir uns unsere Webseite an, um zu erfahren, wie es bisher geht.

1. Speichern Sie Ihre Datei im Notizblock
2. Gehen Sie zu dem Ort, an dem Sie Ihre Datei gespeichert haben, und doppelklicken Sie darauf. Es sollte sich automatisch in Ihrem Standard-Webbrowser öffnen. Gut aussehen!

Schritt 7: Hinzufügen eines Absatz-Tags

Wir haben einen Titel, eine Überschrift, jetzt fügen wir einen Absatz mit etwas mehr Text hinzu. Der Elementname für einen Absatz ist 'p'. Sie können die Verwendung unten sehen:

Taylors Website

Willkommen auf meiner Webseite

Heute lernen wir, wie man diese sehr einfache Webseite erstellt!

Hinweis: Sie können Ihre Änderungen jederzeit anzeigen, indem Sie den Notizblock speichern und die Datei öffnen.

Schritt 8: Geben Sie ihm etwas Farbe

Wir haben unsere Webseite direkt am Laufen, aber es ist ziemlich einfach. Geben wir unserem Absatz-Tag etwas Farbe!

Wir können verschiedene Elemente einfärben, indem wir dem 'p'-Tag ein 'style'-Attribut hinzufügen, wie unten beschrieben:

Taylors Website

Willkommen auf meiner Webseite

Heute lernen wir, wie man diese sehr einfache Webseite erstellt!

Schritt 9: Hinzufügen eines Bildes

Was ist eine Website ohne Bilder? Lassen Sie uns ein Bild zu unserer Website hinzufügen!

Der erste Schritt besteht darin, ein Bild zu finden, das Ihnen gefällt. Ich habe Google Bilder verwendet, um nach einem Golden Retriever zu suchen. Ziehen Sie das Bild nach oben und stellen Sie sicher, dass die URL auf.jpg,.png,.gif,-j.webp

Nachdem Sie Ihr Bild ausgewählt haben, müssen wir es der HTML-Seite mit einem 'img'-Tag hinzufügen. Mein Bild ist:

Fügen Sie es mit einem 'img'-Tag mit einem 'src'-Attribut zu Ihrer Seite hinzu:

Taylors Website

Willkommen auf meiner Webseite

Heute lernen wir, wie man diese sehr einfache Webseite erstellt!

Schritt 10: Anzeigen des Endprodukts

Speichern Sie die Notizblockdatei und öffnen Sie das Endprodukt. Sie sollten Ihre Webseite sehen!