Medientechnik WS 2012/13 -...
Transcript of Medientechnik WS 2012/13 -...
Medientechnik WS 2012/13
Medientechnik 2011 © Manfred Jackel Universität Koblenz-Landau 1
2
<html> <head> </head> <body> </body> </html>
Datei: NeueSeite.htm
Wie man einen Seitentitel einfügt
<title> Seitentitel </title>
Medientechnik 2011 © Manfred Jackel Universität Koblenz-Landau
3
<html> <head> <title> Seitentitel </title> </head> <body> </body> </html>
Datei: NeueSeite.htm
Medientechnik 2012/13 © Manfred Jackel Universität Koblenz-Landau
4
<html> <head> <title> Seitentitel </title> </head> <body> </body> </html>
Datei: NeueSeite.htm
Wie man eine Überschrift einfügt
Überschrift H1
<h1> Überschrift H1 </h1>
Medientechnik 2012/13 © Manfred Jackel Universität Koblenz-Landau
5
<html> <head> <title> Seitentitel </title> </head> <body> <h1> Überschrift H1 </h1> </body> </html>
Datei: NeueSeite.htm
Medientechnik 2012/13 © Manfred Jackel Universität Koblenz-Landau
6
<html> <head> <title> Seitentitel </title> </head> <body> <h1> Überschrift H1 </h1> </body> </html>
Datei: NeueSeite.htm
Wie man einen Absatz einfügt
Es gibt 6 Überschriftengrößen. H1 ist die größte, H6 die kleinste.
<p> Es gibt 6 Überschriftengrößen. H1 ist die größte, H6 die kleinste. </p>
Medientechnik 2012/13 © Manfred Jackel Universität Koblenz-Landau
7
<html> <head> <title> Seitentitel </title> </head> <body> <h1> Überschrift H1 </h1> <p> Es gibt 6 Übersch H1 ist die größte, H6 kleinste. </p> </body> </html>
Datei: NeueSeite.htm
Wie man ein Bild einfügt
<body> <h1> Überschrift H1 </h1> <p> Es gibt 6 Übersch H1 ist die größte, H6 kleinste. </p> <h6> Dies ist eine Über </body> </html>
<p><img src=“bild.gif“> </p>
URL = Universal Resource Locator Medientechnik 2012/13 © Manfred Jackel Universität Koblenz-Landau
8
<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>
Datei: NeueSeite.htm
Medientechnik 2012/13 © Manfred Jackel Universität Koblenz-Landau
9
<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>
Datei: NeueSeite.htm
Wie man ein Html-Editor benutzt
Medientechnik 2012/13 © Manfred Jackel Universität Koblenz-Landau
10
Gratis: Phase 5 Netscape Composer Shareware: Hotmetal Käuflich: MS Frontpage MS Expression Adobe Dreamweaver Hotmetal Pro
Wie man den Hintergrund färbt
Medientechnik 2012/13 © Manfred Jackel Universität Koblenz-Landau
11
Wie man den Hintergrund färbt
# XX XX XX
R G B Medientechnik 2012/13 © Manfred Jackel Universität Koblenz-Landau
12
Wie man den Hintergrund färbt
# XX XX XX
R G B Medientechnik 2012/13 © Manfred Jackel Universität Koblenz-Landau
13 Medientechnik 2012/13 © Manfred Jackel Universität Koblenz-Landau
14
<strong> ... </strong> <em> ... </em> <u> ... </u>
<html> <head>
</body> </html>
</head> <body>
<title> ... </title>
<meta ....>
<h1> ... </h1> .... <h6> ... </h6> <p> ... </p>
<img src=url height= width= alt= >
Zusammenfassung:
Medientechnik 2012/13 © Manfred Jackel Universität Koblenz-Landau
Medientechnik 2011 © Manfred Jackel Universität Koblenz-Landau
<a href=“url“> Bilder oder Text</a>
15
<p> <a href="http://www.tagesschau.de/">ARD Tagesschau</a> Nachrichten<br> <a href="http://www.heise.de/newsticker/">Heise Newsticker</a> Computer-Nachrichten<br <a href="http://de.news.yahoo.com/">Yahoo Nachrichtenticker</a> Nachrichten<br/> <a href="http://www.oneworld.net/section/current">OneWorld News</a> Nachrichten (en) </p> <p> <a href="/">Wohin der wohl führen mag?</a><br> <a href="./">Und der hier?</a> </p>
http://de.selfhtml.org/html/verweise/definieren.htm
Medientechnik 2011 © Manfred Jackel Universität Koblenz-Landau
<ul> ◦ <li> ….</li> ◦ …. ◦ <li> ….</li>
</ul>
16
<ul> <li><a href="http://www.tagesschau.de/">ARD Tagesschau</a> Nachrichten </li> <li><a href="http://www.heise.de/newsticker/">Heise Newsticker</a> Computer-Nachrich </li> <li><a href="http://de.news.yahoo.com/">Yahoo Nachrichtenticker</a> Nachrichten </li> <li><a href="http://www.oneworld.net/section/current">OneWorld News</a> Nachrichten </li> </ul> <p> <a href="/">Wohin der wohl führen mag?</a><br> <a href="./">Und der hier?</a> </p>
Medientechnik 2011 © Manfred Jackel Universität Koblenz-Landau
<ol> ◦ <li> ….</li> ◦ …. ◦ <li> ….</li>
</ol>
17
<ol> <li><a href="http://www.tagesschau.de/">ARD Tagesschau</a> Nachrichten </li> <li><a href="http://www.heise.de/newsticker/">Heise Newsticker</a> Computer-Nachrich </li> <li><a href="http://de.news.yahoo.com/">Yahoo Nachrichtenticker</a> Nachrichten </li> <li><a href="http://www.oneworld.net/section/current">OneWorld News</a> Nachrichten </li> </ol> <p> <a href="/">Wohin der wohl führen mag?</a><br> <a href="./">Und der hier?</a> </p>
18
Begriff: Offener Standard
Medientechnik 2012/13 © Manfred Jackel Universität Koblenz-Landau
Medientechnik 2011 © Manfred Jackel Universität Koblenz-Landau
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> …. </html>
Testen, ob Seite HTML 4 konform ist: http://validator.w3.org/
19
20
Wie man eine Tabelle erstellt
Tabellen sind wichtiges Formatierungs- hilfsmittel für HTML-Seiten
</table>
<table> <tr>
</tr> <tr>
</tr>
<td>
</td>
<td>
</td>
<td>
</td> <td>
</td>
<td>
</td>
<td>
</td>
Medientechnik 2012/13 © Manfred Jackel Universität Koblenz-Landau
21
<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>
Wie man eine Tabelle erstellt
Medientechnik 2012/13 © Manfred Jackel Universität Koblenz-Landau
22
Wie man eine Tabelle erstellt
Tabelle Tabellenzeile Tabellenstart </table>
Nonterminal (Rechteck)
Terminal (runde Ecken)
Syntax- Diagramme
Medientechnik 2012/13 © Manfred Jackel Universität Koblenz-Landau
23
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>
<td align="center“ colspan="2“ background="bluenice.gif"> Verbundene Zelle colspan=2</td>
Medientechnik 2012/13 © Manfred Jackel Universität Koblenz-Landau
Medientechnik 2011 © Manfred Jackel Universität Koblenz-Landau
<th>Kopfzelle</th> Hervorhebung einzelner Zellen (statt <td></td>
<table> <thead> <!--Tabellenzeilen--> </thead> <tfoot> <!--Tabellenzeilen--> </tfoot> <tbody> <!--Tabellenzeilen--> </tbody> </table>
Beispiel aus selfhtml
24
Medientechnik 2011 © Manfred Jackel Universität Koblenz-Landau 25
inner edge/conten edge
padding edge
border edge
outer edge/margin edge
Rahmenkante
Außenenkante/Marginkante
26
Literaturempfehlung
http://www.teamone.de/selfaktuell/
HTML/XHTML Stylesheets (CSS) JavaScript/DOM Kurzreferenz: HTML Kurzreferenz: CSS Syntaxverzeichnis Wie fange ich an? Download der Dokumentation
Stefan Münz Bis 2007 Vorsitzender
Medientechnik 2012/13 © Manfred Jackel Universität Koblenz-Landau
27
Auf diesem Rechner lief der 1. Web-Server von Tim Berners-Lee. Rechner: Next-Cube Betriebssystem: NextStep von Steve Jobs (Apple, Pixar, Next, Apple
Was ist das ?
http://de.wikipedia.org/wiki/Steve_Jobs
http://de.wikipedia.org/wiki/Webserver
Medientechnik 2011 © Manfred Jackel Universität Koblenz-Landau
28
Http-Server
Homeverzeichnis~benutzer
/wwwindex.html
Browser
www.uni-koblenz.de
http://www.uni-koblenz.de/~benutzer
Get "/~benutzer
index.html
Unterverzeichnis~benutzer/www
muss für "others"executable sein (ox)
Datei index.htmlmuss für "others"readable sein (or)
TCP/IP-Verbindung
Prinzip HTTP-Server
Medientechnik 2012/13 © Manfred Jackel Universität Koblenz-Landau
Get <resource> Host: <hostname> Get index.htm Host: www.uni-koblenz.de
Head, wie Get. Liefert nur den Header
Antwort: HTTP/1.1 200 OK Server: Apache/1.3.29 (Unix) PHP/4.3.4 Content-Length: (Größe von index.htm in Byte) Content-Language: de (nach ISO 639 und ISO 3166) Content-Type: text/html Connection: close <Inhalt der Datei index.htm> 29
Status-Codes: 2xx Erfolg 3xx Umleitung 4xx Client-Fehler 5xx Server-Fehler
Medientechnik 2011 © Manfred Jackel Universität Koblenz-Landau
Post <resource> Host: <hostname> Content-Type: <MIME-type> Content-Length: <nrBytes> <nr Bytes of data>
Post sendet eine Datei an den Server (z.B. die Eingaben in ein Web-Formular
Put Datei auf dem Server ablegen Delete Datei auf dem Server löschen Trace Sendet das Kommando zurück Options Abfragen, was der Server kann Connect für SSL-Verbindungen über Proxy
30
MIME Multimedia Internet MEdia type text Image Video Audio Application Multipart Message model
Medientechnik 2011 © Manfred Jackel Universität Koblenz-Landau
Der Wunsch nach Formatierung ◦ Cascading Style Sheets CSS Den Strukturelementen von Html werden über CSS-Anweisungen
Textattribute (Schrift, Farbe, Linien, Abstände, etc. zugerodnet. Der Wunsch nach Interaktion ◦ Formulare zur Eingabe von Daten <form> und Java-Script, DOM Document Object Model Dynamic HTML
◦ Plugins, Applets, ActiveX-Stuerelemente Sichere Übertragung ◦ HTTP Authenticate (Passwortabfrage) ◦ HTTPS über SSL-Verbindungen
31 Medientechnik 2011 © Manfred Jackel Universität Koblenz-Landau
Format der Darstellung selber definieren
Medientechnik 2011 © Manfred Jackel Universität Koblenz-Landau 32
http://www.webmonkey.com/2010/02/mulders_stylesheets_tutorial_-_lesson_1/
<!DOCTYPE html> <html> <head> <title>Mein erstes Stylesheet</title>
</head> <body> <h1>Stylesheets: Damit arbeiten die Götter des Web Design</h1>
<p>Beglücke Deine Freunde! Schlage Deine Feinde!</p>
</body> </html>
Medientechnik 2011 © Manfred Jackel Universität Koblenz-Landau 33
<!DOCTYPE html> <head> <title>Mein erstes Stylesheet</title> <style type="text/css"> <!-- h1 { color: green; font-size: 37px; font-
family: impact } p { text-indent: 1cm; background: yellow;
font-family: courier } --> </style> </head> <body> <h1>Stylesheets:Damit arbeiten die Götter des
Web Design</h1> <p>Beglücke Deine Freunde! Schlage Deine
Feinde!</p> </body> </html>
Medientechnik 2011 © Manfred Jackel Universität Koblenz-Landau 34
<!DOCTYPE html> <head> <title>Mein erstes
Stylesheet</title> </head> <body> <h1 style="color:orange; font-
family:impact">Stylesheets: Damit arbeiten die Götter des Web Design</h1>
<p style="background:yellow; font-family:courier">Beglücke Deine Freunde! Schlage Deine Feinde!</p>
</body> </html>
Medientechnik 2011 © Manfred Jackel Universität Koblenz-Landau 35
<!DOCTYPE html> <head> <title>Mein erstes
Stylesheet</title> </head> <body> <div style="color:navy; font-
family:impact"> <h1>Stylesheets: Damit arbeiten
die Götter des Web Design</h1> <p
style="background:yellow;">Beglücke Deine Freunde! Schlage Deine Feinde!</p>
</div> </body> </html>
Medientechnik 2011 © Manfred Jackel Universität Koblenz-Landau 36
<!DOCTYPE html> <head> <title>Mein erstes Stylesheet</title>
<link rel="stylesheet" href="mystyles.css" type="text/css">
</head> <body> <h1>Stylesheets: Damit arbeiten die Götter des Web Design</h1>
<p>Beglücke Deine Freunde! Schlage Deine Feinde!</p>
</body> </html>
Medientechnik 2011 © Manfred Jackel Universität Koblenz-Landau 37
h1 { color:green; font-family:impact } p { background:yellow; font-family:courier }
<!DOCTYPE html> <head> <title>Mein erstes Stylesheet</title> <link rel="stylesheet"
href="mystyles.css" type="text/css"> </head> <body> <h1>Stylesheets: <span style="font-
size:smaller;color:aqua">Damit arbeiten die Götter des Web Design</span></h1>
<p>Beglücke Deine Freunde! Schlage Deine Feinde!</p>
</body> </html>
Medientechnik 2011 © Manfred Jackel Universität Koblenz-Landau 38
<!DOCTYPE html> <head> <title>Mein erstes Stylesheet</title> <style type="text/css"> <!-- h1 { color: green; font-size: 24px; font-family: impact } p { text-indent: 1cm; background: yellow; font-family: courier
} P.first { color:green } P.second { color:purple } P.third { color:gray } --> </style> </head> <body> <h1>Stylesheets: Damit arbeiten die Götter des Web Design</h1> <p>Beglücke Deine Freunde! Schlage Deine Feinde!</p> <P CLASS="first">Der erste Abschnitt, mit der Klasse namens
"first."</P> <P CLASS="second">Der zweite Abschnitt, mit der Klasse namens
"second."</P> <P CLASS="third">Der dritte Abschnitt, mit der Klasse namens
"third."</P> </body> </html>
Medientechnik 2011 © Manfred Jackel Universität Koblenz-Landau 39
<!DOCTYPE html> <head> <title>Mein erstes Stylesheet</title> <style type="text/css"> <!-- h1 { color: green; font-size: 37px; font-family:
impact } p { text-indent: 1cm; background: aqua; font-
family: courier } P B { color:red } --> </style> </head> <body> <H1><B>Ernestine Müller</B>, Schauspielerin</H1> <P>Dramaturgin, begnadete Schriftstellerin,
erdverbundene Komödiantin. Gibt es <B>etwas</B> was sie nicht kann?</P> </body> </html>
Medientechnik 2011 © Manfred Jackel Universität Koblenz-Landau 40
Schrifteigenschaften font-family (Schriftart) font-style (Schriftstil) font-variant (Schriftvariante) font-size (Schriftgröße) font-weight (Schriftgewicht) font-stretch (Schriftlaufweite) font (Schrift allgemein) word-spacing (Wortabstand) letter-spacing (Zeichenabstand) text-decoration
(Textdekoration) text-transform (Texttransformation) color (Textfarbe) text-shadow (Textschatten)
Absatzeigenschaften text-indent (Texteinrückung) line-height (Zeilenhöhe) vertical-align (Vertikale Ausrichtung) top, middle bottom text-align (Horizontale Ausrichtung) left, center, right, justify white-space (Textumbruch)
Hintergrund background-color (Hintergrundfarbe) background-image (Hintergrundbild) background-repeat (Wiederholungs-Effekt) background-attachment (Wasserzeichen-
Effekt) background-position (Hintergrundposition) background (Hintergrund allgemein) Links nach selfhtml.org
Medientechnik 2011 © Manfred Jackel Universität Koblenz-Landau 41
Tabelleneigenschaften caption-side (Ausrichtung der
Tabellenüberschrift) table-layout (fixe/variable Breiten) border-collapse (Rahmenmodell) border-spacing (Rahmenabstand im
Gitternetz) empty-cells (Anzeige/Nichtanzeige leerer
Zellen) speak-header (Art der
Sprachausgabeunterstützung) Listenformatierung list-style-type (Darstellungstyp) list-style-position (Listeneinrückung) list-style-image (eigene Bullet-Grafik) list-style (allgemein)
Rahmen border[-top, -right, -bottom, -left]-width (
Rahmendicke) border[-top, -right, -bottom, -left]-color
(Rahmenfarbe) border[-top, -right, -bottom, -left]-style
(Rahmentyp) border[-top, -right, -bottom, -left]
(Rahen allgemein) outline-width (Rahmendicke) outline-color (Rahmenfarbe) outline-style (Rahmentyp) outline (Rahmen allgemein)
Abstände padding-top (Innenabstand oben) padding-right (Innenabstand rechts) padding-bottom (Innenabstand unten) padding-left (Innenabstand links) padding (Innenabstand allgemein) Quelle selfhtml.org
Medientechnik 2011 © Manfred Jackel Universität Koblenz-Landau 42
Medientechnik 2012/13 © Manfred Jackel Universität Koblenz-Landau 43
äußerer div wrapper
Medientechnik 2012/13 © Manfred Jackel Universität Koblenz-Landau 44
Kopfleiste
Navigations-bereich
Seitenfuß
Medientechnik 2012/13 © Manfred Jackel Universität Koblenz-Landau 45
Seitenbereich Container
Abschnitt- Container
Abschnitt- Container
Medientechnik 2011 © Manfred Jackel Universität Koblenz-Landau
<div>…</div> legt einen Bereich fest <div>-Bereiche werden untereinander im Browser
dargestellt <div>-Bereiche können CSS-Attribute bekommen ◦ <div style=“….“> style-Attribute inline angeben ◦ <div class=“name“> Benannte Stiel aus <style>-Tag oder CSS ◦ <div id=“name“ >
Das Style-Atrribut float kann die Werte left, right, none annehmen. Positioniert Elemente nebeneinander.
46
Medientechnik 2011 © Manfred Jackel Universität Koblenz-Landau
47
wrapper <div style=“width:600“> legt die Breite fest
header <div style=“width:600; height:60; backgroundcolor: orange“>
navigation <div style=“width:100; backgroundcolor: #ffcccc; float: left“>
Medientechnik 2011 © Manfred Jackel Universität Koblenz-Landau
48
seitenbereich <div style=“width:500; float: right“>
artikel <div style=“width:500; backgroundcolor: …“>
artikel <div style=“width:500; backgroundcolor: … “>
Medientechnik 2011 © Manfred Jackel Universität Koblenz-Landau
49
Medientechnik 2011 © Manfred Jackel Universität Koblenz-Landau
50
Statt <div> können benutzt werden 1. <header> 2. <nav> 3. <aside> 4. <footer> 5. <article> 6. <section> Style-Angaben trotzdem nötig!
51
Vorlesung „Medientechnik WS 2012/13 Dr. Manfred Jackel Institut für Informatik Universität Koblenz-Landau Postfach 201602 56072 Koblenz
© Manfred Jackel E-Mail: [email protected] WWW: www.uni-koblenz.de/~jkl mtech.uni-koblenz.de
Literatur zu diesem Kapitel Ingo Chao, Corina Rudel Fortgeschrittene CSS-Techniken
Hyperlinks zu diesem Kapitel Stefan Münz: SelfHTML http://www.teamone.de/selfaktuell/ Stefan Mintert u. Christine Kühnel; www.JavaScript-workshope.de W3C http://www.w3.org/TR/html40 XML http://www.w3schools.com CSS http://www.webmonkey.com/2010/02/mulders_stylesheets_tutorial_-_lesson_1/
Grafik-Quellen Bild-Logo www.bild.de
Medientechnik 2012/13 © Manfred Jackel Universität Koblenz-Landau