Publizieren im Internet

Größe: px
Ab Seite anzeigen:

Download "Publizieren im Internet"

Transkript

1 Publizieren im Internet Das Einsteigertutorium <HTML> <HEAD> <TITLE>Willkommen</TITLE> </HEAD> <BODY> <H1> Willkommen auf meiner Homepage </H1> </BODY> </HTML> von Christine Becker

2 1. Einführung Merkmale von HTML HTML-Grundelemente Tags Attribute Struktur von HTML-Dokumenten Zeichensatz in HTML Kommentare Elemente zur Textstrukturierung Überschriften Trennlinien Listen Ungeordnete Listen Geordnete Listen Geschachtelte Listen: Definitionslisten Elemente zur Textformatierung Hyperlinks Hyperlinks zu Webdokumenten auf anderen Servern (absolute Links) Hyperlink auf ein Dokument innerhalb des gleichen Verzeichnisses (relative Links) Hyperlink auf ein Dokument in einem anderen Verzeichnis Hyperlink zu einer Textstelle im gleichen Dokument Hyperlink zu einer Textstelle in einem anderen Dokument Hyperlink auf eine Mail-Adresse Hyperlinks zu Adressen anderer Internetdienste: FTP, Telnet, Gopher, News Einbinden von Graphiken Graphikformate: Bilder als Hypertext-Links Gestaltung von farbigen Seitenhintergrund Tabellen Formatierung von Tabellen: Frames HTML - Editoren Hilfen im Internet Empfehlungen für weiterführende Tutorials Einführung Obwohl das World Wide Web relativ jung ist - es besteht seit ca. 10 Jahren - ist seine Bedeutung inzwischen enorm. Jede Hochschule, Forschungseinrichtung, Firma, Behörde usw., die heute "in" sein will, ist über das WWW erreichbar und stellt Informationen bereit. Aber auch immer mehr Privatpersonen stellen sich auf privaten Homepages vor. Das Internet ist ein weltumspannendes riesiges Computernetz, in dem unzählige Computer ganz unterschiedlicher Plattformen miteinander kommunizieren. Wie schwierig diese Kommunikation sein kann, weiß jeder, der schon einmal eine Datei von einem Unix- Rechner auf einen Windows-Rechner darstellen wollte. Da gibt es fast unlösbare Probleme. Da die Vielfalt der Computersysteme im Internet riesig ist, mußte eine Möglichkeit gefunden werden, Informationen, die über das Web verbreitet werden sollen, so aufzubereiten, daß sie von jedem Computersystem, d.h. plattformunabhängig interpretiert und dargestellt werden können. Die Lösung, die hierzu gefunden wurde, war HTML - H - (Hyper) T - (Text) M - (Markup) L - (Language). Zusammen mit dem Hypertext Transfer Protocol HTTP bildet HTML die Grundlage des WWW. HTML geht auf SGML (Standard General Markup Language) zurück, einem bereits 1986 von der ISO (International Standard Organization) verabschiedetem internationalem Standard, damals in erster Linie für die Langzeitarchivierung technischer Dokumentationen entwickelt. Während SGML die Möglichkeit bietet, für unterschiedliche Dokumente eigene Dokumenttypen zu definieren, stellt HTML die Definition für einen speziellen Dokumenttyp, nämlich den Dokumenttyp "Web-Dokument" dar. Dies heißt, HTML ist eine für Web-Dokumente spezielle Anwendung von SGML. In jüngster Zeit ist im Zusammenhang mit elektronischem Publizieren oft von XML zu lesen. XML (extensible Markup Language) ist eine Teilmenge von SGML, die in ihrer Funktionalität sehr viel umfassender als HTML ist. Während HTML auf die Markierung von Struktur und Format beschränkt ist, ermöglicht XML auch die Markierung von Textteilen unter selbstdefinierten inhaltlichen Aspekten. 2. Merkmale von HTML Prinzipiell ist ein HTML-Dokument eine einfache ASCII-Textdatei, die neben normalem Text auch Anweisungen enthält. Während bei normalen Textdokumenten, z.b. einem Worddokument, Struktur und Formatierung über das Layout visuell erkennbar sind, werden in HTML Inhalt und Präsentation getrennt. Alle Informationen über Textstruktur und -format werden dem Text 3 4

3 als Markierungselemente (Markup) beigegeben. Die Markierungselemente selbst sind ebenfalls reiner ASCII-Text. Ein weiteres wesentliches Merkmal von HTML ist die Verknüpfung zu anderen elektronischen Dokumenten mit Hilfe von Hyperlinks. Diese verknüpften Dokumente können sowohl auf dem eigenen Web-Server als auch auf weit entfernten Servern im Internet vorhanden sein. HTML ist keine Programmiersprache sondern eine Markierungs- oder Auszeichnungssprache. HTML ist daher auch an keine spezielle Software gebunden, sondern HTML-Dateien können mit jedem beliebigen einfachen Texteditor erstellt werden. Das bedeutet, HTML ist plattform- und softwareunabhängig und damit unabhängig von Softwarefirmen und deren Marktstrategien. Bei der Arbeit mit einem einfachen Texteditor muß allerdings darauf geachtet werden, daß diese Dateien unbedingt im HTML-Format, d.h. mit der Extension.htm bzw.html abgespeichert werden. Für die Darstellung der HTML-Dokumente auf dem Bildschirm ist der Browser verantwortlich, dem damit auch die Gestaltung des Layouts überlassen wird. Dies führt dazu, daß ein und dasselbe HTML-Dokument möglicherweise vom Browser Netscape anders dargestellt wird als vom Browser MS Internet Explorer. HTML wird ständig weiterentwickelt; die aktuelle Version ist HTML 4.0. Die Koordinierung neuer Entwicklungen und die Festlegung neuer Standards nimmt das W3Consortium, vor. Das W3C ist ein internationales, unabhängiges Gremium aus Vertretern verschiedenster industrieller Bereiche. Alle vom W3C entwickelten bzw. verabschiedeten Produkte sind für jedermann frei über das Internet erhältlich. 3. HTML-Grundelemente Ein HTML-Dokument enthält neben normalem Text auch Anweisungen, die einen Browser informieren, wie bestimmte Teile des Textes behandelt werden sollen. Ohne diese Anweisungen würde der Text vom Browser als fortlaufender Text, ohne Struktur, d.h. ohne Zeilenumbrüche, Absätze, Überschriften usw. in einem vom Browser vorgegebenen Font dargestellt. (Zeilenumbrüche, Leerzeilen usw. werden ignoriert.) Alle HTML-Anweisungen stehen in HTML-Elementen, in sog. <Tags>. Die Tags werden durch spitze Klammern markiert. Die Funktion des Tags wird durch den Elementnamen bezeichnet: z.b. <center> Fast alle Befehle von HTML bestehen aus einem einleitenden Start- und einem abschließenden End-Tag. Damit wird festgelegt, wo eine Markierung beginnt und wo sie wieder endet. Die Namen beider Elemente sind identisch, jedoch enthält das End-Tag vor dem Namen einen Schrägstrich, z.b. </center> 3.1. Tags HTML kennt zwei Formen von Tags: Container-Tags (häufigste Form): <Start-Tag>Text</End-Tag> leere Tags: (enthalten keinen Text; dienen lediglich der Strukturierung) <Elementname>(das End-Tag fehlt.) z.b. <center>willkommen</center> z.b. <br>; <hr> Tags können ineinander verschachtelt sein. Bei der Verschachtelung ist jedoch unbedingt auf die richtige Reihenfolge zu achten! z.b. <center><b>willkommen auf meiner Homepage</b></center> 3.2. Attribute Tags können durch ein oder mehrere Attribute, denen ein Wert zugeordnet ist, spezifiziert werden. Die Attribute erscheinen nur im Start-Tag. z.b. <table width="50%" border="2"> die Tabelle soll eine Breite von 50% der Gesamtbildschirmbreite haben die Tabelle soll von einem Rahmen mit der Stärke von 2 pt umgeben sein. 5 6

