Inhalt. Hintergrund HTML CSS. JavaScript und das Document Object Model

Größe: px
Ab Seite anzeigen:

Download "Inhalt. Hintergrund HTML CSS. JavaScript und das Document Object Model"

Transkript

1 <HTML> Andreas Heß

2 Inhalt Hintergrund HTML CSS JavaScript und das Document Object Model

3 Netz-Protokolle Schichtenmodell OSI DoD Beispiele 7 Anwendung 6 Darstellung 5 Sitzung Anwendungen HTTP, HTTPS, SMTP, FTP, IMAP 4 Transport Transport TCP, UDP 3 Vermittlung Internet IP 2 Sicherung 1 Bitübertragung Netzzugang Ethernet, WLAN

4 LAN Internet PC Router Server Laptop

5 GET / http/1.1 Host: TCP Client HTTP/ OK Date: Mon, 23 Feb :21:17 GMT Server: Apache/ Last-Modified: Wed, 30 Apr :44:30 GMT ETag: "3a90-4f8403bb9da03" Accept-Ranges: bytes Content-Length: Connection: close Content-Type: text/html Web-Server <!DOCTYPE html> <html> <head>

6 HTML Auszeichnungssprache keine Programmiersprache semantische Auszeichnung von Text Verlinkung von anderen Texten oder Bildern

7 Elemente <element> Text </element> Start-Tag (öffnendes Tag) End-Tag (schließendes Tag)

8 Attribute <element name="wert"> Attribut

9 HTML: Struktur <!DOCTYPE html> <html> <head> </head> <body> </body> </html>

10 HTML: Struktur <!DOCTYPE html> <html> <head> </head> <body> </body> </html> HTML5 Dokumenttyp-Deklaration Versionsangaben, wichtig für Validierung <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " HTML 4.01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " XHTML 1.0

11 HTML: Struktur <!DOCTYPE html> <html> <head> </head> <body> </body> </html> Kopfdaten enthält Metadaten und Verknüpfungen zu Stylesheets und JavaScript

12 HTML: Struktur <!DOCTYPE html> <html> <head> </head> <body> </body> </html> Körper enthält die eigentlichen Nutzdaten

13 HTML: Wichtige Tags Metadaten Textstrukturierung Links Grafiken Textauszeichnung

14 <!DOCTYPE html> <html> <head> <title>html- und CSS-Kurs</title> <meta http-equiv="content-type" content="text/html; charset=iso "> <meta name="robots" content="follow"> <meta name="author" content="andreas Hess"> <meta name="description" content="bla bla bla "> <meta name="keywords" content="informatik, HTML"> <meta name="dc.publisher" content="andreas Hess"> <meta name="dc.subject" content="informatik">

15 <!DOCTYPE html> <html> <head> Titel der Seite, wird im Browser und in Google angezeigt <title>html- und CSS-Kurs</title> <meta http-equiv="content-type" content="text/html; charset=iso "> <meta name="robots" content="follow"> <meta name="author" content="andreas Hess"> <meta name="description" content="bla bla bla "> <meta name="keywords" content="informatik, HTML"> <meta name="dc.publisher" content="andreas Hess"> <meta name="dc.subject" content="informatik">

16 <!DOCTYPE html> <html> <head> Wird vom Browser interpretiert als ob es als Teil des HTTP- Headers gesendet <title>html- und CSS-Kurs</title> worden wäre <meta http-equiv="content-type" content="text/html; charset=iso "> <meta name="robots" content="follow"> <meta name="author" content="andreas Hess"> <meta name="description" content="bla bla bla "> <meta name="keywords" content="informatik, HTML"> <meta name="dc.publisher" content="andreas Hess"> <meta name="dc.subject" content="informatik">

17 <!DOCTYPE html> <html> <head> Wird vom Browser interpretiert als ob es als Teil des HTTP- Headers gesendet <title>html- und CSS-Kurs</title> worden wäre <meta http-equiv="content-type" content="text/html; charset=iso "> <meta name="robots" content="follow"> <meta name="author" content="andreas Hess"> hier: Angaben zur <meta name="description" content="bla bla bla "> <meta name="keywords" verwendeten content="informatik, HTML"> <meta name="dc.publisher" Zeichencodierung content="andreas Hess"> <meta name="dc.subject" content="informatik">

18 <!DOCTYPE html> <html> <head> <title>html- und CSS-Kurs</title> <meta http-equiv="content-type" allgemeine Metadaten content="text/html; charset=iso "> <meta name="robots" content="follow"> <meta name="author" content="andreas Hess"> <meta name="description" content="bla bla bla "> <meta name="keywords" content="informatik, HTML"> <meta name="dc.publisher" content="andreas Hess"> <meta name="dc.subject" content="informatik">

19 <!DOCTYPE html> <html> <head> <title>html- und CSS-Kurs</title> <meta http-equiv="content-type" allgemeine Metadaten content="text/html; charset=iso "> <meta name="robots" content="follow"> <meta name="author" content="andreas Hess"> <meta name="description" content="bla bla bla "> <meta name="keywords" content="informatik, Weiterführende HTML"> Links <meta hier: Anweisung name="dc.publisher" an content="andreas Hess"> sollen verfolgt werden <meta Web-Crawler name="dc.subject" content="informatik">

20 <!DOCTYPE html> <html> <head> <title>html- und CSS-Kurs</title> <meta http-equiv="content-type" allgemeine Metadaten content="text/html; charset=iso "> <meta name="robots" content="noindex, nofollow"> <meta name="author" content="andreas Hess"> <meta name="description" content="bla bla bla "> <meta name="keywords" content="informatik, Diese Seite soll HTML"> nicht <meta hier: Anweisung name="dc.publisher" an content="andreas Hess"> indexiert werden! <meta Web-Crawler name="dc.subject" content="informatik">

21 <!DOCTYPE html> <html> <head> <title>html- und CSS-Kurs</title> <meta http-equiv="content-type" content="text/html; charset=iso "> <meta name="robots" content="noindex, nofollow"> <meta name="author" content="andreas Hess"> <meta name="description" content="bla bla bla "> <meta name="keywords" content="informatik, HTML"> Angaben <meta name="dc.publisher" zum Autor content="andreas Hess"> <meta name="dc.subject" content="informatik">

22 <!DOCTYPE html> <html> <head> <title>html- und CSS-Kurs</title> <meta http-equiv="content-type" content="text/html; charset=iso "> <meta name="robots" content="noindex, nofollow"> <meta name="author" content="andreas Hess"> <meta name="description" content="bla bla bla "> <meta name="keywords" content="informatik, HTML"> <meta name="dc.publisher" content="andreas Wird von Hess"> <meta name="dc.subject" content="informatik"> Suchmaschinen interpretiert und als Snippet angezeigt

23 <!DOCTYPE html> <html> <head> <title>html- und CSS-Kurs</title> <meta http-equiv="content-type" content="text/html; charset=iso "> Wird von Suchmaschinen <meta name="robots" content="noindex, nofollow"> interpretiert <meta name="author" content="andreas Hess"> <meta name="description" content="bla bla bla "> <meta name="keywords" content="informatik, HTML"> <meta name="dc.publisher" content="andreas Hess"> <meta name="dc.subject" content="informatik">

24 <!DOCTYPE html> <html> <head> <title>html- und CSS-Kurs</title> <meta http-equiv="content-type" content="text/html; charset=iso "> <meta name="robots" content="noindex, nofollow"> <meta name="author" content="andreas Dublin Core Hess"> <meta name="description" content="bla bla bla "> <meta name="keywords" content="informatik, HTML"> <meta name="dc.publisher" content="andreas Hess"> <meta name="dc.subject" content="informatik">

25 <!DOCTYPE html> <html> <head> <title>html- und CSS-Kurs</title> <meta http-equiv="content-type" content="text/html; charset=iso "> <meta name="robots" content="noindex, nofollow"> <meta name="author" content="andreas Hess"> <meta name="description" content="bla bla bla "> <meta name="keywords" content="informatik, HTML"> <meta name="dc.publisher" content="andreas Hess"> <meta name="dc.subject" content="informatik"> <link rel="stylesheet" title="web-fonts" type="text/css" href="style.css">

26 <meta name="keywords" content="informatik, HTML"> <meta name="dc.publisher" content="andreas Hess"> <meta name="dc.subject" content="informatik"> <link rel="stylesheet" title="web-fonts" type="text/css" href="style.css"> <script type="text/javascript"> <!-- St = new Array(6); St[0]="img/D_2795_200x300.jpg"; St[1]="img/D_2683_200x300.jpg"; function swaprandom() { var x = Math.floor(Math.random()*5); window.document.images[1].src = St[x]; } // --> </script> </head>

27 <meta name="keywords" content="informatik, HTML"> <meta name="dc.publisher" content="andreas Hess"> <meta name="dc.subject" content="informatik"> <link rel="stylesheet" title="web-fonts" type="text/css" href="style.css"> <script Beziehung type="text/javascript"> zu anderen Quellen <!-- Achtung: Hier immer noch St = new Array(6); St[0]="img/D_2795_200x300.jpg"; Header, das sind keine St[1]="img/D_2683_200x300.jpg"; Hyperlinks! function swaprandom() { var x = Math.floor(Math.random()*5); window.document.images[1].src = St[x]; } // --> </script> </head>

