Einführung in HTML - Fakultät Elektrotechnik und Informationstechnik
Werbung
Fakultät Elektrotechnik und Informationstechnik
Einführung in HTML
Dresden, 24.05.2006
Allgemeines
•
•
•
•
HTML = Hypertext Markup Language
1991 am CERN in Genf entwickelt ( Tim Berners-Lee )
Ziel:
• wissenschaftliche Dokumente online sichtbar machen
• einfache Textformatierung
• Einbinden von Grafik
ab 1993 explosionsartiges Wachstum
Standard in der Hand des W3Consortiums (http://www.w3c.org)
TU Dresden, 24.05.2006
Einführung in HTML
Folie 2
Eigenschaften von HTML
HTML ist eine sogenannte Auszeichnungssprache (Markup Language):
•
•
logische Bestandteile eines Dokuments werden beschrieben und nicht im
üblichen Sinne programmiert
HTML enthält daher Befehle zum Markieren typischer Elemente eines
Dokuments, wie Überschriften, Textabsätze, Listen, Tabellen oder
Grafikreferenzen
TU Dresden, 24.05.2006
Einführung in HTML
Folie 3
Konventionen
•
•
•
•
im Hinblick auf Server-Rechnern
– Groß/Kleinschreibungsregeln des Servers beachten
im Hinblick auf Kompatibilität
– keine Sonderzeichen und Umlaute
– u. U. kurze Dateinamen verwenden
Dateiendungen
– .html oder .htm
Default-Dateien bei WWW-Servern
– index.htm
– index.html
– start.htm
– ...
TU Dresden, 24.05.2006
Einführung in HTML
Folie 4
Aufbau eines HTML-Befehls
<TAG ATTRIBUT="WERT">Text</TAG>
Beispiele:
<B>Fetter Text</B>
<DIV ALIGN="center">Dies ist zentriert</DIV>
<IMG SRC="testbild.gif" WIDTH="4" HEIGHT="3">
TU Dresden, 24.05.2006
Einführung in HTML
Folie 5
Grundstruktur einer HTML-Datei
<html>
<head>
<title>Titel der Datei</title>
<meta name="autor" content="...">
<!-- STYLE ... -->
</head>
<body>
Eigentlicher Inhalt
<!--Kommentar-->
</body>
</html>
•
•
<!-- Kommentar --> Kommentar werde nicht vom Browser dargestellt
<style...> im HTML-Kopf wird in diesem Vortrag nicht eingegangen
TU Dresden, 24.05.2006
Einführung in HTML
Folie 6
META-Informationen
•
•
•
•
für den Leser nicht direkt sichtbar
wird von Suchmaschinen teilweise verwendet
hier nur die wichtigsten
spezielle für Suchmaschinen, wie Google möglich
Autor:
<meta name="author" content="Herr Mustermann">
Stichwörter:
<meta name="keywords" content="HTML,IFA,Mustermann">
Beschreibung:
<meta name="description" content="Beschreibung des Inhaltes">
Seite neuladen:
<meta http-equiv="refresh" content="n;http://www.tu-dresden.de">
TU Dresden, 24.05.2006
Einführung in HTML
Folie 7
Inhaltliche Strukturen
Überschriften
<h1>Überschrift erster Ordnung</h1>
<h2>Überschrift zweiter Ordnung</h2>
...
<h6>Überschrift sechster Ordnung</h6>
TU Dresden, 24.05.2006
Einführung in HTML
Folie 8
Inhaltliche Strukturen
Textblöcke
<div>Eine Menge Text mit gleichen Eigenschaften, z.B. Ausrichtung, allerdings
kein Absatz</div>
Absätze
<p>Hier beginnt ein Absatz, und hier ist er zu Ende.</p>
<p>Hier beginnt ein neuer Absatz, und hier ist er zu Ende.</p>
TU Dresden, 24.05.2006
Einführung in HTML
Folie 9
Trennzeichen
Speziell Trennung
Zeilenumbruch
Zeilenwechsel, wenn Fensterrand
Silbentrennung
<br>
<wbr>
&shy;
Zeilenumbruch unterdrücken
Zeilenwechsel unterdrücken
<nobr>
&nbsp;
Hinweis:
• Zeilenumbrüche und Tabs im Quelltext werden ignoriert
• Zeilenbrüche werden nur durch Seiten- und Spaltenende oder den Befehl
<br> erzwungen
TU Dresden, 24.05.2006
Einführung in HTML
Folie 10
Sonderzeichen
Sonderzeichen
Entsprechende Codierung
ä
&auml;
Ä
&Auml;
ö
&ouml;
Ö
&Ouml;
ü
&uuml;
Ü
&Uuml;
ß
&szlig;
<
&lt;
>
&gt;
&
&amp;
"
&quot;
TU Dresden, 24.05.2006
Einführung in HTML
Folie 11
Grundlegende Formatierungen (1)
Fett
Kursiv
Unterstrichen
Durchgestrichen
Größer als normal
Kleiner als normal
Hochgestellt
Tiefgestellt
TU Dresden, 24.05.2006
<b>fett</b>
<i>kursiv</i>
<u>unterstrichen</u>
<s>durchgestrichen</s>
<big>größer als normal</big>
<small>kleiner als normal</small>
<sup>hochgestellt</sup>
<sub>tiefgestellt</sub>
Einführung in HTML
Folie 12
Grundlegende Formatierungen (2)
Schriftgröße
Schriftfarbe
Schriftart
<font size="Größe">Text</font>
<font color="#XXXXXX">Text</font>
<font face="Schriftart">Text</font>
Hinweis:
• von sehr speziellen Schriftarten absehen
– nicht auf jedem Computer installiert
– verschiedenes oder fehlerhaftes Aussehen
TU Dresden, 24.05.2006
Einführung in HTML
Folie 13
Quelltexte/Vorformatierter Text
<pre>
for(i=1;i<10;i++) {
a+=i;
}
</pre>
•
•
für Texte mit fester Struktur z.B. Quelltexte
Zeilenumbrüche und Tabs bleiben erhalten
TU Dresden, 24.05.2006
Einführung in HTML
Folie 14
Farben (1)
•
•
•
•
•
•
möglich sind Hintergrund-,Schrift-,Rahmenfarben
Farbattribute von <body>
– bgcolor=: Hintergrundfarbe
– text=: Definition der Farbe für den Text
– link=: Definition der Farbe für Verweise auf eine noch zu besuchende
Datei
– vlink=: Def. der Farbe für Verweise auf eine besuchte Datei
– alink=: Def. Der Farbe für Verweise, die der Anwender gerade anklickt
Farbattribute von <font>
– color=: Textfarbe
Hexdezimalzahlen der Rot-Grün-Blau-Anteile (#RRGGBB)
#000000=schwarz bis #ffffff = weiß
alternativ sind auch Farbnamen definiert (z.B. red, green, lime, white, black,
...)
TU Dresden, 24.05.2006
Einführung in HTML
Folie 15
Farben (2)
Beispiele:
Hintergrundfarbe Seite:
Hintergrundfarbe Tabelle:
Hintergrundfarbe Zelle:
Textfarbe (global):
Trennlinie:
<body bgcolor="blue">
<table bgcolor="blue">
<td bgcolor="blue">
<body text="red">
<hr color="yellow">
Hintergrundfarbe mit HEX:<body color="#0000FF">
TU Dresden, 24.05.2006
Einführung in HTML
Folie 16
Farbenbeispiel (1)
<html>
<head>
<title>Farbbeispiel</title>
</head>
<body bgcolor="black" text="red">
<p>Hier beginnt ein Absatz, und hier ist er zu Ende.</p>
<font color="yellow" face="arial">
<p>Hier beginnt ein neuer Absatz, und hier ist er zu Ende.</p>
<br>
<br>
<hr color="#00FF00">
</font>
</body>
</html>
TU Dresden, 24.05.2006
Einführung in HTML
Folie 17
Farbenbeispiel (2)
TU Dresden, 24.05.2006
Einführung in HTML
Folie 18
Ausrichtung
<p align="Ausrichtung">Text</p>
left = linksbündig
center = zentriert
right = rechtsbündig
justify = Blocksatz
Beispiel:
<p align="right">rechtsbündiger Text <br>
der auch auf einer neuen Zeile so bleibt bis das EndTag kommt</p>
TU Dresden, 24.05.2006
Einführung in HTML
Folie 19
Pfad- und Dateiangaben
Relative Links:
• datei.htm
• datei.htm#Stelle1
• verzeichnis/datei.htm
• ../datei.htm
• ../verzeichnis/datei.htm
Datei
Datei
Datei
Datei
Datei
Absolute Links:
• http://www.gmx.de/datei.htm
Datei im Internet
im aktuellen Ordner
im aktuellen Ordner mit Textstelle
in untergeordnetem Ordner
in übergeordnetem Ordner
in anderem Verzeichnis
Hinweis:
• Groß- und Kleinschreibung beachten !!!
TU Dresden, 24.05.2006
Einführung in HTML
Folie 20
Verknüpfungen (1)
<a href="URI">Verweistext</a>
URI kann sein:
• Eine andere Datei
• Eine andere Datei mit anderen Verzeichnis
• Ein Anker in einer anderen Datei
• Eine WWW-Adresse
datei.htm
../verzeichnis/datei.htm
datei.htm#Ankername
http://www.tu-dresden.de
Textstellen in Datei festlegen:
<a name="Ankername">
Emailadresse:
<a href="mailto:[email protected]">Email</a>
WWW-Adresse:
<a href=" http://www.tu-dresden.de ">Zur TU-Homepage</a>
TU Dresden, 24.05.2006
Einführung in HTML
Folie 21
Verknüpfungen (2)
TU Dresden, 24.05.2006
Einführung in HTML
Folie 22
Grafiken
<img src="" alt="">
•
•
•
•
•
•
geeignetes Format verwenden
– jpg: Fotos, viele Farben
– gif: Grafiken, Skizzen
Dateigröße beachten (lange Ladezeiten !)
kein End-Tag erforderlich (kein </img>)
alternativ Text verwenden, für sehr langsame Internetzugänge und Blinde
können mit Größenangaben skaliert werden (width, height)
können mit <a href=""><img src=""></a> als Verknüpfung verwendet
werden
Beispiel:
<img src="bild.jpg" alt="Alternativer Text" width="100" height="200">
TU Dresden, 24.05.2006
Einführung in HTML
Folie 23
Grafiken - Ausrichtung
align="top"
align="middle"
align="bottom"
Text obenbündig zur Grafik
Text mittig zur Grafik
Text untenbündig zur Grafik
Beispiel:
<img src="bild.jpg" alt="Bildtitel" align="middle">Text
TU Dresden, 24.05.2006
Einführung in HTML
Folie 24
Listen
Aufzählungsliste:
<ul>
<li>Listeneintrag</li>
<li>Listeneintrag</li>
</ul>
Nummerierte Liste:
<ol>
<li>Listeneintrag</li>
<li>Listeneintrag</li>
</ol>
TU Dresden, 24.05.2006
Einführung in HTML
Folie 25
Listen (2)
Speziell Attribute von Listen:
<ul type=TYP>
für komplette Liste
<li type=TYP>
für aktuelles Element
TYP= circle
Kreis
disc
gefüllter Kreis
square
Viereck
<ol type=TYP>
<li type=TYP>
TYP= A
a
I
i
<ol type=TYP start=N>
start=N
TU Dresden, 24.05.2006
für komplette Liste
für aktuelles Element
A,B,C,...
a,b,c,...
I,II,III,IV,...
i,ii,iii,iv,...
bei N beginnen zu zählen
Einführung in HTML
Folie 26
Trennlinie
<hr color="FARBE" align="AUSRICHTUNG" size="HOEHE" width="BREITE"
noshade>
FARBE:
AUSRICHTUNG:
HOEHE:
BREITE:
noshade:
gewünschte Farbe der Linie
left,center,right
Hoehe mit bekannten Masseinheiten
Breite mit bekannten Masseinheiten, meist %
Keinen Schatten werfen
Bsp:<hr color="#00FF00"
align="left"
size=3
width=20%
noshade>
TU Dresden, 24.05.2006
Einführung in HTML
Folie 27
Tabellen – Grundstruktur
<table>
<tr>
<td>links oben</td>
<td>rechts oben</td>
</tr>
<tr>
<td>links unten</td>
<td>rechts unten</td>
</tr>
</table>
•
für Kopfzeilen <th> anstatt <tr>
TU Dresden, 24.05.2006
Einführung in HTML
Folie 28
Tabellen - Breiten und Höhen
Lokale Breiten und Höhen
width=""
– bestimmt Spaltenbreite
(Bsp:<td width=“100“>)
height="" – bestimmt Spaltenhöhe
(Bsp: <tr height=“100“>)
Beispiel:
<table>
<tr height="100">
<td width="100">links oben</td>
<td width="100">rechts oben</td>
</tr><tr height="100">
<td width="100">links unten</td>
<td width="100">rechts unten</td>
</tr>
</table>
Hinweis:
•
Die Gesamtbreite der Tabelle ergibt sich aus
den absoluten Breiten der Spalten (hier: 200)
TU Dresden, 24.05.2006
Einführung in HTML
Folie 29
Ausrichtung des Inhalts in den Zellen
Horizontal (align)
<td align="left">
<td align="right">
<td align="center">
<td align="justify">
linksbündig (Default, daher unnötig)
rechtsbündig
zentriert
Blocksatz
Vertikal (valign)
<tr valign="top">
obenbündig für gesamte Zeile
<td
<td
<td
<td
valign="top">
valign="bottom">
valign="middle">
valign="baseline">
TU Dresden, 24.05.2006
obenbündig für einzelne Zelle
untenbündig
mittig
(Default, daher unnötig)
Ausrichtung der ersten Zeile aller Zellen an einer
gemeinsamen Basislinie
Einführung in HTML
Folie 30
Tabellen - Aufbau (2)
Spaltendefinition am Beginn der Tabelle
<table>
<colgroup>
<col width=20%> %erste Spalte
<col width=70%> %zweite Spalte
<col width=10%> %dritte Spalte
</colgroup>
...
•
bewirkt schnelleren Seitenaufbau
TU Dresden, 24.05.2006
Einführung in HTML
Folie 31
Tabelle - Aufbau(3)
Spalten miteinander verbinden
<table>
<tr>
<td>1.Spalte</td><td>2.Spalte</td><td>3.Spalte</td>
</tr>
<tr>
<td colspan=3>3 Spalten miteinander verbunden</td>
</tr>
</table>
TU Dresden, 24.05.2006
Einführung in HTML
Folie 32
Tabelle - Aufbau(4)
Zeilen miteinander verbinden
<table>
<tr>
<td rowspan=2>1.Spalte</td>
<td>2.Spalte</td>
<td>3.Spalte</td>
</tr>
<tr>
<td>2.Spalte</td>
<td>3.Spalte</td>
</tr>
</table>
•
keine 1.Spalte bei zweiter Zeile !
TU Dresden, 24.05.2006
Einführung in HTML
Folie 33
Tabellen - Formatierung
Weitere Attribute:
Rahmen
border="1"
Zellenabstand:
cellspacing=""
Innenabstand-Abstand:
cellpadding=""
TU Dresden, 24.05.2006
Einführung in HTML
Folie 34
Numerische Angaben in HTML
•
•
•
verschiedene Größenangaben in HTML möglich
absolute Angaben:
– px: Pixel (wird verwendet, wenn keine Angabe z.B. width="200")
– pt: Points - übliche Einheit für Schriftgrößen
– cm, mm, in: bekannte Maßeinheiten cm, mm, inch
relative Angaben:
– %: Anteil gegenüber dem übergeordneten Objekt (Seite, Tabelle)
– em: bezogen auf die Schriftgröße des Elements
– ex: bezogen auf die Höhe des Kleinbuchstaben x in diesem Element
Beispiel:
<table width=80%> <!-- Tabelle auf 80% der Seite -->
<tr height="40px"> <!-- Höhe der Zeile 40px -->
<td width="20%"> <!-- Spalte 20% der Breite Tabelle -->
TU Dresden, 24.05.2006
Einführung in HTML
Folie 35
Verknüpfungen (2)
<a href="URI" target="Zielfenster">Verweistext</a>
Neues Fenster:
target=_blank
Gleiches Fenster:
target=_self
Aktuelles Frameset:
target=_parent
Alle Framesets:
target=_top
Bestimmtes Frame:
target="name"
TU Dresden, 24.05.2006
Einführung in HTML
Folie 36
Multimedia-Inhalte (1)
•
•
•
•
Einbinden von Java-Applet, Flash-Animationen und Videos und anderen
Plugins möglich
können nicht von jedem Browser gestartet werden !
können mit speziellen Parametern gestartet werden
immer alternativen Inhalt definieren !
TU Dresden, 24.05.2006
Einführung in HTML
Folie 37
Multimedia-Inhalte (2)
Beispiel Java-Applet:
<applet code="HexColor.class" width="640" height="200">
<param name="TestText" value="SELFHTML">
</applet>
Beispiel Musik:
<embed src="yippee.wav" width="140" height="60">
Beispiel Flash mit alternativem Inhalt:
<embed src="nibbles.swf" quality="high" scale="exactfit" menu="false"
bgcolor="#000080" width="600" height="400" swLiveConnect="false"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/shockwave/download/download.c
gi?P1_Prod_Version=ShockwaveFlash">
TU Dresden, 24.05.2006
Einführung in HTML
Folie 38
Weitere Möglichkeiten
•
•
•
•
•
Formulare
CSS - Stylesheets
Universalattribute
Javascript
Metaangaben
TU Dresden, 24.05.2006
Einführung in HTML
Folie 39
Guter Stil
•
•
•
•
•
•
•
•
•
Nicht für bestimmte Browser schreiben
Tags nicht zweckentfremden
Regeln für Sonderzeichen beachten
Start- und Endtags verwenden
Aussagekräftige Verweistexte verwenden
Graphiken sinnvoll einsetzen
Nicht für bestimmte Monitorauflösungen schreiben
WYSIWYG nur für komplexe Seiten verwenden
Blinken und viele Animationen vermeiden
TU Dresden, 24.05.2006
Einführung in HTML
Folie 40
Programme
WYSIWYG:
• Macromedia Dreamweaver
• MS Frontpage
• Mozilla Composer
• ...
Editoren
• Unterstützen durch Hervorhebung der HTML-Befehle
• Beispiele:
– Windows: Ulli Meybohms HTML Editor (http://www.qhaut.de/)
– Linux: Quanta+ (http://quanta.kdewebdev.org/)
TU Dresden, 24.05.2006
Einführung in HTML
Folie 41
TU Dresden, 24.05.2006
Einführung in HTML
Folie 42
Weiterführende Informationen = Quellen
•
•
SelfHTML: http://de.selfhtml.org/
Wikipedia: http://de.wikipedia.org/wiki/HTML
TU Dresden, 24.05.2006
Einführung in HTML
Folie 43