4 4. Struktur von HTML-Dokumenten Die Erläuterung der verwendeten Tags erfolgt in den nächsten Kapiteln. Eine HTML-Datei besteht grundsätzlich aus folgenden zwei Teilen: <HEAD> "Kopfteil" des Dokumentes; enthält Informationen über das Dokument, z.b. den Titel des Dokumentes; dieser dient der Identifizierung des Dokumentes; Der Titel hat zum einen Bedeutung für das Auffinden des Dokuments durch Suchmaschinen, zum anderen erscheint der Titel als Eintrag beim Setzen von Bookmarks. <BODY> enthält den eigentlichen Text des Dokumentes, incl. Überschrift, Bilder, Verweise usw., d.h. all das, was im Browserfenster angezeigt wird. Der Body des Dokumentes kann wiederum strukturiert werden in Überschriften verschiedener Ordnung Absätze Aufzählungslisten Tabellen u.a. <HTML> ein einfaches Beispiel: HTML-Quellcode <html> <head> <title>kursangebot</title> </head> <body> <h1>internet-kurse im Wintersemester</h1> - Internet-Grundlagen<p> - Electronic Mail<p> - Suchen im WWW </body> </html> umklammert das gesamte Dokument und kennzeichnet, daß es sich insgesamt um ein HTML-Dokument handelt Anzeige im Webbrowser 5. Zeichensatz in HTML Damit HTML-Dateien problemlos zwischen verschiedenen Rechnerplattformen ausgetauscht werden können, basiert HTML auf einem international genormten Zeichensatz, dem Zeichensatz ISO (auch ISO Latin-1 genannt). Dieser Zeichensatz enthält die schriftspezifischen Zeichen für westeuropäische und amerikanische Sprachen. Ab HTML 4.0 stehen weitere, neue Codierungen vor allem für griechische Zeichen und mathematische Symbole zur Verfügung. Da die Darstellung der Zeichen am Bildschirm jedoch vom verwendeten Webbrowser abhängt und man immer berücksichtigen sollte, daß nicht immer alle Nutzer über den neuesten Browser verfügen, sollten Umlaute, ß und Sonderzeichen codiert dargestellt werden. Für die Codierung werden sogenannte Entity-Referenzen verwendet:, die folgendermaßen dargestellt werden: & leitet eine Entity-Referenz ein; ; schließt sie ab Bsp.: Der Umlaut ä wird dargestellt als ä Universität - Universität für - für Straße - Straße es folgt der Name der Entity (z.b. uml für Umlaut) Analog zur beschriebenen Codierung können Umlaute und Sonderzeichen auch in der numerischen Codierung nach dem Unicode-System dargestellt werden. Die am häufigsten benötigten Zeichen: Symbol Codierung UNI-Code Beschreibung ä ä ä a, Umlaut Ä Ä Ä A, Umlaut ö ö ö o, Umlaut Ö Ö Ö O, Umlaut ü ü ü u, Umlaut Ü Ü Ü U, Umlaut ß ß ß ß, scharfes s 7 8

5 Leerzeichen: Ein einzelnes Leerzeichen kann dargestellt werden durch die Entity (no breaking space) Eine umfassende Tabelle aller codierten Zeichen ist bei St. Münz: zu finden. 7. Elemente zur Textstrukturierung 7.1. Überschriften Überschriften werden durch das Tag <hn> Text </hn> markiert (h = heading; n=zahl der Hierarchiestufe). Dabei sind 6 Herarchiestufen möglich. Beispiel: 6. Kommentare HTML-Dokumente sehen im HTML-Quellcode oft sehr unübersichtlich aus. daher kann es sinnvoll sein, in das HTML-Dokument Kommentare mit Erläuterungen einzufügen. Diese Kommentare werden von den Webbrowsern nicht darstellt, d.h. sie erscheinen wirklich nur im Quellcode und nicht im Browserfenster. <h1>willkommen</h1> <h3>zum HTML-Kurs</h3> Kommentare können an jeder beliebigen Stelle des Dokuments stehen. Sie werden wie folgt darstellt: <!-- Kommentartext --> z.b. <!-- Hier beginnt die erste Tabelle --> Kommentare können folgenden Zwecken dienen: interne Informationen des Autors selbst Auskommentierung von Dokumentteilen, dies ist sinnvoll, wenn neue HTML-Varianten erprobt werden sollen oder wenn man bei der Fehlersuche nicht gleich fündig wird. Die betreffenden Textstellen müssen nicht gelöscht werden, sondern werden einfach in einen Kommentar-Befehl gesetzt, so daß sie im Browserfenster nicht angezeigt werden. Informationen über den Autor des HTML-Dokuments, Erstellungs- bzw. Aktualisierungsdatum usw. Die Textauszeichnung mit dem <hn> - Element beinhaltet immer, daß der Text fett darstellt wird; eine bestimmte Textgröße vorgegeben ist, wobei <h1> die größte und <h6> die kleinste Darstellung bedeutet; daß dieser Text ein eigener Absatz ist, d.h. vor und hinter einer Überschrift wird immer eine Leerzeile eingefügt. Attribute zum <h> - Element Überschriften werden standardmäßig immer linksbündig dargestellt. Eine zentrierte oder rechtsbündige Ausrichtung kann durch entsprechende Attribute bewirkt werden. Das Attribut für die horizontale Ausrichtung ist align. Die dazugehörigen Werte sind center und right. Bsp. <h3 align=center> Veranstaltungen </h3> 9 10

6 7.2. Trennlinien HTML-Dokumente haben im Gegensatz zu Papierseiten keine Seitenumbrüche - der gesamte Inhalt steht auf einer einzigen, oft sehr langen Webseite. Um hier eine optische Auflockerung zu erreichen, kann es sinnvoll sein, Trennlinien einzufügen. Trennlinien werden durch das Tag <hr> (horizontal rule) erzeugt. Es besteht nur aus dem Startag. Bei keinen nähren Angaben wird eine Trennlinie erzeugt, die über die gesamte Bildschirmbreite geht, wie hier Ungeordnete Listen Ungeordnete Listen sind Aufzählungslisten, deren einzelne Einträge durch ein Aufzählungszeichen gekennzeichnet sind. Eine ungeordnete Liste wird vom Tag <ul>... </ul> (unordered list) umklammert. Die einzelnen Listeneinträge werden durch das Tag <li> (list) eingeleitet, das End-Tag kann hier entfallen. Beispiel: Über Attribute lassen sich Breite und Ausrichtung beeinflussen. Beispiel: < hr width=50%> Kurse: <ul> <li>internet <li>html <li>word </ul> Die Breite wird durch das Attribut width angegeben. Der diesem Attribut zugeordnete Wert kann entweder eine feste Zahlenangabe in Pixel sein, oder aber eine relative Angabe in %. Im obigen Beispiel soll die Trennlinie 50% der Bildschirmbreite breit sein. Die Ausrichtung wird durch das Attribut align festgelegt. Mögliche Werte sind left, center und right. Beispiel: <hr width=30% align=left> 7.4. Listen HTML ermöglicht drei unterschiedliche Listenformen: ungeordnete Listen geordnete Listen Definitionslisten und geschachtelte Listen als Mischform Die Auswahl des Aufzählungszeichens hängt vom Browser ab Geordnete Listen Geordnete Listen sind durch eine Durchnumerierung gekennzeichnet. Sie werden vom Tag <ol>... </ol> (ordered list) umklammert. Die einzelnen Listeneinträge werden ebenfalls durch <li> eingeleitet. Beispiel: Kurse: <ol> <li>internet <li>html <li>word </ol> 11 12

7 Soll statt einer numerierten Liste eine alphabetische erzeugt werden, ist dem <ol> - Tag das Attribut type mit dem Wert A hinzuzufügen. Beispiel: Kurse: <ol type=a> <li>internet <li>html <li>word </ol> Definitionslisten Definitionslisten sind für Glossare gedacht. Sie eigenen sich aber ebenso für Literaturverzeichnisse o.ä. Definitionslisten bestehen aus drei unterschiedlichen Tags: <dl>... </dl> (definition list) - umklammert die gesamte Liste <dt> (definition term) leitet den zu definierenden Begriff ein; ist stets linksbündig; End- Tag kann entfallen <dd> (definition definition) leitet die dazugehörige Definition ein; wird eingerückt dargestellt; End-Tag kann ebenso entfallen Beispiel: Geschachtelte Listen: Listen können ineinander geschachtelt sein, d.h. ein Listeneintrag kann eine weitere Liste enthalten. Beispiel: Kurse: <ol> <li>internet <ul> <li> <li>ftp <li>www </ul> <li>html <li>word </ol> <dl> <dt>html <dd>hypertext Markup Language <dt>hyperlink <dd>querverweis zu einem anderen Dokument innerhalb des eigenen Servers oder auf Fremdangebote. <dt>inline Images <dd>bilder, die auf einer Web-Seite zusammen mit Text dargestellt werden können. </dl> 13 14

