Informatik 9
This presentation is the property of its rightful owner.
Sponsored Links
1 / 17

Informatik – 9 PowerPoint PPT Presentation


  • 59 Views
  • Uploaded on
  • Presentation posted in: General

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

Download Presentation

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Informatik 9

Informatik – 9

Einführung in HTML


Html i

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

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


Html iii tipps editor notepad

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!


Html iv bung i

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.


Html v bung i

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;


Html vi bung ii

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.


Html vii quelltext strukturieren

HTML (VII): Quelltext strukturieren!

Muss strukturiert werden

  • Wie strukturieren?

  • Bei Verschachtelung einrücken:

    • Einrückung: 2 Spaces


Bung iii tabellen

Ü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


Bung iv links und graphiken

Ü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!)


Bung v style attribute

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


Informatik 9

Übung (VI) - CSS


Css i cascading style sheets

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


Css ii

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.


Html projekt i

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


Html projekt ii

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)


Tipps

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;

}


  • Login