28 <meta name="keywords" content="informatik, HTML"> <meta name="dc.publisher" content="andreas Hess"> <meta name="dc.subject" content="informatik"> Verweis auf Cascading Style Sheet <link rel="stylesheet" title="web-fonts" type="text/css" href="style.css"> <script Beziehung type="text/javascript"> zu anderen Quellen <!-- St = new Array(6); St[0]="img/D_2795_200x300.jpg"; St[1]="img/D_2683_200x300.jpg"; function swaprandom() { var x = Math.floor(Math.random()*5); window.document.images[1].src = St[x]; } // --> </script> </head> Dateiname

29 <meta name="keywords" content="informatik, HTML"> <meta name="dc.publisher" content="andreas Hess"> <meta name="dc.subject" content="informatik"> <link rel="stylesheet" title="web-fonts" type="text/css" href="style.css"> <script type="text/javascript"> <!-- St = new Array(6); St[0]="img/D_2795_200x300.jpg"; Eingebettetes St[1]="img/D_2683_200x300.jpg"; JavaScript-Programm function swaprandom() { var x = Math.floor(Math.random()*5); window.document.images[1].src = St[x]; } // --> </script> </head> Alternativ kann auch JavaScript über <link> eingebunden werden oder umgekehrt CSS über das <style>-tag eingebettet werden.

30 <meta name="keywords" content="informatik, HTML"> <meta name="dc.publisher" content="andreas Hess"> <meta name="dc.subject" content="informatik"> <link rel="stylesheet" title="web-fonts" type="text/css" href="style.css"> <script type="text/javascript"> <!-- St = new Array(6); St[0]="img/D_2795_200x300.jpg"; St[1]="img/D_2683_200x300.jpg"; function swaprandom() { var x = Math.floor(Math.random()*5); window.document.images[1].src = St[x]; } // --> </script> </head> <body>

31 </head> <body> <h1>überschrift</h1> <h2>überschrift zweiter Ordnung</h2> <p>hier steht interessantes.</p> <ol> <li>erster Punkt</li> <li>zweiter Punkt</li> </ol> <ul> <li>interessant</li> <li>auch interessant</li> </ul>

32 <h1>überschrift</h1> h1 h6: heading <h2>überschrift zweiter Ordnung</h2> <p>hier steht interessantes.</p> p: paragraph Überschrift Überschrift zweiter Ordnung Hier steht interessantes.

33 1. Erster Punkt 2. Zweiter Punkt <ol> ol: ordered list <li>erster Punkt</li> <li>zweiter Punkt</li> </ol> li: list <ul> ul: unordered list <li>interessant</li> <li>auch interessant</li> </ul> Interessant Auch interessant DNB Deutsche Nationalbibliothek HFU Hochschule Furtwangen University HTML Hypertext Markup Language dl: definition list <dl> <dt>dnb</dt><dd>deutsche Nationalbibliothek</dd> <dt>hfu</dt><dd>hochschule Furtwangen University</dd> <dt>html</dt><dd>hypertext Markup Language</dd> </dl>

34 <table> <thead><tr> <th>schicht</th> <th>protokoll</th> </tr></thead> <tbody><tr> <td>5</td> <td>http</td> </tr> <tr> <td>4</td> <td>tcp</td> </tr> <tr> <td>3</td> <td>ip</td> </tr></tbody> </table> tr: table row td: table data th: table head Schicht Protokoll 5 HTTP 4 TCP 3 IP

35 a: anchor, href: hyper reference <p> <a href=" Partei</a> die hat immer Recht! </p> <img src=" 2014/12/Kauf-kein-Scheiss-kauf-Geld-212x300.jpg" alt="kauf keinen Scheiß, kauf Geld!"> img: image, src: source, alt: alternate text Die Partei die hat immer Recht!

36 strike emphasize <p>in <s>schillers</s> Goethes <em>faust</em> heißt es: <q>das also ist des <strong>pudels</strong> Kern!</q></p> quote underline italic <p>in der <u>italienischen</u> <i>küche</i>, so heißt es, habe man die <b>nudeln</b> gern!</p> bold In Schillers Goethes Faust heißt es: Das also ist des Pudels Kern! In der italienischen Küche, so heißt es, habe man die Nudeln gern!

37 <p>in <s>schillers</s> Goethes <em>faust</em> heißt es: <q>das also ist des <strong>pudels</strong> Kern!</q></p> Was ist der Unterschied zwischen <p> und <b>? <p>in der <u>italienischen</u> <i>küche</i>, so heißt es, habe man die <b>nudeln</b> gern!</p> <p> ist ein Block-Element <b> ist ein Inline-Element In Schillers Goethes Faust heißt es: Das also ist des Pudels Kern! In der italienischen Küche, so heißt es, habe man die Nudeln gern!

38 <p>in <s>schillers</s> Goethes <em>faust</em> heißt es: <q>das also ist des <strong>pudels</strong> Kern!</q></p> Was ist der Unterschied zwischen <strong> und <b>? <p>in der <u>italienischen</u> <i>küche</i>, so heißt es, habe man die <b>nudeln</b> gern!</p> In Schillers Goethes Faust heißt es: Das also ist des Pudels Kern! In der italienischen Küche, so heißt es, habe man die Nudeln gern!

39 Textauszeichnung Textauszeichnung mit HTML sollte sich an der Bedeutung orientieren, nicht am Aussehen! Tatsächliches Aussehen kann mit CSS nach eigenen Vorstellungen festgelegt werden! Konsequenzen?

40 Textauszeichnung HTML-Elemente nur zur Formatierung von Text gelten seit Einführung von CSS als veraltet Beispiele: Elemente <font> oder <center> Attribute border oder bgcolor <table> nur verwenden, wenn tatsächlich Tabelle! <div> als allgemeines Block- und <span> als allgemeines Inline-Element

41 Übung 1

42 Übung 1 Gestalten Sie eine einfache Webseite mit den hier gezeigten Tags, aber noch ohne CSS.

43

44 CSS Legt fest, wie Text aussehen soll, der mit HTML (oder XML!) ausgezeichnet wurde Einbindung in HTML mit <link> oder <style> Grundlegende Syntax: Selektor { Eigenschaft : Wert; } z.b. ein HTML-Element

45 <h1>überschrift</h1> <h2>überschrift zweiter Ordnung</h2> <p>hier steht interessantes.</p> Überschrift soll jetzt rot dargestellt werden! Überschrift Überschrift zweiter Ordnung Hier steht interessantes.

46 </head> <body> <h1>überschrift</h1> <h2>überschrift zweiter Ordnung</h2> <p>hier steht interessantes.</p> Überschrift soll jetzt rot dargestellt werden! Überschrift Überschrift zweiter Ordnung Hier steht interessantes.

47 <!DOCTYPE html> <html> <head> <title>beispiel 1</title> <style type="text/css"> h1 { color: red; } </style> </head> <body> Überschrift soll jetzt rot dargestellt werden! <h1>überschrift</h1> Überschrift <h2>überschrift zweiter Ordnung</h2> <p>hier steht interessantes.</p> Überschrift zweiter Ordnung Hier steht interessantes.

48 <style type="text/css"> h1 { color: red; } </style> Überschrift wird jetzt rot dargestellt werden! Überschrift Überschrift zweiter Ordnung Hier steht interessantes.

