HTML Teil 2. So kann man HTML-Seiten mit <div> und CSS gestalten. So sehen einfache Formulare aus

Größe: px

Ab Seite anzeigen:

Download "HTML Teil 2. So kann man HTML-Seiten mit <div> und CSS gestalten. So sehen einfache Formulare aus"

Björn Simen
vor 8 Jahren
Abrufe

1 HTML Teil 2 So kann man HTML-Seiten mit <div> und CSS gestalten So sehen einfache Formulare aus

2 Wie könnte ein komplexer Internetauftritt aussehen? Trennung Inhaltsbereich und Navigationsbereich 2 Beispiel: Strukturierte Site mit drei verlinkten HTML-Seiten: Index.html Navigation Spezifische Inhalte Navigation in allen Seiten gleich. Inhalte unterschiedlich HTML-Tag zur Verlinkung: <a href= ueber.html >Über uns</a> preis.html service.html ueber.html Spezifische Inhalte Navigation Spezifische Inhalte Navigation Spezifische Inhalte Navigation

Index.html Navigation Spezifische Inhalte Navigation in allen Seiten gleich.

3 Welche Möglichkeiten gibt es, Inhaltsbereich und Navigationsbereich zu trennen? 3 1. Seitengestaltung mit Frames (nur wissen, dass es das gibt, nicht können) (nachteilig wg. z.b. Suchmaschinen und Übertragung in Content Management Systeme) Eine kurze Darstellung (nur zur Information, wird nicht besprochen) finden Sie weiter hinten. 2. Seitengestaltung mit Tabellen (schon am ersten Teil geübt) (nachteilig wg. Lesbarkeit für Screenreader) 3. Seitengestaltung mit <div> (gängige Methode, das soll heute geübt werden)

4 Wie kann ein Bereich mit <div> gestaltet werden 4 Ein Beipiel mit <div>: <html><head><title>div-test</title></head> <body> <div align="center"> <h1>alles zentriert</h1> Weiterer Text.. </div> </body> </html> <div> schließt ganze Blöcke ein und legt Formatierungen für diesen ganzen Block fest.

5 Wie funktioniert <div>? 5 1. <div> fasst mehrere Elemente zu einem Block zusammen. 2. <div> soll normalerweise mit CSS cascading stylesheets formatiert werden. Im Miniskript CSS lesen und CSS nachschlagen: Vorgehen heute: Lernen am Beispiel. CSS sollten Sie kennen und auch ein klein wenig können.

<div> soll normalerweise mit CSS cascading stylesheets formatiert werden.

6 Wie kann man mit div Text positionieren? 6 Ein Beispiel: <div style="text-align:right; padding:20px; border:thin solid blue; margin:25px"> <h1>alles rechts am Rand</h1> Weiterer Text, Bilder o.ä </div> Jeden CSS-Befehl mit ; abschließen. Beispiel aus (Linktipp):

blue; margin:25px"> <h1>alles rechts am Rand</h1> Weiterer Text, Bilder o.

7 Wie kann man mit <div> einen Bereich auf einer Internetseite positionieren? 7 <div style="position:fixed; right:75%; left:3%; top:200px; width=25%; padding=10px; margin=10px; border-width:5px; border-style:solid; border-color:#00aa00; background-color:#ffaaff;"> <b>interne Navigation:</b><br> Position auf der Seite. <div> RGB: rot 00 bis ff, z.b. 7a, grün 00 bis ff, blau 00 bis ff Feste Position zum Ausprobieren: <div style="position:absolute; top:50px; left:25%; width:70%; padding:10px;">

border-color:#00aa00; background-color:#ffaaff;"> <b>interne Navigation:</b><br> Position auf der Seite. <div> RGB: rot 00 bis ff, z.b. 7a, grün 00 bis ff, blau 00 bis ff Feste Position http://de.

8 Wofür benötigt man CSS und wo finde ich Informationen? 8 Merksätze: 1. HTML beschreibt die Struktur einer Internet-Seite. 2. CSS (Cascading Style Sheets) steuert das Aussehen der HTML-Elemente. Zur Einstimmung nachlesen: Zwei Verschiedene Möglichkeiten, CSS zu nutzen: 1. CSS-Tags können direkt in HTML-Seiten geschrieben werden. 2. CSS-Tags können als separate Dateien für mehrere HTML-Dateien geschrieben werden (empfohlen für größere Projekte). Internet-Quellen zum CSS-lernen: Google.

