Informatik – 9 Einführung in HTML. 04.03.2014 1 HTML (I) 1989-1990 am Cern in Genf von Sir Tim...

Informatik – 9

Einführung in HTML

11.04.23 2

HTML (I)

• 1989-1990 am Cern in Genf von Sir Tim Berners-Lee entwickelt

• Motivation:– Erstellung (wissensch.) Dokumente– Zugänglichkeit im Internet– Verknüpfung von Dokumenten

• Überzeugend: Einfachheit• MEGA-ERFOLG!

11.04.23 3

HTML (II)

• HTML: Hypertext Markup Language– dt.: Hypertext-Auszeichnungssprache

• Darstellen und verknüpfen von Texten, Bildern, usw.

• HTML-Seite: in Editor geschrieben• Dargestellt wird HTML-Seite jedoch vom

…– Browser

• Unterschied: Quelltext/Darstellung

11.04.23 4

HTML (III) – Tipps: Editor „Notepad++“

• „Ausführen“ → „Launch in FF“• Man sieht Vorschau des HTML-Dok. und

muss nicht extra Browser öffnen.• Jedesmal beim Anlegen neuer HTML-Datei:

– „Datei“→ „Öffnen“ – z.B. vorlage.html auswählen– vorlage.html: nicht überschreiben!!– Daher als aller, aller Erstes: Speichern

unter!!!

• Notepad++ selbst entdecken!

11.04.23 5

HTML (IV) – Übung (I)• Grundgerüst eines HTML-Quelltextes:

• Gib Quelltext im Editor ein, speichere ihn und öffne mit FF.

• Denke über die Bedeutung der einzelnen Elemente nach, und schreibe Deine Vermutungen auf.

Vorname.Nachname/JJ.MM.TT

Einführung HTML/dateiname

11.04.23 6

HTML (V) – Übung (I) Aufbau eines HTML-

Quelltextes:• Besteht aus Tags (dt.

Kennzeichner)• Tags markieren Anfang

und Ende eines Abschnitts (öffnend/schl.)

• <body>…</body> enthält Hauptteil des Doks, <head> …</head>enth. zusätzl. Infos

• Strukturierung des Textes über Tags!

• Zeilenmumbrüche ignoriert, stattdessen <br />

• Mehrere Leerz. zu einem zusammengefasst. Erzwingen:

11.04.23 7

HTML (VI) – Übung (II)• Baue die Seite links

möglichst originalgetreu nach. Hilfen:– Informationsblatt HTML– http://html-seminar.de

• Welche Tags brauchst Du?

• Wenn Du alles so nachgebaut hast, kannst Du darunter eigene (angemessene) Inhalte platzieren.

• Dann: Präsentation einer Seite inkl. Quelltext.

11.04.23 8

HTML (VII): Quelltext strukturieren!

• Muss strukturiert werden• Wie strukturieren?• Bei Verschachtelung

einrücken:• Einrückung: 2 Spaces

11.04.23 9

Übung (III) - Tabellen

• Baue die Seite links (Tabelle) möglichst originalgetreu nach.

• Wie wird folgende Tabelle erzeugt? Tipp: colspan/rowspan

• Versuche mit Hilfe einer Tabelle 3 Texte nebeneinander darzustellen

11.04.23 10

Übung (IV) - Links und Graphiken

• Informiere Dich, wie man in HTML auf andere Seiten verlinkt und beantworte schriftlich (Quelle: HTML-Seminar):– Was ist ein (Hyper-)Link? – Welche Arten von Links gibt es? – Auf was muss man bei der Benennung von HTML-Dateien

achten? – Erläutere Unterschied zwischen relative und absoluter

Adressierung

• Erstelle nun eine neue Webseite mit einer…– … geordneten Liste: Links auf externe Seiten– … ungeordneten Liste: Links auf interne (eigene)

Seiten, z.B.: test.html, liste.html, …– … binde Graphiken (inkl. Erläuterung) ein.

(auch: Graphik als Link!)

11.04.23 11

Übung (V) - Style-Attribute• Baue die Seite links

möglichst originalgetreu nach. Hilfen:– Informationsblatt HTML– http://html-seminar.de– „selbst entdecken“

• Wenn Du alles so nachgebaut hast, kannst Du darunter eigene (angemessene) Inhalte platzieren.

11.04.23 12

Übung (VI) - CSS

13

CSS (I) - „Cascading Style Sheets“

• CSS: Sinn? Motivation?– Trennung von Daten und Layout– Bsp.: http://www.csszengarden.com/tr/deutsch/

• Sprache: Def. von Formateigenschaften einzelner HTML-Elemente (Layout)

• 3 Möglichkeiten: – CSS wird in HTML-Tags eingebunden– CSS in <head>-Tag– CSS in eigener Datei

11.04.23

11.04.23

CSS (II) Einbindung von CSS, 3 Mögl.:

1. Direkt im HTML-Tag2. Im head-Tag: <style

type=“text/css“>…</style>3. Einbinden von CSS-Datei: <link

rel="stylesheet" href=„my-layout.css" type="text/css">

Schreibe die Nachrichteseite so um (Speichern unter), dass CSS im a) im <head>

b) aus externer Datei

verwendet wird.

14

• Jede/Jeder arbeitet für sich• (Ersetzt die Klassenarbeit)• Speichern auf USB-Stick• Projekt in 2/3 Doppelstunden.• Nach den HF: Vorstellung

HTML-Projekt (I)

1511.04.23

• Jede/Jeder stellt sich auf eigener HTML-Seite vor. Diese muss enthalten:– Listen (sortiert und unsortiert, z.B. Liebl.musik)– Tabellen (z.B. Stundenplan, zur Layout-Gestalt.)– Links (interne und externe)– Graphiken (Bilder von sich, Freunden, …)– CSS (Layout in externer Datei)– …

HTML-Projekt (II)

11.04.23 16

17

Tipps• Allg. Tipp: Vorsicht! Jeder Browser rendered anders!!!• Schriftart für Tabelle setzen:

– <table class=“myclass“> … </table>

• <img scr=“meinbild“ alt=“ich“> Fehler?• Fehlersuche: Teile auskommentieren

<!– und das >:-< ein Böses -->

• Hintergrundbild in CSS:body{

background-image:url(flagge_italien.gif); background-repeat:no-repeat; background-position:center middle;

}

11.04.23

Informatik – 9 Einführung in HTML. 04.03.2014 1 HTML (I) 1989-1990 am Cern in Genf von Sir Tim...

Documents

Transcript of Informatik – 9 Einführung in HTML. 04.03.2014 1 HTML (I) 1989-1990 am Cern in Genf von Sir Tim...