Grundlagen der Webseitenerstellung
Einfache html-Übungen
- Besuchen Sie die Seite der Uni Hamburg und bearbeiten die Aufgaben 3,4,5 und 6
- Speichern Sie die Seiten als "uebung_hh_3-6.html" ab
Sie kennen nun folgende Elemente zur Textstukturierung:
- Überschriften (h1 bis h6)
- Horizontale Linien (hr) in verschiedenen Ausführungen (size, width, color, ...)
- Unterschiedliche Ausrichtungen mit align (left, right, center)
- Verwendung von Aufzählungselementen (li): ungeordnete (ul)/ geordnete Listen (ol) mit unterschiedlichen Symbolen (disc, square, circle)
- Verschiedenste Textauszeichnungen wie em (kursiv), b (fett), u (unterstrichen), sub (tiefgestellt), sup (hochgestellt), ...
Veröffentlichung von Webseiten
- Registrieren Sie sich zum Beispiel bei bplaced.net und beantragen sie dort ein kostenloses Paket mit Webspace.
- Loggen Sie sich beim Provider (hier bplaced) mit den zugesandten Anmeldedaten an.
- Notieren Sie sich die FTP-Zugangsdaten (unter FTP-Verwaltung) für Ihren Webspace.
- Nun benötigen Sie ein sogenanntes FTP-Programm (z.B. FileZilla, um die Dateien von Ihrer Arbeitsstation auf den entfernten Webserver hochzuladen.
- Nun benötigen Sie von Ihrem Provider Informationen über den Server (bei bplaced IhrBenutzername.bplaced.net), den Benutzername (IhrBenutzername) sowie Ihr Passwort (bei bplaced das bplaced-Passwort) ein.
Erstellung einer Formatierungsvorlage mit CSS (Cascading Style Sheets)
- Eine sehr gute Einführung in css finden Sie bei HTML.net und bei W3-Schols.
- Sehen Sie sich nun HIER eine beispielhafte Seitenaufteilung an.
- Laden Sie sich die Datei "index.html" und "style.css" herunter, speichern diese in einem Ordner ab und experimentieren Sie mit der Aufteilung. Fügen Sie ein oder mehr Bereiche (z.B. Kopfbereich - #header) hinzu. Überlegen Sie sich ein Farbkonzept.
- Um CSS für Ihre html-Dateien anzuwenden, empfehle ich folgende Vorgehensweise (externe Methode): Alle Formatierungsanweisungen sind in einer Datei ("style.css") zusammengefasst.
Im head-Bereich Ihrer html-Datei verweisen Sie auf diese Datei mit dieser Befehlszeile: < link rel="stylesheet" type="text/css" href="style.css" >
- Experimentieren Sie mit Ihrer eigenen CSS-Datei. Probieren Sie verschiedene Eigenschaften für Farben (z.B. background-color), Schriften (z.B. font-family) und Abstände (z.B. padding, margin) aus.