A: Hypertext-Links (1) Inhalt. A: Hypertext-Links (3) A: Hypertext-Links (2)

Größe: px
Ab Seite anzeigen:

Download "A: Hypertext-Links (1) Inhalt. A: Hypertext-Links (3) A: Hypertext-Links (2)"

Transkript

1 8. HTML and XHTML Hypertext Markup Language, Part I 8-1 Inhalt 1. Einführung, HTML Rahmen, HTML Kopf 2. Text, Schriftarten (Inline-Elemente) 3. Textstruktur (Block-Elemente) 4. Hyperlinks, Bilder 5. Tabellen 6. Frames 8. HTML and XHTML Hypertext Markup Language, Part I 8-2 A: Hypertext-Links (1) Das WWW ist nicht eine Menge einzelner Dokumente, sondern ein gerichteter Graph mit Dokumenten als Knoten und Verweisen zwischen Dokumenten als Kanten. Ein Link hat zwei Enden, die Anker genannt werden (er zeigt vom source anchor zum destinati- on anchor ). Mit dem Element A und dem Attribut href kann man einen Quell-Anker (Verweis) in einen Text einfügen: Siehe auch <A href=" 8. HTML and XHTML Hypertext Markup Language, Part I 8-3 A: Hypertext-Links (2) Der Ziel-Anker kann ein beliebiges Dokument im WWW sein. Es muß nicht notwendigerweise im HTML- Format vorliegen (z.b. auch Bilder, Programme, PS/PDF-Dateien). Ist das Ziel des Verweises ein HTML-Dokument, so kann man nicht nur auf das Dokument als Ganzes verweisen, sondern auch auf einen Ziel-Anker im Inneren (siehe unten). 8. HTML and XHTML Hypertext Markup Language, Part I 8-4 A: Hypertext-Links (3) Hypertext-Links (Quell-Anker) werden vom Browser im Text normalerweise farbig und unterstrichen dargestellt. Bewegt der Benutzer den Mauszeiger auf einen solchen Link, zeigen Browser normalerweise die im href-attribut spezifizierte URL in der Fußzeile an. Außerdem ändert sich häufig die Form des Mauszeigers. Man kann mit dem Attribut title zusätzlich einen Text hinterlegen, der in einer Sprechblase angezeigt wird, wenn der Mauszeiger auf dem Link verweilt ( Tool-Tip ).

2 8. HTML and XHTML Hypertext Markup Language, Part I 8-5 A: Hypertext-Links (4) Was beim Anklicken ( Aktivieren ) des Links passiert, hängt von der URL, dem Medientyp des Ziel- dokumentes, und von der Konfiguration des Browsers ab: HTML-Dokumente, ASCII-Dateien, Bilder, etc. werden normalerweise in das gleiche Browser- Fenster geladen. Man kann den Browser so konfigurieren, daß er für bestimmte Medientypen Hilfsprogramme aufruft, die das Dokument anzeigen (z.b. Acrobat- Reader für.pdf). 8. HTML and XHTML Hypertext Markup Language, Part I 8-6 A: Hypertext-Links (5) Reaktionen auf Link-Aktivierung, Forts.: Bei URLs vom Typ mailto: wird ein Mail-Programm aufgerufen (besserer Stil: -Adresse als Link- Text): <A href="mailto:brass@acm.org">s. Brass</A> Wenn man target="_blank" angibt, wird das Dokument in einem neuen Fenster angezeigt (s.u.): <A href=" target="_blank" >World Wide Web Consortium</A> 8. HTML and XHTML Hypertext Markup Language, Part I 8-7 A: Hypertext-Links (6) Reaktionen auf Link-Aktivierung, Forts.: Kennt der Browser den Medientyp nicht, so bietet er an, die Daten als Datei abzuspeichern ( Download ). Ein Link kann auch unter einem Bild liegen (Image- Maps) Es kann auch ein telnet-fenster geöffnet werden (mit telnet: URLs), ein News-Reader (news:, nntp:), etc. 8. HTML and XHTML Hypertext Markup Language, Part I 8-8 A: Verweis-Ziele (1) Ein Ziel-Anker wird mit dem Element A und dem Attribut name markiert: <H1><A name="dns">2. Domain Name System</A><H1> Quell-Anker (Verweise) werden im Text des Browsers meist farbig und unterstrichen dargestellt, Ziel- Anker sind in der Ausgabe nicht sichtbar. Um auf die markierte Stelle zu verweisen, fügt man der Dokument-URL einen Fragment Identifier an (nach # ): Siehe <A href=" 2</A>. oder <A href="#dns">kapitel 2</A>

3 8. HTML and XHTML Hypertext Markup Language, Part I HTML and XHTML Hypertext Markup Language, Part I 8-10 A: Verweis-Ziele (2) Bei neueren Browsern braucht man nicht unbedingt ein A-Element, um eine Position im Text zu markieren. Man kann beliebigen Elementen das Attribut id hinzufügen: <H1 id="dns">2. Domain Name System<H1> A: Verweis-Ziele (3) Die Werte der Attribute name und id müssen im ganzen Dokument eindeutig sein. In XHTML wird nur noch id verwendet. Den Wert des Attributes id kann man genauso wie mit name vergebene Namen als Fragment Identifier benutzen. 8. HTML and XHTML Hypertext Markup Language, Part I 8-11 IMG: Bilder (1) Mit dem Element-Typ IMG ( image ) können Bilder in eine HTML-Seite eingebettet werden. Die Bilder sind nicht selbst in HTML spezifiziert, sondern in Formaten wie GIF, JPEG, PNG. Die Bilddaten stehen in eigenen Dateien (eine pro Bild). Die HTML-Datei enthält nur die URLs dieser Dateien. Der Browser lädt die in IMG-Elementen referenzierten Bild-Dateien automatisch. 8. HTML and XHTML Hypertext Markup Language, Part I 8-12 IMG: Bilder (2) IMG-Elemente sind leer und enthalten die URL der Bild-Datei in dem Attribut src. Das Attribut alt enthält einen kurzen Text, der angezeigt wird, falls das Bild selbst nicht angezeigt werden kann: Für blinde Personen / Sprachausgaben. Falls der Browser das Bildformat nicht versteht. Falls auf die Bild-Datei nicht zugegriffen werden kann. Falls der Browser-Benutzer das Anzeigen von Bildern abgeschaltet hat.