8 8. Elemente zur Textformatierung HTML unterscheidet zwischen logischen und physischen Elementen zur Formatierung von Text. Logische Elemente gehen von der Bedeutung des Textes aus, z.b. daß ein Textabschnitt ein Zitat darstellt. Es hängt dann vom Webbrowser ab, wie der Text am Bildschirm erscheint. Physische Elemente geben dagegen unabhängig vom Browser konkret an, wie der Text formatiert werden soll, z.b. fett oder kursiv. Das entsprechende Element ist <font>... </font>. Attribute zu <font> sind: size für die Schriftgröße <font size=+2> Da die dargestellte Schriftgröße von der Browsereinstellung abhängt, ist es sinnvoll, die gewünschte Schriftgröße als relative Angabe zur voreingestellten anzugeben. Das obige Beispiel bedeutet deshalb, daß hier die Schrift um zwei Punkte größer sein soll als die Voreinstellung des Browsers.(möglich sind Werte zwischen 1 und 7) Logische Elemente: color für die Schriftfarbe Die Schriftfarbe soll rot sein. <em>... </em> (emphasize) Hervorhebung, meist kursiv dargestellt <font color="red"> (Farben und Farbwerte s. S. 23) <strong>... </strong> <cite>... </cite> starke Hervorhebung, meist fett dargestellt Zitierung, meist kursiv dargestellt face für Schriftart <font face="arial"> Man sollte auf jeden Fall exakte Schriftartnamen verwenden. Von exotischen Schriften ist allerdings abzuraten, da der Browser ihm unbekannte Schriften ignoriert und den Text dann in Normalschrift darstellt. <blockquote>...</blockquote> <code>... </code> Zitierung, Text wird links und rechts eingerückt dargestellt Kennzeichnung als "Quelltext", in nichtproportionaler Schrift dargestellt <font size=+2 color="red" face="arial"> alle drei Attribute können kombiniert werden: Physische Elemente <b>... </b> (bold) <i>... </i> (italic) fett kursiv 9. Hyperlinks 9.1. Hyperlinks zu Webdokumenten auf anderen Servern (absolute Links) <tt>... </tt> (teletype) Elemente zur Schriftauszeichnung nicht-proportionale Schrift Ohne besondere Kennzeichnung wird ein HTML-Dokument in der im Browser eingestellten Schrift dargestellt. (z.b. unter Netscape einstellbar: Menü Bearbeiten / Einstellungen / ) Besteht der Wunsch, bestimmte Textstellen in einer anderen Größe, Farbe oder Schriftart darzustellen, müssen diese entsprechend markiert sein. 15 Die herausragende Eigenschaft des WWW ist das Setzen von Verweisen auf andere irgendwo im Internet vorhandene Dokumente beliebigen Datenformats. Diese Dokumente werden so miteinander vernetzt und können auf Anforderung auf den lokalen Rechner geholt werden. Diese Eigenschaft wird Hypertext- oder besser Hypermediafähigkeit genannt. Verweise im Hypertext werden mit den A-Element (Anchor), bestehend aus Start- und End-Tag, markiert. Das Start-Tag <A> enthält das Attribut HREF (hypertext reference), dem ein Wert, nämlich die Internet-Adresse des Zieldokumentes, zugeordnet ist. <a href= Zieladresse >Sichtbarer Text</a > 16

9 Bsp.: <a href= Sender FRITZ</a> Der Sender Fritz Hier finden Sie <a href="http://selfhtml.teamone.de/html/ verweise/index.htm">detaillierte Beschreibungen zum Thema Hyperlinks.</a> Die Zieladresse muß immer in Anführungszeichen gesetzt werden! Der sichtbare Text wird vom Browser farbig markiert und unterstrichen dargestellt. Durch Anklicken dieses so markierten Textes wird der Browser veranlaßt, das entsprechende Dokument vom Server anzufordern und am Bildschirm anzuzeigen. Hier finden Sie detaillierte Beschreibungen zum Thema Hyperlinks. Wird die Zieladresse, wie oben beschrieben, komplett angegeben, dann spricht man auch von einem absoluten Link Hyperlink auf ein Dokument innerhalb des gleichen Verzeichnisses (relative Links) In der Regel besteht eine Website aus mehreren HTML-Dokumenten und Graphik- Dateien, die alle in einem bestimmten Verzeichnis des Servers liegen. Befindet sich das Dokument, zu dem ein Link gesetzt werden soll, nicht auf einem anderen Server, sondern im gleichen Verzeichnis wie das Dokument, in dem der Link gesetzt wird, kann ein Teil der vollständigen Adresse weggelassen werden. Hier genügt es, nur den Namen der Datei anzugeben, zu der der Link gesetzt wird (relativer Link). Bsp.: Im Verzeichnis ZEIK der Hostadresse liegen die Dateien start.htm und murphy.htm im gleichen Unterverzeichnis. Wird nun im Dokument start.htm ein Verweis zum Dokument murphy.htm gesetzt, so genügt es, nur den Dateinamen zu referenzieren. <a href="murphy.htm">murphys Gesetze</a> Der komplette URL kann hier weggelassen werden. Dies hat den Vorzug, daß bei Änderungen der übergeordneten Verzeichnisse die Adressierung des Dokumentes nicht geändert werden braucht Hyperlink auf ein Dokument in einem anderen Verzeichnis Bei umfangreicheren Websites ist es sinnvoll, die vorhandenen Dokumente in unterschiedlichen Verzeichnissen abzulegen (z.b. Textdateien und Graphikdateien in je ein gesondertes Verzeichnis). Die Referenzierung auf Dateien in anderen Verzeichnissen ist wie folgt vorzunehmen: auf ein übergeordnetes Verzeichnis: z.b. <a href="../text.htm">... </a> Das übergeordnete Verzeichnis wird mit zwei Punkten angegeben. Der Name des Verzeichnisses ist nicht erforderlich. Danach folgen ein Schrägstrich und der Dateiname. auf ein untergeordnetes Verzeichnis: z. B. <a ref="bilder/meinfoto.gif">... </a> Das untergeordnete Verzeichnis muß mit Namen angegeben werden. Danach folgen ein Schrägstrich und der Dateiname Hyperlink zu einer Textstelle im gleichen Dokument Bei sehr langen Dokumenten ist es sinnvoll, Links zu bestimmten Textstellen zu setzen, z.b. von vorangestellten Inhaltsverzeichnissen zu den konkreten Texten. (Ein Beispiel hierfür sind die Amtlichen Bekanntmachungen der Universität Potsdam.) Zuerst muß die Textstelle, zu der per Link gesprungen werden soll (Ziel-Anker), entsprechend markiert werden. Bsp. Die Datei murphy.htm enthält zunächst eine Themenübersicht, von der aus die konkreten Beschreibungen der einzelnen Themen mit einem Link verknüpft sind. a) Zunächst muß der anzuspringende Zielanker (target), d.h. die Textstelle im gleichen Dokument, zu der gesprungen werden soll, markiert werden: <a name="cola"> Der Cola-und-süßer-Kaffee-Lehrsatz </a> Das Start-Tag des Zielankers enthält das Attribut name, dem als Wert eine beliebige selbstgewählte Bezeichnung zugewiesen werden muß. b) Die Textstelle, die als Link fungieren soll, muß als Startanker mit Zieladresse markiert werden: <a href="#cola"> Der Cola-und-süßer-Kaffee-Lehrsatz </a> 17 18

