Einführung in HTML Text

Transkript

1 Einführung in HTML Text Übung 1 Erstellen Sie eine erste HTML-Datei, die den Titel Meine erste Seite besitzt und den Text Hallo Welt im Browser ausgibt. Übung 2 Öffnen Sie die Datei text.htm und formatieren Sie den Text, so dass die Datei im Browser wie im Screenshot rechts dargestellt wird. Übung 3 Öffnen Sie die Datei umlaute.htm und korrigieren Sie alle Umlaute, so dass die Datei im Browser mit Umlauten dargestellt wird. Ergänzen Sie ein Meta-Tag mit der Angabe des westeuropäischen Zeichensatzes. Übung 4 Setzen Sie die Kleinanzeige in eine HTML-Datei um. Lösung zu Übung 2 Lösung zu Übung 3 Lösung zu Übung 4

2 Einführun in HTML Tabellen Übung 1 Erstellen Sie eine Tabelle wie rechts abgebildet und formatieren Sie diese folgendermaßen: 1. Spalte: 100 px 2. Spalte: 250 px 3. Spalte: 100 px Tabellenrahmen: 1 px Zellenabstand: 0 px Zelleninnenabstand: 5 px Lösung zu Übung 1 Übung 2 Erstellen Sie die dargestellte High-Score - Tabelle und formatieren Sie diese folgendermaßen: Tabellenbreite: 80% (des Browsers) 1. Zeile verbindet die drei Spalten 1. Spalte: 50 px 2. Spalte: variabel 3. Spalte: 50 px Lösung zu Übung 2 Übung 3 Erstellen Sie ein Schachbrett, bei dem jedes Feld die Größe 40 x 40 Pixel besitzt. Lösung zu Übung 3

3 Einführung in HTML Bild und Grafik Übung 1 Erstellen Sie eine (unsichtbare) Tabelle und fügen Sie in die 1. und 3. Zeile die Texte 2. und 4. Zeile die Bilder ein. Hinweis: Die Größe der Tabellenzellen passt sich automatisch an. Übung 2 Wählen Sie neun Blumenbilder aus und bereiten Sie diese in Photoshop vor: Bildausschnitt: 300 x 300 px Dateiformat: JPG Datenmenge/Bild: < 30 KB Lösung zu Übung 1 Lösung zu Übung 2 Erstellen Sie eine HTML-Tabelle und fügen Sie die Bilder ein. Hintergrundfarbe: Schwarz Überschrift: Weiß

4 Einführung in HTML Hyperlinks Übung 1 Öffnen Sie die Datei index.html. Ergänzen Sie folgende Links: a. Link zur Datei text.htm b. Link zur Datei bild.htm c. Link zur PDF-Datei info.pdf d. -Link zur Adresse paul@panter.de e. Externer Link zu Öffnen Sie die Dateien text.htm und bild.htm und ergänzen Sie dort die Links zurück zur Datei index.htm. Testen Sie die verlinkten Dateien. Hinweis: Der -Link funktioniert nur, wenn ein -Client installiert ist. Lösung zu Übung 1 Übung 2 Erstellen Sie eine neue HTML-Datei. Platzieren Sie die sechs farbigen Buttons wie im Screenshot dargestellt. Geben Sie der Seite einen weißen Hintergrund (über bgcolor=... ). Verlinken Sie die Buttons: - Weiss zu weiss.html - Blau zu blau.html usw. Speichern Sie die Datei unter dem Namen weiss.html ab. Speichern Sie eine Kopie der Datei unter dem Namen blau.html. Ändern Sie die Hintergrundfarbe in dieser Datei in Blau ab. Erstellen Sie weitere Dateien für die Farben Gelb, Rot, Grün und Schwarz. Übung 3 Öffnen Sie die Datei grundlagen.html in Ordner Übung 3 (Ignorieren Sie die Stylesheets im Dateikopf... kommt später!) Verlinken Sie innerhalb der Datei so, dass durch Anklicken der Begriffe im Inhaltsverzeichnis ein Sprung an den jeweiligen Kapitelanfang erfolgt, durch Anklicken der blauen Pfeile ein Rücksprung zum Inhaltsverzeichnis erfolgt. Lösung zu Übung 2 Lösung zu Übung 3