4 8. HTML and XHTML Hypertext Markup Language, Part I 8-13 IMG: Bilder (3) Beispiel: <IMG src="brass.jpg" alt="photo von Stefan Brass"> In HTML 3.2 war alt noch optional, in HTML 4 ist es vorgeschrieben. Für Bilder, die nur der Verschönerung dienen, wird in der HTML Spezifikation empfohlen, alt="" zu verwenden. Solche Bilder sollten möglichst gar nicht verwendet werden. In HTML 4 gibt es außerdem ein optionales Attribut longdesc, das die URL einer längeren Beschreibung des Bildes enthält, und bei Bedarf abgerufen werden kann. 8. HTML and XHTML Hypertext Markup Language, Part I 8-14 IMG: Bilder (4) Es wird empfohlen, auch die Breite und Höhe des Bildes in Pixeln anzugeben. Dadurch kann der Browser bereits wenn er den HTML Text anzeigt den nötigen Platz lassen. Die Bild-Datei enthält natürlich diese Information, aber der Browser bekommt sie erst nach der HTML-Datei, und je nach Geschwindigkeit des Internet-Zugriffs eventuell erst mit einer deutlichen Verzögerung. Er zeigt dann schon den HTML Text an. Kennt er die Größe des Bildes nicht, so muß der Text später neu formatiert werden. Beispiel: <IMG src="brass.jpg" alt="s. Brass" width="256" height="192"> 8. HTML and XHTML Hypertext Markup Language, Part I HTML and XHTML Hypertext Markup Language, Part I 8-16 IMG: Bilder (5) Die Attribute width und height können auch benutzt werden, um die Bildgröße zu verändern. Der Browser versucht es dann entsprechend zu skalieren. IMG ist ein Inline-Element, und kann insbesondere innerhalb eines A-Elementes stehen. Browser markieren anklickbare Bilder normalerweise durch einen farbigen Rand. Oft wird einer kleinen Version eines Bildes ein Verweis auf eine Version in höherer Auflösung hinterlegt: <A href="gross.jpg"><img src="klein.jpg"...></a> IMG: Bilder (6) Erscheint ein IMG-Element einfach im Text, so wird seine Unterkante auf die Basisline der Textzeile ausgerichtet: Text mit UnterlängenBildxyz Text In HTML 3.2/HTML 4 Transitional gibt es ein Attribut align, das die Ausrichtung festlegt. Der Default ist align=bottom (s.o.).

5 8. HTML and XHTML Hypertext Markup Language, Part I 8-17 OBJECT - Multimedia-Objekte Der Element-Typ OBJECT ist neu in HTML 4. Er ersetzt insbesondere APPLET (Ausschnitte im Browser- Fenster, in denen Java-Programme laufen). OBJECT kann aber ganz allgemein verwendet werden, um Multimedia-Objekte in HTML einzubetten. Z.B. OBJECT anstelle von IMG verwenden: <OBJECT data="brass.jpg" type="image/jpg"> Photo von <EM>Stefan Brass</EM>. </OBJECT> Der Inhalt des OBJECT-Elements wird nur angezeigt, wenn das eigentliche Objekt nicht angezeigt werden kann. 8. HTML and XHTML Hypertext Markup Language, Part I 8-18 Zusammenfassung zu Links Verweise auf andere Dokumente im WWW gibt es bei folgenden Elementen: A, AREA, LINK, BASE: href IMG: src, longdesc, (usemap) OBJECT: classid, codebase, data, archive, (usemap) Q, BLOCKQUOTE, INS, DEL: cite FORM: action INPUT: src, (usemap) HEAD: profile SCRIPT: src, (for) 8. HTML and XHTML Hypertext Markup Language, Part I 8-19 Inhalt 1. Einführung, HTML Rahmen, HTML Kopf 2. Text, Schriftarten (Inline-Elemente) 3. Textstruktur (Block-Elemente) 4. Hyperlinks, Bilder 5. Tabellen 6. Frames 8. HTML and XHTML Hypertext Markup Language, Part I 8-20 Allgemeines Tabellen dienen dazu, Daten in Form von Zeilen und Spalten zu präsentieren: Version Veröffentlicht am: HTML HTML HTML Ohne Tabellen wäre eine mehrspaltige Ausgabe nur mit einem Zeichensatz fester Breite (TT) zu realisieren. Typischerweise innerhalb des PRE-Elementes. Das Problem ist, auch die zweite und folgende Spalten jeweils an einer gemeinsamen Kante auszurichten.

6 8. HTML and XHTML Hypertext Markup Language, Part I HTML and XHTML Hypertext Markup Language, Part I 8-22 Einfache Tabellen (1) Tabellen werden in das Element TABLE eingeschlossen. Im einfachsten Fall ist der Inhalt von TABLE eine Folge von TR-Elementen ( table row ). Innerhalb jeder Tabellenzeile steht nun im einfachsten Fall eine Folge von TD-Elementen ( table data cell ). Einfache Tabellen (2) Anstelle von TD ist aber auch TH erlaubt ( table header cell ). TH wird normalerweise nur in der ersten Tabellenzeile oder der ersten Tabellenspalte verwendet, um Überschriften der Spalten/Zeilen anzugeben. Z.B. TH: fett und zentriert, TD: normale Schrift, linksbündig. Jedes TD-Element beschreibt einen Tabellen-Eintrag. 8. HTML and XHTML Hypertext Markup Language, Part I HTML and XHTML Hypertext Markup Language, Part I 8-24 Einfache Tabellen (3) Einfache Tabellen (4) Beispiel: <TABLE> <TR><TH>Vorlesung <TH>Dozent <TH>Zeit <TR><TD>DB-I <TD>Brass <TD>Di <TR><TD>ASQ <TD>Herrmann <TD>Mi </TABLE> Diese Tabelle wird folgendermaßen dargestellt: Vorlesung Dozent Zeit DBI Brass Di ASQ Herrmann Mi Ohne weitere Angaben wird kein Rand um die Tabelle und die Tabelleneinträge gedruckt. Man kann mit dem Attribut border einen Rand und Trennlinien verlangen und die Breite setzen: <TABLE border=3> Tatsächlich führt das nicht zu Trennlinien, sondern jedes Tabellen-Element wird in einen Kasten eingeschlossen.

