Web-Publishing mit HTML

Transkript

1 Web-Publishing mit HTML Das HTML-Dokument: Jedes HTML 4-Dokument beginnt mit der Deklaration <!DOCTYPE>, um diese Version von anderen Versionen zu unterscheiden. <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.0 Final//EN> HTML- Element <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> </BODY> HEAD-Element mit Titel BODY-Element Ort der Anweisungen für die später sichtbaren Pages </HTML> HTML-Befehle werden auch als HTML-Tags bezeichnet. tag [tæg] 1. Etikett n; (Namens)Schild, (Preis)Schild n. 2. stehende Redensart. 3. ling. Frageanhängsel n. 4. Computer: Textsortenbezeichnung Alle Tags treten paarweise auf. Das erste Tag leitet einen Befehl/Option ein, das zweite (durch ein Slash-Zeichen gekennzeichnet) schließt ihn/sie ab.

2 Absätze, Überschriften, Formatierungen: <H2>Einfache Überschrift</H2> <P>Absatz: Dieses Zeichen ist der Start-Tag für einen Absatz. Der gesamte folgende Text wird dann vom Browser als dem gleichen Absatz zugehörig interpretiert. Der Absatz endet mit dem Tag</P> <P ALIGN=left>Formatiert den Absatz linksbündig</p> <P ALIGN=right>Formatiert den Absatz rechtsbündig</p> <P ALIGN=center>Formatiert den Absatz zentriert</p> a lign [ lain] 1. in eine (gerade) Linie bringen, tech. (aus)fluchten. 2. ausrichten Weitere Tags: <B>Fettdruck</B> <I>Kursiv</> <BR>Zeilenumbruch</BR> Diese Tags entsprechend in ein HTML-Dokument eingegeben, würden folgendes Ergebnis erbringen:

3 Ein Bild einfügen: Bilder werden mit IMG-Tag (Image) eingebunden. im age [ ImId ] s 1. Bild n (a. TV etc). 2. Abbild, Ebenbild <img src="demo.jpg" width=200 height=133 border=0 alt= > width = Breite des Bildes height = Höhe des Bildes border = Rand um das Bild (bei 0 kein Rand!) alt = Falls das Bild vom Browser nicht angezeigt werden kann, kann über das Alt-Attribut ein erklärender Text eingegeben werden. Diese Tags entsprechend in ein HTML-Dokument eingegeben, würden folgendes Ergebnis erbringen:

4 Textfluss und Textgröße Das Bild (kugel1.gif) normal in den Text eingegeben, erzeugt einen fließenden Text um das Bild herum. Um dies zu verhindern (Bild 2), wird der schon bekannte <br> Tag benötigt.... Es verwundert nicht, dass die <br clear="left"> <img src="kugel1.gif" width="48" height="45" border="0" alt="" align="left"><br clear="left"> Vor und hinter dem IMG-Tag wird der Zeilenumbruch-Tag <br clear= left > platziert. Überschriften werden mit dem <h1> - <h6> Tag dargestellt.

5 Formatierung von Text Fett schwarz Arial Normal blau Arial Normal rot Arial Normal blau invers Arial Programmierung: <head> <title>formatierung von Text</title> <style type="text/css"> </style> </head>.fett { color: black; font-style: Arial; font-size: 100%; font-weight : bold}.rot { color: red; font-style: Arial;}.Gruen { color: green; font-style: Arial;}.Normal { color: navy; font-style: Arial;}

6 Tabellen Einfache Tabelle: Drei Spalten und zwei Zeilen Tabelle Zeile 1 Zeile 2 <table> </table> Spalte 1-3 Spalte 1-3 Parameterauswahl: align Ausrichtung (center, left, right) bgcolor Hintergrundfarbe border=? Ränder definieren vlign Ausrichtung (bottom, middle, top) width=? Breite der Tabelle/Spalten (Pixel) height=? Höhe der Spalten in Pixel Merke: Jede Tabelle beginnt mit dem <table>-tag und endet mit dem </table>-tag. Jede Zeile beginnt mit dem -tag und endet mit dem -tag. Jede Spalte beginnt mit dem <td>-tag und endet mit dem </td>-tag. Zwischen den jeweiligen Spaltentags steht der Feldinhalt. Bsp.: <td>w2a</td> Aufgabe Versuchen Sie obige Tabelle zu erzeugen.

