Embed Size (px)
Citation preview
Die Sprache des WWW: HTML(HyperText Markup Language)
Gymnasium Sulingen
Informatik
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
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)
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>
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.
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!
2. Schritt
aufgabe1.html im Internet– Explorer öffnen.
Wichtig: Pfadangabe muss stimmen!
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>
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>
WertAttribut
Gedichtformatierung (Übung 2)
1. Schritt:
Gedicht im Editor bearbeiten
1. Schritt:
Gedicht im Editor bearbeiten
2. Schritt:
Gedicht im Explorer öffnen.
2. Schritt:
Gedicht im Explorer öffnen.
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>
Physische Formatierungen (Übung 3)
1. Schritt:
Formatierungen im Editor
1. Schritt:
Formatierungen im Editor
2. Schritt:
Form
atierungen im E
xplorer betrachten.
2. Schritt:
Form
atierungen im E
xplorer betrachten.
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>
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><br><font face="Arial,Helvetica" color="lime">hellgrüner Text in der Schriftart Arial</font><br><font size="-1" color="blue" face="Arial,Helvetica">blauer Text in Schriftgröße 2 und Schriftart Arial</font></body></html>
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"
Hyperlinks = Querverweise im Internet:
Pfeil der Maus wird zu einer Hand über einem Hyperlink.
Beispiel:
Hyperlinks
Einfache Hyperlinks Verweis zu Dateien im selben Verzeichnis
Beispiel: private Homepages
Verbindung der Web-Seiten: <a href="inhalt.html">Inhalt</a>
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
Absolute Hyperlinks Absolut bedeutet: komplette Angabe der Internetadresse
Struktur:
<a href="http://www.spiegel.de/"> Spiegel</a>
1. Schritt
Link im Editor erstellen!
1. Schritt
Link im Editor erstellen!
2. Schritt
Link im Explorer betrachten
2. Schritt
Link im Explorer betrachten
3. Schritt
Link im Explorer anklicken!
3. Schritt
Link im Explorer anklicken!
Verweise zu einer E-Mail-Adresse
Attribut: mailto:Adresse
Beispiel: <a href=“mailto:[email protected]“>
E-Mail</a>
1. Schritt
E-Mail Link im Editor erstellen!
1. Schritt
E-Mail Link im Editor erstellen!
2. Schritt
Link im Explorer betrachten
2. Schritt
Link im Explorer betrachten3. Schritt
Link im Explorer anklicken!
3. Schritt
Link im Explorer anklicken!
Tag <img> bindet Grafik in HTML-Dokument ein
Attribut src gibt Dateinamen an, in die die Grafik eingebunden werden soll
Beispiel:
Einbinden von Grafiken
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)
Verweise auf Bilder
Grafiken als Hyperlinks
Hyperlink wird um eine eingebettete Grafik gelegt:<a href="datei.htm"><img src="bild.jpg"></a>
2. Schritt
Link im Explorer betrachten
2. Schritt
Link im Explorer betrachten
3. Schritt
Link im Explorer anklicken!
3. Schritt
Link im Explorer anklicken!
1. Schritt
Grafik Link im Editor erstellen!
1. Schritt
Grafik Link im Editor erstellen!
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
<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:
Aufbau einer Tabelle
Standardmäßig: abhängig vom Text
Individuell gestalten: mit Attribut width="Wert" (Angabe in Pixel oder Prozent)
Bei Prozentangabe: 100% = Fensterbreite
Breite einer Tabelle
<table border="1" width="50%"> <th>Tabelle mit Breitenangabe</th> <tr> <td>Diese Tabelle hat eine Breitenangabe von 50 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>
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
Breite von Spalten
Tabelle mit Breite 75%, Spaltenbreiten: 20%, 30%, 50%
Tabelle mit Breite 75%, Spaltenbreiten: 20%, *, 50%
Tabelle mit Breite 75%, Spaltenbreiten: 150, *, 100 Pixel
Beispiel für Spaltendefinition<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;
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=“mailto:[email protected]“
action=“seite.asp“
Attribut enctype formatiert die Daten nach einem bestimmten Schema:
enctype="Format"
Eingabefelder und Passwortfelder<html><head><title>Formular: Einzeilige Eingabefelder</title></head><body><h3>Formular: Eingabefelder und Passwortfelder</h3><form action=post enctype="text/plain" method="mailto:[email protected]"><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>
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
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
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
Frame-Layout entwerfen
Beispiel:
Oberhalb der Titel der Web-Seite
Linke Seite = Navigationsleiste
Rechter Bereich = zum Anzeigen der Web-Seiten
statisch: Inhalt bleibt gleich
Titel der Webseite
Navi-gation
grafischeElemente
oderLinkszum
Navigieren
Textbereich
nach unten scrollfähiger Bereich, in dem dieInformationen, die in der Navigationausgewählt werden, angezeigt werden sollen
Vorab grobes Layout der Web-Seite entwerfen:
Beispiel zur Erstellung eines Framesets
<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>
Vorab drei Dateien anlegen: flinks.html, foben.html, fhaupt.html
Fertiges Frameset im Browser
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>
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.
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.
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> ...
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
