HTML - HyperText Markup Language - breve et efficax

Transkript

1 Prof. Dr. phil. nat. habil. Alfred H. Gitter Bioinformatik / Biophysik HTML - HyperText Markup Language - breve et efficax 1 Entstehung des Internets 1969 Arpa-Net (US-Militär) Die für das US-Militär arbeitende Forschungsorganisation ARPA (Advanced Research Projects Agency) vernetzt Ihre Großrechner zum ARPA-Net. 1970er Jahre USA - Großforschungsinstitute nutzen das ARPA-Net 1980er Jahre Nach Abspaltung des militärischen Netzes wurden alle Universitäten der USA, später auch die Europas, an das Internet angeschlossen. 2 Struktur des Internets TCP : Datenpakete IP : Adressierung WWW : Dienst im Internet Domain : Namensadresse Server : Dienstanbieter Client : Nutzerprogramm Transmission Control Protocol : paketweise Datenübertragung Internet Protocol : Adressierung der Rechner im Internet Internet = Hardware-Netz, WWW = vernetzte Software übersetzt die IP-Adresse in einen Namen, z.b. "fh-jena.de" Dienstprogramm auf Host-Rechner (auch Server genannt) das Daten vom Server holt oder schickt (z.b. ein Browser) 3 HTML HTML = HyperText Markup Language = Text mit Links und Tags Bezügen Befehlen linearer Buchtext Hypertext mit einfach anzusteuernden Verweisen ( Links ) Kapitel 1 Es war einmal Kapitel 2 Die Gans, welche Adelheid hieß,... Das Nasobem ist ein Säugetier der Ordnung Rhinogradentia. Das scheue braune Tier bewegt sich auf der Nase schreitend... Die Säugetiere bilden eine Klasse der Wirbeltiere.... Die Ordnung ist eine hierarchische Stufe der biologischen Systematik zwischen Klasse und Familie.... Browser = Client, Programm zur Darstellung von HTML und Verknüpfungen im WWW (und mehr) 4 Grundstruktur eines HTML-Programms online - Referenz zum Nachschlagen (HTML und JavaScript) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso "> <title>titel des HTML-Dokuments</title> </head> <body> Text des HTML-Dokuments </body> </html> Die erste Zeile enthält die Dokumenttyp-Angabe. Damit wird dem Browser mitgeteilt, dass das in der Datei enthaltene Dokument in einer bestimmten HTML-Version geschrieben wurde. 1

2 In der vierten Zeile wird dem Browser mitgeteilt, welcher Zeichensatz verwendet wird. ISO ist der in Westeuropa, einschliesslich Deutschland, übliche Zeichensatz. Die Angaben in der ersten und der vierten Zeile sind Pflicht für ein "normgerechtes" HTML, das vom WWW-Konsortium definiert wird ( Prüfung auf der Web-Seite ). Programmbefehle = Tags beginnen mit < und enden mit > ; und werden groß oder klein geschrieben. Konsequente Kleinschreibung ist besser, da die neuere HTML-Variante, XHTML, Kleinschreibung verlangt. Tags können Attribute mit oder ohne Wertzuweisung enthalten. Die meisten Tags müssen mit einem abschliessenden Tag beendet werden, zum Beispiel der Titel zwischen <title> und </ title>. Es gibt auch Tags ohne Abschluss, zum Beispiel <br>. HTML-Code steht zwischen den Tags <html> und </html>. Er besteht aus einem Kopfteil zwischen <head> und </head>, und einem Körperteil zwischen <body> und </body>, Das Programm wird in einer Textdatei mit der Endung ".htm" oder ".html" gespeichert. 5 Hintergrundfarbe des Dokuments <body bgcolor="silver">dies Attribut erzeugt eine Hintergrundfarbe.<body> 6 Zeichenformatierung normaler Text <b>fettgedruckt</b> <i>kursiv</i> <u>unterstrichen</u> Sonderzeichen: ß = ß Ä = Ä ü = &üuml; ä = ä µ = μ <FONT color="green" size="8">grüner Text, Zeichengröße 8</FONT> 7 Absatzformatierung <h3>überschrift 3. Ordnung</h3> <p>absatz (englisch: paragraph)</p> Die Ausrichtung eines Absatzes (Entsprechndes gilt unter anderem für das Datenelement einer Tabelle; siehe unten) kann mit dem Attribut align und den Werten left, center, right und justify gesteuert werden, zum Beispiel: <p align="justify"> für Blocksatz. <br>neue Zeile <hr>waagerechte Trennlinie 8 Tabellen Eine Tabelle wird mit dem <table> - Tag begonnen und mit </table> abgeschlossen. Sie besteht aus einer oder mehreren Zeilen (englisch: rows). Jede Zeile beginnt mit <tr> und endet mit </tr>. In jeder Zeile werden soviele Datenelemente definiert, wie es Tabellenspalten gibt. Es gibt normale Datenelemente und (anders formatierte) Überschrifts-Datenelemente. Normale Datenelemente beginnen mit <td>, gefolgt vom Inhalt des Datenelements (einem Text), und enden mit </td>. Entsprechend beginnen Überschrifts-Datenelemente mit <th>, gefolgt vom Inhalt des Datenelements (einem Text), und enden mit </th>. 9 Aufgabe: eine einfache Tabelle im Browser darstellen Die folgende Tabelle soll durch ein HTML-Programm auf dem Bildschirm dargestellt werden: Mensch Taufliege Stamm Chordata Arthropoda Klasse Mammalia Insecta Gattung Homo Drosophila Art Homo sapiens D. melanogaster 2

