Web-Programmierung HTML 06.10.2017 Thomas Perschke.

Präsentation zum Thema: "Web-Programmierung HTML 06.10.2017 Thomas Perschke."—  Präsentation transkript:

1 Web-Programmierung HTML Thomas Perschke

2 Überblick HTML / CSS JavaScript / JQuery /JQueryMobil PHP
Servlets / JSP / XML AJAX  Am Beispiel einer dynamischen Web-Anwendung

3 Inhalt – Heute Internet HTML CSS

4 Das Internet weltweites Netzwerk voneinander unabhängiger Netzwerke
dient der Kommunikation und dem Austausch von Informationen jeder Rechner eines Netzwerkes kann dabei prinzipiell mit jedem anderen Rechner kommunizieren. Die Kommunikation der einzelnen Rechner erfolgt über definierte Protokolle zum Datenaustausch. umgangssprachlich: World Wide Web = „Internet“ Das Internet fußt auf der einheitlichen TCP/IP-Protokollfamilie, welche die Adressierung und den Datenaustausch zwischen verschiedenen Computern und Netzwerken standardisiert  unabhängig von den verwendeten Betriebssystemen und Netzwerktechnologien Quelle:

5 Geschichte des Internets
Das Internet Geschichte des Internets Das Internet ging aus dem Ende der 1960er Jahre entstandenen militärischen ARPANET hervor, einem Projekt der Advanced Research Project Agency (ARPA). Es wurde später benutzt, um Universitäten und Forschungseinrichtungen zu vernetzen, zunächst in den USA, später dann auch weltweit. Die anfängliche Verbreitung des Internets ist eng mit der Entwicklung des Betriebssystems UNIX verbunden. Nachdem 1982 das ARPANET das TCP/IP Protokoll adaptierte, begann sich auch der Name Internet durchzusetzen. Starken Auftrieb erhielt das Internet seit Anfang der 1990er durch das World Wide Web, kurz WWW. Es wurde im CERN (Genf) von Tim Berners- Lee entwickelt. Nun konnten mit Webbrowsern auch Laien auf das Netz zugreifen, was mit der wachsenden Zahl von Nutzern zu vielen kommerziellen Angeboten im Netz führte. Neue Technologien verändern das Internet und ziehen neue Benutzerkreise an: IP-Telefonie, Kollaborationssoftware, Groupware wie Wikis, Breitbandzugänge und Peer2Peer-Vernetzung (vor allem für Tauschbörsen). Quelle:

6 Internet Das WWW Client Web-Server Das WWW www. ba-vs.de www.n24.de
Client Web-Server HTML (2) (1) (3) (4) permanente / temporäre Internetverbindung (1) Browser notwendig (Software) (2) Versenden einer Anfragen (3) Stellt Ergebnisseite dar (4) gänige Browser Microsoft Internet Explorer (IE) Google Chrom Firefox Konquerer Safari Opera -permanente Internetverbindung (1) -WebServer notwendig (Software) -MS IIS (Internet Information Service) -Apache -speichert die „HTML-Seiten“ (2) -wartet auf eingehende Anfragen -ist eindeutig zu identifizieren (3)

7 Dienste im Internet Das Internet
Quelle:

8 Zugriff auf Ressourcen - Aufbau einer URL
Das WWW Zugriff auf Ressourcen - Aufbau einer URL Uniform Resource Locator standardisiertes Adressierungsformat für Ressourcen in Computernetzwerken Beispiel : Protokoll 2: Hostname 3: Port 4: Verzeichnisangabe 5: Dateiname 6: Textmarke 7: Parameter  Schlüssel=Wert (nur bei GET-Methode), Maskierung 1 2 3 4 5 6 7

9 ISO-OSI Schichtenmodell
Das WWW ISO-OSI Schichtenmodell

10 Protokoll / RFC Protokolle in der Telekommunikation und Informatik sind Regeln, welche das Format, den Inhalt, die Bedeutung und die Reihenfolge gesendeter Nachrichten zwischen verschiedenen Instanzen (der gleichen Schicht) festlegen, [...]. Diese Protokolle regeln den Ablauf [...] Die Requests for Comments (kurz RFC; zu deutsch Bitte um Kommentare) sind eine Reihe von technischen und organisatorischen Dokumenten des RFC-Editors zum Internet (ursprünglich ARPANET), die am 7. April 1969 begonnen wurden. Bei der ersten Veröffentlichung noch im ursprünglichen Wortsinne zur Diskussion gestellt, behalten RFC auch dann ihren Namen, wenn sie sich durch allgemeine Akzeptanz und Gebrauch zum Standard entwickelt haben. Quelle:

