Schulinterne Lehrerfortbildung. HTML Einführung. Staatliche Realschule Bessenbach

Größe: px
Ab Seite anzeigen:

Download "Schulinterne Lehrerfortbildung. HTML Einführung. Staatliche Realschule Bessenbach 06.05.2010"

Transkript

1 Schulinterne Lehrerfortbildung HTML Einführung Staatliche Realschule Bessenbach (cc) Martin Römpp 2010

2 Grundsätzliches Eine ausführliche Dokumentation aller in diesem Skript angegebenen Funktionen kann im Projekt SELFHTML von Stefan Münz unter abgerufen werden. Hinweise auf diese weiter führende Dokumentation werden auf diese Art gekennzeichnet. Diese Fortbildung soll Ihnen den Einstieg in die Webseiten-Programmierung mit HTML erleichtern. Sie erleichtern sich selbst die Arbeit, wenn Sie neben dem Editor für die Programmierung (z.b. Notepad oder Phase5 ) immer auch ein Browser-Fenster für die o.a. Quelle offen halten. Dieses Dokument wurde unter folgender Lizenz publiziert: Creative Commons Namensnennung-Keine kommerzielle Nutzung-Weitergabe unter gleichen Bedingungen 3.0 Deutschland (http://creativecommons.org/licenses/by-nc-sa/3.0/de/) und kann unter der Adresse fortbildung.rs-bessenbach.de abgerufen werden. HTML, eine Seitenbeschreibungssprache HTML (Version 4.0) ist momentan die Standard- Programmiersprache, mit der Web-Seiten erstellt werden (HTML: hypertext markup langugage). Dabei wird jedoch nur beschrieben, in welcher Formatierung, an welchem Platz, in welcher Ordnung der Inhalt der Seite im Browser des Benutzers Funktionsweise eines Web-Servers (httpd, Browser, Port) erscheinen soll. HTML-Dateien sind als Klartext-Dateien lesbar und unabhängig vom verwendeten Betriebssystem. Was sich hinter dem mehr oder weniger stumpfsinningen Surfen im Internet verbirgt: Jeder Benutzer verwendet eine Programm, den Internet-Browser (z.b. Mozilla Firefox, Netscape Navigator, MS Internet Explorer, Safari, Epiphany, Opera, ) um Internet-Seiten anzuzeigen. Dabei gibt der Benutzer eine Internet-Adresse in die Adresszeile ein, z.b. ein. Zu dieser Internet-Adresse (rs-bessenbach.de) baut der Computer des Benutzers eine Verbindung auf und fragt nach der angeforderten Seite (/index.htm). Ist kein Seitenname angegeben worden, wird automatisch die Seite index.htm oder index.html gesucht. Der entfernte Computer (rs-bessenbach.de) leitet diese Anfrage intern an seinen Webserver (www.rs-bessenbach.de) weiter, der die gespeicherten HTML-Seiten verwaltet. Der Webserver findet die angegebene Seite und schickt diese mit dem Protokoll ( Sprache ) http an den Computer des Benutzers zurück. Dort liest der Browser des Benutzers den empfangenen HTML-Quellcode, interpretiert ihn ( Welche Anweisungen sind enthalten? ) und zeigt das Ergebnis im Browserfenster an. Ein Webserver macht also (aus Benutzersicht) nichts anderes, als HTML-Daten fürs Anzeigen im Browser eines Benutzers zu verschicken. Aufbau und Pflege von Internet-Präsenzen (FTP, SQL, CMS) Mit dem Protokoll http werden definitionsgemäß nur Anfragen zum Webserver und HTML-Daten vom Webserver verschickt. Es kann also nicht verwendet werden, um auf dem Webserver neue Daten abzulegen oder bestehende Daten zu verändern. Mit dem ftp-protokoll (FTP: file transfer protocol) können Dateien (welcher Art auch immer) auf andere Server übertragen werden. Der klassische Weg um Daten einer Internet-Präsenz zu aktualisieren ist, 2/14 (cc) Martin Römpp, 2010

3 die neuen/ geänderten HTML-Daten auf dem eigenen Rechner zu erstellen/ zu ändern und diese in einem zweiten Schritt dann auf den Webserver per ftp zu übertragen. Der Umfang von Informationen, die im Internet publiziert werden, ist enorm gestiegen. Um die Pflege jedoch nicht allzu langwierig und vor allem nicht noch komplexer zu gestalten, wurden Auswege gesucht. Viele präsentierte Informationen sind eigentlich nicht als HTML-Datei auf dem Werbserver gespeichert; sie werden vielmehr beim Abruf durch den Benutzer z.b. aus einer Datenbank-Abfrage erzeugt. Umfangreiche Web-Auftritte, bei denen sehr viele Informationen von sehr vielen Beteiligten (meist ohne größere Vorkenntnisse) zur Verfügung gestellt werden und aktualisiert werden müssen, basieren heute nahezu immer auf einem CMS (content management system). Dabei geben Benutzer lediglich Text- und Bildinformationen in Formularfelder ein, die per Knopfdruck dann in einer Datenbank abgelegt werden. Greift ein Benutzer auf Inhalte solcher Web- Seiten zu, werden die betr. Seiteninformationen aus einer Datenbank gelesen und in HTML-Code umgewandelt, der dann dem Browser des Abrufenden zur Verfügung gestellt wird. Abgrenzung zu verwandten Themen (z.b. PHP, XML, DHTML, CGI, Java, JavaScript, Flash, ActiveX,) Eine Datenbankabfrage wie auch viele einfachere Funktionen lassen sich mit einer reinen Seitenbeschreibungssprache wie HTML nicht durchführen. Dazu müssen andere Programmiersprachen verwendet werden, dem Webserver zur Verfügung gestellt werden. Wohl fast jedem bekannt sind ActiveX-Controls (von Microsoft), Java und JavaScript- insbesondere durch die Problematik, dass durch in HTML-Seiten eingebettete kleine Programme auch unerwünschte Aktionen auf dem eigenen Rechner ausgeführt werden können. Anders als diese können PHP- und CGI-Programme nur auf dem Webserver selbst ausgeführt werden. Sie stellen keine Gefährdung für den Computer des Benutzers dar und geben ihren Programmcode dem Benutzer nicht preis- die Programme erzeugen als Ausgabe auf dem Webserver HTML-Dateien, die dann dem Browser des Benutzers geschickt werden. Meist merkt ein erst Benutzer gar nicht, dass abgerufene Inhalte nicht aus statischen HTML-Daten bestehen. Im Rahmen dieser Fortbildung wird lediglich auf HTML selbst eingegangen. Jegliche Möglichkeit zur Interaktion von Benutzer und Webserver ist auf das Abrufen der auf dem Webserver bereit liegenden HTML-Seiten beschränkt. Einführung Wie oben bereits beschrieben legen Sie sich am besten gleich ein Lesezeichen (Internet Explorer: Favorit) für die Seite in Ihrem Browser ab. Seitenanalyse: Verwirrend- aber nur auf den ersten Blick! Öffnen Sie die Seite in Ihrem Browser. Klicken Sie nun auf eine freie Stelle (keine Grafik) im angezeigten Dokument mit der rechten Maustaste und wählen Sie SEITENQUELLTEXT ANZEIGEN (Mozilla Firefox) bzw. QUELLTEXT ANZEIGEN (MS Internet Explorer) aus dem Kontextmenü. Versuchen Sie, eine Struktur in dem scheinbaren Durcheinander zu finden. 3/14 (cc) Martin Römpp, 2010

4 HTML-Syntax (Tags und Container, Syntaxfehler!) (Lassen wir für die folgenden Betrachtungen diese Angabe in der ersten Zeile ausser Acht: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">) Tatsächlich beginnt jede HTML-Seite mit <html> und endet mit </html>. Dies ist das Erkennungsmerkmal für den Browser, dass es sich bei dem eingeschlossenen Inhalt um HTML-Code handelt. <html> wird als Tag bezeichnet. Meistens bilden zwei Tags einen Container; dieser gibt Informationen über die im Container enthaltenen Daten an. Ein Container endet mit dem gleichen Tag, mit dem er eingeleitet wurde, nur wird dem Namen ein Schrägstrich / vorangestellt. Kann ein Tag vom Browser nicht interpretiert werden (z.b. weil er falsch geschrieben wurde), wird er samt seines Inhalts vom Browser ignoriert. Ansonsten wird jeglicher Text, der in/ zwischen Tags steht, als Text im Browser angezeigt. Grundstruktur von HTML-Dateien (<html>, <head>, <title> und <body>) Die Grundstruktur von HTML-Dateien kann mit vier Containern beschrieben werden. Neben dem bereits bekannten <html>- Container ist jedes HTML-Dokument in einen Dokumentenkopf (Container: <head> </head>) und in das eigentliche Dokument (Container: <body> </body>) untergliedert. Innerhalb des Dokumentenkopfs umschließt der Container <title> </title> die Informationen, die als Fenstertitel im Browser angezeigt werden. de.selfhtml.org > HTML/ XHTML > Allgemeine Regeln für HTML > Grundgerüst einer HTML-Datei Hello World in 2 Minuten mit dem Editor (notepad.exe) Sie werden nun ihre erste HTML-Datei mit einfachsten Hilfsmitteln erstellen. Starten Sie dazu den Editor (notepad.exe) mit START PROGRAMME ZUBEHÖR EDITOR. Bauen Sie nun das Grundgerüst ihrer HTML-Seite mit den vier bekannten Containern. nb: Es erleichtert die (eigene) Übersicht ungemein, wenn eine Einrückung ineinander geschachtelter Container vorgenommen wird. Für die Darstellung im Browser macht dies allerdings keinen Unterschied. <html> <head> <title> Meine erste HTML-Seite </title> </head> <body> Hier steht der Text meiner ersten HTML-Seite. Hallo Welt, ich bin im Internet angekommen! :-) </body> </html> 4/14 (cc) Martin Römpp, 2010

5 Speichern Sie diese Datei unter dem Namen hallo.htm ab, wählen Sie jedoch vorher im Feld DATEITYP Alle Dateien aus. Herzlichen Glückwunsch. Sie haben nun Ihre erste HTML-Seite erstellt. Wenn Sie ihren Browser öffnen und dort über das Menü DATEI DATEI ÖFFNEN (Mozilla Firefox) bzw. DATEI ÖFFNEN (MS Internet Explorer) die von Ihnen gespeicherte Datei aufrufen, können Sie die Früchte Ihrer Arbeit betrachten. Einfache HTML-Seitengestaltung Zeilenumbrüche Zu beachten ist, dass in obigem Beispiel der Zeilenumbruch zwischen dem ersten und dem zweiten Satz nicht interpretiert wird. Ein einfacher Zeilenumbruch an einer bestimmten Stelle im Text wird mit dem Tag <br> erzeugt. Soll ein neuer Absatz begonnen werden (1 Zeile Abstand), so kann der Tag <p> geschrieben werden. Geschickter ist es allerdings, den gesamten Absatz in einen Container <p> </p> zu packen. Also: <body> <p>hier steht der Text meiner ersten HTML-Seite.</p> <p>hallo Welt, ich bin im Internet angekommen! :-) </p> </body> de.selfhtml.org > HTML/ XHTML > Elemente zur Textstrukturierung > Zeilenumbruch Text formatieren mit Überschriften-Formatvorlagen (<H1> etc.) Individuelle Textformatierung Eine individuelle Formatierung von Text ist mit dem Container <font> </font> möglich. Über die Attribute size (Schriftgröße), color (Schriftarbe) und face (Schriftart) kann dem im Container eingeschlossenen Text eine individuelle Formatierung der Schrift zugewiesen werden. <body> <p>hier steht der Text meiner <font size= 12 color= red >ersten HTML-Seite. </font> </p> <p>hallo Welt, ich bin im Internet angekommen! :-) </p> </body> 5/14 (cc) Martin Römpp, 2010

