Die Präsentation wird geladen. Bitte warten

Die Präsentation wird geladen. Bitte warten

Die Sprache des WWW: HTML (HyperText Markup Language) Gymnasium Sulingen Informatik.

Ähnliche Präsentationen


Präsentation zum Thema: "Die Sprache des WWW: HTML (HyperText Markup Language) Gymnasium Sulingen Informatik."—  Präsentation transkript:

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

2 Die Anfänge von HTML l HyperText Markup Language l 1989: Forschungsinstitut in Genf entwickelt eine Skript- Sprache, die l einfach zu erlernen ist l einzelne Dateien im Internet miteinander verknüpft durch direkte Verweise l Unter dem Projektnamen World Wide Web: l Entwicklung des Internetprotokolls HTTP (zum schnellen Auffinden anderer Dokumente) l Entwicklung der Auszeichnungssprache HTML

3 Was ist HTML? l HTML = Programmiersprache, die Befehle enthält zur Erstellung von: l Überschriften, Textabsätzen, Hyperlinks l Grafiken, Tabellen l Formularen l HTML enthält begrenzte Anzahl von Befehlen, um Web- Seiten zu erstellen l HTML kann mit beliebigem Texteditor erstellt werden (z.B. Editor oder Microsoft Notepad)

4 HTML-Tags l Spitze Klammern = Tags l Befehle, um Text zu formatieren, stehen in Tags Das ist fetter Text Hier kommt unterstrichener Text l Befehle bestehen aus einleitendem Tag und abschließendem Tag l Befehle können groß- oder kleingeschrieben werden: l Überschrift 1.Ordnung oder l Überschrift 1.Ordnung

5 HTML-Grundgerüst (Übung 1) l 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!

6 Textabsatz und Zeilenumbruch l Zeilenumbrüche und Absätze werden auch im Browser erkannt: (um den Zeilenumbruch einzuleiten)... (um den Absatz einzuleiten) Befehl für Überschriften: bis...

7 Absatzausrichtung Das Attribut align (=Ausrichtung) gibt an, wie der nachfolgende Text ausgerichtet werden soll. l Mögliche Werte sind: l left (linksbündig) l center (zentriert) l right (rechtsbündig) l justify (Blocksatz) Beispiel: zentrierter Text Wert Attribut

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

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

10 Physische Formatierungen (Übung 3) 1. Schritt: Formatierungen im Editor 1. Schritt: Formatierungen im Editor 2. Schritt: Formatierungen im Explorer betrachten. 2. Schritt: Formatierungen im Explorer betrachten.

11 Schriftgröße, Schriftart, Schriftfarbe ändern Befehl zum Ändern der Schrift:... Attribut size : l große Schrift Attribut face : Arial Befehl zum Ändern der Schrift: l Blauer Text

12 Formatierung in kombiniertem -tag (Übung 4) Kombinierte Schriften Text in Schriftart Arial und in Schriftgröße 5 hellblauer Text in Schriftgröße 4 hellgrüner Text in der Schriftart Arial blauer Text in Schriftgröße 2 und Schriftart Arial

13 Trennlinien Befehl ("horizontal ruler") erzeugt Querlinie mit Schattenverlauf l 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 l Hyperlinks = Querverweise im Internet: l Pfeil der Maus wird zu einer Hand über einem Hyperlink. l Beispiel: Hyperlinks

15 Einfache Hyperlinks l Verweis zu Dateien im selben Verzeichnis l Beispiel: private Homepages Verbindung der Web-Seiten: Inhalt

16 Relative Hyperlinks l Verweise innerhalb größerer Projekte zu Dateien in unter- oder übergeordneten Verzeichnissen l Verweis auf untergeordnetes Verzeichnis: l Name des Verzeichnisses l Name der Seite Struktur: Hyperlinktext l Verweis auf übergeordnetes Verzeichnis: Eine Ebene darüber: zwei Punkte mit Schrägstrich eingeben (.. / ) Zwei Ebenen darüber: zwei Punkte mit Schrägstrich (../../ ) Struktur: Hyperlinktext beide Angaben durch / trennen

17 Absolute Hyperlinks l Absolut bedeutet: komplette Angabe der Internetadresse l Struktur: l Spiegel 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!

18 Verweise zu einer -Adresse Attribut: mailto:Adresse Beispiel: 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!

19 Tag bindet Grafik in HTML-Dokument ein Attribut src gibt Dateinamen an, in die die Grafik eingebunden werden soll l Beispiel: Einbinden von Grafiken

20 l Verweise auf Bilder im Unterverzeichnis (aktuelles Verzeichnis, Unterverzeichnis bilder, Bild grafik.jpg) l Verweise auf Bilder im darüber liegenden Verzeichnis (darüber liegendes Verzeichnis, Bild grafik.jpg) (zwei Verzeichnisse nach oben, Bild grafik.jpg) Verweise auf Bilder

21 Grafiken als Hyperlinks Hyperlink wird um eine eingebettete Grafik gelegt: 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!

