Die Präsentation wird geladen. Bitte warten

Die Präsentation wird geladen. Bitte warten

HTML - Eine erste Annäherung - Akronym für Hyper Text Markup Language - basiert auf SGML (Standard Generalized Markup Language) -> HTML ist eine SGML-Anwendung.

Ähnliche Präsentationen


Präsentation zum Thema: "HTML - Eine erste Annäherung - Akronym für Hyper Text Markup Language - basiert auf SGML (Standard Generalized Markup Language) -> HTML ist eine SGML-Anwendung."—  Präsentation transkript:

1 HTML - Eine erste Annäherung - Akronym für Hyper Text Markup Language - basiert auf SGML (Standard Generalized Markup Language) -> HTML ist eine SGML-Anwendung - die Sprache wurde von Web-Gründer Tim Berners-Lee erfunden und heute durch das W3C (World Wide Web Consortium) weiterentwickelt. Das Ziel: Informationen aller Art in Dokumenten im Web weltweit zur Verfügung zu stellen - grundsätzlich: die Markup-Sprachen dienen dazu, die logische Struktur eines Dokumentes zu definieren, nicht ihre Darstellung! -> das ist Voraussetzung für eine (ziel)plattformübergreifende Kompatibilität

2 SGML ist ein internationaler Standard (ISO-Norm 8879), der die strukturorientierte Auszeichnung eines Dokumentes festlegt. Es ist eine Metasprache, mit der konkrete Auszeichnungssprachen (SGML-Anwendungen genannt) definiert werden können und die Struktur eines Dokumentes beschrieben werden kann. XML (Extensible Markup Language) ist eine Teilmenge von SGML, also keine SGML-Anwendung, sondern ein SGML-Profil. Es handelt sich um eine Vereinfachung von SGML, aber weiterhin eine Metasprache, die die Fähigkeit hat, XML-Anwendungen, also konkrete Auszeichnungssprachen zu definieren. Was ist SGML?

3 - SGML-Sprachen sind an die DTD (Document Type Definition) gebunden - darin ist festgelegt, welche Elemente in der Sprache zugelassen sind und wie die Struktur der Dokumente auszusehen hat, die in einer SGML-Sprache erstellt werden -> bildlich gesprochen: die DTD ist die Grammatik der Sprache SGML Was ist die DTD?

4 Was besagt der Begriff Markup? - die logische Struktur von Dokumenten wird mit Hilfe von Markierungen (Tags) vorgenommen - die logischen Bestandteile einer textorientierten Webseite werden ausgezeichnet - typische Bestandteile sind: Überschriften Textabsätze Listen Tabellen Grafik- / Multimediareferenzen -> daher der Begriff Auszeichnungssprache (Markup-Language) HTML - Hyper Text Markup Language

5 HTML - Was sind Elemente und Tags? Was sind Elemente? Der Inhalt von HTML-Dateien steht in HTML-Elementen. HTML-Elemente werden durch so genannte Tags markiert. Fast alle HTML-Elemente werden durch ein einleitendes und ein abschließendes Tag markiert. Was sind Tags? Tags beginnen mit einem kleiner als-Zeichen bzw. einer öffnenen spitzen Klammer ( ) - der Zwischenbereich ist der Gültigkeitsbereich. Er muss der DTD entsprechen -> Tags sind die Markierungen, die das Dokument logisch strukturieren - das Auszeichnungsschema von HTML geht von einer hierarchischen Gliederung aus - einleitende Tags und Standalone-Tags können zusätzliche Angaben (Attribute) enthalten.

6 ein Hypertext ist ein Dokument, das in sich Verweise enthält und so mit anderen Texten verknüpft ist bzw. allgemeiner: verknüpft sein kann. -> Er ist in diesem Sinne nicht linear aufgebaut, sondern enthält mögliche Abzweigungen. Eine hypertextuelle Struktur entsteht... --> Grundidee des World Wide Web HTML - Hyper Text Markup Language