5 Einführung in HTML Frames Übung 1 Erstellen Sie eine neue Datei index.htm. Geben Sie ein vertikales Frameset mit folgenden Kennwerten ein: Linker Frame: Breite: 120 Pixel Quelldatei (src=): navigation.htm Name (name=): links Rechter Frame: Breite: * (variabel) Quelldatei (src=): willkommen.htm Name (name=): rechts Lösung zu Übung 1 Geben Sie ein <noframe>-tag für Browser an, die nicht framefähig sind. Öffnen Sie die Datei index.htm im Webbrowser. Das Frameset bestehend aus zwei Frames müsste nun sichtbar sein. Verändern Sie die Größe des Browserfensters und achten Sie auf die Scrollbalken. Übung 2 Ergänzen Sie im Editor folgende Frameset- Eigenschaften: Linker Frame: Feste Größe, Kein Scrollbalken, Randabstand horizontal: 10 Pixel, vertikal: 20 Pixel Rechter Frame: Scrollbalken, Randabstand horizontal: 20 Pixel, vertikal: 20 Pixel Zwischen den Frames soll keine Linie angezeigt werden. Übung 3 Öffnen Sie die Datei navigation.htm. Ergänzen Sie folgende Hyperlinks: Klick auf Link zu Home willkommen.htm News news.htm Über mich uebermich.htm Kontakt kontakt.htm Beachten Sie, dass alle Links die Zielangabe target= rechts erhalten müssen. Speichern Sie die Änderungen ab und testen Sie die Links im Browser. Lösung zu Übung 2 und 3

6 Einführung in HTML Formulare Übung 1 Erstellen Sie das rechts dargestellte HTML-Formular. Übung 2 Entwerfen Sie ein Formular zur Auswahl eines Songs aus einer MP3-Datenbank. Die Titelwahl soll möglich sein durch: Textfeld zur Eingabe des gewünschten Titels Textfeld zur Eingabe des gewünschten Interpreten Radiobuttons zur Auswahl des Musikgenres, z.b. Alle, Rock, Pop, Punk, Hiphop, Metall,... Auswahlliste zur Auswahl des Zeitraums, in dem der Song erschienen ist z.b. > 2000, , , , < 1985 Lösung zu Übung 1

7 HTML-Referenz Struktur einer HTML-Datei Grundgerüst einer HTML-Datei <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>titel der Webseite</title> <meta.../> <meta.../> </head> <body> </body> </html> Text Gliederung von Text Überschriften (headlines) von sehr groß <h1> bis sehr klein <h7>: <h1> </h1> <h7> </h7> Absatz (paragraph): <p> </p> Zeilenumbruch (break): <br /> Geschütztes Leerzeichen (nonbreaking space): Physikalische Textauszeichnungen: <b>fett</b> <i>kursiv</i> <u>unterstrichen</u> <s>durchgestrichen</s> ^hochgestellt _tiefgestellt Logische Textauszeichnungen: <em>betont</em> <strong>stark betont</strong> <abbr>abkürzung</abbr> <acronym>akronym, z.b. WWW</acronym> <blockquote>zitat</blockquote> Aufzählungsliste (unordered list): <ul> <li> </li> <li> </li> </ul> Nummerierte Liste (ordered list): <ol> <li> </li> <li> </li> </ol> Umlaute und Sonderzeichen Zeichen Bedeutung Name Unicode < kleiner als < < > größer als > > Leerzeichen Copyright 2 Hoch 2 ² ² 3 Hoch 3 ³ ³ ¼ ein Viertel ¼ ¼ ½ ein Halb ½ ½ Ä A Umlaut Ä Ä Ö O Umlaut Ö Ö Ü U Umlaut Ü Ü ß scharfes S ß ß ä a Umlaut ä ä ö o Umlaut ö ö ü u Umlaut ü ü α Alpha klein α α Wurzel ungleich Euro Meta-Tags Wichtige Meta-Tags Autorenangabe: <meta name="author" content="paul" /> Datumsangabe: <meta name="date" content=" " /> Zugriff durch Suchprogramme verbieten: <meta name="robots" content= "noindex" /> Zugriff durch Suchprogramme gestatten: <meta name="robots" content="index" /> Kurzbeschreibung für Suchprogramme: <meta name="description" content= "Portal für Webdesigner" /> Schlüsselwörter für Suchprogramme: <meta name="keywords" content= "Gestaltung,Webdesign,Layout,Design, Mediengestalter,Medien" /> Angabe des HTML- bzw. Web-Editors <meta name="generator" content="phase 5" /> Angabe des westeuropäischen Zeichensatzes <meta http-equiv="content-type" content="text/html; charset=iso " /> Laden der Seite von Webserver erzwingen (nicht aus Browser-Cache): <meta http-equiv="expires" content="0" /> Automatische Weiterleitung, hier nach fünf Sekunden zu : <meta http-equiv="refresh" content="5; URL= info" />

