1 / 39

Die Sprache des WWW: HTML (HyperText Markup Language)

Die Sprache des WWW: HTML (HyperText Markup Language). Gymnasium Sulingen Informatik. Die Anfänge von HTML. H yper T ext M arkup L anguage 1989: Forschungsinstitut in Genf entwickelt eine Skript- Sprache, die einfach zu erlernen ist

dai
Download Presentation

Die Sprache des WWW: HTML (HyperText Markup Language)

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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 MicrosoftNotepad)

  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) 1. Schritt: HTML – Code in einem Editor schreiben und als aufgabe1.html abspeichern. • Ein HTML-Dokument ist grundsätzlich aus vier Tags aufgebaut: 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 Attribut Wert • 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>

  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> <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>

  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 beide Angaben durch / trennen • 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>

  17. Absolute Hyperlinks • Absolut bedeutet: komplette Angabe der Internetadresse • Struktur: • <a href="http://www.spiegel.de/"> 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 href=“mailto:juergen-dueker@web.de“> E-Mail</a> 1. Schritt E-Mail 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 <table border="1" width="50%"><th>Tabelle mit Breitenangabe</th><tr><td>Diese Tabelle hat eineBreitenangabe von 50 Prozent.</td> </tr><tr><td>Das bedeutet: Egal wie viel Text in derTabelle steht, sie hat immer eineBreite von 50% des Fensters.</td></tr></table> • Standardmäßig: abhängig vom Text • Individuell gestalten: mit Attribut width="Wert" (Angabe in Pixel oder Prozent) • Bei Prozentangabe: 100% = Fensterbreite

  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 <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; • Tabelle mit Breite 75%, Spaltenbreiten: 20%, 30%, 50% • Tabelle mit Breite 75%, Spaltenbreiten: 20%, *, 50% • Tabelle mit Breite 75%, Spaltenbreiten: 150, *, 100 Pixel

  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=“mailto:juergen-dueker@web.de“ • 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" method="mailto:mail@adresse.de"> <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 statisch: Inhalt bleibt gleich • Vorab grobes Layout der Web-Seite entwerfen: • Beispiel: • Oberhalb der Titel der Web-Seite • Linke Seite = Navigationsleiste • Rechter Bereich = zum Anzeigen der Web-Seiten

  33. 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

  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

More Related