Das XML-basierte Gegenstück zu CSS ist XSL, das die Formatierung für XHTML-Dokumente festlegt.

Transkript

1 Auszeichnungssprachen: Einführung in HTML Auszeichnungssprachen Das Wort Auszeichnen stammt aus der traditionellen Typographie. Dabei wird das Erscheinungsbild eines Textes festgelegt. Auszeichnungssprachen setzen keinen Algorithmus um, sondern beschreiben ein Dokument. Beispiel: T E X Gegenbeispiel: Acrobat PDF Hypertext Mit Hypertext können mehrere Dokumente verbunden werden. Dabei bestimmt der Benutzer den Lesepfad und bewegt sich eigenständig in den zur Verfügung stehenden Informationen. Solchermaßen vernetzte Informationen entsprechen der vernetzten Wirklichkeit. Hypertextverweise (so genannte Links) dienen zur Navigation in diesen Dokumenten. Sie können auf andere Stellen im selben Dokument, auf andere Dokumente derselben Informationseinheit oder auf Dokumente anderer Informationseinheiten verweisen. HTML HTML (Hypertext Markup Language) hypertextfähige Auszeichnungssprache für Dokumente im Internet, normiert durch das W3-Consortium und damit herstellerunabhängig. HTML beschreibt nicht die physischen Formatierung eines Dokumentes (Fettdruck, Schriftgröße, Seitenlayout usw.), sondern seine logische bzw. syntaktische Struktur (Überschriften, Absätze, Tabellen usw.). Dabei ging es ursprünglich hauptsächlich um Texte und nur am Rande um Grafik. Der Nachfolger von HTML ist das XML-basierte XHTML. CSS CSS (Cascading Style Sheets) stellen eine Ergänzung von HTML zur Definition von Formateigenschaften dar. Sie werden in einem separaten Kapitel behandelt. Nachfolgend sind jedoch neben den HTML-Parametern zur Formatierung bereits jeweils auch die entsprechenden (moderneren und zukunftsträchtigeren) CSS-Formatangaben aufgeführt. Das XML-basierte Gegenstück zu CSS ist XSL, das die Formatierung für XHTML-Dokumente festlegt. Auszeichnungssprachen: Einführung in HTML Stand: Seite 1

2 Grundbedingungen mehrere Dateien mit je einer Seite (page) bilden eine Webseite (site) Dateiname: seite.html oder seite.htm Hauptdatei einer Site: in der Regel index.html (abhängig vom Server) Formatierungen werden durch Tags (Marken) in spitzen Klammern definiert, die sich öffnen (<tag>) und schließen (</tag>) können Tag-Paare können beliebig tief (sauber!) geschachtelt werden (<a><b></a></b> ist also verboten) die Werte von Parametern in Tags werden in Anführungszeichen geschrieben, wenn es sich nicht um Zahlen handelt Kommentare beginnen mit  Grundstruktur einer HTML-Seite <html> <head> <title>dies ist der Titel der Seite</title> </head> <body> Dies ist ein Text auf der Seite. </body> </html> Vor dem Head (Kopf) sollte definiert werden, ich welcher HTML-Version das Dokument verfasst ist. Für HTML 4.01 lautet diese Definition: <!DOCTYPE HMTL PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " Für HTML 5 lautet diese Definition: <!DOCTYPE html> Weitere Definitionen s.u. Nach der Definition kommt der Head (Kopf). Er enthält übergeordnete Seiteninformationen, der Body (Körper) den eigentlichen Seiteninhalt. Im Head können verschiedene Meta-Informationen zur Seite abgelegt werden, beispielsweise: <meta http-equiv="content-type" content="text/html; charset=iso " /> <meta name="keywords" content="vorlesung, Internet, Programmierung, FH Frankfurt, Fachhochschule Frankfurt" /> <meta name="description" content="" /> <meta name="revisit-after" content="14 days" /> <meta name="author" content="andreas Friedel" /> <meta http-equiv="content-language" content="de" /> <meta http-equiv="reply-to" content=vorlesung@mainis.de /> <meta http-equiv="copyright" content="gerrit Wiegand, Andreas Friedel 2014" /> Auszeichnungssprachen: Einführung in HTML Stand: Seite 2

