Die Bilder in diesen Folien sind urheberrechtlich geschützt. Medientechnik. Hypertext Markup Language

Transkript

1 Die Bilder in diesen Folien sind urheberrechtlich geschützt. Medientechnik Hypertext Markup Language

2 About Daniel Mies Computervisualisitik, Diplom Folien & more:

3 Literatur Webseiten erstellen für Einsteiger ISBN:

4 Termine

5 Ablauf Einleitung Grundlagen HTML

6 Webentwicklung: Handwerkszeug

7 Handwerkzeug: Texteditoren Windows Notepad2 - Linux Bluefish OS X Textmate - Grundsätzlich Irgendein Editor

8 Handwerkzeug: FTP Programme file transfer protocol transferiert Daten zwischen Server und Client Ist bei Linux (z.b. Nautilus Dateimanager) und Mac OS X (Finder) schon an Bord. Software für Windows, Mac und Linux: Schnelleinstieg:

9 FTP an der Uni Abgabe der Übungsblätter wird primär über eigenen Webspace geregelt. Zugangsdaten: Server: ftp://ftphost.uni-koblenz.de Benutzername: <Deine Unikennung> Passwort: <Dein Passwort> Ordner: public_html Weitere Informationen / Alternativen: koblenz/ghrko/faq/homepage

10 FTP an der Uni Abgabe der Übungsblätter wird primär über eigenen Webspace geregelt. Zugangsdaten: Server: ftp://ftphost.uni-koblenz.de Benutzername: <Deine Unikennung> Hier gibt es garantiert Startprobleme. Also direkt testen damit die Abgabe der Übung klappt. Passwort: <Dein Passwort> Ordner: public_html Weitere Informationen / Alternativen: koblenz/ghrko/faq/homepage

11 Fragen?

12

13 Trennung von Inhalt, Layout und Animation HTML strukturiert den Inhalt CSS formatiert und gestaltet den Inhalt JavaScript fügt dynamische Elemente und Animationen ein.

14

15 CSS Zen Garden Eine HTML-Datei wird durch zahlreiche CSS-Dateien gestaltet. Strikte Trennung von Inhalt und Layout.

16 HTML

17 HTML-Grundlagen Hypertext Markup Language ist keine Programmiersprache (und wird somit nicht programmiert ) ist statisch

18 Hypertext Hypertexte sind Dokumente, die durch Links (Hyperlinks) miteinander verbunden werden. Hypertexte bilden somit die Grundlage des Internets.

19 Markup bedeutet übersetzt Textauszeichnung In HTML nutzen wir Tags um (Text-) Elemente wie Absätze, Überschriften und Links auszuzeichnen

20 Language HTML ist eine Sprache Es ist keine Programmier- sondern eine Auszeichnungssprache. Unser Sprachschatz, also die Tags und Elemente die wir nutzen können, werden durch die Dokumenttyp-Deklaration festgelegt (s. Veranstaltung zu XML)

21 Geschichte HTML wurde am 13. März 1989 von Tim Berners-Lee am CERN in Genf festgelegt. HTML (ohne Versionsnummer, 3. November 1992): Die Urversion, die sich nur an Text orientierte. HTML (ohne Versionsnummer, 30. April 1993): Zu Text kommt neben Attributen wie fette oder kursive Darstellung die Bildintegration dazu. HTML+ (November 1993) Geplante Erweiterungen, die in spätere Versionen einflossen, aber nie als HTML+ verabschiedet wurden.

22 Geschichte HTML 2.0 (November 1995): Die mit RFC 1866 definierte Version führt u. a. Formulartechnik ein. Der Status dieses Standards ist HISTORIC. Auch die Vorgänger sind veraltet. HTML 3.0: Die Version erscheint nicht, weil sie mit der Einführung des Netscape-Browsers in der Version 3 bereits vor der Veröffentlichung veraltet ist. HTML 3.2 (14. Januar 1997): Neu in dieser Version sind zahlreiche Features wie Tabellen, Textfluss um Bilder, Einbindung von Applets.

23 Geschichte HTML 4.0 (18. Dezember 1997): Mit dieser Version werden Stylesheets, Skripte und Frames eingeführt. Auch eine Trennung in Strict, Frameset und Transitional erfolgt. Am 24. April 1998 erscheint eine leicht korrigierte Version dieses Standards. HTML 4.01 (24. Dezember 1999): Ersetzt HTML 4.0 mit vielen kleineren Korrekturen. XHTML 1.0 (26. Januar 2000): Eine Neuformulierung von HTML 4.01 mit Hilfe von XML. Am 1. August 2002 erscheint eine überarbeitete Version. XHTML 1.1 (31. Mai 2001): Nachdem XHTML in Module aufgeteilt wurde, wird mit XHTML 1.1 eine strikte Version definiert, bei der die mit HTML 4 eingeführten Varianten Frameset und Transitional entfallen.

