Einführung in HTML. Das http (Hyper Text Transfer Protocol) dient der Übertragung der www-seiten.

Transkript

1 Einführung in HTML 1. HTML-Dokument 1.1 Die ersten Schritte Das http (Hyper Text Transfer Protocol) dient der Übertragung der www-seiten. HTML- Hyper Text Markup Language. Mit HTML wird weniger das Layout eines (Text) Dokuments dargestellt, sondern vielmehr seine Struktur (Überschrift, Fett, Linie,...). HTML Dateien sind einfache Textdateien mit der Endung htm bzw. html. Unter Word 2000 oder Star Office kann man einen HTML-Dokument erstellen. Mit einem HTML-Editor lässt sich viel mehr darstellen und noch nacharbeiten und verfeinern. Außerdem mit einem Editor lassen sich schneller Fehler im Quelltext finden. HTML-Befehle -> Tags schreiben die Struktur des Textes vor, sie werden in Klammern gesetzt < >. Es gibt ein Befehl zum Ein- und ein zum Ausschalten einer Eigenschaft. Die erste Home-Page soll index.htm(l) heißen (htm ist Standard für Windows, html für Unix). Davon sollen Links auf die nächsten Seiten verweisen. Zuerst soll man einen Ordner erstellen z.b. homepage. Umlaute Dann unter einem Editor z.b. Notepad arbeiten. ä &auml Die Umlaute oder ß kann man am Ende mit Ä &Auml Suchen/Ersetzen global verändern. ö &ouml Zuerst ein Textdokument im Ordner homepage Ö &Ouml erstellen: indexhtml. Dann ein Doppeltklick auf das ü &uuml indexhtml, der Browser wird aktiviert. Ü &Uuml Dann: Ansicht, Quelltext anzeigen und es öffnet sich ß &szlig der Editor von Windows (bei Netscape: Start, Programme, Zubehör, Editor). Diese Datei speichern unter indexhtml. Dabei den Datentyp auf: Alle Dateien setzen.

