Datei: NeueSeite.htm Minimales HTML-Dokument Wie man einen Seitentitel einfügt <html> <head> <title> Seitentitel </title> </head> <body> </body> </html> 1
Datei: NeueSeite.htm <html> <head> <title> Seitentitel </title> </head> <body> </body> </html> 2
Datei: NeueSeite.htm Wie man eine Überschrift einfügt <html> <head> <title> Seitentitel </title> Überschrift H1 </head> <body> <h1> Überschrift H1 </h1> </body> </html> 3
Datei: NeueSeite.htm <html> <head> <title> Seitentitel </title> </head> <body> <h1> Überschrift H1 </h1> </body> </html> 4
Datei: NeueSeite.htm Wie man einen Absatz einfügt <html> <head> <title> Seitentitel </title> Es gibt 6 Überschriftengrößen. H1 ist die größte, H6 die kleinste. </head> <body> <h1> Überschrift H1 </h1> <p> Es gibt 6 Überschriftengrößen. H1 ist die größte, H6 die kleinste. </p> </body> </html> 5
Datei: NeueSeite.htm Wie man ein Bild einfügt <body> <html> <h1> <head> Überschrift H1 </h1> <title> Seitentitel <p> </title> Es gibt 6 Übersch H1 ist die größte, H6 kleinste. </head> </p> <h6> <body> Dies ist eine Über <h1> Überschrift H1 <p><img src= bild.gif > </h1> </p> <p> Es gibt 6 Übersch H1 ist die größte, H6 kleinste. </p> </body> </html> URL = Universal Resource Locator 6
Datei: NeueSeite.htm <body> <h1> Überschrift H1 </h1> <p> Es gibt 6 Übersch H1 ist die größte, H6 kleinste. </p> <h6> Dies ist eine Über <p><img src= bild.gif > </p> </body> </html> 7
Datei: NeueSeite.htm Wie man ein Html-Editor benutzt <body> <h1> Überschrift H1 </h1> <p> Es gibt 6 Übersch H1 ist die größte, H6 kleinste. </p> <h6> Dies ist eine Über <p><img src= bild.gif > </p> </body> </html> 8
Gratis: Frontpage Express Netscape Composer Shareware: Hotmetal Käuflich: MS Frontpage MS Visual Interdev Adobe Pagemill Hotmetal Pro Wie man den Hintergrund färbt 9
Wie man den Hintergrund färbt # XX XX XX R G B 10
Wie man den Hintergrund färbt # XX XX XX R G B 11
12
Zusammenfassung: Medien- <title>... </title> <meta...> <h1>... </h1>... <h6>... </h6> <p>... </p> <html> <head> </head> <body> <img src=url height= width= alt= > <strong>... </strong> <em>... </em> <u>... </u> </body> </html> 13
HTML-Seite <html> Kopf Rumpf <html> Kopf Syntax- Diagramme <head> Kopf-Tags </head> Rumpf <body> </body> Rumpf-Tags 14
Kopf-Tags Titel-Tag Meta-Tag Titel-Tag <title> Syntax- Diagramme Rumpf-Tags H1-Tag PCDATA </title> P-Tag... 15
Begriff: Offener Standard 16
Wie man eine Tabelle erstellt Tabellen <table> sind wichtiges <tr> <td> Formatierungshilfsmittel für HTML-Seiten <tr> <td> </td> <td> <td> <td> </td> <td> </td> </tr> </td> </td> </td> </tr> </table> 17
Wie man eine Tabelle erstellt <table border="1"> <tr> <td>dies ist ein Blindtext. Er dient ausschließlich dazu, das Aussehen der Schrift zu demonstrieren</td> <td>numnoi numnoi</td> <td>dies ist eine einfache Tabelle ohne besondere Angaben zu das Aussehen</td> </tr> <tr> <td>die Darstellung dieser Tabelle wird dem Browser überlassen.</td> <td><img src="bild.gif" width="125" height="126"></td> <td>in einer Tabellenzelle kann beliebiger Text stehen, auch Bilder, weitere Tabellen usw.</td> </tr> </table> 18
Wie man eine Tabelle erstellt Syntax- Diagramme Nonterminal (Rechteck) Terminal (runde Ecken) Tabelle Tabellenstart Tabellenzeile </table> 19
Wie man eine Tabelle erstellt Nonterminal (Rechteck) Terminal (runde Ecken) Tabelle Tabellenstart Tabellenzeile </table> Tabellenzeile <tr> Tabellenzelle </tr> Tabellenstart <table > Tab-Param noch nicht definiert 20
Tabellen-Feinheiten <td bgcolor="#ffffff" bordercolor="#00ffff" bordercolordark="#00ff00" bordercolorlight="#ffff00"> Diese Zelle... </td> <table border="10" cellpadding="10" cellspacing="10" width="400" bgcolor="yellow" bordercolor="blue" bordercolordark="red" bordercolorlight="green"> <td align="center colspan="2 background="bluenice.gif"> Verbundene Zelle colspan=2</td> 21
Literaturempfehlung Medien- Weitere Themen: CSS Cascading Style Sheets JavaScript DHTML Dynamic HTML Document Object Model http://www.teamone.de/selfaktuell/ 22
Prinzip HTTP-Server index.html TCP/IP- Verbindung Http-Server Homeverzeichnis ~benutzer /www index.html Get "/~benutzer www.uni-koblenz.de http://www.uni-koblenz.de/~benutzer Unterverzeichnis ~benutzer/www muss für "others" executable sein (ox) Datei index.html muss für "others" readable sein (or) Browser 23
Stile selbst definieren: <Style>-Tag <HEAD> </HEAD>< <STYLE <body> type="text/css"> H1 {border-width: 1; border: solid; text-align: center} </STYLE> </HEAD> H1 { border-width: 1; border: solid; text-align: center } 24
Cascading Style Sheets: Externes Style Sheet <HEAD> <STYLE <LINK rel="stylesheet type="text/css"> H1 href="common.css {border-width: 1; border: solid; text-align: center} </STYLE> type="text/css"> </HEAD> Datei: common.css H1 { border-width: 1; border: solid; text-align: center } H2 { font-size: 125%; font-family: Arial, sans-serif; font-weight: bold } 25
Cogito, ergo sum! Res cogitans: denkende Substanz Subjekt, zur Erkenntis fähig Res extensa: ausgedehnte Substanz (erkennbare) Objekte Kategorischer Imperativ René Descartes 1596-1650 Immanuel Kant 1724-1804 Grau ist alle Theorie 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 Instanz, definiert durch Eigenschaften, Methoden, Ereignisse 26
Objekt window Das gesamte Browserfenster Objekt window.document.images[0] Das 1. Bild im Dokument (URL) Objekt window.document Das geladene Dokument 27
Browser-Objekt: window Medien- S H4 H5 H6 P Table Td getattribute() setattribute() S.H1 S( H1 ) S(0) removeattribute() 28
window.document Medien- Liste aller HTML-Elemente window.document.all(11) JavaScript, VBScript: Manipulation dieser Objekte HTML HEAD TITLE META META STYLE BODY H1 P H6 P IMG STRONG EM U P EM STRONG U P 29
<p><script language="javascript"><!-- document.writeln('alinkcolor=',document.alinkcolor,'<br>') document.writeln('bgcolor=',document.bgcolor,'<br>'); document.writeln('charset=',document.charset,'<br>'); document.writeln('cookie=',document.cookie,'<br>'); Document document.writeln('defaultcharset=',document.defaultcharset Eigenschaften: document.writeln('fgcolor=',document.fgcolor,'<br>'); alinkcolor (Farbe für Verweise beim Anklicken) document.writeln('lastmodified=',document.lastmodified,'<b bgcolor (Hintergrundfarbe) document.writeln('linkcolor=',document.linkcolor,'<br>'); charset (verwendeter Zeichensatz) document.writeln('referrer=',document.referrer,'<br>'); cookie (beim Anwender speicherbare Zeichenkette) document.writeln('title=',document.title,'<br>'); defaultcharset (normaler Zeichensatz) document.writeln('url=',document.url,'<br>'); fgcolor (Farbe für Text) document.writeln('vlinkcolor=',document.vlinkcolor,'<br>') lastmodified (letzte Änderung am Dokument) // --></script></p> 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) 30
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.de WWW: www.uni-koblenz.de/~jkl mtech.uni-koblenz.de Literatur zu diesem Kapitel Hyperlinks zu diesem Kapitel Stefan Münz: SelfHTML http://www.teamone.de/selfaktuell/ W3C http://www.w3.org/tr/html40 XML http://www.w3schools.com Grafik-Quellen Bild-Logo www.bild.de 31