Elemente für Webseiten. Überschriften

Transkript

1 Elemente für Webseiten Es gibt zahlreiche Elemente und Attribute zum Aufbau von Webseiten: Schrifttypen Farbe Listen Tabellen Hyperlinks Bilder Rahmen. Helmar Burkhart Werkzeuge der Informatik Lektion 8: Internet und Anwendungen 8-63 Überschriften Es gibt 6 unterschiedliche Grössen <h1>...<h6>. Ausrichtungen des Texts mittels align <h1 align = left> <h2 align = center> <h3 align = right> Helmar Burkhart Werkzeuge der Informatik Lektion 8: Internet und Anwendungen 8-64

2 Absatzformatierung Der Fliesstext wird vom Browser fortlaufend dargestellt. <p>...</p> definiert einen neuen Paragraph. </p> entfällt häufig; Verstoss gegen SGML-Konformität. Paragraphen können ausgerichtet werden mittels align. <br> ist ein manueller Zeilenumbruch. <pre>...</pre> definiert Text der unverändert dargestellt wird. Helmar Burkhart Werkzeuge der Informatik Lektion 8: Internet und Anwendungen 8-65 Beispiel: Absatzformatierung <H1>Beispiele für Absätze</H1> Nach der siebten Vorlesung kommt die<p>achte Vorlesung und dann <p>die neunte<br> und dann ist Weihnachten. Helmar Burkhart Werkzeuge der Informatik Lektion 8: Internet und Anwendungen 8-66

3 Inhaltsbezogene Direktiven Inhaltsbezogene Direktiven definieren das Aussehen eines Texts gemäss Festlegung einer Bedeutung. Bsp. "Es ist etwas wichtig!" <em>...</em> definiert hervorgehobenen Text. <strong>...</strong> definiert stark hervor gehobenen Text. Wie die Darstellung genau erfolgt, ist browserabhängig. Beispiel Netscape: Helmar Burkhart Werkzeuge der Informatik Lektion 8: Internet und Anwendungen 8-67 Schriftdirektiven Mittels dieser Direktiven wird eine direkte Anweisung für die Darstellung vorgenommen. <i> definiert Kursivschrift. <b> definiert Fettdruck. <tt> definiert einen Font mit fester Breite. <small> verkleinert das Schriftbild. <big> vergrössert das Schriftbild. Helmar Burkhart Werkzeuge der Informatik Lektion 8: Internet und Anwendungen 8-68

4 Schriftdirektiven: Beispiele Dieser <small>text <small>wird <small>immer <small>kleiner. </small></small></small></small> <p> Dieser <big>text <big>wird <big>immer <big>grösser. </big></big></big></big> Helmar Burkhart Werkzeuge der Informatik Lektion 8: Internet und Anwendungen 8-69 Weitere Darstellungs-Direktiven _... definiert tiefgestellte Schrift. ^... definiert hochgestellte Schrift. <big>die magische Zahl µ₀ = ^2.7812</big> Helmar Burkhart Werkzeuge der Informatik Lektion 8: Internet und Anwendungen 8-70

5 Listen Listen sind vom Fliesstext getrennte Absätze für Aufzählungen: Bulletlisten sind unnummeriert und werden durch <ul>... </ul> definiert. Nummerierte Listen werden mittels Ziffern oder Buchstaben gekennzeichnet und sind durch <ol>... </ol> definiert. Bei beiden Listentypen werden die Einträge mittels <li>... </li> definiert. Listen dürfen geschachtelt sein. Helmar Burkhart Werkzeuge der Informatik Lektion 8: Internet und Anwendungen 8-71 Listenbeispiele <ul> <li>elefanten</li> <li>elefanten</li> <li>elefanten</li> </ul> <ol> <li>elefanten <li>elefanten <li>elefanten </ol> <ul> <li>elefanten </li> <ol> <li>indische</li> <li>afrikanische</li> </ol> <li>elefanten</li> <li>elefanten</li> </ul> Helmar Burkhart Werkzeuge der Informatik Lektion 8: Internet und Anwendungen 8-72

6 Hyperlinks Ein Hyperlink (kurz Link, dt. Verknüpfung) ist eine Verbindung zwischen Webdokumenten. Die Verbindung erfolgt dabei mittels Angabe eines Ankers (z. B. Angabe einer URL). <a>...</a> definiert den Anker. href = URL definiert das Ziel. Link zur <a href= > Home Page</a> Helmar Burkhart Werkzeuge der Informatik Lektion 8: Internet und Anwendungen 8-73 RGB-Modell für Farben Farben werden gemäss dem RGB-Modell mit Hilfe von 6 Hexziffern angegeben. "#R 1 R 2 G 1 G 2 B 1 B 2 " Reines Rot: FF0000 Rot Grün Blau Reines Grün: 00FF00 Reines Blau: 0000FF Weiss: FFFFFF Schwarz: Gelb: FFFF00 Cyan: FF00FF Aqua: 00FFFF Helmar Burkhart Werkzeuge der Informatik Lektion 8: Internet und Anwendungen 8-74