2 1.2 Dokument erzeugen. 2 Den Kopf (head): <html> <head> <title> Hier steht der Titel </title> </head> erzeugen und abspeichern (unter - Datentyp: alle Dateien). Im Browser auf Aktuallisieren klicken und der Titel steht. Jetzt kommt der Rumpf (Body) des Dokuments: <body> Hier steht jetzt der Text... </body> </html> Beim Text im Body schreiben hat die Enter-Taste keine Wirkung, stattdessen <p> für paragraph (Absatz) schreiben. Mehr als ein Leerzeichen wird ignoriert. Der Umbruch wird von der Größe des Browser-Fenster bestimmt (außer <p>). Überschrift: H1 Tag - den Code für die größtmögliche Überschrift, genannt Heading 1 Weitere Möglichkeiten: </head> <body> <h1> Klaras bunte Drachen-Homepage <p> Sie mögen Märchen? <h2> Fritz der Drache... <p> Diese Abschnitt... <h2> Ein Kapitel... <p> Dies ist eine Begebenheit... </body> </html> <b> - bold (d.h. Bold -> fett) <b> - steht vor einer Textstelle, die fett gedruckt werden soll. </b> - steht dahinter [ z.b. <B> fette Wortgruppe </B>] </h1> </h2> </h2> <i> - italic (kursiv) [z.b. <b> <i> Dieser Text ist fett und kursiv </i> </b> Absätze: Rechtsbündiger Absatz: <p align = right> weitere Attribute: center, justify, left (unnötig) Neue Zeile erzeugen ohne einen Absatz zu beginnen: <br>

3 Aufzählungen und Listen 3 Die Bullets sind sog. Aufzählungspunkte. Um sie zu erstellen: <ul> - Statt-Tag <li> - Listen-Tag z.b. <ul> Anzeige <li> Das ist Pkt 1. Das ist Pkt 1 <li> Das ist Pkt 2. Das ist Pkt 2 <li> der letzte Pkt. der letzte Pkt </ul> Für eine automatisch durchnummerierte Liste ersetzt man das Tag <ul> durch das Tag <ol> und danach zum Abschließen </ol> - End-Tag. Anzeige 1. Das ist Pkt 1 Linien einfügen: <hr> (und kein End-Tag) 2. Das ist Pkt1 Leerräume: (weil mehr als ein <p> wird nicht interpretiert) <p> <p> ( &nbsp ein geschütztes Leerzeichen (unsichtbare Code) mit <br> funktioniert es auch. 3. der letzte Pkt 2. Grafiken erstellen und einfügen Die meisten Browser kennen nur drei Grafikformate: JPEG, GIF und PNG. Diese Formate zeichnen sich durch eine hohe Kompression der Grafiken aus, was bei den langen Ladezeiten im Netz sehr wichtig ist. JPEG -> hohe Kompression, True-Color-Format (Echtfarben); manchmal aber unscharfe Ränder und Farbflächen. GIF -> kann dagegen nur 256 Farben anzeigen; gut für Animationen; gut für Grafiken ohne hohe Farbtiefe, aber urheberrechtlich geschützt. PNG -> vereint die Vorteile von GIF und JPG; lizenzfrei. Zum Umwandeln und Nacharbeiten von Grafiken eignet sich Bildbearbeitungsprogramme, wie: Paint Shop Pro ( Corel Photo Paint, Ulead Photo Impact, MS Photo Editor, MS Photo Draw, Micrografx Picture Publisher, Adobe Photo Shop (am besten). Fotos einscannen und nacharbeiten. Den Scanner starten von der Bildbearbeitung aus mit z.b.: - Datei, Import, Twain, Einlesen (bei Paint Shop Pro) oder - Scannen, Scanner, Twain-Treiber... oder ähnlich. Die Auflösung für das World Wide Web kann sogar 72 dpi betragen, so werden die Dateien klein gehalten.

4 In der Bildbearbeitung können Grafiken (Fotos) nach belieben bearbeitet werden, z.b. bei Photo Shop mit: Farben, Farbeinstellungen. Wenn ein Foto unscharf ist dann kann man mit der Einstellung des Schärfefilters versuchen es zu verbessern. Grafik ins HTML-Dokument einbinden. Eine Grafik wird nicht im HTML-Dokument gespeichert. Man muss statt dessen einen Verweis auf die Grafik-Datei anbringen: <img src= name.gif > Bei dieser Anweisung muss die Grafik name.gif im gleichen Ordner gespeichert sein. Es gibt kein End-Tag. Innerhalb der Klammern können zusätzlich Attribute stehen: <img src= name.gif align=right> (Ausrichtung=rechts) oder <img src= name.gif align=left> Ohne diese Attribute findet kein Textfluss statt. <hr> <h3> Eine Grafik... </h3> <p> <img src= name.gif align=right> Diese Grafik wurde Breite und Hohe Die Größe der Grafiken wird in Pixel (in Bildpunkten) gemessen. (Eine Grafik mit 800x640 Pixels füllt den ganzen Bildschirm) Alternativ Text angeben. Um den Platz der Grafik während der Bildaufbauphase zu füllen kann man diese Stelle mit einem Alternativ-Text versehen, die zur Erscheinung kommt bevor die Grafik zu sehen wird z.b. <img src= name.gif width=143 height=76 align=left alt= Wilkommen hier > Grafiken als Hintergrund binden Mit <body background= name.gif >. Texturen als Hintergrundmuster Es handelt sich um Grafiken, die nahtlos an sich selbst anschließen. Kostenlose Texturen kann man im Internet suchen unter: textures. 4

5 3. Hyperlinks interne und externe Verweise Verweise auf eigenen Seiten Von der Startseite (index.html) ausgehend wird man sich auf die übrigen Seiten verzweigen. Beziehungen der Seiten untereinander mit drei HTML-Dokumenten: index.html 5 In der Datei index.html beispielsweise wird hobby.html links.html zum Dokument hobby.html und links.html verweisen. Der Verweis sieht so aus: <a href= hobby.html > Interessen </a> a href bedeutet anchor hyperreference > Verweis auf einen Anker. Der Anker ist hier der Dateiname. Zwischen den Tags steht der Text, der angezeigt wird: Interessen. Er wird unterstrichen und blau dargestellt. Insgesamt sieht das Beispiel für die Hyperlinks auf der Startseite so aus: <html> <head> <title> Wilkommen </title> </head> <body> <a href= hobby.html > Interessen </a> - <a href= links.html > Interessante Links </a> <h1> Willkommen auf meiner Homepage </h1>... </body> </html> Auf der Hobby-Seite sollte ein Link wieder zurück zur Startseite (Home) führen: <a href= index.html > Home </a> Verweise auf Seiten in Unterordnern Manche Internet- Dienstleister (außer T-Online und CompuServe)erlauben eigene Unterordner einzurichten, was zu besserem Übersicht beiträgt. Die Links auf Dateien, die sich in Unterordnen befinden müssen deren genaue Adresse beinhalten, z.b. <a href= hobby/hobby.html > Interessen </a> Hier haben wir mit folgender Konstellation zu tun: C:/Eigene Dateien/homepage/hobby/hobby.html d.h. die Datei index.html befindet sich im Ordner: homapage und die Datei hobby.html befindet sich im Ordner: hobby. Vorsicht: in HTML-Dokumenten wird kein ( \ ) Backslash verwendet, sondern: Slash ( / ).

6 Externe Hyperlinks Die Verweise nach außen benötigen zuerst die Web-Adresse, auf die sie verweisen sollen z.b. Man schreibt den Verweis auf dieser Seite so: <a href= > Hier gibt es tolles Lesefutter </a> Der fertige Link sieht im Browser so aus: Hier gibt es tolles Lesefutter. 6 Neues Fenster öffnen Wenn ein externer Hyperlink in einem neuen Browser-Fenster erscheinen soll (Beispiel): Hier gibt es tolle <a href= target= _blank> Free-und Shareware </a> target=_blank ist also die entscheidende Ergänzung. Verweise innerhalb der Seite Auf einer einzelnen Seite gibt es keine Seitenbegrenzungen, die es in den Textverarbeitungsprogrammen gibt. Es steht unbegrenzt Platz zur Verfügung. Lange HTML- Dokumente werden aber leicht unübersichtlich. Deshalb kann man Verweise (Sprünge) innerhalb eines Dokuments einbringen. Noch besser wäre diese in einen Inhaltsverzeichnis einzubauen. Dazu werden zuerst Interne Anker im Text (wie z.b. Textmarken bei Schreibprogrammen) definiert: <a name= kapitel_1 > Kapitel 1 Der Hund </a> und gleich Verweise auf interne Anker (als Liste): <b> Inhaltsverzeichnis </b> <ol> <li> <a href= #kapitel_1 > Kapitel 1 Der Hund </a> <li> <a href= #kapitel_2 > Kapitel 2 Über den Jagdtrieb </a> <li>... </ol> Die Raute (#) dient als Erkennungszeichen für Verweise auf interne Anker. Im Browser sieht es so aus: Inhaltsverzeichnis 1. Kapitel 1 Der Hund 2. Kapitel 2 Über den Jagdtrieb Verweise auf Anker in einer Datei Man kann nicht nur innerhalb aber auch außerhalb einer Datei auf einen Anker verweisen. <a href= tafel.html#teilen > Infos zum teilen von Zellen </a> wobei tafel.html ist der Name des HTML-Dokuments und teilen ist der Name des Ankers. Der Link von der anderen Site im Web auf diese Stelle des Dokuments: <a href= Infos zum Teilen von Zellen </a>

7 Der -Link Der -Link verwendet der Homepage-Besitzer um einen Feedback zu erhalten. Beim Klick auf den Link öffnet sich das auf dem entsprechenden Rechner installierte Mailprogramm und die Mail-Adresse des Homepage-Besitzer wird dabei übernommen. Der Quelltext sieht so aus: <a Feedback </a>, wobei mailto Anweisung und die -Adresse bedeuten. 7 Links auf Dateien und Newsgruppen Verweis auf Datei auf FTP-Server: ftp://ftp.uni-konstanz.de/pub/ftp/ws_ftp95.exe - wenn man auf den FTP-Server der Uni- Konstanz verweisen möchte. Der HTML-Quelltext sieht so aus: <a href= ftp://ftp.uni-konstanz.de/pub/ftp/ws_ftp95.exe > Hier liegt WS_FTP </a> Datei auf eigene Homepage legen Wenn die betreffende Datei die man anderen zur Verfügung stellen möchte (hier heißt sie: frame.exe) im gleichen Ordner wie das HTML-Dokument liegt, dann recht es zu schreben: <a href= frame.exe > Hier klicken, um den Frame herunterzuladen </a> beim Klicken erscheint dem Gast ein Dialogfenster in dem er gefragt wird ob er das Programm ausführen oder speichern möchte. Verweis auf Newsgruppen Bei Newgruppen im sogenannten Usenet kann jeder seine Meinung zu einem speziellen Thema äußern. Computerfreunde helfen sich gegenseitig. Newsgruppen werden per angeschrieben. Man benötigt dazu einen Newsreader (wie Outlook Express). Ein Link sieht so aus: <a href= news://msnews.microsoft.com/microsoft.public.de.frontpage > Newsgruppe zu FrontPage </a> Nach dem Klick wird die entsprechende Gruppe auf dem Bildschirm erscheinen. Link auf eigene Grafik Auch Grafiken lassen sich zum Link umwandeln. Es reicht an die Stelle an der normalerweise der Text steht den Verweis auf eine Grafik zu erstellen (z.b.): <a href= <img src= klammer.gif > </a> Um den blauen Rahmen der Grafik auszuschalten modifiziert man die Anweisung: <img src= klammer.gif border=0> </a>

8 Image Maps In einer Grafik kann es bestimmte Bereiche geben, die auf Anklicken reagieren., Dort werden bestimmte Hyperlinks platziert. Es gibt zu diesem Zweck bestimmte Editoren. Man kann aber auch Image Map mit StarOffice erstellen. Unter StarOffice geschieht das in folgenden Schritten: 1. Mit rechts auf eine Grafik klicken, Image Map wählen. Der Image-Map-Editor erscheint. 2. z.b. den Rechteck wählen. Den Bereich der Empfindlichkeit auf den Link mit halten der linken Mausteste ziehen. 3. Die entsprechende Webadresse in das Adresse-Feld eingeben (z.b. rostock.htm). 4. Auf das kleine grüne Kreuz in der linken Ecke klicken um die Einstellungen zu übernehmen Farben und erweiterte Schriftgestaltung Die Farbnamen engl.name dt.name hexadezimaler Code black schwarz # silver hellgrau #C0C0C0 gray grau # white weiss #FFFFFF maroon kastanienbraun # red rot #FF0000 purple lila # fuchsia helllila #FF00FF green dunkelgrün # lime hellgrün #00FF00 olive olivengrün # yellow gelb #FFFF00 navy dunkelblau # blue blau #0000FF teal blaugrün # aqua himmelblau #00FFFF Hexadezimale Farben mischen: Eine hexadezimale Ziffer kann 16 Zustände haben, das wären: 1,2,3,4,5,6,7,8,9,0,A,B,C,D,E,F. Eine Null bedeutet keinen Farbwert, F dagegen full house. Für jeden Farbwert (Rot, Grün, Blau) stehen also 16 Möglichkeiten zur Verfügung, insgesamt: 16 * 16 * 16 = 4096 Farben.

9 Man kann diese Grundfarben mischen. Die ersten beiden Stellen nach der Raute definieren Rot, die nächsten beiden Grün, dann folgt blau. #FF0000 (rot) #00FF00 (grün) #0000FF (blau) z.b. aus Rot und Grün entsteht Gelb: #FFFF00. Die Attribute im BODY-Tag Atribut Bedeutung Beispiel background Hintergrundgrafik background = jette.gif bgcolor Hintergrundfarbe bgcolor = yellow text Textfarbe text = # link unbesuchter Link link = green vlink visited link vlink = red alink aktiver Link alink = white 9 z,b. <body bgcolor= silver text= black link= green vlink= red alink= yellow > Erweiterte Möglichkeiten zur Schriftgestaltung Hier einige Tags zum Verfeinern der Schrift: <samp> &! % ; Text wird ausgegeben wie eingegeben </samp> <q> Für kurze Zitate im Text </q> <i> kursiv (italic) </i> <tt> Schriftart Courier </tt> <b> fett (bold)</b> <big> Es war einmal... große Schrift</big> <small> small is beautiful </small> <sub> H 2 O - tieferstellen </sub> <sup> höherstellen </sup> Schriftgestaltung mit FONT-Tag: Font: <font color = > </font> <font color =, face =, size = > </font> face Schriftart z.b. Arial, Comic Sans MS size relative Größe: -2, -1, 0, +1, +2

10 Das PRE-Tag für feste Formatierung Innerhalb von <pre> und </pre> wird der Text so angezeigt, wie im Editor ausgerichtet (mit Leerzeichen, Zeilenumbrüchen, usw.). Es wird bei der Anzeige auf eine Schriftart mit fester Schriftweite (Courier) umgestellt. 10 Erweiterte Listengestaltung Bei untergeordneter Aufzählung sind folgende Bullets möglich: Quadrat (square), ungefüllter Kreis (circle), gefühlter Kreis (disc): <ul t ype = square > <li> Gänse Gänse <li> Hühner Hühner </ul> Bei der geordneter Aufzählung möglich sind: type = 1 (arabische Zahlen) type = A (Grossbuchstaben) type = a (Kleinbuchstaben) type = I (große römische Ziffern) type = i (kleine römische Ziffern) start = 5, start = E (zählt ab 5, E), usw. z.b. <ol type = A > <li> Hühner A. Hühner <li> Gänse B. Gänse </ol> oder <ol type = start = 5 > <li> Hühner 5. Hühner <li> Gänse 6. Gänse </ol>

11 6. Tabellen in HTML 11 Tabellen sind für HTML sehr wichtig. Man kann mit unsichtbaren Tabellen Grafiken an der richtigen Stelle platzieren und Textblöcke exakt ausrichten. Einfache Tabellen Die Tabelle wird vom <table>... Tabelleninhalt... </table> umschlossen. Der Tag <tr> (table row - Tabellenzeile) definiert eine neue Zeile. Die einzelnen Zellen (Tabellenkästen) werden durch <td> (table data - Zeileninhalt) gekennzeichnet. Merke: Bis auf </table> werden bei den Tabellen-Tags keine End-Tags benötigt. Beispiel: <table> <tr> <td> Schwarz <td> Wie&szlig Ansicht (unsichtbare Tabelle): <tr> <td> Rot <td> Blau Schwarz Weiß </table> Rot Blau Tabelle mit Tabellenkopf Um den Tabellenkopf zu ereichen wird einfach in der ersten Zeile das Tag <td> durch <th> (table head - Tabellenkopf) ersetzt. Der Inhalt von mit <th> definierten Zellen erscheint fett dargestellt. Sind die Zellen breit genug, wird der Inhalt dieser Zellen ebenfalls zentriert. <table> <tr> <th> Obstsorte <th> Anzahl Obstsorte Anzahl <tr> <td> Äpfel <td> Äpfel <tr> <td> Birnen <td> Birnen <tr> <td> Pflaumen <td> Pflaumen </table> Gitternetzlinien einblenden Um die Gitternetzlinien leicht einblenden zu lassen setzt man das Attribut border in das <table> - Tag. <table border> <tr> <th> Obstsorte <th> Anzahl wie oben Obstsorte Anzahl Äpfel Birnen Pflaumen

12 Das Attribut border kann durch Zahlenangaben (Pixeldichte) näher bestimmt werden. z.b. bei <table border = 5> besitzt die Tabelle dickere Umrandungen. 12 Tabellen ausrichten Normalerweise steht die Tabelle linksbündig, und der Text, der unter der Tabelle aufgeschrieben wird, beginnt auch unter der Tabelle. Im Beispiel unten wird die Tabelle durch align=right rechts ausgerichtet und der danach folgende Text fließt dadurch links an die Tabelle vorbei. <table border align = right> <tr> <th> Obstsorte <th> Anzahl <tr> <td> Äpfel <td> <tr> <td> Birnen <td> <tr> <td> Pflaumen <td> </table> <p> Bitte lessen Sie auch unseren Bericht.. usw. Die Tabelle kann auch zentriert oder linksbündig (mit align=center bzw. align=left) gesetzt werden. Bei align=left oder align=right wird ein Textfluss um die Tabelle erreicht. Tabellenbreite und höhe justieren. Mit dem Attribut width im <table> - Tag wird die gesamte Tabelle ausgerichtet. Die Anweisung <table width = 50%> wird die gesamte Tabelle auf die halbe Fensterbreite gezogen. Will man die Tabelle dagegen absolut ausrichten, gibt man die Breite in Pixel an, z.b. <table width = 200>. Die Höhe läßt sich mit height = unter <table>, <th> oder <td> - Tag bestimmen. Vorsicht: die Höhen- und Breitenangaben im <tr> - Tag funktionieren nur unter dem Internet- Explorer-Browser. Versuchen Sie folgendes Beispiel: <table border width=500> <tr> <td width = 300 height = 200> Bild 1 <td width=200> <img src = name.gif> <tr> <td> <img src = name.gif> <td> Bild 2 </table> Die Grafik (name.gif) befindet sich zweimal in einer Tabelle. Die Breite (width) und die Höhe (height) wird in den einzelnen Zellen festgelegt. Die Angaben sind absolut, also in Pixels. Die Tabelle knickt ein Wenn im <table> - Tag die Angabe der Breite (width) fehlt, dann beim Verkleinern des Browserfenster wird die Tabelle wie ein Taschenmesser zusammenklappen. Ausrichtung in den Zellen Durch das Entfernen des Attributes border aus dem <table>-tag wird aus der sichtbaren Tabelle eine unsichtbare entstehen. Wie schon ausgeführt, das Attribut align sorgt für die horizontale Ausrichtung. Es gibt: align=left, align=center, align=right.

13 Man kann auch die vertikale Ausrichtung ändern für die einzelne Zellen (<th><td>) oder auch für ganze Zeilen (<tr>). Das geschieht mit dem Attribut valign (Vertikalausrichtung), möglich sind top (oben), middle (mittig, Voreinstellung) und bottom (unten). Das vorherige Beispiel etwas modifiziert: <table width=500> <tr valign = top> <td width = 300 height = 200> Bild 1 <td width=200 align = right> <img src = name.gif> <tr> <td> <img src = name.gif> <td align = right valign = bottom> Bild 2 </table> Unsichtbare Tabellen sind das, was man in Web-Seiten am häufigsten antrifft. Sie sind unentbehrlich für Spaltensatz und die exakte Ausrichtung von Grafiken. Man kann auch Tabellen in Tabellen schachteln. Zellen teilen Wenn eine Zelle über mehrere Spalten bzw. Zeilen reichen soll, dann erweitert man die entsprechenden Tags (<th><td>) durch colspan bzw. rowspan mit dazugehörigen Zahl der zu überspannenden Spalten (column) bzw. Zeilen (rows). Beispielsweise umspannt diese Zelle zwei Spalten: <th colspan=2>. <table border> <tr> <th colspan = 2> Obstsorte <th> Anzahl <tr> <td> Äpfel <td> <tr> <td> Birnen <td> <tr> <td> Pflaumen <td> </table> Um auch rowspan auszuprobieren erweitern wir die Tabelle um 2 Zeilen: <table border> <tr> <th colspan = 2> Obstsorte <tr> <td> Äpfel <td> <tr> <td> Birnen <td> <tr> <td> Pflaumen <td> <tr> <td> Kirschen <td rowspan = 2> <tr> <td> Erdbeeren </table> Obstsorte Äpfel Birnen Pflaumen Kirschen Erdbeeren

14 Farben für Tabellen Farben in Tabellen werden ähnlich definiert wie die Hintergrundfarbe im <body> - Tag durch das Attribut bgcolor. Mit <table bgcolor = silver> wird die gesamte Tabelle beispielsweise grau gefärbt. <table border bgcolor = silver> <tr> <th colspan = 2> Obstsorte <tr> <td> Äpfel <td> <tr> <td> Birnen <td> <tr> <td> Pflaumen <td> <tr> <td> Kirschen <td rowspan = 2> <tr> <td> Erdbeeren </table> Oder, wenn einzelne Zellen eingefärbt werden sollen: <table> <tr bgcolor = yellow> <th colspan = 2> Obstsorte <tr> <td bgcolor = white> Äpfel <td> usw. 14