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

Save this PDF as:
 WORD  PNG  TXT  JPG

Größe: px
Ab Seite anzeigen:

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

Transkript

1 X 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 2006/2007

2 Inhaltsverzeichnis 1. Einführung Bedeutung Benutzung...4 a) des Scripts...4 b) der Programme Einführung in die XHTML Überarbeitung...5 A. (X)HTML für Anfänger...6 I. Grundwerkzeug Tag Lehre Grundgerüst Änderungen in XHTML...7 II. Headbereich Titel Meta Tags...8 III. Bodybereich Bodykonfiguration...9 a) <p> Tag...10 b) <span> Tag...12 c) <ins> und <del> Links zu anderen Seiten Anker in der Seite...14 IV. Tabellen...15 V. Bilder...17 B. Farb- und Zeichentabellen...18 I. Farbtabelle:...18 II. Sonderzeichen:...18 C. Annex...19 I. Tagreferenz...19 II. Dateireferenz...21 D. Literatur...22 I. Bücher...22 II. ebooks

3 1. Einführung 1. Bedeutung HTML (Hypertext Markup Language) ist heute das grundlegende und führende "Werkzeug", um Webauftritte im Internet zu präsentieren. Im Laufe der Zeit haben sich einige Abwandlungen entwickelt, die heute das Erstellen von Internetseiten unterstützen (DHTML, XHTML, XML usw.). Ergänzend wird heute mit einigen anderen Werkzeugen gearbeitet, um aus der einfachen Websprache HTML beispielsweise ein Auktionshaus wie ebay oder Verkaufsangebote wie Amazon zu realisieren. Dazu gehören Java, JavaScript, Pearl, PHP und viele mehr. HTML ist die Basis, ohne die jede dieser Erweiterungen und Verbesserungen nicht im Internet präsentiert werden könnte. Doch was ist HTML? HTML ist eine Sprache die Interpretiert wird. Im Gegensatz zu den Programmiersprachen wie C, C++, Delphi, und Java, die kompiliert werden. Der Unterschied besteht darin, dass interpretierbare Sprachen nicht selbst auf einem Computer lauffähig sind. Es wird immer ein Programm benötigt, das den Inhalt der Datei, die ausgegeben werden soll interpretiert und dann zu einem ausgabefähigen Gebilde zusammensetzt. Programme, die kompiliert werden hingegen, sind selbst lauffähig und können auf jeder Plattform, für die dieses Programm programmiert wurde, selbständig gestartet werden. Wie kann also eine HTML Datei ausgegeben werden, wenn sie nicht selbst lauffähig ist? An dieser Stelle kommt der Browser ins Spiel. Der Browser ist ein Programm, das kompiliert wurde also selbst lauffähig ist. Dieser Browser kann HTML Dateien interpretieren und dann zu einem ausgabefähigen Gebilde bzw. zu einer Internetseite zusammensetzen und auf dem Bildschirm ausgeben. Damit steht zumindest eine Voraussetzung fest, um HTML Dateien betrachten zu können. Die Möglichkeit der Betrachtung kommt uns bei dem Erstellen von Internetseiten zugute. Wir können das Ergebnis unserer Arbeit immer gleich anhand des Browsers kontrollieren. Wie werden aber jetzt HTML Dateien erstellt? Da HTML eine Sprache ist die interpretiert wird, brauchen wir kein besonderes Programm, um sie zu programmieren. Die HTML Datei ist wie ein Kochrezept, das dem Ausführenden (Interpretierenden) sagt was er zu tun hat. Der Ausführende 3

4 ist bei uns der Browser. Es reicht also die Möglichkeit aus dieses Rezept zu schreiben. Dazu brauchen wir nicht mehr als einen ganz gewöhnlichen Editor. (Unter Windows im Startmenu unter Zubehör). Beide Komponenten, die für die ersten Schritte bei dem HTML programmieren benötigt werden stehen jetzt fest. Der Editor, um die Datei zu verfassen und der Browser, mit dem die Seite betrachtet und die eigene Arbeit kontrolliert werden kann. 2. Benutzung a) des Scripts Das Script stellt als erstes die Tags vor und macht danach einige Ausführungen zu ihrer Benutzung. Das Script soll jeder benutzen wie er es für richtig und für sich am sinnvollsten hält. Trotzdem möchte ich noch einige Vorschläge machen, die mir sehr wichtig erscheinen. Das Script ist so aufgebaut, dass von der Grundstruktur einer HTML Datei zu speziellen Fragen hin geführt wird. Um den größten Nutzen aus diesem Script zu ziehen, ist es ratsam sofort alle Beispiele, die gegeben werden selbst aus zu probieren. Das Script ist ganz nah an dem Motto learning by doing ausgerichtet. Denn Erfolgserlebnisse, durch die wir lernen haben wir nur, wenn wir selbst etwas erarbeitet haben und das Ergebnis betrachten können. Im Annex befindet sich ein unkommentierter Quellcode einer etwas größeren Internetseite, an dem sie gelerntes wieder entdecken oder den Code einfach mal selber programmieren können. b) der Programme Die Programme, die genutzt werden sollen wurden bereits oben in der allgemeinen Einführung entdeckt und erläutert. Einige Hinweise halte ich dennoch für erforderlich. Das erste HTML Dokument einer ganzen Internetseite heißt immer index.html. Heißt es anders, kann der Server auf dem das Dokument hinterlegt wird den Anfang der Internetseite nicht finden. HTML Dateien speichert man indem man im Editor in dem Textfeld Dateiname index.html angibt. In dem Menu drunter hinter Dateityp von Textdatei (*.txt) auf Alle Dateien umschaltet. Kritik ist unter erwünscht. Ich hoffe, dass das Script sie weiter bringt und wünsche ihnen viel Spaß beim Programmieren und dem Studium von HTML. Tübingen, im Januar 2006 Konrad Weidmann 4

5 2. Einführung in die XHTML Überarbeitung Neue Standards und eine neue Art Internetseiten zu erstellen haben eine Überarbeitung des Kurses und des Scripts nötig gemacht. XHTML ist eine Kombination aus HTML und XML, deren genaue Erläuterung den Rahmen hier sprengen würde. Wer sich dennoch informieren möchte, der sei auf die Seite verwiesen. Der gravierenste Unterscheid zwischen HTML und XHTML liegt darin, dass XHTML eine genauere Programmierung nach bestimmten Regeln erfordert. Zudem hat sich die Notation von einigen Tags geändert. Die relevanten Änderungen der Tags und die neuen Regeln habe ich in das neue Script eingefügt, soweit dies nötig war. Die Passagen, die die wesentlichen Unterschiede behandeln habe ich grau unterlegt, um ihnen das Auffinden und die Unterscheidung leichter zu machen. Wesentlich geändert hat sich die Einleitung in eine XHTML Seite. Darauf sollte bei der Verwendung des Scripts, neben den anderen Änderungen, ein besonderes Augenmerk gelegt werden. Kritik ist unter erwünscht. Ich hoffe, dass das Script eine wesentliche Hilfe ist und wünsche ihnen viel Spaß beim Programmieren und dem Studium von XHTML. Tübingen, im November 2006 Konrad Weidmann 5

