HTML 10272020 HTML 1 Was ist HTML Hyper

  • Slides: 18
Download presentation
HTML 10/27/2020 HTML 1

HTML 10/27/2020 HTML 1

Was ist HTML Hyper. Text Markup Language • HTML ist eine Seitenbeschreibungssprache die ein

Was ist HTML Hyper. Text Markup Language • HTML ist eine Seitenbeschreibungssprache die ein Browser (Internet Explorer, Firefox, . . . ) darstellen kann. • HTML-Dokumente sind die Grundlage des World Wide Web. • HTML-Dateien sind reine Textdateien. Sie können mit eine beliebigen Editor oder mit WYSIWYGEditoren z. B. Front. Page, Dreamweaver, …erstellt werden. 10/27/2020 HTML 2

Ziel 10/27/2020 HTML 3

Ziel 10/27/2020 HTML 3

Ziel • Wie sind Webseiten aufgebaut - was ist HTML? • Einfache Grundtechniken von

Ziel • Wie sind Webseiten aufgebaut - was ist HTML? • Einfache Grundtechniken von HTML. Erstellen einer Webseite mit Grafik, Tabellen und Hyperlinks. • Weiterführend kann z. B. Self. HTML von Stefan Münz verwendet werden. http: //de. selfhtml. org/ 10/27/2020 HTML 4

Grundstruktur einer HTML-Seite Der Inhalt von HTML-Dateien steht in HTML-Elementen • HTML-Elemente werden durch

Grundstruktur einer HTML-Seite Der Inhalt von HTML-Dateien steht in HTML-Elementen • HTML-Elemente werden durch so genannte Tags markiert. • Fast alle HTML-Elemente werden durch einleitendes und ein abschließendes Tag markiert z. B. <b>. . . . </b> Es gibt einige Standalone-Tags z. B. <hr /> • Der Inhalt dazwischen ist der Gültigkeitsbereich des entsprechenden Tags. • Tags werden in spitzen Klammern notiert. <tag> … </tag> oder <tag Parameter> … </tag> 10/27/2020 HTML 5

Grundgerüst einer HTML-Datei <html> <head> <title>Hier steht der Titel der Seite</title> </head> <body> Hier

Grundgerüst einer HTML-Datei <html> <head> <title>Hier steht der Titel der Seite</title> </head> <body> Hier steht der eigentliche Seiteninhalt </body> </html> 10/27/2020 HTML 6

HTML - Quelltext Der HTML-Quelltext (Text im Editor) ist formatfrei, d. h. die Formatierung

HTML - Quelltext Der HTML-Quelltext (Text im Editor) ist formatfrei, d. h. die Formatierung des Quelltextes ist ohne Bedeutung. Das Aussehen der Seite wird ausschließlich über Tags bestimmt. Zeilenumbruch: <html> <head> <title>Hier steht der Titel der Seite</title> </head> <body> <h 1>Zeilenumbruch</h 1> Dieser Text steht in einer Zeile Hier haben wir nun Text in zwei Zeilen. Eine Datei beispiel. htm mit dem Editor erstellen und testen. Ende. </body> </html> 10/27/2020 HTML 7

Einige wichtige Tags • Überschriften • Textabsatz • • • <h 1> </h 1>

Einige wichtige Tags • Überschriften • Textabsatz • • • <h 1> </h 1> bis <h 6> </h 6> <p> </p> Fließtext, Zeilenumbruch am Ende des Absatzes Zeilenumbruch Trennlinie <hr /> Textattribute <b> </b> fett (bold) <i> </i> kursiv (italic) <u> </u> unterstrichen (underline), … Kommentar <!– Dies ist ein Kommentar --> Auch mehrzeilig möglich. Tags können auch geschachtelt sein: <b><u>Hallo</u></b> Die Tags in der Datei beispiel. htm ausprobieren. 10/27/2020 HTML 8

Hyperlinks 1 Links (Verweise auf andere Dokumente) machen HTML zu Hypertext. Verweise werden durch

Hyperlinks 1 Links (Verweise auf andere Dokumente) machen HTML zu Hypertext. Verweise werden durch das <a> - Tag (anchor) mit Parameter href (Hypertext-Referenz) gebildet. <a href="http: //www. bmw. de"> Die Startseite von BMW </a> URL Verweistext Wird in der URL kein Server angegeben, so handelt es sich um einen internen Verweis. Er bezieht sich auf eine Seite auf demselben Server, auf dem die Seite liegt, die den Hyperlink enthält. href="seite 2. htm" die seite 2. htm muss im gleichen Ordner wie Ausgangsseite liegen. Die Hyperlinks in die Datei beispiel. htm einfügen und testen. 10/27/2020 HTML 9

Hinweise zur Rechtslage Das Landgericht Hamburg hat mit Urteil vom 12. 5. 1998 entschieden,

Hinweise zur Rechtslage Das Landgericht Hamburg hat mit Urteil vom 12. 5. 1998 entschieden, dass man durch die Ausbringung eines Links die Inhalte der gelinkten Seite ggf. mit zu verantworten hat. Dies kann – so das LG – nur dadurch verhindert werden, dass man sich ausdrücklich von diesen Inhalten distanziert. Urteil des OLG Düsseldorf vom 29. 6. 1999: „Wer Webseiten ins Internet stellt, muss mit Verweisen (Links) rechnen und ist grundsätzlich hiermit einverstanden. Impressumspflicht Mit der am 14. Dezember 2001 erfolgten Veränderung des Teledienstegesetzes hat der Gesetzgeber die schon vorher vorhandene Impressumspflicht für Online-Inhalte weiter präzisiert und mit Hilfe einer Bußgeldandrohung aus einer schlichten Vorschrift ein durchsetzbares Verbraucherrecht gemacht. 10/27/2020 HTML 10

