Homepage erstellen 2002 Seite 1

Transkript

1 Homepage erstellen 2002 Seite 1 1 Warum ein Internet-Auftritt? Gründe Einige Grundregeln für den Web-Auftritt Vorteile von HTML Nachteile von HTML Grundlagen zur Hypertext Markup Language (HTML) Grundstruktur einer HTML-Seite Die wichtigsten HTML-Tags Arbeiten mit dem HTML-Editor Phase 5 der KVHS Erste Seite Installieren des HTML-Editors Hinweise zur VHS collection CD Arbeiten mit Frontpage FTP File Transfer Protocol Feinschliff... 11

2 Homepage erstellen 2002 Seite 2 1 Warum ein Internet-Auftritt? 1.1 Gründe wirtschaftliche Gründe (Man hat ein eigenes Geschäft und möchte seine Leistungen anbieten.) Vorstellen seines Hobbys (Eisenbahnfan oder Briefmarkensammler) um neue Kontakte zu knüpfen Familie präsentieren einfach weil es Spaß macht 1.2 Einige Grundregeln für den Web-Auftritt Damit viele Leute die Homepage besuchen, muss man einige Dinge beachten: Die Homepage muss - leicht zu finden sein o einfacher Name o Eintrag in eine oder mehrere Suchmaschinen o Links von Bekannten oder anderen Web-Seiten - optisch ansprechend - leicht zu navigieren - aktuell sein - Um eine Homepage aktuell zu halten, muss diese leicht zu pflegen sein. Dafür braucht man ein Konzept und muss Regeln und Sicherheit beachten. 1.3 Vorteile von HTML - zum Erstellen einen HTML-Dokuments genügt ein einfacher Texteditor - einfacher zu erlernen als eine richtige Programmiersprache - die erstellten Web-Seiten sind unter MS-Windows wie auch unter Unix oder Apple-Macintosh zu lesen - da der Quellcode sichtbar ist, kann der Ersteller einer Web-Seite auch von anderen HTML-Designern lernen - Einfaches Vernetzen von Informationen über Querverweise (Hyperlinks) - HTML kann auch zur Veröffentlichung auf Datenträgern wie CD-ROM benutzt werden. - Änderungen und Ergänzungen einer Web-Seite kann flexibel vorgenommen werden und durch die Druckfunktion des Browsers mit geringen Kosten vervielfältigt werden. 1.4 Nachteile von HTML - Die Darstellung der Web-Seiten ist von Browser zu Browser teilweise unterschiedlich. - Mathematische Gleichungen sind bisher nicht in der Beschreibungssprache HTML enthalten und müssen in Form einzelner Grafiken erzeugt werden (umständlicher). - Jeder Benutzer hat Zugriff auf die Informationen und Grafiken und kann diese letztendlich unberechtigterweise für seine Zwecke benutzen.

3 Homepage erstellen 2002 Seite 3 2 Grundlagen zur Hypertext Markup Language (HTML) Bei HTML handelt es sich um eine Seitenbeschreibungssprache mit der Aufgabe, Inhalte so zu strukturieren, dass sie vom Browser richtig interpretiert und im Fenster angezeigt wird. HTML wird vom World Wide Web Consortium (W3C) verwaltet und weiterentwickelt. Sie hat gegenüber anderen Computersprachen viele Vorteile: Sie ist auf jedem Rechner ohne Einschränkung einsetzbar. Sie ist softwareunabhängig, man benötigt also keine spezielle Software, um HTML-Dokumente zu erstellen. Im Grunde genügen also ein einfacher Texteditor, um in HTML zu schreiben, und ein Browser (z. B. Microsoft Internet Explorer oder Netscape Navigator), um die entsprechende Seite anzuzeigen. 2.1 Grundstruktur einer HTML-Seite Das Grundgerüst einer HTML-Seite ist einheitlich in zwei logische Bereiche aufgeteilt ( dem Header oder Kopf und dem Body oder Rumpf). Alle HTML-Befehle werden in sogenannten Tags (z.b. <title> ) wiedergegeben. Ein Tag ist ein Befehl, der von spitzen Klammern eingerahmt wird. In den meisten Fällen zeigt ein Starttag (z.b. <title> ) und ein Endtag (z.b. </title> ) den Bereich eines HTML-Befehls an. So rahmen die beiden Tags <html> und </html> grundsätzlich das gesamte HTML- Dokument ein. Tags können dabei sowohl in Klein- als auch in Großbuchstaben angegeben werden. 2.2 Die wichtigsten HTML-Tags <html> </html> sagt, dass es sich um ein HTML-Dokument handelt. <head> </head> enthält wichtige Informationen über die Datei, zum Beispiel ihren Namen. <title> </title> nennt den Namen des Dokuments, der oben in der Titelleiste des Browserfensters erscheint! <body> </body> bezeichnet den Text, der auf der Webseite zu lesen sein soll. bgcolor bgcolor=#rrggbb ist ein Attribut, das die Hintergrundfarbe des ganzen Dokuments einstellt.

