HTML gibt die Struktur der Website vor und CSS ist für das designen da, oder?
CSS lernen
So oder so ähnlich lautet der erste Satz in diversen Büchern und Internetseiten. Deswegen sieht meine Website auch noch so simpel aus, weil sie bis jetzt nur aus einem Gerüst aus Überschrift, Paragraphen und Links besteht.
Neben HTML ist CSS der zweite Schritt, um eine Website zu bauen. Jetzt da die Struktur in HTML steht, kommt jetzt das Design hinzu. Dabei lässt sich jedes HTML-Objekt einzeln designen.
Als erstes würde ich gerne auf jeder Website auf der linken Seite eine Art Inhaltsverzeichnis basteln, sodass man von jeder Website auf alle anderen zugreifen kann.
CSS Dateien erstellen und nutzen
Genau so wie HTML-Dateien lassen sich CSS-Dateien einfach erstellen. Wichtig ist aber, dass die Datei nicht mit .html, sondern mit .css endet. Da es für kleinere Websites doch übersichtlicher sein kann, empfehlt es sich erstmal alles in einer main.css Datei zu speichern.
Um jetzt die CSS-Datei auf unsere HTML-Datei anwenden
zu können, muss in der <head>-Tag ein
<link rel="stylesheet" href="main.css">
stehen. Hierbei muss die main.css Datei im
selben Ordner wie die HTML-Datei sein.
Falls mal die css-Datei doch wo anders hinmuss,
muss der Pfad zur Datei angepasst werden. Zum
Beispiel href="CSS/main.css".
Das Inhaltsverzeichnis
Info: Wer sich bereits etwas mit HTML und CSS auskennt, kann den Code einfach mit f12 selbst begutachten.
Zur Zeit der Erstellung des Inhaltsverzeichnisses gibt es
nur drei Seiten: Homepage, HTML lernen und CSS lernen.
Die Homepage sollte eine Kategorie werden und die
eigentliche Website eine "Über mich".
HTML und CSS lernen sollen unter der Kategorie Tutorials
gelistet sein.
Eine provisorische Lösung ist es, die Website als eine Tabelle zu formatieren. Das Inhaltsverzeichnis soll eine Spalte und der ganze Text mit den Überschriften eine zweite. Dafür besteht der komplette body-Abschnitt bis auf den Header aus einem div class="container". Das Inhaltsverzeichnis wird einfach als eine Liste gebaut. Nach der Liste kommt dann ein <section>-Abschnitt, wo ich dann den Seiteninhalt niederschreibe.