Minimales HTML-Dokument

Größe: px

Ab Seite anzeigen:

Download "Minimales HTML-Dokument"

Hede Dorothea Kaufer
vor 6 Jahren
Abrufe

1 Datei: NeueSeite.htm Minimales HTML-Dokument Wie man einen Seitentitel einfügt <html> <head> <title> Seitentitel </title> </head> <body> </body> </html> 1

2 Datei: NeueSeite.htm <html> <head> <title> Seitentitel </title> </head> <body> </body> </html> 2

3 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

4 Datei: NeueSeite.htm <html> <head> <title> Seitentitel </title> </head> <body> <h1> Überschrift H1 </h1> </body> </html> 4

5 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

6 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

7 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

8 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

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 9

10 Wie man den Hintergrund färbt # XX XX XX R G B 10

11 Wie man den Hintergrund färbt # XX XX XX R G B 11

12 12

13 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

14 HTML-Seite <html> Kopf Rumpf <html> Kopf Syntax- Diagramme <head> Kopf-Tags </head> Rumpf <body> </body> Rumpf-Tags 14

15 Kopf-Tags Titel-Tag Meta-Tag Titel-Tag <title> Syntax- Diagramme Rumpf-Tags H1-Tag PCDATA </title> P-Tag... 15

16 Begriff: Offener Standard 16

17 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

18 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

19 Wie man eine Tabelle erstellt Syntax- Diagramme Nonterminal (Rechteck) Terminal (runde Ecken) Tabelle Tabellenstart Tabellenzeile </table> 19

20 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

21 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

22 Literaturempfehlung Medien- Weitere Themen: CSS Cascading Style Sheets JavaScript DHTML Dynamic HTML Document Object Model 22

23 Prinzip HTTP-Server index.html TCP/IP- Verbindung Http-Server Homeverzeichnis ~benutzer /www index.html Get "/~benutzer Unterverzeichnis ~benutzer/www muss für "others" executable sein (ox) Datei index.html muss für "others" readable sein (or) Browser 23

24 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

25 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

26 Cogito, ergo sum! Res cogitans: denkende Substanz Subjekt, zur Erkenntis fähig Res extensa: ausgedehnte Substanz (erkennbare) Objekte Kategorischer Imperativ René Descartes Immanuel Kant 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

27 Objekt window Das gesamte Browserfenster Objekt window.document.images[0] Das 1. Bild im Dokument (URL) Objekt window.document Das geladene Dokument 27

28 Browser-Objekt: window Medien- S H4 H5 H6 P Table Td getattribute() setattribute() S.H1 S( H1 ) S(0) removeattribute() 28

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

30 <p><script language="javascript"></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

31 Vorlesung Medientechnik WS 1999/2000 Dr. Manfred Jackel Studiengang Computervisualistik Institut für Informatik Universität Koblenz-Landau Rheinau Koblenz Manfred Jackel jkl@uni-koblenz.de WWW: mtech.uni-koblenz.de Literatur zu diesem Kapitel Hyperlinks zu diesem Kapitel Stefan Münz: SelfHTML W3C XML Grafik-Quellen Bild-Logo 31

Ähnliche Dokumente

Minimales HTML-Dokument

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