- Die Sprache des Internets Grundlagen und Kurzprojekt
aus der Presse:
Definition : Hypertext Markup Language Sprache des WWW definiert: Text- und Absatzformate Links Bild- und Tonelemente Farben offener Standard plattform-unabhängig
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 />
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
Grundstruktur -Dokument <html> <head> <title>titel für BrowserFenster</title> </head> <body> <h1>titel 1. Ebene</h1> <p>text eines Absatzes</p>... </body> </html>
Grundstruktur grafisch <html> <head> </head> <body> </body> </html>
Arbeitsweise Editor Notepad++ Browser ErsteSeite.html
Teil II Tabellen und Listen
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
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
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">
Komplexe Tabellen Zellen verbinden horizontal vertikal horizontal und vertikal <td colspan="2">...</td> <th rowspan="3">...</th> <td colspan="3" rowspan="2">...</td>
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>
Tabelle: Lösung Aufgabe 1 1 2 3 4 5 6
Tabellen: verborgen
Tabellen: Aufgabe 2
Tabellen Aufgabe 3
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>
Teil III Verweise: Anker und Hyperlinks
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>
interner Verweis (Link) <a href="index.html">startseite</a> <a href="[pfad]/index.html">start</a> externer Verweis <a href="http://www.kswillisau.ch"> Kantonsschule Willisau</a> <a href="http://www.google.ch"> Suchmaschine Google</a>
interner Verweis mit Anker <a href="ozon.html#kap2">kapitel2</a> externer Verweis mit Anker <a href="http://www.kswillisau.ch/ welcome.html#kontakt"> Kantonsschule Willisau</a>
E-Mail-Verweis <a href="mailto:hugo@bsp.org"> Kontakt </a> <a href="mailto:hugo@bsp.org? cc=heidi@muster.org"> </a> <a href="mailto:hugo@bsp.org? subject=mail%20von%20website">... </a> <a href="mailto:hugo@bsp.org? body=hallo,%0d%0a%0d%0aich%20w ">... </a> Details: de.selfhtml.org
Teil IV Grafiken einbinden
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" />
Einbindung Beispiele: <img src="datei.gif" /> <img src="[pfad]/datei.gif" /> <img src="http://.../datei.gif" /> Texfluss links/rechts: <img src="datei.gif" align="left" /> <img src="datei.gif" align="right" />
Optionen Beispiel komplett: <img scr="bilder/sonaball.jpg" title="pianobar am Sommernachtsball 08" alt="newsbild" longdesc="sobabeschreibung.html" border="2px" />
Teil V CSS Stylesheets
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; }
Grundidee in einbinden im Kopfbereich: <link rel="stylesheet" href="mainstyle.css" type="text/css">
Teil VI Frames
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
Frameset index.html navigation main
Bsp. Navigation index.html navi.html
Bsp. Navigation index.html navi.html welcome.html
Bsp. Navigation index.html navi.html kapitel1.html
Bsp. Navigation index.html navi.html kapitel2.html
Bsp. Navigation index.html navi.html kapitel1.html
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
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>
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>
Frames: Variante index.html navi.html welcome.html
Frames: Variante index.html kopf.html navi.html welcome.html