HTML-Kurs
Prinzip- Seitengestaltung - Links - Kurse/ Software - HTML mit Video

Technologie

  1. Erstellung des Datenbereiches auf dem PC in Form eines Ordners (z.B. htmlkurs)
  2. Download des Erstellungsprogrammes für Webseiten Kompozer - siehe Kurse/Software
  3. Auspacken in ein Verzeichnis, ADD ons (Sprachpaket und Wörterbuch), Einstellungen vornehmen
    • Extras -->Einstellungen --> Allgemein
      CSS-Stile statt HTML-Elemente und -Attribute verwenden -->Haken raus !
    • Extras -->Einstellungen-->Seiteneinstellungen
      Das Aussehen (farblich) der Seiten festlegen, Autor angeben.
  4. Datenraum unter Seitenverwaltung "Seiten bearbeiten" mit dem Kompozer verbinden
    Seiten bearbeiten --> Neue Seite -->
    - Seiten-Name eintragen
    - unter Login-Informationen --> Durchsuchen --> Pfad zu unter 1. angegebenen
      Datenbereich eintragen
    Nun steht unter Seitenverwaltung die Ansicht auf die Dateien im Datenbereich zur Verfügung.
  5. Datei schließen

Erste Versuche mit Textgestaltung

  1. Datei --> Neu öffnet im Arbeitsbereich des Kompozer eine leere Seite in den Farben des vorgegebenen Layouts (unter 3. )
  2. Erstellung einer ersten Seite = Homepage mit
    • Überschrift (unter Normaler Text)
    • Fließtext
    • Autor und Datum am Ende - als Adresse (unter Normaler Text), 
      Text kleiner als normal
    • Text fett, kursiv usw. gestalten --> siehe auch Format !
    • Listen - insbesondere Eigenschaften (via rechte Maustaste) ändern
    • Absatz linksbündig, zentriert, rechtsbündig ausrichten
    • Horizontale Linie zwischen Text und Impressum (Einfügen --> horizontale Linie)

Verweise

  1. Verweis - Link - Hyperlink
    • Verweis im Impressum auf Mailadresse des Autors  
      Link --> Mailadresse und Markierung "Dies ist eine Mailadresse"
    • Verweis auf Datei im Internet
      http://www.uni-leipzig.de/urz/index.htm
      http:// nicht vergessen !l
    • Verweis auf eine Datei innerhalb der gleichen Seite (Site)
      Link --> Durchsuchen
      wichtig: spätere Kontrolle ob URL relativ zur Seitenadresse ist
    • Verweis auf Zielmarke innerhalb der HTML-Seite
      Marke über Ziel definieren oder unter Link vorhandene (z.B. #top ) nutzen
  2. Bilder
    • Verbindung zu Bildern kann man durch einfache Verweise herstellen
    • Einbindung von Bildern auf der HTML-Seite
      Grafik --> Angabe des URL zum Bild, kann lokal (Durchsuchen, relative Adresse) oder entfernt (Angabe eines vollständigen Verweis http://www... ) vorhanden sein
    • Grafikeigenschaften einstellen: Alternativtext, Rand ums Bild, Freiraum als Abstand zum Text, Bildgröße verändern (ist keine Bildbearbeitung !)

Bildbereitstellung

  • aus dem Internet durch Speichern des Bildes !Achtung copyright beachten !
  • scannen eines Bildes
    mit 75 dpi für Bildschirm; nur in erforderlicher Größe (z.B. 10x15 cm) damit hat die Bilddatei eine Größe von ca. 100 KByte
  • digitales Bild von Kamera --> umformen in erforderliches Format (gif oder jpg) und Reduzierung der Bildgröße mit Hilfe von irfanview  

Tabelle als Gestaltungselement

Tabellen werden auf HTML-Seiten vorwiegend als Gestaltungselement und zur Anordnung von Text und Bild auf dem Bildschirm verwendet.
  • Eine Seite eine Tabelle
  • kann man auch wie Vorlage benutzen
  • Änderungen müssen aber dann immer in allen Seiten nachgezogen werden

CSS- Cascading Style Sheet

Man legt den Stil für HTML-Elemente fest (z.B. body, Überschriften, ...)

internes Styleelement
Extras --> CSS-Editor --> Style Element  --> StyleSheet erstellen
Regel --> Style allen Elementen eines bestimmten Typs zuweisen (z.B. body) --> Regel erstellen
Danach dem Typ Eigenschaften zuweisen (z.B. Schriftart, Farbe).

externes Stylesheet
man kann im CSS-Editor ein internes Stylesheet umstellen:
Stylesheet exportieren und auf externes Stylesheet umstellen
(und diese als css-Datei ablegen; sie wird mit der HTML-Seite verlinkt)

Stylesheet-Datei nutzen
Mit dem CSS-Editor kann man über Linkelement die HTML-Seite mit einer vorhandene css-Datei verlinken.


Vorlagen unter Kompozer

Im Kompozer kann man Vorlagen erstellen
Dazu werden mct-Dateien erzeugt (Neu --> erweitert --> leere Vorlage )
in diese werden editierbare Bereiche eingefügt  (Einfügen --> Vorlagen --> editierbare Bereiche)
Von einer Vorlage aus  (Neu --> erweitert --> eine neue Seite basierend auf einer Vorlage ) kann man eine neue Seite erstellen, die man nur noch in den editierbaren Bereichen verändern kann.

Publizieren der HTML-Seiten - FTP

Generell wird ftp zur Übertragung der HTML-Seiten zum Webserver verwendet.
Man sollte dazu den putty-Client verwenden. Diesem teilt man folgende Daten mit:
Webserver (www.uni-leipzig.de)
Benutzername (kurs7)
Kennwort (xxxxxxxxx)
Verzeichnis auf dem Webserver (webdir)


Arbeit mit Kompozer auf dem Server

Unter "Seiten bearbeiten" stellt man die Daten der Webseiten auf dem Server und die für FTP ein.
Seitenname
HTTP-Adresse (http://www.uni-leipzig.de/~kurs7/)
Login-Informationen (ftp://www.uni-leipzig.de/webdir, Benutzername, Passwort)

Damit stehen in der Seitenverwaltung direkt die Dateien auf dem Server zur Verfügung.
Mit Publizieren wird die bearbeitete Datei zum Server übertragen.


Formulare

Über Einfügen -->Formular kann man auf einer Seite ein Formular mit seine Objekten unterbringen.
Ein Aktions-URL gibt an was nach dem Absenden der Formulardaten passieren soll (Beispiele: mailto:xxx@gmx.de, oder cgi-bin/bnbform.cgi - das Auswertungsprogramm)

Eingabeobjekte sind z.B. Textbereiche, Auswahlbereiche und zum Absenden Schaltflächen

Danach wird der Aktions-URL ausgeführt.
Als Auswertungsprogramm steht am URZ das Programm bnbform.cgi bereit zur allgemeinen Nutzung zur Verfügung.

Formular (bnbform.cgi) - Beispielformular
Kurzbeschreibung zu bnbform.cgi

Frames

Frames sind Wechselrahmen in die der Bildschirm aufgeteilt wird und die jeweils mit einer HTML-Seite gefüllt werden.
Kompozer kann dazu nicht genutzt werden.
Mit einem anderen Editor - Meybohms 5 - Editor -  kann man dies gut bearbeiten.
Diesen findet man z.B. zum Download.

next
Dr. Klaus Kunze ,