6 A. (X)HTML für Anfänger I. Grundwerkzeug 1. Tag Lehre XHTML besteht aus so genannten Tags, die die Befehle von XHTML sind. Dabei wird der Tag von gespitzten Klammern umfasst: <tag>. Tags treten in den meisten Fällen paarweise auf. Der Tag wird dann durch den Anfangstag <tag> eingeleitet und mit dem Endtag </tag> wieder geschlossen. Das Endtag wird durch einen frontslash ( / ) vor dem Tag markieret: </>. Vereinfacht ausgedrückt sieht die Reihenfolge wie folgt aus: <tag> inhalt </tag>. Tags werden sehr oft mit so genannten Attributen ausgefüllt. Attribute dienen dazu dem Tag weitere und genaure Anweisungen zu geben, wie er sich "verhalten" soll. Attribute werden in den Anfangstag hinter den Tag wie folgt eingefügt: <tag attribut="wert"> inhalt </tag>. Regel: Die Werte der Attribute werden immer klein geschrieben. So genannte leere Elmente besitzen kein End-Tag. Dazu gehören u. a. <img /> und <br />. Der Unterschied zum gewöhnlichen HTML liegt in der neuen Notation. Ein leerer Tag wurde in HTML einfach hineinprogrammiert, <br>. Die Schreibweise hat sich beim XHTML so geändert: <br />. Es wird ein slash nach dem Tag und mit dem Abstand von einem Leerzeichen eingefügt. Regel: Jeder geöffnete Tag muss auch wieder geschlossen werden. 2. Grundgerüst Jeder XHTML Datei liegt ein Grundgerüst zu Grunde, das sich nicht ändert und in jeder XHTML Datei gleich ist. Es besteht aus drei Tagpaaren, die wie folgt angeordnet werden: <html> <head> <title> Titel </title> </head> <body> 6

7 </html> </body> Inhalt <html> und </html> legen dabei dem gesamten Umfang einer XHTML Datei fest. <html> leitet die XHTML Datei ein und steht immer als erstes in einer XHTML Datei und </html> schließt die XHTML Datei ab und steht folglich immer am Ende einer XHTML Datei. 3. Änderungen in XHTML Dazu kommen zwei Einleitungssequenzen, die unbedingt in eine XHTML Datei eingefügt werden müssen: 1. <?xml version="1.0" encoding="iso "?> 2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" und zu 1.: Mit dieser Zeile wird die Version von XHTML festgelegt. Sinnvoll ist dort die 1.0 bei zu behalten. Mit der zweiten Angabe, encoding, wirde festgelegt welche Zeichenkodierung sie benutzen wollen. ISO steht für den Westeuropäischen Standard. zu 2.: Mit dieser Zeile geben sie an welche DTD (Dokumenttyp-Definition) und Sprachversion sie verwenden wollen. Um XHTML ohne Fehler zu Programmieren, ist diese Angabe unbedingt erforderlich. Die Datei sieht dann wie folgt aus: <?xml version="1.0" encoding="iso "?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" und <html> <head> <title> Titel </title> 7

8 </head> <body> Inhalt </body> </html> Regel: Das Grundgerüst muss genau so wie oben dargestellt aufgebaut werden. II. Headbereich Das Paar <head> </head> markiert den Kopfbereich der XHTML Datei. Dieser Teil der Datei wird Headbereich genannt. Hier werden u. a. Informationen für den Browser und andere Dienste im Internet bereitgestellt. Dazu wird der Tag <meta> verwendet. Aber auch der Titel der Seite wird in diesem Bereich festgelegt. 1. Titel Der Titel wird von den Tags <title> und </title> umschlossen. Er erscheint in dem obersten Balken des Browser. Hier werden Informationen für den Besucher hinterlegt. Beispielsweise : <title> Meine erste Internetseite </title>. 2. Meta Tags Meta Tags sind Tags mit denen Informationen für den Browser hinterlegt werden können. Sie dienen nicht dazu die XHTML Seite an sich in ihrem Aussehen zu verändern. Sie seien hier nur der Vollständigkeit halber und ihrer Existenz wegen erwähnt. Per Meta Tags hat man u. a. die Möglichkeit das Tastaturlayout an zu geben und/oder Schlüsselwörter für Suchmaschinen ein zu binden. 8

9 III. Bodybereich <body> und </body> umschließen den Teil, der später als eigentliche Internetseite im Browser sichtbar wird. Zwischen diese beiden tags wird der gesamte Inhalt der Internetseite programmiert. Dieser Teil der Datei wird Bodybereich genannt. 1. Bodykonfiguration Der Bodybereich kann mittels der Tags <body> </body> verändert werden. Es kann zum Beispiel die Hintergrundfarbe der XHTML Datei geändert werden. Das Attribut, das dazu erforderlich ist heißt bgcolor (backgroundcolor). Als Werte sind alle Farben, der Farbtabelle zulässig. Ein Besipiel: <body bgcolor="red"> </body> wird so ausgegeben Es stehen noch viele weitere Attribute für den Bodybereich zur Verfügung, die jetzt aber nicht alle aufgezählt werden können. Trotzdem werden später ein paar ausgewählte eingeführt. 9

10 2. Textkonfiguration Im Prinzip kann der Text in eine XHTML Datei roh hineingeschrieben werden. <body> </body> Home (als Text) wird so ausgegeben a) <p> Tag Der Text kann (und sollte) aber noch zusätzlich konfiguriert werden. Als erstes Tagpaar steht uns dazu <p> </p> zur Verfügung. <p> </p> kann auch wie folgt mit Attributen ausgestattet werden. <p align ="center"> </p>. Dabei bewirkt align' die Textausrichtung. Als Werte sind dabei left, center und right zulässig. Left ist als Standard vorgegeben und braucht nicht immer mitprogrammiert zu werden. Die Anwendung sieht dann so aus: <body> <p align="center"> Home </p> </body> Innerhalb des P Tags kann zudem der tag <br> verwendet werden. Br ermöglicht einen 10

11 Zeilenumbruch an der Stelle von dem Browser vornehmen zu lassen an dem man ihn setzt. Ein Beispiel: <p> Hallo Welt. Ich bin die erste HTML Seite von mir. </p> Wird so ausgegeben: <p> Hallo Welt. <br /> Ich bin die erste HTML Seite von mir. </p> Würde auf dem Bildschirm so ausgegeben: 11

