Projektarbeit: Eigene Webseite


Tutorial


Damit man dieses Tutorial besser versteht, sollte man zuerst die Unterseiten

"HTML, CSS, JavaScript"  sowie  "Grundbefehle von HTML und CSS"

angeschaut haben, um zu verstehen wofür die Programme HTML und CSS gebraucht werden.

Um die erste eigene Webseite zu erstellen kann man entweder einen Webseite Baukasten nutzen, wie z.B. Jimdo oder man erstellt sie von Grund auf alleine mit den Programmen HTML und CSS. Wenn man sich jetzt für die zweite Variante entscheidet, so erstellt man zu Beginn ein HTML-Dokument so wie auch ein CSS-Dokument und verknüpft die beiden Dateien. Keine Sorge im Verlauf dieses Tutorial probiere ich dir alles so einfach wie möglich zu erklären. Wir starten mit einem Ordner, in dem wir beide Dateien später speichern werden. Diesem Ordner sollte man einen Namen geben, damit man ihn wieder findet z.B. "Webseite". Nun machen wir weiter mit dem Erstellen eines HTML-Dokument. Um dies zu erstellen öffnen wir ein Textdokument Rechtsklick -> neu -> Textdokument und benennen es um, z.B. in "Index.txt". Da wir aber ein HTML-Dokument haben möchten brauchen wir nicht die Endung ".txt" (.txt=Textdokument), sondern ".html". Wir benennen also unsere Textdatei Index nochmals um in "Index.html".
Fehler


Jetzt haben wir bereits unsere HTML Datei erstellt und können mit der CSS Datei fortfahren. Zuerst erstellen wir wieder ein Textdokument und nennen es "style.txt". Wir brauchen aber immer noch kein Textdokument und ändern die Endung wieder und geben ein "style.css".
Fehler


Nun besitzen wir beide Dateien und sind bereit um mit dem codieren zu beginnen. Zuerst kümmern wir uns einmal um das Grundgerüst des HTML-Dokumentes. Dafür öffnen wir die Datei Index.html mit Rechtsklick -> öffnen mit -> Editor. Nun kopiere den orangen Text in dein Dokument ein (Grün beschreibt die Aufgaben von jedem Befehl).


<!DOCTYPE html>
<html>
<head>
<title>Beispiel</title>
</head>
<body>
<h1> Schreibe hier den Text, welchen du auf der Webseite anzeigen lassen willst.
</body>
</html>
Definiert eine HTML-Dokument
Definiert den Start des HTML-Dokumentes
Definiert den Start des Head-Bereiches (Im Head-Bereich finden sich Informationen zum Dokument)
Hier findet sich der Titel, welcher oben links im Browser zu sehen ist
Definiert den Schluss des Head-Bereiches
Definiert den Start des Body-Bereiches (Im Body-Bereich findet sich der Inhalt der Webseite)
Mit <h1> definiert man ein Element. Mit Elementen kann man den Inhalt trennen und unterschiedlich strukturieren.
Definiert das Ende des Body-Bereiches
Definiert das Ende des HTML-Dokumentes


Nun kannst du die Datei speichern (CTRL+s), nachher schliessen und mit einem Doppelklick erneut öffnen. Jetzt wird oben links in der Leiste "Beispiel" stehen und weiter unten steht "Schreibe hier den Text, welchen du auf der Webseite anzeigen lassen willst". Ebenfalls sieht man den Dateipfad (Ort, an dem eine Datei gespeichert wurde) der HTML-Datei.

Fehler

Jetzt wollen wir den Text mit CSS schöner gestalten. Dafür öffnen wir nochmals die Datei Index.html und verknüpfen die HTML Datei mit der CSS Datei. Dafür ergänzen wir den Befehl <link href="style.css" rel="stylesheet"> im Head-Bereich. Das heisst, wir fügen den Befehl zwischen <head> und </head> ein. Wichtig: Nach jeder Änderung muss die Datei gespeichert werden, damit diese auf der Webseite angezeigt werden (Tipp: CTRL+S).

<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet">
<title>Beispiel</title>
</head>
<body>
<h1> Schreibe hier den Text, welchen du auf der Webseite anzeigen lassen willst. </h1>
</body>
</html>

Nun haben wir die beiden Dokumente verknüpft, was bedeutet, dass wir mit CSS den Inhalt der Datei "Index.html" gestalten können. Zuerst öffnen wir einmal "style.css" und sprechen das einzige Element an was es momentan im HTML Dokument gibt. Dieses Element ist h1. Man kann h1-h6 nutzen und somit 6 unterschiedliche Elemente erstellen, welche man alle einzeln in CSS unterschiedlich gestalten kann (Man kann auch universal viele Elemente mit Klassen erstellen, ist aber für den Moment noch zu kompliziert). Um jetzt dieses Element h1 anzusprechen schreiben wir in das CSS Dokument

h1 {
Hier kommen nun die Befehle rein.
}


Wichtig:
{ = ALTGR + ä
} = ALTGR + $


Jetzt wollen wir einmal die Farbe des Textes ändern. Dafür schreiben wir zwischen die beiden Klammern color: blue; Das sieht dann so aus

h1 {
color: blue;
}

Nun wird der Inhalt blau angezeigt, wenn du die Seite neu geladen hast (CTRL+r)

Von nun an weisst du, wie man die unterschiedlichen Befehle nutzt und kannst auch selbst herumexperimentieren. Dafür empfehle ich dir die Seite Grundbefehle von HTML und CSS zu beachten und einige dieser Befehle einmal auszuprobieren.

Wenn du trotzdem noch nicht alles Verstanden hast, dann empfehle ich dir die Seite "html-seminar". Auf dieser Webseite kannst du durch kostenlose Kurse weitere Erfahrungen sammeln und dein Wissen über Webseiten erweitern.