Informatik – 9 Einführung in HTML
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! 28.03.2017
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 28.03.2017
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! 28.03.2017
Vorname.Nachname/JJ.MM.TT Einführung HTML/dateiname HTML (IV) – Übung (I) Grundgerüst eines HTML-Quelltextes: Vorname.Nachname/JJ.MM.TT Einführung HTML/dateiname Gib Quelltext im Editor ein, speichere ihn und öffne mit FF. Denke über die Bedeutung der einzelnen Elemente nach, und schreibe Deine Vermutungen auf. 28.03.2017
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: 28.03.2017
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. 28.03.2017
HTML (VII): Quelltext strukturieren! Muss strukturiert werden Wie strukturieren? Bei Verschachtelung einrücken: Einrückung: 2 Spaces 28.03.2017
Ü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 28.03.2017
Ü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!) 28.03.2017
Ü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. 28.03.2017
Übung (VI) - CSS 28.03.2017
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 28.03.2017
CSS (II) Einbindung von CSS, 3 Mögl.: Direkt im HTML-Tag Im head-Tag: <style type=“text/css“>…</style> 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. 28.03.2017
HTML-Projekt (I) Jede/Jeder arbeitet für sich (Ersetzt die Klassenarbeit) Speichern auf USB-Stick Projekt in 2/3 Doppelstunden. Nach den HF: Vorstellung 28.03.2017
HTML-Projekt (II) 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) … 28.03.2017
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 <!-- Das :-) ist ein liebes Kommentar --> <!– und das >:-< ein Böses --> Hintergrundbild in CSS: body{ background-image:url(flagge_italien.gif); background-repeat:no-repeat; background-position:center middle; } 28.03.2017