4 Homepage erstellen 2002 Seite 4 <hr> ( #66FFCC wählt einen Grünton aus) ( #FF0000 wählt einen Rotton aus) ( #FFFFFF wählt weiß aus) Neuer Absatz Ein Zeilenumbruch (break-ruler) erfolgt bei HTML nicht durch die Eingabetaste, sondern durch . Dieser Befehl wird nicht durch einen Endbefehl abgeschlossen. Mehrere -befehle können hintereinander gesetzt werden. horizontaler ruler erzeugt eine horizontale, zentrierte Linie und zugleich einen Zeilenumbruch, es gibt keinen Endbefehl. Der Befehl ist durch verschiedene Attribute erweiterbar. <center> </center> Ab hier wird der Text zentriert angezeigt, am Ende muss ein </center> folgen. <img> Fügt eine Grafik auf die Seite ein, wobei weitere Attribute nötig sind, die Größe, Ausrichtung usw. bestimmen. <h1> bis <h6> Durch diese Befehle werden Überschriften gekennzeichnet; je kleiner die Zahl hinter dem h, desto größer wird die Schrift. Dieser Befehl definiert die Beziehung zwischen dem aktuellen Dokument und einem Ziel- Dokument. <a href Der Text zwischen den Befehlen ist fett. Der Text zwischen den Befehlen ist kursiv. <hr color= #ff0000 > waagerechte rote Linie Weitere Beispiele: <img> <img src="c:/fotos/einschulung2.jpg" Width="400" Height="300"> </center> Ein <img> -Befehl kann für sich alleine stehen, es ist also kein </img> am Ende notwendig. Dieser Befehl sagt: Hole die Bilddatei Einschulung2.jpg vom Laufwerk und Verzeichnis c:/fotos/. Die anderen Attribute definieren verschiedene andere Charakteristiken: Welche Art von Rahmen um das Bild gelegt sein soll, die Tatsache, dass es sich um eine Imagemap handelt (der Benutzer kann auf das Bild klicken, um auf eine andere Seite zu gelangen), und die Bildgröße. <a href> </a> <a href="file://c:/homepage/test1/seite1.htm"> Weiter zu unserer Jahrescollage </a> Das ist ein Link. Der Befehl <href> verweist auf ein Dokument namens seite1.htm, das sich auf Laufwerk c: im Verzeichnis /homepage/test1/ befindet.

5 Homepage erstellen 2002 Seite 5 3 Arbeiten mit dem HTML-Editor Phase 5 der KVHS 3.1 Erste Seite Die erste Seite sollte folgende Merkmale haben Stand: z.b (zeigt die Aktualität) -Adresse (a href= mailto: [email protected]) Haftung (für rechtliche Absicherung) Copyright by Hugo Schmidt, Königslutter, 2002 Zähler 3.2 Installieren des HTML-Editors CD VHS-Collection einlegen Online Publishing Grundlagen öffnen HTML-Edior Phase 5 Installation starten Start-Programme-HTML Editor 3.3 Hinweise zur VHS collection CD Die CD beinhaltet einen HTML EDITOR unter dem Verzeichnis Online Publishing Grundlagen, weiterhin enthält sie mehrere Hyperlinks zum Internet, die helfen eine eigene Homepage ansprechend zu gestalten. Der HTML EDITOR ist ein kostenloser, kompakter HTML-Quelltext Editor, der für Internet und Offline-Projekte geeignet ist. Die Features umfassen eine interne Vorschau, Syntax-Highlightening, Projektverwaltung, Includeverwaltung, Plugins, Cascaded Style Sheets, Java(Script), HTML Formulare, Integrierter Bildbetrachter, integrierter Syntax Debugger und vieles mehr.

6 Homepage erstellen 2002 Seite 6 4 Arbeiten mit Frontpage

7 Homepage erstellen 2002 Seite 7

8 Homepage erstellen 2002 Seite 8 5 FTP File Transfer Protocol FTP ist ein weiteres Datenübertragungsprotokoll, das speziell zur schnellen Übertragung von binären Dateien (wie.exe-programmen) benutzt wird, zusätzlich wird es zur Übertragung der Homepage auf den Server benutzt. Das Kürzel FTP steht für File Transfer Protocol, sinngemäß übersetzt Verfahren zur Dateiübertragung, das speziell zur schnellen Übertragung von binären Dateien (wie Programmen ) benutzt wird. Sie können also Daten auf Internet-Servern speichern oder vom Netz auf Ihren Computer kopieren. FTP können Sie mit speziellen FTP-Programmen, aber (mit weniger Komfort) auch mit einem Browser betreiben. FTP kann auch in der DOS-Box (MS-DOS-Eingabeaufforderung) benutzt werden. Die Befehle sind folgende. 1. Start-Programme-MSDOS-Eingabeaufforderung 2. C:\windows> ftp (Wechsel ins FTP) 3. ftp>? (Befehlsliste/Liste der FTP-Dienste) 4. ftp> open [server] (Verbindung zum Server aufnehmen) 5. Benutzer> [kvhs] (Benutzername) 6. Kennwort> [he] (Kennwort) 7. ftp> dir oder ls (Liste der Dateien im Verzeichnis) 8. ftp> cd (Verzeichnis wechseln) 9. ftp> send oder put (Datei verschicken) 10. ftp> close (Verbindung zum Server beenden) 11. ftp> quit oder bye (FTP verlassen) 12. C:\windows> exit (DOS-Box schließen, zurück ins Windows) FTP mit T-Online aufbauen. 1. Start-Programme-MSDOS-Eingabeaufforderung 2. C:\windows> ftp (Wechsel ins FTP) 3. ftp> open home-up.t-online.de (Verbindung zum Server aufnehmen) 4. Benutzer> ftp (Benutzername) 5. Kennwort>. (Kennwort) 6. ftp> send index.html (Befehlsliste/Liste der FTP-Dienste) Sendet man alle Textdateien mit FTP zum Server (home-up.t-online.de), kann man seine eigene Homepage unter oder Name] anschauen. Für den Beginn eignet sich eine kleine Testdatei, darauf aufbauend kann man die Textdateien mit Hyperlinks erweitern. Für exe-programme und Bilddateien muss man die Dateien binary versenden. 1. ftp> open home-up.t-online.de 2. Benutzer> ftp 3. Kennwort>. 4. ftp> binary (zurück mit ascii) 5. ftp> send...

