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

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

-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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Die wichtigsten HyperTextMarkupLanguage tags 1(6)

Die wichtigsten HyperTextMarkupLanguage tags 1(6) Die wichtigsten HyperTextMarkupLanguage tags 1(6) HTML ist entgegen vielen Gerüchten keine Programmiersprache, sondern lediglich ein Hilfsmittel um Text und Bild zu formatieren, welche in einem Browser

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

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

Grundlagen der EDV 3. Vorlesung mit Übungen. Dipl. Ing. Martin Ney

Grundlagen der EDV 3. Vorlesung mit Übungen. Dipl. Ing. Martin Ney Grundlagen der EDV 3 Vorlesung mit Übungen Dipl. Ing. Martin Ney Grundlagen der EDV 3 HTML und CSS HTML und PHP CMS Datenbanken SQL Grundlagen der EDV 2/29 Internetprotokolle HTTP zum Abruf von Internetdateien

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

1 Websites mit Frames

1 Websites mit Frames 1 Websites mit Frames Mehrere Seiten in einer einzelnen Seite anzeigen - Was sind Frames und wie funktionieren sie? - Was sind die Vor- und Nachteile von Frames? - Wie erstellt man eine Frames- Webseite?

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

Datenbank-basierte Webserver

Datenbank-basierte Webserver Datenbank-basierte Webserver eines Datenbank-basierten Webservers Karl Riedling Institut für Sensor- und Aktuatorsysteme 2 zur Gestaltung von Klare, übersichtliche Seitengestaltung Hinreichende Navigationshilfen

Mehr

Beleg 1/HTML: Erstellen einer Beispiel-Webseite

Beleg 1/HTML: Erstellen einer Beispiel-Webseite Beleg 1/HTML: Erstellen einer Beispiel-Webseite Als Beleg und zur Vertiefung der Kenntnisse in HTML ist eine Beispielwebseite zu erstellen, die die kennengelernten Tags und Attribute verwendet. Arbeiten

Mehr

Designänderungen mit CSS und jquery

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

Mehr

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

Tab. Seitenverwaltung Dokumentansichten

Tab. Seitenverwaltung Dokumentansichten Einstieg Hauptbildschirm Menuleiste Symbolleiste Bearbeiten Symbolleisten Format Tab Tab schliessen Tab, nicht gespeichert Seitenverwaltung Dokumentansichten Bearbeitungsfenster Pfad zum aktuellen HTML-Tag

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

FlowFact Alle Versionen

FlowFact Alle Versionen Training FlowFact Alle Versionen Stand: 13.09.2005 E-Mail Briefpapier und Signatur (Visitenkarte) erstellen Mit FlowFact können Sie beliebig viele E-Mail-Vorlagen speichern, um zu gegebenem Anlass (z.b.

Mehr

Musterlösung Klausur Kommunikation I. Sommersemester 2004. Dipl.-Ing. T. Kloepfer

Musterlösung Klausur Kommunikation I. Sommersemester 2004. Dipl.-Ing. T. Kloepfer Kommunikation I 1 Musterlösung Klausur Kommunikation I Sommersemester 2004 Dipl.-Ing. T. Kloepfer Bearbeitungsinformationen Aufbau der Klausur Die Klausur ist wie folgt aufgebaut: Die Klausur ist in 18

Mehr

Arbeiten mit. Eine einführende Schulung für Redakteure VGT. Michael Fritz, 21. Oktober 2006

Arbeiten mit. Eine einführende Schulung für Redakteure VGT. Michael Fritz, 21. Oktober 2006 Arbeiten mit Eine einführende Schulung für Redakteure VGT Michael Fritz, 21. Oktober 2006 1 Inhalte 1. TYPO3 - Ihr neues Content-Management-System S. 3 ff. 1.1 Was ist ein CMS 1.2 Wie komme ich rein 1.3

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

Begriffe (siehe auch zusätzliche Arbeitsblätter)

Begriffe (siehe auch zusätzliche Arbeitsblätter) Begriffe (siehe auch zusätzliche Arbeitsblätter) Die URL-Adresse(Uniform Resource Locator)(einheitlicher Quellenlokalisierer)ist die Bezeichnung die gesamte Adresse, wie z.b.: www.dscc-berlin.de http://

Mehr

Herzlich Willkommen zur Informatik I. Bits und Bytes. Zahlensystem zur Basis 10 (Dezimalzahlen) Warum Zahlensysteme betrachten?

Herzlich Willkommen zur Informatik I. Bits und Bytes. Zahlensystem zur Basis 10 (Dezimalzahlen) Warum Zahlensysteme betrachten? Herzlich Willkommen zur Informatik I Bits und Bytes Zahlen im Computer: Binärzahlen, Hexadezimalzahlen Text im Computer: ASCII-Code und Unicode Quelle: http://www.schulphysik.de/rgb.html Bit: eine binäre

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

Anleitungen zum Einfügen eines Partnerlinks in Ihre Website

Anleitungen zum Einfügen eines Partnerlinks in Ihre Website www.satnam.de Anleitungen zum Einfügen eines Partnerlinks in Ihre Website A. Mittels eines Content-Management-Systems (CMS) oder Weblogs Seiten 2-6 B. Mittels eines Homepagebaukastens, z.b. von 1&1 Seiten

Mehr

Diese Anleitung bezieht sich auf FixFoto, V 3.40. In älteren oder neueren Versionen könnte die Arbeitsweise anders sein.

Diese Anleitung bezieht sich auf FixFoto, V 3.40. In älteren oder neueren Versionen könnte die Arbeitsweise anders sein. Pfade einstellen Stand: Dezember 2012 Diese Anleitung bezieht sich auf FixFoto, V 3.40. In älteren oder neueren Versionen könnte die Arbeitsweise anders sein. Diese Anleitung soll zeigen, wie man Pfad-Favoriten

Mehr

Eine Mini-Website an einem Nachmittag

Eine Mini-Website an einem Nachmittag Erforderliche Grundausstattung Ein Computer, der mit einer Software zum Erstellen einfacher Textdateien ausgestattet ist (SimpleText, Text-Editor...) Ein Internetanschluss Eine Software mit der man im

Mehr

Vielleicht lesen Sie dieses Buch, weil Sie eine Möglichkeit suchen, Bilder auf Ihrer Website

Vielleicht lesen Sie dieses Buch, weil Sie eine Möglichkeit suchen, Bilder auf Ihrer Website g g g g Der Start mit jquery In diesem Kapitel jquery holen Eine Testumgebung erstellen jquery in einer Webseite verwenden Code ausführen, nachdem eine Webseite geladen wurde 1 Vielleicht lesen Sie dieses

Mehr

Wiederholung float+clear. Grundlagen Webgestaltung Seite 136

Wiederholung float+clear. Grundlagen Webgestaltung Seite 136 Wiederholung float+clear Grundlagen Webgestaltung Seite 136 float und clear clear kann für mehrspaltige Layouts verwenden werden. Jedoch kann das auch zu ungewollten Effekten führen. Angenommen eine Webseite

Mehr

Userhandbuch. Version B-1-0-2 M

Userhandbuch. Version B-1-0-2 M Userhandbuch Version B-1-0-2 M Inhaltsverzeichnis 1.0 Was bietet mir SERVRACK?... 3 1.1 Anmeldung... 3 1.2 Passwort vergessen?... 3 1.3 Einstellungen werden in Realtime übernommen... 4 2.0 Die SERVRACK

Mehr

Konfigurieren einer Caritas- Startseite für Abteilungen

Konfigurieren einer Caritas- Startseite für Abteilungen Konfigurieren einer Caritas- Startseite für Abteilungen Jürgen Eckert Domplatz 3 96049 Bamberg Tel (09 51) 5 02 2 75 Fax (09 51) 5 02 2 71 Mobil (01 79) 3 22 09 33 E-Mail eckert@erzbistum-bamberg.de Im

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

Terminland Free / Easy / Profi Einbindung von Terminland in Ihre Website

Terminland Free / Easy / Profi Einbindung von Terminland in Ihre Website Terminland Free / Easy / Profi Einbindung von Terminland in Ihre Website Dokumentation: 2.0 Erstellt durch: Hartwig Schulz Datum: 18.02.2013 Einbindung von Terminland in Ihre Website Seite 1 von 14 Inhaltsverzeichnis

Mehr

Diese Anleitung zeigt dir, wie du eine Einladung mit Microsoft Word gestalten kannst.

Diese Anleitung zeigt dir, wie du eine Einladung mit Microsoft Word gestalten kannst. Diese Anleitung zeigt dir, wie du eine Einladung mit Microsoft Word gestalten kannst. Bevor es losgeht Wenn du mal etwas falsch machst ist das in Word eigentlich kein Problem! Den Rückgängig-Pfeil (siehe

Mehr

Kurzanleitung für das CMS Joomla 3.x

Kurzanleitung für das CMS Joomla 3.x Kurzanleitung für das CMS Joomla 3.x 1. Login ins Backend Die Anmeldung ins sogenannte Backend (die Verwaltungsebene) der Website erfolgt über folgenden Link: www.name-der-website.de/administrator. Das

Mehr

Einführung Responsive Webdesign

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

Mehr

Inhaltsverzeichnis. Mit dem WEB.DE WebBaukasten zur eigenen Homepage!...2. Schritt 1: Design auswählen...3

Inhaltsverzeichnis. Mit dem WEB.DE WebBaukasten zur eigenen Homepage!...2. Schritt 1: Design auswählen...3 Inhaltsverzeichnis Mit dem WEB.DE WebBaukasten zur eigenen Homepage!...2 Schritt 1: Design auswählen...3 Schritt 2: Umfang und Struktur der Seiten bestimmen...7 Schritt 3: Inhalte bearbeiten...9 Grafik

Mehr

FTP HOWTO. zum Upload von Dateien auf Webserver. Stand: 01.01.2011

FTP HOWTO. zum Upload von Dateien auf Webserver. Stand: 01.01.2011 FTP HOWTO zum Upload von Dateien auf Webserver Stand: 01.01.2011 Copyright 2002 by manitu. Alle Rechte vorbehalten. Alle verwendeten Bezeichnungen dienen lediglich der Kennzeichnung und können z.t. eingetragene

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

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

PHP Einsteiger Tutorial Kapitel 4: Ein Email Kontaktformular in PHP Version 1.0 letzte Änderung: 2005-02-03

PHP Einsteiger Tutorial Kapitel 4: Ein Email Kontaktformular in PHP Version 1.0 letzte Änderung: 2005-02-03 PHP Einsteiger Tutorial Kapitel 4: Ein Email Kontaktformular in PHP Version 1.0 letzte Änderung: 2005-02-03 Bei dem vierten Teil geht es um etwas praktisches: ein Emailformular, dass man auf der eigenen

Mehr

Das Paket enthält: vionlink-formmailer.php formular.htm meldung_template.htm danke_template.htm src/font.tff src/bg.png src/capmaker.

Das Paket enthält: vionlink-formmailer.php formular.htm meldung_template.htm danke_template.htm src/font.tff src/bg.png src/capmaker. Das Paket enthält: vionlink-formmailer.php formular.htm meldung_template.htm danke_template.htm src/font.tff src/bg.png src/capmaker.php eine Nutzungslizenz Lizenz- und Nutzungsbestimmungen.pdf dieses

Mehr

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

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

Mehr

Kapitel 4 HTML. Hypertext Markup Language

Kapitel 4 HTML. Hypertext Markup Language Kapitel 4 HTML Hypertext Markup Language 1 Kapitel 4 HTML 1. World Wide Web (WWW) 2. HTML-Dokumente 3. HTML-Tags 4. Sonderzeichen 5. Farben 6. Hyperlinks 7. Bilder 8. Dynamische HTML-Dokumente 2 1. World

Mehr

TYPO3-Kurzreferenz für Redakteure

TYPO3-Kurzreferenz für Redakteure TYPO3-Kurzreferenz für Redakteure Die Kurzreferenz orientiert sich weitgehend an den TYPO3 v4 Schulungsvideos. Es kann jedoch geringfügige Abweichungen geben, da in den Videos auf didaktisch sinnvolles

Mehr

qwertyuiopasdfghjklzxcvbnmqwerty uiopasdfghjklzxcvbnmqwertyuiopasd fghjklzxcvbnmqwertyuiopasdfghjklzx cvbnmqwertyuiopasdfghjklzxcvbnmq

qwertyuiopasdfghjklzxcvbnmqwerty uiopasdfghjklzxcvbnmqwertyuiopasd fghjklzxcvbnmqwertyuiopasdfghjklzx cvbnmqwertyuiopasdfghjklzxcvbnmq qwertyuiopasdfghjklzxcvbnmqwerty uiopasdfghjklzxcvbnmqwertyuiopasd fghjklzxcvbnmqwertyuiopasdfghjklzx cvbnmqwertyuiopasdfghjklzxcvbnmq Konzept für die e Learning Fortbildung wertyuiopasdfghjklzxcvbnmqwertyui

Mehr

11 Tabellen als Inhaltselement (ohne RichTextEditor)

11 Tabellen als Inhaltselement (ohne RichTextEditor) 11 Tabellen als Inhaltselement (ohne RichTextEditor) Inhaltsverzeichnis 11 Tabellen als Inhaltselement (ohne RichTextEditor) 1 Vorbemerkung.......................................... 1 11.1 Eine einfache

Mehr

Veröffentlichen von mit der Kamera aufgenommenen Videos auf Webseiten

Veröffentlichen von mit der Kamera aufgenommenen Videos auf Webseiten Veröffentlichen von mit der Kamera aufgenommenen Videos auf Webseiten Dieses Dokument enthält Informationen über das Veröffentlichen von mit der Kamera aufgenommenen Videos auf einer Webseite. Anpassen

Mehr

Benutzerhandbuch. Gästebuch Software - YellaBook v1.0 http://www.yellabook.de. Stand: 01.08.2012. by YellaBook.de - Alle Rechte vorbehalten.

Benutzerhandbuch. Gästebuch Software - YellaBook v1.0 http://www.yellabook.de. Stand: 01.08.2012. by YellaBook.de - Alle Rechte vorbehalten. Benutzerhandbuch Gästebuch Software - YellaBook v1.0 http://www.yellabook.de Stand: 01.08.2012 Inhalt 1 Funktionen... 3 2 Systemanforderungen... 4 3 Installation... 4 4 Einbinden des Gästebuchs... 5 5

Mehr

Dynamische Webseiten

Dynamische Webseiten Dynamische Webseiten Seminar Medientechnik 30.06.2003 Dynamische Webseiten 1 Inhalt Allgemeine Funktionsweise eines Webservers Grundgedanke von dynamischen Webseiten Einschub: Dynamische Seitenerzeugung

Mehr

Homepagevorlagen anpassen

Homepagevorlagen anpassen Homepagevorlagen anpassen Die Grammiweb-Homepagevorlagen bieten Ihnen komplett vorgefertigte Webseiten, die Sie einfach und unkompliziert an Ihre eigenen Bedürfnisse und Anforderungen anpassen können.

Mehr

Frontend Backend Administration Frontend Backend Administration Template

Frontend Backend Administration Frontend Backend Administration Template Begriffe Frontend Backend Administration Bei Contentmanagementsystemen (CMS) unterscheidet man zwischen zwei Bereichen, dem sogenannten Frontend und dem Backend Bereich. Der Backend wird häufig als Administration

Mehr

Vielen Dank, dass Sie sich für die Software der myfactory International GmbH entschieden haben.

Vielen Dank, dass Sie sich für die Software der myfactory International GmbH entschieden haben. Vielen Dank, dass Sie sich für die Software der myfactory International GmbH entschieden haben. Um alle Funktionen unserer Software nutzen zu können, sollten Sie bitte in Ihrem Browser folgende Einstellungen

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

UMGANG MIT MICROSOFT WORD ~DER EINSTIEG~

UMGANG MIT MICROSOFT WORD ~DER EINSTIEG~ UMGANG MIT MICROSOFT WORD ~DER EINSTIEG~ INHALT Inhalt... 1 1. Titelblatt... 1 1.1 Inhalt... 1 1.2 Gestaltung... 2 1.3 Kopf-und Fußzeile... 3 2. Seitenlayout... 4 2.1 Typografie... 4 2.2 Seitenränder...

Mehr

Erstellung einer Homepage

Erstellung einer Homepage Erstellung einer Homepage 1) Woher bekomme ich eine Homepage? Vielfach haben Sie schon jetzt die Möglichkeit, kostenlos Webspace für die eigene Homepage zu nutzen. Die meisten Internet-Provider bieten

Mehr

Der Editor und seine Funktionen

Der Editor und seine Funktionen Der Editor und seine Funktionen Für die Eingabe und Änderung von Texten steht Ihnen im Pflegemodus ein kleiner WYSIWYG-Editor zur Verfügung. Tinymce 1 ist ein Open Source Javascript-Editor, der mittlerweile

Mehr

RÖK Typo3 Dokumentation

RÖK Typo3 Dokumentation 2012 RÖK Typo3 Dokumentation Redakteur Sparten Eine Hilfe für den Einstieg in Typo3. Innpuls Werbeagentur GmbH 01.01.2012 2 RÖK Typo3 Dokumentation Inhalt 1) Was ist Typo3... 3 2) Typo3 aufrufen und Anmelden...

