WS12/13 -- IT-Zertifikat: Allgemeine Technologien II | 01: HTML5

Universität zu Köln. Historisch-Kulturwissenschaftliche Informationsverarbeitung Jan G. Wieners // [email protected]
Allgemeine Technologien II Wintersemester 2012 / 2013 15. Oktober 2012 – Die Hypertext Markup Language (HTML)

Hypertext Markup Language (HTML)  HTML ist eine „Auszeichnungssprache“ was
ist das?  HTML: Aufbau und Elemente  Tags  Attribute  Regeln & Co.  Erste Schritte mit HTML Themenüberblick „HTML“

Webseiten & HTML

Grundkonzept: Darstellung vs. …

Firefox: Datei > Seite speichern unter I. Speicherort: … (eigentlicher)
dargestellter Inhalt

II: Ordner „Kino-Melancholia-Dateien“ … (eigentlicher) dargestellter Inhalt

II: Ordner „Kino-Melancholia-Dateien“  *.gif und *.jpg: Bilddateien filmszene-melancholia-540x304.jpg 
*.js: JavaScript-Skripten  *.css: Cascading Style Sheets  […] … (eigentlicher) dargestellter Inhalt

Kino-Melancholia.htm bzw. Rechtsklick > „Seitenquelltext anzeigen“ HTML

base.css (darüber hinaus noch article.css und iphone.css) CSS

Grundkonzept: Explizite Trennung von  Daten bzw. Struktur der Information
von der  visuellen Repräsentation der Information:  HTML  Daten / Struktur  CSS – Cascading Style Sheets  Visuelle Repräsentation, Layout HTML, CSS

HTML – HyperText Markup Language  Programmiersprache  Auszeichnungssprache: Strukturierung
von Inhalten durch Elemente für Überschriften, Listen, Absätze, Tabellen, etc.  Wohldefinierter Standard  Regeln (bis HTML 4.01) formuliert in SGML (Structured Generalized Markup Language)  HTML-Versionen:  HTML – 1992, vgl. Tim Berners-Lee, CERN  HTML 2.0 – 1995 (+Formulare)  HTML 3.2 – 1997 (u.a. +Tabellen)  HTML 4.0 – 1997 (+Stylesheets, +Frames)  HTML 4.01 – 1999  XHTML 1.0 – 2000 (Neuformulierung von HTML in XML)  HTML 5 – 201x (Basis: HTML 4.01, XHTML 1.0)  HTML Dateien bestehen aus reinem Text HTML

Allergrundlegendstes Grundkonzept: Tags Lorem ipsum dolor sit amet 
HTML – Tags Öffnendes Tag Schließendes Tag (erkennbar durch das Zeichen “/“ (Slash))

Verschachtelte Datenstruktur („Zwiebelschema“):  html-Element („Tag“) schließt das head-Element, sowie
das body-Element ein  <head> intendiert für HTML-Kopfdaten, z.B. Titel des Dokumentes, Metainformationen  <body> umschließt die für Browser sichtbaren Inhalte  <html>, <head>, <body> obligatorisch HTML – Aufbau

 Sichtbare Information vs. unsichtbare Information: Information, die am Bildschirm
dargestellt werden soll, wird als Text geschrieben zwischen Paare von spitzen Klammern (enthalten Metainformationen): <metainformation>Dieser Text wird am Bildschirm angezeigt</metainformation>  HTML-Element besteht (in den meisten Fällen) aus Anfangs- und Endmarkierung:  <html>  Anfangsmarkierung  </html>  Endmarkierung, erkennbar an „/“  Ausnahmen:   Zeilenumbruch; kein Endtag erforderlich  <img />  Einbinden von Bildmaterial; kein schließendes Tag erforderlich  HTML unterscheidet nicht zwischen Groß- und Kleinschreibung: <html> analog zu <HTML>. Empfehlung: Alles klein schreiben (XHTML fordert Kleinschreibung). HTML – Regeln & Co.

Übung 1 Sichtbare vs. nicht sichtbare Information

Verschachtelung von Elementen:  Zahlreiche Möglichkeiten der Verschachtelung (definiert in
HTML-Spezifikation):  Ein Beispieltext  Ein kursiver Beispieltext  Zwiebelschema beachten: Innere Elemente müssen geschlossen werden, bevor äußere Elemente geschlossen werden:  Falsch: Beispieltext  Richtig: Beispieltext HTML – Regeln & Co. Quelle: http://de.wikipedia.org/w/index.php?title=Datei:Onion.jpg&filetimestamp=20060920104907, Donovan Govan