3 - Editor aufrufen, einfachen Text schreiben Start Programme Zubehör - Editor 3

4 - Tags hinzufügen, als html-datei speichern Datei Speichern unter... Dateiname: prog_01.html 4

5 - html-datei mit dem Browser aufrufen Doppelklick auf prog_01.html 5

6 - html-datei mit dem Browser bearbeiten Ansicht Quelltext <B> fett </B> <BR> neue Zeile <U> unterstrichen </U> <I> kursiv </I> Datei Speichern 6

7 - Darstellung im Browser aktualisieren Ansicht Aktualisieren Überschrift (H2) neuer Text-Abschnitt (P) Tiere werden in einem hierarchisch gegliederten System geordnet. Tabellen-Abschnitt (P) 7

8 - Absatz- und Textformatierung: <H2> <P> <H2> Überschrift 2. Ordnung </H2> <P> Abschnitt (engl.: paragraph) </P> 8

9 - Absatz- und Textformatierung: <FONT> Das <BODY> - Tag kann Attribute enthalten: BGCOLOR="silver" setzt die Hintergrundfarbe. Das <FONT> - Tag bestimmt Texteigenschaften: Das Attribut COLOR="green" setzt die Textfarbe. Das Attribut SIZE="8" setzt die Textgröße. 9

10 - Absatz- und Textformatierung: <TABLE> <TABLE> Tabelle </TABLE> <TR> Tabellenzeile (engl.: row) </TR> <TH> hervorgehobenes Tabellenfeld </TH> <TD> normales Tabellenfeld (Daten) </TD> 10

11 - Absatz- und Textformatierung: Tabelle Das <TABLE> - Tag kann Attribute enthalten: BORDER="1" erzeugt Außenrahmen und Gitter. ( BGCOLOR="red" bestimmt die Tabellenfarbe. ) ( WIDTH="100%" bestimmt die Tabellenbreite. ) 11

12 - Links (Verweise) und Listen: <A> <LI> <A> Name des Links </A> Das Attribut HREF="URL" setzt das Verweisziel. ( URL aus dem "Adresse"-Fenster des Browsers ) TARGET="_blank" läd den URL in neuem Fenster. <OL> nummerierte Liste </OL> ( Das Attribut TYPE="I" erzeugt römische Zahlen. ) <LI> Listeneintrag </LI> 12

13 - Links auf URLs und nummerierte Liste 13

14 - Grafiken in HTML - Dokument einbinden Grafiken werden mit dem <IMG> - Tag eingebunden: Das Attribut SRC (engl.: source) bestimmt die Grafikdatei. Das Attribut ALT gibt einen Alternativtext für die Grafik an. WIDTH und HEIGHT geben optional die Größe (Pixel) an. jpg-format (Joint Photographics Expert Group) Farben gif-format (Grafic Interchange Format) 256 Farben, Animation 14

15 - Sonderzeichen ( z.b. ß = ß ) Umlaute ( ä = ä ), spezielle HTML-Zeichen ( < = < ), griech. Buchstaben ( µ = μ ) und Symbole ( = ) 15

