www.typo3.mathebauer.deInternetseite
|
![]() |
![]() |
Di., 02.10.2012 | P-Seminar |
Di., 09.10.2012 | P-Seminar |
Di., 16.10.2012 | kein P-Seminar (Mathe-Fachbetreuer-Tagung) |
Mo., 22.10.2012 | Besuch im BIZ (13.00 Uhr bis 16.00 Uhr, Befreiung ab 11.20 Uhr) |
Di., 23.10.2012 | P-Seminar (trotz BIZ-Besuchs in dieser Woche) |
Di., 06.11.2012 | kein P-Seminar (Mathe-Fachsitzung am DBG) |
Di., 13.11.2012 | P-Seminar: Planungen |
Di., 20.11.2012 | P-Seminar: CSS-basierte Layouts |
Di., 27.11.2012 | P-Seminar: Referate "Auslandsjahr", "Studium im Ausland" und "Duales Studium" |
Di., 04.12.2012 | P-Seminar: Webspace, FTP-Programm "FileZilla", Upload (Steckbriefe, CSS-Studien) |
Di., 11.12.2012 | kein P-Seminar ("Abfeiern" des BIZ-Besuches) |
Di., 18.12.2012 | P-Seminar: Planungen; Vervollständigen der Steckbriefe und CSS-Studien |
Diese einfache HTML-Anleitung dient dazu, grundlegende HTML-Kenntnisse zu wiederholen oder neu zu erlernen. Einiges in der Anleitung ist veraltet, also nicht mehr gebrächlich (z. B. das <font>-Tag). Dennoch erscheint es sinnvoll, entsprechend der Anleitung vorzugehen, um die HTML-Grundlagen zu verstehen. Später werden wir die meisten Formatierungen über sogenannte Cascading-Style-Sheets (CSS) vornehmen.
Viel Spaß!
Grundlage modernen Web-Designs ist die strikte Trennung von Inhalt und Form. Der Inhalt ist vorgegeben durch das HTML-Dokument mit den verschiedenen HTML-Elementen wie Absätzen <p>...</p> und Überschriften <h1>...</h1> und anderen HTML-Elementen. Die Form, also die Festlegung, wie die einzelnen Elemente dargestellt werden, erfolgt durch sog. Stil-Angaben für die einzelnen HTML-Elemente. Die Stil-Angaben können direkt bei den HTML-Elementen angegeben werden (schlecht) oder in einem eigenen Bereich im <head>-Bereich des HTML-Dokuments (besser) oder in einer eigenen Datei, dem Style-Sheet, das in das HTML-Dokument eingebunden wird (am besten).
Hier gibt es Informationen zur Gestaltung mit CSS und zur Einbindung externer Style-Sheets:
Früher wurde das (mehrspaltige) Layout von HTML-Seiten mit Hilfe von Tabellen erreicht. Weil die Verwendung von Tabellen in diesem Fall keine semantische Bedeutung hat (wie bei "echten" Tabellen mit Daten-Reihen), ist das Layout mit Hilfe von Tabellen mittlerweile verpönt.
Bei einer modernen Internetseite wird das (mehrspaltige) Layout mit Hilfe von CSS umgesetzt. Das wichtigste Tag hierbei ist das <div>-Tag. Eine gut verständliche Einführung in die Gestaltung von Internetseiten mit Hilfe von CSS findet sich auf www.selfhtml.de:
Erstelle eine mehrspaltige Internetseite mit einem Kopf- und einem Fuß-Bereich zu einem beliebigen Thema! Verwende zur Gestaltung des Layouts CSS!
Unsere Steckbriefe und unsere CSS-Studien sollen Passwort-geschützt im Internet einsehbar sein:
Zum Hochladen auf den Web-Server empfiehlt sich die Verwendung eines FTP-Programms, z. B. des Open-Source-Programms "FileZilla", von dem es auch eine portable Version (z. B. für USB-Sticks) gibt:
Zur einfacheren Verlinkung unserer Steckbriefe und unserer CSS-Studien ist gegebenenfalls eine Umbenennung der HTML-Dateien Deines Steckbriefes und Deiner CSS-Studie notwendig:
Benenne Deinen Steckbrief um in "DeinName.html" (Beispiel: Christian.html) und lade die umbenannte HTML-Datei in Deinen Ordner (Beispiel: 00_Christian) auf den Server hoch.
Lege in Deinem Ordner einen Unter-Ordner mit dem Namen "css_uebung" an. Bennene die HTML-Datei Deiner CSS-Studie um in "index.html". Lade Deine CSS-Studie (alle notwendigen Dateien) in Deinen Unterordner "css_uebung" hoch.
Vermeide bitte eine Datei "index.html" in Deinem (Stamm-)Ordner. Dieser Datei-Name wird eventuell demnächst von der TYPO3-Installation in Deinem Ordner benötigt.