3 Textformatierungen <b>text</b> schreibt fett (bold) CSS: <span style="font-weight:bold;">text</span> <i>text</i> schreibt kursiv (italic) CSS: <span style="font-style:italic;">text</span> <sub>text</sub> schreibt tiefgestellt CSS: Kein Pendant. <u>text</u> schreibt unterstrichen CSS: <span style="text-decoration:underline;">text</span> <strong>text</strong> schreibt hervorgehoben CSS: Wie bei fett. Weitere Textformatierungen sind ab HTML 5 nur noch mit CSS möglich! Das bis HTML 4.01 vorhandene Tag <font> wird nicht mehr unterstützt. Schriftgröße mit CSS: Mehrere Möglichkeiten: Absolute Angaben in Pixeln (px), Punkten (pt) etc. (nicht empfehlenswert, da sie dem Benutzer keinen Einfluss auf die Schriftgröße durch die Browser-Einstellungen lassen): <span style="font-size:12px;"> Absolute Angaben mit Schlüsselwörtern: <span style="font-size:large;"> (auch: xx-small, x-small, small, medium, x-large, xx-large) Relative Angaben in Prozent zur Schriftgröße des Elternelements (z.b. der Basisschrift aus dem Body-Tag): <span style="font-size:150%;"> Relative Angaben in em zur Schriftgröße des Elternelements, das entspricht den Prozentangaben/100 (empfohlene Einheit): <span style="font-size:1.5em;"> Relative Angaben mit Schlüsselwörtern zur Schriftgröße des Elternelements: <span style="font-size:larger;"> (auch: smaller) Schriftart mit CSS: <span style="font-family:'arial','helvetica';"> Schriftfarbe mit CSS: <span style="color:#ff0000"> Dabei sind die Farbwerte als hexadezimaler RGB-Wert angegeben (z.b. FFFF00 = [rot: 255, grün: 255, blau: 0] = gelb). Die 16 Farben der VGA-Palette können auch über ihre Namen angesprochen werden: black, gray, maroon, red, green, lime, olive, yellow, navy, blue, purple, fuchsia, teal, aqua, silver und white, also z.b. bgcolor= silver. Daneben existieren zusätzlich die so genannten Netscape-Farbnamen. Auszeichnungssprachen: Einführung in HTML Stand: Seite 3

4 Besondere Zeichen (Entities): ä ä ö ö ü ü ß ß Ä Ä Ö Ö Ü Ü (festes Leerzeichen) Auszeichnungssprachen: Einführung in HTML Stand: Seite 4

5 Absatzformatierung <br /> <p>text</p> <hr /> <h1>überschrift</h1>... <h6>überschrift</h6> erzeugt einen Zeilenumbruch erzeugt einen Absatz fügt eine Trennlinie ein schreibt eine große Überschrift schreibt eine kleine Überschrift <ol> <li>punkt 1</li> <li>punkt 2</li> </ol> erstellt eine nummerierte Liste (ordered list) <ul> <li>punkt 1</li> <li>punkt 2</li> </ul> erstellt eine Liste mit Aufzählungszeichen (unordered list) <dl> <dt>punkt 1</dt> <dd>erklärung 1</dd> <dt>punkt 2</dt> <dd>erklärung 2</dd> </dl> erstellt eine Definitionsliste Links (Verweise) <a href="ziel">text</a> fügt einen Link ein (Anker - anchor) <a href="#start"> Link innerhalb der Seite zur Sprungmarke <a name="start">text</a> <a href="index.html"> lokaler Link (auch mit Unterordnen wie "seiten/index.html" oder "../index.html" in Unix-Schreibweise) <a href=" externer Link (unbedingt mit " <a href="mailto:name@fh-frankfurt.de"> Link auf eine -Adresse (öffnet das Mail- Programm) <a href="index.html" target="_blank"> öffnet einen Link in einem neuen Browser- Fenster Auszeichnungssprachen: Einführung in HTML Stand: Seite 5