49 <!DOCTYPE html> CSS-Beispiel <html> Dies ist ein Text mit hervorgehobenem Wörtern. <head> <title>beispiel 2</title> <style type="text/css"> h1 { font-family: Verdana; color: #7000A0; } p { font-family: Rhabarber, sans-serif; font-size: 14pt; } em { font-style: normal; font-weight: 900; } </style> </head> <body> <h1>css-beispiel</h1> <p>dies ist ein Text mit <em>hervorgehobenem</em> Wörtern.</p> </body> </html>

50 <!DOCTYPE html> <html> <head> <title>beispiel 2</title> <style type="text/css"> h1 { font-family: Verdana; color: #7000A0; } p { font-family: Rhabarber, sans-serif; font-size: 14pt; } em { font-style: normal; font-weight: 900; } </style> </head> Angaben können mit <body> Schlüsselwörtern oder <h1>css-beispiel</h1> numerisch (hier als <p>dies ist ein Text mit <em>hervorgehobenem</em> Wörtern.</p> </body> </html> CSS-Beispiel Dies ist ein Text mit hervorgehobenem Wörtern. Farben und einige andere hexadezimale RGB-Werte) spezifiziert werden.

51 <!DOCTYPE html> <html> <head> <title>beispiel 2</title> <style type="text/css"> h1 { font-family: Verdana; color: #7000A0; } p { font-family: Rhabarber, sans-serif; font-size: 14pt; } em { font-style: normal; font-weight: 900; } </style> </head> <body> <h1>css-beispiel</h1> CSS-Beispiel Dies ist ein Text mit hervorgehobenem Wörtern. Einstellung der Schriftart: Namen von Schriftarten oder bestimmte generische <p>dies ist ein Text mit <em>hervorgehobenem</em> Wörtern.</p> </body> Fallback -Werte möglich </html> Bezeichnungen, alternative

52 <!DOCTYPE html> CSS-Beispiel <html> Dies ist ein Text mit hervorgehobenem Wörtern. <head> <title>beispiel 2</title> <style type="text/css"> h1 { font-family: Verdana; color: #7000A0; } p { font-family: Rhabarber, sans-serif; font-size: 14pt; } em { font-style: normal; font-weight: 900; } </style> </head> <body> Untergeordnete Elemente <h1>css-beispiel</h1> erben von übergeordneten; <p>dies ist ein Text mit <em>hervorgehobenem</em> Wörtern.</p> </body> </html> Darstellung kann komplett verändert werden, z.b. hier <em> fett und nicht kursiv

53 <!DOCTYPE html> <html> <head> <title>beispiel 3</title> <style type="text/css"> ul li { font-family: monospace; font-size: 150%; } ol li { font-family: Verdana; font-size: 150%; text-shadow: 4px 4px 4px grey; } </style> </head> <body> <li> innerhalb von <ul> kann <ul> anders dargestellt werden <li>karotten</li> <li>auberginen</li> als <li> innerhalb von <ol> <li>hackfleisch</li> </ul> <ol> <li>auftragen</li> <li>polieren</li> </ol> </body>

54 <title>beispiel 4</title> <style type="text/css"> body { font-family: Georgia, serif; }.info { font-family: monospace; }.warnung { width: 50%; margin-left: 25%; margin-bottom: 20pt; margin-top: 20pt; padding: 10px; border: 3px solid red; text-align: center; } </style> </head> <body> <div class="info">kaffee schmeckt gut.</div> <div class="warnung">kaffee könnte heiß sein!</div> <div class="info">kaffee hilft beim Programmieren.</div>

55 <title>beispiel 4</title> <style type="text/css"> body { font-family: Georgia, serif; }.info { font-family: monospace; }.warnung { width: 50%; margin-left: 25%; margin-bottom: 20pt; margin-top: 20pt; padding: 10px; border: 3px solid red; Style für Klassen </style> </head> <body> text-align: center; } universelles Attribut <div class="info">kaffee schmeckt gut.</div> <div class="warnung">kaffee könnte heiß sein!</div> <div class="info">kaffee hilft beim Programmieren.</div>

56 <title>beispiel 4</title> <style type="text/css"> body { font-family: Georgia, serif; }.info { font-family: monospace; }.warnung { width: 50%; margin-left: 25%; margin-bottom: 20pt; margin-top: 20pt; padding: 10px; border: 3px solid red; text-align: center; } </style> </head> <body> Positionierung (nicht trivial!) <div class="info">kaffee schmeckt gut.</div> <div class="warnung">kaffee könnte heiß sein!</div> <div class="info">kaffee hilft beim Programmieren.</div>

57 .warnung { width: 50%; margin-left: 25%; margin-bottom: 20pt; margin-top: 20pt; padding: 10px; border: 3px solid red; text-align: center; } </style> </head> <body> <div class="info">kaffee schmeckt gut.</div> <div class="warnung">kaffee könnte heiß sein!</div> <div class="info">kaffee hilft beim Programmieren.</div> </body> Breite 50% der Fensterbreite </html>

58 .warnung { width: 50%; margin-left: 25%; margin-bottom: 20pt; margin-top: 20pt; padding: 10px; border: 3px solid red; text-align: center; } </style> </head> <body> <div class="info">kaffee schmeckt gut.</div> <div class="warnung">kaffee könnte heiß sein!</div> Rand 25% der Fensterbreite <div class="info">kaffee hilft beim Programmieren.</div> </body> </html>

59 .warnung { width: 50%; margin-left: 25%; margin-bottom: 20pt; margin-top: 20pt; padding: 10px; border: 3px solid red; text-align: center; } </style> </head> <body> 20 Punkt <div class="info">kaffee schmeckt gut.</div> <div class="warnung">kaffee könnte heiß sein!</div> <div class="info">kaffee hilft beim Programmieren.</div> </body> </html>

60 .warnung { width: 50%; margin-left: 25%; margin-bottom: 20pt; margin-top: 20pt; padding: 10px; border: 3px solid red; text-align: center; } </style> </head> <body> 10 Pixel <div class="info">kaffee schmeckt gut.</div> <div class="warnung">kaffee könnte heiß sein!</div> <div class="info">kaffee hilft beim Programmieren.</div> </body> </html>

61 .warnung { width: 50%; margin-left: 25%; margin-bottom: 20pt; margin-top: 20pt; padding: 10px; border: 3px solid red; text-align: center; } </style> </head> <body> <div class="info">kaffee schmeckt gut.</div> Rahmen 3 Pixel <div class="warnung">kaffee könnte heiß sein!</div> <div class="info">kaffee hilft beim Programmieren.</div> </body> </html>

62 .warnung { width: 50%; margin-left: 25%; margin-bottom: 20pt; margin-top: 20pt; padding: 10px; border: 3px solid red; text-align: center; } </style> </head> <body> <div class="info">kaffee schmeckt gut.</div> <div class="warnung">kaffee Text innerhalb könnte heiß sein!</div> <div class="info">kaffee hilft beim Programmieren.</div> der Box zentriert </body> </html>

63 top margin padding left height Inhalt right width border siehe auch: bottom

64 top margin padding left height Inhalt right width border bottom

65 <style type="text/css"> body { font-family: Georgia, serif; } #kaffee { position: fixed; top: 10px; right: 10px; padding: 5px; border: 3px solid blue; background-color: white; font-weight: bold; font-family: Verdana; } #kaffee:hover { background-color: #ff0000; color: white; } </style> </head> <body> <div>lorem ipsum dolor sit amet, consetetur sadipscing <div id="kaffee">kaffee schmeckt gut.</div>

66 <div>lorem ipsum dolor sit amet, consetetur sadipscing <style type="text/css"> body { font-family: Georgia, serif; } #kaffee { position: fixed; top: 10px; right: 10px; padding: 5px; border: 3px solid blue; background-color: white; font-weight: bold; font-family: Verdana; } #kaffee:hover Style für einzelne { Elemente background-color: #ff0000; color: white; } </style> </head> <body> universelles Attribut <div id="kaffee">kaffee schmeckt gut.</div>

67 <div>lorem ipsum dolor sit amet, consetetur sadipscing <style type="text/css"> body { font-family: Georgia, serif; } #kaffee { position: fixed; top: 10px; right: 10px; padding: 5px; border: 3px solid blue; background-color: white; font-weight: bold; font-family: Verdana; } Positionierung fix zum Fenster #kaffee:hover { </style> </head> <body> (außerhalb des Fließtexts!) background-color: #ff0000; color: white; } static: Standardwert absolute: Bezugspunkt Elternelement relative: relativ zur normalen Positionierung <div id="kaffee">kaffee schmeckt gut.</div> nicht trivial

68 <div>lorem ipsum dolor sit amet, consetetur sadipscing <style type="text/css"> body { font-family: Georgia, serif; } #kaffee { position: fixed; top: 10px; right: 10px; padding: 5px; border: 3px solid blue; background-color: white; font-weight: bold; font-family: Verdana; } #kaffee:hover { background-color: #ff0000; color: white; } </style> </head> <body> Pseudo-Klasse z.b. :link, :active, :visited, :first-child <div id="kaffee">kaffee schmeckt gut.</div> Element unter Mauszeiger

69 <title>beispiel 6</title> <style type="text/css"> body { font-family: Georgia, serif; } a { text-decoration: none; } :focus { border: 4px dotted black; } </style> </head> <body> <h1>wichtige Bibliotheken</h1> <ul> <li><a href=" tabindex="1"> Deutsche Nationalbibliothek</a></li> <li><a href=" tabindex="2"> Library of Congress</a></li> <li><a href=" " tabindex="3"> Bibliothek der Hochschule Furtwangen</a></li>

70 <title>beispiel 6</title> <style type="text/css"> body { font-family: Georgia, serif; } a { text-decoration: none; } :focus { border: 4px dotted black; } </style> </head> <body> ausgewähltes Element <h1>wichtige Bibliotheken</h1> <ul> <li><a href=" tabindex="1"> Deutsche Nationalbibliothek</a></li> <li><a href=" tabindex="2"> Library Attribut of Congress</a></li> für Tab- <li><a Reihenfolge href=" " der Elemente tabindex="3"> Bibliothek der Hochschule Furtwangen</a></li>

71 Übung 2

72 Übung 2 Überarbeiten Sie Ihre Webseite mit CSS.

73 JavaScript HTML und CSS nur für Anzeige und Darstellung für client-seitige Programmierung: JavaScript Programm läuft im Browser und kann die angezeigte Seite manipulieren Zugriff auf Element der Webseite über Document Object Model

74 } } </script> <style type="text/css"> </style> </head> <body> <h1>die Türme von Frankfurt</h1> <table> <tr> <td id="lo" onclick="ziel(document.getelementbyid('lo'))"> <div class="scheibe" id="klein" onclick="klick(document.getelementbyid('klein'))">

75 } } </script> <style type="text/css"> </style> </head> <body> <h1>die Türme von Frankfurt</h1> <table> <tr> universelles Attribut <td id="lo" onclick="ziel(document.getelementbyid('lo'))"> <div class="scheibe" id="klein" onclick="klick(document.getelementbyid('klein'))"> JavaScript-Programmcode