7 16 Grundfarben 16 Farbwerte können mit Namen angesprochen werden: black maroon green olive navy purple teal gray silver red lime yellow blue fuchsia aqua white Browser können weitere Farben benennen: papayawhip lavenderblush salmon... Helmar Burkhart Werkzeuge der Informatik Lektion 8: Internet und Anwendungen 8-75 Farben in Dokumenten Farbe ist ein wichtiges Mittel zur attraktiven Gestaltung von Dokumentteilen. Setzbar sind u.a.: Dokumenthintergrund: <body bgcolor =...> Dokumenttext: <body text =...> Texteinheiten: <font color =...> Aktiver Hyperlink: <body alink =...> Nicht besuchte Hyperlinks: <body link =...> Besuchte Hyperlinks: <body vlink =...> Helmar Burkhart Werkzeuge der Informatik Lektion 8: Internet und Anwendungen 8-76

8 Bilder (1) HTML erlaubt das einfache Einbinden von Bilder in Webdokumente: GIF: Graphics Interchange Format (.gif) JPEG: Joint Photographic Experts Group (.jpg) <img> erlaubt das Einbinden eines Bilds. src = Quelldatei; width = Breite; height = Höhe in Pixel; Helmar Burkhart Werkzeuge der Informatik Lektion 8: Internet und Anwendungen 8-77 Bilder (2) ALIGN erlaubt verschiedene Möglichkeiten der Platzierung von Bild und Text. bottom left middle right top Hamburger Photographen Erich Andres. <img src="car.gif" width="320" height="240" align=left> Käfer bitten zur Vernissage: In unserer Galerie finden Sie Helmar Burkhart Werkzeuge der Informatik Lektion 8: Internet und Anwendungen 8-78

9 Bildkarten (Image maps) Bildkarten sind verweis-sensitive Graphiken, mit Hilfe derer ein Anwender statt länglicher URL-Eingaben mit Hilfe von Zeigeinstrumenten Information auswählen kann. Beispiel: Weitere Beispiele findet man praktisch auf allen von Graphikern inspirierten Homepages. Bildkarten erfordern die pixelgenaue Angabe von Koordinaten, was eine manuelle Erstellung beschwerlich macht. Helmar Burkhart Werkzeuge der Informatik Lektion 8: Internet und Anwendungen 8-79 Tabellen (1) Tabellen dienen zur Darstellung von Information in Reihen und Kolonnen. Die Tabellenelemente heissen Zellen. Überschrift Überschriftszelle Datenzelle Reihe Kolonne Helmar Burkhart Werkzeuge der Informatik Lektion 8: Internet und Anwendungen 8-80

10 Tabellen (2) <table>...</table> definiert Tabelle. Attribut border erzeugt Tabelle mit Rand. <tr>...</tr> definiert Reihe innerhalb Tabelle. <th>...</th> definiert Überschriftszelle. <td>...</td> definiert Datenzelle. <caption>...</caption> definiert Tabellenbeschriftung. Helmar Burkhart Werkzeuge der Informatik Lektion 8: Internet und Anwendungen 8-81 Tabellenbeispiel <table border> <caption>kinderspiel</caption> <tr> <th>buchstabe</th><th>stadt</th><th>land</th><th>fluss</th> </tr> <tr> <td>a</td><td>aarau</td><td>albanien</td><td>aare</td> </tr> <tr> <td>l</td><td>london</td><td>liberia</td><td>limmat</td> </tr> <tr> <td>z</td><td>zeiningen</td><td>zaire</td><td></td> </tr> </table> Helmar Burkhart Werkzeuge der Informatik Lektion 8: Internet und Anwendungen 8-82

11 Reihen-/Kolonnenüberspannung rowspan definiert eine Reihenüberspannung. colspan definiert eine Kolonnenüberspannung. <tr><td colspan=3 align=center>zelle A <td rowspan=3>zelle B</tr> <tr><td rowspan=2>zelle C <td colspan=2 align=center>zelle D</tr> <tr><td>zelle E <td>zelle F</tr> <tr><td colspan=4 align=center>zelle G</tr> Helmar Burkhart Werkzeuge der Informatik Lektion 8: Internet und Anwendungen 8-83 HTML-Werkzeuge HTML-Editor: Erstellen eines Dokuments im (quasi-) WYSIWYG Modus. HTML Konverter: Konvertieren nach HTML von anderen Formaten. HTML-Prüfer und Korrigierer: Prüfen von Syntax und Struktur eines Dokuments (z.b. Schachtelung von Tags), sowie Gültigkeit externer Links Helmar Burkhart Werkzeuge der Informatik Lektion 8: Internet und Anwendungen 8-84