7 HTML - Zwischenfazit Die beiden zentralen Aspekte, 1. mittels Markierungen die logische Struktur eines Dokuments zu definieren und 2. Verknüpfungen zu anderen virtuellen Dokumenten herstellen zu können zeigen die Bedeutung von HTML: Sie ist eine unverzichtbare Sprache des WWW zur Erstellung von Webseiten geworden. Auch die Möglichkeit einer zusammenfassenden Definition ergibt sich nun: HTML ist eine strukturorientierte Auszeichnungssprache für Hypertext!

8 HTML - Übertragung und Aufbereitung In einem Browser ist ein Parser integriert. Unter einem HTML-Parser versteht man eine Software, die HTML- Auszeichnungen erkennt und in strukturierten Text umsetzt. Auf das Parsen folgt das Rendern: Die Darstellung des mittels HTML strukturierten Dokuments. Dieser Schritt der visuellen Aufbereitung geschieht am Darstellungsmedium orientiert. Trotz der umfassenden Fehlerkorrektur der Parser wird es durch die steigende Komplexität der Sprachen (HTML in Verbindung mit eingebettetem CSS, JavaScript, usw.) immer wichtiger, die Syntax- Regeln von HTML einzuhalten.

9 Die Struktur eines HTML-Dokuments Dokumenttyp-Deklaration Stammelement Header = Kopfbereich... Titel (obligatorisch)...Körper = Rumpfbereich (anzuzeigender Inhalt)

10 Die Dokumenttyp-De klaration Die Variante Strict für HTML: Die Variante Transitional für HTML: Die Variante Frameset für HTML: Entsprechende Dokumenttyp-Deklarationen für XHTML: Dokumenttyp-Deklaration für XHTML 1.1: Ältere Dokumenttyp-Deklarationen:

11 Die Dokumenttyp-De klaration Zweck der Dokumenttyp-Deklaration: Mitteilung an die auslesende Software, welche Auszeichnungssprache (Version?!) für das Dokument verwendet wird. Ist ein Dokumenttyp angegeben und werden dessen offizielle Regeln (gemäß DTD) im Quelltext befolgt, so ist die Datei gültig -> wichtig für eine evtl. Validitätsprüfung Beispiele für die Regeln: - welche Elemente dürfen enthalten sein? - welche Attribute gehören zu einem Element? - ist die Angabe dieser Attribute obligatorisch oder fakultativ? u.v.m.

12 Erläuterung Zeile 1 - Der Beginn

13 Die weiteren Bereiche im HTML-Grundgerüst Die Tags... schließen den gesamten Inhalt des HTML-Dokuments im Anschluss an die Dokumenttyp-Deklaration ein -> Das Wurzelelement einer HTML-Datei. Dem einleitenden -Tag folgt das einleitende -Tag: Die Kopfdaten eines HTML-Dokuments folgen nun. obligatorisches Tag-Paar:... -> Die Vergabe des Dokumententites Den Abschluss bildet. Darauf folgt der Textkörper, begrenzt durch.... Dazwischen wird der eigentliche Inhalt der Datei notiert, also das, was im Anzeigefenster des WWW-Browsers angezeigt werden soll.

14 HTML - der Dateikopf... Die Bedeutung des obligatorischen Dokumententitels: - wird in der Titelzeile des Anzeigefensters oder im tab (Karteireiter) angezeigt - wird für Lesezeichen/Bookmarks/Favoriten verwendet - erscheint in der Chronik/im Verlauf der besuchten Seiten - dient Suchmaschinen als Verweis, welcher im Suchergebnis angezeigt wird... Im Kopf können 7 verschiedene Elemente Verwendung finden: title metaenthält Metadaten base linklogische Beziehungen zu anderen Ressourcen, v.a. Einbindung von Stylesheets script Einbindung von Code best. Skriptsprachen, v.a. JavaScript style enthält Stylesheet-Regeln. object

15 Meta-Elemente enthalten Informationen über das Dokument, insbesondere für Webcrawler. Meta-Angaben werden im Dokumentkopf notiert und vom Browser bzw. vom Benutzerprogramm nicht angezeigt. Die HTML-Empfehlungen schreiben keine Meta-Angaben vor, allerdings regeln sie deren Struktur: meta ist ein leeres Element mit zwei Attributen: 1. name (für Webcrawler) oder http-equiv (für Browser) 2. content HTML - Meta-Elemente

