Webtechnologien

Von Jörg Hambuch, Anna Neovesky und Aline Deicke

Die hier genannten Punkte werden in den oben verlinkten Folien um weitere Ausführungen und Beispiele ergänzt.

HTML

Was ist HTML?

HTML = Hyper Text Markup Language

  • Auszeichungssprache
  • beschreibt die semantische Struktur von Webseiten (nicht Darstellung und Formatierung! → CSS)
  • Grundlage des World Wide Web
  • Internationaler Standard, entwickelt und gepflegt vom W3C und der WHATWG
  • Aktuelle Version: HTML5 (seit 28.10.2014)
  • Dateiendung: .html oder .htm

Ein bisschen Geschichte

Aufbau eines HTML-Elements

Abbildung eines HTML-p-Elements mit einem Attribut class mit dem Wert nice Source: Mozilla Developer Network

<p>Ein Text-Element</p>
<p>Ein <em>verschachteltes</em> Text-Element</p>

Eigenschaften eines HTML-ELements:

  • opening (<p>) und closing tag (</p>) - Ausnahme: Selbstschließende Elemente wie <img>
  • Nested Structure
  • Vorsicht vor veralteten (deprecated) Elementen!

Attribute

[Ein Link](# "Demo-Link")

Eigenschaften von Attributen:

  • Immer innerhalb des start tags
  • Bestehen aus name und value, getrennt durch “=”
  • Globale (z. B. title, id, class) und elementspezifische Attribute (z. B. href)

Block-level- und Inline-Elemente

Block-level-Elemente beginnen eine neue Zeile und erstrecken sich über die Breite der kompletten Zeile, während Inline-Elemente keine neue Zeile starten und nur so viel Platz einnehmen wie nötig:

<p>Ein Block-level-Textelement mit einem <em>Inline-Auszeichnungselement</em>.</p>

Basisstruktur eines HTML-Dokuments

<!DOCTYPE html>
<html>
    <head>
        <!-- this is a comment -->
        <!-- metadata -->
        <title>Sample page</title>
    </head>

    <body>
        <!-- content -->
        <h1>Sample page</h1>
        <p>This is a [simple](demo.html) sample.</p>
    </body>
</html>

Wichtige Elemente

  • <!DOCTYPE html>: Sagt dem Browser, welche Version von HTML verwendet wird
  • <html>: Das Wurzelelement (root) eines HTML-Dokuments. Umschließt alle anderen Elemente
  • <head>: Enthält Metadaten und generelle Informationen über das Dokument, z. B. Autor, Titel und Charakterset, außerdem Verlinkungen zu externen Stylsheets und Skripten.
  • <body>: Enthält den Inhalt eines HTML-Dokuments, der auf der Webseite angezeigt wird.

Praktische Übung

CSS

Was ist CSS?

CSS = Cascading Style Sheets

  • Stylesheet-Sprache: gibt Anweisungen für die Darstellung eines Dokuments

  • Anwendbar auf alle Dokumente, die in Auszeichnungssprachen (markup languages) verfasst sind, z. B. HTML, XML, SVG, etc.

  • “Living standard” des W3C: CSS 2.1 empfohlen, CSS3 in Module aufgeteilt und im Prozess der Standardisierungs → Can I use ___?

  • Beschreibt Präsentation nicht nur auf dem Bildschirm, sondern auch in anderen Medien, z. B. Print, oder spezielle Regeln für verschiedene Geräte (Smartphone, Tablet, etc.)

  • Kaskade: Prioritätsgefälle und Vererbung von Eigenschaften

  • Dateiendung: .css

Aufbau einer CSS-Regel

Aufbau einer CSS-Regel Source: Mozilla Developer Network

body {
	font-family: "Arial", sans-serif;
	font-size: 1.6em;
	background-color: #eeeeee;
	/* This is a comment */
}
  • Mehrere Deklarationen getrennt durch Semikolon
  • Kaskade: Alle Kind-Elemente des <body>-Elements erben die für <body> deklarierten Eigenschaften

CSS-Selektoren

  • Ermöglichen es, eine Regel für ein spezifisches Element des HTML-Dokuments (“css-hook”) zu deklarieren
  • Verschiedene Arten von Selektoren: type selector, universal selector, attribute selector, class selector, ID selector, or pseudo-class (W3C)
  • Selektoren können zu einer Sequenz von Selektoren kombiniert werden
  • Selektoren können gruppiert werden
  • Spezifikation: Selectors Level 3

CSS-Selektoren II

Beispiel eines komplexen Selektors:

#mainnav ul li:first-child a, footer a {
    text-decoration: none;
}
  • Der Link (a) innerhalb des ersten Listenelements (li:first-child) einer ungeordneten Liste (ul) in dem Element mit der Id “mainnav” (#mainnav) und alle Links (a) im Footer (footer) der Seite sollen keine text-decoration haben.
  • type selector, ID selector, pseudo-class

Regeln der Kaskade (“Cascading”)

  • Herkunft (User- oder Autor-Stylesheet, Inline-Styles, etc.) und Wichtigkeit (!important)
  • Spezifizität (li a ist spezifischer als a)
  • Reihenfolge (wird eine Regel später im Dokument noch einmal deklariert, gilt diese statt der ersten Deklaration)

Einbindung von CSS

Drei Möglichkeiten:

  1. Inline-Styles: Direkt im jeweiligen HTML-Element über das Attribut style
  2. Im Kopf der jeweiligen HTML-Datei: Im <head> über das <style>-Element
  3. Eine oder mehrere zentrale CSS-Dateien für alle HTML-Dokumente, die über das <link>-Element im <head> eingebunden wird

Möglichkeit 1: Inline

<h1 style="font-weight: bold;">Beispiel</h1>

Möglichkeit 2: Im Kopf des Dokuments

<head>
    <style type="text/css">
        h1 {
            font-weight: bold;
        }
    </style>
</head>

Möglichkeit 3: Einbindung zentraler CSS-Datei(en)

<head>
    <link rel="stylesheet" href="css/styles.css" type="text/css">
</head>

→ emfohlene Lösung!

Praktische Übung

JavaScript

folgt

Webressourcen

HTML

CSS

JavaScript

folgt

Weiterbildung

Strukturierte, semantische Daten mit RDFa und JSON-LD

Weshalb strukturierte, semantische Daten im Web?

  • maschinelle Weiterverarbeitung
  • Verknüpfung zwischen Ressourcen
  • Konzepte des Semantic Web bieten Möglichkeiten der konkreten Ansprache und Einbindung

Möglichkeiten der Einbindung von RDF

  • in separater Datei, Schnittstelle (z.B. RDF/XML)
  • innerhalb von bereits bestehendem Markup: Microformats, RDFa, JSON-LD

RDFa

  • Einbindung von RDF Statements in XML
  • RDFa Lite mit fünf grundlegenden Attributen
  • RDF mit weitergehenden Möglichkeiten der Abbildung von Relationen

JSON-LD

  • JSON basierte Serialisierung
  • Angabe von Attributpaaren (property und value)

Vokabulare

  • legen Begriffe fest, mit denen der Inhalt beschrieben werden kann
  • viele Formate mit unterschiedlichen Auszeichnungstiefen und konkreten Anwendungsgebieten
  • Dublin Core: bibliographisches Datenformat
  • FOAF: Modellierung von Personen und Netzwerken
  • SKOS: Modellierung von Taxonomien
  • schema.org Modellierung von Websites