HTML Teil 2 So kann man HTML-Seiten mit <div> und CSS gestalten So sehen einfache Formulare aus
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
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)
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.
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: http://www.css4you.de/ Vorgehen heute: Lernen am Beispiel. CSS sollten Sie kennen und auch ein klein wenig können.
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): http://de.selfhtml.org/html/text/bereiche.htm#formatieren
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 http://de.selfhtml.org/css/eigenschaften/positionierung.htm zum Ausprobieren: <div style="position:absolute; top:50px; left:25%; width:70%; padding:10px;">
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: http://de.selfhtml.org/css/intro.htm 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: http://www.css4you.de http://de.selfhtml.org/ Google.
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
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: http://de.selfhtml.org/css/formate/einbinden.htm#separat
Formulare Einstieg Wozu können Formulare verwendet werden? 11 1. 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.
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.
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">
Wie sieht eine Ausgabe des Skriptes antwort.php aus? 14
Fertige Programme (Google Suche) mit Formularen nutzen 15 <html> <head> <title> Formulartest Google Suche </title></head> <body> <form method="get" action="http://www.google.de/search" target="_blank"> Suchbegriff eingeben: <br> <input type="text" name=q size="60"> <input type="submit" name="x" value="mit Google suchen"> </form> </body> </html>
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"
ANHANG NUR ZUR INFO: Frames mehrere Dateien zu einer Seite 17 index.html Navigation Inhalte index.html nav.html inh.html
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" "http://www.w3.org/tr/html4/frameset.dtd"> <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>
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: http://de.selfhtml.org/html/frames/definieren.htm#frames