12 b) <span> Tag Der nächste nützliche Tag ist <span> </span>. Als erstes Attribut muss style verwendet werden. Hinter diesem Attribut wird das gewünschte Argument angegeben. Als Argumente kommen insb. font-family (Vorsicht bei besonderen Schriftarten, die nicht auf jedem PC installiert sind. Ist die Schriftart nicht vorhanden, wird die Seite mit der Standard Schrift ausgegeben), font-size und color in Betracht. Die Anwendung sieht wie folgt aus: <span style= font-family: verdana; > Home </span> Mit den Argumenten font-size und color können Größe und Farbe festgelegt werden: <span style= font-family: verdana; font-size: 12px; color: green; >Home</span> Die Schriftgröße wird in px, wie in Word (Bsp.: Schriftgröße 12) und die Farbe entweder im Klartext (green) oder im RGB Code (Bsp.: #909090) angegeben. 12

13 c) <ins> und <del> Zur weiteren Einstellung von Texten können die Tags <ins> und <del> benutzt werden. Die Konstruktion <ins> text </ins> erzeugt einen Unterstrichenen Text. Die Unterstreichung dient dazu, den Text als hinzugefügt zu kennzeichnen. Auf der Homepage der juristischen Fakultät erscheint dieser Text grün. Text der mit den Tags <del> Text </del> umschlossen wird erscheint als durchgestrichener Text. Die Streichung dient dazu, um den text als überholt zu markieren. Auf der Homepage der juristischen Fakultät erscheint text, der zwischen diese Tags gesetzt wird zusätzlich rot. 3. Links zu anderen Seiten Eine weitere Funktion innerhalb von XHTML Dateien sind die sog. Links. Mit diesen Links werden andere Webinhalte oder andere Seiten der eigenen Webseite mit der aktuellen eigenen Seite verknüpft. Das Tagpaar dazu lautet: <a> </a>. Dieses Tagpaar muss immer mindestens mit dem Attribut href="seite.html" benutzte werden. Zwischen die Tags kommt dann der Name des Links: <a href="seite.html"> Link </a>. In eine XHTML Datei eingebaut: <font face="verdana" color="green" size="12"><a href="seite.html"> Link </a></font> Gleichzeitig sieht man in dem obigen Beispiel, dass Tags auch verschachtelt werden können. Das zuletzt geöffnete Tag wird als erstes wieder geschlossen. Die Eigenschaften des geöffneten Tags reichen immer soweit bis er wieder geschlossen wird. Der Link würde in unserem Beispiel aber trotzdem nicht grün angezeigt werden. Für Links sind in einer XHTML Datei Farben bereits vorgegeben, die aber änderbar sind. Dazu müssen wir wieder nach oben in den Bodytag springen. Der Body tag wird wie folgt ergänzt. 13

14 Vorher: <body bgcolor= white ></body> Nachher: <body bgcolor="white" link="black" alink="black" vlink="black"></body> Das Attribut link setzt den Link in die gewünschte Farbe. alink und vlink sorgen dafür, dass ein einmal angeklickter Link schwarz bleibt. Die Farben können nach belieben gewählt werden. Beachten sollte man dabei, dass diese Einstellungen für die ganze HTML Datei gelten in der man sie setzt. 4. Anker in der Seite Anker sind Links, die innerhalb der Seite auf eine andere Stelle verweisen, die mit einem Anker versehen ist. <a href="#anker > Anker </a> ist der Code für einen Link, der Auf den Anker mit dem Namen Anker verweist. Das Wort Anker würde als Link erscheinen und auf die Stelle auf die der nachfolgende Anker gesetzt wird verweisen. <a id="anker > andere Stelle </a> ist der Code für den Anker, der auf einen beliebigen Platz innerhalb der Seite gesetzt werden kann. Als Quellcode könnte das so aussehen: 1. Beispiel: <a href="#anker > Anker </a> Inhalt der Seite <a id="anker > andere Stelle </a> 2. Beispiel: <a id="anker > andere Stelle </a> Inhalt der Seite <a href="#anker > Anker </a> Im ersten Beispiel würde man durch einen Klick auf den Link oben auf der Seite zu einem Anker unten auf der Seite verwiesen werden. Im zweiten Beispiel würde man durch den Klick unten auf der Seite auf den Anker oben auf der Seite verweisen werden. Das zweite Beispiel ist sehr hilfreich bei langen, unübersichtlichen Seiten, um den Anfang der Seite zu markieren und so schnell auf den Anfang durch den Klick zugreifen kann. 14

15 IV. Tabellen In XHTML Dateien können auch Tabellen verwendet werden. Das Tagpaar für Tabellen lautet: <table> </table>. Reihen werden mit dem Tagpaar <tr> </tr> angelegt und Spalten mit dem Tagpaar <td> </td>. Tabellen sind von ihrem Aufbau her, ähnlich wie die Grundstruktur des Bodybereiches. Das Tagpaar für die Tabellen definiert den Bereich der Tabelle innerhalb dessen Zeilen und Spalten angelegt werden. Die Reihenfolge ist dabei erst die Spalten mittels <tr> </tr> und innerhalb der Zeilen die Spalten mittels <td> </td>. Beispiel: <table border= 1 bordercolor= black > <tr> <td> 1. Feld </td> <td> 2. Feld </td> </tr> <tr> <td> 3. Feld </td> <td> 4. Feld </td> </tr> </table> 15

16 Dabei können in dem Tag, der die Tabelle einleitet wiederum Eigenschaften mittels der Attribute für die gesamte Tabelle festgelegt werden. Border gibt dabei die Breite der Rahmen an und width wie weit sich die Tabelle auf der Seite ausdehnen soll. Die Strichbreite mittels des Border Attributs wird in pkt angegeben (0 = der Rahmen ist nicht zusehen, 1 = der Rahmen hat eine Breite von einem Punkt). Die Ausdehnung der Tabelle kann mit dem width Attribut in % oder in Pixel angeben werden. Bordercolor färbt den Rand der Tabelle in der gewünschten Farbe ein. Align aus dem P Attribut kann ebenfalls verwendet werden. Ein Beispiel: <table border="1" bordercolor= black width="30%" align= center > 16

17 V. Bilder In HTML Dateien können auch Bilder eingefügt werden. Dabei begleitet den Tag für die Bilder eine Besonderheit. Das Tag <img /> benötigt keinen Abschlusstag. <img /> steht immer alleine. Das Bild wird durch den Image Tag lediglich platziert. Ähnlich wie bei dem Link tag ist auch bei dem Image Tag ein Attribut immer erforderlich. src bedeutet source und legt die Quelle für den Image Tag fest. Beispiel: <img src="bild1.jpg" />. Hier wird dem Image Tag mitgeteilt, dass er das Bild mit dem Namen bild1.jpg einblenden soll. Weitere Attribute des Images Tags sind height und width. Damit werden Höhe und Breite des angezeigten Bildes festgelegt. Die Angabe der Werte erfolgt in Pixel. Beispiel: <img src="bild1.jpg" height="140" width="140" />. Mit diesem Beispiel, würde in der XHTML Datei ein quadratisches Bild mit der Höhe von 140 und der Breite von 140 Pixeln ausgegeben. Ein Beispiel: <img src="bild1.jpg" heigth="140" width="140" /> 17