htm Zwei Verschiedene Möglichkeiten, CSS zu nutzen: 1. CSS-Tags können direkt in HTML-Seiten geschrieben werden. 2.

9 Wie können CSS Befehle direkt in die Seite geschrieben werden? 9 Zwei Möglichkeiten, CSS-Tags direkt in der Seite einzusetzen. 1. Im head-bereich der HTML-Seite 2. Im jeweiligen HTML-Tag

Stylesheets kann das Aussehen von allen HTML-Seiten geändert

10 Wie können CSS Befehle in einer separaten Datei genutzt werden? 10 Vorteil CSS als separate Datei: Mit der Änderung eines Stylesheets kann das Aussehen von allen HTML-Seiten geändert werden. Nachlesen:

11 Formulare Einstieg Wozu können Formulare verwendet werden? Mit Formularen können Daten in HTML-Seiten erfasst und an Programme auf dem Webeserver übermittelt werden. 2. Das Programm auf dem Webserver verarbeitet die Daten und erzeugt eine HTML-Seite, die dann angezeigt wird.

auf dem Webeserver übermittelt werden. 2.

12 Wie sieht der HTML-Quelltext für ein einfaches Formular mit einem einzeiligen Textfeld aus? 12 <form method="get" action="antwort.php" enctype="multipart/form-data"> Text in Zeile eingeben: <br> <input type="text" name="text" size="30"> <br> <input type="submit" name="l" value="absenden"> </form> Das ist der Variablenname... und könnte auch "Hugo" heißen.

php" enctype="multipart/form-data"> Text in Zeile eingeben: <br> <input type="text"

13 Wie sehen Teile des HTML-Quelltextes für einen Textbereich aus? 13 <textarea name="text" cols=45 rows=5/></textarea> <input type="submit" name="l" value="absenden">

14 Wie sieht eine Ausgabe des Skriptes antwort.php aus? 14

15 Fertige Programme (Google Suche) mit Formularen nutzen 15 <html> <head> <title> Formulartest Google Suche </title></head> <body> <form method="get" action=" target="_blank"> Suchbegriff eingeben: <br> <input type="text" name=q size="60"> <input type="submit" name="x" value="mit Google suchen"> </form> </body> </html>

16 Empfohlene Übungsaufgaben 16 Starten Sie nun in der Reihenfolge: - Aufgabe 9a und 9b "Vorbereitende Übung" - Aufgabe 10 "Gestalten mit <div> in acht Schritten" - Aufgabe 11 "Einstieg in Formulare"

17 ANHANG NUR ZUR INFO: Frames mehrere Dateien zu einer Seite 17 index.html Navigation Inhalte index.html nav.html inh.html

18 ANHANG NUR ZUR INFO: Frames Aufbau der Frameseite 18 index.html Notfalltext, falls Browser Frames nicht kann. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" " <html> <head> <title>frameset mit Sitemap</title> </head> <frameset cols= 25%,75%> <frame src="verweise.htm" name="navigation"> <frame src="startseite.htm" name="daten"> <noframes> <body> <a href="verweise.htm">navigation</a> <a href="startseite.htm">daten</a> </body> </noframes> </frameset> </html>

dtd"> <html> <head> <title>frameset mit Sitemap</title> </head> <frameset cols= 25%,75%> <frame src="verweise.

19 ANHANG NUR ZUR INFO: Frames Hinweise 19 Hinweise: Dateien, die in den Inhaltsfenstern angezeigt werden, sind wiederum einfache HTML-Seiten. Wenn Sie irgendwann später doch einmal mit Frames arbeiten wollen: unbedingt mit verschiedenen Browsern testen. Nachlesen:

Wenn Sie irgendwann später doch einmal mit Frames arbeiten wollen: unbedingt

Ähnliche Dokumente

Aufgaben HTML Formulare. Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, claus.brell@hs-niederrhein.de, Wirtschaftsinformatik, Statistik

Aufgaben HTML Formulare. Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, claus.brell@hs-niederrhein.de, Wirtschaftsinformatik, Statistik 1 Aufgaben HTML Formulare Aufgabe 1 (Vorbereitung) Google Suche 2 Probieren vor Studieren.. Arbeitsauftrag: 1.) Fügen Sie mit Notepad++ in Ihrer Datei index.html den unten gezeigten Quelltextschnipsel