8 HTML-Referenz Farben Farbangaben Hintergrundfarbe (hier: Weiß): <body bgcolor="#ffffff"> Textfarbe (hier: Schwarz): <body text="#000000"> Farbe eines Links (hier: Blau): <body link="#0000ff"> Farbe eines besuchten Links (hier: Rot): <body vlink="#ff0000"> Farbe eines gerade angeklickten Links (hier: Grün): <body alink="#00ff00"> Kombination der Angaben: <body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#ff0000" alink="#00ff00"> Bilder und Grafiken Referenzieren von Bildern und Grafiken Grafik button.gif im selben Verzeichnis (img = image = Bild, src = source = Quelle): <img src="button.gif" /> Grafik button.gif im Unterverzeichnis bilder : <img src="bilder/button.gif" /> Grafik im übergeordneten Verzeichnis: <img src="../button.gif" /> Grafik im übergeordneten Verzeichnis bilder : <img src="../bilder/button.gif" /> Angabe eines Alternativ-Textes (z.b. für Browser ohne Bildanzeige): <img src="news.gif" alt="button zu den News" /> Breiten- und Höhenangabe der Grafik in Pixel: <img src="button.gif" width="200" height="100" /> Grafik links, Text umfließt die Grafik rechts: <img src="bild.jpg" align="left" /> Grafik rechts, Text umfließt die Grafik links: <img src="bild.jpg" align="right" /> Textausrichtung am oberen Rand der Grafik: <img src="bild.jpg" align="top" /> Textausrichtung in der Mitte der Grafik: <img src="bild.jpg" align="middle" /> Textausrichtung am unteren Rand der Grafik: <img src="bild.jpg" align="bottom" /> Grafik ohne Rahmen als Hyperlink zur Datei index.htm : <a href="index.htm"><img src= "home.gif" border="0" /></a> Grafik home.gif als Hyperlink mit weiteren Angaben zur Formatierung: <a href="home.htm"><img src="home. gif" width="200" height="100" border="0" alt="home-button" /></a> Tabellen Definition und Eigenschaften von Tabellen Definition einer Tabelle (table) mit zwei Reihen (tr: table row) und zwei Spalten (td: table data): <table> <td> </td> <td> </td> <td> </td> <td> </td> </table> Angabe der Linienstärke des Rahmens (border), des Abstands der Zellen (cellspacing) sowie des Abstands des Inhalts zum Rand (cellpadding) in Pixel: <table border="" cellspacing="" cellpadding=""> Angabe der Zellenbreite und -höhe in Pixel oder Prozent (Bezug: Browserfenster): <table width="" height=""> <tr width="" height=""> <td width="" height=""> Tabelle mit Kopfzeile (th: table head): <table> <th> </th> <th> </th> Verbindung zweier Spalten: <table> <td colspan="2"> </td> <td> </td> <td> </td> </table> Verbindung zweier Reihen: <table> <td rowspan="2"> </td> <td> </td> <td> </td> </table>