6 Tabellen <table> <tr>  <th>spaltenüberschrift 1</th> <th>spaltenüberschrift 2</th> </tr> <tr>  <td>spalte 1, Zeile 2</td> <td>spalte 2, Zeile 2</td> </tr> <tr>  <td>spalte 1, Zeile 3</td> <td>spalte 2, Zeile 3</td> </tr> <tr>... </tr> </table> Spaltenüberschrift 1 Spaltenüberschrift 2 Spalte 1, Zeile 2 Spalte 2, Zeile 2 Spalte 1, Zeile 3 Spalte 2, Zeile 3 Formatierungsbeispiele (fast alle Table-Attribute sind in HTML 5 nicht mehr gültig! Dann nur noch mit CSS möglich.): <table width="50%"> erzeugt eine Tabelle mit einer Breite von 50% des Browserfensters CSS: <table style="width:50%;"> <td width=100> erzeugt eine Spalte mit 100 Pixeln Breite CSS: <td style="width:100px; "> <table border=1> setzt Gitternetzlinien (0 = kein Gitternetz) CSS: Kein direktes Pendant: Der <table> müssen die CSS-Eigenschaften bordercollapse:collapse;border-style:solid; zugewiesen sein, dann können alle Zellen im <td> die Eigenschaft border-width:1px; bekommen. <td bgcolor="#00ff00"> setzt die Zellenfarbe CSS: <td style="background-color:#00ff00;"> <td colspan=2> <td rowspan=2> verbindet zwei Zellen einer Zeile verbindet zwei Zellen einer Spalte <td align="center" valign="middle"> zentriert den Zelleninhalt horizontal und vertikal CSS: <td style="text-align:center;vertical-align:middle"> Auszeichnungssprachen: Einführung in HTML Stand: Seite 6

7 <td align="left" valign="top"> setzt den Zelleninhalt nach links oben CSS: <td style="text-align:left;vertical-align:top"> <td align="right" valign="bottom"> setzt den Zelleninhalt nach recht unten CSS: <td style="text-align:right;vertical-align:bottom"> Tabellen können geschachtelt werden. In reinem HTML ist weder auf prozentuale noch absolute Spalten- und Tabellenbreiten wirklich Verlass! CSS: In CSS kann auf die Zellenbreite bei übergroßen Inhalten durch die Eigenschaft overflow Einfluss genommen werden: - visible : Unterschiedliche Behandlung in den Browsern: Im Internet-Explorer werden die Zellen automatisch vergrößert. Andere Browser lassen die Zellgröße unverändert, zeigen den Inhalt aber trotzdem an somit ist der Inhalt größer als der Rahmen und kann andere Elemente überlagern. - hidden : Der übergroße Inhalt wird am Zellenrand abgeschnitten - scroll : Der übergroße Inhalt wird am Zellenrand abgeschnitten, aber es werden Scrollleisten angeboten Bei prozentualen Breiten bezieht sich der Prozentwert bei jeder Spalte auf den jeweils noch freien Teil des Browserfensters. Beispiel: Die Spalten einer Tabelle mit gewünschten Spaltenbreiten von 50%, 25% und 25% des Browserfensters müssen definiert werden als 50%, 50% und 100%! Auszeichnungssprachen: Einführung in HTML Stand: Seite 7

8 Grafiken GIF JPG PNG bis zu 256 Farben 16,7 Mio. Farben bis zu 16,7 Mio. Farben verlustfreie Komprimierung verlustbehaftete Komprimierung verlustfreie Komprimierung (einstellbar), dafür sehr hoher Komprimierungsgrad eine transparente Farbe keine Transparenz mehrere Transparenzstufen Animation möglich keine Animation keine Animation progressive Darstellung progressive Darstellung progressive Darstellung keine Zusatzinformationen Zusatzinformation: DPI Zusatzinformationen: Titel, Autor, Gammawert usw. wird nur von neueren Browsern und Grafikprogrammen unterstützt (und oft nicht vollständig) ideal für Grafiken mit wenigen Farben ideal für Fotos ideal für Grafiken mit wenigen Farben, mit Einschränkungen auch für Fotos <img src="bild.gif"> fügt ein Bild ein Formatierungsbeispiele: <img src="bild.gif" border=1> setzt einen Rand um das Bild (0 = keiner) CSS: <img src="bild.gif" style="border-style:solid;border-width:1px;"> <img src="bild.gif" width=100 height=50> definiert die Größe des Bildes CSS: <img src="bild.gif" style="width:100px;height:50px;"> <img src="bild.gif" hspace=5 vspace=5> setzt einen horizontalen und vertikalen Abstand CSS: <img src="bild.gif" style="margin-left:5px;margin-right:5px; margin-top:5px;margin-bottom:5px;"> <img src="bild.gif" align="left"> <img src="bild.gif" align="right"> <img src="bild.gif" alt="hinweis"> <img src="bild.gif" usemap="#map"> setzt das Bild nach links setzt das Bild nach rechts definiert einen Alternativ- bzw. Hinttext benutzt eine Image-Map zur Unterteilung einer Grafik in mehrere Bereiche: <map name="map"><area > </map>) <link rel="shortcut ICON" href="favicon.ico"> setzt ein Icon für die Seite, das vom Browser in der Adresszeile und in den Favoriten / Lesezeichen angezeigt wird (im ico-format) Auszeichnungssprachen: Einführung in HTML Stand: Seite 8