76 } } </script> <style type="text/css"> </style> </head> <body> <h1>die Türme von Frankfurt</h1> <table> <tr> <td id="lo" onclick="ziel(document.getelementbyid('lo'))"> <div class="scheibe" id="klein" onclick="klick(document.getelementbyid('klein'))"> Zugriff auf HTML-Elemente über Document Object Model (DOM)

77 } } </script> <style type="text/css"> </style> </head> <body> <h1>die Türme von Frankfurt</h1> <table> <tr> <td id="lo" onclick="ziel(document.getelementbyid('lo'))"> <div class="scheibe" id="klein" onclick="klick(document.getelementbyid('klein'))"> Funktionsaufruf

78 <title>beispiel 7</title> <script type="text/javascript"> var selected = -1; function klick(scheibe) { if (selected == -1) { selected = scheibe; scheibe.style.backgroundcolor = "yellow"; Funktionsdefinitionen } else { selected.style.backgroundcolor = "green"; selected = -1; } } function ziel(zelle) { if (!zelle.haschildnodes() && selected!= -1) { selected.parentnode.removechild(selected); zelle.appendchild(selected); selected.style.backgroundcolor = "green"; selected = -1; } } </script>

79 <title>beispiel 7</title> <script type="text/javascript"> var selected = -1; function klick(scheibe) { if (selected == -1) { selected = scheibe; scheibe.style.backgroundcolor = "yellow"; } else { selected.style.backgroundcolor = "green"; selected = -1; } } function ziel(zelle) { if (!zelle.haschildnodes() && selected!= -1) { selected.parentnode.removechild(selected); zelle.appendchild(selected); selected.style.backgroundcolor = "green"; selected = -1; } } </script> Stil ändern

80 <title>beispiel 7</title> <script type="text/javascript"> var selected = -1; function klick(scheibe) { if (selected == -1) { selected = scheibe; scheibe.style.backgroundcolor = "yellow"; } else { selected.style.backgroundcolor = "green"; selected = -1; } } function ziel(zelle) { if (!zelle.haschildnodes() && selected!= -1) { selected.parentnode.removechild(selected); zelle.appendchild(selected); selected.style.backgroundcolor = "green"; selected = -1; } } </script> Stil ändern

81 <title>beispiel 7</title> <script type="text/javascript"> var selected = -1; function klick(scheibe) { if (selected == -1) { selected = scheibe; scheibe.style.backgroundcolor = "yellow"; } else { selected.style.backgroundcolor = "green"; selected = -1; } } function ziel(zelle) { if (!zelle.haschildnodes() && selected!= -1) { selected.parentnode.removechild(selected); zelle.appendchild(selected); selected.style.backgroundcolor = "green"; selected = -1; } Element an andere } </script> Stelle bewegen!

82 <title>beispiel 7</title> <script type="text/javascript"> var selected = -1; function klick(scheibe) { if (selected == -1) { selected = scheibe; scheibe.style.backgroundcolor = "yellow"; } else { selected.style.backgroundcolor = "green"; selected = -1; } } function ziel(zelle) { if (!zelle.haschildnodes() && selected!= -1) { selected.parentnode.removechild(selected); zelle.appendchild(selected); selected.style.backgroundcolor = "green"; selected = -1; } Element an andere } </script> Stelle bewegen!

83 <body> <h1> <h2> DOM-Baum <p> <em> <a> <p> <ul> <li>

84

85

86 Ressourcen

HTML-Grundlagen (X)HTML:

HTML-Grundlagen (X)HTML: HTML-Grundlagen (X)HTML: < > beginnender HTML Tag schließender HTML Tag < /> leere HTML Elemente Attribute und Werte &.; Sonderzeichen, HTML Entities Aufbau einer Datei Ein

Mehr

Meine erste Homepage - Beispiele

Meine erste Homepage - Beispiele Meine erste - Beispiele 1. Beispiel meine Willkommen auf meiner Befehle nicht über Hier ist ein Senior, der noch fit für's Internet ist. Probieren wir

Mehr

Webdesign-Multimedia HTML und CSS

Webdesign-Multimedia HTML und CSS Webdesign-Multimedia HTML und CSS Thomas Mohr HTML Definition ˆ HTML (Hypertext Markup Language) ist eine textbasierte Auszeichnungssprache (engl. markup language) zur Strukturierung digitaler Dokumente

Mehr

Digitale Medien. Übung

Digitale Medien. Übung Digitale Medien Übung HTML Heute Hyper Text Markup Language Beschreibungssprache von WWW-Seiten: Enthält die Struktur eines Dokuments und teilweise die Darstellung. ich bin eine Überschrift

Mehr

CASCADING STYLE SHEETS WEBSEITEN-GESTALTUNG MIT CSS

CASCADING STYLE SHEETS WEBSEITEN-GESTALTUNG MIT CSS CASCADING STYLE SHEETS WEBSEITEN-GESTALTUNG MIT CSS Sören Elvers, Julia Polner, Max Weller, Moritz Willig T-Doku, Werner-von-Siemens-Schule, Wetzlar 2010-2011 INHALT DIESES VORTRAGS 1. Kurze Einführung

Mehr

CSS. Cascading Stylesheets

CSS. Cascading Stylesheets CSS Cascading Stylesheets Themen Was sind Cascading Stylesheets? Vorteile von CSS Nachteile von CSS CSS: Versionen Regelsyntax für Stylesheets Einem HTML-Dokument Styles hinzufügen und Numerische

Mehr

Hypertext Markup Language HTML. Stefan Szalowski Internet-Technologien HTML

Hypertext Markup Language HTML. Stefan Szalowski Internet-Technologien HTML Hypertext Markup Language HTML Hypertext Markup Language HTML Cascading Style Sheets CSS Zwei Sprachen, mit denen Webseiten erstellt werden HTML: Strukturieren von Inhalten durch Elemente Überschriften,

Mehr

HTML5. Wie funktioniert HTML5? Tags: Attribute:

HTML5. Wie funktioniert HTML5? Tags: Attribute: HTML5 HTML bedeutet Hypertext Markup Language und liegt aktuell in der fünften Fassung, also HTML5 vor. HTML5 ist eine Auszeichnungssprache mit der Webseiten geschrieben werden. In HTML5 wird festgelegt,

Mehr

Online-Publishing mit HTML und CSS für Einsteigerinnen

Online-Publishing mit HTML und CSS für Einsteigerinnen Online-Publishing mit HTML und CSS für Einsteigerinnen Dipl. Math. Eva Dyllong, Universität Duisburg Dipl. Math. Maria Oelinger, spirito GmbH IF MYT 07 2002 CSS-Einführung Vorschau CSS Was ist das? Einbinden

Mehr

1 Definition der Selektoren Einbinden der CSS 3 Möglichkeiten Farbangaben Schriftformatierung Abstände...

1 Definition der Selektoren Einbinden der CSS 3 Möglichkeiten Farbangaben Schriftformatierung Abstände... CSS GRUNDLAGEN 1 Definition der Selektoren... 2 2 Einbinden der CSS 3 Möglichkeiten... 2 3 Farbangaben... 4 4 Schriftformatierung... 4 5 Abstände... 4 6 Box Modell... 5 7 Links... 5 8 Eigene Klasse definieren...

Mehr

Crashkurs Webseitenerstellung mit HTML

Crashkurs Webseitenerstellung mit HTML Ziel Crashkurs Webseitenerstellung mit HTML Das Ziel dieser Einführung in die Webseitenerstellung ist das Kennenlernen der Seitenbeschreibungssprache HTML und die Nutzung für einfach strukturierte Seiten,

Mehr

WEBSEITEN ENTWICKELN MIT ASP.NET

WEBSEITEN ENTWICKELN MIT ASP.NET jamal BAYDAOUI WEBSEITEN ENTWICKELN MIT ASP.NET EINE EINFÜHRUNG MIT UMFANGREICHEM BEISPIELPROJEKT ALLE CODES IN VISUAL BASIC UND C# 3.2 Installation 11 Bild 3.2 Der Webplattform-Installer Bild 3.3 IDE-Startbildschirm

Mehr

Signatur mit Formatierung

Signatur mit Formatierung Bedienungstip: Signatur mit Formatierung Seite 1 Signatur mit Formatierung Es können Signaturen hinterlegt werden, die beim Erstellen von Nachrichten automatisch angehängt werden. Das ist sehr praktisch,

Mehr

Publizieren im Internet

Publizieren im Internet Publizieren im Internet Eine eigene Homepage erstellen Teil 2 Margarita Esponda esponda@inf.fu-berlin.de Ein Bild als Hintergrund Webseite mit einen Bild als Hintergrund

Mehr

BFV Widgets Kurzdokumentation

BFV Widgets Kurzdokumentation BFV Widgets Kurzdokumentation Mit Hilfe eines BFV-Widgets lassen sich die neuesten Ergebnisse und die aktuellen Tabellen des BFV auf der eigenen nicht kommerziellen Webseite mit wenig Aufwand einbeten.

Mehr

Aufgabenbereich 3: Layoutgestaltung mit CSS