Mehr

Workshop: Jugendkreis goes online - Erstellung einer Homepage für den eigenen Jugendkreis (für Anfänger ohne Grundkenntnisse geeignet)

Workshop: Jugendkreis goes online - Erstellung einer Homepage für den eigenen Jugendkreis (für Anfänger ohne Grundkenntnisse geeignet) Workshop: Jugendkreis goes online - Erstellung einer Homepage für den eigenen Jugendkreis (für Anfänger ohne Grundkenntnisse geeignet) Ziele: Wesentliche Informationen über die Webseiten-Erstellung Was

Mehr

Open Source. Thomas Weibel, Multi & Media thomas.weibel@bluewin.ch www.thomasweibel.ch

Open Source. Thomas Weibel, Multi & Media thomas.weibel@bluewin.ch www.thomasweibel.ch Open Source Thomas Weibel, Multi & Media thomas.weibel@bluewin.ch www.thomasweibel.ch Inhalt 1. Begriff, Lizenzen 2. HTML 5, Nachschlagewerke 3. Software 4. Linux: Ubuntu 5. Content-Management-Systeme

Mehr

HTML Programmierung. Dr. Leander Brandl BRG Keplerstraße - A-8020 Graz Universität Graz - Institut für Experimentalphysik Fachdidaktik der Physik