16 HTML - Beispiele für Meta-Tags im Dateikopf Seitenbeschreibung / Abstract Bsp. für XHTML, für HTML 4.01 muss der / am Ende weggelassen werden: Stichwörter Autor Anweisungen für Suchmaschinen verschiedenster Art Angabe des MIME-Typs (Internet Media Type) und dem Zeichensatz des Dokuments Angabe der Sprache des Dokuments autiomatische Weiterleitung mittels refresh-Tag geographische Informationen mittels Geo-Tag -> könnte für Suchaufträge mit lokalem Bezug genutzt werden

17 HTML - der HTML-Körper Wdh.: Der Inhalt von HTML-Dateien steht wie gesehen in HTML- Elementen, mittels Tags markiert. Auch eine Verschachtelung von Elementen ist möglich: eine hierarchische Struktur entsteht (strukturiertes Markup). Beispiel: HTML - eine Einführung für unseren Kurs Einleitende Tags und Standalone-Tags können zusätzliche Angaben enthalten in Form von Attributen mit (freier) Wertzuweisung. Beispiel: HTML - eine Einführung für unseren Kurs --- -> Von größerer Bedeutung sind die sog. Universalattribute, die in einleitenden HTML-Tags vorkommen können. Neben allgemeinen Attributen stehen jene Attribute, die eine Schnittstelle zu Script-Sprachen wie JavaScript herstellen.

18 Quelle: HTML - Universalattribute

19 HTML - Universalattribute: Sinn und Zweck Die Universalattribute id und class dienen als Element-Identifikatoren dazu, ein Element genauer zu bezeichnen. Der für ein Element ausgewählte Bezeichner id ist eindeutig, d.h. er darf innerhalb des Dokuments nur einmal vergeben werden. Bei Klassennamen hingegen ist eine multiple Zuordnung von Elementen möglich. Die Universalattribute bringen viele Möglichkeiten, u.a.: - Eine feinere Strukturierung des Quelltextes - Ein Element bzw. eine Elementgruppe lässt sich über einen speziellen ID- / Class-Selektor in CSS ansprechen - Die JavaScript-Funktionen können auf ein mit id versehenes Element zugreifen Bsp.: div-Tag zur Auszeichnung eines Abschnitts abstract:

20 HTML - ein einfaches Beispiel [1] HTML - ein einfaches Beispiel für unseren Kurs In diesem Bereich steht der Text der auf der Seite angezeigt werden soll. Im Browser ergibt das dann ein merkwürdiges Beispiel. Es ist insgesamt eine ziemlich primitive Seite, aber für unseren Einstieg in HTML genau das Richtige :-) Bei der HTML-Version 4.01 gibt es drei Sprachvarianten. Ich habe mich im Beispiel für Transitional entschieden... Warum? Lösung: Innerhalb des Tag-Paares... ist nackter Text verwendet, d.h. er steht außerhalb eines weiteren Elementes. Dies wäre in der Strict-Variante unzulässig. U.a. sind in der Transitional-Variante die Regeln für die Elementverschachtelung milder.

21