9 Homepage erstellen 2002 Seite 9 FTP mit T-Online aufbauen. 1. Start-Programme-MSDOS-Eingabeaufforderung 2. C:\windows> ftp (Wechsel ins FTP) 3. ftp> open home-up.t-online.de (Verbindung zum Server aufnehmen) 4. Benutzer> ftp (Benutzername) 5. Kennwort>. (Kennwort) 6. ftp> send index.htm (Befehlsliste/Liste der FTP-Dienste) Sendet man alle Textdateien mit FTP zum Server (home-up.t-online.de), kann man seine eigene Homepage unter oder Name] anschauen. Der Name ist der Aliasname der -Adresse. Lautet die -Adresse: [email protected] so findet man die Homepage bei Für den Beginn eignet sich eine kleine Testdatei, darauf aufbauend kann man die Textdateien mit Hyperlinks erweitern. Für exe-programme und Bilddateien muss man die Dateien binary versenden. 6. ftp> open home-up.t-online.de 7. Benutzer> ftp 8. Kennwort>. 9. ftp> binary (zurück mit ascii) 10. ftp> send... Beim Senden auf den Server von T-Online muss man einige Dinge beachten. 1. Während des Sendens muss man online sein. 2. Groß- und Kleinschreibung beachten (bei T-Online) 3. Die gesendete Index-Datei kann man erst etwas später (ca. 5 min) unter oder anschauen. Achtung beim Senden von.exe-dateien oder Bildern, diese verschickt man besser mit binary. Wird beim Senden ff gefunden, wird das als Ende der Datei gesehen und die.exe-datei oder das Bild wird nur unvollständig gesendet. 1. ftp> binary 2. ftp> send dom01.jpg oder send test.exe Sendet man html-dateien, die nicht index.html oder index.htm heißen, kann man diese im Pfad mit angeben. Z.B.: oder

