Inhalt HTML 2. Applets Frames Formulare CSS cascading style sheets. Lehrveranstaltung Internet in AT Dr.-Ing. A. Braune TECHNISCHE UNIVERSITÄT DRESDEN

Größe: px

Ab Seite anzeigen:

Download "Inhalt HTML 2. Applets Frames Formulare CSS cascading style sheets. Lehrveranstaltung Internet in AT Dr.-Ing. A. Braune TECHNISCHE UNIVERSITÄT DRESDEN"

Meike Peters
vor 7 Jahren
Abrufe

1 Inhalt HTML 2 Applets Frames Formulare CSS cascading style sheets SS 06 1

2 Applets Das Applet Java Applets sind kleine Java-Programme mit deren Hilfe aktive Webseiten erstellt werden können. werden mit einer HTML-Seite von einem Server geladen können nur mit dem Server Verbindung aufnehmen, von dem sie geladen wurden Nach dem Laden werden diese auf dem lokalen Rechner ausgeführt und können eine Verbindung zu ihrem Server aufnehmen. <body>... <applet code="dateiname.class" codebase=".." width="500 height="500" alt="ein Java-Applet" hspace="20 vspace="10 archive= URI des Archives1, URI des Archives2 > <param name= value1" value= value2"> </applet>... </body> Werte, die an das Applet zu übergeben sind SS 06 2

3 Attribute des <applet>-elementes Applets Attribut alt archive code widht height codebase hspace vspace name Notw.? nein nein ja ja ja nein nein nein nein Bedeutung Alternativtext, falls das Applet nicht anzeigbar ist URI einer kommaseparierten Liste mit Archivdateien für das Applet Klassendatei des Applets (*.class) ohen Pfadangaben Anzeigebreite des Applets in Pixeln oder in % Anzeigehöhe des Applets in Pixeln oder % an URI des Verzeichnisses, auf dem sich das Applet befindet Horizontaler Abstand zwischen Applet und umfließendem Text in Pixeln oder % horizontaler Abstand zwischen Applet und umfließendem Text in Pixeln oder % Name des Applets SS 06 3

4 Formulare Formular Dienen der Abfrage, bzw. Interaktion mit dem Benutzer Formular Grundgerüst <form action= auszuführende Aktion method= get post > Formulare Formularelemente... </form> SS 06 4

5 Formulare Formularelemente einzeiliges Texteingabefeld: <input type= text name= Name size= n maxlength= m > SS 06 6

6 Formulare Formularelemente mehrzeilige Texteingabefelder: <textarea name= Name rows= n cols= m > Bereits vorgetragener Text </textarea> SS 06 7

7 Formulare Formularelemente Menüliste: <select name= Name size= n > <option selected value= Wert1 >Eintrag1 <option value= Wert2 >Eintrag2 <option value= Wert3 >Eintrag3 </select> SS 06 8

8 Formulare Formularelemente Radiobuttons: <input type= radio name= gruppe value= wert1 [checked]/> Beschriftung SS 06 9

9 Formulare Formularelemente Checkboxen: <input type= checkbox name= gruppe value= wert1 [checked]/> Beschriftung SS 06 10

10 Formulare Formularelemente Submit-Button: löst die definierte Aktion von <form action= aus <input type= submit value= Beschriftung > Reset-Button: setzt die Formulareinträge zurück <input type= reset value= Beschriftung > Button - Element: <button name= = Name value= Beschriftung > type= submit reset button > Text/Grafik </button SS 06 11

11 Frames Grundlagen erlauben das Aufteilen des Fensters in unabhängige Bereiche, Rahmen (Frames) in einem Frame wird eine HTML-Datei angezeigt zum statischen Anzeigen von Informationen wie: Inhaltsverzeichnis (Navigation) Autor, Firmenlogo, etc. Inhalt: Autor und Titel (statisch) Seite 1 Seite 2 Seite 3 Seiteninhalte (dynamisch) SS 06 13