HTML Programmierung. Dr. Leander Brandl BRG Keplerstraße - A-8020 Graz Universität Graz - Institut für Experimentalphysik Fachdidaktik der Physik 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 Inhaltsverzeichnis -

Mehr

Kurzanleitung Drupal. 1. Anmeldung

Kurzanleitung Drupal. 1. Anmeldung Kurzanleitung Drupal 1. Anmeldung Anmeldung erfolgt bis zum Umzug unter http://haut.mjk-design.de/login und nach erfolgreichem Domainumzug unter http://www.haut.net/login mit Benutzername und Passwort.

Mehr

Evaluation der Barrierefreiheit mit der Firefox Web Developer Toolbar

Evaluation der Barrierefreiheit mit der Firefox Web Developer Toolbar Evaluation der Barrierefreiheit mit der Firefox Web Developer Toolbar Viele Betreiber von Webseiten sind sich unsicher, wie sie die Barrierefreiheit ihrer Webseite evaluieren können. Der Vortrag soll praktikable

Mehr

Webdesign Tutorial. Einleitung & Vorschau

Webdesign Tutorial. Einleitung & Vorschau Webdesign Tutorial Einleitung & Vorschau Heutzutage kann sich jeder ohne größere Anstrengungen eine eigene Homepage zulegen. Es gibt zahlreiche Anbieter, wo man sich kostenlos und ohne HTML-Kenntnisse

Mehr

Programmieren 2 (Prof. Hasbargen) Klausur

Programmieren 2 (Prof. Hasbargen) Klausur Programmieren 2 (Prof. Hasbargen) 1 Klausur Aufgabe 1 (10 Punkte) Dynamisierung von HTML-Seiten HTML-Seiten sind eine gängige Art und Weise, Informationen darzustellen. Nennen Sie die Gründe, welche Vorteile

Mehr

In dieser Lektion erlernen Sie die Verwendung von Vorlagen, die Anwendung von Mastern sowie die Bearbeitung von Kopf- und Fußzeilen.

In dieser Lektion erlernen Sie die Verwendung von Vorlagen, die Anwendung von Mastern sowie die Bearbeitung von Kopf- und Fußzeilen. In dieser Lektion erlernen Sie die Verwendung von Vorlagen, die Anwendung von Mastern sowie die Bearbeitung von Kopf- und Fußzeilen. Was erfahren Sie in diesem Kapitel? Wie Sie den Folienmaster anwenden

Mehr

1. Aufrufen des Content Management Systems (CMS)

1. Aufrufen des Content Management Systems (CMS) 1. Aufrufen des Content Management Systems (CMS) Das CMS WebSiteBaker 2.5.2 ist ein kostenloses auf PHP basierendes Inhaltsverwaltungssystem, mit dem es möglich ist Inhalte von Webseiten schnell und einfach

