www.typo3.mathebauer.de

Internetseite
für das P-Seminar "Internetseiten" am DBG

Liebe P-Seminar-Teilnehmerinnen und -Teilnehmer!

Diese (provisorische) Internet-Seite dient der Kommunikation innerhalb unseres P-Seminars.
Ihr findet hier Termine und eine einfache HTML-Einleitung.

Termine

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

HTML-Anleitung

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.

  1. Vorbereitung 1: Ordner anlegen und Ordner-Ansicht einstellen, Editor
  2. Vorbereitung 2: Neue HTML-Datei, Standard-Editor
  3. Grundgerüst einer HTML-Seite und erste Inhalte
  4. Einfache Text- und Absatzformatierungen
  5. Hintergrundfarbe, Schriftfarbe, -größe und -art
  6. Verweise (Links)
  7. Grafiken (Bilder)

Viel Spaß!

Cascading-Style-Sheets (CSS)

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:

CSS-basierte Layouts

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:

AUFGABE:

Erstelle eine mehrspaltige Internetseite mit einem Kopf- und einem Fuß-Bereich zu einem beliebigen Thema! Verwende zur Gestaltung des Layouts CSS!

FTP-Programm "FileZilla", Upload (Steckbriefe, CSS-Studien)

Unsere Steckbriefe und unsere CSS-Studien sollen Passwort-geschützt im Internet einsehbar sein:

www.psem.typo3.mathebauer.de

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:

AUFGABEN:

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.



 © 2012 Christian Bauer - cn.bauer@gmx.de