6 Der den Attributen zugewiesene Wert wird- wie auch in obigem Beispiel- immer in Anführungszeichen angegeben. Allgemeines Muster: <IrgendeinTag Attribut= Wert > Beachten Sie dabei aber, dass sich die Änderung von auf dieser Art formatiertem Text sehr umständlich gestaltet. Besser ist es, verschiedene Formatvorlagen (Stylesheets) zu definieren, die dann einzelnen Abschnitten mit dem Container <div> </div> und entsprechenden Attributen zugewiesen werden. Mehr dazu im Abschnitt CSS. de.selfhtml.org > HTML/ XHTML > Elemente zur Textstrukturierung > Ältere Elemente zur Schriftformatierung Hyperlinks Der eigentliche Erfolg von in HTML geschriebenen Dokumenten war, dass diese auf einfachste Weise miteinander verknüpft werden können. Der Container <a>.. </a> ermöglicht dies. Wichtige Attribute: href= druck/druckversion.html um das HTML-Dokument druckversion.html im Unterordner druck zu öffnen; href= als Hypertext-Referenz auf eine andere HTML-Seite im Internet; href= für einen -Link. name= textmarke3 um an dieser Stelle im Dokument eine Textmarke namens textmarke3 zu setzen. (Diese kann später mit <a href= seite123.htm#textmarke3 > angesprungen werden.) Im Folgenden fügen wir in unser HTML-Dokument hallo.htm einen Verweis auf unsere -Adresse ein. <a href= > an Bill Gates</a> Dann speichern wir diese Datei unter dem Namen hallo2.htm ab. Da wir nun über zwei HTML-Dateien verfügen, können wir sogleich Verknüpfungen auf die jeweils andere HTML-Datei einfügen. In hallo.htm fügen wir ein (Anschließend Speichern nicht vergessen!): <a href= hallo2.htm >Klick mich für Hallo2.htm</a> In hallo2.htm fügen wir ein (Anschließend Speichern nicht vergessen!): <a href= hallo.htm >Klick mich für Hallo.htm</a> 6/14 (cc) Martin Römpp, 2010

7 Jetzt das im Browser geöffnete betrachten Nachdem die F5-Taste bzw. ANSICHT AKTUALISIEREN im Menü aufgerufen wurde, werden die gespeicherten HTML-Daten auch korrekt angezeigt. Es müsste nun möglich sein, zwischen beiden HTML-Dateien hin- und herzuklicken. de.selfhtml.org > HTML/ XHTML > Verweise (Links) Phase 5 Einführung und Überblick Nachdem die ersten Gehversuche mit einem primitiven Editor funktioniert haben, verwenden wir im Folgenden ein Programm, das nicht wirklich etwas anderes als der Editor macht, jedoch in der Erstellung (umfangreicher) HTML-Projekte einiges an Erleichterungen zu bieten hat. Dieses Programm ist zum nichtkommerziellen Gebrauch (daher auch für uns ) kostenlos im Internet beziehbar unter Der Programmaufruf erfolgt über Start PROGRAMME PHASE 5 HTML-EDITOR EDITOR PHASE 5. Zunächst legen wir mit Projekt Neues Projekt den Pfad zu unseren HTML-Dateien fest. Nennen wir unser Projekt HTML-FB. Hier muss lediglich im Register Lokale Verzeichnisse im Feld Stammordner für Ihre Homepage-Dateien der Ablageort der bereits erstellten Dateien hallo.htm und hallo2.htm durch Anklicken eingetragen werden. Sobald diese Einstellungen getroffen sind, fällt sofort auf, dass die HTML-Tags farbig hervorgehoben sind ( syntax highlighting ). 7/14 (cc) Martin Römpp, 2010

8 Ebenso ist jede Zeile mit einer Zeilennummer versehen. Beachten Sie jedoch, dass die Zeilennummern nicht tatsächlich im HTML-Quellcode stehen. Wer sich davon überzeugen möchte, öffnet die Dateien nochmals mit dem Editor (notepad.exe). Viele nette Features, die dem HTML-Programmierer das Leben erleichtern. Zwei davon seien vorab erwähnt: 1. Wenn Sie einen Container öffnen (d.h. den Anfangs-Tag schreiben), wird der zweite Tag automatisch ergänzt. 2. (Deutsche) Umlaute werden automatisch in die entsprechenden HTML-Äquivalente konvertiert. (Aus ä wird ä, aus ö wird ö, aus ü wird ü, aus Ä wird Ä kapiert? Achja: aus ß wird ß.) 3. Alle geöffneten HTML-Dateien sind als Dateireiter im Hintergrund schnell anwählbar; mit STRG + TAB kann schnell zwischen den Dateien umgeschaltet werden. 4. Die Pipette rechts oben in der Symbolleiste Aber zu Farben kommen wir später. de.selfhtml.org > HTML/ XHTML > Allgemeine Regeln für HTML > Zeichenvorrat, Sonderzeichen und HTML-eigene Zeichen Erweiterte HTML-Seitengestaltung Metainformationen In den im <head>-abschnitt des HTML-Dokuments kann z.b. Information über den Autor der Seite notiert werden. Aber auch andere Informationen, die hauptsächlich für Suchmaschinen interessant sind, werden hier angegeben. <meta name="description" content="hilft beim Zu-/ Einordnen"> <meta name="author" content="jake & Elwood"> <meta name="keywords" content="jake, Elwood, Blues Brothers"> de.selfhtml.org > HTML/ XHTML > HTML-Kopfdaten > Meta-Angaben zum Inhalt 8/14 (cc) Martin Römpp, 2010

9 Farbgestaltung Im HTML-Code können die folgenden 16 Grundfarben über ihren Farbnamen angesprochen werden. black (#000000), gray (#808080), maroon (#800000), red (#FF0000), green (#008000), lime (#00FF00), olive (#808000), yellow (#FFFF00), navy (#000080), blue (#0000FF), purple (#800080), fuchsia (#FF00FF), teal (#008080), aqua (#00FFFF), silver (#C0C0C0) und white (#FFFFFF). de.selfhtml.org > HTML/ XHTML >Allgemeine Regeln für HTML > Farben definieren in HTML > Farbnamen für die 16 Grundfarben: In Klammern ist jeweils der RGB-Farbwert in hexadezimaler Schreibweise angegeben. In dieser Form können die im Web als Quasi-Standard verwendeten 216 Standardfarben angegeben werden (s. Anzeigebeispiel bei SELFHTML). de.selfhtml.org > HTML/ XHTML >Allgemeine Regeln für HTML > Farben definieren in HTML > Netscape-Farbpalette (216 Farben): Beispiele Hintergrundfarbe, Textfarbe, Linkfarbe(n) des <body>-abschnitts: <body bgcolor="#663333" text="#ffcc99" link="#ff9966" vlink="#ff9900" alink="#ffffff"> Schriftfarbe im <font>-container: <font color= red >Dies erscheint jetzt in roter Schrift!</font> Listen und Aufzählungen Eine einfache, unsortierte Liste wird in HTML mit dem Container <ul>... </ul> generiert. Jedes aufgezählte Element ist wiederum in einen <li> </li>-container gepackt. <ul> <li>äpfel</li> <li>birnen</li> <li>trauben</li> </ul> 9/14 (cc) Martin Römpp, 2010

10 Analog dazu verhält es sich mit Numerierungen (ordered list): <ol> <li>stoffverteilungsplan</li> <li>unterrichtssequenz</li> <li>unterrichtsstunde</li> </ol> de.selfhtml.org > HTML/ XHTML > Elemente zur Textstrukturierung > Listen Einbinden von Grafiken Mit den größten Reiz macht die Möglichkeit aus, digitale Skizzen und Bilder in HTML-Seiten einzubetten. Im HTML-Code muss lediglich angegeben werden, wo im Dateisystem des Webservers die betr. Grafik zu finden ist. <img src= meinlogo.gif alt= Mein Logo width= 200 height= 150 > Dieses Beispiel bettet an der aktuellen Stelle im HTML-Code eine Grafikdatei im gleichen Verzeichnis mit dem Dateinamen meinlogo.gif ein. Die Grafik wird auf eine Breite von 200 Pixeln und eine Höhe von 150 Pixeln angepasst. Wir die Grafik nicht angezeigt, wird an Stelle dessen der Text Mein Logo angezeigt. Auch eine Angabe in Prozent (in Relation zur Bildschirmgröße) ist möglich. de.selfhtml.org > HTML/ XHTML > Grafiken > Grafiken einbinden Es ist generell zu Empfehlen, die zu verwendenden Grafiken vor Einbinden in den HTML-Code auf die benötigte Größe zu reduzieren. Das bezieht sich sowohl auf die Bildmaße, wie auch auf Farbtiefe und Auflösung des Bildes. Für die Darstellung auf dem Bildschirm sind 72 dpi ausreichend. Alle Verweise zu Dateien- sowohl in Verknüpfungen, als auch in der Angabe einer Bilddatei- sind relativ zum Ablageort der HTML-Datei. Befinden sich die Dateien alle im gleichen Verzeichnis, muss außer dem Dateinamen nichts weiter angegeben werden. Befindet sich die Grafik z.b. im Unterverzeichnis Bilder muss die obige Angabe lauten: <img src= Bilder/meinlogo.gif alt= Mein Logo width= 200 height=150 > Absolute Dateipfade wie in z.b. in Windows gebräuchlich haben hier keine Funktion. Erstens muss der Pfad auf dem Webserver angegeben/ angepasst werden. Zum Zweiten ist in der Notationsweise des Dateipfads nur der normale Schrägstrich / erlaubt, nicht hingegen der Backslash \!! de.selfhtml.org > HTML/ XHTML > Allgemeine Regeln für HTML > Referenzieren in HTML 10/14 (cc) Martin Römpp, 2010

11 Tabellen Tabellen werden in HTML zeilenweise notiert. Dabei werden innerhalb jeder Zeile die Inhalte der Spalten notiert. Zeile 1 Spalte 1: Montag, Zeile 1 Spalte 2: Dienstag, Zeile 1 Spalte 3: Mittwoch, Zeile 2 Spalte 1: Vormittag, Zeile 2 Spalte 2: Nachmittag Zeile 2 Spalte 3: Nachtschicht Team 1 Team 2 Team 3 Montag Dienstag Mittwoch Vormittag Nachmittag Nachtschicht In der HTML-Syntax sieht das folgendermaßen aus: <table border="1"> <tr> <th>team 1</th> <th>team 2</th> <th>team 3</th> </tr> <tr> <td>montag</td> <td>dienstag</td> <td>mittwoch</td> </tr> <tr> <td>vormittag</td> <td>nachmittag</td> <td>nachtschicht</td> </tr> </table> Das Attribut border steuert die Anzeige von Gitternetzlinien (0 = keine Linien). de.selfhtml.org > HTML/ XHTML > Tabellen Erstellen von Formularfeldern Bedenken Sie, dass jegliche Interaktion zwischen Benutzereingaben (in Formularfeldern) und Aktionen des Webservers ohne Einsatz einer Programmiersprache auf dem Webserver/ im HTML-Code eingebettet funktionslos bleibt. Es werden folgende Formularelemente unterschieden: Auswahlknöpfe (radio buttons), Checkboxen, Dropdown-Listen und Text-Formularfelder. Schaltflächen erzeugen entweder das Löschen/ Zurücksetzen des Formularinhalts oder übergeben den Formularinhalt an ein Programm. Alle Formularelemente müssen im Container <form> </form> eingeschlossen sein. 11/14 (cc) Martin Römpp, 2010

12 <form action= nachricht.php > <p>wählen Sie Ihren Wunschlieferanten:</p> <select name="top5" size="3"> <option value= h >Heino</option> <option value= mj >Michael Jackson</option> <option value= tw >Tom Waits</option> <option value= nh >Nina Hagen</option> <option value= mr >Marianne Rosenberg</option> </select> <p>geben Sie Ihre Zahlungsweise an:</p> <p> <input type="radio" name="zahlmethode" value="mastercard"> Mastercard<br> <input type="radio" name="zahlmethode" value="visa"> Visa<br> <input type="radio" name="zahlmethode" value="americanexpress"> American Express </p> <p>kreuzen Sie die gewünschten Zutaten an:</p> <p> <input type="checkbox" name="zutat" value="salami"> Salami<br> <input type="checkbox" name="zutat" value="pilze"> Pilze<br> <input type="checkbox" name="zutat" value="sardellen"> Sardellen </p> <input type="submit" value=" Absenden "> <input type="reset" value=" Abbrechen"> </form> Das Ergebnis der Auswahl(en) auf der HTML-Seite wird bei Klicken auf die Schaltfläche Absenden an das PHP-Skript nachricht.php, das sich im gleichen Verzeichnis auf dem Webserver befindet, übermittelt. de.selfhtml.org > HTML/ XHTML > Formulare 12/14 (cc) Martin Römpp, 2010

13 Frames Mit Hilfe von Frames kann der HTML-Programmierer die im Browser angezeigte Oberfläche ( frameset ) in mehrere Teile unterteilen, die als separare HTML-Dateien ( frames ) existieren. Wie hier angedeutet, kann mit Frames die Verwaltung eines Web-Auftritts vereinfacht werden, in dem z.b. Elemente der Primärnavigation nur im unteren Frame zu finden sind; alle Elemente der Sekundärnavigation sind z.b. im linken Frame untergebracht und der eigentliche Inhalt wird im rechten Frame angezeigt. Im folgenden die Definition eines Framesets: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/tr/html4/frameset.dtd"> <html> <head> <title>beschreibung des Frameset-Inhalts</title> </head> <frameset rows="100,*,60"> <frame src= kopf.htm name= kopf > <frame src= inhalt.htm name= inhalt > <frame src= fuss.htm name= fuss > <noframes> <body> <h1>alternativ-inhalt</h1> <p>wird angezeigt, wenn der Browser keine Frames darstellen kann.</p> <p>mindest-inhalt sollten eine Kurzbeschreibung und eine Sitemap sein.</p> </body> </noframes> </frameset> </html> Es wird also hauptsächlich festgelegt, dass eine HTML-Datei namens kopf.htm in den oberen 100 Pixeln der Bildschirmhöhe angezeigt werden sollen; von unten sollen 60 Pixel für die Fußzeile reserviert werden, die in der Datei fuss.htm zu finden ist. Der eigentliche Inhalt kann in die Datei inhalt.htm geschrieben werden. de.selfhtml.org > HTML/ XHTML > Frames 13/14 (cc) Martin Römpp, 2010

14 Formatvorlagen Cascading Style Sheets (CSS) In der Regel sollte versucht werden, Inhalt und Formatierung voneinander zu trennen. Dies wird durch das Verwenden von Formatvorlagen (Stylesheets) erreicht, die analog zu den aus der Textverarbeitung verwendeten Vorlagen funktionieren. Gehen wir von folgendem Textbeispiel aus: Zunächst wird im <head>-bereich des HTML-Dokuments die externe Formatvorlage eingebunden: <link rel="stylesheet" type="text/css" href="formatvorlage.css"> Damit ist die Verknüpfung zu einer externen Formatvorlage hergestellt. In der Formatvorlage (formatvorlage.css) stehen z.b. folgende Definitionen: p.titel {font-size:12pt;color:green;font-weight:bold;fontfamily:arial;} p.zitat {font-size:8pt;font-color:black;font-family:arial;} Die hier angegebenen Formatierungsanweisungen sind als Klassen des <p>-objekt definiert. Im HTML-Dokument werden diese wie folgt referenziert: <p class="zitat">hier steht der Text meiner zweiten HTML- Seite.</p> <p class="titel"> Hallo Welt, ich bin im Internet angekommen! :-)</p> Ergebnis: Durch das festlegen zentraler Formatvorgaben (d.h. in nur einer/ nur in wenigen CSS-Dateien), können Änderungen im gesamten Internet-Auftritt im Handumdrehen vorgenommen werden. Voraussetzung: Alle HTML-Seiten beziehen sich auf die zentralen Formatvorlagen. de.selfhtml.org > Stylesheets (CSS) Mit Hilfe von Stylesheets können (fast unbegrenzte!) Formatierungsmöglichkeiten vorgenommen werden, die in reinem HTML nicht möglich sind. 14/14 (cc) Martin Römpp, 2010

-Wählen Sie die gewünschten Kriterien für die Selektion und klicken Sie anschließend auf OK um die Datensätze zu selektieren.

-Wählen Sie die gewünschten Kriterien für die Selektion und klicken Sie anschließend auf OK um die Datensätze zu selektieren. HowTo: Personalisierte Serienemails aus Selektion (ggf. mit Anhang) Versionen: CRM 5, CRM SIX I. Vorbereitung a) Erstellen einer Selektion -Grundlage für alle Serienbriefe oder Serienemails mit SuperOffice