Mehr

Spamschutz bei TYPO3. von Bernd Warken bei Fa. Netcos AG

Spamschutz bei TYPO3. von Bernd Warken bei Fa. Netcos AG Spamschutz bei TYPO3 von Bernd Warken bei Fa. Netcos AG Kapitel 0: Einleitung 3 0.1 Vorwort 3 0.2 Lizenz 3 Kapitel 1: Aktivierung und Konfiguration 4 1.1 config.spamprotectemailaddresses 4 1.2 config.spamprotectemailaddresses_atsubst

Mehr

HTML-Tutorial. Grundlegende HTML-Kenntnisse

HTML-Tutorial. Grundlegende HTML-Kenntnisse 2008 HTML-Tutorial Grundlegende HTML-Kenntnisse Dieses HTML-Tutorial gibt Ihnen die grundlegendsten HTML-Kenntnisse mit an die Hand, die Sie für die Erstellung Ihrer ersten Webseite benötigen. Jan Pionzewski

Mehr

2 GRUNDLEGENDE PROGRAMMBEDIENUNG

2 GRUNDLEGENDE PROGRAMMBEDIENUNG In diesem Kapitel erfahren Sie, wie das Textverarbeitungsprogramm Microsoft Word 2007 gestartet wird, wie Sie bestehende Dokumente öffnen und schließen oder Dokumente neu erstellen können. Es wird erläutert,

Mehr

Web-Seiten als Programmoberflächen - CGI-Scripte selbst erstellt

Web-Seiten als Programmoberflächen - CGI-Scripte selbst erstellt Seite 18 Ausgabe 20 - Dezember 2000 ZPG-Mitteilungen für gewerbliche Schulen Web-Seiten als Programmoberflächen - CGI-Scripte selbst erstellt Der unter Linux übliche WEB-Server Apache bietet die Möglichkeit

Mehr

Hinweise für Autorinnen und Autoren zur Erstellung eines strukturierten Manuskriptes der Reihe Internationales Rechtsinformatik Symposion

