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.
Une image / un lien ci-dessous est fourni (tel quel) pour télécharger la présentation
Politique de téléchargement : le contenu du site vous est fourni TEL QUEL pour votre information et votre usage personnel ; il ne peut être vendu, concédé sous licence ni partagé sur d’autres sites sans l’accord de son auteur.Le contenu vous est fourni TEL QUEL, pour votre information et votre usage personnel uniquement.Téléchargez la présentation en cliquant sur ce lien.Lors du téléchargement, si vous ne parvenez pas à télécharger une présentation, l’éditeur a peut-être supprimé le fichier de son serveur.Pendant le téléchargement, si vous ne parvenez pas à obtenir une présentation, le fichier a peut-être été supprimé par l’éditeur.
F I N
Plus de contenu associé
Transcription de la présentation
Computer AG 2008/2009 Schiller-Gymnasium Witten Thomas Schmidt Oktober 2008
Ziele der Computer-AG • HTML lernen • Eigene Web-Seiten erstellen • JavaScript lernen
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
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
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>
HTML - Grundlagen - <html> Jede HTML-Seite ist in das Tag-Paar <html> ... </html> eingefasst <html> hier stehen alle Informationen der Seite...</html>
HTML - Grundlagen - <body> und <head> Jede Seite verfügt mindestens über die Tags <head> und <body> <html><head> ... Kopfinformation ... </head><body> ... Seiteninformation ... </body></html>
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>
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>
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>
HTML - Listen <body> <h1>Zutaten für Zabajone</h1> <ul> <li>Marsala (Italienischer Süßwein)</li> <li>Eier</li> <li>Zucker</li> </ul> </body>
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>
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>
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
HTML - Styles Styles dienen der optischen Gestaltung von Seiten • Schriften • Farben • Optische Gestaltung • Positionierung Styles haben keinen Einfluss auf Inhalte und Funktionen!
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">
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.
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.
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>
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
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
Beispiel Klasse Hintergrundfarbe Schriftart Innenabstand Rand HTML - Style-Klassen Wenn man ein Design mehrfach benötigt,kann man verschiedene Styles zu einer Klasse gruppieren.
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; ...}
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>
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
