Arbeiten im Datennetz der Universität Regensburg

Transkript

1 Wiwi-Workshop Uni Regensburg April 2002 Arbeiten im Datennetz der Universität Regensburg - Einführung in HTML, Teil II Arbeiten mit AOLPress - Dr. Wirtschaftswissenschaftliche Fakultät Universität Regensburg Gliederung Einführung in HTML, Teil II Arbeiten mit AOLPress» Grundlegende Begriffe» Erste Schritte Das Prinzip von HTML» Bilder und Seitenhintergründe» Hyperlinks» Quellen & Notizen 2

2 1. Grundlegende Begriffe Was ist das WWW?» WWW / W3 World Wide Web = "Weltweites Spinnennetz» dezentral organisiertes, unabhängiges multimediafähiges Informationssystem» erlaubt Zugriff auf Informationen, die als Text, Bilder, Tonfolgen,Videos, Hypertext- Links vorliegen» vereint Internet-Dienste (wie z.b. , FTP, Gopher, News, Telnet) unter einheitlicher, einfach zu bedienender Oberfläche» Informationen werden weltweit auf verschiedenen Web-Servern als HTML-Dateien abgelegt» der Datenzugriff erfolgt über das Internet mit dem Protokoll HTTP nach dem Client/Server-Prinzip Anker» Sprungadressen innerhalb eines Dokumentes, die sich auf einem Rechner oder verschiedenen weltweit ver teilten Rechnern befinden können. Im Gegensatz zu einem Hypertext-Link wird nicht die ganze Seite angezeigt, sondern nur die Information ab der Sprungadresse 3 Grundlegende Begriffe CGI (Common Gateway Interface)» Programme, die eine Interaktion des Benutzers ermöglichen» nach der auf dem Web-Server erfolgten Verarbeitung werden die Ergebnisse in HTML an den Web-Client zurückgesendet Internet» weltumspannendes, dezentrales Datennetz» verbindet mehrere Millionen von unterschiedlichsten Rechnern miteinander» lokale Verwaltungen über sogenannte Domains» Standardprotokoll TCP/IP (Transfer Control Protocol / Internet Protocol)» WWW ist nur einer der vielen Services des Internet. Weitere wichtige Internet Dienste: = elektronische Brief-Post, FTP = Übertragung von Files auf andere Computer, Gopher = Hierarchisch aufgebautes Informationssystem, News=Veröffentlichungen in Diskussions-Foren, Telnet = Möglichkeit,Programmen auf anderen Computern aufzurufen 4

3 Grundlegende Begriffe Hotlist / Bookmarks» Möglichkeit, interessante Adressen (=URLs = Uniform Resource Locator) auf dem Web-Client zu speichern HTML (Hypertext Markup Language)» Sprache, mit der Text- und Hypertext-Informationen im WWW gespeichert und übertragen werden» z. Zt. gültiger Standard: HTML 4.0» reine ASCII-Texte, die mit Steuerbefehlen(=Tags) versehen sind» nur die Textlogik und Querverweise auf andere Texte werden angegeben, nicht aber das entgültige Aussehen des Dokumentes; das Aussehen hängt vom jeweiligen Web- Browser ab HTTP (Hypertext Transfer Protocol)» Protokoll auf der Basis von TCP/IP, um im Internet Informationen zwischen Web- Servern und Web-Clients zu übertragen 5 Grundlegende Begriffe Hypertext» ASCII-Texte,die mit Querverweisen(=Hypertext-Links) die Verbindung zu weiteren Informationen herstellen» Hypertext-Links werden mit sog.urls (= Uniform Resource Locator) realisiert Image-Map Link» Bild im WWW, das anklickbare Elemente enthält» stellen eine inhaltliche Verbindung zwischen verschiedenen Web-Seiten her, die sich auf einem Rechner oder verschiedenen weltweit verteilten Rechnern befinden können Web-Seite» Eine im WWW veröffentlichtes HTML-File wird als Web-Seite bezeichnet Web-Browser» Programm (z.b. Internet Explorer / Netscape) auf dem Web-Client, welches Informationen vom Web-Server holt 6