9 Formulare Formulare bieten dem Benutzer die Möglichkeit Daten einzugeben. Eine Formulardefinition sieht beispielsweise folgendermaßen aus: <form method="post" enctype="text/plain"> Vorname:  <input type="text" name="vorname" size=40 maxlength=40 value="bitte eingeben" /><br /> Nachname: <input type="text" name="nachname" size=40 maxlength=40 value="bitte eingeben" /><br /> Passwort: <input type="password" name="passwort" size=20 maxlength=20 /><br /> Student/in:  <input type="checkbox" name="student" checked /><br /> Geschlecht:  <input type="radio" name="geschlecht" value="maennlich" /> männlich <input type="radio" name="geschlecht" value="weiblich" /> weiblich<br /> Alter:  <select name="alter"> <option selected value="unbekannt">bitte auswählen</option> <option value="bis20">0-20</option> <option value="bis30">21-30</option> <option value="bis100">31-100</option> </select><br /> Bemerkungen:  <textarea name="bemerkungen">ihre Bemerkungen</textarea><br />  <input type="submit" value="abschicken" /> <input type="reset" value="löschen" /> </form> Das Formular sieht im Browser ungefähr so aus (ohne weitere Formatierung oder Ausrichtung): Beim Klick auf Abschicken wird eine erzeugt, in der die eingegebenen Werte den Variablennamen zugeordnet sind. Beispiel: -Text: vorname=andreas nachname=friedel passwort=geheim student=on geschlecht=maennlich alter=bis30 bemerkungen=keine Auszeichnungssprachen: Einführung in HTML Stand: Seite 9

10 Formular-Erweiterungen in HTML5 Ab HTML5 wurden die Formulare sehr stark erweitert. Es können einzugebende Datentypen und Werteprüfungen angegeben werden. Achtung: Insbesondere die Werteprüfungen müssen mit Vorsicht eingesetzt werden! Da die Prüfung der Formulare clientseitig stattfindet und somit ausgeschaltet oder manipuliert werden können, kann man sich bei der Übergabe bspw. an ein Webserver-Programm nicht darauf verlassen! Die Werte müssen auf jeden Fall auch noch mal clientseitig überprüft werden! Neue Input-Types mit Datentypen und Eingabeprüfung: <input type=" " /> Der Browser prüft, ob die Eingabe eine -Adresse ist <input type="url" /> Der Browser prüft, ob die Eingabe eine URL ist (Vorsicht: die Adresse muss mit o.ä. eingegeben werden!) <input type="number" /> Der Browser prüft, ob die Eingabe numerisch ist (auf Wunsch mit Werteangaben, z.b. min="1" max= 5 ) <input type="range" /> Der Browser stellt einen Slider zur bereit (mit Werteangaben, z.b. min="1" max= 5 ) <input type="date" /> Der Browser stellt eine Kalender-Auswahl bereit <input type="color" /> Der Browser stellt eine Farbauswal-Box bereit <input type=" " required /> Der Browser prüft vor dem Absenden, ob dieses Pflichtfeld ausgefüllt wurde und viele andere mehr Versionen HTML wurde seit seiner Entstehung stetig weiterentwickelt. Die erste ernst zu nehmende Version war 3.2, die am meisten verbreitete Version ist 4.01, aktuell ist 5.0. Da sich die Versionen im Detail stark voneinander unterscheiden, ist es sinnvoll, die jeweils benutzte Version anzugeben, um Probleme bei der Interpretation und Darstellung zu vermeiden. Die Angabe der Version erfolgt über Verweise auf eine DTD (Document Type Definition in XML), in der die jeweils gültigen Sprachbestandteile definiert sind. HTML 5 hat nur noch einen sehr einfachen DocType: <!DOCTYPE html> Die HTML-Version 4.01 in der nicht so strengen und damit abwärtskompatiblen Variante wird durch folgende DTD beschrieben: <!DOCTYPE HMTL PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " Die strikte (also nicht abwärtskompatibel) HTML 4.01-Definition lautet so: <!DOCTYPE HMTL PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" " Die xhtml-version 1.0 wird wie folgt beschrieben: <!DOCTYPE HMTL PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " bzw. in der strikten Variante: <!DOCTYPE HMTL PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " Auszeichnungssprachen: Einführung in HTML Stand: Seite 10