Erstellen Sie Ihre eigene Website für Anfänger: 5 Schritte

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

Egal, ob Sie jemals davon geträumt haben, Computerprogrammierer zu werden oder jemals eine Website benutzt haben, was sind wir ehrlich, fast alle von uns, die Informationstechnologie ist zum Rückgrat des Geschäfts geworden. Auch wenn das Programmieren auf den ersten Blick etwas beängstigend erscheinen mag, ist es mein Ziel, Ihnen die grundlegenden Grundlagen des Webdesigns beizubringen, damit Sie nach diesem Tutorial in der Lage sind, Ihre eigene Webseite zu erstellen. Wenn das aus dem Weg ist, kommen wir dazu!

Lieferungen

• Ein Macintosh- oder Windows-PC (obwohl auch Linux-Distributionen verwendet werden können, überspringe ich sie vorerst, da dies eine Einführung für Anfänger ist).
• Texteditor Ihrer Wahl (Notepad unter Windows, TextEdit auf Mac) oder IDE Ihrer Wahl. Meiner Erfahrung nach funktioniert Visual Studio Code am besten für mich selbst, daher empfehle ich auch, es hier auszuprobieren: https://code.visualstudio.com/ ganz zu schweigen davon, dass es auf allen Betriebssystemplattformen funktioniert.

Schritt 1: Tags und ein bisschen Geschichte

Nachdem Sie sich für einen Texteditor oder eine IDE entschieden haben, beginnen wir mit den Grundlagen.

Ob Sie es glauben oder nicht, HTML oder HyperText Markup Language gibt es seit fast 30 Jahren und mit jedem Jahr wurden mehr und mehr Verbesserungen an der Sprache vorgenommen. Jetzt fragen Sie sich vielleicht, wie ein Browser interpretiert, was auf dem Bildschirm angezeigt werden soll. Dies geschieht in wenigen Teilen:

Die Formatierung von HTML-Dokumenten ist einfach. Sie haben zwei Abschnitte, die als Kopf und Körper bekannt sind. Der Kopf einer Website enthält Code, der für den Benutzer nicht sichtbar ist. Dies wird zum Verknüpfen von Stylesheets und zum Deklarieren anderer notwendiger Bits verwendet, die für die ordnungsgemäße Anzeige der Site erforderlich sind. Nach dem Kopf ist der Körper, wie es sich anhört, der Körper der Website. Hier können Sie Ihre Stimme sprechen und dem Publikum Ihre fantastischen HTML-Fähigkeiten zeigen! Jetzt ist es nicht so einfach, einfach Text in den Textkörper einzugeben und ihn genau so anzuzeigen, wie Sie es möchten, aber in gewisser Weise ist es fast so einfach mit der Verwendung von Dingen, die wir Tags nennen.

Hier sind einige der grundlegenden HTML-Tags:

• title – wird verwendet, um dem Browser den Titel der Seite mitzuteilen. Dies sehen Sie auch, wenn Sie sich den Tab einer Webseite ansehen.
• h1, h2, h3, h4 – die für verschiedene Header-Größen verwendet werden, wobei h1 die größte und h4 die kleinste ist. Ich werde mehr darüber im nächsten Abschnitt behandeln.
• p – Absatz, wird zum Schreiben von Textabsätzen verwendet. Wie Absätze auf einem Papier.
• br – break, der einen Zeilenumbruch in den Text einfügt.
• a – Wird verwendet, um Links zu anderen Seiten zu erstellen, z. B. einen anklickbaren Link.
• img – wird verwendet, um ein Bild mit der Webseite zu verknüpfen.
• ul, ol, li – ungeordnete Listen, geordnete Listen und Listenelemente.
• – Wird verwendet, um Inline-Kommentare im Code zu erstellen, die vom Endbenutzer nicht gesehen werden.

Und hier sind einige CSS-Tags (visuell):

• Farbe – wird verwendet, um einem bestimmten Element oder einer bestimmten Einstellung auf der Webseite eine bestimmte Farbe zuzuweisen.
• font-size – wird verwendet, um die Schriftgröße auf der Seite zu ändern.
• background-color – wird verwendet, um die Hintergrundfarbe eines bestimmten Elements oder der gesamten Seite zu ändern.