10 Der Name der als Ziel markierten Textstelle muß hier als Adresse eingetragen und der Bezeichnung ein # vorangestellt werden. Welchen Namen der Zielanker erhält, ist völlig unerheblich, da dieser Name nirgendwo sichtbar wird. Allein wichtig ist, daß im Link die identische Zeichenfolge für den Namen wie im Zielanker angegeben wird Hyperlink zu einer Textstelle in einem anderen Dokument a) Der Zielanker, d.h. die Textstelle in einem anderen Dokument, zu der gesprungen werden soll, ist in der gleichen Weise wie oben mit einem Namen zu bezeichnen. <a name="cola"> Der Cola-und-süßer-Kaffee-Lehrsatz </a> b) Startanker mit Zieladresse - in der Datei, die den Link enthalten soll: <a href="murphytext.htm#cola"> Der Cola-und-süßer-Kaffee-Lehrsatz </a> Im Vergleich zum obigen Beispiel sind hier im Link der Name der Zieldatei und - mit # angeschlossen - die Bezeichnung des in dieser Datei definierten Zielankers anzugeben Hyperlink auf eine Mail-Adresse Um dem Besucher der Web-Seiten die Möglichkeit zu geben, direkt aus der Web-Seite heraus eine Mail abzuschicken, wird auf die Mail-Adresse ein Link gesetzt. Bsp.: Rückfragen bitte an <a href= > Herrn Maier </a> Als Zugriffsart muß hier vor der Zieladresse MAILTO angegeben werden. Per Mausklick auf den so eingerichteten Link wird jetzt das im Browser integrierte Mail- Programm gestartet, mit dem eine ganz normale Mail an die im Link angegebene Adresse geschickt werden kann. Voraussetzung für das Funktionieren des so eingerichteten Links ist allerdings, daß im Browser (bei Netscape im Menu Edit / Preferences / Mail and Newsgroups ) die notwendigen Eintragungen vorgenommen wurden Hyperlinks zu Adressen anderer Internetdienste: FTP, Telnet, Gopher, News Die allgemeine Syntax eines Links <a href= Zieladresse >Sichtbarer Text</a> gilt auch hier. Analog zu Links auf Mail-Adressen muß hier die für den jeweiligen Internetdienst erforderliche Zugriffsart/Kommunikationsmethode vorangestellt werden. Link zu einem Dokument auf einem FTP-Server Bsp.: <a href="ftp://ftp.uni-potsdam.de/pub/graphics/pics/ yosemitefalls.gif"> Wasserfall im Yosemite National Park</a> Link zu einer Telnet-Adresse Bsp.: <a href="telnet:// ">katalog der Universitätsbibliothek Bremen</a> Link zu einer Gopher-Adresse Bsp.: <a href="gopher://gopher.elib.com:70/11/aboutc4"> Elektronisches Textarchiv in den USA</a> Link auf eine Newsgroup Bsp: <a href="news:de.comm.infosystems.www.authoring.misc"> Newsgroup zum Web Publishing</a> 10. Einbinden von Graphiken Grundsätzlich sind Graphiken eigenständige Dateien, die in die HTML-Seite eingebunden werden. Bilder, die gleichzeitig mit der HTML-Datei geladen und angezeigt.werden, nennt man Inline-Images. Dazu verwendet man das Element IMG (nur als Start-Tag; kein End-Tag). Das Attribut SRC (source) spezifiziert, wo die Bilddatei zu finden ist. Auch hier gibt es, analog zu den Hyperlinks, absolute und relative Adressangaben. Bsp.: <img src= > <img src="pcgraphik.jpg"> 19 20

11 Die Bilddatei muß in einem Graphikformat vorliegen, das der Browser anzeigen kann Graphikformate: GIF (Graphic Interchange Format) JPG/JPEG (Joint Photographic Experts Group) das am weitesten verbreitete Graphikformat, unterstützt 256 Farben durch hohe Kompressionsdichte ca. 50% weniger Speicherplatz, wodurch eine schnellere Datenübertragung ermöglicht wird. Bei der Veränderung der originalen Größenangaben sollte jedoch Zurückhaltung geübt werden, da dies meist zulasten der Bildqualität geht. Bsp.:<img src="graphik/books.gif"alt=bücher width=180 height=110> Nicht geeignet ist TIFF, ein weit verbreitetes Graphikformat, das vielfach von Scan- Software erzeugt wird. Nachteil: Diese Format wird nicht direkt vom Browser unterstützt und kann deshalb nicht für "Inline-images" verwendet werden. Weitere Attribute zum Element <IMG> Alt = alternativer Text Oftmals ist aus Zeitersparnisgründen das Anzeigen der Bilder abgeschaltet, dann erscheint statt dessen ein Platzhalter. Um den Benutzer in diesem Fall darauf hinzuweisen, was auf dem Bild dargestellt ist, ist es nützlich, das Attribut ALT zu verwenden, das einen alternativen Text enthält, der dann anstelle des abgeschalteten Bildes erscheint. Bsp.: <img src= stud.jpg alt=studenten im Garten> Neuere Browserversionen blenden den alternativen Text auch ein, wenn der Mauszeiger darüberfährt. Darüber hinaus ist der alternative Text für Suchmaschinen von Bedeutung. Suchmaschinen erfassen nur HTML-Quellcode. Bilder können deshalb nur über ihre Dateinamen und über den alternativen Text identifiziert werden. Width, Height = Größenangaben DieAttribute width und height spezifizieren dien Größe eines Bildes. Die Größenangaben müssen absolut in Pixel angegeben werden. Bsp.:<img src="graphik/books.gif"alt=bücher width=130 height=80> Bilder als Hypertext-Links Ein Bild, das als Link fungiert, erhält einen farbigen Rahmen; durch Mausklick auf das Bild wird eine neue Datei herangeholt. Das Element IMG muß dazu in einen Anker integriert werden. Bsp.: <a href ="start.htm"><img SRC=="back.gif" alt="zurück zum Inhaltsverzeichnis"></A> Eine beliebte Anwendung ist, zunächst ein sehr kleines Bild (sog. "Thumbnail") anzeigen zu lassen, das als Link fungiert. Bei Bedarf kann dann das gleiche Bild per Mausklick in größerer Darstellung herangeholt werden (Zeitersparnis). Das heißt jedoch, daß auf jeden Fall zwei Bilder notwendig sind. Gute Grafikprogramme erlauben allerdings auch das proportionale Verkleinern von Grafiken. Von vielen Internet-Servern kann man kostenlos Graphiken herunterladen, z.b. URL:

12 11. Gestaltung von farbigen Seitenhintergrund Eigenschaften einer Web-Seite, die für das gesamte Dokument gelten sollen, müssen durch entsprechende Attribute im Body-Element eingetragen werden. Hierzu zählen die Farbe des Hintergrundes die Farbe des Textes, der Links und der besuchten Links - Attribut: bgcolor - Attribut: text - Attribut: link - Attribut: vlink z. B. <body bgcolor="#ffff00" text="#408080" link="#ff0000" vlink="#8000ff"> Die Farben werden durch eine alphanumerische Zeichenfolge dargestellt, die den Hexadezimalwert für die einzelnen Farben angibt. (Kombinationswert aus den Farben Rot, Grün, Blau - auch als RGB-Code bezeichnet) Auswahl möglicher Farbenwerte: Farben und ihre Hexadezimalwerte Die Angabe von folgenden festgelegten Farbnamen ist seit HTML 3.2. möglich: Rot #FF0000 white black Gelb #FFFF00 aqua purple Orange #FF8000 blue red Weiß #FFFFFF fuchsia silver Hellgrün #00FF00 gray teal Tannengrün # green yellow Dunkelgrün # lime maroon Türkis #00FFFF navy olive Royalblau #0000FF Dunkelblau # Hellblau #00D0FF Pink #FF80FF Lila #8000FF Der Seitenhintergrund kann auch durch die Einbindung einer Graphik gestaltet werden. Im BODY-Element ist dann mit dem Attribut background die Adresse der Graphik anzugeben: z.b. <body background= g/apfel_l.gif > Frei verwendbare Beispiele sind z.b. zu finden unter den URL : Merke: Mit Hintergrundgraphiken sollte man sehr zurückhaltend umgehen. Hier gilt: Weniger ist mehr! Nichts ist unangenehmer, als wenn vor lauter Hintergrundgraphik der eigentliche Text, und damit die Information, nicht mehr zu lesen ist. 12. Tabellen Mit der Tabellenumgebung können nicht nur tabellarische Darstellungen erzeugt werden, sondern mit Tabellen werden auch die Möglichkeiten des Layouts erheblich erweitert. Tabellen werden von dem Container-Tag <TABLE>...</TABLE> umschlossen. Die Grundelemente einer Tabelle sind Reihen und Zellen. <TR> - erzeugt eine neue Reihe <TD> - erzeugt die einzelnen Datenzellen der Tabelle; diese können auch leersein <TH> - wird benutzt, um Überschriften für die einzelnen Reihen und Spalten hervorzuheben (meist fett) (Die End-Tags können bei allen drei Elementen entfallen) Beispiel: <HTML> <HEAD> <TITLE>Mitarbeiter</TITLE> </HEAD> <BODY> <CENTER><H3>Mitarbeiter</H3></CENTER> <TABLE> <TR><TH>Name <TH>Haus, Raum <TH>Tel. <TH> -Adresse <TR><TD>Maier, Rolf <TD>H.8, R.12 <TD>1234 <TR><TD>Weiss, Grit <TD>H.8, R.13 <TD>1245 <TR><TD>Roth, Jens <TD>H.8, R.14 <TD>1246 <TR><TD>Lenz, Tina <TD>H.8, R.15 <TD>1256 </TABLE> </BODY> </HTML> 23 24