12 Texteditor oder HTML-Editor? Allgemeiner Texteditor + universell + Spracherweiterungen schnell einsetzbar mühsam: Erlernen einer Sprache HTML-Editor evtl. einschränkend hinkt evtl. Entwicklung nach + benutzerfreundlich Helmar Burkhart Werkzeuge der Informatik Lektion 8: Internet und Anwendungen 8-85 Beispiel 1: Netscape Composer HTML-Editor mit graphischer Benutzeroberfläche. Links Bilder Tabellen Farbe Listen Helmar Burkhart Werkzeuge der Informatik Lektion 8: Internet und Anwendungen 8-86

13 Beispiel 2: Frontpage-Express HTML-Editor mit graphischer Benutzeroberfläche. Dialogelemente Helmar Burkhart Werkzeuge der Informatik Lektion 8: Internet und Anwendungen 8-87 Automatisch generieren? Beispiele für Konverter dlatex: LaTeX nach HTML WORD nach HTML PowerPoint nach HTML + Dokumentverwaltung im reiferen System Unterschiedliche Ausgabeanforderungen Ineffizienzen möglich Helmar Burkhart Werkzeuge der Informatik Lektion 8: Internet und Anwendungen 8-88

14 Zusammenfassung HTML HTML hat einen über die Jahre rasch gewachsenen Umfang an Befehlen und Attributen. Viele Interna wurden bereits durch Werkzeuge versteckt. Neben der allgemeinen Literatur sind insbesondere Online- Dokumente guter Qualität verfügbar: Übersicht der Befehle und Attribute der aktuellsten Version HTML 4.01: Aber: Mannigfaltige Kritik an HTML erzwingt neue Lösungen. Helmar Burkhart Werkzeuge der Informatik Lektion 8: Internet und Anwendungen 8-89 Von SGML zu XML Bereits 1986 wurde SGML (Standard Generalized Markup Language) eine umfassende und dadurch sehr komplexe Metasprache zur Definition von Markup- Sprachen entwickelt. Jede Document Type Definition (DTD) stellt dabei eine konkrete Sprache dar. HTML wurde sehr pragmatisch als kleine Sprache konzipiert, durch neue Versionen aber schnell aufgebläht. HTML ist im Prinzip mittels DTD festgelegt, was aber meist ignoriert wird. HTML ist starr und genügt nicht allen Ansprüchen. "Verbessertes SGML": XML (EXtensible Markup Language). Helmar Burkhart Werkzeuge der Informatik Lektion 8: Internet und Anwendungen 8-90

15 XML als universelle Markup- Sprache XML, DTD Bestimmt Grammatik einer Sprache XHTML MathML CML Bestimmt Grammatik von Dokumenten XHTML Dokumente MathML Dokumente CML Dokumente Helmar Burkhart Werkzeuge der Informatik Lektion 8: Internet und Anwendungen 8-91 Unterschiede HTML XML HTML ist eine konkrete Dokumentbeschreibungssprache. XML ist eine Metasprache. Merkmal HTML XML Daten und Repräsentation vermischt getrennt Bezeichner (tags) fest frei wählbar Kontrolle der tag-verwendung lose streng Zeichensatz Westeuropa Unicode Unterscheidung klein-gross nein ja Bezug zu SGML klein gross Helmar Burkhart Werkzeuge der Informatik Lektion 8: Internet und Anwendungen 8-92

16 KochML: Eine Sprache für Rezepte Name Quelle Hoehe Abbildung Breite Einheit Rezept Material 1:n Zutat Menge Stoff Anleitung 1:n Schritt Dauer Helmar Burkhart Werkzeuge der Informatik Lektion 8: Internet und Anwendungen 8-93 Beispieldokument für KochML <Rezept> <Name>HB s Spezial Pizza</Name> <Material> <Zutat><Menge Einheit="kg">1</Menge> <Stoff>Pepperoni</Stoff></Zutat> <Zutat>...</Zutat> </Material>... </Rezept> Helmar Burkhart Werkzeuge der Informatik Lektion 8: Internet und Anwendungen 8-94

17 DTD für KochML <!ELEMENT Rezept (Name,Abbildung?,Material, Anleitung)> <!ELEMENT Name (#PCDATA)> <!ELEMENT Abbildung EMPTY> <!ATTLIST Abbildung Quelle CDATA #REQUIRED Hoehe CDATA #REQUIRED Breite CDATA #REQUIRED> <!ELEMENT Material (Zutat*)> <!ELEMENT Zutat (Menge,Stoff)> <!ELEMENT Menge (#PCDATA)> <!ATTLIST Menge Einheit CDATA #REQUIRED> <!ELEMENT Stoff (#PCDATA)> <!ELEMENT Anleitung (Schritt*)> <!ELEMENT Schritt (#PCDATA)> <!ATTLIST Schritt Dauer CDATA #REQUIRED> Helmar Burkhart Werkzeuge der Informatik Lektion 8: Internet und Anwendungen 8-95 Markup Languages MathML: CML: NanoML: Für Grundlagen und Anwendungen siehe Vorlesung: Webtechnologien SS KP. Helmar Burkhart Werkzeuge der Informatik Lektion 8: Internet und Anwendungen 8-96