11 RFC1945 - Hypertext Transfer Protocol (RFC 2616)

12 HTTP GET /test/test.html HTTP/1.0 HTTP/1.0 200 OK
Das WWW HTTP HTTP-Request GET /test/test.html HTTP/1.0 HTTP/ OK Server: Apache/2.2.17 Last-Modified: Fri, 05 Dec :30:00 GMT Expires: Fri, 01 Jan :00:00 GMT Content-Type: text/html Content-Length: 93 Date: Fri, 05 Dec :00:00 GMT <html> <body> <title>Testseite</title> </body> <head> <h1>Die ist ein Test</h1> </head> </html> Verbindung zu Host verloren. HTTP-Response

13 ISO-OSI Schichtenmodell
Das WWW Internet www. ba-vs.de Client Web-Server HTML (2) (1 ) (3 ) (2 ) (4 ) ISO-OSI Schichtenmodell Anwenderfunktion Anwendersystem Transportfunktion Transportsystem

14 ISO-OSI Schichtenmodell
Das WWW ISO-OSI Schichtenmodell Schicht Beschreibung Bitübertragungsschicht Ist befasst mit der Übertragung eines unstrukturierten Bitstroms über ein physikalisches Medium. Beschreibt die mechanischen, elektrischen, funktionalen und prozeduralen Eigenschaften, um auf das physikalische Medium zuzugreifen. Sicherungsschicht Sorgt für eine zuverlässige, gesicherte Übertragung von Informationen über eine physikalische Verbindung. Diese Schicht sendet zu dem Zweck Datenblöcke (Frames) mit der notwendigen Synchronisation, Fehlerkontrolle und Flusskontrolle. Netzwerkschicht Ist verantwortlich für den Aufbau (Routing), Betrieb (Staukontrolle) und Beendigung von Netzwerkverbindungen. Stellt damit den oberen Schichten eine Schnittstelle, unabhängig von Übertragungs- und Vermittlungstechnik zur Verfügung. Transportschicht Sorgt für einen zuverlässigen, transparenten Datentransfer zwischen Endsystemen (Hosts). Stellt auch eine Fehlersicherung (Reihenfolgesicherung) und Flusskontrolle zwischen Endsystemen bereit. Sitzungsschicht Aufbau, Durchführung und Beendigung von Prozess-Prozess-Verbindungen in den kooperierenden Endsystemen. Zu diesem Zweck werden Dienste zur Eröffnung einer Kommunikationsbeziehung (Sitzung), zu ihrem geordneten Betrieb und zu ihrer Unterbrechung, Fortsetzung und Beendigung bereitgestellt. Präsentationsschicht Sorgt für eine einheitliche Schnittstelle gegenüber der Applikation. Dies geschieht durch eine Transformation der Daten. Applikationsschicht Stellt dem Anwender die Dienste zur Verfügung

15 Das WWW TCP / IP TCP IP

16 Movie: „Warriors of the net“

17 HTML HTML Die Hypertext Markup Language (HTML) ist eine Auszeichnungssprache zur Beschreibung von Informationen in Hypertexten HTML-Dateien bestehen aus reinem Text es geht in HTML nicht um die optische Gestaltung eines Textes, vielmehr lassen sich einzelnen Textbereichen Bedeutungen zuordnen (z. B. Überschrift). Ob ein bestimmter Textbereich durch Kursiv-, Fettschrift oder eine auffällige Farbe realisiert wird, ist zweitrangig und dem Webbrowser überlassen, kann aber mit Hilfe von CSS beeinflusst werden. XHTML - XHTML-Dokumente entsprechen den Syntaxregeln von XML.

18 HTML HTML – Elemente Der Inhalt von HTML-Dateien steht in HTML- Elementen. HTML-Elemente werden durch so genannte Tags markiert. Fast alle HTML-Elemente werden durch ein einleitendes und ein abschließendes Tag markiert. Der Inhalt dazwischen ist der "Gültigkeitsbereich" des entsprechenden Elements. Tags werden in spitzen Klammern notiert. Beispiel: <h1>Wirtschaftsinformatik</h1> Element Einleitendes Tag Inhalt Abschließendes Tag

