Präsentation herunterladen
Die Präsentation wird geladen. Bitte warten
0
Informatik – 9 Einführung in HTML
1
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!
2
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
3
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!
4
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.
5
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:
6
HTML (VI) – Übung (II) Baue die Seite links möglichst originalgetreu nach. Hilfen: Informationsblatt HTML Welche Tags brauchst Du? Wenn Du alles so nachgebaut hast, kannst Du darunter eigene (angemessene) Inhalte platzieren. Dann: Präsentation einer Seite inkl. Quelltext.
7
HTML (VII): Quelltext strukturieren!
Muss strukturiert werden Wie strukturieren? Bei Verschachtelung einrücken: Einrückung: 2 Spaces
8
Ü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
9
Ü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!)
10
Übung (V) - Style-Attribute
Baue die Seite links möglichst originalgetreu nach. Hilfen: Informationsblatt HTML „selbst entdecken“ Wenn Du alles so nachgebaut hast, kannst Du darunter eigene (angemessene) Inhalte platzieren.
11
Übung (VI) - CSS
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 <head>-Tag CSS in eigener Datei
13
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.
14
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
15
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) …
16
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; }
Ähnliche Präsentationen
