Web-Design Wie erstelle ich eine eigene Webseite und bringe sie ins weltweite Internet Ein Kurs der Agenda 21 von Postbauer-Heng in Zusammenarbeit mit der VHS Neumarkt Hr. Streichert Hr. Gesellchen 3x 120 Minuten jeweils Freitags ab ab 19:00 Uhr

Web-Design b Themen des ersten Abends b Netzstruktur, wo sind meine Seiten b Grundzüge von HTML ÜberschriftenÜberschriften ListenListen BilderBilder TabellenTabellen b Übungen

Netzstruktur b wo befinden sich die eigenen Seiten? Die erstellten Original- seiten auf dem eigenen PC Kopien auf dem www-Server

Grundzüge von HTML b Hyper Text Markup Language b enthält Text und Strukturangaben b enthält Verweise auf Bilder b enthält Verweise auf andere Seiten (Links)

Gliederung einer HTML-Seite (unsichtbare) Angaben zum Seiteninhalt, Autor usw. (sichtbare) Texte, Überschriften, Tabellen, Bilder usw.

Werkzeuge für Web-Seiten b Einfacher Texteditor b Windowsprogramme Netscape ComposerNetscape Composer Microsoft FrontpageMicrosoft Frontpage GoLive von AdobeGoLive von Adobe viele weitere Tools aus dem Internetviele weitere Tools aus dem Internet

Die wichtigsten HTML-Befehle Überschrift Header b Überschrift oberste (1.) Ebene b Überschrift oberste (1.) Ebene b Überschrift 2. Ebene b Überschrift 2. Ebene b... b Überschrift der 6. Ebene b Überschrift der 6. Ebene

Darstellung der Überschriften

Die wichtigsten HTML-Befehle Fortlaufender Text Paragraph b Ein Textabschnitt, der mit jeweils passendem Zeilenumbruch dargestellt wird. b Ein Textabschnitt, der mit jeweils passendem Zeilenumbruch dargestellt wird. b Ein weiterer Textabschnitt, der mit jeweils passendem Zeilenumbruch dargestellt wird. b Ein weiterer Textabschnitt, der mit jeweils passendem Zeilenumbruch dargestellt wird.

Darstellung fortlaufenden Textes b Zwei Darstellungen desselben Textes

Die wichtigsten HTML-Befehle Aufzählungs-Liste List b b b list item b list item b b

Darstellung von Listen

Die wichtigsten HTML-Befehle Bilder / Grafiken image source b b

Die wichtigsten HTML-Befehle Tabelle table b b b Überschrift 1. Spalte b Überschrift 1. Spalte b Überschrift 2. Spalte b Überschrift 2. Spalte b b b Text 1. Spalte b Text 1. Spalte b Text 2. Spalte b Text 2. Spalte b b

Darstellung einer Tabelle

Die wichtigsten HTML-Befehle Deutsche Umlaute äöüß b DOS und Windows sind sich schon nicht einig über die Darstellung von deutschen Sonderzeichen. In HTML werden Ersatzzeichen wie folgt verwendet: b ää ööüü b ÄÄÖÖÜÜ b ßß

Web-Design Erste Übungsaufgabe b Erstellen Sie mittels WORDPAD die Datei UEBUNG.HTM im Verzeichnis c:\vhs_kurs\web-desn\schueler\. b Der Titel soll lauten: „Meine erste HTML-Seite“ b Die Hauptüberschrift soll ebenso heißen b Die zweite Überschrift lautet: „Meine Hobbys“ b Erstellen Sie eine Liste mit Ihren Hobbys (mindestens 2) b Fügen Sie ein Bild ein. Verwenden Sie die Datei: BILD1.JPG aus dem Unterverzeichnis.\bilder b Wenn noch Zeit bleibt, fügen Sie eine Tabelle mit beliebigen Textinhalten an. b Speichern Sie die Datei und öffnen Sie diese mit einem Browser.

Web-Design Zweite Übungsaufgabe b Öffnen Sie das Programm Netscape b Öffnen Sie darin das Programm Composer b Erstellen Sie die Seite der vorigen Übung mit dem Composer b Speichern Sie die Seite und betrachten Sie sie mit dem Browser.