24 Geschichte XHTML 2.0 (Working Draft, 26. Juli 2006): Diese Version sollte nicht mehr auf HTML 4.01 basieren und einige neue Elemente einführen, so z. B. <nl> für Navigationslisten. Die Trennung von Auszeichnung und Stil sollte in dieser Version vollendet werden. - Das W3C hat die Arbeiten an XHTML 2.0 im Sommer 2009 zu Gunsten von HTML5 eingestellt. HTML5 (Working Draft, 23. April 2009): HTML5 schafft auf Basis von HTML 4.01 und XHTML 1.0 ein neues Vokabular. Die zu HTML gehörende DOM- Spezifikation wird ebenfalls überarbeitet und erweitert.

25 Stand der Technik Aktuellster Standard ist XHTML 1.1 (9 Jahre alt). Teilweise auch noch HTML 4 (11 bzw. 13 Jahre) Die Zukunft: HTML5

26 Stand der Technik Aktuellster Standard ist XHTML 1.1 (9 Jahre alt). Teilweise auch noch HTML 4 (11 bzw. 13 Jahre) Die Zukunft: HTML5 Warum entwickelt sich HTML so langsam?

27 Arbeiten mit HTML

28 Tags < Tag-Bezeichnung > <p>, <a>, <body>, <video> (ab HTML5) Nur Kleinbuchstaben auch wenn es anders geht.

29 Elemente <Tag-Bezeichnung>Inhalt</Tag-Bezeichnung> <Tag-Bezeichnung /> z.b.: <a href= >Uni</a> (Link zur Seite der Universität)

30 Beispiele <p> Ein Text in einem Absatz (paragraph) </p> <strong>betonter Text</strong> <br /> (break - Zeilenumbruch) <!-- Kommentar -->

31 Wichtig Wir schließen Elemente immer in der gleichen Reihenfolge in der wir sie öffnen! Falsch <p> Hallo <strong>welt</p> </strong> Richtig <p> Hallo <strong>welt</strong> </p>

32 Blockelemente Blockelemente fügen hinter sich einen Zeilenumbruch ein Beispiel: <p> Hier ist ein Absatz </p>

33 Inlineelemente Inlineelemente fügen keinen Zeilenumbruch ein <p> Hier steht ein <strong>teilweise fett geschriebener</strong> Absatz </p>

34 Fragen?

35 Überschriften <h1></h1> bis <h6></h6> <h1> ist die wichtigste <h6> ist die kleinste

36

37 <h1>

38 <h1> <h2>

39 <h1> <h2> <h3>

40 Absätze & Zeilenumbrüche Absatz: <p> Text </p> p - paragraph Zeilenumbruch: <br /> br - break

41 In der Praxis <h1>wichtigste Überschrift</h1> <p> Hier steht ein Absatz </p> <h2>überschrift 2. Grades</h2> <p>...

42

43 Wichtig!!!! Richtig: <p> Text </p> Falsch: <br /><br /> Text <br /><br />

44 Wichtig!!!! Richtig: <p> Text </p> Warum? Falsch: <br /><br /> Text <br /><br />

45 Texte hervorheben <strong>text</strong> (idr fett) <em>text</em> (idr kursiv) em - emphasis (Betonung) <b> (bold) und <i> (italic) gibt es auch, sind aber semantisch ohne Bedeutung und somit wertlos

46 Texte hervorheben <strong>text</strong> (idr fett) <em>text</em> (idr kursiv) em - emphasis (Betonung) <b> (bold) und <i> (italic) gibt es auch, sind aber semantisch ohne Bedeutung und somit wertlos Ändert sich wohl ab HTML5 wieder.

47 In der Praxis <h1>wichtigste Überschrift</h1> <p> <strong>hier</strong> steht <em>ein Absatz</em> </p>

48

49 Attribute < Tag-Bezeichnung attribut= wert > enthalten bei Formularen zusätzliche Informationen enthalten bei Links u.a. die URL des Ziels enthalten weitere Optionen für das Element können CSS-Formatierungen einbinden Attribut-Werte dürfen auch Großbuchstaben enthalten. Sonst werden nur Kleinbuchstaben in Tags verwendet.