Mehr

Seiten für das WWW selber gestalten. html. Kopf. Körper. Beispiel

Seiten für das WWW selber gestalten. html. Kopf. Körper. Beispiel Seiten für das WWW selber gestalten Eine Seite im WWW ist in einer Programmiersprache geschrieben. Wir werden nicht die Details einer Programmierung anschauen. Es wird uns nützlich sein, zu wissen, wie

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

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

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

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

HTML5. Grundlagen der Erstellung von Webseiten. Linda York, Tina Wegener. 1. Ausgabe, Dezember 2011 HTML5

HTML5. Grundlagen der Erstellung von Webseiten. Linda York, Tina Wegener. 1. Ausgabe, Dezember 2011 HTML5 Linda York, Tina Wegener HTML5 Grundlagen der Erstellung von Webseiten 1. Ausgabe, Dezember 2011 HTML5 2 HTML5 - Grundlagen der Erstellung von Webseiten 2 Die erste Webseite mit HTML erstellen In diesem

Mehr

HTML Teil 2. So kann man HTML-Seiten mit

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

Webdesign mit HTML und CSS Einführungsabend

Webdesign mit HTML und CSS Einführungsabend Einführungsabend Die eigene Internetseite Hypertext und html Das HTML Grundgerüst HTML-Editoren Skriptsprachen im WWW Rechtliche Absicherung Suchmaschinenoptimierung Das HTML Grundgerüst HTML ist ein Kompromiss

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

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

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

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

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