10 Homepage erstellen 2002 Seite 10 6 Windows Commander32 Um Dateien leichter mit ftp zu senden gibt es das Programm Windows Commander32, das Programm ist Shareware und befindet sich auf der KVHS-CD. Windows Commander ist ein Dateimanager für Windows (TM) ähnlich wie der Windows- Dateimanager WINFILE.EXE. Windows Commander ist jedoch in jeglicher Hinsicht einem bekannten Windows-Dateimanager nachempfunden, der recht große Verbreitung erlangt hat. 7 Installation von WindowsCommander32 1. Explorer, Diskettelaufwerk d: 2. Ordner WindowsCommander anwählen 3. install auswählen 4. Deutsch ok 5. andere Sprachen nein 6. Zielverzeichnis c:\wincmd ok 7. Gruppe im Start-Menü ja 8. Fertig ok 8 Aufrufen des WindowsCommander32 1. Start-Programme-WindowsCommander- WindowsCommander32 2. Befehle/FTP verbinden 3. Neue Verbindung Steinmetzschule T-Online Titel: z.b. KVHS-Server [z.b. T-Online] Servername: server [home-up.t-online.de] Benutzername: kvhs [ftp] Passwort: he [.] 4. F7 MkDir Ordner neu erstellen 5. F5 Kopieren Herunterladen von A: nach Server/test/PC? oder zurück von Server/test/PC? nach A: oder C: 6. F8 Löschen von Dateien/Ordner auf dem Server oder auf A:

11 Homepage erstellen 2002 Seite 11 Feinschliff Die Website ist gut durchdacht, mit Text und anschaulichen Grafiken bereichert, vielleicht sogar mit einigen animierten GIF s aufgelockert, aber nun fehlt noch das Tüpfelchen auf dem i. Damit die Website noch professioneller erscheint, kann man nun einen Counter auf der Startseite einsetzen, Gästebücher einbinden oder JavaScript verwenden. Counter zählen die Zugriffe auf die Website, registrieren also, wie viele Besucher schon da waren. Gästebücher bieten den Besuchern die Möglichkeit, sich auf der Website einzutragen und einen Kommentar zu Form oder Inhalt der Website abzugeben, wobei dies Kommentare, wie auch in den Gästebüchern der realen Welt, öffentlich zu lesen sind. JavaScript schließlich sind in den Quelltext eingefügte Informationen, die es u. a. ermöglichen, Grafiken gegen andere auszutauschen (rollover) oder Formulare bereits vor dem Abschicken auf Fehler zu untersuchen.