Web-Design b Themen des zweiten Abends b Links zu anderen Seiten b Links zum -Versand b Frames b Struktur einer Internetpräsentation b Übung b Fertige Seiten veröffentlichen b kostenlose Hilfsmittel

Die wichtigsten HTML-Befehle Links zu anderen Seiten b Hier kommen Sie zu Postbauer-Heng b Hier kommen Sie zu Postbauer-Heng

Die wichtigsten HTML-Befehle anklickbare -Adresse b Eine senden an b Eine senden an

Die wichtigsten HTML-Befehle Bild teilen Frames 1 b Frames erleichtern die Navigation durch die Seiten b beispielsweise: Randspalte mit anklickbaren Menüpunkten Randspalte mit anklickbaren Menüpunkten eine Hauptseite mit den aufgerufenen Inhalteneine Hauptseite mit den aufgerufenen Inhalten

Beispiel für Frames

Die wichtigsten HTML-Befehle Bild teilen Frames 2

Die wichtigsten HTML-Befehle Bild teilen Frames 3

Die wichtigsten HTML-Befehle Bild teilen Frames 4 zurück Thema 1 Thema 2

Struktur einer Internetpräsentation b Komplexes Beispiel

Übung zu Frames b Die Dateien index.htm, menue.htm und haupt.htm sind vorbereitet. b Starten Sie die Datei index.htm mit dem Browser b probieren Sie die Verknüpfungen aus b Ändern Sie in index.htm die Angabe cols durch rows und probieren Sie die Seite mit dem Browser aus b Ändern Sie in menue.htm die Angabe target=„haupt“ durch target=„links“ oder target=„new“. b Probieren Sie wieder das Ergebnis mit dem Browser

Fertige Seiten veröffentlichen 1 b Zugangsdaten für den Server eingeben

Fertige Seiten veröffentlichen 2 b Lokale Datei(en) markieren und zum Server übertragen

Nützliche, kostenlose Hilfsmittel b Besucherzähler: b Gästebuch: b Diskussionsforen: de.groups.yahoo.comde.groups.yahoo.com b Chat-Room: b Weitere Hilfsmittel auf der Kurs-CD

Web-Design b Themen des dritten Abends b Bedienung des Netscape Composers b Formulare b Verweis-sensitive Grafik b Meta-Tags b Cascading Style-Sheets b Ihren Auftritt bekannt machen b Übungen

Web-Design Fehlersuche

Web-Design Formulare 1 b Auswahlknöpfe (Radio) b Auswahllisten b Kästchen ankreuzen b Textfelder ausfüllen b Schaltfläche senden/löschen

Web-Design Formulare 2 b b

Web-Design Formulare 3 b männlich b männlich b weiblich b b b Postbauer b Postbauer b Heng b Heng b b

Web-Design Formulare 4 b Arbeiter b Angestellter b Ihre Meinung b Ihre Meinung b b

Web-Design Formulare 5 b Formular_Name=meine private Homepage b geschlecht=maennlich b wohnort=Ort2 b beruf=Angestellter b kommentar=Hallo Kursteilnehmer von Web-Design b

Web-Design Verweis-sensitive Grafik 1 b Die Balken sind anklickbar und verzweigen zu Details des jeweiligen Monats

Web-Design Verweis-sensitive Grafik 2 b b

Web-Design Übungsaufgabe in abend_3 b Ergänzen Sie in menue.htm die Koordinaten für die beiden fehlenden Schaltflächen aus raster.txt b Ergänzen Sie in aktuell.htm den Verweis auf die Grafik balken.jpg, so dass diese verweis- sensitiv wird. b Verändern Sie die Formularangaben in impress.htm und prüfen Sie die Auswirkungen

Web-Design künftige Kontaktmöglichkeit b Wir können uns regelmäßig im Computer- Treff im Bahnhof treffen und unsere Erfahrungen austauschen b unter der news-Group: de.groups.yahoo.com/group/netlife- postbauer-heng können wir in Verbindung bleiben