19 HTML – Verschachtelung von Elementen
Elemente können ineinander verschachtelt werden. Auf diese Weise entsteht eine hierarchische Struktur. Beispiel: <h1><code>Wirtschaftsinformatik</code> - Softwaretechnik</h1>

20 HTML – Attribute in Tags
<h1 align="center">HTML - die Sprache des Web</h1> einleitende Tags und Standalone-Tags können zusätzliche Angaben enthalten. es gibt folgende Arten von Attributen in HTML-Elementen: Attribute mit Wertzuweisung, wobei es bestimmte erlaubte Werte gibt, z.B. <h1 align="center"> Attribute mit freier Wertzuweisung, wobei jedoch ein bestimmter Datentyp oder eine bestimmte Konvention erwartet wird, z.B. <table border="1"> Attribute mit freier Wertzuweisung ohne weitere Konventionen, z.B. <p id="Aussage mit Vorbehalt"> Alleinstehende Attribute, z.B. <hr noshade> Attribut  Schlüssel=“Wert“

21 HTML HTML - Grundgerüst Eine gewöhnliche HTML-Datei besteht grundsätzlich aus folgenden Teilen: Dokumenttyp-Angabe (Angabe zur Struktur des Dokumentes, z.B. verwendeten HTML-Version) Header (Kopfdaten. z.B. Angaben zu Titel u.ä.) Body (Körper - anzuzeigender Inhalt, also Text mit Überschriften, Verweisen, Grafikreferenzen usw.) Schema: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <html> <head> </head> <body> Hallo Welt! </body> </html> 1 2 3

22 HTML – Regeln bei der Texteingabe
Notieren Sie in einer neuen Datei immer zuerst das Grundgerüst einer HTML-Datei. Setzen Sie Zeilenumbrüche und Leerzeilen so, dass Sie im Quelltext eine optimale Übersicht behalten. Beachten Sie aber auch, dass Zeilenumbrüche und Absatzschaltungen im Web-Browser nicht so angezeigt werden, wie sie im Quelltext eingegeben wurden. Für Zeilenumbrüche und Absatzschaltungen, die im WWW-Browser wirksam sein sollen, müssen Sie die entsprechenden HTML-Elemente verwenden. Beachten Sie, dass es in HTML keine Tabulatoren gibt. Ein im Quelltext eingegebener Tabulator wird bei der Anzeige im Web-Browser in ein Leerzeichen umgewandelt. Zeilenumbruchzeichen, Tabulatorzeichen und einfache Leerzeichen bilden in HTML die Klasse der so genannten White- Space-Zeichen (white space = "weißer Raum"). Die Browser setzen in der Regel ein Tabulatorzeichen oder Zeilenumbruchzeichen im Editor als Leerzeichen im HTML-Text um. Mehrere solcher White-Space-Zeichen hintereinander werden ignoriert und zu einem einzigen Leerzeichen zusammengefasst.

23 Beispiel – Whitespaces (1)
HTML Beispiel – Whitespaces (1) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Transitional//EN" " <html> <head> <title>Mein erste HTML-Seite</title> </head> <body> 1. Zeile 2. Zeile Neuer Absatz </body> </html>

24 HTML – Textabsätze, Zeilenumbruch
Absätze dienen der optischen Gliederung eines Textes. Beim Erstellen von HTML- Dateien genügt es nicht, im Editor einen harten Umbruch einzufügen. WWW-Browser ignorieren solche Umbrüche <p> (p = paragraph = Absatz) leitet einen Textabsatz ein. </p> beendet den Textabsatz und steht am Ende des Absatztextes. Durch die Angabe align="center" im einleitenden <p>-Tag erreichen Sie, dass der Textabsatz zentriert ausgerichtet wird (align = Ausrichtung, center = zentriert). Mit align="right" wird der Absatz rechtsbündig ausgerichtet (right = rechts). Mit align="justify" erzwingen Sie den Blocksatz für den Absatz (justify = justieren). Mit align="left" können Sie die Normaleinstellung (linksbündige Ausrichtung) angeben. <br> (br = break = Umbruch) fügt an der gewünschten Stelle einen Zeilenumbruch ein. Dabei ist es egal, ob das alleinstehende Tag am Ende der vorherigen Zeile steht (wie im Beispiel), oder in einer eigenen Zeile, oder am Anfang der folgenden Zeile. <nobr> bewirkt, dass der auf das Tag folgende Text nicht umgebrochen wird (nobr = no break = kein Umbruch). Am Ende des Textabschnitts, der nicht umgebrochen werden soll, notieren Sie das abschließende Tag </nobr>. Die Zeichenfolge   erzeugt ein geschütztes Leerzeichen (nbsp =nonbreaking space = nicht umbrechbares Leerzeichen). Es wird ein normales Leerzeichen angezeigt, doch an dieser Stelle kann kein Zeilenumbruch erfolgen.