18 B. Farb- und Zeichentabellen I. Farbtabelle: Black="#000000" Green="#008000" Silver="#C0C0C0" Lime="#00FF00" Gray="#808080" Olive="#808000" White="#FFFFFF" Yellow="#FFFF00" Maroon="#800000" Navy="#000080" Red="#FF0000" Blue="#0000FF" Purple="#800080" Teal="#008080" Fuchsia="#FF00FF" Aqua="#00FFFF" Hierbei kann der Name oder der Code hinter dem = verwendet werden. II. Sonderzeichen: Ä = Ä ä = ä Ö = Ö ö = ö Ü = Ü ü = ü Leerzeichen = = = ß = ß = (Grad) = noch mehr Zeichen: 18

19 C. Annex I. Tagreferenz Tag: Funktion: Attribut(e): <a> Link anlegen href <b> Fett schreiben <body> Bodybereich definieren text, bgcolor, background, link, alink, vlink <br /> Zeilenumbruch erzwingen <font> Text konfigurieren color, face, size <head> Kopfbereich definieren <hr /> Trennlinie einfügen <html> HTML Bereich def. <i> Kursiv schreiben <img /> Bilder einfügen src <meta /> Meta Tags <p> Text konfigurieren align <table> Tabellen einfügen border, width, bordercolor, align <td> Spalten einfügen 19

20 <title> Titel einfügen <tr> Reihen einfügen <u> Unterstrichen schreiben 20

21 II. Dateireferenz <?xml version="1.0" encoding="iso "?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <html> <head> <title> Meine eigene Homepage </title> </head> <body> <a id= oben > </a> <!-- Anker oben --> <table border= 1 bordercolor= black > <!-- Tabellen anfang --> <tr> <td> <img src= bild1.jpg /> <!-- Bild 1--> </td> <td> <img src= bild2.jpg /> <!-- Bild 2--> </td> </tr> <tr> <td> Irgendeine Bildbeschreibung <br /> mit Brake </td> <td> und noch eine Bildbeschreibung <br /> mit Brake </td> </tr> </table> <a herf= oben >zurück</a> <!-- Link auf den Anker oben am Anfang der Seite --> </body> </html> 21

22 D. Literatur I. Bücher HTML - Alles zur führenden Websprache, Günter Born, Wilhelm Heyne Verlag 2000, ISBN unter dem Stichwort HTML (von 10 bis 40 ) unter Stichwort HTML (von 2 bis 99 ) II. ebooks III. Foren

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

<html> <head> <title> Die Welt der Bäume </title> </head> <body> Hier ensteht eine Seite über Bäume. </body> </html> Abb. 2

<html> <head> <title> Die Welt der Bäume </title> </head> <body> Hier ensteht eine Seite über Bäume. </body> </html> Abb. 2 Dieser html-kurs soll die Informatik-SchülerInnen meines Info-Kurses auf den Info-Quali vorbereiten. Das Werkzeug html soll einen in die Lage versetzten, die Programmierung von Web-Seiten zu verstehen

Mehr

Kennen, können, beherrschen lernen was gebraucht wird

Kennen, können, beherrschen lernen was gebraucht wird Inhaltsverzeichnis Inhaltsverzeichnis... 1 Zeichen formatieren... 1 Physische Formatierungen... 1 Zitate auszeichnen... 2 Schrift ändern... 2 Die Schriftgröße einstellen... 2 Die Schriftart einstellen...

Mehr

Übung: Bootstrap - Navbar

Übung: Bootstrap - Navbar Übung: Bootstrap - Navbar Angaben befinden sich im Ordner: 5_Übung_nav. Darin befinden sich die Bootstrap-Ordner und die dazu passende index.html, die bereits die Links zu den Ordnern enthält. Aufgabe:

Mehr

Wir studieren HTML-Tags

Wir studieren HTML-Tags Abb. 1: Word-Dokument Abb. 2: Das Dokument aus Abb. 1 mit einem Editor betrachtet Wir studieren HTML-Tags Wenn man ein Word-Dokument wie in Abb. 1 mit einem Editor anschaut, erkennt man den Quelltext des

Mehr

Inhalt. Seite 1 von 14

Inhalt. Seite 1 von 14 Seite 1 von 14 Inhalt 1. Php ansprechen... 2 2. html... 3 3. Weitere Formatierungen in html... 5 4. Tabellen mit html... 6 a. Grundstrukturen... 6 b. Tabellen formatieren... 11 Seite 2 von 14 1. Php ansprechen

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

ALLGEMEINES WOMIT KANN ICH WEBSITES ERSTELLEN?

ALLGEMEINES WOMIT KANN ICH WEBSITES ERSTELLEN? HTML AG INHALT Allgemeines... 2 Womit kann ich Websites erstellen?... 2 Grundgerüst von HTML... 3 Tags und Attribute... 3 Links... 4 Links auf andere Seiten... 4 Bilder... 5 meta-tags... 5 Webseiten mit

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

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

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

1 Einführung Die Sprachen HTML und XHTML Struktur einer HTML Seite Webseiten speichern... 2

1 Einführung Die Sprachen HTML und XHTML Struktur einer HTML Seite Webseiten speichern... 2 HTML GRUNDLAGEN 1 Einführung.. 1 2 Die Sprachen HTML und XHTML. 1 3 Struktur einer HTML Seite 1 4 Webseiten speichern.. 2 5 Elemente für die Seitenstruktur 2 6 Seiten und Inhalte verlinken. 4 7 Sonderzeichen

Mehr