22 HTML - ein komplexeres Beispiel [2] HTML - ein weiteres Beispiel für unseren Kurs HTML ist ganz was Feines für heading 1 gleich Überschrift 1 steht und entsprechend den Abschluss signalisiert. Fehlt uns nur noch das Anzeigen des Kommentarendes. Dieser folgt auf dem Fuße: -- > Ich hoffe, dass ich euch bislang HTML ein wenig näher bringen konnte und ihr noch nicht eingeschlafen seid. Jetzt hätte ich gerne einen Zeilenumbruch gehabt. Automatisch wird der Text an die Fenstergröße angepasst. Ich möchte aber einen festen Zeilenumbruch haben. Schön :-) genügtin HTML XHTML-konform ist oder. Es handelt sich dann um ein leeres Element mit Anfangs- und End-Tag, aber ohne Inhalt. Eigentlich dachte ich, dass ich in meinem Beispiel auch die XHTML-Schreibweise nehmen könnte. Der Validator unter validator.w3.org hat mich aber dafür heftigst kritisiert. Wie bei Elementnamen, so gilt auch bei Attributnamen: bei herkömmlichem HTML spielt es keine Rolle, ob die Attributnamen in Klein- oder Großbuchstaben notiert werden. In XHTML müssen Element- und Attributnamen dagegen durchgehend klein geschrieben werden. Warum also nicht direkt klein.--> erzeugt eine Trennlinie (horizontal rule) mit Zeilenumbruch --> Jetzt folgt ein neuer Absatz, in dem ich gerne noch kleinere Beispiele, aber ohne Kommentar unterbringen möchte. Auch Zitate innerhalb eines Absatzes sind in HTML realisierbar. Innerhalb einer HTML-Datei dürfen nur ASCII-Zeichen verwendet werden. Umlaute, Sonderzeichen und Zeichen, die für Befehle reserviert sind, dürfen nicht benutzt werden. Aber unsere öffnende spitze Klammer ist doch unverzichtbar. Aber ein Ausweg steht bereit: Man gibt den Zeichennamen oder den Dezimalcode an. Zeichennamen steht ein &-Zeichen voran, Dezimalcodes beginnen mit &#. Beide werden mit einem ; abgeschlossen. Groß- und Kleinschreibung muss unbedingt beachtet werden. So steht unserem < nichts mehr im Wege. 5<10 Das macht Spaß :-) Ich denke das reicht für den Anfang, auch wenn es noch viele Dinge gibt, die man zeigen könnte Valid HTML 4.01 Transitional

23

24 Greifen wir die Definition von HTML aus dem Zwischenfazit noch einmal auf: HTML ist eine strukturorientierte Auszeichnungssprache für Hypertext! Was kann HTML leisten? - Überschriften, Textabsätze, Listen und Tabellen erzeugen (und auszeichnen) - anklickbare Verweise auf Webseiten oder Datenquellen im WWW erzeugen - nicht-textuelle Inhalte (Grafik/Multimedia) referenzieren - Formulare integrieren Es handelt sich um eine beschreibend-strukturierende (descriptive), nicht darstellungsorientierte Textauszeichnung. HTML - Zusammenfassung

25 Insgesamt also als standardisierte Sprache zur Strukturierung von Text und Hypertext ein durchdachtes Konzept für Web-Publishing. Es genügt für dieses Klartextformat ein simpler Editor. HTML wird geschrieben. Es wird nicht in HTML programmiert. Fazit: Wer Texte online braucht, braucht HTML! Über Schnittstellen für Erweiterungssprachen wie Stylesheets (CSS) oder JavaScript können HTML-Elemente positioniert und gestaltet oder die Interaktion mit dem clientseitigen Benutzer realisiert werden... HTML - Zusammenfassung

26 CSS - Cascading Style Sheets Voraussetzung: Die Trennung von Struktur und Layout! Um auf das Rendern eines HTML-Dokuments Einfluss nehmen zu können, haben sich sog. CSS als Formatvorlagen etabliert. Diese Sprache definiert einzelne HTML- Elemente. Daher gelten Elemente und Attribute zur Präsentation wie … in der HTML-4.01-Spezifikation als missbilligt (engl.: deprecated). -> StyleSheets sind eine unmittelbare Ergänzung zu HTML. Weitere Vorteile durch StyleSheets: - Vereinfachung der Webseiten-Erstellung - Kompatibilität 1: CSS1 ist eine weitestgehend eine Teilmenge von CSS2 - Kompatibilität 2: als offener Standard (W3C-Normierung) ist CSS hard- und softwareunabhängig - Barrierefreiheit, Usability Vgl.: OS-Schemata - Zeitersparnis: Da i.Allg. wenige Stylesheets viele Dokumente steuern verringert sich der Wartungsaufwand - einheitliches Layout für große Projekte ohne großen Aufwand - u.v.m.