25 Beispiel – Whitespaces (2)
HTML Beispiel – Whitespaces (2) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Transitional//EN" " <html> <head> <title>Mein erste HTML-Seite</title> </head> <body> 1. Zeile <br>2. Zeile <p>Neuer Absatz</p> </body> </html>

26 HTML – Beispiel „Sonderzeichen“ (1)
<!DOCTYPE HTML PUBLIC ... <html> <head> </head> <body> "Max Mustermann": Alter=40 & Schuhgröße >43 </body> </html>

27 HTML – „Sonderzeichen“
Ersetzen Sie das Zeichen ä durch die Zeichenfolge ä Ersetzen Sie das Zeichen Ä durch die Zeichenfolge Ä Ersetzen Sie das Zeichen ö durch die Zeichenfolge ö Ersetzen Sie das Zeichen Ö durch die Zeichenfolge Ö Ersetzen Sie das Zeichen ü durch die Zeichenfolge ü Ersetzen Sie das Zeichen Ü durch die Zeichenfolge Ü Ersetzen Sie das Zeichen ß durch die Zeichenfolge ß Notieren Sie an der Stelle, wo das Euro-Zeichen stehen soll, die Zeichenfolge €. Ersetzen Sie das Zeichen < durch die Zeichenfolge < Ersetzen Sie das Zeichen > durch die Zeichenfolge > Ersetzen Sie das Zeichen & durch die Zeichenfolge & Ersetzen Sie das Zeichen " durch die Zeichenfolge "

28 HTML – Beispiel „Sonderzeichen“ (2)
<!DOCTYPE HTML PUBLIC ... <html> <head> </head> <body> "Max Mustermann ": Alter=40 & Schuhgröße >43 </body> </html>

29 HTML HTML - Kommentare Kommentare werden durch die Zeichenfolge <!-- eingeleitet. Dahinter folgt beliebig langer Kommentartext. Innerhalb des Kommentartextes können Sie auch HTML-Elemente notieren. Alles, was zwischen der einleitenden Zeichenfolge und der beendenden Zeichenfolge --> steht, wird bei der Anzeige im Browser unterdrückt. ... <body> <!–- Seitenüberschrift --> <h1>Wirtschaftsinformatik</h1> </body>

30 HTML – Konventionen für Dateinamen
Groß- und Kleinschreibung Bei modernen Unix-Systemen, wie sie die meisten Web-Server einsetzen, sind Dateinamen bis zu 256 Zeichen Länge erlaubt. Vermeiden Sie aber in jedem Fall deutsche Umlaute und scharfes S in den Dateinamen. Als Sonderzeichen ist in jedem Fall der Unterstrich "_" erlaubt. Andere Satzzeichen sollten Sie vermeiden. Fragezeichen "?", Sternzeichen "*", Istgleichzeichen "=" dürfen Sie auf keinen Fall in Dateinamen verwenden. Auch auf Leerzeichen sollten Sie unbedingt verzichten Wenn Sie Ihr Projekt auch anderweitig vertreiben möchten, zum Beispiel als Download zum Offline-Lesen oder auf CD-ROM, sollten Sie die engen Grenzen von MS-DOS-kompatiblen Dateinamen kennen und in Ihre Entscheidung mit einbeziehen. Dateiendungen Hierbei gilt generell: halten Sie unbedingt die üblichen Dateiendungen ein. Moderne Web-Browser erkennen HTML-Dateien zwar auch an ihrem Inhalt, aber bei Verwendung im Web sollten Sie immer die üblichen Dateiendungen verwenden. Gewöhnliche HTML-Dateien erhalten entweder die Endung .html oder .htm. HTML-Dateien mit enthaltenen  Server Side Includes erhalten die Endung .shtml oder .shtm. HTML-Dateien mit enthaltenen  PHP-Abschnitten erhalten die Endung .php. HTML-Dateien mit enthaltenen  ASP-Abschnitten erhalten die Endung .asp. Default-Dateinamen bei Web-Servern Die meisten heutigen Web-Server sehen einen oder mehrere bestimmte Dateinamen als Datei für die "Einstiegsseite" vor. Meistens ist das der Name index.html oder index.htm, manchmal auch welcome.html bzw. welcome.htm oder default.html bzw. default.htm. Bei einigen Providern können Sie auch selbst einen beliebigen Dateinamen als Default-Dateinamen bestimmen. Und wenn Sie selbst Zugriff auf die Konfiguration des Web- Servers haben, können Sie die Default-Dateinamen dort einstellen.