Hyperlinks 2 • Bei einem Verweis kann man auch festlegen, dass die Seite in

Hyperlinks 2 • Bei einem Verweis kann man auch festlegen, dass die Seite in einem neuen Tab geöffnet wird. <a href="http: //www. bmw. de" target="_blank"> BMW Startseite</a> • Ein Hyperlink kann auch zu einer Datei führen, die von Anderen aus dem Netz geladen werden soll. <a href="pdm. pdf"> Übungsaufgabe</a> oder <a href="farben. exe"> Farbauswahl</a> • Empfehlung: Datei- und Ordnernamen nur in Kleinschrift, ohne Leerzeichen und Umlaute. Die Hyperlinks in die Datei beispiel. htm einfügen und testen. 10/27/2020 HTML 11

Grafiken einbinden (Achtung Copyright) Grafiken werden mit dem img-Tag eingebunden <img src ="ballon. jpg"

Grafiken einbinden (Achtung Copyright) Grafiken werden mit dem img-Tag eingebunden <img src ="ballon. jpg" width="300" /> Im Internet werden hauptsächlich. jpg und. gif Grafiken verwendet. Um Bild und Text nebeneinander anzuzeigen, sollte man diese in eine Tabelle einbinden. Grafiken können auch als Verweis (anstatt Verweistext) in einem Hyperlink verwendet werden. <a href="http: //www. nasa. gov/missions/highlights/index. html"> <img src="mond. jpg" width="350"></a> Die Bilder in die Datei beispiel. htm einfügen und testen. 10/27/2020 HTML 12

Farben verwenden Farben können in HTML in vielen Zusammenhängen definiert werden, zum Beispiel bei

Farben verwenden Farben können in HTML in vielen Zusammenhängen definiert werden, zum Beispiel bei Hintergrundfarben, Schriftfarben, … Farben werden durch Angabe der RGB-Werte (Rot, Grün, Blau) der gewünschten Farbe in Hexadezimalform definiert (jeweils von 00 bis FF). Du hast die volle Freiheit zwischen 16, 7 Millionen Farben. Jede hexadezimale Farbdefinition ist 6 stellig und hat das Schema: #XXYYZZ Farben <body bgcolor="#808080"> <!-- grauer Dateihintergrund --> <font color="#0000 FF">blauer Text</font> Teste die Farben in der Datei beispiel. htm. 10/27/2020 HTML 13

Ausrichtung Durch die Angabe align="center" im Überschrifts- oder Absatz-Tag kannst du erreichen, dass das

Ausrichtung Durch die Angabe align="center" im Überschrifts- oder Absatz-Tag kannst du erreichen, dass das Element zentriert ausgerichtet wird (align = Ausrichtung, center = zentriert). Mit der Angabe align="right" wird die Überschrift rechtsbündig ausgerichtet (right = rechts). Mit der Angabe align="left" kannst du die Normaleinstellung (linksbündige Ausrichtung) angeben. <h 1 align="center">Ueberschrift 1</h 1> <p align="center">Dieser Absatz ist zentriert</p> <p align="center"><img src="ballon. jpg" width="300"></p> Teste verschiedene Ausrichtungen in der Datei beispiel. htm. 10/27/2020 HTML 14

Tabelle Eine Tabelle entsteht durch Kombination der folgenden Tags: • Tabelle <table border =

Tabelle Eine Tabelle entsteht durch Kombination der folgenden Tags: • Tabelle <table border = 1> </table> • Zeile <tr> </tr> (table row) • Zelle <td> </td> (table data) <table border = 1> <tr> <td> Zeile 1, Spalte 1 </td> <td> Zeile 1, Spalte 2 </td> <td> Zeile 1, Spalte 3 </td> </tr> <td> Zeile 2, Spalte 1 </td> <td> Zeile 2, Spalte 2 </td> <td> Zeile 2, Spalte 3 </td> </tr> </table> 10/27/2020 Erzeuge in der Datei beispiel. htm eine Tabelle mit 4 Zeilen und 3 Spalten. Füge auch Bilder in die Tabelle ein. HTML 15

Schriftart, Schriftgröße und Schriftfarbe können in einem Tag festgelegt werden. <font face="Arial" size="5" color="#FF

Schriftart, Schriftgröße und Schriftfarbe können in einem Tag festgelegt werden. <font face="Arial" size="5" color="#FF 0000">blablabla</font> Teste verschiedene Schriftarten und Schriftgrößen in der Datei beispiel. htm. 10/27/2020 HTML 16

Umlaute, Sonderzeichen Im Hinblick auf das Internet und die internationale Verwendung sollten deutsche Umlaute,

Umlaute, Sonderzeichen Im Hinblick auf das Internet und die internationale Verwendung sollten deutsche Umlaute, scharfes S und einige Sonderzeichen durch spezielle, dafür vorgesehene Zeichenfolgen ersetzen. Ä Ä ä ä Ö Ö ö ö Ü Ü ü ü ß ß blank   € € Beispiel: In Mü nchen steht ein Hofbrä uhaus. Dort gibt es Bier aus Maß krü gen. 10/27/2020 HTML Teste dieses Beispiel auch in der Datei beispiel. htm. 17

Abschlussübung Erzeuge eine Webseite mit genau diesem Inhalt und Aussehen. Hinweis: Tabelle verwenden, valign

Abschlussübung Erzeuge eine Webseite mit genau diesem Inhalt und Aussehen. Hinweis: Tabelle verwenden, valign zur Ausrichtung des Textes rechts vom Bild. 10/27/2020 HTML 18