Post on 06-Apr-2016
Web-DesignWeb-DesignWie erstelle ich eine eigene Wie erstelle ich eine eigene Webseite und bringe sie ins Webseite und bringe sie ins weltweite Internetweltweite Internet
Ein Kurs der Agenda 21 von Postbauer-Hengin Zusammenarbeit mit der VHS Neumarkt
Hr. StreichertHr. Gesellchen
3x 120 Minutenjeweils Freitagsab 29.11.2002ab 19:00 Uhr
Web-DesignWeb-Design Themen des ersten AbendsThemen des ersten Abends Netzstruktur, wo sind meine SeitenNetzstruktur, wo sind meine Seiten Grundzüge von HTMLGrundzüge von HTML
• ÜberschriftenÜberschriften• ListenListen• BilderBilder• TabellenTabellen
ÜbungenÜbungen
NetzstrukturNetzstruktur wo befinden sich die eigenen wo befinden sich die eigenen
Seiten?Seiten? Die erstellten Original-seiten auf dem eigenen PC
Kopien auf demwww-Server
Grundzüge von HTMLGrundzüge von HTML
Hyper Text Markup LanguageHyper Text Markup Language enthält Text und Strukturangabenenthält Text und Strukturangaben enthält Verweise auf Bilderenthält Verweise auf Bilder enthält Verweise auf andere Seiten enthält Verweise auf andere Seiten
(Links)(Links)
Gliederung einer HTML-Gliederung einer HTML-SeiteSeite
<HTML><HEAD>(unsichtbare) Angaben zum Seiteninhalt, Autor usw.</HEAD><BODY>(sichtbare) Texte, Überschriften, Tabellen, Bilder usw.</BODY></HTML>
Werkzeuge für Web-SeitenWerkzeuge für Web-Seiten
Einfacher TexteditorEinfacher Texteditor WindowsprogrammeWindowsprogramme
• 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-Die wichtigsten HTML-BefehleBefehleÜberschrift Überschrift HeaderHeader
<H1><H1> Überschrift oberste (1.) Überschrift oberste (1.) EbeneEbene</H1></H1>
<H2><H2> Überschrift 2. Ebene Überschrift 2. Ebene</H2></H2> ...... <H6><H6> Überschrift der 6. Überschrift der 6.
EbeneEbene</H6></H6>
Darstellung der Darstellung der ÜberschriftenÜberschriften
Die wichtigsten HTML-Die wichtigsten HTML-BefehleBefehleFortlaufender Text Fortlaufender Text ParagraphParagraph
<P><P> Ein Textabschnitt, der mit Ein Textabschnitt, der mit jeweils passendem Zeilenumbruch jeweils passendem Zeilenumbruch dargestellt wirddargestellt wird.</P>.</P>
<P><P> Ein weiterer Textabschnitt, Ein weiterer Textabschnitt, der mit jeweils passendem der mit jeweils passendem Zeilenumbruch dargestellt Zeilenumbruch dargestellt wirdwird.</P>.</P>
Darstellung fortlaufenden Darstellung fortlaufenden TextesTextes Zwei Darstellungen desselben Zwei Darstellungen desselben
TextesTextes
Die wichtigsten HTML-Die wichtigsten HTML-BefehleBefehleAufzählungs-Liste Aufzählungs-Liste ListList
<UL><UL> <LI><LI> list item list item </LI></LI> <LI><LI> list item list item </LI></LI> </UL></UL>
Darstellung von ListenDarstellung von Listen
Die wichtigsten HTML-Die wichtigsten HTML-BefehleBefehleBilder / Grafiken Bilder / Grafiken image image sourcesource
<img src =<img src = „„////pfadangabe/verzeichnis/bild1.jpgpfadangabe/verzeichnis/bild1.jpg““>>
<img src<img src == „ „ . /. /verzeichnis/grafik2.gifverzeichnis/grafik2.gif““>> <img src<img src == „„poster3.jpgposter3.jpg““>>
Die wichtigsten HTML-Die wichtigsten HTML-BefehleBefehleTabelle Tabelle tabletable <table border=1><table border=1> <tr><tr> <th><th>Überschrift 1. SpalteÜberschrift 1. Spalte</th></th> <th><th>Überschrift 2. SpalteÜberschrift 2. Spalte</th></th> </tr></tr> <tr><tr> <td><td>Text 1. SpalteText 1. Spalte</td></td> <td><td>Text 2. SpalteText 2. Spalte</td></td> </tr></tr> </table></table>
Darstellung einer TabelleDarstellung einer Tabelle
Die wichtigsten HTML-Die wichtigsten HTML-BefehleBefehleDeutsche Umlaute äöüßDeutsche Umlaute äöüß
DOS und Windows sind sich schon nicht einig DOS und Windows sind sich schon nicht einig über die Darstellung von deutschen über die Darstellung von deutschen Sonderzeichen. In HTML werden Ersatzzeichen Sonderzeichen. In HTML werden Ersatzzeichen wie folgt verwendet:wie folgt verwendet:
ää ä ä öö öö üü üü ÄÄ ÄÄ ÖÖ ÖÖ ÜÜ ÜÜ ßß ßß
Web-DesignWeb-DesignErste ÜbungsaufgabeErste Übungsaufgabe Erstellen Sie mittels Erstellen Sie mittels WORDPADWORDPAD die Datei die Datei UEBUNG.HTMUEBUNG.HTM im im
Verzeichnis Verzeichnis c:\vhs_kurs\web-desn\schueler\.c:\vhs_kurs\web-desn\schueler\. DerDer Titel Titel soll lauten: soll lauten: „Meine erste HTML-Seite“„Meine erste HTML-Seite“ Die Die HauptüberschriftHauptüberschrift soll ebenso heißen soll ebenso heißen Die Die zweite Überschriftzweite Überschrift lautet: lautet: „Meine Hobbys“„Meine Hobbys“ Erstellen Sie eine Erstellen Sie eine ListeListe mit Ihren mit Ihren HobbysHobbys (mindestens 2) (mindestens 2) Fügen Sie ein Fügen Sie ein BildBild ein. Verwenden Sie die Datei: ein. Verwenden Sie die Datei: BILD1.JPGBILD1.JPG aus aus
dem Unterverzeichnis dem Unterverzeichnis .\bilder.\bilder Wenn noch Zeit bleibt, fügen Sie eine Wenn noch Zeit bleibt, fügen Sie eine TabelleTabelle mit beliebigen mit beliebigen
Textinhalten an.Textinhalten an. Speichern Sie die Datei und öffnen Sie diese mit einem Speichern Sie die Datei und öffnen Sie diese mit einem
BrowserBrowser..
Web-DesignWeb-DesignZweite ÜbungsaufgabeZweite Übungsaufgabe Öffnen Sie das Programm Öffnen Sie das Programm NetscapeNetscape Öffnen Sie darin das Programm Öffnen Sie darin das Programm ComposerComposer Erstellen Sie die Seite der vorigen Übung mit Erstellen Sie die Seite der vorigen Übung mit
dem dem ComposerComposer Speichern Sie die Seite und betrachten Sie sie Speichern Sie die Seite und betrachten Sie sie
mit dem mit dem BrowserBrowser. .
Web-DesignWeb-Design Themen des zweiten AbendsThemen des zweiten Abends Links zu anderen SeitenLinks zu anderen Seiten Links zum EMail-VersandLinks zum EMail-Versand FramesFrames Struktur einer InternetpräsentationStruktur einer Internetpräsentation ÜbungÜbung Fertige Seiten veröffentlichenFertige Seiten veröffentlichen kostenlose Hilfsmittelkostenlose Hilfsmittel
Die wichtigsten HTML-Die wichtigsten HTML-BefehleBefehleLinks zu anderen SeitenLinks zu anderen Seiten
Hier kommen Sie zu Hier kommen Sie zu <a href =<a href = „„http://http://www.postbauer-heng.de/bilder/bilder.htwww.postbauer-heng.de/bilder/bilder.htmm““>>Postbauer-HengPostbauer-Heng</a></a>
Die wichtigsten HTML-Die wichtigsten HTML-BefehleBefehleanklickbare EMail-Adresseanklickbare EMail-Adresse
Eine EMail senden an Eine EMail senden an <a href = <a href = „„mailto:mailto:gemeinde@postbauer-gemeinde@postbauer-heng.deheng.de““>>gemeinde@postbauer-heng.degemeinde@postbauer-heng.de</a></a>
Die wichtigsten HTML-Die wichtigsten HTML-BefehleBefehleBild teilen Bild teilen Frames 1Frames 1
Frames erleichtern die Navigation durch die Frames erleichtern die Navigation durch die SeitenSeiten
beispielsweise:beispielsweise:• Randspalte mit anklickbaren MenüpunktenRandspalte mit anklickbaren Menüpunkten• eine Hauptseite mit den aufgerufenen Inhalteneine Hauptseite mit den aufgerufenen Inhalten
Beispiel für FramesBeispiel für Frames
Die wichtigsten HTML-Die wichtigsten HTML-BefehleBefehleBild teilen Bild teilen Frames 2Frames 2
Index .htm
<f rameset co ls ="20% , *"><f rame s rc = "me nue .htm" name="links"><f rame s rc = "ha upt .htm" name="ha upt">
</f ra meset>
me nue .htm ha upt .htm
<a href="se ite 1.htm" ta rget="ha upt"> se ite2 .htm
<a href="se ite2 .htm" ta rget="ha upt">
se ite 1.htm
Die wichtigsten HTML-Die wichtigsten HTML-BefehleBefehleBild teilen Bild teilen Frames 3Frames 3
</head>
<frameset cols="20%, *"> <frame src="./menue.htm" name="links"> <frame src="./haupt.htm" name="haupt"></frameset>
<body background="./bilder/hintbild.jpg">
Die wichtigsten HTML-Die wichtigsten HTML-BefehleBefehleBild teilen Bild teilen Frames 4Frames 4
<head><base target = “haupt“></head><body><a href="./haupt.htm" target="haupt">zurück</a><br><a href="./seite1.htm" target="haupt">Thema 1</a><br><a href="./seite2.htm" target="haupt">Thema 2</a><br>
Struktur einer Struktur einer InternetpräsentationInternetpräsentation Komplexes BeispielKomplexes Beispiel
Übung zu FramesÜbung zu Frames Die Dateien Die Dateien index.htmindex.htm, , menue.htmmenue.htm und und haupt.htmhaupt.htm
sind vorbereitet.sind vorbereitet. Starten Sie die Datei Starten Sie die Datei index.htmindex.htm mit dem mit dem BrowserBrowser probieren Sie die probieren Sie die VerknüpfungenVerknüpfungen aus aus Ändern Sie in Ändern Sie in index.htmindex.htm die Angabe die Angabe colscols durch durch rowsrows
und probieren Sie die Seite mit dem und probieren Sie die Seite mit dem Browser Browser ausaus Ändern Sie in Ändern Sie in menue.htmmenue.htm die Angabe die Angabe target=„haupt“target=„haupt“
durch durch target=„links“target=„links“ oder oder target=„new“target=„new“ . . Probieren Sie wieder das Ergebnis mit dem Probieren Sie wieder das Ergebnis mit dem BrowserBrowser
Fertige Seiten Fertige Seiten veröffentlichen 1veröffentlichen 1 Zugangsdaten für den Server Zugangsdaten für den Server
eingebeneingeben
Fertige Seiten Fertige Seiten veröffentlichen 2veröffentlichen 2 Lokale Datei(en) markieren und zum Server Lokale Datei(en) markieren und zum Server
übertragenübertragen
Nützliche, kostenlose Nützliche, kostenlose HilfsmittelHilfsmittel Besucherzähler: Besucherzähler:
• www.digits.comwww.digits.com Gästebuch:Gästebuch:
• www.guestbook.dewww.guestbook.de Diskussionsforen:Diskussionsforen:
• de.groups.yahoo.comde.groups.yahoo.com Chat-Room: Chat-Room:
• www.chat4free.dewww.chat4free.de Weitere Hilfsmittel auf der Kurs-CDWeitere Hilfsmittel auf der Kurs-CD
Web-DesignWeb-Design Themen des dritten AbendsThemen des dritten Abends Bedienung des Netscape ComposersBedienung des Netscape Composers FormulareFormulare Verweis-sensitive GrafikVerweis-sensitive Grafik Meta-TagsMeta-Tags Cascading Style-SheetsCascading Style-Sheets Ihren Auftritt bekannt machenIhren Auftritt bekannt machen ÜbungenÜbungen
Web-Design Web-Design FehlersucheFehlersuche
Web-Design Web-Design Formulare 1Formulare 1
Auswahlknöpfe Auswahlknöpfe (Radio)(Radio)
AuswahllistenAuswahllisten Kästchen Kästchen
ankreuzenankreuzen Textfelder Textfelder
ausfüllenausfüllen Schaltfläche Schaltfläche
senden/löschensenden/löschen
Web-Design Web-Design Formulare 2Formulare 2 <<form actionform action = = ""mailto:mailto:name@t-online.dename@t-online.de""
methodmethod==""postpost"" enctype=enctype=""text/plaintext/plain">"> <input type="<input type="hiddenhidden" name="" name="Formular_NameFormular_Name" "
value="value="meine private Homepagemeine private Homepage">"> <!-- hier folgen die Formularelemente --><!-- hier folgen die Formularelemente --> </</formform>>
<form action="http://www.ihr-guter-name.de/<form action="http://www.ihr-guter-name.de/cgi-cgi-binbin/feedback.pl" method="get">/feedback.pl" method="get">
Web-Design Web-Design Formulare 3Formulare 3 <<inputinput typetype="="radioradio" name="geschlecht" " name="geschlecht"
value="value="MannMann">">männlichmännlich <br> <br> <<input typeinput type="="radioradio" name="geschlecht" " name="geschlecht"
checked="checked"checked="checked" value=“ value=“FrauFrau">">weiblichweiblich
<<select nameselect name="wohnort" size="4">="wohnort" size="4"> <<option valueoption value="="Ort1Ort1">">PostbauerPostbauer</</optionoption>> <<option valueoption value="="Ort2Ort2" "
selectedselected="">="">HengHeng</</optionoption>> </</selecselect>t>
Web-Design Web-Design Formulare 4Formulare 4 <<input type="input type="checkboxcheckbox" " name="beruf"name="beruf"
value="value="ArbeiterArbeiter"">>ArbeiterArbeiter <<input type="input type="checkboxcheckbox" " name="beruf"name="beruf"
value="value="AngestellterAngestellter"">>AngestellterAngestellter <<textarea nametextarea name="kommentar" ="kommentar" rows="5" cols="60"rows="5" cols="60"
wrap="virtual">wrap="virtual">Ihre MeinungIhre Meinung</</textareatextarea>>
<<input typeinput type="="submitsubmit" " valuevalue="="Formular Formular abschickenabschicken">">
<<input typeinput type="="resetreset"" value value="="Eingaben verwerfenEingaben verwerfen">">
Web-Design Web-Design Formulare 5Formulare 5 Formular_Name=meine private Formular_Name=meine private
HomepageHomepage geschlecht=maennlichgeschlecht=maennlich wohnort=Ort2wohnort=Ort2 beruf=Angestellterberuf=Angestellter kommentar=Hallo Kursteilnehmer von Web-kommentar=Hallo Kursteilnehmer von Web-
DesignDesign address=mein.name@t-online.deaddress=mein.name@t-online.de
Web-Design Web-Design Verweis-sensitive Grafik 1Verweis-sensitive Grafik 1
Die Balken Die Balken sind sind anklickbar und anklickbar und verzweigen zu verzweigen zu Details des Details des jeweiligen jeweiligen MonatsMonats
Web-Design Web-Design Verweis-sensitive Grafik 2Verweis-sensitive Grafik 2 <<map namemap name="="klickgrafikklickgrafik">"> <<area shapearea shape="="rectrect" " coordscoords="="144,177,185,348144,177,185,348" "
href="./nov01.htm" alt="November 2001"href="./nov01.htm" alt="November 2001">> <<area shapearea shape="="rectrect" " coordscoords="="244,261,282,348244,261,282,348" "
href="./dez01.htm" alt="Dezember 2001">href="./dez01.htm" alt="Dezember 2001"> <<img src="balken.jpg" width="640" img src="balken.jpg" width="640"
height="409" border="0" alt="bitte auswaehlen" height="409" border="0" alt="bitte auswaehlen" usemapusemap="#="#klickgrafikklickgrafik">">
</</mapmap>>
Web-DesignWeb-DesignÜbungsaufgabe in Übungsaufgabe in abend_3abend_3 Ergänzen Sie in Ergänzen Sie in menue.htmmenue.htm die die
Koordinaten für die beiden fehlenden Koordinaten für die beiden fehlenden Schaltflächen aus Schaltflächen aus raster.txtraster.txt
Ergänzen Sie in Ergänzen Sie in aktuell.htmaktuell.htm den Verweis den Verweis auf die Grafik auf die Grafik balken.jpgbalken.jpg, so dass diese , so dass diese verweis-sensitiv wird.verweis-sensitiv wird.
Verändern Sie die Formularangaben in Verändern Sie die Formularangaben in impress.htmimpress.htm und prüfen Sie die und prüfen Sie die AuswirkungenAuswirkungen
Web-DesignWeb-Designkünftige künftige KontaktmöglichkeitKontaktmöglichkeit Wir können uns regelmäßig im Wir können uns regelmäßig im
Computer-Treff im Bahnhof treffen Computer-Treff im Bahnhof treffen und unsere Erfahrungen austauschenund unsere Erfahrungen austauschen
unter der news-Group:unter der news-Group:de.groups.yahoo.com/group/netlife-de.groups.yahoo.com/group/netlife-postbauer-hengpostbauer-hengkönnen wir in Verbindung bleibenkönnen wir in Verbindung bleiben