Aufgabenbereich 3: Layoutgestaltung mit CSS Aufgabenbereich 3: Layoutgestaltung mit CSS Wichtige Begriffe und Zusammenhänge: Website: Gesamtheit eines Internet-Auftrittes (alle Webseiten, die dazu gehören) Webseite: Eine einzelne Seite, ein HTML-Dokument

Mehr

Erste Schritte mit XHTML

Erste Schritte mit XHTML Sascha Frank SS 2005 www.saschafrank.de 3.3.05 Eigene Homepage Rechte am $HOME ändern Eigene Homepage Rechte am $HOME ändern chmod 701 /home/login Eigene Homepage Rechte am $HOME ändern chmod 701

Mehr

Angewandte Informatik

Angewandte Informatik Angewandte Informatik Teil 9.1 Web Seiten V1.3 12.03.2011 1 von 37 Inhaltsverzeichnis 3... Welche Browser werden verwendet? 4... Mit welchen Browser surft die Welt? 5... Wie kommt der Browser zur Seite?

Mehr

HTML Teil 2. So kann man HTML-Seiten mit <div> und CSS gestalten. So sehen einfache Formulare aus

HTML Teil 2. So kann man HTML-Seiten mit <div> und CSS gestalten. So sehen einfache Formulare aus HTML Teil 2 So kann man HTML-Seiten mit und CSS gestalten So sehen einfache Formulare aus Wie könnte ein komplexer Internetauftritt aussehen? Trennung Inhaltsbereich und Navigationsbereich 2 Beispiel:

Mehr

http://www.therealgang.de/

http://www.therealgang.de/ http://www.therealgang.de/ Titel : Author : Kategorie : Vorlesung HTML und XML (Einführung) Dr. Pascal Rheinert Sonstige-Programmierung Vorlesung HTML / XML: Grundlegende Informationen zu HTML a.) Allgemeines:

Mehr

HTML Programmierung. Aufgaben

HTML Programmierung. Aufgaben HTML Programmierung Dr. Leander Brandl BRG Keplerstraße - A-8020 Graz Universität Graz - Institut für Experimentalphysik Fachdidaktik der Physik http://w4.brgkepler.asn-graz.ac.at 1. Die erste Web-Seite

Mehr

«Integration in WebSite» HTML-/Javascript-Code-Beispiele

«Integration in WebSite» HTML-/Javascript-Code-Beispiele QuickInfo «Integration in WebSite» HTML-/Javascript-Code-Beispiele Fragen? Ihre Umfrage soll direkt in resp. auf Ihrer WebSite erscheinen? Die Möglichkeiten für eine technische Integration an exakten Stellen

Mehr

HTML und CSS. Eine kurze Einführung

HTML und CSS. Eine kurze Einführung HTML und CSS Eine kurze Einführung Begriff Markup Begriff aus Druckindustrie: Layouter fügt Anmerkungen/Markierungen (Tags) hinzu Markup-Languge (ML) = Auszeichnungssprache Beispiele a) das Wort wird fett

Mehr

Einführung in HTML. Tutorium. Präsentation der Sitzung vom 2./9. Juni 2004 Martin Stricker

Einführung in HTML. Tutorium. Präsentation der Sitzung vom 2./9. Juni 2004 Martin Stricker Tutorium Einführung in HTML Präsentation der Sitzung vom 2./9. Juni 2004 Martin Stricker martin.stricker@rz.hu-berlin.de Programm Grundlagen von HTML Objekte, Elemente, Tags Grundaufbau eines HTML-Dokuments

Mehr

Dokumentation für Popup (lightbox)

Dokumentation für Popup (lightbox) Dokumentation für Popup (lightbox) Für das Popup muss eine kleine Anpassung im wpshopgermany Plugin vorgenommen werden und zwar in der Datei../wp-content/plugins/wpshopgermany/controllers/WarenkorbController.class.php

Mehr

Klausurteilnehmer. Wichtige Hinweise. Note: Klausur Informatik Programmierung, 17.09.2012 Seite 1 von 8 HS OWL, FB 7, Malte Wattenberg.

Klausurteilnehmer. Wichtige Hinweise. Note: Klausur Informatik Programmierung, 17.09.2012 Seite 1 von 8 HS OWL, FB 7, Malte Wattenberg. Klausur Informatik Programmierung, 17.09.2012 Seite 1 von 8 Klausurteilnehmer Name: Matrikelnummer: Wichtige Hinweise Es sind keinerlei Hilfsmittel zugelassen auch keine Taschenrechner! Die Klausur dauert

Mehr

CAS WEBDESIGN UND WEBPUBLISHING KURS 1 / TAG 2: GRUNDLAGEN DER WEBENTWICKLUNG

CAS WEBDESIGN UND WEBPUBLISHING KURS 1 / TAG 2: GRUNDLAGEN DER WEBENTWICKLUNG CAS WEBDESIGN UND WEBPUBLISHING KURS 1 / TAG 2: GRUNDLAGEN DER WEBENTWICKLUNG Von Markus Stauffiger / 4eyes GmbH STRUKTUR UND ZIELE DES HEUTIGEN TAGES Repetition CSS Grundlagen CSS Eigenschaften Wie komme

Mehr

Allgemeine Technologien II Sommersemester Mai 2011 CSS

Allgemeine Technologien II Sommersemester Mai 2011 CSS Allgemeine Technologien II Sommersemester 2011 02. Mai 2011 CSS Kursthemen Designparadigmen Framesets Tabellenbasierte Layouts -basierte Layouts: CSS & Co. Cascading Style Sheets CSS CSS einbinden

Mehr

Format- oder Stilvorlagen

Format- oder Stilvorlagen Vorraussetzung Sie sollten Grundkenntnisse der HTML-Sprache besitzen, um die Ausbildungseinheit Formatvorlagen, auch Stilvorlagen genannt, ohne Probleme verstehen zu können. Ist dies nicht der Fall, empfehlen

Mehr

Einführung Responsive Webdesign

Einführung Responsive Webdesign Einführung Responsive Webdesign Aktuelle Situation Desktop Webseiten Umsetzungen auch heute noch in den meisten Fällen Pixelbasiert JavaScript schafft Dynamik CSS schafft Trennung von Inhalt und Layout

Mehr

Inhaltsverzeichnis. Florian Bauer CSS Seite 2 von 10

Inhaltsverzeichnis. Florian Bauer CSS Seite 2 von 10 CSS Inhaltsverzeichnis Gestaltung mit CSS... 3 CSS einbinden... 3 On the fly... 3 Im Header... 3 In einer externen Datei... 3 Aufbau einer CSS Anweisung... 4 Wichtige CSS Eigenschaften... 4 Pseudoelemente...

Mehr

Aufbau einer HTML Seite:

Aufbau einer HTML Seite: 1 Aufbau einer HTML Seite: Grundstruktur: Head Bereich: "nicht sichtbar" Er enthält grundlegende Informationen wie: Title, Charset, Ansichtsgröße,

Mehr

Seiten gestalten mit CSS. Die wichtigsten HTML-Elemente. ,CSS gestaltet dynamisch die HTML-Elemente (Boxen)

Seiten gestalten mit CSS. Die wichtigsten HTML-Elemente. ,CSS gestaltet dynamisch die HTML-Elemente (Boxen) Wichtige Grundlagen Cascading Style Sheets, gestaltet dynamisch die HTML-Elemente (Boxen),Mit legen Sie Schriften und Farben einheitlich fest,über das Box-Modell layouten Sie die Seite,Navigation und Effekte

Mehr

Seitengestaltung mit HTML und CSS. Stefan Rothe, Thomas Jampen

Seitengestaltung mit HTML und CSS. Stefan Rothe, Thomas Jampen Seitengestaltung mit HTML und CSS Stefan Rothe, Thomas Jampen 2013 09 12 Rechtliche Hinweise Dieses Werk von Stefan Rothe steht unter einer Attribution-NonCommercial-ShareAlike 3.0 License. Zudem verzichtet

Mehr

Es gibt zahlreiche Web-Programmiersprachen: HTML, CSS, JavaScript, PHP, Perl, Python, HTTP, XML und viele weitere.

Es gibt zahlreiche Web-Programmiersprachen: HTML, CSS, JavaScript, PHP, Perl, Python, HTTP, XML und viele weitere. 1.0.0 Allgemeine Informationen Es gibt zahlreiche Web-Programmiersprachen: HTML, CSS, JavaScript, PHP, Perl, Python, HTTP, XML und viele weitere. Wir werden uns hauptsächlich mit HTML beschäftigen, weil

Mehr

CSS Cascading Style Sheets

CSS Cascading Style Sheets XML light CSS Cascading Style Sheets Jörn Clausen joern@techfak.uni-bielefeld.de Übersicht Wieso Cascading Style Sheets? HTML und CSS XML und CSS Ausblick XML light CSS Cascading Style Sheets 2/24 Probleme,

Mehr

Farb-, Text- und Schriftgestaltung mit CSS3

Farb-, Text- und Schriftgestaltung mit CSS3 CT» LPE 05» 03 Textgestaltung» Hintergrundgestaltung Farb-, Text- und Schriftgestaltung mit CSS3 Eine HTML5-Datei ist reine Textdatei. In dieser Datei wird lediglich der Inhalt und die Stuktur einer Webseite

