Web-basierte Anwendungssysteme XHTML-Grundlagen Prof. Dr. Sergej Alekseev ([email protected]) Prof. Dr. Armin Lehmann ([email protected])

Fachbereich 2 Informatik und Ingenieurwissenschaften Wissen durch Praxis stärkt

Seite 1

Prof. Dr. Sergej Alekseev | Prof. Dr. Armin Lehmann

Web-basierte Anwendungssysteme WS 2016/17

XHTML Für die folgenden Übungen wird die Template-Datei ueb01.html mit dem folgenden Inhalt genutzt (siehe Moodle) Übung 01 Hello World! Seite 2

Prof. Dr. Sergej Alekseev | Prof. Dr. Armin Lehmann

Web-basierte Anwendungssysteme WS 2016/17

Metainformationen Meta-Angaben enthalten zusätzliche Dokumenten-Informationen für:  Web-Server  Web-Browser  Suchmaschinen

Syntax für allgemeine Dokumenteninfos:

Syntax für Server-Infos:



Seite 3

Prof. Dr. Sergej Alekseev | Prof. Dr. Armin Lehmann

Web-basierte Anwendungssysteme WS 2016/17

Metainformationen META-Angaben

Autor der Seite



Schlüsselworte, wichtig für Suchmaschinen



Kurzinhalt, wichtig für Suchmaschinen



Veröffentlichungsdatum



Suchmaschinenhinweis, indizieren und Links von dieser Seite aus verfolgen



Suchmaschinenhinweis, nicht in den Index aufnehmen. Sinnvoll, bei kurzzeitigen Ressourcen



Alles indizieren



Der Webserver müsste aus dem Metatag einen Entity-Header erzeugen



Der Webserver müsste aus dem Metatag einen Entity-Header wie folgt erzeugen: Content-language: de

Seite 4

Prof. Dr. Sergej Alekseev | Prof. Dr. Armin Lehmann

Web-basierte Anwendungssysteme WS 2016/17

Metainformationen Übung 

Erstellen Sie die Datei ueb02.htm



Speichern Sie Ihre Datei



Starten Sie einen Browser und öffnen Sie ueb02.htm



Ergebnis



Validieren Sie Ihre Seite

Ergänzung: 

Überprüfen Sie ob der Server http-equiv verarbeitet hat



Ergebnis?

Übung 02 Hello World!

Weitere Informationen zu META-Elementen: http://de.selfhtml.org/html/kopfdaten/meta.htm

Seite 5

Prof. Dr. Sergej Alekseev | Prof. Dr. Armin Lehmann

Web-basierte Anwendungssysteme WS 2016/17

Headerlines Tag h, es gibt 6 Überschriften: größte Überschrift ... kleinste Überschrift

Attribut: align="left|center|right|justify" align sollte in XHTML nicht mehr verwendet werden, deshalb besser:

Seite 6

Prof. Dr. Sergej Alekseev | Prof. Dr. Armin Lehmann

Web-basierte Anwendungssysteme WS 2016/17

Headerlines Übung 

Erstellen Sie ueb03.htm



Speichern Sie Ihre Datei



Starten Sie einen Browser und öffnen Sie ueb03.htm



Ergebnis



Validieren Sie Ihre Seite

Seite 7

Übung 03 Überschrift 1 Das ist ein Text Überschrift 2 Das ist Text im Standardformat. Überschrift 3 Überschrift 3 Überschrift 3 Überschrift 3 Überschrift 4 Das ist ein Text Headline 5 Das ist ein Text Überschrift 6 Das ist ein Text

Prof. Dr. Sergej Alekseev | Prof. Dr. Armin Lehmann

Web-basierte Anwendungssysteme WS 2016/17

Tags p, br, nobr

Tag p – (paragraph) Absatz Text p ist ein wichtiges Blockelement. Während man bei HTML Text ohne Auszeichnung schreiben durfte, ist das jetzt nicht mehr möglich. Tag br – (break ) Zeilenumbruch


Seite 8

Prof. Dr. Sergej Alekseev | Prof. Dr. Armin Lehmann

Web-basierte Anwendungssysteme WS 2016/17

Tags p, br, nobr Übung 

Erstellen Sie ueb04.htm



Speichern Sie Ihre Datei



Starten Sie einen Browser und öffnen Sie ueb04.htm



Ergebnis



Validieren Sie Ihre Seite

Seite 9

Übung 04 Das ist ein Absatztext Dieser Text ist zentriert Dieser Absatztext ist rechtsbündig. Dieser Text wird durch break
umgebrochen. Dieser Text wird beim Verkleinen des Fensters umgebrochen Dieser Text bleibt durch whitespace:nowrap zusammenhängend

Prof. Dr. Sergej Alekseev | Prof. Dr. Armin Lehmann

Web-basierte Anwendungssysteme WS 2016/17

Tags div und span Tag div – division (Bereich), Bereichsinhalt div ist ein allgemeines Blockelement. Es wird dazu verwendet, ganzen Bereichen Eigenschaften zu zuweisen. Der durch begrenzte Bereich wird als eigener Absatz dargestellt. Tag span – Spanne (Bereich), Bereichsinhalt span ist ein allgemeines Inline-Element. Es wird dazu verwendet, Bereichen innerhalb eines Blockes Eigenschaften zu zuweisen. Der durch begrenzte Bereich wird nicht als Absatz dargestellt. Seite 10

