Allgemeines. TU Dresden, Einführung in HTML Folie 2

Transkript

1 Fakultät Elektrotechnik und Informationstechnik Einführung in HTML Dresden,

2 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 ( TU Dresden, Einführung in HTML Folie 2

3 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, Einführung in HTML Folie 3

4 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, Einführung in HTML Folie 4

5 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, Einführung in HTML Folie 5

6 Grundstruktur einer HTML-Datei <html> <head> <title>titel der Datei</title> <meta name="autor" content="...">  </head> <body> Eigentlicher Inhalt  </body> </html>  Kommentar werde nicht vom Browser dargestellt <style...> im HTML-Kopf wird in diesem Vortrag nicht eingegangen TU Dresden, Einführung in HTML Folie 6

7 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; TU Dresden, Einführung in HTML Folie 7

8 Inhaltliche Strukturen Überschriften <h1>überschrift erster Ordnung</h1> <h2>überschrift zweiter Ordnung</h2>... <h6>überschrift sechster Ordnung</h6> TU Dresden, Einführung in HTML Folie 8

9 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, Einführung in HTML Folie 9

10 Trennzeichen Speziell Trennung Zeilenumbruch Zeilenwechsel, wenn Fensterrand Silbentrennung <br> <wbr> Zeilenumbruch unterdrücken Zeilenwechsel unterdrücken <nobr> Hinweis: Zeilenumbrüche und Tabs im Quelltext werden ignoriert Zeilenbrüche werden nur durch Seiten- und Spaltenende oder den Befehl <br> erzwungen TU Dresden, Einführung in HTML Folie 10

11 Sonderzeichen Sonderzeichen ä Ä ö Ö ü Ü ß < > & " Entsprechende Codierung ä Ä ö Ö ü Ü ß < > & " TU Dresden, Einführung in HTML Folie 11

12 Grundlegende Formatierungen (1) Fett Kursiv Unterstrichen Durchgestrichen Größer als normal Kleiner als normal Hochgestellt Tiefgestellt <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> TU Dresden, Einführung in HTML Folie 12

13 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, Einführung in HTML Folie 13

14 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, Einführung in HTML Folie 14

15 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, Einführung in HTML Folie 15

16 Farben (2) Beispiele: Hintergrundfarbe Seite: <body bgcolor="blue"> Hintergrundfarbe Tabelle: <table bgcolor="blue"> Hintergrundfarbe Zelle: <td bgcolor="blue"> Textfarbe (global): <body text="red"> Trennlinie: <hr color="yellow"> Hintergrundfarbe mit HEX:<body color="#0000ff"> TU Dresden, Einführung in HTML Folie 16

17 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, Einführung in HTML Folie 17

18 Farbenbeispiel (2) TU Dresden, Einführung in HTML Folie 18

19 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, Einführung in HTML Folie 19

20 Pfad- und Dateiangaben Relative Links: datei.htm Datei im aktuellen Ordner datei.htm#stelle1 Datei im aktuellen Ordner mit Textstelle verzeichnis/datei.htm Datei in untergeordnetem Ordner../datei.htm Datei in übergeordnetem Ordner../verzeichnis/datei.htm Datei in anderem Verzeichnis Absolute Links: Datei im Internet Hinweis: Groß- und Kleinschreibung beachten!!! TU Dresden, Einführung in HTML Folie 20

21 Verknüpfungen (1) <a href="uri">verweistext</a> URI kann sein: Eine andere Datei datei.htm Eine andere Datei mit anderen Verzeichnis../verzeichnis/datei.htm Ein Anker in einer anderen Datei datei.htm#ankername Eine WWW-Adresse Textstellen in Datei festlegen: <a name="ankername"> adresse: <a WWW-Adresse: <a href=" ">Zur TU-Homepage</a> TU Dresden, Einführung in HTML Folie 21

22 Verknüpfungen (2) TU Dresden, Einführung in HTML Folie 22

23 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, Einführung in HTML Folie 23

24 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, Einführung in HTML Folie 24

25 Listen Aufzählungsliste: <ul> <li>listeneintrag</li> <li>listeneintrag</li> </ul> Nummerierte Liste: <ol> <li>listeneintrag</li> <li>listeneintrag</li> </ol> TU Dresden, Einführung in HTML Folie 25

26 Listen (2) Speziell Attribute von Listen: <ul type=typ> <li type=typ> TYP= circle disc square <ol type=typ> <li type=typ> TYP= A a I i <ol type=typ start=n> start=n für komplette Liste für aktuelles Element Kreis gefüllter Kreis Viereck 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 TU Dresden, Einführung in HTML Folie 26

27 Trennlinie <hr color="farbe" align="ausrichtung" size="hoehe" width="breite" noshade> FARBE: gewünschte Farbe der Linie AUSRICHTUNG: left,center,right HOEHE: Hoehe mit bekannten Masseinheiten BREITE: Breite mit bekannten Masseinheiten, meist % noshade: Keinen Schatten werfen Bsp:<hr color="#00ff00" align="left" size=3 width=20% noshade> TU Dresden, Einführung in HTML Folie 27

28 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, Einführung in HTML Folie 28

29 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, Einführung in HTML Folie 29

30 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 valign="top"> obenbündig für einzelne Zelle <td valign="bottom"> untenbündig <td valign="middle"> mittig (Default, daher unnötig) <td valign="baseline"> Ausrichtung der ersten Zeile aller Zellen an einer gemeinsamen Basislinie TU Dresden, Einführung in HTML Folie 30

31 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, Einführung in HTML Folie 31

32 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, Einführung in HTML Folie 32

33 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, Einführung in HTML Folie 33

34 Tabellen - Formatierung Weitere Attribute: Rahmen border="1" Zellenabstand: cellspacing="" Innenabstand-Abstand: cellpadding="" TU Dresden, Einführung in HTML Folie 34

35 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%>  <tr height="40px">  <td width="20%">  TU Dresden, Einführung in HTML Folie 35

36 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, Einführung in HTML Folie 36

37 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, Einführung in HTML Folie 37

38 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=" gi?p1_prod_version=shockwaveflash"> TU Dresden, Einführung in HTML Folie 38

39 Weitere Möglichkeiten Formulare CSS - Stylesheets Universalattribute Javascript Metaangaben TU Dresden, Einführung in HTML Folie 39

40 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, Einführung in HTML Folie 40

41 Programme WYSIWYG: Macromedia Dreamweaver MS Frontpage Mozilla Composer... Editoren Unterstützen durch Hervorhebung der HTML-Befehle Beispiele: Windows: Ulli Meybohms HTML Editor ( Linux: Quanta+ ( TU Dresden, Einführung in HTML Folie 41

42 TU Dresden, Einführung in HTML Folie 42

43 Weiterführende Informationen = Quellen SelfHTML: Wikipedia: TU Dresden, Einführung in HTML Folie 43