Ich habe auch einen kleinen Spickzettel angehängt, um dir zu helfen, wenn du dich ein bisschen verloren fühlst, aber keine Sorge, du wirst es im Handumdrehen herausbekommen! Darüber hinaus ist www.w3schools.com auch eine fantastische Quelle für alle Ihre Programmierfragen. Sie haben mir definitiv eine Zeit oder auch gespart.

Im Wesentlichen ist es einfach, wie der Browser die Datei liest. Es geht Zeile für Zeile und verarbeitet Funktion für Funktion. Die Zeichen werden verwendet, um ein Tag wie zu deklarieren

und werden verwendet, um das Tag zu schließen, wie z

. Dies ist wichtig, sonst kann der Browser nicht aufhören. Dazwischen

und

Tags, geben Sie ein, was Sie möchten!

Schritt 2: Editor-Setup

Nachdem wir nun ein wenig über die grundlegenden Elemente einer HTML-Website gesprochen haben, lassen Sie uns eintauchen und es selbst ausprobieren. Für diesen nächsten Schritt verwende ich Visual Studio Code, um die Website zu programmieren, aber das Layout des Codes ist dasselbe, wenn Sie nur mit Notepad oder TextEdit vertraut sind.

Innerhalb des Notizblocks:

• Mit Notepad startet das Programm mit einer leeren Datei, was den Einstieg sehr einfach macht. Dadurch können wir auch ein paar Schritte im Vergleich zur Verwendung von VS Code springen. Beginnen wir mit dem Speichern der Datei im richtigen Format.
• Klicken Sie auf Datei > Speichern
• Geben Sie einen Namen für Ihre Datei gefolgt von.html ein und wählen Sie unter Dateityp alle Dateien aus. Klicken Sie auf Speichern.

Innerhalb des VS-Codes:

• Der beste Weg, um alle Funktionen der IDE zu nutzen, besteht darin, zunächst die Datei zu erstellen und der IDE mitzuteilen, um welchen Dateityp es sich handelt. Dies kann wie folgt erfolgen:
• Klicken Sie auf Datei > Neue Datei
• Eine leere Datei wird geöffnet
• Als Nächstes sollten Sie die Datei speichern, auch wenn sie leer ist, da dies der IDE ermöglicht, zu verstehen, um welchen Dateityp das Endprodukt aussehen wird. Achten Sie beim Speichern darauf, die Erweiterung.html am Ende des Dateinamens anzugeben. Klicken Sie auf Speichern.

Schritt 3: Blaupausen

Nachdem Sie Ihre Datei filename.html erfolgreich gespeichert haben, beginnen wir mit der Erstellung des Frameworks für unsere Webseite. Denken Sie von oben daran, welche wichtigen Teile der Datei wir deklarieren müssen, bevor wir mit der Erstellung des Rests der HTML-Seite beginnen können. Profi-Tipp: Beim Starten des Frameworks für die Site teilt das HTML-Tag !DOCTYPE dem Browser mit, dass es sich bei der gelesenen Datei um eine HTML-Datei handelt. Dies kann praktisch sein, wenn Sie verschiedene Codetypen in derselben Datei haben und zwischen Interpretern wechseln möchten. Für den Umfang dieses Instructable werden wir nicht zu viel darauf eingehen, aber wenn Sie nach diesem Instructable neugierig sind, mehr über die HTML-Entwicklung zu erfahren, können Sie es gerne ausprobieren. Ich füge das HTML-Tag !DOCTYPE am Anfang der Datei ein, um optimale Vorgehensweisen zu gewährleisten. Denken Sie daran, mit zu öffnen und zu schließen.

Hier ist es praktisch, die Datei zu speichern, bevor Sie mit der Programmierung beginnen. Jetzt, da die IDE weiß, dass sie mit einer HTML-Datei arbeitet, verwendet sie Intellisense, um den Ausdruck fertigzustellen und Vorschläge anzubieten, damit Sie nicht versehentlich vergessen, ein Tag zu schließen. Beachten Sie, dass Intellisense für diejenigen unter Ihnen, die Notepad verwenden, nicht wie in der IDE verfügbar ist. Wir beginnen mit der Eingabe der Kopf- und Körper-Tags wie folgt: (siehe zweites Bild).