31 HTML HTML - Titel ... <head> <title>Meine erste HTML-Seite</title> </head> <body> ... Jede HTML-Datei sollte einen Titel erhalten. Das ist aus folgenden Gründen besonders wichtig: Der Titel der Datei wird bei der Anzeige im Web-Browser in der Titelzeile des Anzeigefensters angezeigt. Der Titel der Datei wird vom Web-Browser beim Setzen von Lesezeichen (Bookmarks, Favoriten) auf die Datei verwendet. Der Titel der Datei wird im Web-Browser in der Liste der bereits besuchten Seiten angezeigt. Der Titel der Datei dient im Web vielen automatischen Suchprogrammen als wichtiger Input. Wenn die Datei zu den Suchtreffern einer Suche gehört, bieten viele Suchmaschinen den Titel der Datei als anklickbaren Verweis an. Der Title-Tag befindet sich im Head-Block

32 HTML HTML - Überschriften HTML unterscheidet 6 Überschriftenebenen, um Hierarchieverhältnisse in Dokumenten abzubilden. Beispiel: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" " <html> <head> <title>Text des Titels</title> </head> <body> <h1>Überschrift 1. Ordnung</h1> <h2>Überschrift 2. Ordnung</h2> <h3>Überschrift 3. Ordnung</h3> <h4>Überschrift 4. Ordnung</h4> <h5>Überschrift 5. Ordnung</h5> <h6>Überschrift 6. Ordnung</h6> </body> </html>

33 HTML – logische Auszeichnungen im Text
<em>...</em> zeichnet einen Text aus mit der Bedeutung "emphatisch". <strong>...</strong> zeichnet einen Text aus mit der Bedeutung "stark betont". <code>...</code> zeichnet einen Text aus mit der Bedeutung "dies ist Quelltext" <samp>...</samp> zeichnet einen Text aus mit der Bedeutung "Dies ist ein Beispiel" <kbd>...</kbd> zeichnet einen Text aus mit der Bedeutung "dies stellt eine Tastatureingabe dar" <var>...</var> zeichnet einen Text aus mit der Bedeutung "dies ist eine Variable oder ein variabler Name" <cite>...</cite> zeichnet einen Text aus mit der Bedeutung "dies ist ein Zitat von einer anderen Quelle" <dfn>...</dfn> zeichnet einen Text aus mit der Bedeutung "dies ist eine Definition". <acronym>...</acronym> zeichnet einen Text aus mit der Bedeutung "dies ist eine Abkürzung" (z.B. "z.B.") <abbr>...</abbr> zeichnet einen Text aus mit der Bedeutung "dies ist eine abgekürzte Schreibweise" (z.B. "WWW")

34 HTML – physikalische Auszeichnungen
<b>...</b> zeichnet einen Text als fett aus <i>...</i> zeichnet einen Text als kursiv aus <tt>...</tt> zeichnet einen Text als dicktengleich formatiert aus (tt = Teletyper = Fernschreiber) <u>...</u> zeichnet einen Text als unterstrichen aus <strike>...</strike> zeichnet einen Text als durchgestrichen aus <s>...</s> zeichnet einen Text als durchgestrichen aus <big>...</big> zeichnet einen Text größer als normal aus <small>...</small> zeichnet einen Text kleiner als normal aus ^... zeichnet einen Text als hochgestellt aus _... zeichnet einen Text als tiefgestellt aus