Hinweise für Autorinnen und Autoren zur Erstellung eines strukturierten Manuskriptes der Reihe Internationales Rechtsinformatik Symposion Scharrstraße 2 70563 Stuttgart Telefon 07 11/ 73 85-0 Telefax 07 11/ 73 26 94 Hinweise für Autorinnen und Autoren zur Erstellung eines strukturierten Manuskriptes der Reihe Internationales Rechtsinformatik

Mehr

Kapitel 1 - Warum TYPO3?

Kapitel 1 - Warum TYPO3? Kapitel 1 - Warum TYPO3? TYPO3 ist ein leistungsfähiges Content-Management-System, mit dem Sie alle Inhalte Ihrer Homepage im Handumdrehen selbst verwalten können. Sie müssen kein Programmierer sein und

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

Dreamweaver 8 Homepage erstellen Teil 1

Dreamweaver 8 Homepage erstellen Teil 1 Dreamweaver 8 Homepage erstellen Teil 1 Voraussetzungen Das vorliegende Skriptum knüpft an das Skriptum Dreamweaver_Einführung an und setzt voraus, dass du dieses bereits durchgearbeitet hast. Planung

Mehr

Handbuch für Redakteure für Typo3. Version 1.1. Datum: 15.2.2005. Georg Ringer

Handbuch für Redakteure für Typo3. Version 1.1. Datum: 15.2.2005. Georg Ringer Handbuch für Redakteure für Typo3 Version 1.1 Datum: 15.2.2005 Georg Ringer Inhaltsverzeichnis 1. Login... 3 2. Oberfläche von Typo3... 4 2.1. Modulleiste... 5 2.2. Navigationsleiste... 6 3. Einfache Funktionen...

Mehr

1 Oberfläche zum Ausführen der PHP-Dateien

1 Oberfläche zum Ausführen der PHP-Dateien 1 Oberfläche zum Ausführen der PHP-Dateien PHP-Skripte werden vom Webserver ausgeführt. Wenn lokal am Rechner PHP-Dateien erstellt und getestet werden, dann ist es erforderlich, sie im Internet-Explorer

Mehr

Schulungsunterlagen CMS-Version 4.0

Schulungsunterlagen CMS-Version 4.0 Schulungsunterlagen CMS-Version 4.0 BDKJ Einloggen in das CMS (Stand: Juni 2009) Jürgen Eckert Domplatz 3 96049 Bamberg Tel (09 51) 5 02-2 75 Fax (09 51) 5 02-2 71 - Mobil (01 79) 3 22 09 33 E-Mail eckert@erzbistum-bamberg.de

Mehr

php Hier soll ein Überblick über das Erstellen von php Programmen gegeben werden. Inhaltsverzeichnis 1.Überblick...2 2.Parameterübergabe...

php Hier soll ein Überblick über das Erstellen von php Programmen gegeben werden. Inhaltsverzeichnis 1.Überblick...2 2.Parameterübergabe... php Hier soll ein Überblick über das Erstellen von php Programmen gegeben werden. Inhaltsverzeichnis 1.Überblick...2 2.Parameterübergabe...7 3.Zugriff auf mysql Daten...11 Verteilte Systeme: php.sxw Prof.

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 1 HTML Mehr als nur ein paar Buchstaben Bevor wir mit dem Erstellen unserer ersten Webseite anfangen, solltest du wissen, was HTML überhaupt

Mehr

Dokumentation für die Arbeit mit dem Redaktionssystem (Content Management System -CMS) zur Wartung Ihrer Homepage (Website)

Dokumentation für die Arbeit mit dem Redaktionssystem (Content Management System -CMS) zur Wartung Ihrer Homepage (Website) Dokumentation für die Arbeit mit dem Redaktionssystem (Content Management System -CMS) zur Wartung Ihrer Homepage (Website) Redaktion Mit der Redaktion einer Webseite konzentrieren Sie sich auf die inhaltliche

Mehr