Die Sprache des WWW: HTML (HyperText Markup Language)

Größe: px

Ab Seite anzeigen:

Download "Die Sprache des WWW: HTML (HyperText Markup Language)"

Dirk Hofmann
vor 7 Jahren
Abrufe

1 Die Sprache des WWW: HTML (HyperText Markup Language)

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. 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> <p>...</p> (um den Zeilenumbruch einzuleiten) (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> Attribut Wert

8 Gedichtformatierung (Übung 2) <html> <head> <title>johann Wolfgang Goethe</title> </head> <body> <p align="center">der Zauberlehrling</p> <p>hat der alte Hexenmeister<br> Sich doch einmal wegbegeben!<br> Und nun sollen seine Geister<br> Auch nach meinem Willen leben.<br> Seine Wort und Werke<br> Merkt ich und den Brauch,<br> Und mit Geistesstärke<br> Tu ich Wunder auch.</p> <p align="right">walle! walle<br> Manche Strecke,<br> Daß, zum Zwecke,<br> Wasser fließe<br> Und mit reichem, vollem Schwalle<br> Zu dem Bade sich ergieße.</p> </body> </html> 2. Schritt: 1. Schritt: Gedicht im Editor bearbeiten Gedicht im Explorer öffnen.

9 Befehle zur physischen Formatierung Fett: <b>...</b> Kursiv: Unterstrichen: Schreibmaschineneffekt: Durchstreichen: Vergrößerter Text: Verkleinerter Text: Hochgestellter Text: Tiefergestellter Text: <i>...</i> <u>...</u> <tt>...</tt> <strike>...</strike> <big>...</big> <small>...</small> <sup>...</sup> <sub>...</sub>

10 Physische Formatierungen (Übung 3) 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.

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 unteroder übergeordneten Verzeichnissen Verweis auf untergeordnetes Verzeichnis: Name des Verzeichnisses Name der Seite beide Angaben durch / trennen 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=" Spiegel</a>

18 Verweise zu einer -Adresse Attribut: mailto:adresse Beispiel: <a href= > </a>

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>

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

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= action= form.php 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:

Ähnliche Dokumente

Befehle zur physischen Formatierung

Befehle zur physischen Formatierung Fett: ... Kursiv: ... Unterstrichen: Schreibmaschineneffekt: Durchstreichen: ... ... ... Vergrößerter Text: ...