1 / 17

Informatik – 9

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!. HTML (II).

quito
Télécharger la présentation

Informatik – 9

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Informatik – 9 Einführung in HTML

  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!

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

  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: &nbsp;

  7. HTML (VI) – Übung (II) • Baue die Seite links möglichstoriginalgetreu 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öglichstoriginalgetreu 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öglichstoriginalgetreu 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. 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

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

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

  16. 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) • …

  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 <!-- 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; }

More Related