Medien- Technik Millennium Edition 1 Minimales HTML-Dokument Datei: NeueSeite.htm Wie man einen Seitentitel einfügt Seitentitel.

Präsentation zum Thema: "Medien- Technik Millennium Edition 1 Minimales HTML-Dokument Datei: NeueSeite.htm Wie man einen Seitentitel einfügt Seitentitel."—  Präsentation transkript:

1

2 Medien- Technik Millennium Edition 1 Minimales HTML-Dokument Datei: NeueSeite.htm Wie man einen Seitentitel einfügt Seitentitel

3 Medien- Technik Millennium Edition 2 Seitentitel Datei: NeueSeite.htm

4 Medien- Technik Millennium Edition 3 Seitentitel Datei: NeueSeite.htm Wie man eine Überschrift einfügt Überschrift H1

5 Medien- Technik Millennium Edition 4 Seitentitel Überschrift H1 Datei: NeueSeite.htm

6 Medien- Technik Millennium Edition 5 Seitentitel Überschrift H1 Datei: NeueSeite.htm Wie man einen Absatz einfügt Es gibt 6 Überschriftengrößen. H1 ist die größte, H6 die kleinste.

7 Medien- Technik Millennium Edition 6 Seitentitel Überschrift H1 Es gibt 6 Übersch H1 ist die größte, H6 kleinste. Datei: NeueSeite.htm Wie man ein Bild einfügt Überschrift H1 Es gibt 6 Übersch H1 ist die größte, H6 kleinste. Dies ist eine Über URL = Universal Resource Locator

8 Medien- Technik Millennium Edition 7 Überschrift H1 Es gibt 6 Übersch H1 ist die größte, H6 kleinste. Dies ist eine Über Datei: NeueSeite.htm

9 Medien- Technik Millennium Edition 8 Überschrift H1 Es gibt 6 Übersch H1 ist die größte, H6 kleinste. Dies ist eine Über Datei: NeueSeite.htm Wie man ein Html-Editor benutzt

10 Medien- Technik Millennium Edition 9 Gratis: Frontpage Express Netscape Composer Shareware: Hotmetal Käuflich: MS Frontpage MS Visual Interdev Adobe Pagemill Hotmetal Pro Wie man den Hintergrund färbt

11 Medien- Technik Millennium Edition 10 Wie man den Hintergrund färbt #XX RGB

12 Medien- Technik Millennium Edition 11 Wie man den Hintergrund färbt #XX RGB

13 Medien- Technik Millennium Edition 12

14 Medien- Technik Millennium Edition 13................ Zusammenfassung:

15 Medien- Technik Millennium Edition 14 HTML-Seite KopfRumpf Kopf Rumpf-Tags Kopf-Tags Rumpf Syntax- Diagramme

16 Medien- Technik Millennium Edition 15 Kopf-Tags Titel-Tag Meta-Tag Rumpf-Tags H1-Tag P-Tag.... Titel-Tag PCDATA Syntax- Diagramme

17 Medien- Technik Millennium Edition 16 Begriff: Offener Standard

18 Medien- Technik Millennium Edition 17 Wie man eine Tabelle erstellt Tabellen sind wichtiges Formatierungs- hilfsmittel für HTML-Seiten

19 Medien- Technik Millennium Edition 18 Dies ist ein Blindtext. Er dient ausschließlich dazu, das Aussehen der Schrift zu demonstrieren numnoi numnoi Dies ist eine einfache Tabelle ohne besondere Angaben zu das Aussehen Die Darstellung dieser Tabelle wird dem Browser überlassen. <img src="bild.gif" width="125" height="126"> In einer Tabellenzelle kann beliebiger Text stehen, auch Bilder, weitere Tabellen usw. Wie man eine Tabelle erstellt

20 Medien- Technik Millennium Edition 19 Wie man eine Tabelle erstellt TabelleTabellenzeileTabellenstart Nonterminal (Rechteck) Terminal (runde Ecken) Syntax- Diagramme

21 Medien- Technik Millennium Edition 20 Wie man eine Tabelle erstellt TabelleTabellenzeileTabellenstart Nonterminal (Rechteck) Terminal (runde Ecken) Tabellenzeile Tabellenzelle Tabellenstart<table Tab-Param > noch nicht definiert

22 Medien- Technik Millennium Edition 21 Tabellen-Feinheiten <table border="10" cellpadding="10" cellspacing="10" width="400" bgcolor="yellow" bordercolor="blue" bordercolordark="red" bordercolorlight="green"> <td bgcolor="#FFFFFF" bordercolor="#00FFFF" bordercolordark="#00FF00" bordercolorlight="#FFFF00"> Diese Zelle... <td align="center colspan="2 background="bluenice.gif"> Verbundene Zelle colspan=2