35 HTML – Aufbau einer Tabelle
<table> leitet eine Tabelle ein (table = Tabelle). Wenn die Tabelle sichtbare Gitternetzlinien enthalten soll, müssen Sie im einleitenden <table>-Tag das Attribut border= notieren und ihm einen Wert größer 0 zuweisen. Der angegebene Wert ist dann die Breite des Rahmens in Pixeln. Um eine blinde Tabelle ohne sichtbaren Rahmen und Gitternetzlinien zu erzeugen, lassen Sie die Angabe zu border= entweder weg, oder - was sauberer ist - Sie notieren border="0". <tr> leitet eine neue Tabellenzeile ein (tr = table row = Tabellenzeile). Im Anschluss daran werden die Zellen (Spalten) der betreffenden Reihe definiert. Am Ende einer Tabellenzeile wird ein abschließendes Tag </tr> notiert. Eine Tabelle kann Kopfzellen und gewöhnliche Datenzellen enthalten. Text in Kopfzellen wird hervorgehoben (meist fett und zentriert ausgerichtet). <th> leitet eine Kopfzelle ein, <td> eine normale Datenzelle (th = table header = Tabellenkopf, td = table data = Tabellendaten). Der Inhalt einer Zelle wird jeweils hinter dem Tag notiert. Obwohl die zugehörigen End-Tags </th> bzw. </td> offiziell optional sind, ist dringend zu empfehlen, sie immer und in jedem Fall zu notieren.

36 HTML – Aufbau einer Tabelle
<table border="1"> <tr> <th>Name</th> <th>Strasse</th> <th>Ort</th> </tr> <td>Mustermann</td> <td>Hauptstrasse 1</td> <td>Berlin</td> <td>Musterfrau</td> <td>Königsstrasse 1</td> <td>München</td> </table>

37 HTML HTML - Verweise Für Verweise in HTML gibt es das a-Element (a = anchor = Anker). Damit jedoch ein Verweis aus diesem Element wird, ist das Attribut <a href= erforderlich (href = hyper reference = Hyper(text)-Referenz). Als Wert an das href-Attribut weisen Sie das gewünschte Verweisziel zu. Als Inhalt des a-Elements, also zwischen <a> und </a>, notieren Sie den Text, der dem Anwender als Verweis angeboten wird Anker <a href="#anfang">Seitenanfang</a>

38 HTML Beispiel - Verweise ... <a name="anfang">Hier ist der Anfang</a> Zur <a href=" vs.de/">Berufsakademie in Villingen- Schwenningen</a> <a href="#anfang">zurück zum Anfang</a>

39 HTML HTML - Grafiken <img src="tanzbaer.gif" width="368" height="383" alt="Tanzbär"> <img src="baum.jpg" width="320" height="400" border="4" alt="Abendbaum"> <a href="home.htm"><img src="button1.jpg" width="160" height="34" border="0" alt="HOME"></a>

40 Beispiel: Grafiken ... <body>
HTML Beispiel: Grafiken ... <body> <img src="carlo.jpg" width="200" alt="Carlo"> </body> </html>

41 HTML HTML - Formulare Formularbereich definieren <form action=" method="get"> <!-- hier folgen die Formularelemente --> </form> Einzeilige Eingabefelder <input name="vorname" type="text" size="30" maxlength="30„ value=„Hans“ readonly> Eingabefelder für Passwörter <input name="kennwort" type="password" size="12" maxlength="12"> Mehrzeilige Eingabebereiche <textarea name="user_eingabe" cols="50" rows="10">Vorbelegung</textarea>

42 HTML HTML - Formulare Auswahllisten <select name="top5" size="3" multiple> <option>Heino</option> <option value="v1">Michael Jackson</option> <option selected>Tom Waits</option> <option>Nina Hagen</option> <option>Marianne Rosenberg</option> </select> Radiobuttons <input type="radio" name="Zahlmethode" value="Mastercard"> Mastercard<br> <input type="radio" name="Zahlmethode" value="Visa"> Visa<br> <input type="radio" name="Zahlmethode" value="AmericanExpress"> American Ex Checkbox <input type="checkbox" name="zutat1" value="salami"> Salami<br> <input type="checkbox" name="zutat2" value="pilze"> Pilze<br> <input type="checkbox" name="zutat3" value="sardellen"> Sardellen

43 HTML HTML - Formulare Buttons zum Absenden und Abbrechen <input type="submit" value="Absenden"> <input type="reset" value="Abbrechen">