27 CSS - Cascading Style Sheets Syntax und Vokabular: Regeln: Das Grundgerüst eines StyleSheets besteht aus einem Selektor und geschweiften Klammern. Der Selektor selektiert die gewünschten Elemente. Die geschweiften Klammern umschließen eine Liste mit Deklarationen (Deklarationsblock). Deklarationen bestehen aus einer Eigenschaft, einem Doppelpunkt und einem Wert. Mehrere Deklarationen in einem Deklarationsblock werden durch Semikola getrennt. Also allgemein: Selektor { Eigenschaft:Wert; }

28 CSS - Einbindung in HTML Es stehen drei Methoden zur Einbindung zur Verfügung: 1. Einbinden mittels des Universalattributs style in Verwendung als inline-Style innerhalb eines HTML-Elements [3] Beispiel: unser einfaches HTML-Beispiel... HTML - ein einfaches Beispiel für unseren Kurs In diesem Bereich steht der Text der auf der Seite angezeigt werden soll. Im Browser ergibt das dann ein merkwürdiges Beispiel. Es ist insgesamt eine ziemlich primitive Seite, aber für unseren Einstieg in HTML genau das Richtige :-) -> Die Trennung von Struktur und Layout wird jedoch unterlaufen!

29 CSS - Einbindung in HTML 2. Einbinden per style-Element im Dokumentkopf... [4] HTML - ein einfaches Beispiel für unseren Kurs p { color:rgb(255,0,0); font-style: italic; font-size:xx-large; } In diesem Bereich steht der Text der auf der Seite angezeigt werden soll. Im Browser ergibt das dann ein merkwürdiges Beispiel. Es ist insgesamt eine ziemlich primitive Seite, aber für unseren Einstieg in HTML genau das Richtige :-) -> Verwendung für CSS, welches dokumentweit Geltung besitzen soll -> etwas bessere Trennung zwischen Markup und Styling

30 CSS - Einbindung in HTML 3. Einbinden per link-Element [5] HTML - ein einfaches Beispiel für unseren Kurs In diesem Bereich steht der Text der auf der Seite angezeigt werden soll. Im Browser ergibt das dann ein merkwürdiges Beispiel. Es ist insgesamt eine ziemlich primitive Seite, aber für unseren Einstieg in HTML genau das Richtige :-) Die Datei default.css (per Editor erstellt) "ISO "; p { color:rgb(255,0,0); font-style: italic; font-size:xx-large; }

31 3. Einbinden per link-Element -> das link-Element ist wie das style-Element Kind des -Elements -> es ist die empfohlene Methode zum Einbinden von CSS in HTML --> Verweis auf ein externes StyleSheet Erläuterung: rel Das Attribut zeigt den Bezug (rel = relation) an: Es gibt ein StyleSheet! mediaDas Attribut weist das StyleSheet für Ausgabemedien aus typeDas Attribut weist die Sprache des StyleSheets in Form eines MIME-Typs aus hrefDas Attribut adressiert die Ressource des StyleSheets (hyper reference = Hypertext-Referenz) mittels Pfadangabe oder URI titleDas Attribut gibt dem StyleSheet einen Namen (z.B. zur Auswahl im Browser) -> globale Verwendungsmöglichkeit für viele Dokumente -> optimale Trennung von Markup und Styling CSS - Einbindung in HTML

32 3. Einbinden per link-Element StyleSheets können auch alternativ (im Browser auszuwählen) eingebunden werden. Hierzu ist ein zusätzlicher rel-Attributwert notwendig. Das W3C-Konsortium bietet unter sog. W3C Core Styles an, die Webautoren frei zur Verfügung stehen. Trotz einiger Mängel bieten sich diese für ein rasches Dokumentlayout an:

33 CSS - Beispiel: Einbinden eines W3C Core Style [6] nach dem Anführungszeichen verwenden! --> HTML - ein weiteres Beispiel für unseren Kurs HTML ist ganz was Feines für heading 1 gleich Überschrift 1 steht und entsprechend den Abschluss signalisiert. Fehlt uns nur noch das Anzeigen des Kommentarendes. Dieser folgt auf dem Fuße: --> Ich hoffe, dass ich euch bislang HTML ein wenig näher bringen konnte und ihr noch nicht eingeschlafen seid. Jetzt hätte ich gerne einen Zeilenumbruch gehabt. Automatisch wird der Text an die Fenstergröße angepasst. Ich möchte aber einen festen Zeilenumbruch haben. Schön :-) genügtin HTML XHTML-konform ist oder. Es handelt sich dann um ein leeres Element mit Anfangs- und End-Tag, aber ohne Inhalt. Eigentlich dachte ich, dass ich in meinem Beispiel auch die XHTML-Schreibweise nehmen könnte. Der Validator unter validator.w3.org hat mich aber dafür heftigst kritisiert. Wie bei Elementnamen, so gilt auch bei Attributnamen: bei herkömmlichem HTML spielt es keine Rolle, ob die Attributnamen in Klein- oder Großbuchstaben notiert werden. In XHTML müssen Element- und Attributnamen dagegen durchgehend klein geschrieben werden. Warum also nicht direkt klein.--> erzeugt eine Trennlinie (horizontal rule) mit Zeilenumbruch --> Jetzt folgt ein neuer Absatz, in dem ich gerne noch kleinere Beispiele, aber ohne Kommentar unterbringen möchte. Auch Zitate innerhalb eines Absatzes sind in HTML realisierbar. Innerhalb einer HTML-Datei dürfen nur ASCII-Zeichen verwendet werden. Umlaute, Sonderzeichen und Zeichen, die für Befehle reserviert sind, dürfen nicht benutzt werden. Aber unsere öffnende spitze Klammer ist doch unverzichtbar. Aber ein Ausweg steht bereit: Man gibt den Zeichennamen oder den Dezimalcode an. Zeichennamen steht ein &-Zeichen voran, Dezimalcodes beginnen mit &#. Beide werden mit einem ; abgeschlossen. Groß- und Kleinschreibung muss unbedingt beachtet werden. So steht unserem < nichts mehr im Wege. 5<10 Das macht Spaß :-) Ich denke das reicht für den Anfang, auch wenn es noch viele Dinge gibt, die man zeigen könnte Valid HTML 4.01 Transitional

34

35 CSS - ein paar weitere Grundlagen Kommentare: Wie in HTML können in CSS Kommentare eingebaut werden. Die Sprache orientiert sich hier an die Programmiersprache C: /* Kommentar */ Vererbung und Initialwerte: Man wird für Elemente im StyleSheet nur bestimmte Werte setzen. Die CSS-Empfehlung bestimmt für nahezu alle Eigenschaften Initialwerte. Durch die hierarchische Struktur von HTML - für das CSS ja entwickelt wurde - können Eigenschaften entlang der Verschachtelung vererbt werden (Vgl. Begriffe wie Elternelement)

36 Arten von StyleSheets: Neben dem Autoren-StyleSheet existieren Browser- und Benutzer- StyleSheets. Diese (und auch ein einzelnes StyleSheet) können konträre Angaben beinhalten, wie ein Element darzustellen ist. ->Der Browser arbeitet eine Reihenfolge des Ursprungs von Deklarationen ab, bei der insbesondere Autoren- und UserStyleSheets in der Kaskade konkurrieren. -->Deklarationen können mit der Zeichenkette !important ausgezeichnet werden --->In CSS 2 wird !important im BenutzerStyleSheet am höchsten bewertet Erfassen mehrere Selektoren im StyleSheet gleicher Wichtigkeit ein Element, wird die sog. Spezifität der Selektoren ermittelt... CSS - ein paar weitere Grundlagen

37 HTML und CSS - Fazit Struktur (HTML) und Layout (CSS) werden im HTML- Rendering-Prozess zusammengeführt. HTML liefert ein Dokument also mit einer semantischen Struktur, das StyleSheet definiert eine Liste von Selektoren und Regeln für die visuelle Darstellung - abhängig vom Ausgabemedium. Eine Rendering-Engine im Browser interpretiert das Layoutmodell (CSS) und füllt dieses Layout mit dem durch HTML strukturierten Inhalt (Text).