9 HTML-Referenz Hyerplinks Hyperlinks auf externe Webseiten Hyperlink zu externer Adresse (URL): <a href=" Springer-Verlag</a> Hyperlink zu externer Adresse in neuem Browserfenster oder -tab: <a href=" target=_blank> Springer-Verlag</a> Hyperlink zu externer Adresse im selben Browserfenster: <a href=" target=_self>springer-verlag</a> -Link: <a href= >Paul</a> Frames Definition eines Framesets HTML-Datei mit vertikalem Frameset: <html> <head> <title>titel des Framesets</title> </head> <frameset cols="150,350"> <frame src="navi.htm" name="links"> <frame src="main.htm" name="rechts"> <noframes> <body> Ihr Browser kann keine Frames anzeigen! </body> </noframes> </frameset> </html> Hyperlink mit Grafik (ohne Rahmen): <a href=" <img src="bild.gif" border="0" /> </a> Hyperlinks auf Dateien Hyperlink zur Datei index.htm im selben Verzeichnis: <a href="index.htm">homepage</a> Hyperlink zur Datei index.htm im Unterverzeichnis sites : <a href="sites/index.htm">homepage </a> Horizontales Frameset (ohne HTML-Grundgerüst): <frameset rows="25%,75%"> <frame src="kopf.htm" name="oben"> <frame src="main.htm" name="unten"> </frameset> Hyperlink zur Datei index.htm im übergeordneten Verzeichnis: <a href="../index.htm">homepage</a> Hyperlink zu einer PDF-Datei: <a href="info.pdf">download</a> Hyperlink zur Datei news.htm mit Grafik (ohne Rahmen): <a href="news.htm"><img src="button. gif" border="0" /></a> Hyperlinks innerhalb von Dateien Hyperlink mit Sprungziel innerhalb der Datei: <a href="#kap1">kapitel 1</a> <a href="#kap2">kapitel 2</a> <a name="kap1">hier geht Kapitel 1 los.</a> <a name="kap2">hier geht Kapitel 2 los.</a> Erklärung: Das #-Zeichen weist auf ein Sprungziel innerhalb der Datei hin. Das Ziel wird mit name= gekennzeichnet und muss denselben Namen wie der Link jedoch ohne # erhalten. Sprungziele nach oben sind ebenso möglich, z.b. um wieder an den Seitenanfang zu gelangen. Verschachteltes Frameset (ohne HTML-Grundgerüst): <frameset cols="200,*"> <frame src="navi.htm" name="links"> <frameset rows="20%,*"> <frame src="kopf.htm" name="oben"> <frame src="main.htm" name="unten"> </frameset> </frameset> Eigenschaften von Frames/Framesets Ein Frameset ohne Rahmen anzeigen: <frameset cols="" frameborder="0" framespacing="0" border="0"> Frame ohne Bildlaufleiste (Scrollbar) anzeigen: <frame src="main.htm" name="links" scrolling="no"> Frames mit horizontalem bzw. vertikalem Randabstand in Pixel: <frame src="main.htm" name="links" marginwidth="" marginheight=""> Unveränderliche Fenstergröße: <frame src="main.htm" name="links" noresize> Hyperlinks im Frame Hyperlinks in der Datei navi.htm : <a href="news.htm" target="rechts"> News</a> <a href="info.htm" target="rechts"> Info</a>

10 HTML-Referenz Formulare Definition eines Formulars Auswertung des Formulars durch ein PHP- Skript: <form name="test" action="test.php" method="get"> <!-- Hier stehen die Formularelemente --> </form> Auswertung des Formulars durch ein Perl- Script: <form name="test" action="check.pl" method= "get"> <!-- Hier stehen die Formularelemente --> </form> Übertragung der Formulardaten per <form name="test" action="mailto: method="post"> <!-- Hier stehen die Formularelemente --> </form> Elemente eines Formulars Einzeiliges Textfeld: <input type="text" name="" size="" maxlength="" value="" /> Mehrzeiliges Textfeld: <textarea name="" cols="" rows=""> </textarea> Runder Radiobutton: <input type="radio" name="" value="" /> Quadratische Checkbox: <input type="checkbox" name="" value="" /> Auswahlliste (Menü): <select name=""> <option> </option> <option> </option> </select> Senden-Button: <input type="submit" value="" /> Reset-Button (löscht alle Eingaben): <input type="reset" value="" /> Verstecktes Feld (Erklärung siehe unten): <input type="hidden" name="" value="" />

11 Fehlersuche <html> <head> <title>wer sucht, der findet</titel> <meta name="description" content="wer findet die Fehler?"> <meta name="autor" content="schlaich"> </head> <body text="#000000" bgcolor="#fffff"> <h3>browseranteile im Internet</h2> <table border="0px"> <td width="250px">internet Explorer</td> <td width="80px">75 %</td> <td>mozilla Firefox</td> <td>16 %</td> <td>apple Safari</td> <td>5 %</td> <td>andere Browser</td> <td>4 %</td> <\tr> <br /> <img scr="browser.gif" widht="300px" height="300px" border="0" alt="bildchen"> <p>stand: 2008<br /> Quelle: <a href=" </body>

12 Kreuzworträtsel