Einrichten von CSS und HTML für Ihre Website: Ein Tutorial

Preslav Dobrev2022-10-28 · 5 min read

Einrichten von CSS und HTML für Ihre Website: Ein Tutorial

Das Erstellen von Websites ist der erste Schritt beim Einstieg in die Webentwicklung. Eines der ersten Dinge, die Webentwicklungs-Enthusiasten lernen müssen, ist das Einrichten von CSS und HTML für eine Website. Durch das Einrichten der grundlegenden Einführungsseite kann sich ein Anfänger mit den Grundlagen des Website-Designs vertraut machen, seine Webentwicklungsfähigkeiten verfeinern und lernen, mit Entwicklern zusammenzuarbeiten.

Dieses Tutorial wird Sie durch die Grundlagen der Einrichtung von HTML- und CSS-Dateien für Ihre Website führen. Fangen wir an!

Voraussetzungen

Ein grundlegendes Verständnis von HTML und CSS.

Schritt 1 – Ersteinrichtung

Zuerst erstellen wir ein neues Projektverzeichnis und nennen es ein demo-project :

mkdir demo-project

1	mkdir demo-project

Wechseln Sie als Nächstes in das aktuelle Verzeichnis mit dem cd Befehl:

cd demo-project

1	cd demo-project

Fügen wir im Projektordner die folgenden Dateien hinzu, die wir zum Starten unserer einfachen Website benötigen:

index.html : Diese Datei wird den gesamten HTML-Code enthalten.
styles.css : Hier werden wir alle CSS-Dateien für das Styling unserer Website ablegen.
images : Alle notwendigen Bilder müssen in diesem Ordner abgelegt werden.

Nachdem wir nun unser Projektverzeichnis erstellt und die erforderlichen Dateien hinzugefügt haben, fahren wir fort und fügen den HTML-Inhalt in unsere index.html im nächsten Schritt ein.

Schritt 2 – Hinzufügen von HTML-Inhalten in die index.html -Datei

In der index.html -Datei, die wir im vorherigen Schritt erstellt haben, fügen wir die einführenden HTML-Codes hinzu. Diese grundlegenden HTML-Zeilen dienen als Anweisungen für den Browser, werden jedoch nicht auf der Webseite angezeigt.

Fügen Sie den folgenden Codeblock in Ihre index.html -Datei ein:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>Welcome to CloudSigma!</title>
<link rel="stylesheet" href="css/styles.css">
</head>

<body>
</body>

</html>

<!DOCTYPE html>

<head>

<title>Welcome to CloudSigma!</title>

</head>

<body>

</body>

</html>

Note: Stellen Sie sicher, dass die index.html -Datei leer ist, bevor Sie diese Codeblöcke hinzufügen. Denken Sie auch daran, den Titel wie im <title> -Bereich hervorgehoben zu ändern.

Lassen Sie uns die verwendeten Begriffe verstehen:

<!DOCTYPE html> : Es handelt sich um eine Deklaration, die den Browser über den im HTML-Dokument verwendeten HTML-Typ informiert.
- Da mehrere Versionen von HTML-Standards verfügbar sind, erleichtert die Angabe des DOCTYPE es Browsern, die HTML-Version mühelos zu identifizieren. In dieser Anleitung verwenden wir beispielsweise die neueste Version von HTML5.
<html> : Dieses Tag informiert den Browser darüber, dass die darin enthaltenen Inhalte als HTML behandelt werden müssen. Wenn Sie eine <html> -Datei öffnen, stellen Sie sicher, dass Sie sie mit dem </html> -Tag schließen. Dieses Tag unterstützt lang -Attribute, und Sie können die Sprache der Webseite angeben. Wir haben die Sprache in unserem Tutorial mithilfe des en -Sprach-Tags auf Englisch eingestellt.
- Besuchen Sie das IANA Language Subtag Registry, um sich die anderen zur Verfügung stehenden Sprachen anzusehen.
<head> : Dies erstellt einen Bereich im HTML-Dokument und enthält Informationen über die Webseite. Es gibt jedoch keine Inhaltsdetails, und der Browser zeigt hier im Head-Bereich keine Informationen an.
<meta charset="utf-8"> : Gibt den Zeichensatz des Dokuments an. Er muss in einem Unicode-Format, d. h. UTF-8, vorliegen, das die meisten anerkannten Schriftsprachen unterstützt.
<title> : Das <title> -Tag informiert den Browser über den Namen der Webseite. Der Titel erscheint auf dem Browser-Tab, wenn die Website in den Suchergebnissen aufgelistet wird.
<link rel="stylesheet" href="css/styles.css"> : Informiert den Browser darüber, das Stylesheet zu identifizieren, das die CSS-Styles enthält.
<body> : Dieses Tag enthält die Hauptinhalte der Webseite. Wenn Sie ein <body> -Tag verwenden, stellen Sie sicher, dass Sie es mit dem </body> -Tag schließen.

Schritt 3 – Styling mit CSS

In der styles.css -Datei, fügen Sie das Styling entsprechend Ihren Projektanforderungen hinzu. Fügen Sie in diesem Beispiel die folgenden Codezeilen in Ihre styles.css -Datei ein:

body {
background-color: red;
}

h1 {
color: yellow;
text-align: centre;
}

p {
font-family: verdana;
font-size: 25px;
}

body {

background-color: red;

}

h1 {

color: yellow;

text-align: centre;

}

p {

font-family: verdana;

font-size: 25px;

}

Wir haben nun endlich die grundlegenden HTML- und CSS-Dateien erstellt, die wir für den Start unserer Website benötigen. Darüber hinaus können Sie Bilder hinzufügen und diese im Ordner „images“ speichern. Speichern und schließen Sie die Datei. Öffnen Sie danach die index.html -Datei in Ihrem bevorzugten Webbrowser, und Sie werden eine einfache Seite auf Ihrem Bildschirm sehen.

Fazit

In dieser einführenden Anleitung haben wir die Grundlagen der Einrichtung von HTML und CSS gelernt und eine rudimentäre Website erstellt. Jetzt ist es an der Zeit, neue Seiten zu erstellen, sie anzupassen, Inhalte hinzuzufügen und alles über die Navigationsleiste zu verknüpfen. Versuchen Sie als nächsten Schritt, weitere Inhalte zur index.html -Datei hinzuzufügen und diese mit CSS zu gestalten.

Darüber hinaus gibt es weitere HTML- und CSS-Anleitungen, die Sie auf unserem Blog:

Viel Spaß beim Programmieren!

Preslav Dobrev

Autor · CloudSigma

Preslav Dobrev ist ein kreativer Designer bei CloudSigma und konzentriert sich auf eine konsistente Unternehmensidentität durch traditionelle und innovative Marketingkanäle. Er versteht es meisterhaft, künstlerische Vision mit strategischem Marketing zu verbinden, um wirkungsvolle Markengeschichten zu schaffen.