38 Das Document Object Model (DOM) Definition: Das Document Object Model (DOM) ist eine W3C-Empfehlung, die Programmen eine allgemeine Vorgehensweise (Schnittstelle) für den Zugriff auf Bestandteile eines Dokuments liefert. Das DOM beschreibt Objekte, Eigenschaften und Methoden und ist sowohl im HTML-/XML- als auch im JavaScript-Umfeld von großer Bedeutung. Dabei wird die Struktur des Dokuments, beispielsweise eines XHTML-Dokuments, so dargestellt wie das Verhältnis verwandter Familien zueinander in einem Familienstammbaum. Es gibt Vorfahren, Nachfahren, Eltern, Kinder und Geschwister. Daher spricht man in diesem Zusammenhang auch häufig von einem »Dokumentstammbaum«.

39 Das Document Object Model (DOM) Der Dokumentenstammbaum eines HTML-Dokuments lässt sich mit folgenden Begriffen beschreiben: Stammelement oder Wurzelelement Elternelement Kindelement (nachfolgendes / vorhergehendes) Geschwisterelement Vorfahrenelement Nachkommenelement Die Bestandteile eines Dokumentstammbaums werden Knoten genannt. Neben den Elementknoten (s.o.) gibt es auch Attributknoten, Textknoten und Namensraumknoten. DOM erlaubt -die Navigation zwischen Knoten, - das Erzeugen, Verschieben und Löschen von Knoten und - das Auslesen, Ändern und Löschen von Textinhalten. -> mittels dynamischem HTML (DHTML), auch DOM-Scripting genannt, können Webseiten interaktiv gestaltet werden und sich in Reaktion auf die Eingabe (-> EventHandler) wie Anwendungsprogramme verhalten

40 Das Document Object Model (DOM) Vorname Name Donald Duck Quelle:

41 Das Document Object Model (DOM)

42 JavaScript - ein Beispiel zur Einführung Für JavaScript-Programmabschnitte können in HTML Bereiche definiert werden. Beispiel [7]: HTML - ein einfaches Beispiel für unseren Kurs alert(":-)"); In diesem Bereich steht der Text der auf der Seite angezeigt werden soll. Im Browser ergibt das dann ein merkwürdiges Beispiel. Es ist insgesamt eine ziemlich primitive Seite, aber wenigstens gabs durch Javascript nen Smilie

43 JavaScript Das wichtigste zuerst: JavaScript ist eine eigene Programmiersprache. JavaScript ist als Ergänzung zu HTML gedacht. JavaScript ist von der objektorientierten Programmiersprache Java zu unterscheiden. JavaScript läuft in einer sog. Sandbox, einem Sicherheitskäfig für Programmiersprachen JavaScript soll als clientseitige Scriptsprache die Grenzen von HTML ausweiten und somit zusätzliche Dynamisierung, Nutzerinteraktion und Animation ermöglichen.

44 Einbindungsmöglichkeiten: JavaScript-Code wird mittels Script-Tag in HTML im Klartext eingebunden, zusammen mit diesem vom Server zum Client übertragen und über einen Interpreter (in Browser integriert) ausgeführt. Alternativ können JavaScripts in einer separaten Datei notiert werden – wie bei CSS. Dagegen sind Java-Applets vorkompilierte Java-Programme, die mittels Applet-Tag in HTML eingebunden werden. Auch hier erfolgt eine Übertragung vom Server zum Client. Die Ausführung übernimmt eine JavaVirtualMaschine (in Browser integriert). Ziel: dynamische Manipulation von Webseiten JavaScript

45 JavaScript - Geschichte JavaScript wurde im Jahre 1995 von der Firma Netscape entwickelt und lizensiert. Das W3C-Konsortium sollte eine entsprechende Sprache normieren. Das W3C erarbeitete jedoch keinen JavaScript-Standard, sondern ein allgemeines Modell für Objekte eines Dokuments (Document Object Model - DOM). Es definiert - wie gesehen – wie sich auf Elemente eines Dokuments zugreifen lässt und welche Manipulationsmöglichkeiten es gibt.