7 8. HTML and XHTML Hypertext Markup Language, Part I 8-25 Einfache Tabellen (5) 8. HTML and XHTML Hypertext Markup Language, Part I 8-26 Einfache Tabellen (6) Ein Kasten erscheint nur für nicht-leere Tabellen- Einträge. Bei Bedarf verwende man den Eintrag. Mit dem Attribut cellspacing kann man den Leerplatz zwischen den Kästen setzen, mit dem Attribut cellpadding den Leerplatz innerhalb des Kästchens bis zu den Daten: <TABLE border=1 cellspacing=5 cellpadding=3> 5 3 DB-I 3 5 Die Ausrichtung der Daten in jedem Tabelleneintrag kann man mit folgenden Attributen wählen: align: Horizontale Ausrichtung (left, center, right) left center right valign: Vertikale Ausrichtung (top, middle, bottom) top middle bottom Diese Attribute können in den einzelnen Tabellen- Einträgen (TD, TH) festgelegt werden, oder auch in Tabellenzeilen (TR), dann gelten sie für alle Einträge in dieser Zeile. 8. HTML and XHTML Hypertext Markup Language, Part I 8-27 Einfache Tabellen (7) 8. HTML and XHTML Hypertext Markup Language, Part I 8-28 Einfache Tabellen (8) Der Browser berechnet die nötige Breite der Spalten automatisch. Im einfachsten Fall ist die Breite einer Spalte die maximale Breite ihrer Tabelleneinträge. Dozent Herrmann Brass Dieser einfachste Fall liegt vor, wenn die so errechneten Spaltenbreiten zusammen nicht breiter als das Browserfenster sind (also kein horizontaler Scrollbar nötig wird). Ansonsten führt der Browser auch Zeilenumbrüche in den Tabellen-Einträgen durch. Jede Spalte bekommt dann ihre minimale Breite zugewiesen, der danach noch verfügbare Platz wird proportional zu den Differenzen maximalen Breite < > minimale Breite verteilt. Dies ist nur ein Vorschlag im HTML 3.2 Standard. Man kann die Breite einer Tabelle mit dem Attribut width setzen: <TABLE width="70%" border=1>

8 8. HTML and XHTML Hypertext Markup Language, Part I HTML and XHTML Hypertext Markup Language, Part I 8-30 Einfache Tabellen (9) Einfache Tabellen (10) Im Innern eines Tabellen-Eintrags (TD, TH) sind Text, Inline-Elemente, und Block-Elemente möglich. Man kann also z.b. mit BR explizit einen Zeilenumbruch verlangen, oder mit P, UL, etc. strukturierten Text eingeben. Insbesondere ist es auch möglich, Tabellen zu schachteln. Ältere Browser sollen damit Schwierigkeiten haben. Auch Bilder sind innerhalb von Tabellen erlaubt. Dies wird z.b. verwendet, um Listen mit einer Graphik als Markierung ( Bullet ) anzuzeigen. In HTML 4.01 transitional haben TABLE, TR, TD, TH noch ein Attribut bgcolor zum Setzen der Hintergrundfarbe. Manchmal müssen sich einzelne Tabelleneinträge über mehr als eine Tabellenzeile/Tabellenspalte erstrecken. 8. HTML and XHTML Hypertext Markup Language, Part I 8-31 Einfache Tabellen (11) Dazu haben TD und TH die Attribute colspan und rowspan, mit denen man die Anzahl der überdeckten Spalten und Zeilen des Tabellengitters wählen kann. Spalte 1 Spalte 2 Spalte 3 Großer Eintrag: Eintrag (1,3) 2 Zeilen, 2 Spalten (rowspan=2, colspan=2) Eintrag (2,3) Eintrag (3,1) Eintrag (3,2) Eintrag (3,3) 8. HTML and XHTML Hypertext Markup Language, Part I 8-32 Einfache Tabellen (12) Überdeckte Tabellen-Einträge werden nicht extra angegeben. Die obige Tabelle hat folgende Struktur: <TABLE> <TR><TH>Spalte 1 <TH>Spalte 2 <TH>Spalte 3 <TR><TD rowspan=2 colspan=2>... <TD>(1,3) <TR><TD>(2,3) <TR><TD>(3,1) <TD>(3,2) <TD>(3,3) </TABLE> Zum Beispiel enthält das dritte TR-Element nur <TD>(2,3) weil die ersten beiden Spalten schon durch das vergrößerte Element der darüberliegenden Zeile abgedeckt sind.

9 8. HTML and XHTML Hypertext Markup Language, Part I 8-33 Einfache Tabellen (13) 8. HTML and XHTML Hypertext Markup Language, Part I 8-34 HTML 4 Tabellen (1) Schließlich kann man noch eine Tabellenüberschrift (Tabellenbezeichnung) mit dem Element CAPTION definieren. <TABLE> <CAPTION>Tabelle 3: Beispiel für colspan/rowspan</caption> <TR>... In CAPTION kann nur Text sein. Wenn es vorkommt, muß es das erste Element innerhalb von TABLE sein (vor den TR-Elementen). Der CAPTION-Text wird oberhalb der Tabelle angezeigt. In HTML 4 können Spalten vor den Tabellendaten deklariert werden. Vorteile sind: Für inkrementelles Anzeigen einer Tabelle (während der Server noch Daten sendet) muß der Browser wissen, wie viele Spalten es gibt und wie breit sie sein sollen. Man kann die Spalten (ähnlich wie die Zeilen) jetzt auch in Gruppen zusammenfassen. Und z.b. vertikale Trennlinien nur zwischen Gruppen drucken. Gruppierung auch für Stylesheets nützlich. 8. HTML and XHTML Hypertext Markup Language, Part I HTML and XHTML Hypertext Markup Language, Part I 8-36 HTML 4 Tabellen (2) Inhalt Beispiel zur Spaltenausrichtung: <TABLE> <COL align=left> <COL align=right> <COL align=right> <THEAD> <TR> <TH>Aufgabe <TH>Punkte <TH>Prozent <TBODY> <TR> <TD>1 <TD>10 <TD>83% <TR> <TD>2 <TD>9 <TD>75% </TABLE> 1. Einführung, HTML Rahmen, HTML Kopf 2. Text, Schriftarten (Inline-Elemente) 3. Textstruktur (Block-Elemente) 4. Hyperlinks, Bilder 5. Tabellen 6. Frames

10 8. HTML and XHTML Hypertext Markup Language, Part I HTML and XHTML Hypertext Markup Language, Part I 8-38 Allgemeines (1) Allgemeines (2) Frames dienen dazu, das Fenster des Browsers in mehrere Unterfenster aufzuteilen. In jedem dieser Unterfenster (Frames) kann man ein eigenes HTML-Dokument anzeigen. Typische Anwendung: Banner Inhalt Dokument Im Beispiel zeigt der Browser gleichzeitig vier Dateien an: die Hauptdatei, die die Aufteilung des Fensters bestimmt, und jeweils eine Datei für Banner, Inhalt, und Dokument. Die Dateien für die Frame-Inhalte sind normales HTML. Die Hauptdatei ist dagegen kein normales HTML: Sie enthält das Element FRAMESET anstelle von BODY. Entsprechend muß in der Document Type Declaration am Anfang auch die Frameset DTD referenziert werden. 8. HTML and XHTML Hypertext Markup Language, Part I 8-39 Allgemeines (3) Frames sind von Netscape erfunden worden und waren schon im Netscape Navigator 2.0 enthalten. Sie haben sich recht schnell verbreitet, wurden aber nicht in HTML 3.2 aufgenommen, sondern erst in HTML 4.0. Manche Benutzer mögen keine Frames: Das Banner ist häufig nicht besonders informativ, aber verschwendet kostbaren Bildschirm-Platz. Der Zustand von Frames kann sich ändern (andere Dokumente können in die Fenster geladen werden), aber es gibt nur eine URL. D.h. Bookmarks funktionieren nicht. Probleme beim Drucken. 8. HTML and XHTML Hypertext Markup Language, Part I 8-40 Frame Definition (1) FRAMESET bestimmt die Fenster-Aufteilung, FRAME den initialen Inhalt eines Frames. FRAMESET hat die Attribute cols und rows, mit denen man eine Aufteilung in Spalten oder Zeilen definieren kann. Die meisten FRAMESET-Elemente enthalten nur eines der beiden Attribute. Man kann aber auch beide verwenden, um eine Gitteraufteilung zu erzeugen. Alte Browser sollen damit aber Schwierigkeiten haben. Z.B. kann man mit rows="70,*" oben 70 Pixel des vertikalen Platzes für den Banner abteilen. Den unteren Teil könnte man dann mit cols="20%,80%" in einem geschachtelten FRAMESET-Element aufteilen.

11 8. HTML and XHTML Hypertext Markup Language, Part I 8-41 Frame Definition (2) 8. HTML and XHTML Hypertext Markup Language, Part I 8-42 Frame Definition (3) Der Inhalt von ROWS und COLS ist eine durch Kommata getrennte Liste von Längenangaben: Pixel, z.b. 70. Prozent des verfügbaren Platzes, z.b. 80%. Rest: *. Es ist möglich, * mehrfach zu verwenden, oder auch mit einem Faktor zu versehen, z.b. 2*. Der verfügbare Platz wird dann entsprechend aufgeteilt. Z.B. bekommen bei rows="100,20%,*,2*" und 500 Pixeln Gesamthöhe die ersten drei Frames je 100 Pixel, der letzte 200. Für jeden Frame ist ein FRAME-Element in dem entsprechenden FRAMESET-Element enthalten. Im Attribut src des FRAME-Element kann man die URL des Dokumentes angeben, das anfangs im Frame angezeigt wird. Der Inhalt eines Frames kann sich aber ändern. Z.B. werden durch Anklicken von Verweisen im Inhaltsverzeichnis neue Dokumente in den Hauptframe geladen, s.u. Die URL in src kann z.b. auch auf ein Bild verweisen. 8. HTML and XHTML Hypertext Markup Language, Part I HTML and XHTML Hypertext Markup Language, Part I 8-44 Frame Definition (4) Frame Definition (5) Der Frame-Inhalt darf niemals in der Hauptdatei stehen. Man sollte man mit NOFRAMES einen Text angeben, der in Browsern angezeigt wird, die keine Frames unterstützen. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" " <HTML> <HEAD><TITLE>Beispiel für Frames</TITLE></HEAD> <FRAMESET rows="70,*"> <FRAME src="f_banner.gif"> <FRAMESET cols="20%,80%"> <FRAME src="f_toc.html"> <FRAME src="f_doc1.html" name="doc"> </FRAMESET> <NOFRAMES><P>Ihr Browser versteht keine Frames.</NOFRAMES> </FRAMESET> </HTML>

12 8. HTML and XHTML Hypertext Markup Language, Part I HTML and XHTML Hypertext Markup Language, Part I 8-46 Frame Definition (6) Normalerweise kann der Benutzer die Framegrenzen verschieben, d.h. die Aufteilung des Browserfensters verändern. Man bewege den Mauszeiger auf die Trennline, drücke die line Maustaste, verschiebe den Zeiger, und lasse los. Ist das nicht erwünscht, kann im FRAME das boolesche Attribut noresize gesetzt werden. Frame Definition (7) Mit scrolling=no können Scrollbars ausgeschaltet werden, mit scrolling=yes können sie fest eingeschaltet werden. Der Default ist scrolling=auto. Scrollbars auszuschalten ist schlechter Stil. Wie soll der Benutzer den Rest sehen? Normalerweise verwendet der Browser automatisch Scrollbars, wenn der Inhalt nicht in den Frame paßt. 8. HTML and XHTML Hypertext Markup Language, Part I HTML and XHTML Hypertext Markup Language, Part I 8-48 Frame Definition (8) Normalerweise zeigt der Browser Trennlinien zwischen den Frames an. Dies kann mit frameborder=0 ausgeschaltet werden. frameborder hat nur die möglichen Werte 0 und 1. Man kann die Trennlinien nicht vergrößern. frameborder=0 muß in den beiden angrenzenden Frames gesetzt werden. Mit marginwidth und marginheight kann man horizontalen (links, rechts) bzw. vertikalen (oben, unten) Leerplatz zwischen den Framegrenzen und dem Inhalt verlangen. Frame Definition (9) title kann eine kurze Beschreibung des Frames enthalten, longdesc einen Verweis auf eine ausführliche Beschreibung. Besonders wichtig, wenn src direkt auf eine GIF-Datei zeigt.

13 8. HTML and XHTML Hypertext Markup Language, Part I 8-49 Veränderung von Frame-Inhalten (1) Man kann bei den Elementen A, BASE LINK, AREA, FORM angeben, in welchem Frame das referenzierte Dokument geöffnet wird, falls dieser Verweis aktiviert (angeklickt) wird. Dazu dient das Attribut target in diesen Elementen. Es enthält den Namen des Ziel-Frames. Der Name wird im FRAME-Element mit dem Attribute name definiert. Gibt es einen Frame dieses Namens, so wird das Dokument in diesem Frame geöffnet. Gibt es keinen solchen Frame, so wird ein neues Fenster geöffnet, und dem Fenster dieser Frame- Name zugewiesen. 8. HTML and XHTML Hypertext Markup Language, Part I 8-50 Veränderung von Frame-Inhalten (2) Frames betreffen also nicht nur Ausschnitte eines Fensters, sondern möglicherweise auch mehrere Fenster. Es gibt außerdem die speziellen Frame-Namen _blank: eröffnet immer ein neues Fenster, _self: dieser Frame, _parent: direkt übergeordnetes Frameset, löscht Frames. _top: Hauptfenster, löscht alle Frames. Das Attribut target ist nicht in der HTML 4.01 strict DTD enthalten. Der Grund dafür ist mir nicht klar. Es wird nicht als deprecated behandelt oder sonst erklärt. 8. HTML and XHTML Hypertext Markup Language, Part I 8-51 IFRAME Inline Frames Mit dem Element IFRAME kann man einen Frame wie ein Bild in eine Seite einfügen. Wie bei einem normalen Frame verweist man mit src auf den Inhalt. Es hat u.a. die Attribute longdesc, name, frameborder, marginwidth, marginheight, scrolling (siehe FRAME). Mit den Attributen width und height kann man die Größe des Frames festsetzen. IFRAME gehört zu den Inline-Elementen. Es ist nur in der HTML 4.01 Transitional DTD enthalten. Mit OBJECT kann man denselben Effekt erzielen.

Kapitel 16: HTML/XHTML I

Kapitel 16: HTML/XHTML I 16. HTML and XHTML Hypertext Markup Language, Part I 16-1 16. HTML and XHTML Hypertext Markup Language, Part I 16-2 Kapitel 16: HTML/XHTML I Literatur: http://www.selfhtml.org/ Erik Wilde: World Wide Web

Mehr

Was ist ein Frame? Frames teilen Browser-Fenster in rechteckige Bereiche. Mehrere Web-Seiten können. Web-Seite wird langsamer geladen

Was ist ein Frame? Frames teilen Browser-Fenster in rechteckige Bereiche. Mehrere Web-Seiten können. Web-Seite wird langsamer geladen Was ist ein Frame? Frames teilen Browser-Fenster in rechteckige Bereiche. Mehrere Web-Seiten können gleichzeitig angezeigt werden unabhängig voneinander gesteuert werden Web-Seite wird langsamer geladen

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

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

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

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

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

Aufbau einer Tabelle

Aufbau einer Tabelle Aufbau einer Tabelle : leitet Tabelle ein border="wert": legt Umrandung fest : beendet die Tabelle : definiert eine Zeile : definiert eine Zelle Beispiel: dies

Mehr

Inhalt HTML 2. Applets Frames Formulare CSS cascading style sheets. Lehrveranstaltung Internet in AT Dr.-Ing. A. Braune TECHNISCHE UNIVERSITÄT DRESDEN

Inhalt HTML 2. Applets Frames Formulare CSS cascading style sheets. Lehrveranstaltung Internet in AT Dr.-Ing. A. Braune TECHNISCHE UNIVERSITÄT DRESDEN Inhalt HTML 2 Applets Frames Formulare CSS cascading style sheets SS 06 1 Applets Das Applet Java Applets sind kleine Java-Programme mit deren Hilfe aktive Webseiten erstellt werden können. werden mit

Mehr

Kapitel 16: HTML/XHTML I

Kapitel 16: HTML/XHTML I 16. HTML and XHTML Hypertext Markup Language, Part I 16-1 Kapitel 16: HTML/XHTML I Literatur: http://www.selfhtml.org/ Erik Wilde: World Wide Web Technische Grundlagen. Springer, 1999, ISBN 3-540-64700-7,