Mehr

Übung zur Vorlesung Digitale Medien. Hanna Schneider Ludwig-Maximilians-Universität München Wintersemester 2014/2015

Übung zur Vorlesung Digitale Medien. Hanna Schneider Ludwig-Maximilians-Universität München Wintersemester 2014/2015 Übung zur Vorlesung Digitale Medien Hanna Schneider Ludwig-Maximilians-Universität München Wintersemester 2014/2015 1 Hyper Text Markup Language Beschreibungssprache von WWW-Seiten: Enthält die Struktur

Mehr

Mini-Dokumentation zur Bearbeitung der Website massweiler.de

Mini-Dokumentation zur Bearbeitung der Website massweiler.de Mini-Dokumentation zur Bearbeitung der Website massweiler.de 10. März 2015 Die Website massweiler.de Die Website massweiler.de wird mit dem Content Management System (CMS) Joomla betrieben. Joomla ist

Mehr

15.04.2014 Was ist HTML? Designwerkstatt Webart Sommersemester 2014 Institut für Kunstpädagogik, LMU München Martin Pflanzer

15.04.2014 Was ist HTML? Designwerkstatt Webart Sommersemester 2014 Institut für Kunstpädagogik, LMU München Martin Pflanzer 15.04.2014 Was ist HTML? Tim Berners-Lee Die erste Webseite: info.cern.ch, 13. November 1990 Webseiten waren ursprünglich einfache Textseiten mit Links. HTML = Textzusätze zur Formatierung & Erweiterung

Mehr

Barrierefreie Webseiten erstellen mit TYPO3

Barrierefreie Webseiten erstellen mit TYPO3 Barrierefreie Webseiten erstellen mit TYPO3 Alternativtexte Für jedes Nicht-Text-Element ist ein äquivalenter Text bereitzustellen. Dies gilt insbesondere für Bilder. In der Liste der HTML 4-Attribute

Mehr

Aufgaben der Klasse FTI33 HTML: 1. Durch welchen Befehl wird ein Hyperlink in einem Bestimmten Frame angezeigt?

Aufgaben der Klasse FTI33 HTML: 1. Durch welchen Befehl wird ein Hyperlink in einem Bestimmten Frame angezeigt? Hinweis: Verstehen Sie folgende Aufgaben als mögliche Bestandteile für die anstehende Klausur. Betrachten Sie die Lösungen nicht von vorne herein als richtig, sondern beantworten Sie nochmals die Fragen

Mehr

Seminar DWMX 2004. DW Session 004

Seminar DWMX 2004. DW Session 004 Seminar DWMX 2004 DW Session 004 Eigene Site aufbauen Aufbau einer persönlichen Site: Auswahl einer bestimmten Dateiorganisation Statische HTML Site Vorlagenbasierte Site Framebasierte Site Erstellen der

Mehr

CSS. Cascading Style Sheets

CSS. Cascading Style Sheets CSS Cascading Style Sheets Was ist CSS? CSS... steht für Cascading Style Sheets... definiert die Darstellung (Farben, Fonts,... ) von (HTML) Dokumenten auf Web-Seiten.... spart viel Aufwand, da Format-Regeln

Mehr

Übung zur Vorlesung Digitale Medien. Doris Hausen Ludwig-Maximilians-Universität München Wintersemester 2011/2012

Übung zur Vorlesung Digitale Medien. Doris Hausen Ludwig-Maximilians-Universität München Wintersemester 2011/2012 Übung zur Vorlesung Digitale Medien Doris Hausen Ludwig-Maximilians-Universität München Wintersemester 2011/2012 1 Pfadangaben (1) Pfadangaben sind relevant für Bilder, Verweise, Medienobjekte per URL:

Mehr

Erstellen eines HTML-Templates mit externer CSS-Datei

Erstellen eines HTML-Templates mit externer CSS-Datei Erstellen eines HTML-Templates mit externer CSS-Datei Eigenschaften der Lösung Menü mit 2 Ebenen ohne Bilder, Menü besteht aus Text (Links) Durch CSS kann das Menü aber auch die Seite angepasst werden

Mehr

Klicken Sie auf den Reiter Newsfeed (1) in der oberen Menüleiste und wählen Sie dann links in der schmalen grauen Leiste Neuer Newsfeed (2) aus:

Klicken Sie auf den Reiter Newsfeed (1) in der oberen Menüleiste und wählen Sie dann links in der schmalen grauen Leiste Neuer Newsfeed (2) aus: Seite 1 Wenn Sie daran interessiert sind, aktuelle Informationen über Ihr Unternehmen auf Ihrer Internetpräsenz zu veröffentlichen, ist die Newsfeed-Funktion von meltwater news genau das richtige für Sie.

Mehr

Einführung Internettechnologien. - Clientseitige Programmierung -

Einführung Internettechnologien. - Clientseitige Programmierung - Einführung Internettechnologien - Clientseitige Programmierung - Client Client: Programm, das Daten von einem Server anfordert In einem Netzwerk können unterschiedliche Clients zum Einsatz kommen Im Folgenden:

Mehr

Softwaretechnik Teil Webprogrammierung (HTML, PHP) SS2011

Softwaretechnik Teil Webprogrammierung (HTML, PHP) SS2011 Softwaretechnik Teil Webprogrammierung (HTML, PHP) SS2011 Studiengang: Semester: 3. Gruppe: Wirtschaftsinformatik A & B Datum: 29.06.2011 Dozent: LfbA Dipl.-Hdl. Andreas Heß Hilfsmittel: alle Unterlagen/Bücher

Mehr

Anwendungsprotokolle: HTTP, POP, SMTP

Anwendungsprotokolle: HTTP, POP, SMTP Anwendungsprotokolle: HTTP, POP, SMTP TCP? UDP? Socket? eingesetzt, um Webseiten zu übertragen Zustandslos Nutzt TCP Client schickt Anfrage ( HTTP-Request ) an Server, Server schickt daraufhin Antwort

Mehr

Da die Bedienung des Editors viele Möglichkeiten aufweist, aber auch etwas Übung voraussetzt, haben wir ihm ein eigenes Unterkapitel gewidmet.

Da die Bedienung des Editors viele Möglichkeiten aufweist, aber auch etwas Übung voraussetzt, haben wir ihm ein eigenes Unterkapitel gewidmet. 5.6. Der HTML-Editor Da die Bedienung des Editors viele Möglichkeiten aufweist, aber auch etwas Übung voraussetzt, haben wir ihm ein eigenes Unterkapitel gewidmet. Bild 33: Der Editor 5.6.1. Allgemeine

Mehr

Webentwicklung mit Mozilla Composer I.

Webentwicklung mit Mozilla Composer I. Tutorium Webentwicklung mit Mozilla Composer I. Präsentation der Sitzung vom 12. Mai 2004 Martin Stricker martin.stricker@rz.hu-berlin.de Programm Erstellen und Bearbeiten von Webseiten mit dem HTML-Editor

Mehr

HTML5 & SCC3. PC-Treff-BB VHS Aidlingen. Lothar R. Krukowski. Ein Überblick

HTML5 & SCC3. PC-Treff-BB VHS Aidlingen. Lothar R. Krukowski. Ein Überblick HTML5 & SCC3 Ein Überblick 13.10.201 Agenda Neue Strategie HTML5 CSS3 Besonderheiten Anwendungen Beispiele - ( how to start? ) Literatur Neue Strategie Letzte Version von HTML und CSS HTML5 Erstellen der

Mehr

Hier mal einige Tipps zum Einbau vom "Anfy" Applets. Hier die Seite von "Anfy" und zum Download des Programms: http://www.anfyteam.

Hier mal einige Tipps zum Einbau vom Anfy Applets. Hier die Seite von Anfy und zum Download des Programms: http://www.anfyteam. Hier mal einige Tipps zum Einbau vom "Anfy" Applets. Hier die Seite von "Anfy" und zum Download des Programms: http://www.anfyteam.com/... ich habe "Version 2.1" und zeige hier Bilder und Beschreibungen

Mehr

VWA Rhein-Neckar Dipl.-Ing. Thomas Kloepfer. Kommunikation I (Internet) Übung 4 PHP

VWA Rhein-Neckar Dipl.-Ing. Thomas Kloepfer. Kommunikation I (Internet) Übung 4 PHP VWA Rhein-Neckar Dipl.-Ing. Thomas Kloepfer Kommunikation I (Internet) Übung 4 PHP SS 2004 Inhaltsverzeichnis 1. PHP die serverseitige Programmiersprache...1 1.1. PHP - Bereiche in HTML definieren...1

Mehr

Designänderungen mit CSS und jquery

Designänderungen mit CSS und jquery Designänderungen mit CSS und jquery In der epages-administration gibt es in den Menüpunkten "Schnelldesign" und "Erweitertes Design" umfangreiche Möglichkeiten, das Design der Webseite anzupassen. Erfahrene

Mehr

Fachbereich Wirtschaftswissenschaften Klausur: Übung 1 zur Vorlesung E-Business und Web-Site-Engineering Sommersemester 2007 Deckblatt Hinweise