HTML5. Grundlagen der Erstellung von Webseiten. Linda York, Tina Wegener. 2. Ausgabe, 3. Aktualisierung, Januar 2013 HTML5

HTML5. Grundlagen der Erstellung von Webseiten. Linda York, Tina Wegener. 2. Ausgabe, 3. Aktualisierung, Januar 2013 HTML5 HTML5 Linda York, Tina Wegener 2. Ausgabe, 3. Aktualisierung, Januar 2013 Grundlagen der Erstellung von Webseiten HTML5 2 HTML5 - Grundlagen der Erstellung von Webseiten 2 Die erste Webseite mit HTML erstellen

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

Informatik und Programmiersprachen

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.

Mehr

Stichpunkte zum Aufbau einer HTML-Website

Stichpunkte zum Aufbau einer HTML-Website Stichpunkte zum Aufbau einer HTML-Website Aufbau eines HTML-Dokumentes: HTML = Hyper Text Markup Language Texteditor zur Befehlseingabe oder im Browser (MIE) Ansicht Quellcode Tags = HTML-Befehle - immer

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

HTML5. Grundlagen der Erstellung von Webseiten. Marc Haunschild, Linda York, Tina Wegener. 3. Ausgabe, Januar 2015 ISBN: 978-3-86249-404-0 HTML5