Mehr

Vorbereitung Termin 4

Vorbereitung Termin 4 Vorbereitung Termin 4 Spezielle Links & Linkattribute 2 Ein Bild verlinken Das Ankerelement wird erst durch das Attribut href zum funktionierenden

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

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

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

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

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

Ü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

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

DML Befehl: UPDATE II

DML Befehl: UPDATE II HTML HTML-Datei HTML-Datei: Textdatei, die tags enthält Die Tags zeigen dem Webbrowser an, wie die Seite anzuzeigen ist Eine HTML Datei muss eine htm oder html Endung haben Eine HTML Datei kann man mit

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

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

HTML & CSS. GIMP > Bild > Bild skalieren Unter diesem Menüpunkt kannst du die Bildgröße verändern. Beachte die Bildproportionen

HTML & CSS. GIMP > Bild > Bild skalieren Unter diesem Menüpunkt kannst du die Bildgröße verändern. Beachte die Bildproportionen Übung 1 HTML & CSS Bildbearbeitung in Hinblick auf HTML. Dateinamen von Bildern: nur Kleinbuchstaben ohne Umlaute und Sonderzeichen BSP: auto.jpg fruehling.jpg bild_01.jpg Lehrziel: Bilder auf Ansichtsbasis

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

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

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

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

Einführung in HTML. Hui Dai

Einführung in HTML. Hui Dai Einführung in HTML Hui Dai Grundgerüst einer HTML-Datei HTML-Dateien bestehen aus Text. Der Inhalt von HTML-Dateien steht in HTML-Elementen. HTML-Elemente werden durch so genannte Tags markiert. Fast alle

Mehr

Web und Multimedia. HTML 4.x, Teil 2. Quelle: Hess HTML4

Web und Multimedia. HTML 4.x, Teil 2. Quelle: Hess HTML4 Web und Multimedia HTML 4.x, Teil 2 Quelle: Hess HTML4 1 Inhalte Einführung in HTML Textgestaltung - HTML - Cascading Style Sheets Screenlayout - HTML (Tabellen) - Frames - Cascading Style Sheets Hyperlinks

Mehr

Auf einer Seite werden maximal 10 Einträge angezeigt. Sind viele Einträge vorhanden, werden diese auf mehrere Seiten aufgeteilt.

Auf einer Seite werden maximal 10 Einträge angezeigt. Sind viele Einträge vorhanden, werden diese auf mehrere Seiten aufgeteilt. Die Seitenverwaltung Mit einem Klick auf den Link Seitenverwaltung in der Navigationsleiste auf der linken Seite gelangen Sie zur Übersicht der Einträge in der Seitenverwaltung. Übersicht Auf einer Seite

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

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

XHTML und CSS. Marco Skulschus Daniel Winter Alexander Muß

XHTML und CSS. Marco Skulschus Daniel Winter Alexander Muß XHTML und CSS Marco Skulschus Daniel Winter Alexander Muß 1 2 XHTML und CSS Marco Skulschus Daniel Winter Alexander Muß Webseite zum Buch: www.comelio-medien.com/dedi3_568.php 2008 Comelio Medien 3 Alle

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

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

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

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

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

Die Zeile, in das Foto angegeben wird, heißt dann z. B. <a href="grafik/fotos/foto1.jpg"><img src="grafik/fotos/foto1_kl.

Die Zeile, in das Foto angegeben wird, heißt dann z. B. <a href=grafik/fotos/foto1.jpg><img src=grafik/fotos/foto1_kl. 7.1 Vorschaugrafiken verwenden Der Aufbau einer Seite geht schneller vonstatten, wenn man zunächst kleinere Vorschaugrafiken verwendet, die erst bei Bedarf auf die richtige Größe gebracht werden. Der Befehl

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

Web-Programmierung (WPR)

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

Mehr

März Leitfaden zur Einbindung von Inhalten der Berufsberatung auf Schulwebseiten

März Leitfaden zur Einbindung von Inhalten der Berufsberatung auf Schulwebseiten März 2018 Leitfaden zur Einbindung von Inhalten der Berufsberatung auf Schulwebseiten Impressum Bundesagentur für Arbeit Zentrale Geschäftsbereich Arbeitsmarkt Produktentwicklung Berufsberatung Regensburger

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

Ü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

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

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

HyperTextMarkupLanguage

HyperTextMarkupLanguage HyperTextMarkupLanguage 1) Die eigene Web-Seite in 10 Minuten 1.1 Welche Programme braucht man? Editor (aus dem Menü Zubehör) 1.2 Erstellen eines Grundgerüstes: Steueranweisungen in HTML: sogen. Tag :

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

Inhalt. 1 Mit CSS beginnen 1. 2 Textauszeichnungen und andere Grundlagen 13

Inhalt. 1 Mit CSS beginnen 1. 2 Textauszeichnungen und andere Grundlagen 13 D3kjd3Di38lk323nnm xiii 1 Mit CSS beginnen 1 1.1 Formate definieren mit CSS......................... 1 1.1.1 lnline-formate............................. 3 1.1.2 Eingebettete Formate........................

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

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

XML light. XML bearbeiten. Jörn Clausen

XML light. XML bearbeiten. Jörn Clausen XML light XML bearbeiten Jörn Clausen joern@techfak.uni-bielefeld.de Übersicht Formen von XML Nutzen von Grammatiken XML-Mode des Emacs Beispiel-Sprache: XHTML XML light XML bearbeiten 2/25 Daten Daten?

Mehr

Dr. Thomas Meinike

Dr. Thomas Meinike Dr. Thomas Meinike thomas.meinike@et.fh-merseburg.de Fachhochschule Merseburg Fachbereich Elektrotechnik Studiengang Kommunikation und Technische Dokumentation Überblick Streifzug durch 10 Jahre Web Was

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