44 Beispiel - Formular HTML
<form action=" method="get"> Einzeiliges Eingabefeld: <input type="tex" name="feld1" value="Ihre Eingabe" size="20" maxlength="30"> <p> Eingabefeld für Passwörter: <input type="password" name="feld2" size="20" maxlength="30"> Mehrzeiliges Eingabefeld: <br> <textarea name="feld3" cols="50" rows="10">Ihr Text</textarea> <input type="checkbox" name="feld4">AGB akzeptiert <input type="radio" name="feld5" value="1">Wert 1 <br><input type="radio" name="feld5" value="2">Wert 2 <br><input type="radio" name="feld5" value="3">Wert 3 <br><input type="radio" name="feld5" value="4">Wert 4 <select name="feld6" size="0"> <option selected>Audi</option> <option>VW</option> <option>BMW</option> </select> <br><input type="submit" value="Absenden"> <br><input type="reset" value="Löschen"> </form>

45 CSS CSS Stylesheets Sprache zur Definition von Formateigenschaften von HTML- Elementen (Stildefinitionen) HTML-Elemente mit Hintergrundfarben oder Rahmen ausstatten Beeinflussung des Layouts einer Seite, beispielsweise durch pixelgenaue Positionierung von Elementen Verschiedene Layouts für verschiedene Medientypen Anzeigefenster des Browsers beeinflussen, so etwa das Aussehen des Cursors oder der Scrollbalken. wichtiges Leistungsmerkmal: zentrale Formate zu definieren  einheitliches Design über viele Seiten hinweg

46 Aufbau einer CSS-Anweisung
Die Hintergrundfarbe der Webseite soll rot sein. HTML: <body bgcolor=„#FF0000“> CSS body { background-color: #FF0000;} Selektor { Eigenschaft: Wert; }