HTML5. Grundlagen der Erstellung von Webseiten. Marc Haunschild, Linda York, Tina Wegener. 3. Ausgabe, Januar 2015 ISBN: 978-3-86249-404-0 HTML5 HTML5 Marc Haunschild, Linda York, Tina Wegener 3. Ausgabe, Januar 2015 Grundlagen der Erstellung von Webseiten ISBN: 978-3-86249-404-0 HTML5 2 HTML5 - Grundlagen der Erstellung von Webseiten 2 Die erste

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

Internetseiten selbst erstellt

Internetseiten selbst erstellt Internetseiten selbst erstellt Vorüberlegungen: Übersichtsplan aller geplanten Seiten zeichnen und bereits logische Dateinamen überlegen. Inhalt der Seite Willkommen/Was gibt es zu sehen und was will ich

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

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

Kapitel 3 Frames Seite 1

Kapitel 3 Frames Seite 1 Kapitel 3 Frames Seite 1 3 Frames 3.1 Allgemeines Mit Frames teilt man eine HTML-Seite in mehrere Bereiche ein. Eine Seite, die mit Frames aufgeteilt ist, besteht aus mehreren Einzelseiten, die sich den

Mehr

1 Grundlagen von Phase 5 Installiere das Programm Phase 5 auf dem Rechner.

1 Grundlagen von Phase 5 Installiere das Programm Phase 5 auf dem Rechner. Kapitel 1 Grundlagen von Phase 5 Seite 1 1 Grundlagen von Phase 5 Installiere das Programm Phase 5 auf dem Rechner. 1.1 Projekt anlegen Bevor du das Programm Phase 5 startest, musst du einen Ordner anlegen,

Mehr

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

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

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

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

Webseiten erstellen mit Dreamweaver

Webseiten erstellen mit Dreamweaver Dreamweaver Dreamweaver ist ein HTML-Editor der Firma Adobe Systems bestehend aus einer Kombination eines WYSIWYG-Editors (what you see is what you get) mit paralleler Quelltextbearbeitung. Dreamweaver

Mehr

Webdesign, Aufgabestellung 1

Webdesign, Aufgabestellung 1 , Aufgabestellung 1 1. Teamarbeit Die Website wird in Teamarbeit gemacht (2er-Teams). Innerhalb des Teams werden Konzept, Design, Inhalt und Arbeitsverteilung besprochen und bestimmt. 2. Inhalte Es wird

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

Einführung: Gestalten von Internet-Seiten

Einführung: Gestalten von Internet-Seiten Einführung: Gestalten von Internet-Seiten Um zu verstehen, wie die Web-Seiten aus dem Web auf den Computer kommen, ist ein kleiner Blick in die Geschichte notwendig. Das Internet erreichte seinen Durchbruch

Mehr

Hermann von Helmholtz-Zentrum für Kulturtechnik Übung: Multimedia-Anwendungen in den Wissenschaften. Tutorium. Mozilla Composer. Ein kurzer Überblick

Hermann von Helmholtz-Zentrum für Kulturtechnik Übung: Multimedia-Anwendungen in den Wissenschaften. Tutorium. Mozilla Composer. Ein kurzer Überblick Tutorium Mozilla Composer Ein kurzer Überblick Vorbereitung: Projektordner erstellen Für jede projektierte Website wird zuerst ein eigener Projektordner erstellt, der alle zu publizierenden Dateien aufnimmt.

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

Erstellen von Web-Seiten

Erstellen von Web-Seiten Erstellen von Web-Seiten Grundlagen html: Zum Erstellen von html-seiten benötigen wir nur einen Text-Editor. Der Inhalt von HTML-Dateien steht in HTML-Elementen. HTML-Elemente werden durch so genannte

Mehr

Rufen Sie im Internet Explorer die folgende Adresse auf: www.dskv.de/webedition

Rufen Sie im Internet Explorer die folgende Adresse auf: www.dskv.de/webedition Diese Kurzanleitung soll Ihnen eine schnelle und einfache Bearbeitung Ihrer Seiten ermöglichen. Aus diesem Grunde kann hier nicht auf alle Möglichkeiten des eingesetzten Content-Management-Systems (CMS)

Mehr

HTML- Editor Phase5. Dieser Einstieg ist für absolute HTML-Neulinge gedacht, die weder den Editor Phase5 selbst, noch HTML kennen.

HTML- Editor Phase5. Dieser Einstieg ist für absolute HTML-Neulinge gedacht, die weder den Editor Phase5 selbst, noch HTML kennen. Quelle: http://www.clairette.de/tutorial/index.html http://www.meybohm.de Phase5 Editor Der Einstieg Dieser Einstieg ist für absolute HTML-Neulinge gedacht, die weder den Editor Phase5 selbst, noch HTML

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

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

2. HTML GRUNDLAGEN EINLEITUNG. Das WWW (word wide web) Überblick

2. HTML GRUNDLAGEN EINLEITUNG. Das WWW (word wide web) Überblick 2. HTML GRUNDLAGEN Überblick Das WWW (word wide web) Aufbau einer Webseite Die HTML-Sprache Struktur eines HTML-Dokuments Erstellen einer einfachen HTML-Datei EINLEITUNG Das WWW (word wide web) Der Begriff

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

Crash Kurs in HTML Frauenprojektlabor

Crash Kurs in HTML Frauenprojektlabor Crash Kurs in HTML Frauenprojektlabor Crash Kurs in HTML Frauenprojektlabor der FH-Dortmund 1 Crash Kurs in HTML (Frauenprojektlabor) Herzlich willkommen in unserem Crash-Kurs. In diesem Kurs sollt ihr

Mehr

Bedienungsanleitung GOZ-Handbuch der Landeszahnärztekammer Baden-Württemberg

Bedienungsanleitung GOZ-Handbuch der Landeszahnärztekammer Baden-Württemberg Bedienungsanleitung GOZ-Handbuch der Landeszahnärztekammer Baden-Württemberg LZK BW 12/2009 Bedienungsanleitung GOZ-Handbuch Seite 1 Lieferumfang Zum Lieferumfang gehören: Eine CD-Rom GOZ-Handbuch Diese

Mehr

Einführung in HTML. Autor : Martin Amelsberg (MartinAmelsberg@T-Online.de) Version : 4

Einführung in HTML. Autor : Martin Amelsberg (MartinAmelsberg@T-Online.de) Version : 4 Einführung in HTML Autor : Martin Amelsberg (MartinAmelsberg@T-Online.de) Version : 4 Inhaltsverzeichnis 1. Einleitung... 3 2. Was ist HTML?... 4 3. Aufbau einer HTML-Datei...4 4. Sonderzeichen und Umlaute...

Mehr

Formulare in html Bernd Bl umel Version: 1. April 2003

Formulare in html Bernd Bl umel Version: 1. April 2003 Formulare in html Bernd Blümel Version: 1. April 2003 Inhaltsverzeichnis 1 Formulare 2 1 Kapitel 1 Formulare Formulare sind in html die einzige Interaktionsmöglichkeit mit den Benutzern unserer Internet

Mehr

Die Unternehmensseite im Internet - pflegen ohne Programmierkenntnisse. Felix Kopp

Die Unternehmensseite im Internet - pflegen ohne Programmierkenntnisse. Felix Kopp Die Unternehmensseite im Internet - pflegen ohne Programmierkenntnisse Felix Kopp Orientierung Veröffentlichen und Aktualisieren ohne Programmierkenntnisse Bestehende Internet-Seite aktualisieren. oder

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

Inhalte mit DNN Modul HTML bearbeiten

Inhalte mit DNN Modul HTML bearbeiten Einführung Redaktoren Content Management System DotNetNuke Inhalte mit DNN Modul HTML bearbeiten DotNetNuke Version 7+ w3studio GmbH info@w3studio.ch www.w3studio.ch T 056 288 06 29 Letzter Ausdruck: 15.08.2013

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

Fachcurriculum ITG Albert-Schweitzer-Gemeinschaftsschule Klassenstufe 9/10 H. Bauer. Thema Inhalte/Umsetzung Programme Lehrplanbezug.

Fachcurriculum ITG Albert-Schweitzer-Gemeinschaftsschule Klassenstufe 9/10 H. Bauer. Thema Inhalte/Umsetzung Programme Lehrplanbezug. Fachcurriculum ITG Albert-Schweitzer-Gemeinschaftsschule Klassenstufe 9/10 H. Bauer Thema Grundlagen der Erstellung von Webseiten Maximalplan 1 Was man wissen sollten 2 Die erste Webseite mit HTML erstellen

Mehr

Web-Programmierung (WPR)

Web-Programmierung (WPR) Web-Programmierung (WPR) TFH-Berlin Sommer Semester 2008 Manfred Gruner mailto:wpr@gruner.org Web-Programmierung (WPR) Literatur: Web-Technologien (Heiko Wöhr) Konzepte Programmiermodelle - Architekturen

Mehr

Schulung Open CMS Editor

Schulung Open CMS Editor Schulung Open CMS Editor Um Ihr Projekt im OpenCMS zu bearbeiten brauchen Sie lediglich einen Webbrowser, am besten Firefox. Vorgehensweise beim Einrichten Ihrer Site im OpenCMS Erste Schritte Wenn Sie

Mehr

TYPO3 Redaktoren-Handbuch

TYPO3 Redaktoren-Handbuch TYPO3 Redaktoren-Handbuch Kontakt & Support: rdv interactive ag Arbonerstrasse 6 9300 Wittenbach Tel. 071 / 577 55 55 www.rdvi.ch Seite 1 von 38 Login http://213.196.148.40/typo3 Username: siehe Liste

Mehr

Es gibt situationsabhängig verschiedene Varianten zum Speichern der Dokumente. Word bietet im Menü DATEI unterschiedliche Optionen an.

Es gibt situationsabhängig verschiedene Varianten zum Speichern der Dokumente. Word bietet im Menü DATEI unterschiedliche Optionen an. 3. SPEICHERN DATEIEN SPEICHERN Dateien werden in Word Dokumente genannt. Jede Art von Datei, die Sie auf Ihrem Computer neu erstellen, befindet sich zuerst im Arbeitsspeicher des Rechners. Der Arbeitsspeicher

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

GEONET Anleitung für Web-Autoren

GEONET Anleitung für Web-Autoren GEONET Anleitung für Web-Autoren Alfred Wassermann Universität Bayreuth Alfred.Wassermann@uni-bayreuth.de 5. Mai 1999 Inhaltsverzeichnis 1 Technische Voraussetzungen 1 2 JAVA-Programme in HTML-Seiten verwenden

Mehr

HTML. HyperText Markup Language. Die Programmiersprache des WWW. Keine eigentliche Programmiersprache, sondern eher Seitenbeschreibungssprache

HTML. HyperText Markup Language. Die Programmiersprache des WWW. Keine eigentliche Programmiersprache, sondern eher Seitenbeschreibungssprache HTML HyperText Markup Language Die Programmiersprache des WWW Keine eigentliche Programmiersprache, sondern eher Seitenbeschreibungssprache systemübergreifend, plattformunabhängig (im Idealfall) HTML-Text

Mehr

Gorkana Datenbank: Versenden von Pressemitteilungen

Gorkana Datenbank: Versenden von Pressemitteilungen Gorkana Datenbank: Versenden von Pressemitteilungen Diese Anleitung beeinhaltet: Versand von Pressemitteilungen Empfänger auswählen E-Mail Format auswählen Erstellen von Pressemitteilungen Verwenden von

Mehr

Arbeiten im Datennetz der Universität Regensburg

Arbeiten im Datennetz der Universität Regensburg Wiwi-Workshop Uni Regensburg April 2002 Arbeiten im Datennetz der Universität Regensburg - Einführung in HTML, Teil II Arbeiten mit AOLPress - Dr. Wirtschaftswissenschaftliche Fakultät Universität Regensburg

Mehr

E-Commerce: IT-Werkzeuge. Web-Programmierung. Kapitel 4: Einführung in JavaScript Stand: 03.11.2014. Übung WS 2014/2015. Benedikt Schumm M.Sc.

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

Mehr

Über den Link Inhalte bearbeiten in der Navigation erreichen Sie den Online Editor.

Über den Link Inhalte bearbeiten in der Navigation erreichen Sie den Online Editor. Homepage bearbeiten mit dem ezillo.com Online Editor Bei ezillo.com können Sie für Ihre kostenlose Erotik Homepage eigene Unterseiten erstellen und bearbeiten. Dazu steht Ihnen mit dem Online Editor ein

Mehr

Klausur Kommunikation I. Sommersemester 2003. Dipl.-Ing. T. Kloepfer

Klausur Kommunikation I. Sommersemester 2003. Dipl.-Ing. T. Kloepfer Kommunikation I 1 Klausur Kommunikation I Sommersemester 2003 Dipl.-Ing. T. Kloepfer Bearbeitungsinformationen Aufbau der Klausur Die Klausur ist wie folgt aufgebaut: Die Klausur ist in 18 Aufgaben unterteilt.

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

Webdesign 1. PCC-Seminar Einheit 1 Di., 21.3.2006

Webdesign 1. PCC-Seminar Einheit 1 Di., 21.3.2006 Webdesign 1 PCC-Seminar Einheit 1 Di., 21.3.2006 Projekt Website Wir wollen eine Website gestalten und umsetzen! Aber wie fangen wir an? Grundsätzliches: Internet Print ein anderes Medium verlangt andere

Mehr

Gebrauchsanweisung Template Lernumgebung Einführung Übersicht:

Gebrauchsanweisung Template Lernumgebung Einführung Übersicht: Einführung Willkommen. Auf den nächsten Seiten erfahren Sie, wie Sie das Template Autodidaktische Lernumgebung benutzen, um Ihre eigene Lernumgebung zu erstellen. Sie werden Ihre Lernumgebung in Dreamweaver

Mehr

Anleitung zur Erstellung

Anleitung zur Erstellung Anleitung zur Erstellung Dieses Dokument beschreibt, wie Sie ein schulintern elektronisch abgelegtes Schulportfolio erstellen und einrichten, wenn Sie nicht das Programmpaket Schu-Q-Link verwenden. A.

Mehr

Anleitung zur Verwendung von Silverstripe 3.x

Anleitung zur Verwendung von Silverstripe 3.x Anleitung zur Verwendung von Silverstripe 3.x Inhaltsverzeichnis: 1. EINLEITUNG 2. ORIENTIERUNG 2.1 Anmelden am CMS 2.2 Die Elemente des Silverstripe CMS 2.3 Funktion des Seitenbaums 2.4 Navigieren mit

Mehr

HTML4 HTML4. Autorinnen: Tina Wegener, Linda York. Inhaltliches Lektorat: Andrea Weikert. 5. Ausgabe, 1. Aktualisierung, März 2010

HTML4 HTML4. Autorinnen: Tina Wegener, Linda York. Inhaltliches Lektorat: Andrea Weikert. 5. Ausgabe, 1. Aktualisierung, März 2010 HTML4 Autorinnen: Tina Wegener, Linda York Inhaltliches Lektorat: Andrea Weikert 5. Ausgabe, 1. Aktualisierung, März 2010 HERDT-Verlag für Bildungsmedien GmbH, Bodenheim Internet: www.herdt.com Alle Rechte

Mehr

Python CGI-Skripte erstellen

Python CGI-Skripte erstellen Python CGI-Skripte erstellen CGI (Common Gateway Interface)... ist eine Schnittstelle, um Scripte im Web bereitzustellen. ist eine Schnittstelle zwischen einem HTTP-Server und ausführbaren Programmen.

Mehr

Musterlösung für Schulen in Baden-Württemberg. Windows 2003. Basiskurs Windows-Musterlösung. Version 3. Stand: 19.12.06

Musterlösung für Schulen in Baden-Württemberg. Windows 2003. Basiskurs Windows-Musterlösung. Version 3. Stand: 19.12.06 Musterlösung für Schulen in Baden-Württemberg Windows 2003 Basiskurs Windows-Musterlösung Version 3 Stand: 19.12.06 Impressum Herausgeber Zentrale Planungsgruppe Netze (ZPN) am Kultusministerium Baden-Württemberg

Mehr

D a s B e g l e i t s c r i p t z u m

D a s B e g l e i t s c r i p t z u m H T M L f ü r A n f ä n g e r D a s B e g l e i t s c r i p t z u m K u r s Von Konrad Weidmann Im Wintersemester 2005/2006 Inhaltsverzeichnis 0. Einführung...3 1. Bedeutung...3 2. Benutzung...4 a) des

Mehr

Homepage: Startweb-Seite einer Person, einer Firma oder Behörde.

Homepage: Startweb-Seite einer Person, einer Firma oder Behörde. Grundbegriffe des Internets WWW: World Wide Web (weltweites Netz) Web-Seite: So wird eine einzelne Seite im Internet genannt. Homepage: Startweb-Seite einer Person, einer Firma oder Behörde. HTML: HyperText

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

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

Dateipfad bei Word einrichten

Dateipfad bei Word einrichten Dateipfad bei Word einrichten Word 2003 1. In der Menüleiste klicken Sie auf Ansicht, anschließend auf den Unterpunkt Kopf- und Fußzeile : 2. Wechseln Sie nun in die Fußzeile. 3. Im Autotext-Menü klicken

Mehr

Visual Web Developer Express Jam Sessions

Visual Web Developer Express Jam Sessions Visual Web Developer Express Jam Sessions Teil 1 Die Visual Web Developer Express Jam Sessions sind eine Reihe von Videotutorials, die Ihnen einen grundlegenden Überblick über Visual Web Developer Express,

Mehr

Lehrgang KompoZer Teil 1