Projektseminar "Texttechnologische Informationsmodellierung"

Projektseminar Texttechnologische Informationsmodellierung Projektseminar "Texttechnologische Informationsmodellierung" Markup- und Metasprachen Ziel dieser Sitzung Nach dieser Sitzung sollten Sie: Mit dem Begriffen Markupsprachen bzw. Auszeichungssprachen und

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

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 8 Vorlesung 2 8.1 Frames................................. 2 8.2 Eingebettete Frames......................... 6 8.3

Mehr

Bedienfelder. Bedienfeld Einfügen

Bedienfelder. Bedienfeld Einfügen DER DREAMWEAVER BILDSCHIRM: Titelleiste Menüleiste Symbolleiste Bedienfelder Eigenschafteninspektor Statuszeile Bedienfeld Einfügen DAS DOKUMENTFENSTER: DER EIGENSCHAFTENINSPEKTOR: Der Eigenschafteninspektor

Mehr

Digitale Medien. Übung

Digitale Medien. Übung Digitale Medien Übung Pfadangaben Pfadangaben sind relevant für Bilder, Verweise, Medienobjekte per URL: Protokoll : / lokalernetzwerkname / Hostname : Port / Pfad http://www.mimuc.de/ http:/arbeitsgruppe/www.mimuc.de:8080

Mehr

Wie in Bootstrap üblich, bestimmen vorgegebene Klassen die Gestaltung.

Wie in Bootstrap üblich, bestimmen vorgegebene Klassen die Gestaltung. Bootstrap4 Layout Komponenten Teil 2 Inhalt: 1. Card 2. Accordion 1)cards In der Bootstrap Version 3 gab es die cards noch nicht. Dort wurden noch panels eingesetzt. In Bootstrap 4 wurde die Komponente

Mehr

ECDL Base kompakt. Ergänzungsmodul: Präsentation [mit Windows 7 und PowerPoint 2010], Syllabus 5. Thomas Alker. 1. Auflage, August 2014

ECDL Base kompakt. Ergänzungsmodul: Präsentation [mit Windows 7 und PowerPoint 2010], Syllabus 5. Thomas Alker. 1. Auflage, August 2014 ECDL Base kompakt Thomas Alker 1. Auflage, August 2014 ISBN 978-3-86249-347-0 Ergänzungsmodul: Präsentation [mit Windows 7 und PowerPoint 2010], Syllabus 5 K-ECDLB-W7POW2010-5 3 Text bearbeiten Übersicht

Mehr

Nachbau der Website 1.)Hintergrundbild einfügen eigene CSS-Datei

Nachbau der Website  1.)Hintergrundbild einfügen eigene CSS-Datei Nachbau der Website http://www.lake-festival.at/ Erstelle eine neue Bootstrapsite im Ordner lakefestival. Es soll alle Ordner bereits enthalten, back für diverse backgrounds, img mit vielen Bildern usw.

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

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

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

Workshop Mit Bildern und Links arbeiten. 3.1 Auf der CD-ROM... Das eigene Web mit HTML, CSS und JavaScript ISBN

Workshop Mit Bildern und Links arbeiten. 3.1 Auf der CD-ROM... Das eigene Web mit HTML, CSS und JavaScript ISBN Workshop 3 Das eigene Web mit HTML, CSS und JavaScript ISBN 3-8272-6306-9 3.0 Mit Bildern und Links arbeiten Wenn man danach fragt, was das World Wide Web ausmacht, erhält man viele verschiedene Antworten.

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

Inhalt: 1)Header-Widget, 2)Footer-Widget, 3)Buttons, 4)Übung: Wohnungskauf, 5)Controlgroups, 6)Listview, 7)Panel-Widget

Inhalt: 1)Header-Widget, 2)Footer-Widget, 3)Buttons, 4)Übung: Wohnungskauf, 5)Controlgroups, 6)Listview, 7)Panel-Widget jquery 3 Inhalt: 1)Header-Widget, 2)Footer-Widget, 3)Buttons, 4)Übung: Wohnungskauf, 5)Controlgroups, 6)Listview, 7)Panel-Widget Erstelle folgendes einfache Beispiel mit einem Header, einem Content und

Mehr

Allgemeine Technologien II Wintersemester 2010/ Oktober 2010 HTML II

Allgemeine Technologien II Wintersemester 2010/ Oktober 2010 HTML II Allgemeine Technologien II Wintersemester 2010/11 25. Oktober 2010 HTML II Hausaufgaben 18.10.2010 Hausaufgaben 18.10.2010 Hausaufgaben 18.10.2010 Aufgabe 2 HTML II Kursthemen HTML Hyperlinks href

Mehr

Der CSS-Problemlöser

Der CSS-Problemlöser Rachel Andrew Der CSS-Problemlöser Über 100 Lösungen für Cascading Stylesheets 2., überarbeitete und aktualisierte Auflage «j dpunkt.verlag Inhalt 1 Mit CSS beginnen 1 1.1 Formate definieren mit CSS 1

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

Manual Constructor Seite 1 von 27

Manual Constructor Seite 1 von 27 Inhaltsverzeichnis 1 Überblick...2 2 Start der Anwendung...3 3 Neues Editor Fenster öffnen...4 4 Neues Editor Fenster verwenden...5 1 Befehlsleiste Commands...6 2 Befehlsleiste Font Look...7 3 Textbearbeitung...8

Mehr

Allgemeine Technologien II Sommersemester Mai 2011 CSS

Allgemeine Technologien II Sommersemester Mai 2011 CSS Allgemeine Technologien II Sommersemester 2011 02. Mai 2011 CSS Kursthemen Designparadigmen Framesets Tabellenbasierte Layouts -basierte Layouts: CSS & Co. Cascading Style Sheets CSS CSS einbinden

Mehr

Umsetzen einer skalierbaren horizontalen Navigation:

Umsetzen einer skalierbaren horizontalen Navigation: Umsetzen einer skalierbaren horizontalen Navigation: Erstelle im Dreamweaver eine neue HTML - Datei (navigation.html) und eine CSS Datei (navigation.css). Die Struktur dieser Navigation soll auf einer

Mehr

V by WBR1/BFH-TI 2011 by MOU2/BFH-TI

V by WBR1/BFH-TI 2011 by MOU2/BFH-TI Java-Applets Unterlagen zum Modul OOP mit Java V 3.0 2007 by WBR1/BFH-TI 2011 by MOU2/BFH-TI Java-Applets V3.0 2011 by WBR1&MOU2/BFH- TI Lernziele Die Kursteilnehmer sind in der Lage: Möglichkeiten und

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

Rezepte in der Klammer-Strich-Methode schreiben

Rezepte in der Klammer-Strich-Methode schreiben Rezepte in der Klammer-Strich-Methode schreiben LibreOffice 4.0.4 In diesem Text wird Schritt für Schritt erklärt, wie ein Rezept in der Klammer-Strich-Methode mit dem Programm LibreOffice Version 4.0.4

Mehr

[Arbeiten mit dem Nvu Composer]

[Arbeiten mit dem Nvu Composer] Eine neue Seite erstellen Beim Start des Composers steht automatisch eine neue Composer-Seite zur Verfügung, die direkt verwendet werden kann. Über Datei > Neu > Composer-Seite kann jederzeit eine neue

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

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

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

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

Kennen, können, beherrschen lernen was gebraucht wird

Kennen, können, beherrschen lernen was gebraucht wird Inhaltsverzeichnis Inhaltsverzeichnis... 1 Einbinden von Grafiken... 2 Grafiken in den Text einbinden... 2 Grafikverweise... 2 Verweise auf Bilder in Unterverzeichnissen... 2 Verweise auf Bilder im darüber

Mehr

XHTML M. Gaiser

XHTML M. Gaiser XHTML M. Gaiser 2001-2003 Inhaltsverzeichnis Basiswissen Sprachelemente: Tags Grundgerüst Dokument-Kopf Dokument-Körper Absätze Verknüpfungen (Links) Schriftbild Überschriften Zeilenumbruch Horizontale

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

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

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

Text Formatierung in Excel

Text Formatierung in Excel Text Formatierung in Excel Das Aussehen des Textes einer oder mehrerer Zellen kann in Excel über verschiedene Knöpfe beeinflusst werden. Dazu zuerst die betroffenen Zelle(n) anwählen und danach den entsprechenden

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

Zur Nutzung von Sway benötigen Sie ein Microsoft-Konto. Sway wird im Browser genutzt. (keine Offlinenutzung!)

Zur Nutzung von Sway benötigen Sie ein Microsoft-Konto. Sway wird im Browser genutzt. (keine Offlinenutzung!) Arbeiten mit Sway Zur Nutzung von Sway benötigen Sie ein Microsoft-Konto. Sway wird im Browser genutzt. (keine Offlinenutzung!) Kann mit jedem Device angeschaut werden. Es passt sich dem Gerät an. Anwendungsmöglichkeiten

Mehr

HTML und CSS. Eine kurze Einführung

HTML und CSS. Eine kurze Einführung HTML und CSS Eine kurze Einführung Begriff Markup Begriff aus Druckindustrie: Layouter fügt Anmerkungen/Markierungen (Tags) hinzu Markup-Languge (ML) = Auszeichnungssprache Beispiele a) das Wort wird fett

Mehr

PPS-Veranstaltung. 1. Praxisveranstaltung

PPS-Veranstaltung. 1. Praxisveranstaltung PPS-Veranstaltung 1. Praxisveranstaltung Praxisstunden Ablauf Ziel: Besprechung von ausgewaehlten Themen Beantwortung von praktischen Fragen Praxisstunde jeweils Freitags 13.15 und zwar (SIEHE AUCH Webseite!)

Mehr

Übung zur Vorlesung. Digitale Medien. Vorlesung: Heinrich Hußmann Übung: Renate Häuslschmid, Hanna Schneider

Übung zur Vorlesung. Digitale Medien. Vorlesung: Heinrich Hußmann Übung: Renate Häuslschmid, Hanna Schneider Übung zur Vorlesung Digitale Medien Vorlesung: Heinrich Hußmann Übung: Renate Häuslschmid, Hanna Schneider Wintersemester 2015/16 Hyper Text Markup Language Beschreibungssprache von WWW-Seiten: Enthält

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

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

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

Digitale Medien. Übung zur Vorlesung. Vorlesung: Heinrich Hußmann Übung: Renate Häuslschmid

Digitale Medien. Übung zur Vorlesung. Vorlesung: Heinrich Hußmann Übung: Renate Häuslschmid Übung zur Vorlesung Digitale Medien Vorlesung: Heinrich Hußmann Übung: Renate Häuslschmid Wintersemester 2016/17 Hyper Text Markup Language Beschreibungssprache von WWW-Seiten: Enthält die Struktur eines

Mehr

Web-basierte Anwendungssysteme XHTML-Tabellen und Bilder

Web-basierte Anwendungssysteme XHTML-Tabellen und Bilder Web-basierte Anwendungssysteme XHTML-Tabellen und Bilder Prof. Dr. Sergej Alekseev (alekseev@fb2.fra-uas.de) Prof. Dr. Armin Lehmann (lehmann@e-technik.org) Fachbereich 2 Informatik und Ingenieurwissenschaften

Mehr

HTML Spielend gelingt die Website

HTML Spielend gelingt die Website HTML Spielend gelingt die Website TOBIAS HAUSER CHRISTIAN WENZ HTML - PDF HTML - Spielend gelingt die Website Impressum Liebe Leserin, lieber Leser! 9 Wir legen los 11 Was ist HTML? 12 Browser 14 Editoren

Mehr