Prof. Dr. Sergej Alekseev | Prof. Dr. Armin Lehmann

Web-basierte Anwendungssysteme WS 2016/17

Tags div span Übung 

Erstellen Sie ueb05.htm



Speichern Sie Ihre Datei



Starten Sie einen Browser und öffnen Sie ueb05.htm



Ergebnis



Validieren Sie Ihre Seite

Seite 11

Übung 05 div (division, Bereich) ist ein allgemeines Blockelement (Absatzelement). Damit kann man für einen gesamten Bereich Eigenschaften festlegen. Dies soll üblicherweise mittels CSS-Anweisungen geschehen. span (Spanne, Bereich) ist ein allgemeines Inline-Element, d.h. es wird kein Absatz eingefügt, wie dies bei div der Fall ist.Damit kann man Bereichen, innerhalb eines Blockes, andere Eigenschaften mittels CSS zuweisen.

Prof. Dr. Sergej Alekseev | Prof. Dr. Armin Lehmann

Web-basierte Anwendungssysteme WS 2016/17

Tags pre Tag pre – preformatted (vor-formatiert), vorformatierter Text

Vorformatierter Text ist zur Darstellung von Programmcode oder Datentabellen geeignet. Der Texte wird so dargestellt, wie ihn der Editor eingab. Abstände formatiert man mittels Tabulator und/oder Leerzeichen. Im Webbrowser wird eine "Nichtproportionalschrift" verwendet.

Seite 12

Prof. Dr. Sergej Alekseev | Prof. Dr. Armin Lehmann

Web-basierte Anwendungssysteme WS 2016/17

Tag pre Übung 

Erstellen Sie ueb06.htm



Speichern Sie Ihre Datei



Starten Sie einen Browser und öffnen Sie ueb06.htm



Ergebnis



Validieren Sie Ihre Seite

Seite 13

HTML-Übung 06 Key Name Vorname 1 Müller Christian 2 Musterman Frank 3 Schneider Julia Vorformatierter Text ist zur Darstellung von Programmcode oder Datentabellen geeignet. for(i = 0; i < 10; i++){ Console.log('Hello World'); }

Prof. Dr. Sergej Alekseev | Prof. Dr. Armin Lehmann

Web-basierte Anwendungssysteme WS 2016/17

Listen Bei XHTML unterscheidet man  Ordered list element  Unordered list

element

 Defintion list

term description



Seite 14

Prof. Dr. Sergej Alekseev | Prof. Dr. Armin Lehmann

Web-basierte Anwendungssysteme WS 2016/17

List-Attribute "1": arabische Ziffern, "a": Kleinbuchstaben, "A": Großbuchstaben, "i" kleine römische Zahlen, "I": große römische Zahlen Startwert der Nummerierung überschreibt laufenden Index mit einem Wert. Aufzählungszeichen gefüllter Kreis/Kreis/gefülltes Quadrat

Seite 15

Prof. Dr. Sergej Alekseev | Prof. Dr. Armin Lehmann

Web-basierte Anwendungssysteme WS 2016/17

Tag ul Übung 

Erstellen Sie ueb07.htm



Speichern Sie Ihre Datei



Starten Sie einen Browser und öffnen Sie ueb07.htm



Ergebnis



Validieren Sie Ihre Seite

Beachte: ab XHTML1.0 Strict kann ul nicht Element von ul sein!

Seite 16

HTML-Übung 07 XHTML-Grundlagen HTML CSS Java Script HTML-Struktur html DTD head title body content

Prof. Dr. Sergej Alekseev | Prof. Dr. Armin Lehmann

Web-basierte Anwendungssysteme WS 2016/17

Tag ol Übung 

Erstellen Sie ueb08.htm



Speichern Sie Ihre Datei



Starten Sie einen Browser und öffnen Sie ueb08.htm



Ergebnis



Validieren Sie Ihre Seite

Seite 17

HTML-Übung 08 XHTML-Grundlagen HTML CSS Java Script HTML-Struktur html DTD head title body content

Prof. Dr. Sergej Alekseev | Prof. Dr. Armin Lehmann

Web-basierte Anwendungssysteme WS 2016/17

Tag dl Übung 

Erstellen Sie ueb09.htm



Speichern Sie Ihre Datei



Starten Sie einen Browser und öffnen Sie ueb09.htm



Ergebnis



Validieren Sie Ihre Seite

Seite 18

HTML-Übung 09 DL-List DTD Document Type Definition HTML Hypertext Markup Language HTTP Hypertext Transfer Protocol

Prof. Dr. Sergej Alekseev | Prof. Dr. Armin Lehmann

Web-basierte Anwendungssysteme WS 2016/17

Aufgabe: Erstellen Sie folgende Web-Seite

Seite 19

Prof. Dr. Sergej Alekseev | Prof. Dr. Armin Lehmann

Web-basierte Anwendungssysteme WS 2016/17