Einführung in das Erstellen von WebPages
Werbung
Art Director Thomas Frierss Programm Vorträge HTML I, II und III PHP I und II MySQL und PHP JavaScript Workshops HTML Webdesign Dreamweaver Flash Photoshop Folie 2 Info - Internet Internet TCP/IP IP-Adresse DNS-Server URL Web-Server Web-Client Folie 3 Info - Surfen Eingabe der URL im Browser Browser holt IP-Adresse vom DNSServer Browser schickt Anfrage an IP-Adresse Zielrechner schickt HTML-Datei zurück Browser empfängt diese Browser stellt HTML-Datei dar Folie 4 HTML - Die Grundlagen Hypertext Markup Language Auszeichnungssprache Hierarchische Gliederung Hyperlinks Verweise auf beliebige Stellen im eigenen Dokument oder auf andere Dokumente Universell einsetzbar Folie 5 HTML - Dateinamen Verwenden Sie Kleinbuchstaben für Dateinamen, Verweise, Grafiken, etc. Der Dateiname bis zu 256 Zeichen möglich keine Umlaute, Sonderzeichen und Leerzeichen, am besten nur a-z, 0-9, _ "Einstiegsseite" index.html (htm), welcome.html (htm) oder default.html (htm) Folie 6 HTML - Dateiendungen HTML-Datei GIF-Grafiken JPEG-Grafiken PNG-Grafiken Stylesheets JAVASkript Shockwave-Flash .html oder .htm .gif .jpg .png .css .js .swf Folie 7 HTML - TAGs und Attribute HTML-Dateien bestehen aus ASCII-Text mit einfachem Text-Editor zu bearbeiten vorteilhafter sind ausgereifte HTML-Editoren TAGs zwei spitze Klammern, die HTML-Befehle beinhalten einleitende (<b>) und abschließende (</b>) Tags Attribute zusätzliche Einstellungen Folie 8 Beispiel - TAG Dieses Wort ist <b>fett</b> Dieses Wort ist <font size="1">kleiner</font> <h4 align="center">Dieser Text ist eine Überschrift der 4. Ebene und wird zentriert dargestellt</h4> Folie 9 HTML - Eingaberegeln Mit dem Grundgerüst beginnen Tabulator, Return und mehrere Leerzeichen hintereinander werden vom Browser ignoriert Zeilenumbrüche und Absätze lassen Sie den Überblick behalten Kommentare verwenden Folie 10 HTML - Das Grundgerüst <html> bzw. </html> schließt den gesamten Inhalt einer HTML- Datei ein <head> bzw. </head> definiert die Kopfzeile (Metaangaben) <title> bzw. </title> erscheint in der Titelleiste <body> bzw. </body> schließt die eigentliche WWW-Seite ein Folie 11 HTML – Grundgerüst - Bsp <html> <head> <title>Titel der Seite</title> </head> <body> ........... </body> </html> Folie 12 Live-Demonstration Anlegen und Testen einer HTML-Seite Folie 13 HTML - Metaangaben Suchbegriffe definieren <meta name="Keywords" content="HTML, Web Publishing"> Autor angeben <meta name="Author" content="Franz Gonzo Mustermann, [email protected]"> Automatisch auf andere Seite weiterleiten <meta http-equiv="refresh" content="5; url=http://www.kurier.at"> Folie 14 HTML - Farben Festlegen von Farben durch Angabe eines Farbnamens ○ leichtere Eingabe ○ jedoch nur 16 standardisierte Farbnamen Angabe der RGB-Werte in Hexadezimalform ○ 00-FF (Rot) 00-FF (Grün) 00-FF (Blau) z.B. 000000 Schwarz, 00FF00 Grün, FFFFFF Weiß ○ Browserunabhängig ○ 16,7 Mio. Farben möglich Tipp: http://www.html-seminar.de/farben.htm Folie 15 HTML - Absätze 1 Definition von Absätzen normale Zeilenschaltung wird vom Browser nicht interpretiert entsprechender HTML-Befehl ist daher nötig Referenz Hier steht der erste Absatz. <p> Hier beginnt der zweite Absatz. Folie 16 HTML - Absätze 2 <p> = paragraph Position steht am Zeilenende des vorherigen Absatzes, in einer eigenen Zeile oder am Zeilenanfang des nächsten Absatzes der Form halber sollte zu Beginn eines Absatzes ein einleitendes Tag <p> und am Ende ein abschließendes Tag </p> stehen Folie 17 HTML - Absätze 3 Ausrichtung von Absätzen Absätze werden idR linksbündig ausgerichtet mit dem Attribut align ist auch eine rechtsbündige (right), zentrierte (center) Ausrichtung sowie Blocksatz (justify) möglich Referenz <p align="right">Das ist ein rechtsbündiger Text oder <p align="center">Der Text ist zentriert</p> Folie 18 HTML - Zeilenumbruch 1 Browser bricht Text automatisch um <br> = break = Umbruch bewirkt einen erzwungenen Zeilenumbruch Referenz Die Zeile endet hier.<br> Hier beginnt die neue Zeile. Position am Ende, in einer eigenen Zeile oder am Anfang der nächsten Zeile Folie 19 HTML - Zeilenumbruch 2 Zeilenumbruch verhindern in diesem Fall erzeugt der Browser keinen automatischen Zeilenumbruch horizontale Bildlaufleiste ermöglicht Blättern Referenz <nobr>Dieser Text wird nicht umgebrochen</nobr> Folie 20 HTML - Überschriften 1 6 Überschriftebenen (h1 bis h6) h = heading = Überschrift Keine Absatzschaltungen vor und nach Überschriften Referenz <h1>Dies ist die höchste Ebene</h1> <h6>Dies ist die niedrigste Ebene</h6> Folie 21 HTML - Überschriften 2 Überschriften ausrichten idR sind Überschriften linksbündig ausgerichtet mit dem Attribut align können Überschriften wahlweise zentriert (center), rechtsbündig (right) oder auch im Blocksatz (justify) ausgerichtet werden Referenz <h1 align="center">Überschrift ist zentriert</h1> Folie 22 HTML - Numerierte Listen 1 Numerierte Listen definieren alle Listeneinträge werden automatisch durchnumeriert Referenz <ol> <li>Das ist der 1. Punkt</li> <li>Das ist der 2. Punkt</li> <li>Das ist der 3. und letzte Punkt</li> </ol> Folie 23 HTML - Numerierte Listen 2 <ol> = ordered list leitet eine Liste ein und </ol> beendet diese <li> = list item leitet einen neuen Punkt innerhalb der Liste ein und </li> beendet den Eintrag </li> ist nicht unbedingt erforderlich Folie 24 HTML - Numerierte Listen 3 Listen werden idR mit 1., 2., 3., ... numeriert Numerierungsmöglichkeiten <ol type="A"> Liste wird mit A., B., C., ... numeriert <ol type="a"> Liste wird mit a., b., c., ... numeriert <ol type="I"> Liste wird mit I., II., III., ... numeriert <ol type="i"> Liste wird mit i., ii, iii., ... numeriert Folie 25 HTML - Numerierte Listen 4 Startwert der Numerierung festlegen Listen beginnen idR mit dem Wert 1 bzw. A Mit dem Attribut start kann ein neuer Startwert eingegeben werden ○ <ol start="5"> <li>Der Eintrag beginnt mit Nummer 5.</li> <li>Der Eintrag erhält die Nummer 6.</li> </ol> Folie 26 HTML - Aufzählungen 1 sogenannte Bullet-Listen enthalten Aufzählungszeichen Referenz <ul> <li>Listeneintrag</li> <li>noch ein Listeneintrag</li> <li>noch ein Listeneintrag</li> </ul> Folie 27 HTML - Aufzählungen 2 <ul> = unordered list leitete eine Aufzählungsliste ein, die mit dem Tag </ul> beendet wird. <li> = list item leitet einen neuen Punkt innerhalb der Aufzählungsliste ein und </li> beendet den Eintrag </li> ist nicht unbedingt erforderlich Folie 28 HTML - Aufzählungen 3 Aufzählungszeichen festlegen <ul type="disc"> rund und ausgefüllt <ul type="square"> eckig und ausgefüllt <ul type="circle"> rund und ohne Füllung Folie 29 HTML - Bereiche 1 Festlegen von Bereichen mehrere Absätze, bestehend aus Text, Grafiken, Tabellen, etc. können zusammengefaßt werden gemeinsame Ausrichtung ist möglich Referenz <div align="center"> <h1>Die Sonne scheint</h1> <img src="sonne.gif">Sonnenschein <p>Fließtext</p> </div> Folie 30 HTML - Bereiche 2 <div> = division = Bereich leitet einen Bereich ein, der mehrere Element beinhaltet und mit </div> beendet wird align="center" legt fest, daß alle Elemente des festgelegten Bereiches zentriert dargestellt werden Folie 31 HTML - Textauszeichnung 1 Logische Textauszeichnung WWW-Browser entscheidet über die Darstellung anzuwenden bei wissenschaftlichen bzw. reinen Informations-Texten Beispiele für logische Textauszeichnung: ○ <strong> ... </strong> Text wird "stark betont" ○ <code> ... </code> Text wird als "Quellcode" formatiert ○ <cite> ... </cite> Text wird als "Zitat" formatiert ○ <kbd> ... </kbd> Text wird als "Tastatureingabe" formatiert Folie 32 HTML - Textauszeichnung 2 Physische Textauszeichnung der Autor gibt vor, wie Text hervorzuheben ist vor allem für grafische Umgebungen gedacht Beispiel für physische Textauszeichung: ○ <b> ... </b> Text wird fett dargestellt ○ <i> ... </i> Text wird kursiv dargestellt ○ <u> ... </u> Text wird unterstrichen dargestellt ○ <s> ... </s> Text wird durchgestrichen dargestellt ○ <blink> ... </blink> blinkender Text ○ <sup> ... </sup> Text wird hochgestellt ○ <sub> ... </sub> Text wird tiefgestellt Folie 33 HTML - Schriftgröße absolute Schriftgröße <font size="7">riesiger Text</font> <font size="1">winziger Text</font> relative Schriftgröße <font size="+1">etwas größer als normal</font> <font size="-2">deutlich kleiner als normal</font> Folie 34 HTML - Schriftfarbe Festlegen der Schriftfarbe Kontrast zwischen Text- und Hintergrundfarbe muß vorhanden sein Referenz <font color="#FFFFFF">weiße Schrift</font> <font color="#0000FF">blaue Schrift</font> <font color="green">grüne Schrift</font> Folie 35 HTML - Schriftart Festlegen der Schriftart mehrere angegebene Schriftarten sind möglich Vorsicht bei "exotischen" Schriftarten Referenz <font face="Impact">Text in Schrift Impact</font> <font face="Impact, Arial Black">Text wird entweder in Impact oder Arial Black angezeigt</font> Folie 36 HTML - Leerzeichen Browser bricht bei Leerzeichen um Geschütze Leerzeichen verhindern einen unerwünschten Umbruch &nbsp; = nonbreaking space oder Zeichenfolge: &#160 Referenz Teil&nbsp;1 der Homepage vermittelt einen kurzen Überblick. Folie 37 HTML - Sonderzeichen Umlaute ä durch &auml; Ö durch &Ouml; ß durch &szlig; HTML-eigene Zeichen " durch &quot; & durch &amp; Folie 38 HTML - Kommentare An beliebiger Stelle einzugeben Browser zeigt Kommentare nicht an Festgelegte Zeichenfolge <!-- Das ist ein Kommentar --> <!-- Das ist ein mehrzeiliger Kommentar Hier endet der Kommentar //--> Folie 39 HTML - Hyperlinks allgemein Hyperlinks ermöglichen Strukturierung des Inhaltes rasche Navigation einfache Verweise Die Goldene Mitte finden zu viele Verweise verwirren den Leser zu wenige Verweise erschweren das Navigieren Folie 40 HTML - Hyperlinks erzeugen Einheitliches Schema <a href="verweisziel">Verweistext</a> Verweismöglichkeiten auf andere HTML-Datei innerhalb einer HomePage eine beliebige WWW-Adresse eMail-Adresse Datei zum Download ein Ziel innerhalb der gleichen HTML-Datei Folie 41 HTML - Verweise auf Dateien Verweis auf Datei im gleichen Verzeichnis <a href="dateiname.html">Text</a> Verweis auf Datei in anderem Verzeichnis <a href="pfadangabe/dateiname.html">Text</a> Wechsel in ein höheres Verzeichnis Pro Ebene einmal "../" Folie 42 HTML - WWW Verweise WWW-Adressen, die mit http:// beginnen Verweisreferenz <a href="http://www.univie.ac.at">Text</a> Folie 43 HTML - eMail Verweise eMail Verweise beginnen mit mailto: Achtung: Keine doppelten Schrägstriche dahinter! Verweisreferenz <a href="mailto:[email protected]">Text</a> Voraussetzungen Browser muß das Erstellen/Absenden von Mails unterstützen oder ein externes Mailprogramm muß gestartet werden Folie 44 HTML - Verweise / Download Hat der Verweis eine Datei zum Ziel, bestimmt der Browser, ob diese Datei angezeigt wird (.htm, .gif, .jpg, andere Dateien, wenn ein entsprechendes Plug-In installiert ist) nachgefragt wird, mit welchem Programm diese Datei geöffnet werden soll oder ob diese gespeichert werden soll (vor allem .exe, .zip) Folie 45 HTML - Anker Verweis innerhalb einer Datei Zwei Befehle sind notwendig Befehl, der Verweisziel (Anker) definiert Befehl, der einen Verweis auf den Anker definiert Definition von Anker <a name="name">Text des Verweisziels</a> Verweis auf Anker <a href=“#name">Zum Verweisziel</a> Verweis auf Anker in einer anderen Datei <a href="dateiname.html#ankername">Text</a> Folie 46 HTML - Grafiken 1 Geeignete Grafikformate GIF, JPEG oder PNG Grafikreferenz <img src="grafikdatei.gif">Bild Zu beachten Grafiken im gleichen Verzeichnis wie HTML- Datei speichern (Verweis ist einfacher!) große Grafiken führen oft zu langen Wartezeiten Textalternative zur Grafik eingeben Folie 47 HTML - Grafiken 2 Größe der Grafik entweder absolut (Zahl) oder relativ (in %) <img src="grafik.gif" width="45" height="60"> Alternativer Text erscheint, wenn die Grafik nicht angezeigt wird erscheint, noch bevor die Grafik vollständig sichtbar ist (schnelles Navigieren möglich!) Referenz <img src="grafikdatei.jpg" alt="bildbeschreibung"> Folie 48 HTML - Grafiken 3 Umrahmte Grafiken Rahmenfestlegung erfolgt durch die Angabe border in Pixel und bedeutet Rahmendicke Referenz <img src="grafikdatei.jpg" border="10"> Abstand Grafik - Text <img src="grafik.gif" vspace="10" hspace="5"> Folie 49 HTML - Grafiken 4 Grafikbeschriftung erfolgt wahlweise oben (top), in der Mitte (middle) oder unten (bottom) <img src="grafik.gif" align="bottom"> Grafikausrichtung erfolgt wahlweise links oder rechts <img src="grafik.gif" align="right"> Folie 50 HTML - Hintergrundbilder Hintergrundbild wird wiederholt, sodaß Tapeteneffekt (Wallpaper) entsteht Kleine Grafiken in GIF-, JPEG-, oder PNG-Format Referenz <body background="muster.gif"> Folie 51 HTML - Hintergrundfarben Farbe für den Hintergrund <body bgcolor="#CCFFFF"> Wird sowohl eine Hintergrundgrafik als auch eine Hintergrundfarbe definiert, so wird erstere angezeigt. Folie 52 HTML - Image Maps 1 Bei Mausklick auf ein Detail einer Grafik wird der Verweis ausgeführt zB Landkarte, Gruppenfoto, Gebäudeplan Referenz <map name="landkarte"> <area shape="rect" coords="1,1,249,49" href="wien.html" <area shape="rect" coords="1,51,149,299" href="http://www.kino.com" </map> <img src="wienaktuell.gif" usemap="#landkarte" border=0> Folie 53 HTML - Image Maps 2 <map name="..."> einleitendes Tag für die verweissensitive Grafik Name muß nicht mit dem Grafiknamen ident sein <area shape="rect" ...> definiert eine viereckige Fläche als verweis-sensitiv <area shape="circle" ...> definiert einen Kreis <area shape="polygon" ...> definiert eine beliebiges Vieleck Folie 54 HTML - Image Maps 3 Coords="..." Viereck: Koordinaten für x1,y1,x2,y2 ○ x1 = linke obere Ecke (Pixel von links) ○ y1 = linke obere Ecke (Pixel von oben) ○ x2 = rechte untere Ecke (Pixel von links) ○ y2 = rechte untere Ecke (Pixel von oben) Kreis: Koordinaten für x,y,r ○ x = Mittelpunkt (Pixel von links) ○ y = Mittelpunkt (Pixel von oben) ○ r = Radius in Pixel Folie 55 HTML - Image Maps 4 Verweis-sensitive Grafik wird dahinter eingebunden Attribut usemap= kennzeichnet diese als verweis-sensitiv Name hinter usemap= muß der Ankername sein, der im einleitenden <map>-Tag vergeben wurde ("#landkarte") Folie 56 HTML - Tabellen 1 Aufbau einer Tabelle Tabellen mit sichtbaren Gitternetzlinien ○ für tabellarische Daten Tabellen mit unsichtbaren Gitternetzlinien ○ für mehrspaltigen Text ○ exakte Ausrichtung von Text und Grafiken Referenz <table border="1"> Tabelleninhalt durch Gitternetzlinien getrennt </table> Folie 57 HTML - Tabellen 2 Zeilen und Spalten definieren Tabelle besteht aus mind. einer, meist aber mehreren Zeilen Zeilen bestehen aus mehreren Zellen -> Spalten Gleiche Zellenanzahl pro Zeile Leere Tabellenzellen mit Eingabe eines geschützten Leerzeichen (&nbsp;) Folie 58 HTML - Tabellen 3 Referenz <table border="2"> <tr> <th>Kopfzelle: 1. Zeile, 1. Spalte</th> <th>Kopfzelle: 1. Zeile, 2. Spalte</th> </tr> <tr> <td>Datenzelle: 2. Zeile, 1. Spalte</td> <td>Datenzelle: 2. Zeile, 2. Spalte</td> </tr> </table> Folie 59 HTML - Tabellen 4 <table> ... </table> = Tabellenanfang/ende <tr> ... </tr> = Zeilenanfang/-ende <th> ... </th> = Kopfzellenanfang/-ende <td> ... </td> = Datenzellenanfang/-ende Bemerkung Ende-Tags wie </td>, </th> oder </tr> sind nicht nötig. Jede neue Zelle/Reihe beendet automatisch die vorherige Zelle/Reihe. Folie 60 HTML - Tabellen 5 Stärke des Außenrahmens Angabe erfolgt in Pixel <table border="8"> Tabelleninhalt </table> geben Sie nur das Attribut border an, dann wird eine Rahmenstärke von 2 Pixel verwendet Folie 61 HTML - Tabellen 6 Stärke der Gitternetzlinien Angabe erfolgt in Pixel <table border="8" cellspacing="10"> Tabelleninhalt </table> Damit die Tabelle überhaupt Gitternetzlinien erhält, müssen Sie die Außenrahmendicke angeben Folie 62 HTML - Tabellen 7 Abstand Zellinhalt von Zellrand Angabe erfolgt in Pixel <table border="8" cellpadding="12"> Tabelleninhalt </table> diese Einstellung hat sowohl für Tabellen mit Gitternetzlinien als auch für blinde Tabellen (ohne Gitternetzlinien) Gültigkeit Folie 63 HTML - Tabellen 8 Höhe (height) und Breite (width) Angabe wahlweise in Pixel oder Prozent Angaben zur Breite und Höhe sind nur wirksam, wenn der Tabelleninhalt kleiner ist und dadurch Leerraum entsteht <table border="4" width="60%" height="400"> Tabelleninhalt </table> Folie 64 HTML - Tabellen 9 Zellinhalte horizontal ausrichten align-Attribut ermöglicht die linksbündige, rechtsbündige oder zentrierte Ausrichtung <table border="4"> <tr> <td align="left">linksbündiger Text</td> <td algin="center">zentrierter Text</td> </tr> </table> Folie 65 HTML - Tabellen 10 Zellinhalte vertikal ausrichten valign-Attribut ermöglicht eine Ausrichtung nach oben, unten oder mittig <table border="4"> <tr> <td valign="top">obenbündiger Text</td> <td valign="bottom">untenbündiger Text</td> </tr> </table> Folie 66 HTML - Tabellen 11 Zellen spaltenweise verbinden Spalte einer Zeile erstreckt sich über mehrere Spalten (geeignet für Überschriften) <table border="4"> <tr> <th colspan="2">Überschrift geht über 2 Spalten</th> </tr> <tr> <td>Inhalt erste Spalte</td> <td>Inhalt zweite Spalte</td> </tr> </table> Folie 67 HTML - Tabellen 12 Zellen zeilenweise verbinden Zeile in dieser Spalte erstreckt sich über mehrere Zeilen hinweg <table border="4"> <tr> <th rowspan="2">Inhalt über 2 Zeilen</th> <td>Inhalt erste Zelle in Zeile 1</td> </tr> <tr> <td>Inhalt zweite Zelle in Zeile 2</td> </tr> </table> Folie 68 HTML - Tabellen 13 Farbige Tabellen Hintergrundfarbe Gesamttabelle ○ <table border="4" bgcolor="#CCFFFF"> Tabelleninhalt in hellblau </table> Hintergrundfarbe für Zeilen ○ <table border> <tr bgcolor="#CCFFFF"> <td>Zeile 1, Spalte 1 in hellblau</td> <td>Zeile 1, Spalte 2 in hellblau</td> </tr> </table> Folie 69 HTML - Tabellen 14 Wallpaper für Tabellen Hintergrunddatei für Tabellen und Zellen ○ <table border="4" background="datei.gif"> <tr> <td background="datei2.gif">Zeile 1, Spalte1</td> <td>Zeile 1 Spalte 2</td> </tr> <tr> <td background="datei2.gif">Zeile 2 Spalte 1</td> <td>Zeile 2 Spalte 2</td> </tr> </table> Folie 70 HTML - Tabellen 15 Text neben Tabellen nimmt die Tabelle nicht das gesamte Anzeige-fenster ein, kann Text links oder rechts davon stehen <table border="4" width="50%" align="left"> <tr> <td>Text</td> <td>Text</td> </tr> </table> Text steht rechts neben der Tabelle Folie 71 HTML - Frames 1 Grundgerüst ○ <html> <head> <title>Meine Frame-Seite</title> </head> <frameset ...> Hier stehen die Framedefinitionen. </frameset> <body> Zeigt Text an, wenn Browser nicht frame-fähig </body> </html> Folie 72 HTML - Frames 2 Framesets definieren bestimmt die Aufteilung des Anzeigefensters Beispiel: ○ <frameset rows="20%,80%"> 1. Frame 2. Frame ○ Anzeigefenster wird in Reihen aufgeteilt obere Reihe 20% des Anzeigefensters untere Reihe 80% des Anzeigefensters Folie 73 HTML - Frames 3 Framesets definieren bestimmt die Aufteilung des Anzeigefensters Beispiel: ○ <frameset cols="200,*"> Frame 1 Frame 2 ○ Anzeigefenster wird in Spalten aufgeteilt linke Spalte erhält 200 Pixel des Anzeigefensters rechte Spalte erhält den Rest des Anzeigefensters Folie 74 HTML - Frames 4 Frames definieren legt fest, welche Dateien in den einzelnen Bereichen angezeigt werden sollen Beispiel: ○ <frameset rows="20%,80%"> <frame src="inhalt.html" name="oben"> <frame src="index.html" name="unten"> </frameset> Folie 75 HTML - Frames 5 Bildlaufleisten erzwingen/verhindern Browser verwaltet Bildlaufleisten idR automatisch Beispiel: ○ <frameset cols="200,*"> <frame src="inhalt.html" name="oben" scrolling="no"> <frame src="index.html" name="unten" scrolling="yes"> </frameset> Folie 76 HTML - Frames 6 Abstand Fensterrand - Fensterinhalt ermöglicht die exakte Justierung zwischen Fensterrand und Fensterinhalt Beispiel: <frameset cols="200,*"> <frame src="inhalt.html" name="o" marginwidth="0"> <frame src="index.html" name="u" marginheight="30"> </frameset> Folie 77 HTML - Frames 7 Fixe Fenstergröße Leser kann idR Größe der Framefenster verändern Attribut noresize verhindert dies Beispiel: <frameset cols="200,*"> <frame src="inhalt.html" name="oben" noresize> <frame src="index.html" name="unten"> </frameset> Folie 78 HTML - Frames 8 Fensterrahmen Rahmen unterdrücken Browserspezifisch <frameset … border="0" frameborder="0" framespacing="0"> oder nach HTML <frame … frameborder="0"> Folie 79 HTML - Frames 9 Verweise, die ein Frameset beenden Inhalt des Verweisziels soll nicht im Frame stehen wichtig bei Verweisen zu fremden WWW-Seiten Beispiel: <a href="www.xgx.at/produkte/" target="_blank">Produktpalette</a> _blank = neues Browserfenster für Verweisziel wird geöffnet _parent = Zustand des Anzeigefensters vor dem Start des FrameSets _top = Verweisziel wird im gesamten Anzeigefenster angezeigt Folie 80 HTML – Formulare 1 Formulare sind Bereiche auf HTMLSeiten, in denen der Benutzer Eingaben tätigen kann. In HTML-Dateien können beliebig viele Formulare verwendet werden. Für jedes Formular stehen die in Windows gängigen Eingabeobjekte zur Verfügung. Folie 81 HTML – Formulare 2 Ein Formular wird mit dem Tag <form> eingeleitet und mit </form> beendet. Folgende Attribute sind dabei wichtig: Name="..." Name des Formulars Action="..." Was soll mit Formulardaten geschehen (Versenden mit e-Mail oder Übergaben an CGI-Script) Method="..." Wie sollen die Daten verschickt (get oder post) werden Folie 82 HTML – Formulare 3 Die verwendbaren Formularobjekte sind: Einzeilige Textfelder Mehrzeilige Textfelder Auswahlfelder (Drop-Down oder mehrzeilig) Radiobuttons (Optionsgruppenfelder) und Checkboxes Befehlsschaltflächen Gruppen Folie 83 HTML – Formulare 4 Einzeiliges Textfeld <input> Attribute: Name="..." Name des Feldes Size="..." Breite in Zeichen Maxlength="..." Maximallänge in Zeichen Value="..." Textvorbelegung Type="password" Anzeige der Eingabe mit * Readonly Keine Eingabe möglich Folie 84 HTML – Formulare 5 Mehrzeiliges Textfeld <textarea> </textarea> Abschließender Tag ist nötig Attribute: Name="..." Name des Feldes Rows="..." Höhe in Zeilen Cols="..." Breite in Zeichen Wrap="..." Virtual (Automatische Zeilenumbrüche werden nicht gesendet) oder Physical. Textvorbelegung zwischen den Tags <textarea> </textarea> Readonly Keine Eingabe möglich Folie 85 HTML – Formulare 6 Auswahlfeld <select>...</select> Name="..." Name des Feldes Size="..." Höhe in Zeilen (wenn 1 dann Drop-Down, sonst Liste) multiple Erlaubt Mehrfachauswahl Auswahlpunkt <option>... Value="..." Besonderer Rückgabewert an Stelle des Feldinhaltes, wenn Punkt gewählt wird. Selected Definiert vorausgewählten Wert Folie 86 HTML – Formulare 7 Checkbox <input type="chekbox"> bzw. Radiobutton <input type="radio"> Name="..." Name des Feldes Value="..." Rückgabewert wenn dieser Punkt gewählt wird. checked Definiert vorausgewählten Wert Alle Radiobuttons mit gleichem Namen bilden Gruppe aus der immer nur ein Eintrag gewählt werden darf. Folie 87 HTML – Formulare 8 Button <button>...</button> Alles innerhalb der <button>-Tags wird als Beschriftung angezeigt, auch Grafiken möglich Value="..." Rückgabewert wenn nichts innerhalb der <button>-Tags steht onClick="..." Definition der Aktion, wenn Button angeklickt wird (zB Ausführen von JavaScript) Standarbuttons für Absenden und Reset <input type="submit" value="..."> <input type="reset" value="..."> Folie 88 HTML – Formulare 9 Gruppe <fieldset>...</fieldset> Alles innerhalb der <fieldset>-Tags wird mit einem Rahmen umgeben. Die Beschriftung des Rahmens erfolgt mit den Tags <legend>...</legend> innerhalb der <fieldset>-Tags Folie 89 CSS – Grundlagen 1 Cascading-Style-Sheets (CSS) sind eine Erweiterung von HTML sind logischer und strukturierter als HTML bieten sämtliche HTML-Formate bieten weitere, in HTML nicht enthaltene Formate können zentral verwaltet werden sind für professionelles Webdesign unerläßlich können unterschiedliche Formate für verschiedene Medien vorsehen Folie 90 CSS – Grundlagen 2 Style-Sheets definieren eine oder mehrere Formate, für ○ global ein HTML-Objekt ○ global mehrere HTML-Objekte ○ individuell ein HTML-Objekt ○ alle Objekte die mit einem Style verbunden sind Folie 91 CSS – Grundlagen 3 „Anwendungsvorrang“ Das Style-Format das am nächsten am Objekt ist gilt vor denen, die weiter entfernt sind. Format im Objekt geht vor ○ Format in der Seite geht vor Format in externer Datei geht vor - Browserstandard Folie 92 CSS – Aufbau 1 Eigenschaft:Wert Beispiele Farbe auf Rot setzen: color:red Höhe mit 10 Pixel bestimmen: height:10px Als Schriftart Arial verwenden: font-family:Arial Folie 93 CSS – Aufbau 2 Eigenschaft1:Wert; Eigenschaft2:Wert; ... Beispiel Farbe auf Rot, Höhe 10 Pixel, Schriftart Arial color:red; height:10px; font-family:Arial Folie 94 CSS – Eigenschaften 1 Wichtige Eigenschaften - Schrift Schriftart: font-family Schriftgröße: font-size Fett: font-weight Unterstreichen: text-decoration Schriftfarbe: color Folie 95 CSS – Eigenschaften 2 Wichtige Eigenschaften - Absatz Ausrichtung - horizontal: text-align Ausrichtung - vertical: vertical-align Zeilehöhe: line-height Folie 96 CSS – Eigenschaften 3 Wichtige Eigenschaften - Rahmen Farbe: border-color Breite: border-width Typ: border-style Beschränkung auf einzelne Seiten mit -top- oben -left- links -right- rechts -bottom- unten Folie 97 CSS – Eigenschaften 4 Wichtige Eigenschaften – Größe / Position Höhe: height Breite: width Open: top Links: left Positionierungsart: position Folie 98 CSS – Eigenschaften 5 Wichtige Eigenschaften – Hintergrund Hintergrundfarbe: background-color Hintergrundbild: background-image Folie 99 CSS – Zahlenwerte Angabe der Zahl und der Einheit zB 12px Wichtige Einheiten Pixel: px Millimeter: mm Punkt: pt Prozent: % Folie 100 CSS – Definition 1 Styleangabe direkt beim betroffenen Objekt <OBJEKT style=" Eigenschaft:Wert "> bzw. <span style=" Eigenschaft:Wert "> <OBJEKT> <OBJEKT> ... </span> Folie 101 CSS – Definition 2 Styleangabe in Style-Bereich auf der Seite <style type="text/css"> Objekt { Eigenschaft:Wert} .Klasse { Eigenschaft:Wert} </style> Folie 102 CSS – Definition 3 Styleangabe in externer Datei – Datei in Seite einbinden Nach HTML <head> <link rel="stylesheet" type="text/css" ref="datei.css"> </head> Nach CSS <style type="text/css"> <!-@import url(datei.css); //--> </style> Folie 103 CSS – Globale Formatierung Objekt { Eigenschaft:Wert } Beispiele p { color:red } Alle Absätze haben rote Zeichen body { background-image:url(test.gif)} test.gif als Hintergrundbild verwenden a { text-decoration:none } Unterstreichung bei allen Links verhindern Folie 104 CSS – Klassenformatierung .Klasse { Eigenschaft:Wert } <OBJEKT class="Klasse"> Beispiel .Test { color:red } <p class="Test">Text</p> Folie 105 CSS – Praxistipps 1 Hyperlink-Formate ändern, sobald die Maus darüber fährt Links an sich formatieren (a { Eigenschaft:Wert }) a:hover { Eigenschaft:Wert} wird angewendet, wenn Maus sich über Link bewegt Folie 106 CSS – Praxistipps 2 Ändern des Mauszeigers über Objekten mit cursor: pointer Mauszeiger in Handform (wie bei Links) wait Sanduhr help Fragezeichen Folie 107 CSS – Praxistipps 3 Live-Demonstration von CSS Folie 108 HTML/CSS – Nützliche Links Self-HTML – die Seite von Stefan Münz, die Umfassend über Web-Design informiert – unbedingt ansehen de.selfhtml.org Die goldenen Regeln für schlechtes HTML www.karzauninkat.com/Goldhtml Online-Magazin Dr. Web www.ideenreich.com Folie 109 Das war´s Danke für die Aufmerksamkeit Viel Spaß mit HTML Nicht vergessen – Das EDV-Zentrum bietet HTML-Workshops an Schönes Wochenende Folie 110