Fachbereich Wirtschaftswissenschaften Klausur: Übung 1 zur Vorlesung E-Business und Web-Site-Engineering Sommersemester 2007 Deckblatt Hinweise Klausur Übung 1 E-Business und WSE: HTML/XHTML SS 2007 Seite 1 von 4 Fachbereich Wirtschaftswissenschaften Klausur: Übung 1 zur Vorlesung E-Business und Web-Site-Engineering Sommersemester 2007 Deckblatt

Mehr

4. Network Interfaces Welches verwenden? 5. Anwendung : Laden einer einfachen Internetseite 6. Kapselung von Paketen

4. Network Interfaces Welches verwenden? 5. Anwendung : Laden einer einfachen Internetseite 6. Kapselung von Paketen Gliederung 1. Was ist Wireshark? 2. Wie arbeitet Wireshark? 3. User Interface 4. Network Interfaces Welches verwenden? 5. Anwendung : Laden einer einfachen Internetseite 6. Kapselung von Paketen 1 1. Was

Mehr

Webalizer HOWTO. Stand: 18.06.2012

Webalizer HOWTO. Stand: 18.06.2012 Webalizer HOWTO Stand: 18.06.2012 Copyright 2003 by manitu. Alle Rechte vorbehalten. Alle verwendeten Bezeichnungen dienen lediglich der Kennzeichnung und können z.t. eingetragene Warenzeichen sein, ohne

Mehr

Design anpassen eine kurze Einführung

Design anpassen eine kurze Einführung Design anpassen eine kurze Einführung Das gesamte Layout von Papoo basiert auf modernen CSS Layouts die vollständig ohne Layout Tabellen funktionieren. Um schnell vorhandene Designs anpassen zu können

Mehr

Online-Publishing mit HTML und CSS für Einsteigerinnen

Online-Publishing mit HTML und CSS für Einsteigerinnen mit HTML und CSS für Einsteigerinnen Dipl.-Math. Eva Dyllong Universität Duisburg Dipl.-Math. Maria Oelinger spirito GmbH IF MYT 07-2002 Web-Technologien Überblick HTML und CSS, XML und DTD, JavaScript

Mehr

Textverarbeitung 1. 1. Textentwurf 2. Texterfassung 3. Textumformung 4. Textgestaltung 5. Textverwendung

Textverarbeitung 1. 1. Textentwurf 2. Texterfassung 3. Textumformung 4. Textgestaltung 5. Textverwendung Informatik - Text / HTML 1 Textverarbeitung 1 1. Textentwurf 2. Texterfassung 3. Textumformung 4. Textgestaltung 5. Textverwendung Leistungsmerkmale Textverarbeitung ist Standardsoftware - nutzerorientiert,

Mehr

Dokumentation Externe Anzeige von Evento Web Dialogen

Dokumentation Externe Anzeige von Evento Web Dialogen Dokumentation Externe Anzeige von Evento Web Dialogen Autor: Roger Guillet Telefon 058 404 83 57 E-Mail roger.guillet@crealogix.com CREALOGIX Evento Postfach 112, Baslerstrasse 60 CH-8066 Zürich Telefon

Mehr

Responsive Webdesign Bootstrap und co. Pierre Hein & Benjamin Stein Stuttgart 7. Mai 2015

Responsive Webdesign Bootstrap und co. Pierre Hein & Benjamin Stein Stuttgart 7. Mai 2015 Responsive Webdesign Bootstrap und co. Pierre Hein & Benjamin Stein Stuttgart 7. Mai 2015 Agenda 1. Einführung Was ist Responive Webdesign, Media Queries und CSS preprocessing 2. Frameworks Bootstrap,

Mehr

Information und ihre Darstellung: XHTML & CSS

Information und ihre Darstellung: XHTML & CSS Information und ihre Darstellung: XHTML & CSS IFB Speyer Daniel Jonietz 2009 XHTML Extensible Hypertext Markup Language Unter besonderer Berücksichtigung von XHTML 1.1. 1 Was ist XHTML? Textbasierte Auszeichnungssprache

Mehr

Facebook I-Frame Tabs mit Papoo Plugin erstellen und verwalten

Facebook I-Frame Tabs mit Papoo Plugin erstellen und verwalten Facebook I-Frame Tabs mit Papoo Plugin erstellen und verwalten Seit Anfang Juni 2012 hat Facebook die Static FBML Reiter deaktiviert, so wird es relativ schwierig für Firmenseiten eigene Impressumsreiter

Mehr

Vorlesungsinhalte. Internet und Webseiten-Gestaltung. Ausblick. Entwicklungsschritte

Vorlesungsinhalte. Internet und Webseiten-Gestaltung. Ausblick. Entwicklungsschritte Vorlesungsinhalte Internet und Webseiten-Gestaltung Wirtschaftsinformatik 3 Vorlesung 2005-05-13 Dipl.-Inf. (FH) T. Mättig Stylesheets (CSS) Das CSS Box-Modell Fotos, Bilder, Grafiken Tabellen 2005-05-13

Mehr

Internet und Webseiten-Gestaltung

Internet und Webseiten-Gestaltung Internet und Webseiten-Gestaltung Wirtschaftsinformatik 3 Vorlesung 28. April 2004 Dipl.-Inf. T. Mättig 2004-04-28 Internet und Webseiten-Gestaltung - T. Mättig 1 Vorbemerkungen Dipl.-Inf. T. Mättig E-Mail:

Mehr

Aufbau eines Klassen-Selektors: selektor.klasse { css-eigenschaft1:wert1; css-eigenschaft2:wert2;...}

Aufbau eines Klassen-Selektors: selektor.klasse { css-eigenschaft1:wert1; css-eigenschaft2:wert2;...} Cascading StyleSheets (CSS) Allgemein CSS (aufeinander aufbauende Stilvorlagen) wurden 1996 vom W3C standardisiert. dienen der Ergänzung strukturierter Dokumente wie HTML oder XML. Ermöglichen die Trennung

Mehr

Schiller-Gymnasium Hof 20.12.2004

Schiller-Gymnasium Hof 20.12.2004 Erstellen eines HTML-Dokumentes Zum Erstellen einer Homepage benötigen wir lediglich einen Editor. Zum Ansehen der fertigen Site benötigen wir wir natürlich auch einen Browser, z.b. Firefox oder Netscape

Mehr

Mit der Maus im Menü links auf den Menüpunkt 'Seiten' gehen und auf 'Erstellen klicken.

Mit der Maus im Menü links auf den Menüpunkt 'Seiten' gehen und auf 'Erstellen klicken. Seite erstellen Mit der Maus im Menü links auf den Menüpunkt 'Seiten' gehen und auf 'Erstellen klicken. Es öffnet sich die Eingabe Seite um eine neue Seite zu erstellen. Seiten Titel festlegen Den neuen

Mehr

Übungsaufgaben zu XML:

Übungsaufgaben zu XML: Übungsaufgaben zu XML: Aufgabe 1 Allgemeine Fragen zu XML: (Benutzen Sie zum Lösen der Aufgaben die Online-Hilfen, welche wir erwähnt haben.) a) Was ist eine DTD? DTD steht für Document Type Definition.

Mehr

Eine Schnelleinführung in CSS

Eine Schnelleinführung in CSS Eine Schnelleinführung in CSS Michael Dienert 11. September 2013 Inhaltsverzeichnis 1 Was ist CSS? 1 2 Verwenden der CSS-Stylesheets 2 3 Struktur eines CSS-Stylesheets 2 4 Selektoren im Detail 3 4.1 Verwandschaftsbeziehungen:

Mehr

Erste Schritte in NVU

Erste Schritte in NVU NVU (http://www.nvu-composer.de/) ist ein leicht zu bedienender HTML-Editor. Nach dem Start von NVU sieht der Bildschirm wie folgt aus: Lasse dich von dieser Anzeige nicht irritieren, es ist alles halb

Mehr

Computergrundlagen HTML Hypertext Markup Language

Computergrundlagen HTML Hypertext Markup Language Computergrundlagen HTML Hypertext Markup Language Axel Arnold Institut für Computerphysik Universität Stuttgart Wintersemester 2014/15 Ausgabemedien und Beschreibungssprachen Papier: L A T E X feste Seitengröße

Mehr

Björn Seibert Manuela Hoffmann. Professionelles Webdesign I mit (X)HTML und CSS [

Björn Seibert Manuela Hoffmann. Professionelles Webdesign I mit (X)HTML und CSS [ Björn Seibert Manuela Hoffmann Professionelles Webdesign I mit (X)HTML und CSS [ Inhalt Vorwort 11 Über das Buch 11 Über die Autoren 12 Teil I Bevor es losgeht... 15 1 Einfach moderne Websites 19 1.1 Auf

Mehr

Projekt Integrierte LV-Planung Anleitung zur Bearbeitung von Textbausteinen

Projekt Integrierte LV-Planung Anleitung zur Bearbeitung von Textbausteinen Projekt Integrierte LV-Planung Anleitung zur Bearbeitung von Textbausteinen Änderungsdokumentation: Version 1.4 Datum Autor Version Status Beschreibung 13.06.2012 Stenzel 1.0 final 23.07.2012 Stenzel 1.1

Mehr

2. Kommunikation und Synchronisation von Prozessen 2.2 Kommunikation zwischen Prozessen

2. Kommunikation und Synchronisation von Prozessen 2.2 Kommunikation zwischen Prozessen 2. Kommunikation und Synchronisation von Prozessen 2.2 Kommunikation zwischen Prozessen Dienste des Internets Das Internet bietet als riesiges Rechnernetz viele Nutzungsmöglichkeiten, wie etwa das World

Mehr

Text Formatierung in Excel

Text Formatierung in Excel Text Formatierung in Excel Das Aussehen des Textes einer oder mehrerer Zellen kann in Excel über verschiedene Knöpfe beeinflusst werden. Dazu zuerst die betroffenen Zelle(n) anwählen und danach den entsprechenden

Mehr

IT- und Medientechnik

IT- und Medientechnik IT- und Medientechnik Vorlesung 4: 2.11.2015 Wintersemester 2015/2016 h_da, Lehrbeauftragter Teil 1: IT- und Medientechnik Themenübersicht der Vorlesung Hard- und Software Hardware: CPU, Speicher, Bus,

Mehr

Für die Verwendung des Wikis wird dringend der Microsoft Internet Explorer Version 7.0 empfohlen!

Für die Verwendung des Wikis wird dringend der Microsoft Internet Explorer Version 7.0 empfohlen! Sie finden das FH-Wiki unter der folgenden Adresse: http://wiki.fh-kehl.de:9454 Falls Sie Anregungen, Fragen oder Hinweise haben wenden Sie sich bitte an Herrn Fetterer oder Frau Prof. Dr. Schenk. Für

Mehr

Zeile 3-7: Der Kopf der HTML-Datei. Hier werden unsichtbare Einstellungen für das ganze Dokument vorgenommen.

Zeile 3-7: Der Kopf der HTML-Datei. Hier werden unsichtbare Einstellungen für das ganze Dokument vorgenommen. Inhalt: Grundgerüst, Tags, Zeichensatz, Meta-Tags, Farben 1 2 3 4 titel der Datei 5 6

Mehr

Inhaltsverzeichnis. Florian Bauer HTML Seite 2 von 10

Inhaltsverzeichnis. Florian Bauer HTML Seite 2 von 10 HTML Inhaltsverzeichnis HTML Grundlagen... 3 Was ist HTML... 3 URL... 3 HTTP... 3 WWW Funktionsweise... 3 HTML Grundgerüst... 4 Grobes Grundgerüst... 4 Feines Grundgerüst... 4 HTML-Elemente... 5 Tags...

Mehr

Falls Sie den Hintergrund der Website schon kennen, wählen Sie am einfachsten die gleiche Farbe in Photoshop für die Schaltfläche.

Falls Sie den Hintergrund der Website schon kennen, wählen Sie am einfachsten die gleiche Farbe in Photoshop für die Schaltfläche. 1. Schritt Schaltfläche vorbereiten In Photoshop eine neue Datei in Größe der Schaltfläche erstellen. Hier: Breite: 100 Pixel Höhe: 50 Pixel Auflösung 72 dpi Hintergrund: Weiß* Der weiße Hintergrund ist

Mehr

Web Sockets mit HTML5. Quelle: www.html5rocks.com/de

Web Sockets mit HTML5. Quelle: www.html5rocks.com/de Web Sockets mit HTML5 Quelle: www.html5rocks.com/de Intensive Client-Server-Kommunikation: Beispiele Online-Spiele mit mehreren Mitspielern Chat-Anwendungen Live-Sport-Ticker Echtzeit-Aktualisierungen

Mehr

FIS: Projektdaten auf den Internetseiten ausgeben

FIS: Projektdaten auf den Internetseiten ausgeben Rechenzentrum FIS: Projektdaten auf den Internetseiten ausgeben Ist ein Forschungsprojekt im Forschungsinformationssystem (FIS) erfasst und für die Veröffentlichung freigegeben, können Sie einige Daten

Mehr

Kennen, können, beherrschen lernen was gebraucht wird www.doelle-web.de

Kennen, können, beherrschen lernen was gebraucht wird www.doelle-web.de Inhaltsverzeichnis Inhaltsverzeichnis... 1 Grundlagen... 2 Hyperlinks innerhalb einer Datei... 2 Verweisziel definieren... 2 Einen Querverweis setzen... 3 Verschiedene Arten von Hyperlinks... 3 Einfache

Mehr

Nuke Menü Version 0.2 / VKP Neu! Jetzt mit Gruppenzuordnung der Links (Nur für Admins, nur für Mitglieder, nur für Anonyme oder für Alle)

Nuke Menü Version 0.2 / VKP Neu! Jetzt mit Gruppenzuordnung der Links (Nur für Admins, nur für Mitglieder, nur für Anonyme oder für Alle) Nuke Menü Version 0.2 / VKP Neu! Jetzt mit Gruppenzuordnung der Links (Nur für Admins, nur für Mitglieder, nur für Anonyme oder für Alle) Author: Bernd Alexander K. W. Köhler http://www.pixel-cms.de email:

Mehr

Online-Publishing mit HTML und CSS für Einsteigerinnen

Online-Publishing mit HTML und CSS für Einsteigerinnen mit HTML und CSS für Einsteigerinnen Dipl.-Math. Eva Dyllong Universität Duisburg Dipl.-Math. Maria Oelinger spirito GmbH IF MYT 07-2002 Grundlagen Frau erfahrt, wie das Internet aufgebaut ist, aus welchen

Mehr

11 Publizieren im Web

11 Publizieren im Web 11 Publizieren im Web Für ein modernes Unternehmen ist es heute kaum vorstellbar, nicht im Internet vertreten zu sein. Laut Statistik Austria 7 haben 97 % aller österreichischen Unternehmen ab 10 Beschäftigten

Mehr

Abgabetermin: , 23:59 Uhr

Abgabetermin: , 23:59 Uhr HTML 19.01.2016 Projektanforderungen Struktur: Zentrale (index-)seite Sinnvolle Ordnerstruktur von index.html aus verlinkte Seiten mit Querverweisen (insgesamt mindestens 3 Seiten) Elemente, die irgendwo

Mehr

Einfügen von Bildern innerhalb eines Beitrages

Einfügen von Bildern innerhalb eines Beitrages Version 1.2 Einfügen von Bildern innerhalb eines Beitrages Um eigene Bilder ins Forum einzufügen, gibt es zwei Möglichkeiten. 1.) Ein Bild vom eigenem PC wird auf den Webspace von Baue-die-Bismarck.de

Mehr

HTML5 2 1 / 6. Doing Web Apps HTML5 2. Letzte Änderung: 2014-10-24 Version: 1.1

HTML5 2 1 / 6. Doing Web Apps HTML5 2. Letzte Änderung: 2014-10-24 Version: 1.1 1 / 6 Doing Web Apps HTML5 2 Autor: Rüdiger Marwein Letzte Änderung: 2014-10-24 Version: 1.1 Dieses Dokument darf mit Nennung des Autoren - frei vervielfältigt, verändert und weitergegeben werden. Der

Mehr

Crashkurs HTML und CSS

Crashkurs HTML und CSS Crashkurs HTML und CSS HTML und CSS Hinweis: Dieser Crashkurs liefert einen Überblick und Kriterien für die sachgerechte Verwendung von HTML und CSS. Zum Lernen, Nachschlagen und Ausprobieren verweise

Mehr

Proseminar: Website-Management-Systeme

Proseminar: Website-Management-Systeme Proseminar: Website-Management-Systeme Thema: Web: Apache/Roxen von Oliver Roeschke email: o_roesch@informatik.uni-kl.de Gliederung: 1.) kurze Einleitung 2.) Begriffsklärung 3.) Was ist ein Web? 4.) das

Mehr

Guide DynDNS und Portforwarding

Guide DynDNS und Portforwarding Guide DynDNS und Portforwarding Allgemein Um Geräte im lokalen Netzwerk von überall aus über das Internet erreichen zu können, kommt man um die Themen Dynamik DNS (kurz DynDNS) und Portweiterleitung(auch

Mehr

Webseiten-Bericht für creator.pressreaders.eu

Webseiten-Bericht für creator.pressreaders.eu Webseiten-Bericht für creator.pressreaders.eu Generiert am 08 Dezember 2015 18:52 PM Der Wert ist 51/100 SEO Inhalte Seitentitel CREATOR - PRESSREADERS.EU Länge : 25 Perfekt, denn Ihr Seitentitel enthält

Mehr

Frames oder Rahmen im Browserfenster

Frames oder Rahmen im Browserfenster In dieser Ausbildungseinheit zeigen wir Ihnen, wie Frames oder auch Rahmen im Browserfenster erstellt werden. Dabei möchten wir anmerken, dass zu Frames bereits sehr viel Gegensätzliches geschrieben wurde.

Mehr

<script type="text/javascript"> <! <%= page(page.searchsuggestionsscript) %> // > </script>

<script type=text/javascript> <! <%= page(page.searchsuggestionsscript) %> // > </script> 1. Intelligente AutoComplete Funktion für die Volltextsuche 1.1. JQuery einbinden Falls Sie in Ihrem Shop bereits JQuery verwenden, so überprüfen Sie bitte, ob Sie alle notwendigen Dateien eingebunden

Mehr