Lehrgang KompoZer Teil 1 KompoZer ist die Verbesserung von NVU, eines WYSIWYG-Programms zum Erstellen einer Homepage. WYSIWYG heißt (What You See - Is What You Get = Was du siehst, ist, was du bekommst). Es basiert auf html (Hypertext

Mehr

http://www.nvu-composer.de

http://www.nvu-composer.de Kapitel 16 Seite 1 Ein portabler Web-Editor Wer viel Zeit in eine Website investieren will ist gut beraten, eine professionelle Software für Webdesigner zu beschaffen. Diese Programme sind sehr leistungsfähig,

Mehr

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

Mehr

4 Die FrontPage-Website

4 Die FrontPage-Website 4 Die FrontPage-Website Ziele dieses Kapitels A Sie lernen die Struktur einer Website kennen. A Sie können Websites verschachteln. A Sie können Websites konvertieren. Microsoft Office Frontpage 2003 Einführung

Mehr

Aufgaben HTML Formulare. Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, claus.brell@hs-niederrhein.de, Wirtschaftsinformatik, Statistik

Aufgaben HTML Formulare. Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, claus.brell@hs-niederrhein.de, Wirtschaftsinformatik, Statistik 1 Aufgaben HTML Formulare Aufgabe 1 (Vorbereitung) Google Suche 2 Probieren vor Studieren.. Arbeitsauftrag: 1.) Fügen Sie mit Notepad++ in Ihrer Datei index.html den unten gezeigten Quelltextschnipsel

Mehr

1 ÖFFNEN UND SPEICHERN VON DATEIEN... 2

1 ÖFFNEN UND SPEICHERN VON DATEIEN... 2 1 ÖFFNEN UND SPEICHERN VON DATEIEN... 2 2 SEITENANSICHT, ZOOM, FORMATIERUNGSZEICHEN... 2 2.1 SEITENANSICHT... 2 2.2 ZOOM... 2 2.3 FORMATIERUNGSZEICHEN... 3 3 MARKIEREN... 3 3.1 MARKIEREN VON ZEICHEN...

Mehr

Glossar. KML TP2, Informationsdienste

Glossar. KML TP2, Informationsdienste KML TP2, Informationsdienste BaseEngine Die BaseEngine ist für die Darstellung der gesamten Webseite verantwortlich. Sie sorgt z.b. für den Aufbau der Navigationsmenüs. Jedes VIP-Objekt ist automatisch

Mehr

Formatieren in Word 2007

Formatieren in Word 2007 Formatieren in Word 2007 Formatierungsmöglichkeiten im Allgemeinen Einfache Formatierungen werden hier vorgenommen, In der Regel ist es aber sinnvoller mit Formatvorlagen für unterschiedliche Absätze zu

Mehr

Glossar. SVG-Grafiken in Bitmap-Grafikformate. Anweisung Eine Anweisung ist eine Folge aus Schlüsselwörtern, Variablen, Objekten,

Glossar. SVG-Grafiken in Bitmap-Grafikformate. Anweisung Eine Anweisung ist eine Folge aus Schlüsselwörtern, Variablen, Objekten, Glossar Anweisung Eine Anweisung ist eine Folge aus Schlüsselwörtern, Variablen, Objekten, Methoden und/oder Eigenschaften, die eine bestimmte Berechnung ausführt, eine Eigenschaft ändert oder eine Methode

Mehr

ECDL WebStarter Syllabus Version 1.5

ECDL WebStarter Syllabus Version 1.5 ECDL WebStarter Syllabus Version 1.5 Schon im World Wide Web vertreten? syllabusweiss3.indd 1 19.01.2007 13:46:56 EUROPÄISCHER COMPUTER FÜHRERSCHEIN ECDL WebStarter Syllabus Version 1.5 The European Computer

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

Einführung in die Skriptsprache PHP

Einführung in die Skriptsprache PHP Einführung in die Skriptsprache PHP 1. Erläuterungen PHP ist ein Interpreter-Programm, das auf dem Server abgelegte Dateien dynamisch, d.h. zur Zeit des Zugriffes, aufbereitet. Zusätzlich zum normalen

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

Anleitung zur Pflege der Homepage über den Raiffeisen-Homepage-Manager

Anleitung zur Pflege der Homepage über den Raiffeisen-Homepage-Manager Anleitung zur Pflege der Homepage über den Raiffeisen-Homepage-Manager Homepage-Manager Navigation Home Der Homepage-Manager bietet die Möglichkeit im Startmenü unter dem Punkt Home einfach und schnell

Mehr

DYNAMISCHE SEITEN. Warum Scriptsprachen? Stand: 11.04.2005. CF Carola Fichtner Web-Consulting http://www.carola-fichtner.de

DYNAMISCHE SEITEN. Warum Scriptsprachen? Stand: 11.04.2005. CF Carola Fichtner Web-Consulting http://www.carola-fichtner.de DYNAMISCHE SEITEN Warum Scriptsprachen? Stand: 11.04.2005 CF Carola Fichtner Web-Consulting http://www.carola-fichtner.de I N H A L T 1 Warum dynamische Seiten?... 3 1.1 Einführung... 3 1.2 HTML Seiten...

Mehr

Eine Einführung in HTML

Eine Einführung in HTML Eine Einführung in HTML Inhaltsverzeichnis Grundaufbau einer Webseite... 2 Grundlegende Steuerzeichen... 3 Textformatierungen... 4 Überschriften und Listen... 5 Tabellen... 6 Bilder einfügen... 7 Hyperlinks

Mehr

Robert R. Agular Thomas Kobert. 5. Auflage HTML. Inklusive CD-ROM

Robert R. Agular Thomas Kobert. 5. Auflage HTML. Inklusive CD-ROM Robert R. Agular Thomas Kobert 5. Auflage HTML Inklusive CD-ROM Vorwort 13 Einleitung 14 Arbeitsschritte 14 Wichtige Stellen im Buch 14 Buffi-Infokästen 14 Aufgaben 15 Wohin mit den Übungen? 15 HTML-Ordner

Mehr

Dynamische Webseiten mit PHP 1

Dynamische Webseiten mit PHP 1 Dynamische Webseiten mit PHP 1 Webserver, PHP und MYSQL Ein Webserver dient dazu, Internetseiten an PCs zu senden, von denen sie aufgerufen werden. Beispiel: Sie tippen im Browser www.fosbosweiden.de ein.

Mehr

Kurze Einführung in PHP

Kurze Einführung in PHP Kurze Einführung in PHP Dieser Text ist eine Art "Schnupperkurs" in Sachen PHP: Sie lernen Grundsätzliches über dynamische Webseiten und PHP. Außerdem lernen Sie drei typische Anwendungsbeispiele für PHP

Mehr

Homepage erstellen 2002 Seite 1

Homepage erstellen 2002 Seite 1 Homepage erstellen 2002 Seite 1 1 Warum ein Internet-Auftritt?... 2 1.1 Gründe... 2 1.2 Einige Grundregeln für den Web-Auftritt... 2 1.3 Vorteile von HTML... 2 1.4 Nachteile von HTML... 2 2 Grundlagen

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