HTML - Die Sprache des Internets. Grundlagen und Kurzprojekt

Größe: px

Ab Seite anzeigen:

Download "HTML - Die Sprache des Internets. Grundlagen und Kurzprojekt"

Heike Koenig
vor 6 Jahren
Abrufe

1 - Die Sprache des Internets Grundlagen und Kurzprojekt

2 aus der Presse:

3 Definition : Hypertext Markup Language Sprache des WWW definiert: Text- und Absatzformate Links Bild- und Tonelemente Farben offener Standard plattform-unabhängig

4 Grundidee Tag Tags zur Formatierung (tag: englisch Etikett) Starttag: <p> entsprechendes Endtag: </p> Idee: zu formatierender Text wird durch Startund Endtag eingeklammert: <h1>titel 1. Ebene</h1> <p>text eines Absatzes</p> <li>text einer Liste</li> Achtung z.t. keine Endtags: z.b. Zeilenumbruch <br />

5 Tag mit Attributen <p align="right">text</p> <h1 align="center">text</h1> <ul type="square">text</ul> <ol start="10">text</ol> <img src="bilder/feuer.gif" /> <table width="80%">...</table> Attribut Attributwert

6 Grundstruktur -Dokument <html> <head> <title>titel für BrowserFenster</title> </head> <body> <h1>titel 1. Ebene</h1> <p>text eines Absatzes</p>... </body> </html>

7 Grundstruktur grafisch <html> <head> </head> <body> </body> </html>

8 Arbeitsweise Editor Notepad++ Browser ErsteSeite.html

9 Teil II Tabellen und Listen

10 Tabelle: 1 Zeile x 2 Spalten <table> <tr> <td>zelle 1.1</td> <td>zelle 1.2</td> </tr> </table> Zelle 1.1 Zelle 1.2

11 Tabelle: 3 Zeilen x 2 Spalten <table> <tr> <th>kopf 1.1</th> <th>kopf 1.2</th> </tr> <tr> <td>zelle 2.1</td> <td>zelle 2.2</td> </tr> <tr> <td>zelle 3.1</td> <td>zelle 3.2</td> </tr> </table> Kopf 1.1 Zelle 2.1 Zelle 3.1 Kopf 1.2 Zelle 2.2 Zelle 3.2

12 Tabellen Eigenschaften Rahmenbreite Tabellenbreite Hintergrundfarbe <table border="2px"> <table width="80%"> <table bgcolor="khaki"> Zelleninhalt ausrichten Kombination <td align="right"> bzw. left od. center <table border="2px" bgcolor="green">

13 Komplexe Tabellen Zellen verbinden horizontal vertikal horizontal und vertikal <td colspan="2">...</td> <th rowspan="3">...</th> <td colspan="3" rowspan="2">...</td>

14 Tabelle: Aufgabe 1 Zeichnen Sie die folgende Tabelle auf: <table border="1px" width="120px" bgcolor="lime"> <tr> <th>1</th> <th>2</th> <th>3</th> </tr> <tr> <td rowspan="2">4</td> <td colspan="2">5</td> </tr> <tr> <td colspan="2" align="center">6</td> </tr> </table>

15 Tabelle: Lösung Aufgabe

16 Tabellen: verborgen

17 Tabellen: Aufgabe 2

18 Tabellen Aufgabe 3

19 Listen nummeriert: <ol start="7"> <li>1. Aspekt</li> <li>2. Aspekt</li> </ol> nicht nummeriert (Bullets): <ul type="circle"> <li>aspekt A</li> <li>aspekt B</li> </ul>

20 Teil III Verweise: Anker und Hyperlinks

21 Anker setzen <a name="kap1">grundlagen</a> <a name="kap2">funktion</a> <a name="top">seitentitel</a> Anker anspringen <a href="#kap1">zu Grundlagen</a> <a href="#kap2">zu Funktion</a> <a href="#top">zu Seitenanfang</a>

22 interner Verweis (Link) <a href="index.html">startseite</a> <a href="[pfad]/index.html">start</a> externer Verweis <a href=" Kantonsschule Willisau</a> <a href=" Suchmaschine Google</a>

23 interner Verweis mit Anker <a href="ozon.html#kap2">kapitel2</a> externer Verweis mit Anker <a href=" welcome.html#kontakt"> Kantonsschule Willisau</a>

24 -Verweis <a Kontakt </a> <a </a> <a subject=mail%20von%20website">... </a> <a body=hallo,%0d%0a%0d%0aich%20w ">... </a> Details: de.selfhtml.org

25 Teil IV Grafiken einbinden

26 Grafiken einfügen aus gleichem Ordner: <img src="firewall.gif" /> aus Unterordner "Bilder": <img src="bilder/firewall.gif" /> aus Ordner eine Ebene oberhalb: <img src="../firewall.gif" />

27 Einbindung Beispiele: <img src="datei.gif" /> <img src="[pfad]/datei.gif" /> <img src=" /> Texfluss links/rechts: <img src="datei.gif" align="left" /> <img src="datei.gif" align="right" />

28 Optionen Beispiel komplett: <img scr="bilder/sonaball.jpg" title="pianobar am Sommernachtsball 08" alt="newsbild" longdesc="sobabeschreibung.html" border="2px" />

29 Teil V CSS Stylesheets

30 Grundidee Vorlagen für Formatierungen als CSS-Datei speichern (Stylesheet): body { background: #ededed; } h1 { font-weight: bold; font-family: verdana, Geneva, Arial; font-size: 16px; margin-top: 4; color: navy; }

31 Grundidee in einbinden im Kopfbereich: <link rel="stylesheet" href="mainstyle.css" type="text/css">

32 Teil VI Frames

33 Grundidee Browserfenster kann in verschiedene Bereiche unterteilt werden jeder Bereich kann eine andere - Seite anzeigen ermöglicht einen einheitlichen Aufbau einer Site auf einfache Weise das Grundraster wird im Frameset definiert, einer nicht angezeigten - Seite

34 Frameset index.html navigation main

35 Bsp. Navigation index.html navi.html

36 Bsp. Navigation index.html navi.html welcome.html

37 Bsp. Navigation index.html navi.html kapitel1.html

38 Bsp. Navigation index.html navi.html kapitel2.html

39 Bsp. Navigation index.html navi.html kapitel1.html

40 Pro und Contra Jeder Frame kann einzeln aktualisiert werden Navigation kann einfach realisiert werden Einheitliche Gestaltung einer Site Lexika, Kataloge, Verzeichnisse Grosse Sites Mehrere -Seiten müssen beim ersten Aufruf gleichzeitig geladen werden Favoriten speichern nur das Frameset Einige Browser unterstützen keine Frames Navigation beim Surfen unübersichtlich

41 Frames: Tag u. Eigenschaften <html> <head> index.html </head> <frameset border="0" cols="130,700"> <frame src="navi.html" name="navigation"> <frame src="welcome.html" name="main"> </frameset> </html>

42 Frames: Bsp. Navigation <html> <head> <title>navigation</title> </head> <body> navi.html <a href="welcome.html" target="main">welcome</a> <a href="dienste.html" target="main">web Dienste</a> <a href="sicherheit.html" target="main">sicherheit</a> </body> </html>

43 Frames: Variante index.html navi.html welcome.html

44 Frames: Variante index.html kopf.html navi.html welcome.html

Ähnliche Dokumente

Meine erste Homepage - Beispiele

Meine erste Homepage - Beispiele Meine erste - Beispiele 1. Beispiel meine Willkommen auf meiner Befehle nicht über Hier ist ein Senior, der noch fit für's Internet ist. Probieren wir