Die Präsentation wird geladen. Bitte warten

Die Präsentation wird geladen. Bitte warten

Informatik – 9 Einführung in HTML. 04.03.2014 1 HTML (I) 1989-1990 am Cern in Genf von Sir Tim Berners-Lee entwickelt Motivation: –Erstellung (wissensch.)

Ähnliche Präsentationen


Präsentation zum Thema: "Informatik – 9 Einführung in HTML. 04.03.2014 1 HTML (I) 1989-1990 am Cern in Genf von Sir Tim Berners-Lee entwickelt Motivation: –Erstellung (wissensch.)"—  Präsentation transkript:

1 Informatik – 9 Einführung in HTML

2 HTML (I) 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!

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

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!

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.Nachna me/JJ.MM.TT Einführung HTML/dateiname

6 HTML (V) – Übung (I) Aufbau eines HTML- Quelltextes: Besteht aus Tags (dt. Kennzeichner) Tags markieren Anfang und Ende eines Abschnitts (öffnend/schl.) … enthält Hauptteil des Doks, … enth. zusätzl. Infos Strukturierung des Textes über Tags! Zeilenmumbrüche ignoriert, stattdessen Mehrere Leerz. zu einem zusammengefasst. Erzwingen:

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.

8 HTML (VII): Quelltext strukturieren! Muss strukturiert werden Wie strukturieren? Bei Verschachtelung einrücken: Einrückung: 2 Spaces

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

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 Ü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.

12 Übung (VI) - CSS

13 12 CSS (I) - Cascading Style Sheets CSS: Sinn? Motivation? –Trennung von Daten und Layout –Bsp.: Sprache: Def. von Formateigenschaften einzelner HTML-Elemente (Layout) 3 Möglichkeiten: –CSS wird in HTML-Tags eingebunden –CSS in -Tag –CSS in eigener Datei

14 CSS (II) Einbindung von CSS, 3 Mögl.: 1.Direkt im HTML-Tag 2.Im head-Tag: … 3.Einbinden von CSS-Datei: Schreibe die Nachrichteseite so um (Speichern unter), dass CSS im a) im b) aus externer Datei verwendet wird. 13

15 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)

16 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)

17 16 Tipps Allg. Tipp: Vorsicht! Jeder Browser rendered anders!!! Schriftart für Tabelle setzen: – … Fehler? Fehlersuche: Teile auskommentieren :- Hintergrundbild in CSS: body{ background-image:url(flagge_italien.gif); background-repeat:no-repeat; background-position:center middle; }


Herunterladen ppt "Informatik – 9 Einführung in HTML. 04.03.2014 1 HTML (I) 1989-1990 am Cern in Genf von Sir Tim Berners-Lee entwickelt Motivation: –Erstellung (wissensch.)"

Ähnliche Präsentationen


Google-Anzeigen