12 Frames Entwickeln von Frames Extradatei ist erforderlich, die die geometrische Bildschirmaufteilung steuert Angabe der Startdateien in den Frames Alternativdarstellung der Seite, falls der Browser keine Frames unterstützt Anpassung an verschiedene Bildschirmauflösungen SS 06 14

13 Frames <frameset> <html> <head>...</head> <frameset rows= 15%,75% > <frame...> <frame...> </frameset> </html> 1.Frame 15% 2.Frame 75% SS 06 15

14 Frames <frameset> <html> <head>...</head> <frameset rows= 100,*,80 > <frame...> <frame...> <frame...>.. <noframes> <body> Alternativdarstellung </body> </noframes> </frameset> </html> 1.Frame 100 Pixel 2.Frame (*Pixel) 3.Frame 80 Pixel SS 06 16

15 Frames <frameset> <html> <head>...</head> <frameset cols= 100,* > <frame...> <frame...> </frameset> </html> 1. Frame 100 Pixel 2. Frame (*Pixel) SS 06 17

16 Frames <frameset> <html> <head>...</head> <frameset cols= 30%,70% > <frame...> <frameset rows= 25%,75%> <frame...> <frame...> </frameset> </frameset> </html> 1. Frame 30% 2.Frame 25% 3.Frame 75% SS 06 18

17 Frames Frames definieren <frameset... > <frame src= datei1.html name= framename1 scrolling= no frameborder= 0... </frameset> SS 06 19

18 Frames Frames definieren <html> <head><title>titel</titel></head> <frameset... > <frame src= datei1.html name= Titelseite scrolling= no > <frame src= datei2.html name= Prozessdaten scrolling = auto >... <noframes> <body> <h2>ihr Browser kennt leider keine Frames </h2> </body> </noframes> </frameset> </html> SS 06 20

19 Frames Frames definieren <frameset... > <frame src= Titel.html name= Titelseite scrolling= no > <frame src= start.html name= Prozessdaten scrolling = auto >... </frameset> Verweise zu anderen Frames <a href= titel.html" target= Titelseite"> Startseite </a <a href= umpumpen.html" target= Prozessdaten"> Umpumpen </a> _blank neues Fenster _self selber Frame _top in ganzes Browserfenster SS 06 21

20 CSS cascading style sheet Ziele: einfachere Wartbarkeit, Änderbarkeit lesbarerer Quellcode Trennung von logischer Struktur und Layout Lösung: Layout bzw. Attribute der Strukturelemente (<p>,<h1>,...) wird mit Attribut oder Element style realisiert SS 06 22

21 CSS cascading style sheet Allgemeine Darstellung Element [Element.] {name:wert; name:wert; } Stylesheets in eine HTML-Datei einbinden Inline-Stylesheet Anweisung mit dem Attribut Style Stylesheet Anweisung im Header mit dem Element Style Stylesheet Anweisung aus einer externen Datei SS 06 23

22 CSS cascading style sheet Formatieren eines einzelnen Absatzes: <p style= font-family:arial; color:green > Dokumentweites Zuweisen im Kopf <head> <style type= text/css > h1 {font-family:arial; color:blue} </style> </head> (alle Überschriften h1 im Dokument werden in Arial und blau geschrieben) SS 06 24

23 CSS cascading style sheet Stylesheets als separate Datei style.css ist Textdatei im Klartext Beispiel: h1, h2 {font-family: Arial, text-align: center} name.html - Datei in der das stylesheet wirken soll: <head> <link href="style.css" rel="stylesheet" type="text/css"> </head> SS 06 25

Ähnliche Dokumente

PHP & HTML. Kurzeinstieg HTML. Zellescher Weg 12 Willers-Bau A109 Tel Michael Kluge

PHP & HTML. Kurzeinstieg HTML. Zellescher Weg 12 Willers-Bau A109 Tel Michael Kluge Zentrum für Informationsdienste und Hochleistungsrechnen (ZIH) PHP & HTML Kurzeinstieg HTML Zellescher Weg 12 Willers-Bau A109 Tel. +49 351-463 - 32424 Michael Kluge (michael.kluge@tu-dresden.de) HTML