prof. dr. phil. nat. habil. alfred h. gitter bioinformatik...

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 Transmission Control Protocol : paketweise Datenübertragung IP : Adressierung Internet Protocol : Adressierung der Rechner im Internet WWW : Dienst im Internet Internet = Hardware-Netz , WWW = vernetzte Software Domain : Namensadresse übersetzt die IP-Adresse in einen Namen, z.B. "fh-jena.de" Server : Dienstanbieter Dienstprogramm auf Host-Rechner (auch Server genannt) Client : Nutzerprogramm 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) http://selfhtml.teamone.de/ online - Referenz zum Nachschlagen (HTML und JavaScript)

4 Grundstruktur eines HTML-Programms <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <title>Titel des HTML-Dokuments</title> </head> <body> Text des</body>

HTML-Dokuments

</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.

p_html_1.doc Prof. Dr. Alfred H. Gitter (2003)

1

http://selfhtml.teamone.de/

In der vierten Zeile wird dem Browser mitgeteilt, welcher Zeichensatz verwendet wird. ISO-8859-1 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 http://validator.w3.org/ ) .

Programmbefehle = Tags beginnen mit < und enden mit > ; und werden groß oder klein ge-schrieben. 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 Tabellen-spalten gibt. Es gibt normale Datenelemente und (anders formatierte) Überschrifts-Daten-elemente. Normale Datenelemente beginnen mit <td> , gefolgt vom Inhalt des Datenele-ments (einem Text), und enden mit </td> . Entsprechend beginnen Überschrifts-Datenele-mente 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

http://validator.w3.org/

HTML

- Editor aufrufen, einfachen Text schreiben

Start – Programme – Zubehör - Editor


3

HTML

- Tags hinzufügen, als html-Datei speichern

Datei – Speichern unter ... – Dateiname: prog_01.html


4

HTML - html-Datei mit dem Browser aufrufen

Doppelklick auf prog_01.html


5

HTML

- html-Datei mit dem Browser bearbeiten

Ansicht – Quelltext

<B> fett </B> <BR> neue Zeile

<U> unterstrichen </U>

<I> kursiv </I>

Datei – Speichern


6

HTML

- Darstellung im Browser aktualisieren

Ansicht – Aktualisieren

Überschrift (H2)

neuer Text-Abschnitt (P)

„Tiere werden in einem hierarchisch

gegliederten System geordnet.“

Tabellen-Abschnitt (P)


7

HTML - Absatz- und Textformatierung: <H2> <P>

<H2> Überschrift 2. Ordnung </H2> <P> Abschnitt (engl.: paragraph) </P>


8

HTML - 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

HTML

- Absatz- und Textformatierung: <TABLE>

<TABLE> Tabelle </TABLE> <TR> Tabellenzeile (engl.: row) </TR>

<TH> hervorgehobenes Tabellenfeld </TH> <TD> normales Tabellenfeld (Daten) </TD>


10

HTML

- 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

HTML

- 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

HTML

- Links auf URLs und nummerierte Liste


13

HTML - 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) 17 ⋅ 106 Farben gif-Format (Grafic Interchange Format) 256 Farben, Animation


14

HTML

- Sonderzeichen ( z.B. ß = ß )

Umlaute ( ä = ä ), spezielle HTML-Zeichen ( < = < ) , griech. Buchstaben ( µ = μ ) und Symbole ( → = → )


15

HTML

- 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

HTML

- Dokument mit farbiger Tabelle


17

HTML

- 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-8859-1">

( ISO-8859-1 ist der normale Zeichensatz für Westeuropa. )


18

HTML

- Dokument nach W3C – Standards prüfen

Auf der Internetseite http://validator.w3.org/ kann man prü-

fen, ob ein HTML – Dokument den W3C - Regeln entspricht:

1. Dateiname eingeben

2. hier klicken


19


HTML

- 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

HTML

- 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

HTML

- 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> tiefgestellt </SUB>

<SUP> hochgestellt <SUP>


22

HTML

- 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 Unter-schiede. 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

HTML

- 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 http://validator.w3.org/ ,

ob Ihr Produkt den W3C – Regeln entspricht.

Hinweis

Mit einer Tabelle können Sie zwei Textspalten erzeugen:


24


prof. dr. phil. nat. habil. alfred h. gitter bioinformatik...

Documents