Medientechnik WS 2012/13 - mtech.uni-koblenz.demtech.uni-koblenz.de/MT2012/material/03-2012-html.pdf · 4 Seitentitel

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>


Medientechnik 2012/13 © Manfred Jackel Universität Koblenz-Landau

4

<html> <head> <title> Seitentitel </title> </head> <body> </body> </html>


Wie man eine Überschrift einfügt

Überschrift H1

<h1> Überschrift H1 </h1>


5

<html> <head> <title> Seitentitel </title> </head> <body> <h1> Überschrift H1 </h1> </body> </html>



6

<html> <head> <title> Seitentitel </title> </head> <body> <h1> Überschrift H1 </h1> </body> </html>


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>


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>


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>



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>


Wie man ein Html-Editor benutzt


10

Gratis: Phase 5 Netscape Composer Shareware: Hotmetal Käuflich: MS Frontpage MS Expression Adobe Dreamweaver Hotmetal Pro

Wie man den Hintergrund färbt


11


# XX XX XX

R G B Medientechnik 2012/13 © Manfred Jackel Universität Koblenz-Landau

12


# 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:



<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

http://www.tagesschau.de/

http://www.heise.de/newsticker/

http://de.news.yahoo.com/

http://www.oneworld.net/section/current

http://de.selfhtml.org/html/verweise/definieren.htm


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






<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



<!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

http://validator.w3.org/

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>


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>



22


Tabelle Tabellenzeile Tabellenstart </table>

Nonterminal (Rechteck)

Terminal (runde Ecken)

Syntax- Diagramme


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>



<th>Kopfzelle</th> Hervorhebung einzelner Zellen (statt <td></td>

<table> <thead>  </thead> <tfoot>  </tfoot> <tbody>  </tbody> </table>

Beispiel aus selfhtml

24

http://de.selfhtml.org/html/tabellen/aufbau.htm


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



http://www.google.com/url?q=http://de.selfhtml.org/html/index.htm&sa=X&oi=smap&resnum=1&ct=result&cd=1&usg=AFQjCNG42DEa3Pnha4EWbdAIqxI44MHeEg

http://www.google.com/url?q=http://de.selfhtml.org/css/&sa=X&oi=smap&resnum=1&ct=result&cd=2&usg=AFQjCNGRv-oj8FMih3MDa33aqshbirCjhQ

http://www.google.com/url?q=http://de.selfhtml.org/javascript/&sa=X&oi=smap&resnum=1&ct=result&cd=3&usg=AFQjCNFW1cChymxRMITCa1sSJCdZ2p8vXA

http://www.google.com/url?q=http://de.selfhtml.org/navigation/html.htm&sa=X&oi=smap&resnum=1&ct=result&cd=4&usg=AFQjCNGIAI8VIYdnJWmOBA9otldBPNpAEQ

http://www.google.com/url?q=http://de.selfhtml.org/navigation/css.htm&sa=X&oi=smap&resnum=1&ct=result&cd=5&usg=AFQjCNH8kTA_p3HsInDQLM8iwF1zhG7KxQ

http://www.google.com/url?q=http://de.selfhtml.org/navigation/syntax.htm&sa=X&oi=smap&resnum=1&ct=result&cd=6&usg=AFQjCNGDUvwuU5JpUCcYi4IkkUGiPtOrXQ

http://www.google.com/url?q=http://de.selfhtml.org/navigation/anfang/index.htm&sa=X&oi=smap&resnum=1&ct=result&cd=7&usg=AFQjCNFn6jNqfmI5kjMtvrYmDW4j4gbPOw

http://www.google.com/url?q=http://aktuell.de.selfhtml.org/extras/download.shtml&sa=X&oi=smap&resnum=1&ct=result&cd=8&usg=AFQjCNFKQ-E-3_0VHdNQDXK7-LD1GbwRcg

http://www.google.com/url?q=http://aktuell.de.selfhtml.org/extras/download.shtml&sa=X&oi=smap&resnum=1&ct=result&cd=8&usg=AFQjCNFKQ-E-3_0VHdNQDXK7-LD1GbwRcg

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


http://upload.wikimedia.org/wikipedia/commons/5/58/Stevejobs_Macworld2005.jpg

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


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


http://de.wikipedia.org/wiki/Byte

http://de.wikipedia.org/wiki/Content-Type

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


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


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>


<!DOCTYPE html> <head> <title>Mein erstes Stylesheet</title> <style type="text/css">  </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>


<!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>


<!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>


<!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>


</body> </html>


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>


</body> </html>


<!DOCTYPE html> <head> <title>Mein erstes Stylesheet</title> <style type="text/css">  </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>


<!DOCTYPE html> <head> <title>Mein erstes Stylesheet</title> <style type="text/css">  </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>


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


http://www.selfhtml.net/css/eigenschaften/schrift.htm













http://www.selfhtml.net/css/eigenschaften/ausrichtung.htm






http://www.selfhtml.net/css/eigenschaften/hintergrund.htm






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


http://www.selfhtml.net/css/eigenschaften/tabellen.htm






http://www.selfhtml.net/css/eigenschaften/listen.htm







http://de.selfhtml.org/css/eigenschaften/rahmen.htm








http://de.selfhtml.org/css/eigenschaften/innenabstand.htm





Medientechnik 2012/13 © Manfred Jackel Universität Koblenz-Landau 43

äußerer div wrapper


Kopfleiste

Navigations-bereich

Seitenfuß


Seitenbereich Container

Abschnitt- Container

Abschnitt- Container


<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


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“>


48

seitenbereich <div style=“width:500; float: right“>

artikel <div style=“width:500; backgroundcolor: …“>

artikel <div style=“width:500; backgroundcolor: … “>


49


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


mailto://[email protected]



http://www.uni-koblenz.de/



http://mrech.uni-koblenz.de/




http://www.javascript-workshope.de/

http://www.w3.org/TR/html40

http://www.w3schools.com/

http://www.webmonkey.com/2010/02/mulders_stylesheets_tutorial_-_lesson_1/

http://www.bild.de/

Documents

Medientechnik WS 2012/13 - mtech.uni-koblenz.demtech.uni-koblenz.de/MT2012/material/03-2012-html.pdf · 4 Seitentitel