1 / 112

Computer AG

Computer AG. 2008/2009. Schiller-Gymnasium Witten. Thomas Schmidt Oktober 2008. Ziele der Computer-AG. HTML lernen. Eigene Web-Seiten erstellen. JavaScript lernen. HTML. beherrscht statische und dynamische Formatierungen. Statische Formatierung. Dynamische Formatierung.

aysel
Download Presentation

Computer AG

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Computer AG 2008/2009 Schiller-Gymnasium Witten Thomas Schmidt Oktober 2008

  2. Ziele der Computer-AG • HTML lernen • Eigene Web-Seiten erstellen • JavaScript lernen

  3. HTML

  4. beherrscht statische und dynamische Formatierungen Statische Formatierung Dynamische Formatierung Was ist HTML HTML ist eine Sprache zur Formulierung von Dokumenten • wird für die Gestaltung von Web-Seiten verwendet • wurde bereits vor dem Internet erfunden

  5. Werkzeuge zur Erstellung von HTML-Seiten Wie kann man HTML-Seiten herstellen • ZeileneditorenEditor von Windows • Anwendungen mit einer grafischen OberflächeFrontpage Word • HTML EditorenHTML-Kit HTML-Kit

  6. HTML - Grundlagen - Zeilendatei Eine HTML-Datei besteht aus einzelnen Textzeilen Zeile 1 Zeile 2 ... Zeile ...

  7. HTML - Grundlagen - Tags HTML-Dateien werden mittels sogenannter „Tags“ formuliert • Ein Tag besteht aus Buchstaben und ist in spitze Klammern eingeschlossen:<title> • Zu fast allen Tags gibt es einen Anti-Tag der Form:</title> • Informationen werden in Tag-Paare eingeklammert:<title> Ich bin ein Titel </title>

  8. HTML - Grundlagen - <html> Jede HTML-Seite ist in das Tag-Paar <html> ... </html> eingefasst <html> hier stehen alle Informationen der Seite...</html>

  9. HTML - Grundlagen - <body> und <head> Jede Seite verfügt mindestens über die Tags <head> und <body> <html><head> ... Kopfinformation ... </head><body> ... Seiteninformation ... </body></html>

  10. HTML - Grundlagen - Dateiumbruch Zeilenumbrüche haben keine Bedeutung – sie dienen nur der Lesbarkeit ist gleichbedeutend mit <html><head>...</head><body>...</body></html> <html><head> ... </head><body> ... </body></html>

  11. Titel Überschrift Textkörper Beispiel <html><head> <title>Meine erste Seite</title> </head><body> <h1>Überschrift</h1> Hier sehen wir den Text der ersten Webseite. </body></html>

  12. HTML - Absätze <body> <h1>Bellum civile (Julius Caesar)</h1> <p> Anno 50, Pompeius ei pro consule exeunti ut Romam rediret et copias dimitteret imperavit. Senatus praeterea ei consulatum secundum in absentia petere interdixit. </p> <p>Caesar cognovit se accusatum iri si Romam sine immunitate consulari aut viribus legionum rediisset. Senatum prohibuit quin pararet, fines Italiae per Rubiconem 10 Ianuarii anno 49 traiciendo, dicens alea iacta est.</p> </body>

  13. HTML - Listen <body> <h1>Zutaten für Zabajone</h1> <ul> <li>Marsala (Italienischer Süßwein)</li> <li>Eier</li> <li>Zucker</li> </ul> </body>

  14. HTML - Hervorhebungen <body> <h1>Hervorhebungen im Text</h1> <ul> <li>Dieser Text ist <u>unterstrichen</u></li> <li>Dieser Text ist <b>fett</b></li> <li>Dieser Text ist <i>kursiv</i></li> <li>Dieser Text ist <i><u><b>alles</b></u></i></li> </ul> </body>

  15. HTML - Bilder <body> <h1>Bilder anzeigen</h1> <p> Außer Text kann ein Browser natürlich auch Bilder anzeigen. Bilder sind rechteckige Gebilde, die sich beim Formatieren wie große Buchstaben verhalten. Folgendes Bild zeigt eine Möhre: </p> <img src=“moehre.jpg“> </body>

  16. HTML - Tags mit Attributen <body> <img src="moehre.jpg"> <img src="moehre.jpg" title="Ich bin ein Tooltip"> <img src="moehre.jpg" title="Ich bin ein Tooltip" alt="Zeig mich wenn kein Bild da ist"> </body> • Nahezu alle <Tags> können Attribute haben • Attribute haben immer die Form: Name="Text " • Mehrere Attribute trennt man durch Leerzeichen oder White-Space-Zeichen • Fehlerhafte Attribute werden ignoriert • Attribute die auf mehrere Tags anwendbar sind, heißen Universalattribute

  17. Literaturhinweis http://de.selfhtml.org/

  18. Styles

  19. HTML - Styles Styles dienen der optischen Gestaltung von Seiten • Schriften • Farben • Optische Gestaltung • Positionierung Styles haben keinen Einfluss auf Inhalte und Funktionen!

  20. HTML - Styles - Hintergrundfarbe <body style="background-color:yellow"> ... </body>

  21. HTML - Styles - Schriftfamilien <body style="font-family:arial"> ... </body>

  22. HTML - Styles - Schriftgrößen <body style="font-family:arial; font-size:30px"> ... </body>

  23. HTML - Styles - Schriftfarbe <body style="font-family:arial; color:blue"> ... </body>

  24. HTML - Styles - Syntax • Styles werden als Attribut <tagstyle="...... "> formuliert • Jeder einzelne Style hat die Form: typ:wert • Mehrere Styles werden durch Semikola getrennt Beispiel: <body style="font-family:arial; color:blue">

  25. HTML - Styles - Hintergrundbilder <body style="font-family:arial; color:white; background-image:url(moehre.jpg)"> ... </body>

  26. HTML - Styles - Bildwiederholung <body style="background-image: url(moehre.jpg); background-repeat: repeat-x"> ... </body> repeat in beiden Richtungen wiederholen (Voreinstellung).repeat-x nur "eine Zeile lang" waagerecht wiederholen.repeat-y nur "eine Spalte lang" senkrecht wiederholen.no-repeat nicht wiederholen, nur als Einzelbild anzeigen.

  27. HTML - Styles - Verläufe <body style="background-image: url(verlauf.gif); background-repeat: repeat-y"> ... </body> Ein Verlauf ist ein Bild, das nur ein Pixel hoch oder breit ist.

  28. HTML - Styles - Explizites Positionieren <body> <div style="position:absolute; left:50px; top:70px;height:120px; width:400px; background-color:yellow;"> </div> </body>

  29. HTML - Styles - Verschachteltes Positionieren <body> <div style="position: absolute; left: 50px; top: 70px; height: 120px; width: 400px; background-color: yellow;"> <div style="position:absolute; left: 20px; top: 20px; height: 30px; width: 200px; background-color: red;"> </div> </div> </body>

  30. HTML - Styles - Positionieren mit Text <body style="font-family:arial; font-size:16"> <div style="position:absolute; left:30px; top:30px; height:190px; width:300px; background-color:yellow;"> <div style="font-size:18">Der Ring des Polykrates</div> <br> <div>Er stand auf seines Daches Zinnen<br>und schaute mit vergnügten Sinnen<br>auf das beherrschte Samos hin.</div> <br> <div>Dies alles ist mir untertänig<br>begann er zu Ägyptens König.<br>Gestehe, dass ich glücklich bin.</div> </div> </body>

  31. HTML - Styles - Innenabstand <div style="position:absolute; left:20; top:10; height:180; width:300; background-color:yellow;padding: 10px;> .... </div>

  32. HTML - Styles - Rahmen <div style="position:absolute; left:20; top:10; height:180; width:300; background-color:yellow; padding:10px; border-style: solid; border-width: 1px; border-color: green"> .... </div>

  33. HTML - Styles - Unterschiede in den Browsern Die Darstellung von Innenabstand und Rahmen ist abhängig vom Browser Internet Explorer: Innenabstand und Rahmen liegen innerhalb des durchheightundwidthdefinierten Rechtecks. Mozilla Firefox: Innenabstand und Rahmen werden zuheightund widthdazuaddiert. Firefox verhält sich konform zum Standard

  34. HTML - Styles - Überblick Überblick über alle Gestaltungsmöglichkeiten mit Styles • Schriften • Hintergründe • Innenabstände • Rahmen • Positionen • Gestaltungen (z.B. Aufzählungszeichen) Literatur über Styles: http://de.selfhtml.org/navigation/css.htm

  35. Beispiel Klasse Hintergrundfarbe Schriftart Innenabstand Rand HTML - Style-Klassen Wenn man ein Design mehrfach benötigt,kann man verschiedene Styles zu einer Klasse gruppieren.

  36. Deklaration <head> <style type="text/css"> .box {background-color:yellow; position:absolute; padding:10px; border-style:solid; border-width:1; border-color:green} </style> </head> Verwendung <body> <div class="box"style="left:20; top:10; height:180; width:300;"> </div> <div class="box"style="left:370; top:10; height:180; width:300;"> </div> </body> HTML - Style-Klassen - Definition und Verwendung

  37. HTML - Style-Klassen - Deklarieren Style-Klassen werden im <head> Tag defniert <head> <style type="text/css"> .mybody {font-family:arial; font-color:black; font-size:16; background-color:lightyellow} </style> </head> Alle Klassen werden zwischen <style> ... </style> abgelegt Die Syntax ist: .klassenname {style1; style2; ...}

  38. HTML - Style-Klassen - Vererbung <head> <style type="text/css"> .mybody {font-family:arial; color:darkblue; font-size:16; background-color:lightyellow} .kasten {background-color:yellow; position:absolute; padding:10px; border-style:solid; border-width:1; border-color:green} .header {font-size:20;} </style> </head> <body class="mybody"> <div class="kasten"style="left:20; top:10; height:180; width:300;"> <div class="header">Die Made</div> <p> Hinter eines Baumes Rinde<br>sitzt die Made mit dem Kinde.<br> Sie ist Witwe denn der Gatte,<br>den sie hatte,<br>fiel vom Blatte. </p> </div> ... Hier kommt noch der zweite Kasten ... </body>

  39. Style- Klassen HTML HTML - Style-Klassen-Dateien - Nutzen Die Deklaration von Styles kann auch in einer separaten Datei erfolgen Worin liegt der Nutzen von Style-Klassen-Dateien • Das komplette Design eines Web-Auftritts ist zentral definiert • Das Design kann variiert werden, ohne Inhalte zu verändern • Das Design kann auf einem ganz anderen Server liegen • Designs können mehrfach verwendet werden

  40. Klassendatei computerag.css .mybody {font-family:arial; color:darkblue; font-size:16; background-color:lightyellow} .kasten {background-color:yellow; position:absolute; padding:10px; border-style:solid; border-width:1; border-color:green} .header {font-size:20;} HTML - Style-Klassen- Dateien - Aufbau <head> <linkrel=stylesheettype="text/css"href="computerag.css"> </head>

  41. HTML Links

  42. HTML - Links <body style="font-family:arial; font-size:18; background-color: #99ccff"> <h1>Meine ersten Links</h1> <a href="http://www.schiller-witten.de">Schiller-Gymnasium</a><br> <ahref="http://www.ruhr-gymnasium.de">Ruhr-Gymnasium</a><br> <ahref="http://www.vfl-bochum.de">VfL Bochum</a><br> <ahref="ersteseite.html">Meine erste Seite</a><br> </body>

  43. Datei im Unterordner Seite im Web Datei HTML - Links - Ziele Das Ziel eines Links kann sein http://www.computer-ag.info seite.html ordner/seite.html

  44. HTML Tabellen

  45. HTML - Tabellen <tableborder="1"> <tr> <td>Name</td> <td>Vorname</td> <td>Straße</td> <td>Ort</td> </tr> <tr> <td>Schmidt</td> <td>Thomas</td> <td>Auf der Marta 1</td> <td>58452 Witten</td> </tr> <table>

  46. HTML - Tabellen - Titelzeile <table border="1"> <tr style="font-weight:bold"> <td>Name</td> <td>Vorname</td> <td>Straße</td> <td>Ort</td> </tr> <tr> <td>Schmidt</td> <td>Thomas</td> <td>Auf der Marta 1</td> <td>58452 Witten</td> </tr> <table>

  47. HTML - Tabellen - Innenabstand <table border="1" cellpadding="6"> <tr style="font-weight:bold"> <td>Name</td> <td>Vorname</td> <td>Straße</td> <td>Ort</td> </tr> <tr> <td>Schmidt</td> <td>Thomas</td> <td>Auf der Marta 1</td> <td>58452 Witten</td> </tr> <table>

  48. HTML - Tabellen - Zellenabstand cellspacing=0 <table border="1" cellpadding="6" cellspacing= "0"> <tr style="font-weight:bold"> <td>Name</td> <td>Vorname</td> <td>Straße</td> <td>Ort</td> </tr> <tr> <td>Schmidt</td> <td>Thomas</td> <td>Auf der Marta 1</td> <td>58452 Witten</td> </tr> <table>

  49. HTML - Tabellen - Zellenabstand cellspacing=0 cellspacing=10 <table border="1" cellpadding="6" cellspacing= "10"> <tr style="font-weight:bold"> <td>Name</td> <td>Vorname</td> <td>Straße</td> <td>Ort</td> </tr> <tr> <td>Schmidt</td> <td>Thomas</td> <td>Auf der Marta 1</td> <td>58452 Witten</td> </tr> <table>

  50. HTML - Tabellen - Größe und Ausrichtung <table border="1" cellpadding="6" cellspacing="0" style="width:700px" align="center"> <tr style="font-weight:bold"> <td>Name</td> <td>Vorname</td> <td>Straße</td> <td>Ort</td> </tr> <tr> <td>Schmidt</td> <td>Thomas</td> <td>Auf der Marta 1</td> <td>58452 Witten</td> </tr> <table>

More Related