Präsentation herunterladen
Die Präsentation wird geladen. Bitte warten
1
Die Sprache des WWW: HTML (HyperText Markup Language)
Gymnasium Sulingen Informatik
2
Die Anfänge von HTML HyperText Markup Language
1989: Forschungsinstitut in Genf entwickelt eine Skript- Sprache, die einfach zu erlernen ist einzelne Dateien im Internet miteinander verknüpft durch direkte Verweise Unter dem Projektnamen World Wide Web: Entwicklung des Internetprotokolls HTTP (zum schnellen Auffinden anderer Dokumente) Entwicklung der Auszeichnungssprache HTML
3
Was ist HTML? HTML = Programmiersprache, die Befehle enthält zur Erstellung von: Überschriften, Textabsätzen, Hyperlinks Grafiken, Tabellen Formularen HTML enthält begrenzte Anzahl von Befehlen, um Web- Seiten zu erstellen HTML kann mit beliebigem Texteditor erstellt werden (z.B. Editor oder Microsoft Notepad)
4
HTML-Tags Spitze Klammern = Tags
Befehle, um Text zu formatieren, stehen in Tags <b>Das ist fetter Text</b> <u>Hier kommt unterstrichener Text</u> Befehle bestehen aus einleitendem Tag<...> und abschließendem Tag </...> Befehle können groß- oder kleingeschrieben werden: <h1>Überschrift 1.Ordnung</h1> oder <H1>Überschrift 1.Ordnung</H1>
5
HTML-Grundgerüst (Übung 1)
Ein HTML-Dokument ist grundsätzlich aus vier Tags aufgebaut: 1. Schritt: HTML – Code in einem Editor schreiben und als aufgabe1.html abspeichern. 2. Schritt aufgabe1.html im Internet– Explorer öffnen. Wichtig: Pfadangabe muss stimmen!
6
Textabsatz und Zeilenumbruch
Zeilenumbrüche und Absätze werden auch im Browser erkannt: <br> (um den Zeilenumbruch einzuleiten) <p>...</p> (um den Absatz einzuleiten) Befehl für Überschriften: <h1>...</h1> <h2>...</h2> <h3>...</h3> bis <h6>...</h6>
7
Absatzausrichtung Das Attribut align (=Ausrichtung) gibt an, wie der nachfolgende Text ausgerichtet werden soll. Mögliche Werte sind: left (linksbündig) center (zentriert) right (rechtsbündig) justify (Blocksatz) Beispiel: <p align="center">zentrierter Text</p> Wert Attribut
8
Gedichtformatierung (Übung 2)
1. Schritt: Gedicht im Editor bearbeiten 2. Schritt: Gedicht im Explorer öffnen.
9
Befehle zur physischen Formatierung
Fett: <b>...</b> Kursiv: <i>...</i> Unterstrichen: <u>...</u> Schreibmaschineneffekt: <tt>...</tt> Durchstreichen: <strike>...</strike> Vergrößerter Text: <big>...</big> Verkleinerter Text: <small>...</small> Hochgestellter Text: <sup>...</sup> Tiefergestellter Text: <sub>...</sub>
10
Physische Formatierungen (Übung 3)
2. Schritt: Formatierungen im Explorer betrachten. 1. Schritt: Formatierungen im Editor
11
Schriftgröße, Schriftart, Schriftfarbe ändern
Befehl zum Ändern der Schrift: <font>...</font> Attribut size: <font size="Wert"> <font size=7>große Schrift</font> Attribut face: <font face="Schrift"> <font face="Arial, Helvetica">Arial</font> Befehl zum Ändern der Schrift: <font color="Wert"> <font color="blue">Blauer Text</font>
12
Formatierung in kombiniertem <font>-tag (Übung 4)
<html> <head> <title>Kombinierte Schriften</title> </head> <body> <font size="+2" face="Arial,Helvetica"> Text in Schriftart Arial und in Schriftgröße 5 </font> <br> <font size="4" color="cyan"> hellblauer Text in Schriftgröße 4 <font face="Arial,Helvetica" color="lime"> hellgrüner Text in der Schriftart Arial <font size="-1" color="blue" face="Arial,Helvetica"> blauer Text in Schriftgröße 2 und Schriftart Arial </body> </html>
13
Trennlinien Befehl <hr> ("horizontal ruler") erzeugt Querlinie mit Schattenverlauf Attribute Verändern der Trennlinie: Breite der Trennlinie: width="Wert" Höhe der Trennlinie: size="Wert" Schatten ausschalten: noshade Ausrichtung der Trennlinie: align="Art" Farbe der Trennlinie: color="Wert"
14
Hyperlinks Hyperlinks = Querverweise im Internet:
Pfeil der Maus wird zu einer Hand über einem Hyperlink. Beispiel:
15
Einfache Hyperlinks Verweis zu Dateien im selben Verzeichnis
Beispiel: private Homepages Verbindung der Web-Seiten: <a href="inhalt.html">Inhalt</a>
16
Relative Hyperlinks Verweise innerhalb größerer Projekte zu Dateien in unter- oder übergeordneten Verzeichnissen Verweis auf untergeordnetes Verzeichnis: Name des Verzeichnisses Name der Seite Struktur: <a href="ordner/datei.html"> Hyperlinktext</a> Verweis auf übergeordnetes Verzeichnis: Eine Ebene darüber: zwei Punkte mit Schrägstrich eingeben (.. /) Zwei Ebenen darüber: zwei Punkte mit Schrägstrich (../../) Struktur: <a href="../../datei.html“>Hyperlinktext</a> beide Angaben durch / trennen
17
Absolute Hyperlinks Absolut bedeutet: komplette Angabe der Internetadresse Struktur: <a href=" Spiegel</a> 1. Schritt Link im Editor erstellen! 2. Schritt Link im Explorer betrachten 3. Schritt Link im Explorer anklicken!
18
Verweise zu einer E-Mail-Adresse
Attribut: mailto:Adresse Beispiel: <a </a> 1. Schritt Link im Editor erstellen! 2. Schritt Link im Explorer betrachten 3. Schritt Link im Explorer anklicken!
19
Einbinden von Grafiken
Tag <img> bindet Grafik in HTML-Dokument ein Attribut src gibt Dateinamen an, in die die Grafik eingebunden werden soll Beispiel:
20
Verweise auf Bilder Verweise auf Bilder im Unterverzeichnis
<img src="bilder/grafik.jpg"> (aktuelles Verzeichnis, Unterverzeichnis bilder, Bild grafik.jpg) Verweise auf Bilder im darüber liegenden Verzeichnis <img src="../grafik.jpg"> (darüber liegendes Verzeichnis, Bild grafik.jpg) <img src="../../grafik.jpg"> (zwei Verzeichnisse nach oben, Bild grafik.jpg)
21
Grafiken als Hyperlinks
Hyperlink wird um eine eingebettete Grafik gelegt: <a href="datei.htm"><img src="bild.jpg"></a> 1. Schritt Grafik Link im Editor erstellen! 2. Schritt Link im Explorer betrachten 3. Schritt Link im Explorer anklicken!
22
Verweis auf andere Elemente
Bei Verweis auf andere Elemente erkennt der Browser an der Dateiendung, welche Aktion ausgeführt werden soll. Hyperlink verweist auf Textdatei (.txt): im Browser auch als Textdatei Grafik (.jpg, .gif): im Browser als eigenständiges Objekt Video (.mpg, .avi): Programm zum Videoabspielen wird geöffnet Musik (.wav, .ram): Programm zum Musikhören wird geöffnet Programm (.zip, .exe): Browser überspielt das Programm per Download Andere Formate (.pdf, .doc, .xls): Browser öffnet entsprechendes Programm
23
Aufbau einer Tabelle <table>: leitet Tabelle ein
border="Wert": legt Umrandung fest </table>: beendet die Tabelle <tr>: definiert eine Zeile <td>: definiert eine Zelle Beispiel: <table border="5"><tr><td>Dies ist die kleinstmögliche Tabelle.</td></tr></table> Ergebnis:
24
Breite einer Tabelle Standardmäßig: abhängig vom Text
Individuell gestalten: mit Attribut width="Wert" (Angabe in Pixel oder Prozent) Bei Prozentangabe: 100% = Fensterbreite <table border="1" width="50%"> <th>Tabelle mit Breitenangabe</th> <tr> <td>Diese Tabelle hat eine Breitenangabe von Prozent </td> </tr> <tr> <td>Das bedeutet: Egal wie viel Text in der Tabelle steht, sie hat immer eine Breite von 50% des Fensters </td> </tr> </table>
25
Breite von Spalten Definieren über Attribut width="Wert"
Angabe in Pixel, Prozent oder *: Prozentwerte sind abhängig von der Tabellenbreite (Summe aller Spaltenbreiten müssen 100% ergeben) Pixelangaben sind feste Werte * bedeutet: Rest, der übrigbleibt Innerhalb einer Tabelle gilt Angabe der ersten Spalte auch für alle folgenden Spalten
26
Beispiel für Spaltendefinition
Tabelle mit Breite 75%, Spaltenbreiten: 20%, 30%, 50% Tabelle mit Breite 75%, Spaltenbreiten: 20%, *, 50% Tabelle mit Breite 75%, Spaltenbreiten: 150, *, 100 Pixel <table align="center" border="1" width="75%" <tr><td width="20%">20%</td> <td width="30%">30%</td> <td width="50%">50%</td></tr> </table>nbsp; <table align="center" border="1" width="75%" <tr><td width="20%">20%</td> <td width="*">*</td> <td width="50%">50%</td></tr> </table>nbsp; <table align="center" border="1" width="75%" <tr><td width="150">150</td> <td width="*">*</td> <td width="100">100</td></tr> </table>nbsp;
27
Formulare definieren Alle Elemente müssen innerhalb des Tags <form></form> liegen. Attribut method bestimmt die Art der Weiterleitung der Daten: method="post" (Formular wird versendet) Attribut action gibt an, mit welchem Programm das Formular ausgeführt werden soll: action=“seite.asp“ Attribut enctype formatiert die Daten nach einem bestimmten Schema: enctype="Format"
28
Eingabefelder und Passwortfelder
<html> <head> <title>Formular: Einzeilige Eingabefelder</title> </head> <body> <h3>Formular: Eingabefelder und Passwortfelder</h3> <form action=post enctype="text/plain" <p>Name: <input type=text name="Name" size=20></p> <p>Vorname: <input type=text name="Vorname" size=17></p> <p>Postleitzahl: <input type=text name="PLZ" size=5 maxlength=5></p> <p>Wohnort: <input type=text name="Ort" size=17></p> <p>Passwort: <input type=password name="pw" size=17 value="123456" maxlength="12"></p> </form> </body> </html>
29
Schaltflächen Befehl <input type="submit" erzeugt Schaltfläche zum Versenden der Daten. Befehl <input type="reset" erzeugt Schaltfläche zum Zurücksetzen der Daten. Beispiel: <input type="submit"><input type="reset"> Beschriftung durch den Browser abhängig von Sprachversion: Internet Explorer 5.0, deutsch Netscape Navigator 4.6, englisch Opera 3.60, englisch
30
Was ist ein Frame? Frames teilen Browser-Fenster in rechteckige Bereiche. Mehrere Web-Seiten können gleichzeitig angezeigt werden unabhängig voneinander gesteuert werden Web-Seite wird langsamer geladen
31
Browser-Fenster aufteilen
Ab Grundgerüst: Browser-Fenster einteilen in Spalten und/oder Zeilen Attribute cols="Aufteilung" und rows="Aufteilung": Anzugeben innerhalb des Befehls <frameset> Zur Aufteilung des Browser-Fensters in Gruppen Werte in Prozent, Pixel oder *: müssen durch Kommata voneinander getrennt werden Anzahl der angegebenen Werte bestimmt Anzahl der Spalten/Zeilen
32
Frame-Layout entwerfen
Vorab grobes Layout der Web- Seite entwerfen: Beispiel: Oberhalb der Titel der Web-Seite Linke Seite = Navigationsleiste Rechter Bereich = zum Anzeigen der Web-Seiten statisch: Inhalt bleibt gleich
33
Beispiel zur Erstellung eines Framesets
Vorab drei Dateien anlegen: flinks.html, foben.html, fhaupt.html <html> <head> <title>Anwenden von Frames</title> </head> <frameset cols="15%,*"> <frame name="FLinks" src="flinks.html" <frameset rows="90,*"> <frame name="FOben" src="foben.html"> <frame name="FHaupt" src="fhaupt.html"> </frameset> </frameset </html>
34
Fertiges Frameset im Browser
35
Beispiele zur Frames-Aufteilung
HTML-Code: <frameset rows="100,*"> Definition des Frames</frameset> HTML-Code: <frameset cols="20%,*"> Definition des Frames</frameset> HTML-Code: <frameset rows="100,*,80"> Definition des Frames</frameset> HTML-Code: <frameset cols="160,*"> Definition des Frames<frameset rows="10%,90%"> Definition des Frames </frameset> </frameset>
36
Angaben in Pixel * = Fülle die Fläche mit dem noch verfügbaren Platz.
Es ist vorteilhaft, * in Pixelangaben zu nutzen, ansonsten bleibt das Frame bei Größenänderung gleich groß. Teilen einer Fläche: Das obere Frame ist doppelt so groß wie unterer: <frameset rows="2*,*">. Überprüfen Sie, ob alle Informationen zu sehen sind.
37
Angaben in Prozent Prozentwerte zwischen 1 und 100
Alle Frames innerhalb eines Framesets = 100% Beispiel: <frameset rows="25%,45%,30%"> Falls Werte größer 100: Bereiche werden automatisch herunterskaliert. Gesamtsumme unter 100: Bereiche werden automatisch heraufskaliert. Falls relative Größe (*) vorhanden ist, wird Überschuss dem * zugeteilt.
38
Hyperlinks setzen Attribut target="Name"
Gibt Verweisziel an, in dem der Hyperlink geöffnet werden soll Attribut angeben innerhalb <a href=...>...</a> Beispiel: <a href="abc.html" target="xyz"<Das Alphabet</a> Befehl <base target="Name"> Anzugeben innerhalb des Kopfabschnitts <head></head> Alle Links innerhalb der Web-Seite werden in Frames mit entsprechenden Namen angezeigt Beispiel: <head><base target="xyz">...</head> <a href="abc.html">Das Alphabet</a>
39
Frames beenden Dokument wird in neuem leeren Fenster geöffnet:
target="_blank Dokument wird in dem Frame geöffnet, in dem der Verweis steht: target="_self Verweis wird in das übergeordnete Fenster geladen: target="_parent Gesamtes Frameset wird geschlossen, Dokument wird in gesamten Browser-Fenster angezeigt: target="_top
Ähnliche Präsentationen