16 - Aufgabe: farbige Tabelle erstellen Aufgabe Erstellen Sie ein HTML-Dokument, das folgende Tabelle mit der halben Breite des Fensters anzeigt: Hinweise (1) Das Dokument hat einen silberfarbenen Hintergrund. (2) Die Breite der Tabelle in Prozent der Fensterbreite wird durch das Attribut WIDTH bestimmt. (3) Mit dem Attribut ALIGN kann man die Tabelle linksbündig ("left"), rechtsbündig ("right") oder zentriert ("center") ausrichten. (4) Mit dem ALIGN-Attribut kann auch der Text in den Tabellenfeldern ausgerichtet werden. (5) Die Farbe jedes Tabellenfeldes kann mit dem Attribut BGCOLOR gesetzt werden. (6) Beachten Sie, dass die Namen der Farben in der Tabelle fettgedruckt erscheinen. 16

17 - Dokument mit farbiger Tabelle 17

18 - Dokumenttyp und Zeichensatz angeben Dokumenttyp Streng nach den Regeln muß am Anfang der Datei (vor dem <HTML> - Tag) der Dokumenttyp angegeben werden: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> ( HTML Version 4.01 "Transitional" definiert vom W3-Konsortium ) Zeichensatz Im Kopfteil (nach dem <HEAD> - Tag) sollte der in der Datei verwendete Zeichensatz angegeben werden: <META http-equiv="content-type" content="text/html; charset=iso "> ( ISO ist der normale Zeichensatz für Westeuropa. ) 18

19 - Dokument nach W3C Standards prüfen Auf der Internetseite kann man prüfen, ob ein HTML Dokument den W3C - Regeln entspricht: 1. Dateiname eingeben 2. hier klicken 19

20 - Formulare: <FORM> <FORM> Formular </FORM> Das Attribut ACTION="URL" bestimmt ein Verweisziel, das aufgerufen wird, wenn man im Eingabefeld ENTER drückt. Eingabefeld: <INPUT> Tastenfeld: <INPUT TYPE="button"> Textfeld: <TEXTAREA> Text </TEXTAREA> Mit NAME kann man Formulare und ihre Felder benennen. 20

21 - Formularfelder: <INPUT> <TEXTAREA> Das Eingabefeld kann 10 Zeichen ( MAXLENGTH="10" ) aufnehmen und 8 Zeichen anzeigen ( SIZE="8" ). Nach ENTER im Eingabefeld wird die Datei drekreis.gif gezeigt. Das Tastenfeld erhält mit dem Attribut VALUE den Text "PRESS" zugewiesen. Drücken der Taste hat hier keine Wirkung, aber mit JavaScript lassen sich Aktionen auslösen. Das Textfeld zeigt 3 Zeilen ( ROWS="3" ) mit je 20 Zeichen ( COLS="20" ) an, kann aber beliebig viel änderbaren Text aufnehmen. ENTER löst hier keine Aktion aus. 21

22 - Kommentar:  <!-- Kommentar -- > Kommentare helfen dabei, ein Programm zu lesen. <HR> ( Das Attribut SIZE bestimmt die Dicke der Linie. ) <BIG> größere Schrift </BIG> <SMALL> kleinere Schrift </SMALL> <SUB> tief gestellt </SUB> <SUP> hoch gestellt <SUP> 22

23 - HTML und XHTML HTML ist eine Textauszeichnungssprache zur Darstellung von Internet-Seiten. Eine Weiterentwicklung von HTML, die es zu anderen Auszeichnungssprachen kompatibel machen soll, wurde im Jahr 2000 als XHTML (Version 1.0) vom W3C ( W W W Konsortium ) vorgestellt. Es gibt einige Unterschiede. Zum Beispiel müssen in XHTML die Tags und Attribute klein geschrieben werden ( z.b.: <p> statt <P> ), während in HTML Groß- und Kleinschreibung erlaubt ist. 23

24 - Aufgabe: fiktiven Lebenslauf darstellen Aufgabe Erstellen Sie ein HTML-Dokument, das den Lebenslauf einer bekannten Person der Zeitgeschichte darstellt. Es spielt keine Rolle, ob der Inhalt wahr oder unwahr ist. Die Darstellung soll formal vollständig und ansprechend sein. Prüfen Sie mit Hilfe der Internetseite ob Ihr Produkt den W3C Regeln entspricht. Hinweis Mit einer Tabelle können Sie zwei Textspalten erzeugen: 24