Diese neuen Gestaltungsmöglichkeiten können nun auf den Web-Anzeigenmarkt angewandt werden: Wissensbaustein»Anzeigenmarkt: CSS-Einsatz«(S.

Diese neuen Gestaltungsmöglichkeiten können nun auf den Web-Anzeigenmarkt angewandt werden: Wissensbaustein»Anzeigenmarkt: CSS-Einsatz«(S. 128 5XHTML&CSS* Wissensbaustein»CSS: ID-Attribut«(S. 180) Wissensbaustein»CSS: Umrandungen«(S. 182) Wissensbaustein»CSS: Füllungen & Abstände«(S. 185) Wissensbaustein»CSS: Pseudo-Klassen & -Elemente«(S.

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

Die Programmiersprache des Webs. HTML HyperText Markup Language Hypertext - Auszeichnungssprache

Die Programmiersprache des Webs. HTML HyperText Markup Language Hypertext - Auszeichnungssprache Was ist HTML? Die Programmiersprache des Webs HTML HyperText Markup Language Hypertext - Auszeichnungssprache Dateiname Man muss Groß/Kleinschreibung beachten Leerzeichen ist nicht erlaubt Umlaute wie

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

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

Kennen, können, beherrschen lernen was gebraucht wird

Kennen, können, beherrschen lernen was gebraucht wird Inhaltsverzeichnis Inhaltsverzeichnis... 1 Tags (Befehle)... 1 Erste Texte im Browser... 2 Das HTML Grundgerüst... 2 Ihre erste echte Webseite... 2 Texte... 3 Textabsatz und Zeilenumbruch... 3 Einen Zeilenumbruch

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

Seminar DWMX DW Session 002

Seminar DWMX DW Session 002 Seminar DWMX 2004 DW Session 002 Mit Dreamweaver starten (1) Coder oder Designer eine Frage der Einstellung Bearbeiten/Voreinstellungen Kategorie Allgemein Arbeitsbereich ändern Bedienfelder und Bedienfeldgruppen

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

HTML-Grundlagen. Die Layout- und Formatierungsanweisungen heißen Tags, z.b.

HTML-Grundlagen. Die Layout- und Formatierungsanweisungen heißen Tags, z.b. HTML-Grundlagen HTML (Hypertext Markup Language) -Dokumente sind einfache Textdateien, die neben dem eigentlichen Text zusätzliche Anweisungen enthalten, wie das Dokument von einem Browser auf dem Bildschirm

Mehr

HTML. HyperText Markup Language. von Nico Merzbach

HTML. HyperText Markup Language. von Nico Merzbach HTML HyperText Markup Language von Nico Merzbach Kapitel 1 Was ist HTML? Was ist HTML? Einführung: HTML ist eine (Hypertext-)Auszeichnungssprache. Mit Hilfe von HTML strukturiert man Inhalte wie Text,

Mehr

Web-Publishing mit HTML

Web-Publishing mit HTML Web-Publishing mit HTML Das HTML-Dokument: Jedes HTML 4-Dokument beginnt mit der Deklaration , um diese Version von anderen Versionen zu unterscheiden.

Mehr

Grundlagen zu HTML. Vortrag im Rahmen der BTK-Vorlesung von Herrn Professor Kärger

Grundlagen zu HTML. Vortrag im Rahmen der BTK-Vorlesung von Herrn Professor Kärger Grundlagen zu HTML Vortrag im Rahmen der BTK-Vorlesung von Herrn Professor Kärger Folie: 1 Gliederung Folie: 2 Was ist HTML Die Sprache HTML Aufbau von HTML-Tags Das HTML-Grundgerüst Hintergrundformatierungen

Mehr

1 Definition der Selektoren Einbinden der CSS 3 Möglichkeiten Farbangaben Schriftformatierung Abstände...

1 Definition der Selektoren Einbinden der CSS 3 Möglichkeiten Farbangaben Schriftformatierung Abstände... CSS GRUNDLAGEN 1 Definition der Selektoren... 2 2 Einbinden der CSS 3 Möglichkeiten... 2 3 Farbangaben... 4 4 Schriftformatierung... 4 5 Abstände... 4 6 Box Modell... 5 7 Links... 5 8 Eigene Klasse definieren...

Mehr

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/tr/html4/loose.dtd> HTML Theoriefragen 1. Wofür steht die Abkürzung HTML? 2. Warum ist HTML keine Programmier sprache? 3. Wofür steht die Abkürzung DTD? 4. Beantworten Sie die Fragen zur folgenden DTD:

Mehr

HTML - Die Sprache des Internets. Grundlagen und Kurzprojekt

HTML - Die Sprache des Internets. Grundlagen und Kurzprojekt - Die Sprache des Internets Grundlagen und Kurzprojekt aus der Presse: Definition : Hypertext Markup Language Sprache des WWW definiert: Text- und Absatzformate Links Bild- und Tonelemente Farben offener

Mehr

Übung zur Vorlesung Digitale Medien. Hanna Schneider Ludwig-Maximilians-Universität München Wintersemester 2014/2015

Übung zur Vorlesung Digitale Medien. Hanna Schneider Ludwig-Maximilians-Universität München Wintersemester 2014/2015 Übung zur Vorlesung Digitale Medien Hanna Schneider Ludwig-Maximilians-Universität München Wintersemester 2014/2015 1 Hyper Text Markup Language Beschreibungssprache von WWW-Seiten: Enthält die Struktur

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

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

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

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

Ergänzungen zum HTML - Grundkurs

Ergänzungen zum HTML - Grundkurs Ergänzungen zum HTML - Grundkurs Ein HTML - Dokument besteht grundsätzlich aus zwei Teilen; HEADER (Kopf, enthält allg. Angaben zu Titel und ähnlich) BODY (Körper, enthält den eigentlichen Text mit Überschriften,

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

Meine Fakultät. Alumni-Portal HTML-Seiten im Portal Seite 1 von 8

Meine Fakultät. Alumni-Portal HTML-Seiten im Portal Seite 1 von 8 Alumni-Portal HTML-Seiten im Portal Seite 1 von 8 Meine Fakultät Auf Wunsch wird jedem Fachbereich ein eigener Reiter im Alumni-Portal eingerichtet. Diese Seite bzw. die Unterseiten können Sie nach Wunsch

Mehr

Hyper. Text. Markup. Language

Hyper. Text. Markup. Language Hyper Text Markup Language Dateiname und-endung Wir schreiben mit dem Editor eine HTML-Quelldatei, diese endet immer auf Punkt html, also beispielsweise: hello-world.html Wir verwenden in unseren Dateinamen

Mehr

Inhaltsverzeichnis. Florian Bauer CSS Seite 2 von 10

Inhaltsverzeichnis. Florian Bauer CSS Seite 2 von 10 CSS Inhaltsverzeichnis Gestaltung mit CSS... 3 CSS einbinden... 3 On the fly... 3 Im Header... 3 In einer externen Datei... 3 Aufbau einer CSS Anweisung... 4 Wichtige CSS Eigenschaften... 4 Pseudoelemente...

Mehr

Grundlagen-Beispiel CSS

Grundlagen-Beispiel CSS Grundlagen-Beispiel CSS Öffne im Ordner 2.css.uebung die vorhanden Dateien index.html und erstelle eine neue CSS-Datei mit dem Namen bildschirm.css. Füge im Bereich folgende Verlinkung ein:

Mehr

Kommentare <! Dies ist ein Kommentar > Zum Kommentieren von Inhalten oder Befehlen. Wird im Browser nicht angezeigt.

Kommentare <! Dies ist ein Kommentar > Zum Kommentieren von Inhalten oder Befehlen. Wird im Browser nicht angezeigt. HTML Grundgerüst titel der Seite Inhalt der Datei Innerhalb des Dateikopfes einen aussagekräftigen Titel vergeben! Den gesamten sichtbaren Inhalt

Mehr

Webdesign im Tourismus

Webdesign im Tourismus Übung Prof. Dr. Markus Landvogt Zur Vorlesung 2.3. Feinheiten in Jimdo 2.4. HTML in Jimdo 03 HTML - GRUNDLAGEN DER ERSTELLUNG VON WEBSEITEN 3.1 Aufbau einer Seite in HTML 3.2 HTML in Jimdo WEB 03 1 2.3.

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

Eine Schnelleinführung in CSS

Eine Schnelleinführung in CSS Eine Schnelleinführung in CSS Michael Dienert 11. September 2013 Inhaltsverzeichnis 1 Was ist CSS? 1 2 Verwenden der CSS-Stylesheets 2 3 Struktur eines CSS-Stylesheets 2 4 Selektoren im Detail 3 4.1 Verwandschaftsbeziehungen:

Mehr

Mitschrift HTML. Dateinamen von Bildern: nur Kleinbuchstaben ohne Umlaute und Sonderzeichen BSP: auto.jpg fruehling.jpg bild_01.

Mitschrift HTML. Dateinamen von Bildern: nur Kleinbuchstaben ohne Umlaute und Sonderzeichen BSP: auto.jpg fruehling.jpg bild_01. 1. Stunde Mitschrift HTML Bildbearbeitung in Hinblick auf HTML. Dateinamen von Bildern: nur Kleinbuchstaben ohne Umlaute und Sonderzeichen BSP: auto.jpg fruehling.jpg bild_01.jpg Verstehen des Unterschiedes

Mehr

Webdesign-Multimedia HTML und CSS

Webdesign-Multimedia HTML und CSS Webdesign-Multimedia HTML und CSS Thomas Mohr 1 HTML 1.1 Was ist HTML? HTML steht für Hypertext Markup Language und ist eine Auszeichnungssprache zur Strukturierung digitaler Dokumente. HTML-Dokumente

Mehr

HTML Tutorial Part I - Einführung und erste Texte schreiben

HTML Tutorial Part I - Einführung und erste Texte schreiben HTML Tutorial Part I - Einführung und erste Texte schreiben Hallo und Herzlich Willkommen auf meiner Seite. Hier dreht sich alles um das Thema HTLML Programmierung. Das ganze beginnt bei den einfachsten

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

4. Briefing zur Übung IT-Systeme

4. Briefing zur Übung IT-Systeme 4. Briefing zur Übung IT-Systeme - Einführung in HTML, CSS und JavaScript Fragestunde,, PC Pool Stand und Ausblick Einführung: 18.10.2016, 12.00 Uhr (c.t.), HS 4/PC Pool Fragestunde: 09.11.2016, 12.00

Mehr

Kapitel 8 HTML. Copyright by Worldsoft AG, 2014, Pfäffikon SZ, Switzerland. Version: 02.10.2014 Seite 1

Kapitel 8 HTML. Copyright by Worldsoft AG, 2014, Pfäffikon SZ, Switzerland. Version: 02.10.2014 Seite 1 Kapitel 8 Notwendige Voraussetzungen für diese Schulung: Internetfähiger Computer mit aktuellem Browser (z.b. Firefox, Internet Explorer) Bild- und Textvorlagen: Diese Vorlagen finden Sie auf der CC-Website

Mehr

Tutorial XML3D + Blender

Tutorial XML3D + Blender Tutorial XML3D + Blender Deutsch - Windows ab XP- 2011 by SE V 0.1 Vorwort Diese kleine Tutorial entstand aus dem Problem das es aktuell noch kein Deutsches gibt. Ich versuche alles so zu erklären, das

Mehr

Abgabetermin: , 23:59 Uhr

Abgabetermin: , 23:59 Uhr HTML 19.01.2016 Projektanforderungen Struktur: Zentrale (index-)seite Sinnvolle Ordnerstruktur von index.html aus verlinkte Seiten mit Querverweisen (insgesamt mindestens 3 Seiten) Elemente, die irgendwo

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

Kennen, können, beherrschen lernen was gebraucht wird www.doelle-web.de

Kennen, können, beherrschen lernen was gebraucht wird www.doelle-web.de Inhaltsverzeichnis Inhaltsverzeichnis... 1 Grundlagen... 2 Hyperlinks innerhalb einer Datei... 2 Verweisziel definieren... 2 Einen Querverweis setzen... 3 Verschiedene Arten von Hyperlinks... 3 Einfache

Mehr

E-Commerce: IT-Werkzeuge. Web-Programmierung. Kapitel 3: Webdesign mit CSS Stand: Übung WS 2015/2016. Benedikt Schumm M.Sc.

E-Commerce: IT-Werkzeuge. Web-Programmierung. Kapitel 3: Webdesign mit CSS Stand: Übung WS 2015/2016. Benedikt Schumm M.Sc. Übung WS 2015/2016 E-Commerce: IT-Werkzeuge Web-Programmierung Kapitel 3: Stand: 30.10.2015 Benedikt Schumm M.Sc. Lehrstuhl für ABWL und Wirtschaftsinformatik Katholische Universität Eichstätt-Ingolstadt

Mehr

Erzherzog Johann Jahr 2009

Erzherzog Johann Jahr 2009 Erzherzog Johann Jahr 2009 Der Erzherzog Johann Tag an der FH JOANNEUM in Kapfenberg Was wird zur Erstellung einer Webseite benötigt? Um eine Webseite zu erstellen, sind die folgenden Dinge nötig: 1. Ein

Mehr

Richtlinien für das Design der KML Webseite. KML TP2, Informationsdienste

Richtlinien für das Design der KML Webseite. KML TP2, Informationsdienste Richtlinien für das Design der KML Webseite KML TP2, Informationsdienste Inhaltsverzeichnis 1. Einleitung...1 2. Textgestaltung...1 2.1. Absätze...1 2.2. Überschriften...2 2.3. Grafiken...2 3. Besondere

Mehr

12. Jgst. 3. Kursarbeit Datum: Fach: Informationsverarbeitung (Leistungskurs) & )!!*+,!- -.!-

12. Jgst. 3. Kursarbeit Datum: Fach: Informationsverarbeitung (Leistungskurs) & )!!*+,!- -.!- 12. Jgst. 3. Kursarbeit Datum: 26.03.2007 Klasse: GY 05 c Fach: Informationsverarbeitung (Leistungskurs) Themen: XHTML; CSS Name: Bitte speichern Sie Ihre Ergebnisse regelmäßig. Punkte:!" # Note: 8 $ %!&'(

Mehr

Auszeichnungssprachen

Auszeichnungssprachen Auszeichnungssprachen HTML Was ist HTML? HTML - HyperText Markup Landguage (Dt. Hypertext Auszeichnungssprache). HTML ist die Sprache, mit der WWW-Seiten definiert werden und die die Struktur, den Inhalt

Mehr

Gestaltung von Head Bereich und Impressum bei der Partner-Website

Gestaltung von Head Bereich und Impressum bei der Partner-Website 1 Gestaltung von Head Bereich und Impressum bei der Partner-Website Dieser Ratgeber zeigt, wie Sie Texte in der Grösse anpassen, Stile und Formatierungen einfügen und ein eigenes Foto einbinden. 2 Webmaster-Alliance

Mehr

Kleine Erläuterung zum Thema TITEL:

Kleine Erläuterung zum Thema TITEL: Als erstes beginnen wir wieder damit das Control-Panel von XAMPP zu öffnen also den KNOCHEN. Entweder geben wir in die Windowssucheleiste XAMPP ein. Oder gehen auf Computer C > XAMPP> XAMPP-CONTROL.EXE

Mehr

7 Tabellen. 7.1 Erstellen einer Tabelle. - übersichtliches Gestalten von Websites - enorme Steigerung der Layoutmöglichkeiten durch Tabellen

7 Tabellen. 7.1 Erstellen einer Tabelle. - übersichtliches Gestalten von Websites - enorme Steigerung der Layoutmöglichkeiten durch Tabellen 1 7 Tabellen - übersichtliches Gestalten von Websites - enorme Steigerung der Layoutmöglichkeiten durch Tabellen 7.1 Erstellen einer Tabelle Syntax: Inhalt1 Inhalt2 Kommentar

Mehr

Der Rumpf. Titel Seite 3

Der Rumpf. Titel Seite 3 Grundzüge des Web-Designs Es gibt verschiedene Elemente der Darstellung, die im Design immer wieder vorkommen Diese sind z.b. Textblöcke, Bilder, Überschriften, Absätze etc. Titel Seite 1 Diese Elemente

Mehr

HTML - Grundbegriffe. Informatik 1 für Nebenfachstudierende Grundmodul. Kai-Steffen Hielscher Folienversion: 23. November 2016

HTML - Grundbegriffe. Informatik 1 für Nebenfachstudierende Grundmodul. Kai-Steffen Hielscher Folienversion: 23. November 2016 Informatik 1 für Nebenfachstudierende Grundmodul HTML - Grundbegriffe Kai-Steffen Hielscher Folienversion: 23. November 2016 Informatik 7 Rechnernetze und Kommunikationssysteme Inhaltsübersicht Kapitel

Mehr

Grundaufbau eines HTML5-Dokumentes (Grautöne visualisieren die Zwiebelstruktur des Dokumentes) <!DOCTYPE HTML> <html> <head>

Grundaufbau eines HTML5-Dokumentes (Grautöne visualisieren die Zwiebelstruktur des Dokumentes) <!DOCTYPE HTML> <html> <head> Grundaufbau eines HTML5-Dokumentes (Grautöne visualisieren die Zwiebelstruktur des Dokumentes) name Ihres HTML-Dokumentes

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

Auf die Mischung kommt es an

Auf die Mischung kommt es an Auf die Mischung kommt es an Sie können XML, HTML oder auch JavaScript beliebig in einem Dokument kombinieren. Hierbei müssen Sie lediglich entscheiden, was in Ihrem Dokument die höchste Priorität hat.

Mehr

4. Briefing zur Übung IT-Systeme

4. Briefing zur Übung IT-Systeme 4. Briefing zur Übung IT-Systeme - Einführung in HTML, CSS und JavaScript Fragestunde, 18.12.2017, PC Pool Stand und Ausblick Einführung: 17.10.2017, 12.00 Uhr (c.t.), HS 4 Fragestunde: 06.11.2017, 10.15

Mehr

XHTML. Lernfragen zu XHTML. Was ist HTML? Überblick

XHTML. Lernfragen zu XHTML. Was ist HTML? Überblick Lernfragen zu XHTML XHTML Ist XHTML eine Erweiterung von HTML? Wie hängt XHTML mit XML zusammen? Wie ist ein XHTML-Dokument strukturiert? Wo sind die klassischen Einsatzgebiete von XHTML? Referat von Peter

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

Funktionen in JavaScript

Funktionen in JavaScript Funktionen in JavaScript Eine Funktion enthält gebündelten Code, der sich in dieser Form wiederverwenden lässt. Mithilfe von Funktionen kann man denselben Code von mehreren Stellen des Programms aus aufrufen.

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

HTML Grundgerüst. html> head> <title> Einführung </title> </head. body> <h1> Willkommen </h1> <p> Es war einmal </p> </body.

HTML Grundgerüst. html> head> <title> Einführung </title> </head. body> <h1> Willkommen </h1> <p> Es war einmal </p> </body. HTML - Kurs HTML Grundgerüst Einführung Willkommen Es war einmal Textformatierung Überschriften größ

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

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

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

Einführung in HTML. Ich bin der Seiteninhalt

Einführung in HTML. Ich bin der Seiteninhalt Einführung in HTML 1 Grundstruktur einer HTML-Seite HTML-Dateien sind reine Text-Dateien, dh sie können in einem beliebigen Editor geschrieben werden und müssen lediglich mit der Endung html versehen werden

Mehr

FUNKTIONSBESCHREIBUNG. IFRAME EINBETTUNG VERSION: ab

FUNKTIONSBESCHREIBUNG. IFRAME EINBETTUNG VERSION: ab FUNKTIONSBESCHREIBUNG IFRAME EINBETTUNG VERSION: ab 2016.1.0 Inhaltsverzeichnis 1 Einleitung... 3 2 Schreibweise... 3 3 Zusätzliche Parameter... 4 3.1 Hintergrundfarbe... 4 3.2 Anzeige als Liste... 4 3.3

Mehr

33 CSS in HTML einbinden

33 CSS in HTML einbinden D3kjd3Di38lk323nnm 256 33 CSS in HTML einbinden Damit CSS auf HTML wirken kann, muss eine Verknüpfung hergestellt werden. Dafür stehen verschiedene Möglichkeiten zur Verfügung, die in diesem Kapitel beschrieben

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

Grundaufbau eines HTML5-Dokumentes (Grautöne visualisieren die Zwiebelstruktur des Dokumentes) <!doctype html> <html lang="de"> <head>

Grundaufbau eines HTML5-Dokumentes (Grautöne visualisieren die Zwiebelstruktur des Dokumentes) <!doctype html> <html lang=de> <head> Grundaufbau eines HTML5-Dokumentes (Grautöne visualisieren die Zwiebelstruktur des Dokumentes) name Ihres HTML-Dokumentes

Mehr

Die Bilder in diesen Folien sind urheberrechtlich geschützt. Medientechnik. Hypertext Markup Language

Die Bilder in diesen Folien sind urheberrechtlich geschützt. Medientechnik. Hypertext Markup Language Die Bilder in diesen Folien sind urheberrechtlich geschützt. Medientechnik Hypertext Markup Language About Daniel Mies Computervisualisitik, Diplom E-Mail: ugotit@uni-koblenz.de Folien & more: http://uni.ugotit.de

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

Unterschied zwischen HTML & XHTML?

Unterschied zwischen HTML & XHTML? Tutorium Webdesign von Maria Lechner Unterschied zwischen HTML & XHTML? HTML HyperText Markup Language (Hypertext-Auszeichnungssprache) SGML-basierte HTML XHTML Extensible HyperText Markup Language (erweiterbare

Mehr

VWA Rhein-Neckar Dipl.-Ing. Thomas Kloepfer. Kommunikation I (Internet) Übung HTML - Tabellen

VWA Rhein-Neckar Dipl.-Ing. Thomas Kloepfer. Kommunikation I (Internet) Übung HTML - Tabellen VWA Rhein-Neckar Dipl.-Ing. Thomas Kloepfer Kommunikation I (Internet) Übung HTML - Tabellen SS 2004 Inhaltsverzeichnis 1. HTML - Tabellen...1 1.1. Aufgabe 1 - Einfache Tabelle...1 1.2. Aufgabe 2 - Tabelle

Mehr

Web Publisher - Tutorium -

Web Publisher - Tutorium - Web Publisher - Tutorium - Copyright 2005 asksam Information Systems GmbH Einleitung Web Publisher Tutorium Dieses Tutorium beschreibt Schritt für Schritt, wie Sie eine eigene Trefferliste mit dem Web

Mehr

Joomla-Handbuch Seite 1 von 22 Joomla-Handbuch Stand: Juni 2017

Joomla-Handbuch Seite 1 von 22 Joomla-Handbuch  Stand: Juni 2017 www.tuebinger-umwelten.de Joomla-Handbuch Seite 1 von 22 Joomla-Handbuch www.tuebinger-umwelten.de Stand: Juni 2017 Bei Fragen: MarCo, Tel.: 07572 949-26 Annika Dörr (adoerr@marcoconsulting.de) & Mai Ly

Mehr

ANWENDUNGSSOFTWARE CSS

ANWENDUNGSSOFTWARE CSS ANWENDUNGSSOFTWARE CSS NAVIGATION Bilder zur Navigation: als Anker für Verweise benutzen Text sollte nicht Bestandteil des Bildes sein (Bild als Hintergrund), siehe z-index Navigationslisten mit ,

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

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

HTML Kurs für Anfänger. alfabm

HTML Kurs für Anfänger. alfabm HTML Kurs für Anfänger alfabm 2011 1 Das Grundgerüst einer HTML Seite Jede HTML-Seite sollte mindestens folgendes Grundgerüst besitzen: Dies ist der einleitende Tag, der dem Browser darauf hinweist,

Mehr

Wert. { color: blue; }

Wert. { color: blue; } CSS im Überblick HTML wurde vom W3C entwickelt, um die Inhalte einer Webseite zu gliedern und zu strukturieren. In HTML wird festgelegt, ob ein Textinhalt bspw. dies ist eine Überschrift oder

Mehr

Navigation für Internetpräsenzen

Navigation für Internetpräsenzen Navigation für Internetpräsenzen Gestern und heute 2016 Navigieren in Internetseiten Das Wort Navigation wird den meisten bekannt sein und fast jeder kann eine Verknüpfung aus seinem alltäglichen Leben

Mehr

Inhaltsverzeichnis. Florian Bauer HTML Seite 2 von 10

Inhaltsverzeichnis. Florian Bauer HTML Seite 2 von 10 HTML Inhaltsverzeichnis HTML Grundlagen... 3 Was ist HTML... 3 URL... 3 HTTP... 3 WWW Funktionsweise... 3 HTML Grundgerüst... 4 Grobes Grundgerüst... 4 Feines Grundgerüst... 4 HTML-Elemente... 5 Tags...

Mehr

Praktikum zur Veranstaltung XML-Technologie: Übung 09

Praktikum zur Veranstaltung XML-Technologie: Übung 09 Fachhochschule Wiesbaden - Fachbereich Informatik Praktikum zur Veranstaltung XML-Technologie: Übung 09 XSLT Eine HTML-Tabelle 06.01.2005 (c) 2004 H. Werntges, FB Informatik, FH Wiesbaden 1 Organisatorisches

Mehr

HTML Kurs. Inhaltsverzeichnis. Dominic Dietiker Aktualisierung: February 13, 2009. 1 Das HTML-Dokument 2. 2 Einige Tags 7

HTML Kurs. Inhaltsverzeichnis. Dominic Dietiker Aktualisierung: February 13, 2009. 1 Das HTML-Dokument 2. 2 Einige Tags 7 HTML Kurs Dominic Dietiker Aktualisierung: February 13, 2009 Inhaltsverzeichnis 1 Das HTML-Dokument 2 2 Einige Tags 7 3 Erarbeiten weiterer Tags 11 4 Tabellen 11 A Lösungen 16 1 1 Das HTML-Dokument Tags

Mehr

HTML - HyperText Markup Language - breve et efficax

HTML - HyperText Markup Language - breve et efficax Prof. Dr. phil. nat. habil. Alfred H. Gitter Bioinformatik / Biophysik HTML - HyperText Markup Language - breve et efficax 1 Entstehung des Internets 1969 Arpa-Net (US-Militär) Die für das US-Militär arbeitende

Mehr

Dokumentation. Content-Manager

Dokumentation. Content-Manager Dokumentation Content-Manager 1 Funktionsweise... 2 2 Dokumentstruktur... 3 3 Aktivieren und Deaktivieren von Artikeln... 4 4 Artikel Editieren... 5 4.1 Textbearbeitung... 5 4.2 Link einfügen... 4-6 4.3

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

Arbeitsblatt 6: Programmierung geometrischer Figuren

Arbeitsblatt 6: Programmierung geometrischer Figuren Arbeitsblatt 6: Programmierung geometrischer Figuren Die Karten, auf denen die Lärmmessungen dargestellt werden, bestehen aus einer Vielzahl geometrischer Formen. Diese geometrischen Formen ergeben zusammen

Mehr

01 Einführung in PHP. Einführung in PHP 1/13 PHP in Aktion

01 Einführung in PHP. Einführung in PHP 1/13 PHP in Aktion 01 Einführung in PHP Einführung in PHP 1/13 PHP in Aktion PHP ist eine Programmiersprache, die ganz verschiedene Dinge tun kann: von einem Browser gesendete Formularinhalte auswerten, angepasste Webinhalte

Mehr