Unterscheidung von Block- und Inline-Elementen (in <body> relevant):  Block
Elemente erzeugen eine neue Zeile im Textfluss  (Absatz)  (Neue Zeile)  <h1>, <h2>, etc. (Überschriften)  <div>  Inline Elemente beeinträchtigen den Textfluss nicht  (Betont)  <cite> (Zitat) HTML – Regeln & Co.

Attribute und Attributwerte  Einige HTML Elemente können Attribute mit
variablen (selbst definierbaren) Wertzuweisungen enthalten  Notiert im öffnenden Tag eines Elementes  Beispiele:  Bleibt die Mouse über dem Absatz stehen, wird das title-Attribut des Absatzes angezeigt. HTML – Regeln & Co.

Sonderzeichen  Wenn die Zeichenkodierung nicht angegeben – und die
Codierung der HTML-Datei nicht auf UTF-8 gesetzt ist, müssen Sonderzeichen maskiert werden, z.B. über die HTML-Entities:  ü  ü  Ü  Ü  <  < („less than“)  >  > („greater than“)  “  " („quotation mark“)  &  & („ampersand“, kaufmännisches Und) HTML – Regeln & Co.

Übungsblatt

Trennung:  Struktur der Information  HTML  Darstellung der
Information  CSS  Hist. Überblick: HTML-Standards  Verschachtelte Datenstruktur  Sichtbare vs. nicht sichtbare Information:  Darzustellende Information zwischen Tags  Metainformation (Information, die die dargestellte Information beschreibt) per Tags bzw. in Tags (Attribute)  Block- vs. Inline-Elemente  Regeln: Zwiebelprinzip, Entities (Zeichencodierung) HTML – Auf einen Blick

Lösen Sie bitte die Hausaufgaben, die Sie zur zweiten Kurssitzung
auf der kursbegleitenden Website unter http://www.hki.uni-koeln.de/at2 finden Hausaufgaben

WS12/13 -- IT-Zertifikat: Allgemeine Technologien II | 01: HTML5

WS12/13 -- IT-Zertifikat: Allgemeine Technologien II | 01: HTML5

Jan Wieners

More Decks by Jan Wieners

Other Decks in Education

Featured

Transcript

Universität zu Köln. Historisch-Kulturwissenschaftliche Informationsverarbeitung Jan G. Wieners // [email protected]

Hypertext Markup Language (HTML)  HTML ist eine „Auszeichnungssprache“ was

Webseiten & HTML

Grundkonzept: Darstellung vs. …

Firefox: Datei > Seite speichern unter I. Speicherort: … (eigentlicher)

II: Ordner „Kino-Melancholia-Dateien“ … (eigentlicher) dargestellter Inhalt

II: Ordner „Kino-Melancholia-Dateien“  .gif und .jpg: Bilddateien filmszene-melancholia-540x304.jpg 

Kino-Melancholia.htm bzw. Rechtsklick > „Seitenquelltext anzeigen“ HTML

base.css (darüber hinaus noch article.css und iphone.css) CSS

Grundkonzept: Explizite Trennung von  Daten bzw. Struktur der Information

HTML – HyperText Markup Language  Programmiersprache  Auszeichnungssprache: Strukturierung

Allergrundlegendstes Grundkonzept: Tags <strong> Lorem ipsum dolor sit amet </strong>

Verschachtelte Datenstruktur („Zwiebelschema“):  html-Element („Tag“) schließt das head-Element, sowie

 Sichtbare Information vs. unsichtbare Information: Information, die am Bildschirm

Übung 1 Sichtbare vs. nicht sichtbare Information

Verschachtelung von Elementen:  Zahlreiche Möglichkeiten der Verschachtelung (definiert in

Unterscheidung von Block- und Inline-Elementen (in <body> relevant):  Block

Attribute und Attributwerte  Einige HTML Elemente können Attribute mit

Sonderzeichen  Wenn die Zeichenkodierung nicht angegeben – und die

Übungsblatt

Trennung:  Struktur der Information  HTML  Darstellung der

/

Lösen Sie bitte die Hausaufgaben, die Sie zur zweiten Kurssitzung