Tutorial zum erstellen einer Webseite

Größe: px

Ab Seite anzeigen:

Download "Tutorial zum erstellen einer Webseite"

Arwed Frei
vor 7 Jahren
Abrufe

1 Tutorial zum erstellen einer Webseite 2. Teil das Aussehen mit CSS bestimmen Vorbereitungen: Die HTML Grundlage anpassen, Änderungen sind fett geschrieben. Ab sofort werden wir mit zwei Dateien arbeiten, mehr dazu auf der zweiten Seite. <html> <head> <title>meine erste Webseite</title> <link rel="stylesheet" a href="stylesheet.css" media="screen"> </head> <body> <div id="container"> <h1>hallo Welt</h1> <ul> <li><a href="index.htm">startseite</a></li> <li><a href="index.htm">informationen</a></li> <li><a href="index.htm">kontakt</a></li> <li><a href="index.htm">impressum</a></li> </ul> <p>hier haben wir den ersten Beispieltext</p> <p>und ein Bild, dies ist ein Beispielbild, jeder kann sich sein eigenes suchen:-)</p> <p><img src="flensburg.jpg" width="30%"></p> </body> </html> Durch diese Änderungen wird sich das Aussehen der Webseite noch nicht verändert haben. Damit nun das Aussehen gestaltet werden kann, brauchen wir eine zweite Datei, eine CSS Datei. Was ist CSS? CSS wurde entworfen, um Darstellungsvorgaben weitgehend von den Inhalten zu trennen. Wenn diese Trennung konsequent vollzogen wird, werden nur noch die inhaltliche Gliederung eines Dokumentes und die Bedeutung seiner Teile in HTML oder XML beschrieben, während mit CSS gesondert davon, vorzugsweise in separaten CSS-Dateien, die Darstellung der Inhalte festgelegt wird (z. B. Layout, Farben und Typografie) Sascha von der Heide - Dipl. Multimedia Producer Seite 1 von 11

2 Die CSS Datei anlegen Eine neue Datei im Editor anlegen und als stylesheet.css speichern. In diese Datei folgende Einträge erstellen: /* Container gestalten*/ #container width: 90%; height: auto; margin: auto; border: 1px solid #000000; background-color: #b5b7b5; So sollte die Seite nun aussehen. Sascha von der Heide - Dipl. Multimedia Producer Seite 2 von 11

3 Den Kopfbereich der Webseite erstellen: Index.htm <html> <head> <title>meine erste Webseite</title> <link rel="stylesheet" a href="stylesheet.css" media="screen"> </head> <body> <div id="container"> <div id="header"> <h1>hallo Welt</h1> <ul> <li><a href="index.htm">startseite</a></li> <li><a href="index.htm">informationen</a></li> <li><a href="index.htm">kontakt</a></li> <li><a href="index.htm">impressum</a></li> </ul> <p>hier haben wir den ersten Beispieltext</p> <p>und ein Bild, dies ist ein Beispielbild, jeder kann sich sein eigenes suchen:-)</p> <p><img src="flensburg.jpg" width="30%"></p> </body> </html> stylesheet.css /* Kopfzeile gestalten */ #header margin-top: 0px; width: 100%; height: 70px; border-bottom: 1px solid #000000; background-color: #ff0000; Sascha von der Heide - Dipl. Multimedia Producer Seite 3 von 11

4 /* Überschriften gestalten */ h1 font-size: 16px; font-weight: bold; margin-top: 0px; Anschliessend sollte die Seite so aussehen Sascha von der Heide - Dipl. Multimedia Producer Seite 4 von 11

5 Den Text- und Navigationsbereich gestalten Index.htm <html> <head> <title>meine erste Webseite</title> <link rel="stylesheet" a href="stylesheet.css" media="screen"> </head> <body> <div id="container"> <div id="header"> <h1>hallo Welt</h1> <div id="mainnavi"> <ul> <li><a href="index.htm">startseite</a></li> <li><a href="index.htm">informationen</a></li> <li><a href="index.htm">kontakt</a></li> <li><a href="index.htm">impressum</a></li> </ul> <div id="content"> <p>hier haben wir den ersten Beispieltext</p> <p>und ein Bild, dies ist ein Beispielbild, jeder kann sich sein eigenes suchen:-)</p> <p><img src="flensburg.jpg" width="30%"></p> </body> </html> Sascha von der Heide - Dipl. Multimedia Producer Seite 5 von 11

6 stylesheet.css /* Bereich für den Text gestalten */ #content width: 75%; float: right; background-color: #000aff; /* Navigation gestalten */ #mainnavi width: 20%; min-width: 15%; float: left; background-color: #30f7c1; Anschliessend sollte die Seite so aussehen Sascha von der Heide - Dipl. Multimedia Producer Seite 6 von 11

7 Navigation gestalten stylesheet.css /* Navigationspunkte gestalten */ #mainnavi a text-decoration: none; font-size: 16px; font-weight: bold; #mainnavi li list-style-type: none; margin-left: -10px; margin-top: 5px; margin-bottom: 5px; Anschliessend sollte die Seite so aussehen Sascha von der Heide - Dipl. Multimedia Producer Seite 7 von 11

8 Da der Content- und Navigationsbereich im CSS die Eigenschaft float bekommen hat, müssen wir diese Eigenschaft wieder auflösen. Am einfachsten machen wir das mit einer Fusszeile, die fügen wir wie folgt ein. index.htm <html> <head> <title>meine erste Webseite</title> <link rel="stylesheet" a href="stylesheet.css" media="screen"> </head> <body> <div id="container"> <div id="header"> <h1>hallo Welt</h1> <div id="mainnavi"> <ul> <li><a href="index.htm">startseite</a></li> <li><a href="index.htm">informationen</a></li> <li><a href="index.htm">kontakt</a></li> <li><a href="index.htm">impressum</a></li> </ul> <div id="content"> <p>hier haben wir den ersten Beispieltext</p> <p>und ein Bild, dies ist ein Beispielbild, jeder kann sich sein eigenes suchen:-)</p> <p><img src="flensburg.jpg" width="30%"></p> <div id="footer"> <p>diese Seite wurde von... erstellt.</p> </body> </html> Sascha von der Heide - Dipl. Multimedia Producer Seite 8 von 11

9 stylesheet.css /* Fusszeile gestalten */ #footer clear: both; Anschliessend sollte die Seite so aussehen Sascha von der Heide - Dipl. Multimedia Producer Seite 9 von 11

10 Kleinere Änderungen am Aussehen Text im Content- und Footerbereich soll einen Abstand zum Rand links und rechts erhalten /* Bereich für den Text gestalten */ #content width: 75%; height: auto; float: right; background-color: #000aff; padding-left: 10px; padding-right: 10px; /* Fusszeile gestalten */ #footer clear: both; padding-left: 10px; padding-right: 10px; Überschrift H1 zentrieren /* Überschriften gestalten */ h1 font-size: 16px; font-weight: bold; margin-top: 0px; text-align: center; Sascha von der Heide - Dipl. Multimedia Producer Seite 10 von 11

11 Anhang: Farbwerte bestimmen Farbtabelle im Internet Umlaute in HTML schreiben groß klein Ä -> Ä Ü -> Ü Ö -> Ö ä -> ä ü -> ü ö -> ö Sascha von der Heide - Dipl. Multimedia Producer Seite 11 von 11

Ähnliche Dokumente

Aufbau einer HTML Seite:

1 Aufbau einer HTML Seite: Grundstruktur: Head Bereich: "nicht sichtbar" Er enthält grundlegende Informationen wie: Title, Charset, Ansichtsgröße,