Erstellen Sie Ihre erste Website: 10 Schritte

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

In diesem Tutorial erfahren Sie, wie Sie eine einfache Webseite mit einem verknüpften Stylesheet und einer interaktiven Javascript-Datei erstellen.

Schritt 1: Erstellen Ihres Ordners

Erstellen Sie einen Ordner für die zu speichernden Dateien, die wir erstellen. Fühlen Sie sich frei, es zu benennen, wie Sie möchten. Denken Sie nur daran, wo es sich befindet, da wir später Dateien darin speichern werden.

Schritt 2: Erstellen Sie Ihre erste Datei

Öffnen Sie Ihren bevorzugten Texteditor. In meinem Fall verwende ich einfach den integrierten Notizblock von Windows 10. Sobald Sie eine neue Datei erstellt haben, geben Sie Folgendes ein:

Dies ist meine erste Webseite, die Ihnen von einem anweisbaren gebracht wird

Dies ist ein sogenannter HTML-Tag. Es steht für Überschrift 1. Der Text, den wir in dieses Tag einfügen, wird als Überschrift auf der Seite angezeigt. Es wird so geöffnet und geschlossen. Der Text zwischen den beiden Tags wird in Ihrem Webbrowser angezeigt. Der Abschnitt, der besagt, gibt diesem Tag ein Attribut, auf das wir in Schritt x verweisen werden. Sobald dies erledigt ist, speichern Sie die Datei in dem Ordner, den wir in Schritt 1 als index.html erstellt haben.

Schritt 3: Öffnen Sie die Datei

Nachdem wir nun zu der Datei in dem von uns erstellten Ordner navigiert haben, klicken Sie mit der rechten Maustaste auf die Datei und wählen Sie die Option "Öffnen mit" und wählen Sie den von Ihnen verwendeten Webbrowser aus. In meinem Fall ist das Google Chrome. Sehen Sie sich jetzt die Arbeit Ihrer bisherigen harten Arbeit an!

Schritt 4: Gestalten Sie Ihre Seite

So wie es ist, ist unsere Website ziemlich einfach. Wir werden ein sogenanntes Cascading Style Sheet hinzufügen, um die Dinge ein wenig aufzupeppen. Erstellen Sie eine neue Textdatei und geben Sie Folgendes ein:

h1{Farbe: blau; Textausrichtung: Mitte;}

Was wir dem Browser hier mitteilen, ist, jedes Element in einem h1-Tag (das wir in Schritt 2 kennengelernt haben) zu finden, ihm eine blaue Farbe zu geben und es in der Mitte der Seite auszurichten. Speichern Sie diese Datei in dem Ordner, den wir in Schritt 1 als style.css erstellt haben.

Schritt 5: Verknüpfen Sie die Style.css mit Ihrer Index.html

An diesem Punkt haben wir zwei separate Dateien, die nichts voneinander wissen. Wir müssen unserer index.html-Datei mitteilen, dass wir eine style.css-Datei haben, auf die sie verweisen soll, und um etwas Styling daraus zu entnehmen. Dazu öffnen wir unsere Datei index.html in unserem Texteditor und fügen über unserem h1-Tag ein sogenanntes Link-Tag hinzu. Das Link-Tag macht genau das, was sein Namensvetter sagt, es verlinkt auf etwas. In unserem Fall ein Stylesheet. Fahren Sie fort und geben Sie ein. Das Link-Tag ist ein selbstschließendes Tag, daher ist kein End-Tag erforderlich. Das rel steht für Relation und href teilt der Indexdatei mit, wo sich unsere externe Datei befindet, auf die wir verweisen. Speichern Sie nun die Datei index.html.

Schritt 6: Zeigen Sie Ihre neu gestaltete Seite an

Wiederholen Sie Schritt 3, laden Sie Ihre Webseite neu und sehen Sie sich an, wie sich die Änderungen widerspiegeln.

Schritt 7: Erstellen einer Schaltfläche

Öffnen Sie die Datei index.html erneut in Ihrem Texteditor und geben Sie Folgendes ein:

Klick mich!

und speichern Sie die Datei. Dadurch wird ein Schaltflächenelement auf der Seite erstellt. Öffnen Sie die Datei nach dem Speichern erneut, wie in Schritt 3 gezeigt, und stellen Sie sicher, dass sich die Schaltfläche unten links auf Ihrer Seite befindet.

Schritt 8: Erstellen Sie Ihre Javascript-Datei

Zuletzt erstellen wir unsere Javascript-Datei. Dadurch wird unsere Website interaktiv. Öffnen Sie einen Texteditor und geben Sie Folgendes ein:

document.querySelector("#button").addEventListener("click", function(){

document.querySelector("#heading").innerText = "Überschrift im laufenden Betrieb ändern"

})

Was wir tun, ist, das Dokument zu bitten, ein Element mit der ID der Schaltfläche zu finden, und wir werden die Schaltfläche auf ein Klickereignis reagieren lassen, indem wir einen Elementtext mit der ID der Überschrift in "Überschrift im laufenden Betrieb ändern" ändern ". Speichern Sie die Datei als button.js in dem Ordner, den wir in Schritt 1 erstellt haben.

Schritt 9: Verknüpfen Sie Ihre Javascript- und Indexdateien

Wie bei der Datei style.css müssen wir unserer Datei index.html unsere Javascript-Datei mitteilen. Unten unter allem, was wir bisher gemacht haben, geben Sie Folgendes ein:

Das script-Tag ermöglicht es uns, eine Skriptsprache (in unserem Fall Javascript) hinzuzufügen, um unserer Seite Funktionen bereitzustellen. Wir weisen es an, nach einer Datei namens button.js zu suchen und den gesamten darin enthaltenen Code unserer Indexdatei hinzuzufügen. Nachdem Sie diese eingegeben haben, speichern Sie die Datei und öffnen Sie die Datei erneut, wie in Schritt 3 gezeigt.

Schritt 10: Testen Sie die neu erstellte Schaltfläche

Klicken Sie nun auf die Schaltfläche und beobachten Sie, wie sich die Überschrift ändert!

Herzliche Glückwünsche!! Sie haben jetzt Ihre erste interaktive Webseite erstellt! Ich frage mich, wie viel weiter Sie es bringen könnten, wenn Sie wissen, was Sie jetzt wissen?