7 Weitere Beispiele Verbinden von Spalten: Hallo, dies ist eine Demonstration, was man mit Tabellen alles machen kann Umsetzung in html: <table cellspacing = "2" cellpadding = "2" border = "1" width = "400"> <td width="200">hallo,</td> <td width="200">dies</td> <td colspan="2" width="400" align="center">ist eine Demonstration,</td> <td width="200">was man mit Tabellen</td> <td width="200">alles machen kann</td> </table> Erklärung: cellspacing erniedrigt bzw. erhöht den Abstand zwischen den einzelnen Zeilen cellpadding legt den Abstand des Inhaltes (z. B. Text) zum Zellenrand in Pixel fest colspan der Wert (z. B. 2) gibt an, über wie viele der darunterliegenden Zellen die aktuelle Zelle reichen soll. Verbinden von Zeilen: Demonstration dies man Tabellen kann mit machen Umsetzung in html: <table cellspacing="0" cellpadding="2" border="1" width="500"> <td rowspan="2" width="100" align="center" valign="middle">demonstration</td> <td width="200">dies kann</td> <td width="200">man mit</td> <td width="250">tabellen</td> <td width="250">machen</td> </table> Erklärung: rowspan legt die Zellenhöhe in Bezug auf die rechts daneben stehenden Zellen fest.

8 Frames Frame 1 Frame 2 Der Sinn von Frames ist, man kann mehrere Fenster gleichzeitig zeigen, die jeweils unterschiedliche Informationen beinhalten. Das obige linke Frame dient als Menü, im rechten wird die entsprechende Information zu jedem Menüpunkt angezeigt. 1. Schritt: Definieren der Frames Page 1 Sofa1.htm in dieser Seite werden die Frames definiert. Jedes Frame bekommt einen Namen, um es ansprechen zu können. <html> <head> <title>unbenannt</title> </head>  <frameset cols="24%,*"> <frame name="auswahlfenster" src="sofa1.htm" scrolling="auto" frameborder="0"> <frame name="hauptfenster" src="sofa2.htm" scrolling="auto" frameborder="0"> </frameset> </html> Erklärung: Name der Fenster Pages, die in den Frames geöffnet werden

9 2. Schritt: Erstellen der Menüseite für das Auswahlfenster (Sofa1.htm) <html> <head> <title>unbenannt</title> <style title="text/css">.weissfett { color: white; font-style: Arial; font-size: 100%; font-weight : bold} </style> </head> <body bgcolor="navy"> <a href="sofa3.htm" target="hauptfenster" class="weissfett">wahl 1</a><br> <a href="#" target="hauptfenster" class="weissfett">wahl 2</a><br> <a href="#" target="hauptfenster" class="weissfett">wahl 3</a><br> </body> </html> Erklärung: Das Anker-Tag <a href= {Name der Seite} >{Text}</a> schafft ein Link, über das eine andere Seite geöffnet werden kann.... target= Hauptfenster... gibt das Frame an, in welchem die Seite erscheinen soll. 3. Schritt: Erstellen der Startseite für das Hauptfenster (Sofa2.htm) Die kann nach eigenem Geschmack gestaltet werden, z.b.: <html> <head> <title>unbenannt</title> </head> <body> <br><br><br><br><br> <p align="center">willkommen in unserer Homepage</p> </body> </html> 4. Schritt: Erstellen der Seiten, die über das Menü geöffnet werden können (Sofax.htm)

10 Aufgabe Erstellen Sie obige Seite. Achten Sie dabei auf die Formatierung. Das Icon oben im linken Frame können Sie durch ein anderes Image ersetzen. Hinweis: Wenn man im linken Frame auf Berufsschule klickt, öffnet sich im rechten Frame eine Seite, in der alle Berufschularten angezeigt werden. Klickt man nun im rechten Frame auf Sozialversicherung, wird obige Seite angezeigt. Beginn Auswahl Startseite Klick auf Berufsschule im Auswahl-Fenster Auswahl Berufsschulbereiche Klick auf Sozialversicherungsfachangestellte im Berufsschulbereich Auswahl obige Seite