13 Darstellung des Beispiels im Browser: Mitarbeiter Name Haus, Raum Telefon -adresse Maier, Rolf H. 8, R Weiss, Grit H. 8, R Roth, Jens H. 8, R Lenz, Tina H. 8, R Das Attribut ALIGN Mit dem ALIGN-Attribut wird die horizontale Ausrichtung des Textes in den Zellen bestimmt. <TR><TD ALIGN=LEFT> <TR><TD ALIGN=CENTER> <TR><TD ALIGN=RIGHT> - Text linksbündig - Text zentriert - Text rechtsbündig Das Attribut VALIGN Formatierung von Tabellen: Das Attribut WIDTH Mit dem Attribut WIDTH kann sowohl die Breite der gesamten Tabelle als auch die Breite der Spalten beeinflusst werden. z.b. <TABLE WIDTH=500> oder <TABLE WIDTH=100%> Die erste Angabe bezeichnet eine absolute Breite in Pixel; die zweite eine relative Breite, bezogen auf die Breite des Browserfensters. Ohne konkrete Angaben wird die Breite der Spalten automatisch an der breitesten Textstelle ausgerichtet. Breitenangaben zu einer Spalte erscheinen im Tag <TD>. z.b. <TR><TD WIDTH=100>Maier, Rolf<TD WIDTH=100>Haus, Raum<TD WIDTH=60> Mit dem VALIGN-Attribut wird die vertikale Ausrichtung des Textes in den Zellen bestimmt. <TR><TD VALIGN=TOP> <TR><TD VALIGN=MIDDLE> <TR><TD VALIGN=BOTTOM> Das Attribut COLSPAN - Text erscheint am Anfang der Zelle (= 1. Zeile) - Text wird vertikal zentriert - Text erscheint am Ende der Zelle (= letzte Zeile) Das Attribut COLSPAN legt fest, über wie viele Spalten sich der Zelleninhalt horizontal erstrecken soll, d.h. z.b. Verbinden von 2 Zellen zu einer einzigen, z.b. für Überschriften. Bsp: <TABLE> <TR><TD COLSPAN=4> <TR><TD> <TD> <TD> <TD> </TABLE> Die Zahlen bezeichnen die Anzahl der Pixels. Alternativ können die Breitenangaben auch als relative Größe in Prozent angegeben werden z.b. <TD WIDTH=25%> Diese Angabe besagt, daß die Breite dieser Zelle 25% der Gesamtbreite der Tabelle betragen soll Das Attribut ROWSPAN Das Attribut ROWSPAN erlaubt die vertikale Positionierung von Text über mehrere Zellen vertikal 25 26

14 Bsp.: <TABLE> <TR><TD ROWSPAN=4> <TR><TD> <TD> <TD> <TR><TD> <TD> <TD> <TR><TD> <TD> <TD> </TABLE> 13. Frames Frames ermöglichen die Aufteilung des Browserfensters in unterschiedliche Bereiche. Somit können die Möglichkeiten der Hypermediaverknüpfung und auch der Layoutgestaltung wesentlich erweitert werden. Jeder als Frame definierte Bildschirmbereich kann entweder einen wechselnden oder einen gleichbleibenden Inhalt haben. Beispiel: Das Attribut BORDER ermöglicht die Rahmenbildung um Tabellen, z.b. <TABLE BORDER=4> Die Zahl gibt die Stärke der Rahmenlinie in Pixels an Das Attribut BGCOLOR Tabellen können mit dem Attribut BGCOLOR farbig gestaltet werden. Die einzelnen Farbwerte entsprechen den auf Seite 23 beschriebenen. Das Attribut BGCOLOR kann sowohl für die gesamte Tabelle, als auch für Reihen und Zellen verwendet werden. <TABLE BGCOLOR="red"> Der Hintergrund der gesamten Tabelle ist rot <TR BGCOLOR="blue"> Der Hintergrund der Reihe ist blau. <TD BGCOLOR="yellow"> Der Hintergrund der Zelle ist gelb. In der Darstellung der Farben sind dahingehend Prioritäten gesetzt, dass die spezifischste Farbe gegenüber den anderen immer Priorität hat. Die Farbe der Zelle hat Vorrang gegenüber der Farbe der Reihe und diese wiederum hat Vorrang gegenüber der Farbe der gesamten Tabelle. Inhaltsverzeichnis: Kap. 1 Kap. 2 Kap. 3 Kap. 4 Anhang Kapitel 1: Grundstruktur von HTML-Dokumenten Text Text Ein Dokument mit Frames hat eine ähnliche Grundstruktur wie ein einfaches HTML- Dokument.! Unterschied: Ein Frame-Set wird anstelle des <BODY>-Tags definiert.! Ein Frame-Set wird durch mehrere zusammengehörige Frames gebildet. Bsp: Grundstruktur eines Framesets <HTML> <HEAD> <TITLE>Frame-Test</TITLE> </HEAD> <FRAMESET... > (Frame-Definitionen...) </FRAMESET> </HTML Beim Definieren des Frame-Sets wird bestimmt, wie das Browserfenster aufgeteilt werden soll