46 Was sind Event-Handler? - Ereignisbehandler um Ziel der Dynamisierung zu erreichen - wichtiges Bindeglied zwischen HTML und JavaScript bzw. allg. einer Scriptsprache - meist in Form von Attributen in HTML-Tags notiert: Ein Element, das einen Event-Handler enthält, kann auf ein solches Ereignis reagieren, wenn das Ereignis im Anzeigebereich des Elements stattfindet ->Da es sich um Bestandteile handelt, die innerhalb von HTML vorkommen, hat das W3-Konsortium die Event-Handler mittlerweile auch in den HTML-Sprachstandard mit aufgenommen JavaScript - Was sind Event-Handler?

47 Quelle: JavaScript: Event-Handler-Beispiele

48 - solche HTML-Attribute beginnen immer mit on beginnen, zum Beispiel onmouseup (bei losgelassener Maustaste). Hinter dem Ist-gleich-Zeichen folgt in Anführungszeichen eine JavaScript-Anweisung. Für mehrere Anweisungen definiert man in eine eigene, abgeschlossene Javascript-Prozedur (in einem JavaScript-Bereich oder einer separaten Datei), eine sog. Funktion. Diese ersetzt die einzelne Anweisung. Bsp.: onmouseup="Umrechnen()" JavaScript - Funktionen

49 JavaScript - weitere Beispiele [8] Quelle: Test -> JavaScript-Anweisungen in herkömmlichen HTML-Tags -> Aufruf bestimmter Methoden, Funktionen, Objekte, Eigenschaften durch Event-Handler

50 ... Erläuterung geben zu JavaScript-Anweisungen in HTML-Tags...

51 JavaScript - weitere Beispiele JavaScript-Datei quadrat.js function Quadrat() { var Ergebnis = document.Formular.Eingabe.value * document.Formular.Eingabe.value; alert("Das Quadrat von " + document.Formular.Eingabe.value + " = " + Ergebnis); } Beispiel: HTML-Datei JavaScript-Test -> JavaScript-Code in separater Datei Quelle:

52 ... Erläuterung geben zu JavaScript-Anweisungen in HTML-Tags...

53 Fazit : HTML, CSS und Javascript HTML: Hypertext Markup Language -> eine strukturorientierte Auszeichnungssprache CSS: Cascading Stylesheets -> layoutorientierte Ergänzung zu HTML Javascript -> Script- / Programmiersprache zur Erweiterung von HTML- Funktionalität HTML, CSS und Javascript kann auf einen request hin vom Server zum client übertragen und hier ausgeführt: Clientseitig also ein starkes Team Anders z.B. PHP-Code: geschieht serverseitig vor all jenen clientseitigen Sprachen und Formatierungen

54 Literaturverzeichnis Chung, Dirk: HTML-Publishing. Aufbau und Design attraktiver Webseiten. Bonn u.a.: International Thomson Publishing Avci, Oral: XHTML und HTML. In: Avci, Oral, Trittmann, Ralph und Mellis, Werner (Hrsg.): Web-Programmierung. Wiesbaden: Vieweg 2003., S Jänecke, Michael: Cascading Style Sheets. In: Avci, Oral, Trittmann, Ralph und Mellis, Werner (Hrsg.): Web-Programmierung. Wiesbaden: Vieweg 2003., S Avici, Oral & Eidemüller, Heiko: JavaScript. In: Avci, Oral, Trittmann, Ralph und Mellis, Werner (Hrsg.): Web-Programmierung. Wiesbaden: Vieweg 2003., S Jendryschik, Michael: Einführung in XHTML, CSS und Webdesign. München u.a.: Addison- Wesley Schwickert, Axel und Dandl, Jörg: HTML, Java, ActiveX - Strukturen und Zusammenhänge. In: Lehrstuhl für Allg. BWL und Wirtschaftsinformatik, Johannes Gutenberg-Universität (Hrsg): Arbeitspapiere WI 6/1997. Mainz: Wikipedia URL: SELFHTML e.V. URL: in Version vom


Herunterladen ppt "HTML - Eine erste Annäherung - Akronym für Hyper Text Markup Language - basiert auf SGML (Standard Generalized Markup Language) -> HTML ist eine SGML-Anwendung."

Ähnliche Präsentationen


Google-Anzeigen