Art Director Thomas Frierss

Transkript

1 Art Director Thomas Frierss

2 Programm Vorträge HTML I, II und III PHP I und II MySQL und PHP JavaScript Workshops HTML Webdesign Dreamweaver Flash Photoshop Folie 2

3 Info - Internet Internet TCP/IP IP-Adresse DNS-Server URL Web-Server Web-Client Folie 3

4 Info - Surfen Eingabe der URL im Browser Browser holt IP-Adresse vom DNS- Server Browser schickt Anfrage an IP-Adresse Zielrechner schickt HTML-Datei zurück Browser empfängt diese Browser stellt HTML-Datei dar Folie 4

5 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

6 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

7 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

8 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

9 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

10 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

11 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

12 HTML Grundgerüst - Bsp <html> <head> <title>titel der Seite</title> </head> <body>... </body> </html> Folie 12

13 Live-Demonstration Anlegen und Testen einer HTML-Seite Folie 13

14 HTML - Metaangaben Suchbegriffe definieren <meta name="keywords" content="html, Web Publishing"> Autor angeben <meta name="author" content="franz Gonzo Mustermann, f.mustermann@test.at"> Automatisch auf andere Seite weiterleiten <meta http-equiv="refresh" content="5; url= Folie 14

15 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 Schwarz, 00FF00 Grün, FFFFFF Weiß Browserunabhängig 16,7 Mio. Farben möglich Tipp: Folie 15

16 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

17 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

18 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

19 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

20 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

21 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

22 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

23 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

24 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

25 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

26 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

27 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

28 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

29 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

30 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

31 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

32 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

33 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

34 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

35 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

36 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

37 HTML - Leerzeichen Browser bricht bei Leerzeichen um Geschütze Leerzeichen verhindern einen unerwünschten Umbruch = nonbreaking space oder Zeichenfolge: &#160 Referenz Teil 1 der Homepage vermittelt einen kurzen Überblick. Folie 37

38 HTML - Sonderzeichen Umlaute ä durch ä Ö durch Ö ß durch ß HTML-eigene Zeichen " durch " & durch & Folie 38

39 HTML - Kommentare An beliebiger Stelle einzugeben Browser zeigt Kommentare nicht an Festgelegte Zeichenfolge   Folie 39

40 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

41 HTML - Hyperlinks erzeugen Einheitliches Schema <a href="verweisziel">verweistext</a> Verweismöglichkeiten auf andere HTML-Datei innerhalb einer HomePage eine beliebige WWW-Adresse -adresse Datei zum Download ein Ziel innerhalb der gleichen HTML-Datei Folie 41

42 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

43 HTML - WWW Verweise WWW-Adressen, die mit beginnen Verweisreferenz <a href=" Folie 43

44 HTML - Verweise Verweise beginnen mit mailto: Achtung: Keine doppelten Schrägstriche dahinter! Verweisreferenz <a href="mailto:echo@univie.ac.at">text</a> Voraussetzungen Browser muß das Erstellen/Absenden von Mails unterstützen oder ein externes Mailprogramm muß gestartet werden Folie 44

45 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

46 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

47 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

48 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

49 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

50 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

51 HTML - Hintergrundbilder Hintergrundbild wird wiederholt, sodaß Tapeteneffekt (Wallpaper) entsteht Kleine Grafiken in GIF-, JPEG-, oder PNG-Format Referenz <body background="muster.gif"> Folie 51

52 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

53 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=" </map> <img src="wienaktuell.gif" usemap="#landkarte" border=0> Folie 53

54 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

55 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

56 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

57 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

58 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 ( ) Folie 58

59 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

60 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

61 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

62 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

63 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

64 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

65 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

66 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

67 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

68 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

69 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

70 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

71 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

72 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

73 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

74 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

75 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

76 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

77 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

78 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

79 HTML - Frames 8 Fensterrahmen Rahmen unterdrücken Browserspezifisch <frameset border="0" frameborder="0" framespacing="0"> oder nach HTML <frame frameborder="0"> Folie 79

80 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=" 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

81 HTML Formulare 1 Formulare sind Bereiche auf HTML- Seiten, 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

82 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 oder Übergaben an CGI-Script) Method="..." Wie sollen die Daten verschickt (get oder post) werden Folie 82

83 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

84 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

85 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

86 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

87 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

88 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

89 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

90 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

91 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

92 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

93 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

94 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

95 CSS Eigenschaften 1 Wichtige Eigenschaften - Schrift Schriftart: font-family Schriftgröße: font-size Fett: font-weight Unterstreichen: text-decoration Schriftfarbe: color Folie 95

96 CSS Eigenschaften 2 Wichtige Eigenschaften - Absatz Ausrichtung - horizontal: text-align Ausrichtung - vertical: vertical-align Zeilehöhe: line-height Folie 96

97 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

98 CSS Eigenschaften 4 Wichtige Eigenschaften Größe / Position Höhe: height Breite: width Open: top Links: left Positionierungsart: position Folie 98

99 CSS Eigenschaften 5 Wichtige Eigenschaften Hintergrund Hintergrundfarbe: background-color Hintergrundbild: background-image Folie 99

100 CSS Zahlenwerte Angabe der Zahl und der Einheit zb 12px Wichtige Einheiten Pixel: px Millimeter: mm Punkt: pt Prozent: % Folie 100

101 CSS Definition 1 Styleangabe direkt beim betroffenen Objekt <OBJEKT style=" Eigenschaft:Wert "> bzw. <span style=" Eigenschaft:Wert "> <OBJEKT> <OBJEKT>... </span> Folie 101

102 CSS Definition 2 Styleangabe in Style-Bereich auf der Seite <style type="text/css"> Objekt { Eigenschaft:Wert}.Klasse { Eigenschaft:Wert} </style> Folie 102

103 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"> url(datei.css); //--> </style> Folie 103

104 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

105 CSS Klassenformatierung.Klasse { Eigenschaft:Wert } <OBJEKT class="klasse"> Beispiel.Test { color:red } <p class="test">text</p> Folie 105

106 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

107 CSS Praxistipps 2 Ändern des Mauszeigers über Objekten mit cursor: pointer Mauszeiger in Handform (wie bei Links) wait Sanduhr help Fragezeichen Folie 107

108 CSS Praxistipps 3 Live-Demonstration von CSS Folie 108

109 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 Online-Magazin Dr. Web Folie 109

110 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