50 Links <a href= pfad/zur/datei title= Titel target= _blank >Text</a> a - Anchor href: Pfad zur Datei die verlinkt wird (z.b. title: Beschreibung wohin verlinkt wird (z.b. Seite der Universität... target: in welchem Fenster wird die Seite geöffnet (optional) (z.b. _blank = Link in neuem Fenster öffnen)

51 Bilder <img src= pfad alt= Alternativtext /> img - Image src: Pfad zum Bild alt: Alternativtext falls das Bild nicht angezeigt wird width & height: Breite und Höhe des Bildes (optional)

52 In der Praxis <h1>wichtigste Überschrift</h1> <img src="picture.jpg" width="250" height="166" alt="ein Bild" /> <p> <strong>hier</strong> steht <em>ein Absatz</em> </p>

53

54 Schön ist das nicht... Nicht vergessen: Die Aufgabe von HTML ist die Strukturierung der Inhalte, nicht die Gestaltung. Die Darstellung der Elemente hängt noch vom Browser-Stylesheet ab. Browser-Stylesheet: Stylesheet mit Standardformatierungen für alle Elemente.

55 Fragen?

56 Wo sind die Fehler? <h2>eine <span>überschrift</h2> <p class=error> Hier steht ein <strong>fetter Tex</strong>t. </p>

57 So ist es richtig <h2>eine <span>überschrift</span></h2> <p class= error > Hier steht ein <strong>fetter Tex</strong>t. </p>

58 Aufbau einer HTML-Datei <!DOCTYPE html> <html> <head> <title>titel der Seite</title> </head> <body> </body> </html>

59 Doctype (vor HTML5) strict <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " transitional <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " transitional.dtd"> frameset <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Frameset// EN" "

60

61 <head> Kopfbereich mit unsichtbaren Informationen Titel <title>titel der Seite</title> Meta-Angaben Verweise auf Javascript- und CSS-Dateien

62 <title>willkommen bei Facebook</title>

63 Meta-Angaben <meta name=... content=... /> name: Bezeichnung content: Inhalt

64 Beispiele keywords: <meta name="keywords" content="html, CSS, JavaScript" /> Zeichensatz: <meta charset= ISO " />

65 Gängige Zeichensätze UTF-8 (Beste Wahl) ISO ISO

66 <, > und & <,> und & werden in HTML nicht dargestellt sondern in HTML- Entities umgewandelt. Beispiel: 2 < 3 & 4 > 1 2 < 3 & 4 > 1 < - lower than > - greater than

67 Umlaute in HTML Ä - Ä ä - ä Ö - Ö ö - ö Ü - Ü ü - ü ß - ß -

68 <body> Enthält den sichtbaren Inhalt...<!-- head und so --> <body> <h1>wichtigste Überschrift</h1> <img src="picture.jpg" width="250" height="166" alt="ein Bild" /> <p><strong>hier</strong> steht <em>ein Absatz</em></p> </body>

69 Fragen?

70 Fehlersuche

71 <html> <head> <meta charset="iso "/>... </head> <title>unsere kleine Webseite<title> <p class= zwei Klassen > Hier könnte soviel stehen, wenn Platz wäre & wir mehr Zeit hätten. </p> </html>

72 <html> <head> <meta charset="iso "/> <title>unsere kleine Webseite</title>... </head> <body>... <p class= zwei klassen > Hier könnte soviel stehen, wenn Platz wäre & wir mehr Zeit hätten. </p>

73 Erste Schritte Startseite muss den Dateinamen index.htm oder index.html haben Alle anderen Dateien dürfen beliebige Dateinamen haben. Grundregeln: Kleinbuchstaben Keine Leer- und Sonderzeichen ausser +, - und _ Wenn man innerhalb eines Ordners einen Link setzen möchte reicht der Dateiname im href-attribut: <a href= seite2.htm title= Zweite Seite >2. Seite</a>

74 Ist das alles? HTML bietet noch zahlreiche weitere Elemente Ohne CSS fehlt der Seite noch jegliche Gestaltung JavaScript kann verwendet werden um die Seite dynamischer zu gestalten Dies und mehr: In zwei Woche.

75 Fragen?

76 Vielen Dank für Eure Aufmerksamkeit Grafiken wurden dem Buch Webseiten erstellen für Einsteiger entnommen. 3D Figuren: