informatik 9
Download
Skip this Video
Download Presentation
Informatik – 9

Loading in 2 Seconds...

play fullscreen
1 / 17

Informatik – 9 - PowerPoint PPT Presentation


  • 78 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' Informatik – 9' - quito


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

}

ad