22 Verweis auf andere Elemente l Bei Verweis auf andere Elemente erkennt der Browser an der Dateiendung, welche Aktion ausgeführt werden soll. l Hyperlink verweist auf l Textdatei (.txt): im Browser auch als Textdatei l Grafik (.jpg,.gif): im Browser als eigenständiges Objekt l Video (.mpg,.avi): Programm zum Videoabspielen wird geöffnet l Musik (.wav,.ram): Programm zum Musikhören wird geöffnet l Programm (.zip,.exe): Browser überspielt das Programm per Download l Andere Formate (.pdf,.doc,.xls): Browser öffnet entsprechendes Programm

23 : leitet Tabelle ein border="Wert" : legt Umrandung fest : beendet die Tabelle : definiert eine Zeile : definiert eine Zelle Beispiel: Dies ist die kleinstmögliche Tabelle. l Ergebnis: Aufbau einer Tabelle

24 l Standardmäßig: abhängig vom Text Individuell gestalten: mit Attribut width="Wert" (Angabe in Pixel oder Prozent) l Bei Prozentangabe: 100% = Fensterbreite Breite einer Tabelle Tabelle mit Breitenangabe Diese Tabelle hat eine Breitenangabe von 50 Prozent. Das bedeutet: Egal wie viel Text in der Tabelle steht, sie hat immer eine Breite von 50% des Fensters.

25 Definieren über Attribut width="Wert" l Angabe in Pixel, Prozent oder *: l Prozentwerte sind abhängig von der Tabellenbreite (Summe aller Spaltenbreiten müssen 100% ergeben) l Pixelangaben sind feste Werte l * bedeutet: Rest, der übrigbleibt l Innerhalb einer Tabelle gilt Angabe der ersten Spalte auch für alle folgenden Spalten Breite von Spalten

26 l Tabelle mit Breite 75%, Spaltenbreiten: 20%, 30%, 50% l Tabelle mit Breite 75%, Spaltenbreiten: 20%, *, 50% l Tabelle mit Breite 75%, Spaltenbreiten: 150, *, 100 Pixel Beispiel für Spaltendefinition 20% 30% 50% nbsp; 20% * 50% nbsp; 150 * 100 nbsp;

27 Formulare definieren Alle Elemente müssen innerhalb des Tags 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: l l action=seite.asp Attribut enctype formatiert die Daten nach einem bestimmten Schema: l enctype="Format"

28 Eingabefelder und Passwortfelder Formular: Einzeilige Eingabefelder Formular: Eingabefelder und Passwortfelder Name: Vorname: Postleitzahl: Wohnort: Passwort:

29 Schaltflächen Befehl

30 Was ist ein Frame? l Frames teilen Browser-Fenster in rechteckige Bereiche. l Mehrere Web-Seiten können l gleichzeitig angezeigt werden l unabhängig voneinander gesteuert werden l Web-Seite wird langsamer geladen

31 Browser-Fenster aufteilen l Ab Grundgerüst: Browser-Fenster einteilen in Spalten und/oder Zeilen Attribute cols="Aufteilung" und rows="Aufteilung" : Anzugeben innerhalb des Befehls l Zur Aufteilung des Browser-Fensters in Gruppen l 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 l Beispiel: l Oberhalb der Titel der Web-Seite l Linke Seite = Navigationsleiste l Rechter Bereich = zum Anzeigen der Web-Seiten statisch: Inhalt bleibt gleich l Vorab grobes Layout der Web- Seite entwerfen:

33 Beispiel zur Erstellung eines Framesets Anwenden von Frames l Vorab drei Dateien anlegen: flinks.html, foben.html, fhaupt.html

34 Fertiges Frameset im Browser

35 Beispiele zur Frames-Aufteilung HTML-Code: Definition des Frames HTML-Code: Definition des Frames Definition des Frames

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:. l Überprüfen Sie, ob alle Informationen zu sehen sind.

37 Angaben in Prozent l Prozentwerte zwischen 1 und 100 l Alle Frames innerhalb eines Framesets = 100% Beispiel: l Falls Werte größer 100: Bereiche werden automatisch herunterskaliert. l Gesamtsumme unter 100: l Bereiche werden automatisch heraufskaliert. l Falls relative Größe (*) vorhanden ist, wird Überschuss dem * zugeteilt.

38 Hyperlinks setzen Attribut target="Name" l Gibt Verweisziel an, in dem der Hyperlink geöffnet werden soll Attribut angeben innerhalb... Beispiel: Befehl Anzugeben innerhalb des Kopfabschnitts l Alle Links innerhalb der Web-Seite werden in Frames mit entsprechenden Namen angezeigt Beispiel: Das Alphabet...

39 Frames beenden l Dokument wird in neuem leeren Fenster geöffnet: l target="_blank l Dokument wird in dem Frame geöffnet, in dem der Verweis steht: l target="_self l Verweis wird in das übergeordnete Fenster geladen: l target="_parent l Gesamtes Frameset wird geschlossen, Dokument wird in gesamten Browser-Fenster angezeigt: l target="_top


Herunterladen ppt "Die Sprache des WWW: HTML (HyperText Markup Language) Gymnasium Sulingen Informatik."

Ähnliche Präsentationen


Google-Anzeigen