15 Dazu werden dem Tag <FRAMESET> zwei Attribute hinzugefügt: COLS ROWS Bsp. 1: horizontale Teilung vertikale Teilung <FRAMESET COLS= 30%,70% >... Frame-Definitionen </FRAMESET> 1. Frame 2. Frame Zwei vertikale Frames, deren Breite 30% und 70% der Gesamtbreite des Browserfensters ausmachen. Bsp. 2: <FRAMESET ROWS= 30%,70% >... Frame-Definitionen </FRAMESET> 1. Frame Zwei horizontale Frames, deren Höhe 30% und 70% der Gesamthöhe des Browserfensters ausmachen 2. Frame Bsp. 3: < FRAMESET ROWS ="15%,85%"> <FRAME SRC="start.htm"> < FRAMESET cols="30%,70%"> < FRAME SRC ="http://www.unipotsdam.de"> < FRAME SRC ="Murphy1.htm"> </ FRAMESET > </ FRAMESET > 2. Frame (http://www.uni-potsdam.de) 1. Frame (start.htm) 3. Frame (Murphy.htm) Erzeugt werden jetzt drei Frames: - zuerst zwei horizontale mit den Höhen 15% und 85% des Browserfensters - danach wird der zweite Frame durch einen neuen Frameset erneut aufgeteilt und zwar in zwei vertikale Frames mit den Breiten 30% und 70% Frame-Definitionen Mit <FRAMESET> wird nur der äußere Rahmen und die Aufteilung des Browserfensters definiert. Ein einzelner Frame innerhalb des Frame-Sets wird mit dem Tag <FRAME> definiert. Mit der Definition des Frame wird festgelegt, was, d.h. welche Datei in dem Frame angezeigt werden soll. <FRAME> enthält aber keineswegs selbst den Rahmeninhalt, sondern legt lediglich fest, wo (mit den Attribut SRC ) der Inhalt zu finden ist, d.h. welche WWW-Adresse aufgerufen werden soll (d.h. das Inhaltsmodell von <FRAME> ist leer, es gibt kein End-Tag). Bsp. Frameset mit definierten Frames <HTML> <HEAD> <TITLE>Frame-Test</TITLE> </HEAD> <FRAMESET COLS= 30%,70% > <FRAME SRC= start.htm > <FRAME SRC= Murphy.htm > (bzw. <FRAME SCR= >) </FRAMESET> </HTML> Der Inhalt eines Rahmens, auf den ein <FRAME>-Tag verweist, ist immer ein komplettes HTML-Dokument. Für dieses HTML-Dokument fungiert der Rahmen, der es enthält, wie ein normales Browserfenster. Der Inhalt des anderen Rahmens bleibt unverändert. Attribute zu <FRAME> 1. Namen von Frames definieren Frames können Namen erhalten. Dies ist für das Definieren von Hyperlinks von Bedeutung. Man kann bei einem Link angeben, daß das Zieldokument in einem bestimmten (benannten) Frame angezeigt werden soll

16 <FRAMESET COLS= 30%,70% > <FRAME SRC= inhalt.htm > <FRAME SRC= titel.htm NAME= rechtes_fenster > </FRAMESET> Bsp.: In der Datei start.htm (Inhaltsverzeichnis), die im linken Frame angezeigt wird, ist ein Link gesetzt auf die Datei Murphy.htm, die beim Anklicken im rechten Frame erscheinen soll. Durch die Angabe NAME= "Fenstername" im Definitions-Tag eines Frames wird dem Frame ein Namen zugewiesen. In Hyperlinks kann man diesen Frame unter dem vergebenen Namen adressieren. Bsp. In der Datei start.htm ist ein Link auf die Homepage der Universität Potsdam gesetzt. Wird dieser Link per Mausklick aktiviert, soll die Homepage der Uni in dem Frame angezeigt werden, der den Namen rechtes_fenster hat. Dieser Name wird als TARGET definiert. <HTML> <HEAD><TITLE>Adressen</TITLE> <BODY> <H1>Top-Adressen</H1> <A HREF="http://www.uni-potsdam.de" TARGET="rechtes_fenster"> Universität Potsdam</A> </BODY> </HTML> Reservierte Fensternamen Folgende reservierte Fensternamen haben bei Verweisen eine spezielle Bedeutung: _blank: _self: Das Dokument wird in einem neuen (zusätzlichen) Fenster angezeigt. Das Dokument wird im gleichen Fenster angezeigt wie der Link. _parent: Das Dokument ersetzt alle Frames dieser Ebene; d.h. innerhalb der Frame- Hierarchie wird um eine Stufe zurückgegangen. _top: Das Dokument ersetzt alle Frames des Browser-Fensters. Das Frame-Set wird hiermit verlassen. Links in anderen Frames (Ziel-Frames) anzeigen Man kann bei der Definition von Links angeben, daß die Zieldatei in einem bestimmten Frame angezeigt werden soll. Dazu wird das Attribut TARGET= verwendet. Nach TARGET= können sowohl selbstdefinierte als auch die o.g. reservierten Framenamen angegeben werden. <A HREF= Murphy.htm TARGET= rechtes_fenster >Murphys Gesetze</A> Datei Murphy.htm erscheint im Frame mit dem Namen rechtes Fenster <A HREF= TARGET= _blank >Kapitel 1</A> Die Web-Seite erscheint in einem neuen zusätzlichen Fenster, das keine Frames mehr enthält. Alle Verweise einer Datei in einem bestimmten anderen Frame anzeigen Man kann in einer HTML-Datei angeben, daß alle darin enthaltenen Verweise zu einem bestimmten anderen Frame-Fenster führen. So erspart man sich die Arbeit, bei jedem Verweis die gleiche Frame-Adressierung mit anzugeben. Besonders sinnvoll ist dies, wenn man z.b. ein linkes Fenster mit sehr vielen Verweisen hat (z.b. ein Inhaltsverzeichnis), deren Verweisziele (z.b. Texte der einzelnen Kapitel) immer im rechten Fenster angezeigt werden sollen. Das voreingestellte Frame-Fenster für Verweise wird dann im Kopfteil der HTML-Datei angegeben. <HTML> <HEAD> <TITLE>HTML-Einführung</TITLE> <BASE TARGET= rechtes_fenster > </HEAD> 2. Attribut SCROLLING: Scrollbare/nicht scrollbare Fenster <FRAME SRC= start.htm SCROLLING =no> <FRAME SRC= Murphy.htm SCROLLING=yes> Mit SCROLLING=yes erzwingt man, daß das Anzeigefenster in jedem Fall Scroll-Leisten besitzt; mit SCROLLING =no verhindert man dies. Als Standard-Einstellung von Netscape wird eine Scroll-Leiste eingeblendet, wenn der Fensterinhalt es erfordert

17 3. Attribute MARGINWIDTH/MARGINHEIGTH: Mindestabstände zwischen Fensterrand und Fensterinhalt <FRAME SRC= start.htm SCROLLING =no MARGINWIDTH=5 MARGINHEIGHt=7> <FRAME SRC= Murphy.htm SCROLLING=yes> MARGINWIDTH= 5 legt den Abstand zwischen dem linken bzw. Rechten Fensterrand und dem Fensterinhalt in Pixel fest. der Browser dann darstellen kann, z.b. eine Information darüber, daß an dieser Stelle eigentlich Frames stehen und dazu eine bestimmte Version eines Browsers installiert sein muß. Browser, die Frames unterstützen, erkennen die Frameset-Tags und ignorieren deshalb den Text innerhalb von <NOFRAMES>. MARGINHEIGHT= 10 legt den Abstand zwischen dem oberem bzw. unterem Fensterrand und Fensterinhalt in Pixel fest. 4. Attribut NORESIZE: Unveränderbare Fenstergröße Normalerweise kann man die Größe der Frames durch Ziehen mit der Maus verändern. Verhindern kann man dies mit NORESIZE, d.h. die Größe des Frames bleibt so, wie der Autor des HTML-Dokuments sie festgelegt hat. <FRAME SRC= start.htm SCROLLING =no marginwidth=5 marginheight=7 noresize> 5. Gestaltung der Rahmen von Frames: das Attribut BORDER <FRAMESET BORDER=0 > gesamter Frame-Set erscheint ohne sichtbare Rahmenlinie <FRAME SRC= start.htm BORDER=0> einzelner Frame erscheint ohne Rahmen Gibt man bei BORDER= eine Zahl an, wird die Rahmenbreite in Pixeln festgelegt. Farbige Fensterrahmen werden durch BORDERCOLOR definiert (funktioniert nicht unter Netscape). <FRAME SRC= inhalt.htm BORDER=4 BORDERCOLOR=#ff0000> <NOFRAMES> Wie oben beschrieben, steht <FRAMESET> anstelle des <BODY> - Tags. Dies hat zur Folge, daß ein Browser, der Framesets nicht kennt (z.b. Netscape 2.0), alle diesbezüglichen Tags ignoriert und eine leere Seite anzeigt. Damit keine solchen unerwünschten leeren Seiten entstehen, sollte man das Tag <NOFRAMES>...</NOFRAMES> verwenden. Hier kann Text eingegeben werden, den 33 34

18 14. HTML - Editoren Es gibt eine Vielzahl von HTML-Editoren. Eine kommentierte Übersicht zu HTML-Editoren ist unter zu finden. Die hier genannten Editoren arbeiten alle nach dem sogenannten WYSIWYG-Prinzip (What You See Is What You Get). Sie wurden von der Autorin getestet und werden aufgrund eigener Erfahrungen empfohlen. o o o o o homepages/webseiten_programmieren/ HTML Validation Service: Web-Toolbox: Dr. Web Know-how für Webworker HTML Edit, Phase 5 - kostenlos; unterstützt Frames und viele andere Funktionen; sehr komfortabel URL: NVU Composer - Weiterentwicklung der Mozilla-Suite-Komponente Composer, kostenlos, hohe Funktionalität, sehr komfortabel URL: FrontPage - sehr umfassend, unterstützt z.b. Frames; mit eigener Server- Software; kostenlose Nutzung für 45 Tage, UP hat hierfür eine Campuslizenz URL: Dreamweaver - sehr komfortabel; kostenlose Nutzung für 30 Tage URL: HomeSite - kostenlose Nutzung für 30 Tage URL: 16. Empfehlungen für weiterführende Tutorials Die folgenden, aus einer Vielzahl ausgewählten Veröffentlichungen sind im Internet frei verfügbar und können unter Beachtung des Copyrights kostenlos kopiert werden: Stefan Münz ; Wolfgang Nefzger HTML-Referenz: Grundlagen, Alternativen und Erweiterungen Franzis Verlag, Poing bei München, 2002 URL:http://de.selfhtml.org/ind ex.htm David Siegel: Axel Pratzner: Creating Killer Web Sites ISBN: URL: HTML-Seminar ISBN: URL: 15. Hilfen im Internet Neueste Entwicklungen zu HTML sind unter der Adresse verfügbar Konverter und andere Tools findet man unter den Adressen bzw. Übersichten über HTML-Werkzeuge und weitere unterstützende Tools findet man unter den Adressen: Böing, Norbert: Partl, Hubert: Die eigenen Homepage Zentrale für Unterrichtsmedien im Internet URL: urse/boeing/home.htm HTML-Einführung. Hypertext Markup Language - die Sprache des Wold Wide Web Universität für Bodenkultur, Wien 35 36

19 URL:http://www.boku.ac.at/htmleinf/hein.html Nennhuber, Dieter: Internet-Magazin: quickhtml URL: 37

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

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

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

Zeile 3-7: Der Kopf der HTML-Datei. Hier werden unsichtbare Einstellungen für das ganze Dokument vorgenommen.

Zeile 3-7: Der Kopf der HTML-Datei. Hier werden unsichtbare Einstellungen für das ganze Dokument vorgenommen. Inhalt: Grundgerüst, Tags, Zeichensatz, Meta-Tags, Farben 1 2 3 4 titel der Datei 5 6

Mehr

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

-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

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

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

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

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

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

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

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

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

Arbeiten im Datennetz der Universität Regensburg

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

Mehr

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

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

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

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

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

Mehr

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

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

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

Elemente für Webseiten. Überschriften

Elemente für Webseiten. Überschriften Elemente für Webseiten Es gibt zahlreiche Elemente und Attribute zum Aufbau von Webseiten: Schrifttypen Farbe Listen Tabellen Hyperlinks Bilder Rahmen. Helmar Burkhart Werkzeuge der Informatik Lektion

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

Erzeuge ein lokales Verzeichnis, wo du deine Dokumente ablegen willst. Speichere dort alle Dokumente, die du für deine HTML-Seite(n) brauchst.

Erzeuge ein lokales Verzeichnis, wo du deine Dokumente ablegen willst. Speichere dort alle Dokumente, die du für deine HTML-Seite(n) brauchst. Frontpage Express FrontPage Express ist ein Editor der Firma Microsoft für Web-Seiten. Mit Hilfe von FrontPage Express kannst du Web-Seiten in HTML erstellen und formatieren. Dabei arbeitest du in einer

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

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

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

Mehr

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

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

Erstellen von Web-Seiten

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

Mehr

Allgemeines. TU Dresden, 24.05.2006 Einführung in HTML Folie 2

Allgemeines. TU Dresden, 24.05.2006 Einführung in HTML Folie 2 Fakultät Elektrotechnik und Informationstechnik Einführung in HTML Dresden, 24.05.2006 Allgemeines HTML = Hypertext Markup Language 1991 am CERN in Genf entwickelt ( Tim Berners-Lee ) Ziel: wissenschaftliche

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

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

Tutorium Learning by doing WS 2001/ 02 Technische Universität Berlin. Erstellen der Homepage incl. Verlinken in Word 2000

Tutorium Learning by doing WS 2001/ 02 Technische Universität Berlin. Erstellen der Homepage incl. Verlinken in Word 2000 Erstellen der Homepage incl. Verlinken in Word 2000 1. Ordner für die Homepagematerialien auf dem Desktop anlegen, in dem alle Bilder, Seiten, Materialien abgespeichert werden! Befehl: Desktop Rechte Maustaste

Mehr

Dreamweaver MX Arbeiten mit HTML-Vorlagen

Dreamweaver MX Arbeiten mit HTML-Vorlagen Publizieren auf dem NiBiS Kersten Feige Nicole Y. Männl 03.06.2003, 8.30-13.00 Uhr 18.06.2003, 8.30-13.00 Uhr Dreamweaver MX Arbeiten mit HTML-Vorlagen Voraussetzungen zum Arbeiten mit HTML-Vorlagen Starten

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

ECDL WebStarter Syllabus Version 1.5

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

Mehr

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

Webentwicklung mit Mozilla Composer I.

Webentwicklung mit Mozilla Composer I. Tutorium Webentwicklung mit Mozilla Composer I. Präsentation der Sitzung vom 12. Mai 2004 Martin Stricker martin.stricker@rz.hu-berlin.de Programm Erstellen und Bearbeiten von Webseiten mit dem HTML-Editor

Mehr

Kurze Bedienungsanleitung für den Kompozer

Kurze Bedienungsanleitung für den Kompozer Kurze Bedienungsanleitung für den Kompozer Dateioperationen Datei öffnen Datei > Öffnen oder S + o Datei speichern Datei > Speichern oder S + s Datei unter einem neuen Namen oder an einem anderen Ort speichern

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

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

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

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

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

Es gibt zahlreiche Web-Programmiersprachen: HTML, CSS, JavaScript, PHP, Perl, Python, HTTP, XML und viele weitere.

Es gibt zahlreiche Web-Programmiersprachen: HTML, CSS, JavaScript, PHP, Perl, Python, HTTP, XML und viele weitere. 1.0.0 Allgemeine Informationen Es gibt zahlreiche Web-Programmiersprachen: HTML, CSS, JavaScript, PHP, Perl, Python, HTTP, XML und viele weitere. Wir werden uns hauptsächlich mit HTML beschäftigen, weil

Mehr

RZ - HTML-Kurs. Inhalt 1. 2. 3. 4. 5. 6. Einführendes Struktur Links Graphik, Video, Audio Layout Weitere Informationen

RZ - HTML-Kurs. Inhalt 1. 2. 3. 4. 5. 6. Einführendes Struktur Links Graphik, Video, Audio Layout Weitere Informationen Inhalt 1. 2. 3. 4. 5. 6. Einführendes Struktur Links Graphik, Video, Audio Layout Weitere Informationen 1 Einführendes 1. 2. 3. 4. 5. Begriffe Methodisches Logische Struktur Reines HTML Struktur der HTML-Tags

Mehr

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

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

Mehr

HTML-Programmierung. 1. Aufbau einer Webseite. 2. Hintergrund für eine ganze Seite

HTML-Programmierung. 1. Aufbau einer Webseite. 2. Hintergrund für eine ganze Seite HTML-Programmierung Inhalt Seite 1. Aufbau einer Webseite 1 2. Hintergrund für eine ganze Seite 1 3. Kleine Farbtafel 2 4. Hexadezimalzahlen 2 5. Überschriften 3 6. Linien 3 7. Textformatierung 4 8. Sonderzeichen

Mehr

Bitte schenken Sie den unterstrichenen Passagen besondere Aufmerksamkeit, sie enthalten wichtige Hinweise.

Bitte schenken Sie den unterstrichenen Passagen besondere Aufmerksamkeit, sie enthalten wichtige Hinweise. Der Editor - ArkEditor unter Joomla 3.x Mit dem Editor können Sie die Inhalte Ihrer Website nach Ihren Vorstellungen gestalten. Wie Sie die Beiträge zur Bearbeitung öffnen, erfahren Sie in der Anleitung

Mehr

Kapitel 3 Frames Seite 1

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

Mehr

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

Slices und Rollover für die Startseite einer Bildergalerie

Slices und Rollover für die Startseite einer Bildergalerie Slices und Rollover für die Startseite einer Bildergalerie Die größte Frage bei einer Webseite ist es, auf ggf. viele Informationen von der relativ kleinen Fläche eines Bildschirmes zu verweisen. Dabei

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

Hyperlinks, Navigation, Pfade

Hyperlinks, Navigation, Pfade Tutorium Hyperlinks, Navigation, Pfade 30. Juni 2004 Martin Stricker martin.stricker@rz.hu-berlin.de Hyperlinks Hyperlinks sind Verknüpfungen zu Adressen (URL's) im Internet Links (Menüpunkte), mit denen

Mehr

Erstellen der Seminararbeit mit Word

Erstellen der Seminararbeit mit Word Erstellen der Seminararbeit mit Word Themen: 1 Allgemeines zum Layout der Seminararbeit...1 2 Formatvorlagen...1 3 Überschriften...3 4 Kopfzeilen...3 5 Seitenzahlen...4 6 Fußnoten...4 7 Unsichtbare Tabellen...5

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

Grundlagen der WWW-Nutzung und WWW-Programmierung. Alfred Wassermann

Grundlagen der WWW-Nutzung und WWW-Programmierung. Alfred Wassermann Grundlagen der WWW-Nutzung und WWW-Programmierung Alfred Wassermann Inhaltsverzeichnis 6 Vorlesung 2 6.1 Querverweise............................. 2 6.2 Verweis-sensitive Graphiken, Image Maps.............

Mehr

Textbearbeitung im CKEditor

Textbearbeitung im CKEditor CKEditor (HTML) Textbearbeitung im CKEditor Der CKEditor ist ein freier, webbasierter HTML-Editor, der in onoffice integriert ist und die Erstellung von HTML-formatierten emails (Websiteformat) ermöglicht.

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

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

Einbindung des Potenzialatlas Erneuerbare Energien in eigene Web-Angebote

Einbindung des Potenzialatlas Erneuerbare Energien in eigene Web-Angebote Einbindung des Potenzialatlas Erneuerbare Energien in eigene Web-Angebote Es besteht die Möglichkeit, den Potenzialatlas Erneuerbare Energien in andere Internetseiten einzubinden. So können Kommunen zum

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

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

Eine Einführung in HTML

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

Mehr

Kurzanleitung für das Editieren der FHE-Internetseiten mit der Software Cabaccos

Kurzanleitung für das Editieren der FHE-Internetseiten mit der Software Cabaccos 21.09.2006, F. Torkler, R. Schlepphorst 1 Kurzanleitung für das Editieren der FHE-Internetseiten mit der Software Cabaccos Einloggen zum Editieren Das neue CMS-System ermöglicht es, vom Arbeitsplatzrechner

Mehr

ECDL WebStarter Syllabus Version 1.0

ECDL WebStarter Syllabus Version 1.0 EUROPÄISCHER COMPUTER FÜHRERSCHEIN ECDL WebStarter Syllabus Version 1.0 Copyright 2004 Österreichische Computer Gesellschaft. Alle Rechte vorbehalten The European Computer Driving Licence Foundation Ltd.

Mehr

Napoleon.ch Administrations-Tool. Beschreibung Administrationsbereich / CMS für Ihre Website

Napoleon.ch Administrations-Tool. Beschreibung Administrationsbereich / CMS für Ihre Website Beschreibung Administrationsbereich / CMS für Ihre Website Seite:1/11 Inhaltsverzeichnis 1. Intro... 3 2. Allgemeine Erscheinung... 3 3. Benutzerverwaltung... 4 4. Bild- und DokuModul... 4 5. Website Modul...

Mehr

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

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

Mehr

Aufgabenbereich 3: Layoutgestaltung mit CSS

Aufgabenbereich 3: Layoutgestaltung mit CSS Aufgabenbereich 3: Layoutgestaltung mit CSS Wichtige Begriffe und Zusammenhänge: Website: Gesamtheit eines Internet-Auftrittes (alle Webseiten, die dazu gehören) Webseite: Eine einzelne Seite, ein HTML-Dokument

Mehr

GEONET Anleitung für Web-Autoren

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

Mehr

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

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

1 Frames und Tabellen... 3 2 E-Mail mit HTML... 9 3 E-Mail mit PHP...10 4 Cookies...15

1 Frames und Tabellen... 3 2 E-Mail mit HTML... 9 3 E-Mail mit PHP...10 4 Cookies...15 Inhalt Kapitel 6: Frames und Tabellen 1 Frames und Tabellen... 3 2... 9 3 E-Mail mit PHP...10 4 Cookies...15 Wiederholungsfragen zu... 8 Wiederholungsfragen zu 6.2-6.3...15 Wiederholungsfragen zu 6.4...16

Mehr

Inhalte mit DNN Modul HTML bearbeiten

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

Mehr

Das Grundgerüst für ein HTML-Dokument sieht so aus:

Das Grundgerüst für ein HTML-Dokument sieht so aus: Schuljahr 2013 2014 Projekt im Mathematisch-Naturwissenschaftlichen Profil Geschichte der Mathematik HTML - Internetpräsentation Klasse 8B M.Reuß Das Grundgerüst für ein HTML-Dokument sieht so aus:

Mehr

WEBSEITEN ENTWICKELN MIT ASP.NET

WEBSEITEN ENTWICKELN MIT ASP.NET jamal BAYDAOUI WEBSEITEN ENTWICKELN MIT ASP.NET EINE EINFÜHRUNG MIT UMFANGREICHEM BEISPIELPROJEKT ALLE CODES IN VISUAL BASIC UND C# 3.2 Installation 11 Bild 3.2 Der Webplattform-Installer Bild 3.3 IDE-Startbildschirm

Mehr

Diese Seite kann auch als pdf-file heruntergeladen werden.

Diese Seite kann auch als pdf-file heruntergeladen werden. Kleines Vademecum für cms 3.0 (artmedic) Trifles-Kleinigkeiten Diese Seite kann auch als pdf-file heruntergeladen werden. Bearbeitungsprogramm starten Browser starten In Browserfenster der Website.ch/cms_index.php

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

Webseite in XML Kurzeinführung

Webseite in XML Kurzeinführung Webseite in XML Kurzeinführung 1. Entwicklung... 1 2. Erste Webpage in XML... 2 2.1 Erstes Beispiel... 2 2.2 Tags definieren... 4 2.3 Kommentare in XML... 5 2.4 XML mittels CSS im Browser ansehen... 5

Mehr

Mini-Dokumentation zur Bearbeitung der Website massweiler.de

Mini-Dokumentation zur Bearbeitung der Website massweiler.de Mini-Dokumentation zur Bearbeitung der Website massweiler.de 10. März 2015 Die Website massweiler.de Die Website massweiler.de wird mit dem Content Management System (CMS) Joomla betrieben. Joomla ist

Mehr

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

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

Mehr

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

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

Mehr

Um ein Seiteninhaltselement zu editieren, d. h. neu einzufügen oder zu verändern werden mehrere Symbole verwendet:

Um ein Seiteninhaltselement zu editieren, d. h. neu einzufügen oder zu verändern werden mehrere Symbole verwendet: 4.5.7 Bilder- und Datei-Upload Alle Dateien (z.b. Bilder, PDF-Dateien, Flash-Animationen, etc.), die Sie auf Ihren Seiten einbinden möchten, laden Sie im Modulbereich Datei in den Modulen Dateiliste oder

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

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

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

Mehr

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

Manual, Version 4.2c: Publikation von Medienmitteilungen auf bs.ch. http://obtreecms98.bs.ch/medienmitteilungen/mmadmin

Manual, Version 4.2c: Publikation von Medienmitteilungen auf bs.ch. http://obtreecms98.bs.ch/medienmitteilungen/mmadmin Präsidialdepartement des Kantons Basel-Stadt Staatskanzlei Manual, Version 4.2c: Publikation von Medienmitteilungen auf bs.ch 1 Allgemeines...1 2 Formatierungen...3 3 Beilagen...6 4 Newsletter...7 1 Allgemeines

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

HTML Teil 2. So kann man HTML-Seiten mit

HTML Teil 2. So kann man HTML-Seiten mit <div> und CSS gestalten. So sehen einfache Formulare aus HTML Teil 2 So kann man HTML-Seiten mit und CSS gestalten So sehen einfache Formulare aus Wie könnte ein komplexer Internetauftritt aussehen? Trennung Inhaltsbereich und Navigationsbereich 2 Beispiel:

Mehr

Formatieren in Word 2007

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

Mehr

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

Glossar. KML TP2, Informationsdienste

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

Mehr

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

Grundelemente der Hypertext Markup Language (HTML)

Grundelemente der Hypertext Markup Language (HTML) Grundelemente der Hypertext Markup Language (HTML) Allgemeines: HTML steht für Hypertext Markup Language aktueller Standard ist HTML 4.1 (HTML 5) bzw. XHTML 1.0 (s.a. unter http://www.w3c.org) die Dokumente

Mehr

Falls Sie den Hintergrund der Website schon kennen, wählen Sie am einfachsten die gleiche Farbe in Photoshop für die Schaltfläche.

Falls Sie den Hintergrund der Website schon kennen, wählen Sie am einfachsten die gleiche Farbe in Photoshop für die Schaltfläche. 1. Schritt Schaltfläche vorbereiten In Photoshop eine neue Datei in Größe der Schaltfläche erstellen. Hier: Breite: 100 Pixel Höhe: 50 Pixel Auflösung 72 dpi Hintergrund: Weiß* Der weiße Hintergrund ist

Mehr

Grundaufbau eines HTML5-Dokumentes (Grautöne visualisieren die Zwiebelstruktur des Dokumentes)

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

Beuth Hochschule Die erweiterbare Markierungssprache XML WS10/11

Beuth Hochschule Die erweiterbare Markierungssprache XML WS10/11 Die erweiterbare Markierungssprache XML 1. Einleitung Eine Markierungssprache (markup language) dient dazu, Textdateien mit zusätzlichen Informationen anzureichern. Die verbreitete Markierungssprache HTML

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