Jetzt, da die Dokumenteneinrichtung abgeschlossen ist, können wir zu den Rennen aufbrechen und Spaß haben!

Schritt 4: Code; Code; Code;

Wir können damit beginnen, einen Titel für unsere neu erstellte Datei einzufügen. Geben Sie ein, was Sie möchten. Denken Sie daran, dass dies der Name ist, der auf der Registerkarte des Browsers angezeigt wird. Beginnen wir auch mit der Eingabe einer Überschrift für unsere Website. Erinnern Sie sich von früher, wie wir dies tun. Habe ich h1/2/3/4 gehört? Das ist richtig!

Bevor wir fortfahren, finde ich es hilfreich, unsere Datei in einem Browserfenster zu öffnen, damit wir in Echtzeit sehen können, wie sich unsere Änderungen im Browser widerspiegeln. Sie können dies tun, indem Sie auf Datei > Speichern klicken, um die Datei zu speichern, zu dem Ordner navigieren, in dem die HTML-Datei gespeichert ist, für mich ist dies der Desktop, und verwenden Sie den Browser Ihrer Wahl, um die Datei zu öffnen, da ist Ihre Webseite! Hinweis: Ich persönlich verwende Safari als Browser meiner Wahl auf meinem Computer, aber in der Webentwicklung ist Firefox der Goldstandard-Browser zum Testen, da er mit fast jeder Web-Skriptsprache funktioniert.

Wie Sie sehen können, wird der Titel auf der Registerkarte angezeigt, ebenso wie unsere h1-Überschrift. Ich bevorzuge es, dass sowohl das Browserfenster der Datei neben der IDE geöffnet wird, da die Änderungen beim Vornehmen einer Änderung in der IDE und beim Speichern sofort im Browser erfolgen.

Fühlen Sie sich frei, Tags hinzuzufügen und mit den verschiedenen Möglichkeiten zu experimentieren, die Sie mit HTML machen können. Wie Sie unten sehen können, habe ich ein paar Absätze, Pausen, einen externen Hyperlink zu Instructables.com, ein Bild (das entweder von einer externen Quelle oder im selben Verzeichnis wie die. HTML-Datei gespeichert werden kann) hinzugefügt. ein Beispiel für eine ungeordnete Liste, eine geordnete Liste und zuletzt einen Kommentar.

Wenn Sie versuchen möchten, einige Farb- und Anordnungsoptionen hinzuzufügen, können Sie im Kopf der Datei ein Stil-Tag eingeben. Dies ist der Punkt, an dem dies von HTML zu CSS wechselt, aber aus Gründen der visuellen Darstellung werde ich ein paar Zeilen eingeben, damit Sie sehen können, wie dies funktioniert. CSS funktioniert im Wesentlichen so, dass Sie HTML-Elemente innerhalb von Funktionen steuern können, indem Sie Klammern { } verwenden, um Ihren Code für ein bestimmtes HTML-Element einzugeben.

Schritt 5: Abschließende Gedanken

Und da hast du es; Sie haben Ihre erste Webseite erfolgreich erstellt! Da dies ein Anfängerleitfaden ist, möchte ich Ihre ersten Erfahrungen mit HTML zu einem angenehmen Erlebnis machen. Der beste Weg, meiner Erfahrung nach zu lernen, besteht darin, einzutauchen und Dinge praktisch auszuprobieren, zu sehen, was Sie mit Ihrem Code tun können, und auch zu sehen, wie Sie Ihren Code knacken können. Dies schafft Integrität und hilft Ihnen besser zu verstehen, wie und warum der Code so funktioniert, wie er funktioniert. Denken Sie daran, dass www. W3Schools.com eine großartige Ressource für Fragen ist und sie sogar eine virtuelle Sandbox im Browser anbieten, um Ihren Code auszuprobieren. Hoffentlich hast du etwas gelernt und viel Spaß beim Programmieren!