47 Aufbau einer CSS-Anweisung
Selektor { Eigenschaft : Wert; } Selektor { Eigenschaft : Wert; Eigenschaft : Wert, Wert, Wert; Eigenschaft : Wert Wert Wert Wert;

48 Beispiele h1 { color:red; font-size:48px; border: 1px solid black; }
CSS Beispiele h1 { color:red; font-size:48px; border: 1px solid black; } body { font-family:Helvetica,Arial; font-style:italic; text-decoration:underline;

49 Hierarchische Struktur einer HTML-Seite
CSS Hierarchische Struktur einer HTML-Seite strong gut html head body title Test h1 div Eine erste Seite cite Alles wird <html> <head> <title>Test</title> </head> <body> <h1>Eine erste Seite</h1> <div> <cite>Alles wird <strong>gut</strong></cite> </div> </body> </html> Wirkung cite { color: red; }

50 Selektoren - Übersicht
CSS Selektoren - Übersicht

51 CSS Selektoren Universeller Selektor (Muster: *) Beziehen sich auf alle Elemente, Beispiel: * { font-family: Verdana, Arial, sans-serif; } Typenselektor (Muster: E) Passt auf alle Elemente mit dem Namen E, Beispiel: h2 { font-weight:normal; } Nachfahren-Selektor (Muster: E F) Passt auf alle Elemente mit dem Namen F,die Nachfahren des Elements E sind, Beispiel: h1 em { color:red; } Kind-Selektor (Muster: E > F) Passt auf alle Elemente mit dem Namen F,die ein direkter Nachfahre des Elements E sind, Beispiel: body > p { text-align: center; }

52 CSS Selektoren Klassen-Selektor (Muster: E.classR) Passt auf alle Elemente mit dem Namen E,deren Attribut class den Wert classR hat, Beispiel: .navigation { text-align: center; } ID-Selektor (Muster: E#classR) Passt auf alle Elemente mit dem Namen E,deren Attribut id den Wert idR hat, Beispiel: p#navigation { text-align: center; } Einfacher Attribut-Selektor (Muster: E[Attribut]) Passt auf alle Elemente mit dem Namen E, die das genannte Attribut besitzen, Beispiel: h1[title] { color:green; }

53 Selektoren und Pseudo-Klassen
E:first-child Passt auf das erste Kindelemente von Element mit dem Namen E, Beispiel: p:first-child { color: blue; } E:link Passt auf Elemente mit dem Namen E, die einen bisher unbesuchten Link enthalten, Beispiel: a:link { color: blue; } E:visited Passt auf Elemente mit dem Namen E, die einen bereits besuchten Link enthalten E:hover Passt auf Elemente mit dem Namen E, die gerade ausgewählt, aber noch nicht aktiviert sind E:focus Passt auf das Element mit dem Namen E, das gerade den Focus hat

54 CSS CSS in HTML einbinden Intern: innerhalb einer HTML-Datei einen Bereich für CSS-Formate definieren <style type="text/css"> <!-- /* Definition der Formate... */ --> </style> Extern: Formate zentral in separater CSS-Datei definieren <link rel="stylesheet" type="text/css" href="formate.css"> Inline: Formate innerhalb eines HTML-Elements definieren <h1 style="[element-spezifische Formate]">...</h1>

55 CSS Intern Für alleinstehende Webseiten ist es möglicherweise sinnvoller, das Stylesheet direkt in die Seite einzubetten, damit andere Seiten diese Stile nicht zu sehen bekommen. Interne Stile werden im head-Teil des Dokumentes innerhalb der style-Tags definiert. <html> <head> <title>Titel der Datei</title> <style type="text/css"> h1 { font-family:Arial,sans-serif; text-align:center; text-decoration:underline; color:blue;} </style> </head> <body> <h1>30 Punkt und Blau!</h1> </body> </html>

56 CSS Inline Bei Inline-Stilen werden Stildefinitionen auf einen bestimmten Tag innerhalb der Seite angewandt. Dazu wird das Attribute „style“ verwendet. ... <p style="background-color:#808040; color:#D8FD02; font-family:'Century Schoolbook',serif; font-size:24pt; letter- spacing:3px; padding:40px; border:double #D8FD02 4px;"> Unser Kopf ist rund, damit das Denken die Richtung wechseln kann! </p> ...

57 Extern  Datei „meineFormate.css“
Mit Hilfe des link-Tags können Webseiten externe CSS-Dateien einbinden. Diese dürfen ausschließlich CSS-Anweisungen enthalten. h1, h2 { color:blue; font-size:30pt; } body { font-family:Helvetica,Arial,sans-serif; font-style:italic;  Datei „meineFormate.css“ Verweis: <link rel="stylesheet" type="text/css" href=„meineFormate.css">

58 CSS Maßeinheiten Bei numerischen Angaben zu CSS-Eigenschaften, also etwa bei Schriftgrößen, Absatzabständen oder Rändern, stehen Ihnen weit verbreitete Maßeinheiten zur Verfügung. Dabei sind absolute Angaben (z.B. Millimeter) und relative Angaben (z.B. Prozent gegenüber "normal") möglich. Benutzen Sie für Ihre Angaben die folgenden Abkürzungen: Absolut: pt, pc, in, mm, cm, px font-size:12pt; margin-right:60px; Relativ: em,ex, % font-size:1.2em; font-size:1.3ex; line-height:120%;

59 Farbangaben background-color:black; background-color:#0000FF;
CSS Farbangaben background-color:black; background-color:#0000FF; background-color:rgb(202,200,201); background-color:rgb(10%, 90%, 15%);

60 Schriftformatierung font-family (Schriftart) font-style (Schriftstil)
CSS Schriftformatierung font-family (Schriftart) font-family:'Times New Roman',Times,serif; font-style (Schriftstil) font-style:italic; font-variant (Schriftvariante) font-variant:small-caps; font-size (Schriftgröße) font-size:6pt; font-weight (Schriftgewicht) font-weight:bold; text-decoration (Textdekoration) text-decoration:underline;  color (Textfarbe) color:blue;

61 Außenrand und Abstand margin-top (Abstand oben) margin-top:2.5cm;
CSS Außenrand und Abstand margin-top (Abstand oben) margin-top:2.5cm; margin-left (Abstand links) margin-left:100px; margin-bottom (Abstand unten) margin-bottom:10mm margin-right (Abstand rechts) margin-right:100px;

62 Rahmen Rahmendicke border-width:1px; Rahmenfarbe border-color:red;
CSS Rahmen Rahmendicke border-width:1px; Rahmenfarbe border-color:red; Rahmentyp border-style:dotted; none, hidden, dotted, dashed, solid, double, outset

63 Positionieren von Elementen
CSS Positionieren von Elementen Position position:absolute; top:10px; left:10px; Position: absolute = absolute Positionierung, gemessen am Rand des Elternelements. Scrollt mit. fixed = absolute Positionierung, gemessen am Rand des Browserfensters. Bleibt beim Scrollen stehen. relative = relative Positionierung, gemessen an der Normalposition oder Anfangsposition des Elements selbst. static = keine spezielle Positionierung, normaler Elementfluss (Normaleinstellung).

64 Weitere Quellen HTML, CSS, JavaScript,...: http://de.selfhtml.org
Die Geschichte des Netzes: ein historischer Abriss : Einstieg ins Webdesign