23 Medien- Technik Millennium Edition 22 Literaturempfehlung http://www.teamone.de/selfaktuell/ Weitere Themen: CSS Cascading Style Sheets JavaScript DHTML Dynamic HTML Document Object Model

24 Medien- Technik Millennium Edition 23

25 Medien- Technik Millennium Edition 24 H1 {border-width: 1; border: solid; text-align: center} < Stile selbst definieren: -Tag H1 { border-width: 1; border: solid; text-align: center }

26 Medien- Technik Millennium Edition 25 H1 {border-width: 1; border: solid; text-align: center} Cascading Style Sheets: Externes Style Sheet H1 { border-width: 1; border: solid; text-align: center } H2 { font-size: 125%; font-family: Arial, sans-serif; font-weight: bold } Datei: common.css

27 Medien- Technik Millennium Edition 26 René Descartes 1596-1650 Cogito, ergo sum! Res cogitans: denkende Substanz Subjekt, zur Erkenntis fähig Res extensa: ausgedehnte Substanz (erkennbare) Objekte Immanuel Kant 1724-1804 Kategorische r Imperativ Was für Descartes das Objekt, ist für Immanuel Kant die Erscheinung, während als Objekt bei ihm das im Akt der Vorstellung vorgestellte Gedankending zu verstehen ist. In der modernen Sprachphilosophie und in der Logik wird jeder Gegenstand, auf den unterscheidend Bezug genommen werden kann, als Objekt bezeichnet. Informatik: Programmiersprachen-Objekt definiert durch Eigenschaften, Methoden, Ereignisse Grau ist alle Theorie

28 Medien- Technik Millennium Edition 27 Objekt window Objekt window.document Objekt window.document.images[0] Das gesamte Browserfenster Das geladene Dokument Das 1. Bild im Dokument (URL)

29 Medien- Technik Millennium Edition 28 Browser-Objekt: window H4 H5 H6 P Table Td getAttribute() setAttribute() removeAttribute() S S.H1 S(H1) S(0)

30 Medien- Technik Millennium Edition 29 window.document Liste aller HTML-Elemente HTML HEAD TITLE META META STYLE BODY H1 P H6 P IMG STRONG EM U P EM STRONG U P window.document.all(11) JavaScript, VBScript: Manipulation dieser Objekte

31 Medien- Technik Millennium Edition 30 Document Eigenschaften: alinkColor (Farbe für Verweise beim Anklicken) bgColor (Hintergrundfarbe) charset (verwendeter Zeichensatz) cookie (beim Anwender speicherbare Zeichenkette) defaultCharset (normaler Zeichensatz) fgColor (Farbe für Text) lastModified (letzte Änderung am Dokument) linkColor (Farbe für Verweise) referrer (zuvor besuchte Seite) title (Titel der Datei) URL (URL-Adresse der Datei) vlinkColor (Farbe für Verweise zu besuchten Zielen) <!-- document.writeln('alinkColor=',document.alinkColor,' '); document.writeln('bgColor=',document.bgColor,' '); document.writeln('charset=',document.charset,' '); document.writeln('cookie=',document.cookie,' '); document.writeln('defaultCharset=',document.defaultCharset,' '); document.writeln('fgColor=',document.fgColor,' '); document.writeln('lastModified=',document.lastModified,' '); document.writeln('linkColor=',document.linkColor,' '); document.writeln('referrer=',document.referrer,' '); document.writeln('title=',document.title,' '); document.writeln('URL=',document.URL,' '); document.writeln('vlinkColor=',document.vlinkColor,' '); // -->

32 Medien- Technik Millennium Edition 31 Document Unterobjekte: all anchors applets areas embeds forms images Feld aller Bilder, images.length= Anzahl, images(0) das erste! layers links plugins <!-- document.writeln('images(0).src=',document.images(0).src,' '); UrBild = document.images(0).src; // --> <!-- function wechsel() { if (document.images(0).src==UrBild) document.images(0).src='bild2.jpg'; else document.images(0).src='bild.gif'; } // --> <img src="bild.gif" alt="bild.gif (1250 bytes) width="125" height="126" onclick="wechsel()">

33 Medien- Technik Millennium Edition 32 Vorlesung Medientechnik WS 1999/2000 Dr. Manfred Jackel Studiengang Computervisualistik Institut für Informatik Universität Koblenz-Landau Rheinau 1 56075 Koblenz © Manfred Jackel E-Mail:jkl@uni-koblenz.dejkl@uni-koblenz.de WWW:www.uni-koblenz.de/~jklwww.uni-koblenz.de/~jkl mtech.uni-koblenz.de Literatur zu diesem KapitelHyperlinks zu diesem Kapitel Stefan Münz: SelfHTML http://www.teamone.de/selfaktuell/ http://www.teamone.de/selfaktuell/ W3C http://www.w3.org/TR/html40 http://www.w3.org/TR/html40 Grafik-Quellen Bild-Logo www.bild.de www.bild.de