Workshop HTML, CSS Javascript
|
|
|
- Frida Baumann
- vor 7 Jahren
- Abrufe
Transkript
1 Workshop HTML, CSS Javascript Wien, April 2002 Bettina Kann
2 Inhalt: 1. Frames 3 2. BEREICHE <DIV-TAG> 7 3. CSS - Eine Einführung 9 4. Javascript-Einführung 16 2
3 1. Frames 1.1. Framesets Mit Hilfe von Frames können Sie den Anzeigebereich des Browsers in verschiedene, frei definierbare Segmente aufteilen. Jedes Segment kann eigene Inhalte enthalten. Die einzelnen Anzeigesegmente (also die Frames) können wahlweise einen statischen Inhalt (= "non scrolling regions") oder einen wechselnden Inhalt haben. Verweise in einem Frame können Dateien aufrufen, die dann in einem anderen Frame angezeigt werden. Frames werden ab Netscape 2.0 und ab MS Internet Explorer 3.0 unterstützt. Seit HTML 4.0 gehören die Frames auch zum offiziellen HTML-Standard. Die nebenstehende Abbildung zeigt ein typisches Beispiel für Frames Sie stellt den Inhalt des gesamten Anzeigefensters des Browsers schematisch dar. Das Anzeigefenster ist in drei unabhängige Bereiche aufgeteilt. Die Verweise links und unten können beispielsweise immer eingeblendet bleiben, während sich der Inhalt des Hauptfensters je nach ausgewähltem Verweis ändern kann. Dabei werden im Beispiel der Abbildung immer drei verschiedene HTML-Dateien gleichzeitig angezeigt: links und unten immer die gleiche Datei, im Hauptfenster jeweils eine wechselnde Datei, je nach ausgewähltem Verweis. Wenn Sie in einer HTML-Datei ein Frame-Set definieren, sieht das Grundgerüst der HTML-Datei folgendermaßen aus: <html> <head> <title>frame-test</title> </head> <frameset...>... Frame-Definitionen... </frameset> <body> Dieser Text wird angezeigt, wenn der Browser keine Frames kennt </body> </html> Beim Definieren von Frame-Sets bestimmen Sie, wie das Anzeigefenster aufgeteilt werden soll. Bsp.1: <frameset rows="20%,80%">... Dadurch ergeben sich zwei Frames, deren Inhalt hier bestimmt wird... </frameset> 3
4 Bsp. 2: <frameset cols="200,*">... Dadurch ergeben sich zwei Frames, deren Inhalt hier bestimmt wird... </frameset> Bsp.3: <frameset cols="40%,60%">... Zwei Frames, wobei der Inhalt des ersten Frames hier bestimmt wird... <frameset rows="20%,80%">... Noch mal zwei Frames, deren Inhalt hier bestimmt wird... </frameset> </frameset> Nachdem Sie durch die Definition von Frame-Sets geeignete Bereiche des Anzeigefensters bestimmt haben, geben Sie mit der Definition der Frames an, welche HTML-Dateien in den einzelnen Bereichen zunächst angezeigt werden sollen. <frameset cols="40%,60%"> <frame src="verweise.htm" name="linkesfenster"> <frameset rows="20%,80%"> <frame src="titel.htm" name="hauptfenster"> <frame src="control.htm" name="unteresfenster"> </frameset> </frameset> Ferner sollten Sie für jeden definierten Frame mit name= einen Namen vergeben. Diese Namen brauchen Sie, um Verweise zu anderen Frames zu definieren. Namen für Frames müssen in Anführungszeichen stehen, dürfen nicht zu lang sein und nur aus Buchstaben, Ziffern und Unterstrichen bestehen. Folgende Namen haben eine spezielle Bedeutung und dürfen nicht als normale Fensternamen verwendet werden: _self, _blank, _parent und _top. Scrollbars (Bildlaufleisten) erzwingen/verhindern: <frame src="titel.htm" name="rechts" scrolling=yes> Durch die Angabe scrolling=yes im Definitions-Tag eines Frames erzwingen Sie, daß das Anzeigefenster des Frames in jedem Fall Scrollbars besitzt. Durch scrolling=no verhindern Sie dies. Mindestabstände zwischen Fensterrand und Fensterinhalt 4
5 <frame src="verweise.htm" name="links" marginwidth=0 marginheight=0> Durch das Attribut marginwidth= [Pixel] im Definitions-Tag eines Frames bestimmen Sie den Abstand zwischen rechtem bzw. linkem Fensterrand und dem Fensterinhalt (margin = Rand, width = Breite). Durch das Attribut marginheight= [Pixel] bestimmen Sie den Abstand zwischen oberem bzw. unterem Fensterrand und dem Fensterinhalt (height = Höhe). Linke und rechte Ränder sind immer gleich groß, ebenso obere und untere. Sie können zu beiden Werten Angaben machen, aber auch nur zu einem der beiden. Mit den Angaben marginwidth=0 marginheight=0 sollte der Fensterinhalt exakt in der linken oberen Ecke beginnen. Leider fügt Netscape bei der Anzeige doch immer noch ein Pixel "Seitenrand" ein. Unveränderbare Fenstergröße Bsp: <frame src="verweise.htm" name="links" noresize> Durch das Attribut noresize im Definitions-Tag eines Frames verhindern Sie, daß der Anwender die Größe des Frame-Fensters verändern kann Rahmendicke bzw. unsichtbare Fensterrahmen Um die Rahmen beim Internet Explorer und bei Netscape zu unterdrücken, müssen Sie alle drei Angaben frameborder=0 framespacing=0 border=0 notieren. Farbige Fensterrahmen <frameset cols="40%,60%" bordercolor=#ff0000> Mit der Angabe bordercolor= im obersten <frameset>-tag können Sie eine Rahmenfarbe für alle Fensterrahmen bestimmen. Verweise zu anderen Frames Wenn Sie mit Frame-Sets arbeiten, werden Sie häufig in einem Frame-Fenster Verweise anbieten wollen, bei derem Anklicken das Verweisziel in einem anderen Frame-Fenster angezeigt werden soll. Bsp. Teil 1 - Datei mit Frame-Definitionen: <html> <head> <title>verweise</title> </head> <frameset cols="200,*"> <frame src="verweise.htm" name="links"> <frame src="titel.htm" name="rechts"> </frameset> </html> Bsp. Teil 2 - Datei verweise.htm: <html> <head> <title>verweise</title> </head> <body> <a href="news.htm" target="rechts">neuigkeiten</a> </body> </html> Voraussetzung für Verweise zu anderen Frames ist, daß die Frame-Fenster eines Frame-Sets Namen erhalten. Im obigen Beispiel wird ein Frame-Set mit zwei Frame- 5
6 Fenstern definiert, die mit dem Attribut name= im <frame>-tag die Namen links und rechts erhalten. Für das Setzen eines Verweises zu einem anderen Frame-Fenster gilt das Schema für Verweise in HTML. Damit das Verweisziel in einem anderen Frame-Fenster angezeigt wird, notieren Sie im einleitenden Verweis-Tag zusätzlich das Atrribut target= (target = Ziel). Dahinter folgt der Name des Frame-Fensters, in dem das Verweisziel angezeigt werden soll. Der Name muß in Anführungszeichen stehen. Der Name, den Sie bei target= angeben, muß exakt mit dem Namen übereinstimmen, der bei der Frame-Definition mit name= vergeben wurde. Verweise, die ein Frame-Set beenden Wenn Sie mit Frame-Sets arbeiten, werden Sie in einem Frame-Fenster manchmal auch Verweise anbieten wollen, bei derem Anklicken das Verweisziel nicht mehr in Ihrem Frame-Set angezeigt werden soll. Besonders bei Verweisen zu fremden WWW-Projekten ist es angebracht, das eigene Frame-Set zu beenden. Dazu gibt es mehrere Möglichkeiten. target="_blank" bewirkt, daß das Verweisziel in einem neuen Instanzfenster des WWW-Browsers angezeigt wird. Das Anzeigefenster mit Ihrem Frame-Set bleibt im Hintergrund erhalten. Der Anwender kann wieder zu diesem Fenster wechseln, wenn er möchte. target="_parent" bewirkt, daß das Verweisziel in dem Zustand des Anzeigefensters angezeigt wird, der vor dem Start Ihres Frame-Sets aktuell war. target="_top" bewirkt, daß das Verweisziel in jedem Fall im gesamten Anzeigefenster angezeigt wird. 6
7 2. BEREICHE <DIV-TAG> Bereiche mit mehreren Elementen Bereiche mit mehreren Elementen definieren Sie können mehrere Absätze, bestehend aus ganz verschiedenen Elementen wie Text, Grafiken, Tabellen usw., in einen gemeinsamen Bereich einschließen. Diesen Bereich können Sie dann gemeinsam ausrichten. Beispiel: <div align=center> <h1>der Mond - eine Überschrift</h1> <img src="mond.jpg" align=middle> Ein Bild vom Mond <p>ein erklärender Text zum Mond, und alles wird zentriert</p> </div> <div align=right> <i>© 1997 by Josua Piesepampel</i> </div> Erläuterung: Mit <div> leiten Sie einen Bereich ein, in den Sie mehrere Elemente einschließen können (div = division = Bereich). Alles, was zwischen diesem Tag und dem abschließenden </div> steht, wird als Teil des Bereichs interpretiert. Einen solchen Bereich und alle seine enthaltenen Elemente können Sie mit dem Atrribut align= im einleitenden <div>-tag ausrichten. Mit align=center richten Sie den Bereich mit allen seinen Elementen zentriert aus (align = Ausrichtung, center = zentriert), mit align=right rechtsbündig (right = rechts). Mit align=justify werden innere Elemente wie freistehender Text, Textabsätze oder Überschriften als Blocksatz ausgerichtet. Mit align=left erzwingen Sie die linksbündige Ausrichtung von Elementen (Voreinstellung). Weitere Möglichkeiten Wenn Sie HTML bereits etwas besser kennen, probieren Sie auch mal die Möglichkeiten aus, die Ihnen CSS Style-Sheets bieten. Denn gerade das sehr allgemeine <div>-tag ist geradezu prädestiniert dafür, um mit Hilfe von Style-Sheets zum Leben erweckt zu werden. Dazu müssen Sie zunächst wissen, wie man Style-Sheets definieren kann. Anschließend sind Sie in der Lage, Style-Sheet-Angaben anzuwenden. Auf das <div>-tag können Sie beispielsweise folgende Style-Sheet- Angaben anwenden: Schriftformatierung 7
8 Abstände, Ränder, Ausrichtung Rahmen und Innenabstände Hintergrundfarben und -bilder Elemente positionieren Mehrspaltiger Textfluß 8
9 3. CSS - Eine Einführung Style Sheets CSS (Cascading Style Sheets) ist ein W3 Standard, der es erlaubt, HTML-Elemente exakt zu formatieren. Die CSS-Sprache klinkt sich nahtlos in HTML ein und ermöglicht es, das Aussehen von Absätzen, Tabellen oder Ähnlichem nach Belieben zu gestalten. Egal, ob man nur einmal einen auffälligen Schriftzug ohne Grafik gestalten will oder ein einheitliches Layout für hunderte von Webseiten braucht, dafür ist CSS eine ideale Ergänzung zu HTML. Möglichkeit 1: Style-Definitionen im Head der Html-Datei: Sie können innerhalb einer HTML-Datei einen Bereich für Style-Sheet-Angaben definieren. <html> <head> <title>titel der Datei</title> <style type="text/css"> /*... Style-Sheet-Angaben... */ </style> </head> <body> </body> </html> Die Style-Definitionen werden durch das <style>-tag eingeleitet. wichtig ist das Attribut type="text/css". Das ist der Mime-Typ für CSS; der Browser weiß dadurch, daß die folgenden Style-Definitionen zur CSS-Sprache gehören. Zwischen dem einleitenden Tag und dem abschließenden </style> können Sie dann die eigentlichen Style-Sheet-Angaben definieren. Es ist sinnvoll die Angaben in einen mehrzeiligen HTML-Kommentar mit und dem End-Tag einzubinden. Möglichkeit 2: Style-Definitionen in einer separaten Datei: In vielen Fällen werden Sie einheitliche Formate für alle HTML-Dateien Ihres Projekts haben wollen. In diesem Fall brauchen Sie die Angaben nicht in jeder Datei zu wiederholen. Stattdessen können Sie die Style-Sheet-Angaben in einer separaten Textdatei notieren und diese Datei einfach in jeder gewünschten HTML-Datei 9
10 einbinden. Wenn Sie die Angaben in der separaten Datei ändern, wirken sich die Änderungen einheitlich auf alle Dateien aus, in denen diese separate Datei eingebunden ist. <html> <head> <title>titel der Datei</title> <link rel=stylesheet type="text/css" href="formate.css"> <style type="text/css">... Extra-Style-Sheet-Angaben... </style> </head> <body> </body> </html> Mit dem HTML-Tag <link...> wird eine Datei referenziert, die Style-Sheet-Angaben enthält. Innerhalb dieses Befehls sollten immer die Angaben rel=stylesheet type="text/css" stehen (rel = relation= Bezug, type = Typ). Mit href= können Sie die gewünschte Datei angeben.wenn sich die CSS-Datei in einem anderen Verzeichnis oder auf einem anderen Server befindet, müssen Sie mit relativen Pfadangaben oder absoluten URL-Adressen arbeiten. Bei der referenzierten Datei muß es sich um eine reine Textdatei handeln, die die Endung.css haben sollte. Die Datei sollte nichts anderes als Formatdefinitionen enthalten, also auch keine HTML-Befehle. Möglichkeit 3: Style-Definitionen "on the fly" = Einzelne HTML-Tags formatieren <html> <head> <title>titel der Datei</title> </head> <body> <div style="background-color:#ffffe0"> <h1 style="color:red; font-size:36pt;">überschrift 1. Ordnung</h1> <p style="margin-left:1.5cm;">ein Textabsatz</p> </div> </body> </html> 10
11 Formate für HTML-Tags definieren <html> <head> <title>titel der Datei</title> <style type="text/css"> h1 { font-size:48pt; color:#ff0000; font-style:italic; } p,li { font-size:12pt; line-height:14pt; font-family:helvetica,arial; letter-spacing:0.2mm; word-spacing:0.8mm; } </style> </head> <body> <h1>überschrift 1. Ordnung</h1> <p>ein normaler Textabsatz</p> <ul> <li>ein Listenpunkt <li>ein anderer Listenpunkt </ul> </body> </html> Im obigen Beispiel werden die HTML-Tags h1(überschrift 1. Ordnung), p (Textabsatz) und li (Listeneintrag) formatiert. Wenn Sie gleichartige Formate für mehrere HTML-Tags definieren wollen, geben Sie alle gewünschten Tags an und trennen Sie diese durch Kommata, so wie im obigen Beispiel p,li. Es bedeutet also das gleiche: h1 { font-family:helvetica } h2 { font-family:helvetica } oder: h1, h2 { font-family: Helvetica } Dahinter folgen die dazugehörigen, gewünschten Formatdefinitionen, und zwar in geschweiften Klammern. Innerhalb solcher geschweifter Klammern können Sie eine oder mehrere Formateigenschaften definieren. Jede Eigenschaftszuweisung besteht aus einem Namen, z.b. color und einem Wert, z.b. #FF0000, getrennt durch einen Doppelpunkt. Schließen Sie jede Formatdefinition jeweils durch einen Strichpunkt ab. Nur bei der letzten Formatdefinition vor der abschließenden geschweiften Klammer darf der Strichpunkt entfallen. Maßeinheiten, Farbangaben, feste Angaben für Style-Sheets Numerische Angaben Bei allen numerischen Angaben innerhalb von CSS-Style-Sheets, also etwa bei Schriftgrößen, Absatzabständen oder Rändern, stehen alle weit verbreiteten Maßeinheiten zur Verfügung. Dabei sind absolute Angaben (z.b. Millimeter) und relative Angaben (z.b. Prozent gegenüber "normal") möglich. 11
12 Absolute Angaben: pt für Punkt (= 1/72 inches) pc für Pica (= 12 Punkt) in für Inch (= 2,54 cm) mm für Millimeter cm für Zentimeter Relative Angaben: em für "bezogen auf elementeigene Schrifthöhe" ex für "bezogen auf elementeigene Höhe des Buchstabens x" px für Pixel (relative Angabe im Hinblick auf die unterschiedlichen Bildschirmauflösungen bei den Anwendern) % für Prozent gegenüber Elementnorm Benutzen Sie bei numerischen Bruchzahlen stets den Punkt als Dezimalzeichen!!!!! Farbangaben Sie können Farbwerte hexadezimal nach dem Schema #XXXXXX angeben, aber auch die verbreiteten Farbnamen verwenden bzw. die Angaben nach dem rgb- Schema machen. rgb(rrr,ggg,bbb). Hintergrundfarbe: background-color:#xxxxxx Hintergrundgrafik: background-image:url([dateiname]) Mit background-position: können Sie festlegen, wo die linke obere Ecke der Hintergrundgrafik sein soll. Bezugspunkt ist das HTML-Element, für das die Hintergrundgrafik definiert wird. Pseudo-Formate für Verweise (:link, :visited, :active) <style type="text/css"> a:link { color:#ff0000; font-weight:bold } a:visited { color:#990000; } a:active { color:#0000ff; font-style:italic } </style> 12
13 Klassen <style type="text/css"> p.default {font-size:12pt;color:black;} p.help {font-size:10pt;color:blue;} p.hervorgehoben {font-size:16pt;color:red;} </style> In obigem Bsp. ist p die Klasse, dann folgt ein Punkt und dahinter der Name für die Unterklasse, der frei wählbar ist. Diese Klassen/Unterklassen werden dann im HTML- Dokument wie folgt angesprochen: <body> <p class="default">da kommt der Standardabsatz</p> <p class="help">hier steht der Hilfetext</p> <p class="hervorgehoben">hervorgehobener Textabsatz</p> </body> Definition einer leeren Klasse: <style type="text/css"> all.gelb {color:yellow;}.gruen {color:green;} </style> Eine leere Klasse wird mit all. und dem frei wählbaren Klassennamen definiert. In der geschweiften Klammer notieren Sie die Formatierung. Das Schlüsselwort "all" kann man auch weglassen, also statt all.gruen reicht auch.gruen. Diese Formatierung, die einer leeren Klasse übergeben wird, kann man dann auf jedes beliebige HTML- Tag anwenden. <body> <h1 class="gelb">gelbe Überschrift</h1> <h2 class="gruen">grüne Überschrift</h2> </body> 13
14 Abhängige Formate: Man kann mit Style-Sheets bestimmen, daß ein HTML-Tag bestimmte Eigenschaften nur dann annimmt, wenn es innerhalb eines anderen Tags vorkommt. Im folg. Bsp. wird definiert, daß <i> </i> innerhalb von Überschriften nicht kursiv sondern blau dargestellt wird, während der gleiche Befehl innerhalb anderer Tags weiterhin kursiv dargestellt wird. <style type="text/css"> h1 {color:red;} h1 i {color:blue;font-weight:normal;} </style> Rekurs: Das <DIV>-Tag: Sie können mehrere Absätze, bestehend aus ganz verschiedenen Elementen wie Text, Grafiken, Tabellen usw., in einen gemeinsamen Bereich einschließen. Diesen Bereich können Sie dann gemeinsam ausrichten. Mit <div> leiten Sie einen Bereich ein, in den Sie mehrere Elemente einschließen können (div = division = Bereich). Alles, was zwischen diesem Tag und dem abschließenden </div> steht, wird als Teil des Bereichs interpretiert. Bereiche mit <span> formatieren <html> <head> <title>titel der Datei</title> </head> <body> <h1>überschrift 1. Ordnung mit <span style="color:blue;">blauem Text</span></h1> <p>normaler Textabsatz mit <span style="font-style:italic; color:red;">rotem kursiven Text</span></p> </body> </html> Mit <span style=...>... </span> können Sie Textabschnitte innerhalb anderer HTML- Tags nach Belieben formatieren. Positionieren von Elementen Ab der CSS-Version 2.0 gibt es verschiedene Style-Sheet-Angaben, um Elemente einer WWW-Seite exakt im Anzeigefenster des WWW-Browsers zu positionieren und die Position von Elementen untereinander genau zu kontrollieren. Dazu gehören Angaben zum absoluten 14
15 und relativen Positionieren von Elementen, Angaben zur Ausdehnung von Elementen, Angaben zum Umfließen von Elementen und Angaben zum Überlappen und Anzeigen von Elementen. Absolutes und relatives Positionieren von Elementen bietet die Möglichkeit, das Erscheinungsbild von WWW-Seiten stärker bildschirmorientiert zu gestalten. So können Sie für einzelne Bereiche festlegen, wo genau diese Bereiche beginnen sollen. Bereiche können sich überlappen usw. <div style="position:absolute; top:100px; left:45px; width:300px">inhalt</div> Mit position: können Sie die Positionsart bestimmen. Folgende Angaben sind erlaubt: absolute = absolute Positionierung, gemessen am Fensterrand, aber scrollbar. relative = relative Positionierung, gemessen am Vorgänger-Element. static = keine spezielle Positionierung, normaler Elementfluß (Normaleinstellung). Schichtposition bei Überlappung (z-index) Diese Angabe ist sinnvoll in Verbindung mit mehreren Angaben zur Positionierung (position). Wenn Sie mehrere Elemente absolut positionieren, deren Anzeigebereiche sich überlappen, werden die Elemente normalerweise in der Reihenfolge übereinander angezeigt, in der sie definiert werden. Sie können die Reihenfolge ändern, indem Sie für die einzelnen Elemente Nummern vergeben. Elemente mit höherer Nummer überdecken Elemente mit niedrigerer Nummer. <div style="position:absolute; top:10mm; left:10mm; z-index:1"> Dieser Text kommt als dritter </div> <div style="position:absolute; top:12mm; left:20mm; z-index:3"> Dieser Text kommt als erster </div> <div style="position:absolute; top:14mm; left:30mm; z-index:2"> Dieser Text kommt als zweiter </div> Mit z-index: können Sie die Reihenfolge von überlappenden Elementen bestimmen. 15
16 4. Javascript-Einführung JavaScript ist kein direkter Bestandteil von HTML, sondern eine eigene Sprache. Diese Sprache wurde jedoch eigens zu dem Zweck geschaffen, HTML-Autoren ein Werkzeug in die Hand zu geben, mit dessen Hilfe sich WWW-Seiten optimieren lassen. JavaScript-Programme werden wahlweise direkt in der HTML-Datei oder in separaten Dateien notiert. Sie werden nicht - wie etwa Java-Programme - compiliert, sondern als Quelltext zur Laufzeit interpretiert, also ähnlich wie Batchdateien bzw. Shellscripts. Dazu besitzen moderne WWW-Browser wie Netscape oder Microsoft Internet Explorer entsprechende Interpreter-Software. Bevor Sie daran gehen, neuen, eigenen JavaScript-Code zu programmieren, müssen Sie sich exakt darüber im klaren sein, welches Problem Sie damit lösen wollen. Dazu müssen Sie erst einmal wissen, was man mit HTML selbst alles machen kann, und wo die Grenzen von HTML liegen. Von JavaScript müssen Sie dann so viel wissen, daß Sie entscheiden können, ob das Problem mit JavaScript überhaupt lösbar ist. Mit JavaScript können Sie z.b. nicht die typischen Aufgaben von CGI-Scripts lösen! Ferner sollten Sie sich im WWW umsehen, ob es nicht schon frei verfügbare JavaScript-Beispiele gibt, die genau Ihr Problem lösen. Denn es ist immer besser, auf Code zurückzugreifen, der sich in der Praxis bereits bewährt hat, als neuen Code zu erstellen, dessen "heimliche Tücken" einem noch nicht bekannt sind. In vielen Fällen genügt es, vorhandene JavaScripts den eigenen Erfordernissen anzupassen. JavaScript-Bereiche in HTML definieren Für JavaScript-Programmabschnitte können Sie in HTML Bereiche definieren. <html><head><title>test</title> <script language="javascript"> </script> </head><body> </body></html> Mit <script language="javascript"> leiten Sie einen Bereich für JavaScript innerhalb einer HTML-Datei ein (script = Quelltext, language = Sprache). Dahinter - am besten in der nächsten Zeile - sollten Sie mit einen Kommentar einleiten. Dadurch erreichen Sie, daß ältere WWW-Browser, die JavaScript nicht kennen, den folgenden JavaScript-Code ignorieren und nicht irrtümlich als Text innerhalb der HTML-Datei interpretieren. Am Ende eines JavaScript-Bereichs schließen Sie mit den Kommentar und mit </script> den Bereich für den Programmcode. Unser erstes Javascript: <html><head><title>test</title> <script language="javascript"> window.alert("hallo Welt!"); 16
17 </script> </head><body> </body></html> Im obigen Beispiel wird mit Hilfe von JavaScript ein Meldungsfenster mit dem Text "Hallo Welt!" am Bildschirm ausgegeben. Anweisungen notieren: Eine Anweisung in JavaScript besteht immer aus einem Befehl, der mit einem Strichpunkt ; abgeschlossen wird. Objekte, Eigenschaften und Methoden Objekte sind fest umgrenzte Datenelemente mit Eigenschaften und oft auch mit objektgebundenen Funktionen (Methoden). Daß JavaScript eine Erweiterung von HTML darstellt, liegt vor allem an den vordefinierten Objekten, die Ihnen in JavaScript zur Verfügungstehen. Ein Objekt kann eine Teilmenge eines übergeordneten Objekts sein. Die JavaScript-Objekte sind deshalb in einer Hierarchie geordnet. Das hierarchiehöchste Objekt ist in JavaScript das Fenster- Objekt (window). Fenster haben Eigenschaften wie einen Titel, eine Größe usw. Der Inhalt eines Fensters ist das nächstniedrigere Objekt, nämlich das im Fenster angezeigte Dokument (in JavaScript das Objekt document). In der Regel ist der Fensterinhalt eine HTML-Datei. Eine solche Datei kann bestimmte, durch HTML- Tags definierte Elemente enthalten, wie zum Beispiel Formulare, Verweise, Grafikreferenzen usw. Für solche untergeordneten Elemente gibt es wieder eigene JavaScript-Objekte, zum Beispiel das Objekt forms für Formulare. Ein Formular besteht seinerseits aus verschiedenen Elementen, zum Beispiel aus Eingabefeldern, Auswahllisten oder Buttons zum Absenden bzw. Abbrechen. In JavaScript gibt es dafür ein Objekt elements, mit dem Sie einzelne Felder und andere Elemente innerhalb eines Formulars ansprechen können. Objekteigenschaften sprechen Sie an, indem Sie zuerst den Namen des Objekts notieren, dahinter einen Punkt, und dahinter den Namen der Eigenschaft. Dabei sind keine Leerzeichen erlaubt! Objekten können Methoden haben. Das sind Funktionen, die Aktionen ausführen, aber im Gegensatz zu alleinstehenden Funktionen an ein bestimmtes Objekt gebunden sind. Viele vordefinierte JavaScript-Objekte haben Methoden. In unserem Beispiel ist alert die Methode zum window-objekt. Funktion definieren Mit Hilfe von Funktionen können Sie eigene, in sich abgeschlossene JavaScript- Prozeduren programmieren, die Sie dann über den Aufruf der Funktion ausführen können. Dabei können Sie bestimmen, bei welchem Ereignis (zum Beispiel, wenn der Anwender einen Button anklickt) die Funktion aufgerufen und ihr Programmcode ausgeführt wird. JavaScript-Code, der nicht innerhalb einer Funktion steht, wird beim Einlesen der Datei vom WWW-Browser sofort ausgeführt! Eine Funktion ist ein Anweisungsblock. Ein Anweisungsblock wird durch eine öffnende geschweifte Klammer { begonnen und durch eine schließende geschweifte Klammer } beendet. Jede Anweisung muß durch ; abgeschlossen werden. 17
18 Unser erstes Script wird erweitert: <html><head><title>test</title> <script language="javascript"> function Ergebnis() { window.alert(document.eingabeformular.feld1.value); } </script> </head><body>unser erstes Script wird erweitert <form name="eingabeformular"> <input type="text" name=feld1> <input type="button" name="button" value="stringausgabe" onclick="ergebnis()"> </form> </body></html> Event-Handler: Event-Handler erkennen Sie daran, daß solche HTML-Attribute immer mit on beginnen, zum Beispiel onclick=. Hinter dem Istgleichzeichen notieren Sie - in Anführungszeichen, eine JavaScript-Anweisung. Wenn Sie mehrere Anweisungen ausführen wollen, dann definieren Sie sich dazu am besten in einem JavaScript- Bereich eine Funktion und rufen hinter dem Istgleichzeichen diese Funktion auf, also z.b.onclick="ergebnis()". Jeder Event-Handler steht für ein bestimmtes Anwenderereignis, onclick= etwa für das Ereignis "Anwender hat mit der Maus geklickt". Der Anzeigebereich des HTML- Elements, in dem der Event-Handler notiert ist, ist das auslösende Element dabei. Wenn der Event-Handler onclick= beispielsweise in einem Formularbutton notiert wird, wird der damit verknüpfte JavaScript-Code nur dann ausgeführt, wenn der Mausklick im Anzeigebereich dieses Elements erfolgt. Die Formularüberprüfung: Beispiel: <html><head><title>test</title> <script language="javascript"> function Ergebnis() { if (document.eingabeformular.feld1.value=="") { window.alert("sie haben nichts eingegeben"); } else { window.alert(document.eingabeformular.feld1.value); } } </script> </head><body>unser erstes Script wird erweitert <form name="eingabeformular"> <input type="text" name=feld1> <input type="button" name="button" value="stringausgabe" onclick="ergebnis()"> </form> </body></html> 18
19 Die if/else Bedingung: Mit if leiten Sie eine Wenn-Dann-Bedingung ein (if = wenn). Dahinter folgt, in Klammern stehend, die Formulierung der Bedingung. Um solche Bedingungen zu formulieren, brauchen Sie Vergleichsoperatoren und in den meisten Fällen auch Variablen. Für Fälle, in denen die Bedingung nicht erfüllt ist, können Sie einen "andernfalls"-zweig definieren. Dies geschieht durch else (else = sonst). Der Else-Zweig ist nicht zwingend erforderlich. Wenn Sie mehr als eine Anweisung unterhalb und abhängig von if oder else notieren wollen, müssen Sie die Anweisungen in geschweifte Klammern einschließen. Variablen: Variablen sind Speicherbereiche, in denen Sie Daten, die Sie im Laufe Ihrer Programmprozeduren benötigen, speichern können. Der Inhalt, der in einer Variablen gespeichert ist, wird als "Wert" bezeichnet. Sie können den Wert einer Variablen jederzeit ändern. Um mit Variablen arbeiten zu können, müssen Sie die benötigten Variablen zuerst definieren. <html><head><title>test</title> <script language="javascript"> function Ergebnis() { var Meinezahl; Meinezahl=parseInt(document.Eingabeformular.Feld1.value); window.alert(meinezahl*2); } </script> </head><body>unser erstes Script wird erweitert <form name="eingabeformular"> <input type="text" name=feld1> <input type="button" name="button" value="berechnung" onclick="ergebnis()"> </form> </body></html> 19
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...
Inhalt HTML 2. Applets Frames Formulare CSS cascading style sheets. Lehrveranstaltung Internet in AT Dr.-Ing. A. Braune TECHNISCHE UNIVERSITÄT DRESDEN
Inhalt HTML 2 Applets Frames Formulare CSS cascading style sheets SS 06 1 Applets Das Applet Java Applets sind kleine Java-Programme mit deren Hilfe aktive Webseiten erstellt werden können. werden mit
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...
Was ist ein Frame? Frames teilen Browser-Fenster in rechteckige Bereiche. Mehrere Web-Seiten können. Web-Seite wird langsamer geladen
Was ist ein Frame? Frames teilen Browser-Fenster in rechteckige Bereiche. Mehrere Web-Seiten können gleichzeitig angezeigt werden unabhängig voneinander gesteuert werden Web-Seite wird langsamer geladen
Digitale Medien. Übung
Digitale Medien Übung Pfadangaben Pfadangaben sind relevant für Bilder, Verweise, Medienobjekte per URL: Protokoll : / lokalernetzwerkname / Hostname : Port / Pfad http://www.mimuc.de/ http:/arbeitsgruppe/www.mimuc.de:8080
Kennen, können, beherrschen lernen was gebraucht wird
Inhaltsverzeichnis Inhaltsverzeichnis... 1 Tags (Befehle)... 1 Erste Texte im Browser... 2 Das HTML Grundgerüst... 2 Ihre erste echte Webseite... 2 Texte... 3 Textabsatz und Zeilenumbruch... 3 Einen Zeilenumbruch
7 Allgemeines zu Objekten
7 Bisher haben Sie in diesem JavaScript-Kurs Elemente der klassischen Programmierung wie Bedingungen, Schleifen etc. kennen gelernt. JavaScript bietet aber außerdem einen modernen objektorientierten Ansatz,
CSS - Cascading Style Sheets
CSS - Cascading Style Sheets HTML ist die Struktur, CSS ist das Design Eigenschaften von CSS: Definitionssprache zur Festlegung von Formateigenschaften von HTML-Elementen und/oder ganzer Seiten für unterschiedliche
E-Commerce: IT-Werkzeuge. Web-Programmierung. Kapitel 3: Webdesign mit CSS Stand: Übung WS 2015/2016. Benedikt Schumm M.Sc.
Übung WS 2015/2016 E-Commerce: IT-Werkzeuge Web-Programmierung Kapitel 3: Stand: 30.10.2015 Benedikt Schumm M.Sc. Lehrstuhl für ABWL und Wirtschaftsinformatik Katholische Universität Eichstätt-Ingolstadt
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
Formatierung eines Text Ads in CSS
Formatierung eines Text Ads in CSS Damit sich die Text Ads möglichst harmonisch in Ihre Webseite einfügen, haben Sie verschiedene Möglichkeiten Ihr Text Ad über CSS (Cascading Style Sheets) zu formatieren.
E-Commerce: IT-Werkzeuge. Web-Programmierung. Kapitel 4: Einführung in JavaScript Stand: 03.11.2014. Übung WS 2014/2015. Benedikt Schumm M.Sc.
Übung WS 2014/2015 E-Commerce: IT-Werkzeuge Web-Programmierung Kapitel 4: Stand: 03.11.2014 Benedikt Schumm M.Sc. Lehrstuhl für ABWL und Wirtschaftsinformatik Katholische Universität Eichstätt-Ingolstadt
Übung zur Vorlesung Digitale Medien. Sarah Tausch Alice Thudt Ludwig-Maximilians-Universität München Wintersemester 2012/2013
Übung zur Vorlesung Digitale Medien Sarah Tausch Alice Thudt Ludwig-Maximilians-Universität München Wintersemester 2012/2013 1 Pfadangaben (1) Pfadangaben sind relevant für Bilder, Verweise, Medienobjekte
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
Digitale Medien. Übung zur Vorlesung. Vorlesung: Heinrich Hußmann Übung: Renate Häuslschmid
Übung zur Vorlesung Digitale Medien Vorlesung: Heinrich Hußmann Übung: Renate Häuslschmid Wintersemester 2016/17 Cascading Style Sheets HTML beschreibt nur den logischen Aufbau eines Dokuments. Die Gestaltung
Grundlagen-Beispiel CSS
Grundlagen-Beispiel CSS Öffne im Ordner 2.css.uebung die vorhanden Dateien index.html und erstelle eine neue CSS-Datei mit dem Namen bildschirm.css. Füge im Bereich folgende Verlinkung ein:
Digitale Medien Vergangene Vorlesungen. Style-/Formatangaben. Style Angabe für jedes HTML-Element einfachster Fall: style-attribut
Vergangene Vorlesungen Digitale Medien HTML Grundlagen Wichtige HTML Elemente 4. STYLESHEETS, CSS Heute: Anwendung Beispiele Trennung von Inhalt und Layout Oder: Woher weiß der Browser wie eine Seite darzustellen
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
Interne Verweise = Links innerhalb eines Homepage-Projekts
Allgemeines zu Verweisen Verweise sind ein entscheidender Bestandteil jedes Hypertext-Projekts und der "intelligente Mehrwert" des World Wide Web. Mit Hilfe von Verweisen strukturieren Sie Ihr Projekt!
Die Programmiersprache des Webs. HTML HyperText Markup Language Hypertext - Auszeichnungssprache
Was ist HTML? Die Programmiersprache des Webs HTML HyperText Markup Language Hypertext - Auszeichnungssprache Dateiname Man muss Groß/Kleinschreibung beachten Leerzeichen ist nicht erlaubt Umlaute wie
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:
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
Allgemeine Technologien II Wintersemester 2011 / November 2011 CSS
Allgemeine Technologien II Wintersemester 2011 / 2012 28. November 2011 CSS Themen 28.11.2011 Cascading Style Sheets CSS CSS einbinden Inline-Styles CSS im Dokumentkopf Externe Stylesheets Konzepte Typen-,
ANWENDUNGSSOFTWARE CSS
ANWENDUNGSSOFTWARE CSS NAVIGATION Bilder zur Navigation: als Anker für Verweise benutzen Text sollte nicht Bestandteil des Bildes sein (Bild als Hintergrund), siehe z-index Navigationslisten mit ,
HTML - Grundbegriffe. Informatik 1 für Nebenfachstudierende Grundmodul. Kai-Steffen Hielscher Folienversion: 23. November 2016
Informatik 1 für Nebenfachstudierende Grundmodul HTML - Grundbegriffe Kai-Steffen Hielscher Folienversion: 23. November 2016 Informatik 7 Rechnernetze und Kommunikationssysteme Inhaltsübersicht Kapitel
Richtlinien für das Design der KML Webseite. KML TP2, Informationsdienste
Richtlinien für das Design der KML Webseite KML TP2, Informationsdienste Inhaltsverzeichnis 1. Einleitung...1 2. Textgestaltung...1 2.1. Absätze...1 2.2. Überschriften...2 2.3. Grafiken...2 3. Besondere
Inhalt. Seite 1 von 14
Seite 1 von 14 Inhalt 1. Php ansprechen... 2 2. html... 3 3. Weitere Formatierungen in html... 5 4. Tabellen mit html... 6 a. Grundstrukturen... 6 b. Tabellen formatieren... 11 Seite 2 von 14 1. Php ansprechen
ALLGEMEINES WOMIT KANN ICH WEBSITES ERSTELLEN?
HTML AG INHALT Allgemeines... 2 Womit kann ich Websites erstellen?... 2 Grundgerüst von HTML... 3 Tags und Attribute... 3 Links... 4 Links auf andere Seiten... 4 Bilder... 5 meta-tags... 5 Webseiten mit
JavaScript II. Hochschule Karlsruhe Technik & Wirtschaft Internet-Technologien T3B250 SS2014 Prof. Dipl.-Ing. Martin Schober
JavaScript II Bildaustausch mit dem Attribut name und zwei Funktionen function asterix() { document.images1.src="bilder/asterix.jpg"; function obelix() { document.images1.src="bilder/obelix.jpg";
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
Introduction to Technologies for Interaction Design. Stylesheets
Introduction to Technologies for Interaction Design Stylesheets Syntax Selektor und Eigenschaften Selektor bezieht sich auf ein HTML-Element ID-Selektoren dürfen in jeder HTML-Datei nur einmal vorkommen
Funktionen in JavaScript
Funktionen in JavaScript Eine Funktion enthält gebündelten Code, der sich in dieser Form wiederverwenden lässt. Mithilfe von Funktionen kann man denselben Code von mehreren Stellen des Programms aus aufrufen.
Übung: Bootstrap - Navbar
Übung: Bootstrap - Navbar Angaben befinden sich im Ordner: 5_Übung_nav. Darin befinden sich die Bootstrap-Ordner und die dazu passende index.html, die bereits die Links zu den Ordnern enthält. Aufgabe:
CSS - Cascading Stylesheets
CSS - Cascading Stylesheets Alfred Beringer HTBLVA für Textilindustrie und Datenverarbeitung Alfred Beringer 1 Überblick Kurze Einführung Deklarationen Selektoren Beispiele Alfred Beringer 2 CSS Formatierungssprache
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
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
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
3. Briefing zur Übung IT-Systeme
3. Briefing zur Übung IT-Systeme - Einführung in HTML, CSS und JavaScript Fragestunde, 30.11.2016, PC Pool Stand und Ausblick Einführung: 18.10.2016, 12.00 Uhr (c.t.), HS 4/PC Pool Fragestunde: 09.11.2016,
HTML Kurs für Anfänger. alfabm
HTML Kurs für Anfänger alfabm 2011 1 Das Grundgerüst einer HTML Seite Jede HTML-Seite sollte mindestens folgendes Grundgerüst besitzen: Dies ist der einleitende Tag, der dem Browser darauf hinweist,
jetzt lerne ich Webseiten programmieren und gestalten Einfache Beispiele mit HTML, CSS, Javascript, ASP und PHP
jetzt lerne ich Webseiten programmieren und gestalten Einfache Beispiele mit HTML, CSS, Javascript, ASP und PHP CHRISTIAN WENZ TOBIAS HAUSER KAPITEL 3 CSS anwenden jetzt lerne ich Style-Sheets sind heute
HTML. Hypertext Markup Language
HTML Hypertext Markup Language Begriff Markup Begriff aus Druckindustrie: Layouter fügt Anmerkungen/Markierungen (Tags) hinzu Markup-Languge (ML) = Auszeichnungssprache Beispiele a) das Wort wird fett
Unterschied zwischen HTML & XHTML?
Tutorium Webdesign von Maria Lechner Unterschied zwischen HTML & XHTML? HTML HyperText Markup Language (Hypertext-Auszeichnungssprache) SGML-basierte HTML XHTML Extensible HyperText Markup Language (erweiterbare
CSS-Klassen am Beispiel von List-Definitionen
CSS-Klassen am Beispiel von List-Definitionen Jobst-Hartmut Lüddecke 10. Oktober 2011 Zusammenfassung Es werden verschiedene CSS-Definitionen für den Tag vorgestellt. Diese CSS-Definitionen sollten
7 Tabellen. 7.1 Erstellen einer Tabelle. - übersichtliches Gestalten von Websites - enorme Steigerung der Layoutmöglichkeiten durch Tabellen
1 7 Tabellen - übersichtliches Gestalten von Websites - enorme Steigerung der Layoutmöglichkeiten durch Tabellen 7.1 Erstellen einer Tabelle Syntax: Inhalt1 Inhalt2 Kommentar
Web-basierte Anwendungssysteme XHTML- CSS
Web-basierte Anwendungssysteme XHTML- CSS Prof. Dr. Sergej Alekseev (alekseev@fb2.fra-uas.de) Prof. Dr. Armin Lehmann (lehmann@e-technik.org) Fachbereich 2 Informatik und Ingenieurwissenschaften Wissen
HTML Cascading Style Sheets
Informatik 1 für Nebenfachstudierende Grundmodul HTML Cascading Style Sheets Kai-Steffen Hielscher Folienversion: 12. Dezember 2016 Informatik 7 Rechnernetze und Kommunikationssysteme Inhaltsübersicht
Funktionen in JavaScript
Funktionen in JavaScript Eine Funktion enthält gebündelten Code, der sich in dieser Form wiederverwenden lässt. Es können ganze Programmteile aufgenommen werden. Mithilfe von Funktionen kann man denselben
12. Jgst. 3. Kursarbeit Datum: Fach: Informationsverarbeitung (Leistungskurs) & )!!*+,!- -.!-
12. Jgst. 3. Kursarbeit Datum: 26.03.2007 Klasse: GY 05 c Fach: Informationsverarbeitung (Leistungskurs) Themen: XHTML; CSS Name: Bitte speichern Sie Ihre Ergebnisse regelmäßig. Punkte:!" # Note: 8 $ %!&'(
Wert. { color: blue; }
CSS im Überblick HTML wurde vom W3C entwickelt, um die Inhalte einer Webseite zu gliedern und zu strukturieren. In HTML wird festgelegt, ob ein Textinhalt bspw. dies ist eine Überschrift oder
Web-Publishing mit HTML
Web-Publishing mit HTML Das HTML-Dokument: Jedes HTML 4-Dokument beginnt mit der Deklaration , um diese Version von anderen Versionen zu unterscheiden.
Aufbau einer Tabelle
Aufbau einer Tabelle : leitet Tabelle ein border="wert": legt Umrandung fest : beendet die Tabelle : definiert eine Zeile : definiert eine Zelle Beispiel: dies
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
CSS - Cascading Style Sheets
CSS - Cascading Style Sheets Rechenzentrum Universität Stuttgart Maria Vass 26. April 2005 Gliederung: CSS Grundlagen CSS praktisch einsetzen CSS in HTML einbinden Schriften / Texte formatieren Listen,
Einführung in HTML. Hui Dai
Einführung in HTML Hui Dai Grundgerüst einer HTML-Datei HTML-Dateien bestehen aus Text. Der Inhalt von HTML-Dateien steht in HTML-Elementen. HTML-Elemente werden durch so genannte Tags markiert. Fast alle
Scripting für Kommunikationswissenschaftler Gruppe C
Professur E-Learning und Neue Medien Institut für Medienforschung Philosophische Fakultät Scripting für Kommunikationswissenschaftler Gruppe C https://s-media-cache-ak0.pinimg.com/736x/9e/46/b5/9e46b5c98ae65d0880f37a30989781bb.jpg
Inhalt. 1 Mit CSS beginnen 1. 2 Textauszeichnungen und andere Grundlagen 13
D3kjd3Di38lk323nnm xiii 1 Mit CSS beginnen 1 1.1 Formate definieren mit CSS......................... 1 1.1.1 lnline-formate............................. 3 1.1.2 Eingebettete Formate........................
<html> <head> <title> Die Welt der Bäume </title> </head> <body> Hier ensteht eine Seite über Bäume. </body> </html> Abb. 2
Dieser html-kurs soll die Informatik-SchülerInnen meines Info-Kurses auf den Info-Quali vorbereiten. Das Werkzeug html soll einen in die Lage versetzten, die Programmierung von Web-Seiten zu verstehen
Informatik und Programmiersprachen
Informatik und Programmiersprachen Einschub: HTML Wintersemester 2004/2005 Prof. Dr. Thomas Wieland HTML HTML = Hypertext Markup Language HTML beschreibt Inhalt, Struktur und Darstellung eines Dokumentes.
Ergänzungen zum HTML - Grundkurs
Ergänzungen zum HTML - Grundkurs Ein HTML - Dokument besteht grundsätzlich aus zwei Teilen; HEADER (Kopf, enthält allg. Angaben zu Titel und ähnlich) BODY (Körper, enthält den eigentlichen Text mit Überschriften,
HyperTextMarkupLanguage
HyperTextMarkupLanguage 1) Die eigene Web-Seite in 10 Minuten 1.1 Welche Programme braucht man? Editor (aus dem Menü Zubehör) 1.2 Erstellen eines Grundgerüstes: Steueranweisungen in HTML: sogen. Tag :
Stand und Ausblick
Stand und Ausblick Einführung: 26.04.2017, 16.00 Uhr (c.t.), PC Pool Übung: 03.05.2017, 16.00 Uhr, PC Pool Übung: 10.05.2017, 16.00 Uhr, HS 020 Übung:, 16.00 Uhr, HS 020 Übung: 21.06.2017, 16.00 Uhr, HS
Ereignisse Auf Benutzereingaben reagieren
Ereignisse Auf Benutzereingaben reagieren JavaScript ermöglicht es dem Entwickler auf Ereignisse (engl.: events) im Browser zu reagieren. Auf diese Weise kann der Benutzer mit den Anwendungen interagieren,
Kennen, können, beherrschen lernen was gebraucht wird
Inhaltsverzeichnis Inhaltsverzeichnis... 1 Zeichen formatieren... 1 Physische Formatierungen... 1 Zitate auszeichnen... 2 Schrift ändern... 2 Die Schriftgröße einstellen... 2 Die Schriftart einstellen...
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
Umsetzen einer skalierbaren horizontalen Navigation:
Umsetzen einer skalierbaren horizontalen Navigation: Erstelle im Dreamweaver eine neue HTML - Datei (navigation.html) und eine CSS Datei (navigation.css). Die Struktur dieser Navigation soll auf einer
Funktionen nur wenn dann
Funktionen nur wenn dann Funktionen können auch nur in bestimmten Fällen angewendet werden. Code wird nur in einem bestimmten Fall ausgeführt Code Ja Code Block wahr if wahr? Nein else Code Block Alternative
Übung: Überschriften per CSS gestalten
Übung: Überschriften per CSS gestalten Teil 1: Umsetzung eines Layouts mit zwei Überschriften mit zwei verschiedenen Hierarchieebenen, ergänzt durch einen beschreibenden Textabsatz. Teil 2: Wie Teil 1,
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
Grundlagen zu HTML. Vortrag im Rahmen der BTK-Vorlesung von Herrn Professor Kärger
Grundlagen zu HTML Vortrag im Rahmen der BTK-Vorlesung von Herrn Professor Kärger Folie: 1 Gliederung Folie: 2 Was ist HTML Die Sprache HTML Aufbau von HTML-Tags Das HTML-Grundgerüst Hintergrundformatierungen
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
«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
Kommentare <! Dies ist ein Kommentar > Zum Kommentieren von Inhalten oder Befehlen. Wird im Browser nicht angezeigt.
HTML Grundgerüst titel der Seite Inhalt der Datei Innerhalb des Dateikopfes einen aussagekräftigen Titel vergeben! Den gesamten sichtbaren Inhalt
Ü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:
Kurzanleitung. Zitiertil-Creator. Dokumentvorlagen Dokumente Formatvorlagen Format Zeichen Format Absatz
Dokumentvorlagen Dokumente Formatvorlagen Format Zeichen Format Absatz Datei Neu... Datei öffnen Datei schließen Beenden Suchen Suchen & Ersetzen Verknüpfungen Optionen Einfügen Inhalte einfügen Format
Wir studieren HTML-Tags
Abb. 1: Word-Dokument Abb. 2: Das Dokument aus Abb. 1 mit einem Editor betrachtet Wir studieren HTML-Tags Wenn man ein Word-Dokument wie in Abb. 1 mit einem Editor anschaut, erkennt man den Quelltext des
3. Briefing zur Übung IT-Systeme
3. Briefing zur Übung IT-Systeme - Einführung in HTML, CSS und JavaScript Fragestunde, 30.11.2016, PC Pool Stand und Ausblick Einführung: 18.10.2016, 12.00 Uhr (c.t.), HS 4/PC Pool Fragestunde:, 12.00
HTML - Die Sprache des Internets. Grundlagen und Kurzprojekt
- Die Sprache des Internets Grundlagen und Kurzprojekt aus der Presse: Definition : Hypertext Markup Language Sprache des WWW definiert: Text- und Absatzformate Links Bild- und Tonelemente Farben offener
HTML: Text und Textstruktur mit CSS gestalten
Tutorium HTML: Text und Textstruktur mit CSS gestalten Martin Stricker martin.stricker@rz.hu-berlin.de 23. Juni 2004 Schriftarten und generische Schriftfamilien Schriftarten werden mit font-family definiert
Kurz FAQ - Typo3. Login zum Editieren
Login zum Editieren Kurz FAQ - Typo3 http://www.bischofsgruen.de/typo3/ (bis Ende September 2007 diese Adresse verwenden: http://www.urlaubs4.de/bischofsgruen/typo3/ Geben Sie bitte Benutzername und Passwort
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
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
Kennen, können, beherrschen lernen was gebraucht wird
Inhaltsverzeichnis Inhaltsverzeichnis... 1 Einbinden von Grafiken... 2 Grafiken in den Text einbinden... 2 Grafikverweise... 2 Verweise auf Bilder in Unterverzeichnissen... 2 Verweise auf Bilder im darüber
3. Zeichen und Schrift
3. Zeichen und Schrift 3.1 Medien Zeichen, Text, Schrift 3.2 Mikro-Typografie: Zeichensätze 3.3 Makro-Typografie: Gestalten mit Schrift 3.4 Hypertext und HTML (Fortsetzung) Allgemeines Textstrukturierung
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
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:
Funktionen nur wenn dann
Funktionen nur wenn dann Funktionen können auch nur in bestimmten Fällen angewendet werden. Code wird nur in einem bestimmten Fall ausgeführt Code Ja Code Block wahr if wahr? Nein else Code Block Alternative
Meine Fakultät. Alumni-Portal HTML-Seiten im Portal Seite 1 von 8
Alumni-Portal HTML-Seiten im Portal Seite 1 von 8 Meine Fakultät Auf Wunsch wird jedem Fachbereich ein eigener Reiter im Alumni-Portal eingerichtet. Diese Seite bzw. die Unterseiten können Sie nach Wunsch
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
HTML-Grundlagen. Die Layout- und Formatierungsanweisungen heißen Tags, z.b.
HTML-Grundlagen HTML (Hypertext Markup Language) -Dokumente sind einfache Textdateien, die neben dem eigentlichen Text zusätzliche Anweisungen enthalten, wie das Dokument von einem Browser auf dem Bildschirm
3 Ein bisschen JavaScript
3 Ein bisschen JavaScript Das Internet hat sich in den vergangen Jahren stark gewandelt. Vom reinen Informationsaustausch zwischen Wissenschaftlern ist das Internet zur multimedialen Spielwiese vieler
JavaScript clientseitige Programmiersprache zur Dynamisierung von Internetseiten
Einführung in JavaScript anhand von Beispielen JavaScript clientseitige Programmiersprache zur Dynamisierung von Internetseiten Grundbedingungen die Einbindung erfolgt über ein Objektmodell (Objekte mit
HTML5, CSS3 und JavaScript 1.8. Fortgeschrittene Entwicklung von Webseiten. Isolde Kommer. 1. Ausgabe, 2. Aktualisierung, Dezember 2013 HTML5F
HTML5, CSS3 und JavaScript 1.8 Isolde Kommer 1. Ausgabe, 2. Aktualisierung, Dezember 2013 Fortgeschrittene Entwicklung von Webseiten HTML5F 2 HTML5, CSS3 und JavaScript 1.8 - Fortgeschrittene Entwicklung
Zertifikatsprogramm der Oesterreichischen Computer Gesellschaft. OCG WebPublisher. Modul 2 Gestaltung von Webinhalten (HTML&CSS) Syllabus Version 1.
Zertifikatsprogramm der Oesterreichischen Computer Gesellschaft OCG WebPublisher Modul 2 Gestaltung von Webinhalten (HTML&CSS) Syllabus Version 1.0 OCG Oesterreichische Computer Gesellschaft Wollzeile
3. Zeichen und Schrift
3. Zeichen und Schrift 3.1 Medien Zeichen, Text, Schrift 3.2 Mikro-Typografie: Zeichensätze 3.3 Makro-Typografie: Gestalten mit Schrift 3.4 Hypertext und HTML (Fortsetzung) Allgemeines Textstrukturierung
3. Zeichen und Schrift
3. Zeichen und Schrift 3.1 Medien Zeichen, Text, Schrift 3.2 Mikro-Typografie: Zeichensätze 3.3 Makro-Typografie: Gestalten mit Schrift 3.4 Hypertext und HTML (Fortsetzung) Allgemeines Textstrukturierung
CSS Cascading Stylesheets
CSS Cascading Stylesheets 1. Einführung Warum denn CSS= Cascading Style Sheets? CSS ist eine Spache, bestimmt für die Formatierung von HTML-Seiten. Sie greift auf die Sprachelemente von HTML zu und verleiht
Das Einsteigerseminar
Michael Seeboerger-Weichselbaum Das Einsteigerseminar XML Inhalt Vorwort Einleitung und Ziel des Buches 1 Was ist XML 1.1 HTML 1.2 XML 1.3 XSLT 1.4 XML und HTML - wo sind die Unterschiede? 1.5 Einsatzgebiete
Stefan Münz/Wolfgang Nefzger. HTML Handbuch
Stefan Münz/Wolfgang Nefzger HTML Handbuch WWW-Projekte richtig planen - Style Sheets, Frames, Layer Grafik richtig einsetzen - Java-Applets und JavaScripts - Tips und Tricks zu HTML Mit 147 Abbildungen
Spreed Call Button. Kurzanleitung. 1 Übersicht...2. 2 Auswahl bzw. Erstellen einer Button-Grafik...2. 3 Konfiguration des Spreed Call Button...
Kurzanleitung Spreed Call Button Konfiguration und Integration in Ihre Webseite 1 Übersicht...2 2 Auswahl bzw. Erstellen einer Button-Grafik...2 3 Konfiguration des Spreed Call Button...2 3.1 Sprache und
Praxisbeispiel 01:18 Webformulare 07:39 Flexibles zweispaltiges Layout 05:24 Image-Replacement-Techniken 04:02
Einfach mehr können. HTML/CSS Einstieg für Anspruchsvolle Bonusmaterial Praxisbeispiel 01:18 Webformulare 07:39 Flexibles zweispaltiges Layout 05:24 Image-Replacement-Techniken 04:02 Inhaltsverzeichnis