4 Grundlegende Begriffe Web-Server / WWW-Server» Computer, auf denen die Informationen im WWW gespeichert sind» häufig Unix- oder WindowsNT-Rechner URL (Uniform Resource Locator)» Adresse für das Auffinden von Information im Netz» enthält die Art des erlaubten Zugriffs, den Namen des Web-Servers, den den konkreten Dateinamen der HTML-Seite, evtl. auch noch Sprungadressen 7 2. Erste Schritte Das Prinzip von HTML einzelne Befehle werden Tags genannt verschiedene Attribute, die den Tag genauer definieren» Beispiel: Tag, mit dem man die Farbe einer Schrift verändern kann» das passende Attribut sagt, welche Farbe genommen werden soll jeder Tag steht in spitzen Klammern < > die meisten Tags kommen paarweise» der erste Tag leitet die Definition ein» der zweite Tag beendet die Definition wieder» Beispiel: Textabschnitt soll <fett> erscheinen; <b> (=bold) <b>hier steht mein Text</b> 8

5 Das Prinzip von HTML Beispielhafte Tags :» Textabsatz: <p>hier steht mein Text</p>» Zwei Absätze untereinander getrennt darstellen: <p>hier steht mein Text</p> <p>hier steht noch mehr Text</p>» Seitenüberschrift (in der obersten Browserleiste): <title>überschrift</title>» durchgehende Trennlinie (Befehl, der nicht geschlossen werden muss) zur Unterteilung von Seiten: <hr> Seitenstruktur zur Gliederung und Aufteilung einer HTML-Seite» Kopf (head) und Körper (body) Dokumenten-Definition (doctype)» informiert den Browser, welche HTML Version vorliegt 9 Prinzip von HTML Beispiel für eine strukturierte HTML- Seite <!doctype html public "-//W3C//DTD HTML 3.2//EN"> <html> <head> <title>meine erste Seite</title> </head> <body> Hier ist Platz für die eigentlichen Inhalte: Texte und Bilder und natürlich HTML Tags. </body> </html> 10

6 Bilder und Seitenhintergründe Einbau von Bilder Image-Tag: <img src="bild.gif">» zwischen den "" Zeichen steht der Dateiname des Bildes» i.a. zwei Formate für Bilder im Netz: GIF und JPG Attribute des Image-Tags:» width="" - gibt die Breite des Bildes an» height="" - gibt die Höhe des Bildes an» border="" - versieht das Bild mit einem Rahmen» alt="" - beliebiger Alternativtext, der das Bild beschreibt (wird angezeigt, so lange das Bild noch nicht geladen ist oder wenn der Mauszeiger (Cursor) über dem Bild steht» Maßeinheit ist Pixel (= Bildpunkt ) Beispiel: <img src="bild.gif" width="100" height="100" border="2"alt="meine Bildbeschreibung"> 11 Bilder und Seitenhintergründe Hintergrund einer Seite farbig darstellen im <body>-tag Attribut für die Farbe des Seitenhintergrundes setzten Beispiel: <body bgcolor="red"> i.a. werden die Farben im Hexadezimalcode angegeben, welche in Farbtabellen hinterlegt sind Hintergrundbild verwenden im <body>-tag Attribut für Hintergrundbild angeben Beispiel: <body background="bild.gif"> 12

7 Hyperlinks Einbau von Hyperlinks zur Verkettung von HTML-Seiten relativer Link-Tag: <a href="seite2.html">hier klicken, um auf die nächste Seite zu kommen</a>» "a" steht für "anchor (=Anker)» zwischen den "" Zeichen befindet sich der Dateiname der Seite, auf die verwiesen» Text, den der Besucher sieht» </a> ist der Schluss-Tag absoluter Link: Link auf entfernte, fremde, externe Web-Site, unter Angabe des Domainnamens <a href=" zur Tageszeitung Die Welt </a> -links, um automatisch das -programm zu öffnen: <a mir Post</a> 13 Quellen & Notizen: Quellen: Datennetz der Universität Regensburg [ Notizen: 14