HTML- und CSS-Einführung Rusalka Offer Isabella Nagy

Größe: px
Ab Seite anzeigen:

Download "HTML- und CSS-Einführung Rusalka Offer Isabella Nagy"

Transkript

1 Grundelemente der Hypertext Markup Language (HTML) und Cascading StyleSheets (CSS) Allgemeines: HTML steht für Hypertext Markup Language aktueller Standard ist HTML 4.1 bzw. XHTML 1.0 (s.a. unter die Dokumente des WWW sind in HTML / XHTML geschrieben HTML-Dateien bestehen aus ASCII-Text und können mit jedem Texteditor erstellt werden, alternativ mit einem HTML-Editor, die Endung ist immer.htm ( Windows) oder.html (Unix) HTML-Befehle stehen immer in spitzen Klammern und werden auch Tags genannt. Alle Befehle bestehen grundsätzlich aus einem einleitenden und einem abschließenden Tag (XHTML). Ein abschließendes Tag enthält zusätzlich noch einen Slash (/). Beispiel: <h1>hallo Welt</h1> Standalone-Tags werden intern abgeschlossen, z.b. <br /> (XHTML) Alle HTML-Elemente werden klein geschrieben (XHTML) Verschachtelung von Tags ist möglich, allerdings müssen die Tags korrekt verschachtelt werden (XHTML) Einige Tags können Attribute besitzen, die Werte der Attribute stehen immer in Anführungszeichen und werden auch klein geschrieben (XHTML) Beispiel <h1 align=''center''>hallo Welt</h1> Grundgerüst einer HTML-Datei: Zuerst wird eine Definiton des Dokumentyps vorgenommen: (hier Beispiel XHMTL) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd"> danach folgt die eingentliche Grundstruktur des HTML-Dokumentes <html> <head> <title>titels</title> </head> <body> Text, Grafiken, etc. <!- -Kommentare- -> </body> </html> ->informiert den Browser, dass ein HTML-Dokument kommt ->Beginn des Dokumentkopfes ->Dokumenttitel (steht im oberen Fensterrahmen d. Browsers) ->Metatags, Style Sheet etc. ->Ende des Dokumentkopfes ->Beginn des Dokumentkörpers ->Inhalt des Dokumentes ->Kommentare (werden nicht angezeigt) ->Ende des Dokumentkörpers ->Ende des HTML-Dokumentes Eine HTML-Datei besteht immer aus einem Kopf (auch Header genannt) und dem Körper (Body). Stylesheet-Formatdefinitionen im Kopfbereich <head> <title>titel der Datei</title> <style type="text/css"> /*... Hier werden die Formate definiert... */ </style> </head> 1

2 in einer externen Datei (z.b. formate.css) <head> <title>titel der Datei</title> <link href="formate.css" rel="stylesheet" type="text/css"> </head> Aufbau der Definition: selektor.klasse { css-eigenschaft:wert; } z. B. p.fett {font-weight:bold;} gebunden an einen Selektor.weiss {color:white;} ungebunden Verwendung der Definitionen: <p class= fett >Absatz fett formatiert</p> <beliebiger-selektor class= weiss >Weißer Text</Selektor> Bemerkung: Den Namen einer Klasse hinter dem Punkt können Sie frei vergeben, sie dürfen jedoch keine Leerzeichen und Umlaute enthalten, nicht mit einer Ziffer oder einem Bindestrich beginnen, sollten keinen Unterstrich enthalten und nicht zu lang sein. Besonderheiten: Umlaute Umlaute und HTML- eigene Zeichen (Entities) müssen in HTML kodiert eingegeben werden: ä ä Ä Ä ö ö Ö Ö ü ü Ü Ü ß ß < < > > & & " " Leerzeichen (non breaking space) Beispiel: Es grünt so grün, wenn Spaniens Blüten blühen Hinweise für die Arbeit: - Benötigte Programme: Editor, Browser, Selfhtml ( - Editor starten (Start Alle Programme Phase 5 HTMLEdit - Editor) (Freeware HTML-Editor von Ulli Meybohm, - Seite schreiben (Datei Neues HTML-Dokument Leeres Dokument erstellen, zuerst das Grundgerüst schreiben, danach den Text in body eingeben) - Datei speichern (mit Endung htm) - Seite anzeigen lassen (im Vorschaufenster des Editors mit F9 oder Klick auf das Browser-Symbol, oder aber die Datei in einem Browser öffnen) - Arbeiten Sie mit zwei Dateien: eine nur HTML, eine HTML mit CSS. Lösen Sie die Aufgaben einmal ohne und einmal mit CSS. HTML-Elemente Überschriften: Text kann in HTML einfach im body-bereich eingegeben werden, soll er aber eine bestimmte Formatierung erhalten, so müssen HTML-Befehle verwendet werden. Zur Gestaltung von Überschriften gibt es die Tags <h1><h2><h3><h4><h5><h6>, die in der Ausgabe im Browser alle eine verschiedene Größe bewirken. Aufgabe: Erstellen Sie ein neues leeres HTML-Dokument. Tippen Sie das Grundgerüst ein. Der Text ''Homepage für Joachim Ringelnatz'' soll im Rahmen des Browsers ausgegeben werden und auch als Überschrift auf der Seite erscheinen. 2

3 Absatz und Zeilenumbruch: Innerhalb eines Textes kann man mit dem Tag <br /> einen Zeilenumbruch erwirken, das Tag <p> hingegen erstellt einen neuen Absatz. Mehrere <p></p> - Tags hintereinander werden vom Browser aber ignoriert. Eine mögliche Lösung hierfür ist zwischen die <p>-tags ein Leerzeichen ( ) einzubauen. z.b. <p> </p><p>... Beispiel: Viele Grüße vom<br />Weihnachtsmann ergibt: Viele Grüße vom Weihnachtsmann Viele Grüße vom<p>weihnachtsmann</p> ergibt: Viele Grüße vom Weihnachtsmann Formatierungen: Text kann fett, kursiv, unterstrichen usw. formatiert werden, dabei hat man mehrere Möglichkeiten: Fett (bold): HTML: <b>hier steht ein fetter Text</b> CSS:.fett {font-weight:bold;} <p class= fett >Hier steht ein fetter Text</p> kursiv (italic): HTML: <i>hier steht jetzt ein kursiver Text</i> CSS:.kursiv { font-style:italic; } <p class= kursiv >Hier steht ein kursiver Text</p> unterstrichen: HTML: <u>alles was hier steht, ist unterstrichen</u> CSS:.unterstrichen { text-decoration:underline; } <p class= unterstrichen >Alles was hier steht, ist unterstrichen</p> Einrückungen: Das Tag <blockquote> wurde eigentlich für längere Zitate vorgesehen. Der Text erscheint eingerückt, bzw. ein Stück nach rechts verschoben. Diesen Nebeneffekt kann man für Einrückungen benutzen. Beispiel: <blockquote>eingerückter Text</blockquote> ergibt: eingerückter Text Mehrere <blockquote>-tags hintereinander bewirken eine immer weitere Einrückung. CSS:.linkrand100 {margin-left:100px;} <p class= linkrand100 >eingerückter Text</p> Ausrichtung: Textabsätze können linksbündig, rechtsbündig oder zentriert ausgerichtet werden. Dazu kann man dem Tag <p> Attribute hinzufügen: <p align= left > oder <p align= right > oder <p align= center > oder <p align= justify >. Um Text zu zentrieren ist auch das <center>-tag erlaubt: <center>zentrierter Text</center> 3

4 CSS:.zentriert {text-align: center;} <p class= zentriert >Zentrierter Text</p> Aufgabe: Formatieren Sie dieses Gedicht entsprechend! Der Briefmark Ein männlicher Briefmark erlebte Was Schönes, bevor er klebte. Er war von einer Prinzessin beleckt. Da war die Liebe in ihm erweckt. Er wollte sie wiederküssen, Da hat er verreisen müssen. So liebte er sie vergebens. Das ist die Tragik des Lebens Joachim Ringelnatz Schriften: Typ: Standardschrift bei den WWW-Browsern ist Times-New-Roman 12. Will man eine Schrift für die Ausgabe, so gibt man entsprechend einen anderen Schrifttyp an. Wichtig ist, dass man sich dabei an die gängigen Schrifttypen hält, die auf einer Vielzahl von Rechnern installiert sind, z.b. Arial oder Courier. Ist auf einem Rechner nämlich nicht der angegebene Schrifttyp installiert, wird der Text in Times New Roman dargestellt. Das entsprechende Tag lautet: <font face=''schrifttyp''>. Beispiel: <font face=''arial''>hier steht der Text in Arial</font>, <font face= lucida console >Dieser Text ist in Lucida Console</font> ergibt: Hier steht der Text in Arial, Dieser Text ist in Lucida Console CSS:.verdana {font-family: verdana;}.lc {font-family: lucida console ;} <span class= verdana >Hier steht der Text in Verdana</span> und <span class= lc >dieser Text ist in Lucida Console</span> Größe: Standardgröße der Schrift ist 12 Punkte. Um diese Vorgabe zu ändern, wird das Tag <font size=''größe''> verwendet. Die Größe kann absolut oder relativ angegeben werden. Bei einer absoluten Größenangabe (möglich ist 1-7) entspricht <font size=''3''> einer 12-Punkte-Schrift. Relativen Größenangaben wird ein + oder - vorangestellt. Z.B. <font size=''+1''>.hierbei wird die Standard-Schriftgröße um ''eins'' erhöht. HTML: <font size= 5 >größere Schrift</font> CSS:.gross {font-size: 20px;} <p class= gross >größere Schrift</p> Farbe: Die Farbe einer Schrift wird mit dem Tag <font color=''farbe''>zugewiesen. So kann man mit der Zuweisung <p>schwarzer Text <font color=''red''>roter Text</font> schwarzer Text</p> einen schwarzer Text roter Text schwarzer Text ausgeben. CSS:.rot{color:red;} 4

5 <p>schwarzer Text <span class= rot >rote Schrift</span> schwarzer Text</p> Attribute gesammelt zuweisen: Die zu einem Tag gehörigen Attribute können auch gesammelt zugewiesen werden: HTML: <b><center><font face= arial color= blue size= 4 >Die Reihenfolge der Attribute im font-tag ist egal</font></center></b> CSS:.ue1{font-family:arial; color: blue; font-size: 14pt; text-align: center; font-weight:bold;} <p class= ue1 >Eine elegante Lösung mit CSS</p> Achtung! Mit dem abschließenden font-tag in HTML werden alle Attributwerte auf einmal beendet! CSS:.wichtig {font: italic 1cm Helvetica;} Bei dieser Schreibweise in CSS ist folgende Reihenfolge einzuhalten: font-style font-variant font-weight font-size line-height font-family Hinweis: In HTML 4.0 sollte das <font>-tag durch den Einsatz von Cascading Style Sheets überflüssig werden. Farben: Farben können in HTML für verschiedene Anwendungszwecke definiert werden: Hintergrundfarbe einer Seite: Die Hintergrundfarbe einer Seite wird als Attribut im <body>-tag angegeben. Möchte man einen schwarzen Hintergrund, so definiert man: HTML: <body bgcolor=''black''> CSS: body {background-color: black;} Farbe für Text: Neben der Einzelauszeichnung von Texten mit bestimmten Farben durch <font color=.. >, können auch Grundvereinbarungen für Text im <body> -Tag angegeben werden. Beispiel: HTML: <body bgcolor=''gray'' text=''black''> CSS: body {background-color: gray; color: black;} Welche Farben gibt's? Farben können durch die Angabe eines Farbnamens definiert werden oder durch die Angabe einer hexadezimalen Zahl. Farbnamen: Die 16 Grundfarben haben folgende Namen: Black, maroon, green, olive, navy, purple, teal, gray, silver, red, lime, yellow, blue, fuchsia, aqua, white Es gibt auch noch eine Liste mit spezielleren Farbnamen. Hexadezimalangaben: Farben können auch im Hexadezimalmodus definiert werden, dafür sind Anteile der drei Grundfarben rot, grün, blau anzugeben. Jede hexadezimale Definition ist sechsstellig und sieht ungefähr so aus: # (Zuerst wird ein Doppelkreuz geschrieben und dann die Farbdefinition.) Die ersten beiden Ziffern geben den Rot-Anteil an, die nächsten beiden den Grün-Anteil und die letzen beiden den Blau-Anteil. Eine hexadezimale Ziffer kann 16 Zustände haben (0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F), somit kann eine Farbe 256 (=16x16) Werte / Zustände haben. Die Farben können unter sowie eingesehen werden. Beispiel: HTML: <body bgcolor= #00DD99 text= #00FF00 > CSS: body { background-color:#663333; color:#ffcc99; } Bem.: in HTML können nur Tabellen oder ganze Seiten eine Hintergrundfarbe haben, in CSS alle Elemente. 5

6 Aufgabe: Formatieren Sie das Gedicht von vorhin um: Die Hintergrundfarbe soll dunkelblau sein, der Text soll in der Farbe weiß ausgegeben werden, nur die Überschrift und die Autorenangabe sollen in rot sein. Verwenden Sie die Schriftart Arial und erhöhen Sie die Schriftgröße! Listen: In HTML kann man drei Arten von Listen erstellen: Unnummerierte Listen, nummerierte Listen, definierte Listen Eine unnummerierte Liste sieht so aus: <ul> <li>element 1</li> <li>element 2</li> <li>element 3</li> </ul> Tag für die unnummerierte Liste erstes Listenelement zweites Listenelement drittes Listenelement Ende der Liste Unnummerierte Listen sind typischerweise Bulletlisten (Bullet=Aufzählungszeichen). Man kann zwischen drei verschiedenen Aufzählungszeichen wählen (disc, circle, square). Möchte man kleine Quadrate als Aufzählungszeichen, sähe die Definition so aus: <ul type=''square''> <li>element 1</li> </ul> Eine nummerierte Liste sieht so aus: <ol> <li>element 1</li> <li>element 2</li> <li>element 3</li> </ol> Tag für die numerierte Liste erstes Listenelement (mit einer '1' vorangestellt) zweites Listenelement (mit einer '2' vorangestellt) drittes Listenelement (mit einer '3' vorangestellt) Ende der Liste Man ist allerdings nicht gezwungen, die Nummerierung bei 1,2,3... zu belassen. Indem man dem <ol> -Tag noch ein Attribut zuweist, können auch alphabetische oder 'römisch' nummerierte Listen erzeugt werden. Beispiel <ol type=a> oder <ol type=a> oder <ol type=i> oder <ol type=i>. Je nach 'type' werden dann entweder A;B,C oder a,b,c oder I,II,III oder i,ii,iii vorangestellt. Weitere Formatierungen Horizontale Linien / Trennlinien Manchmal ist es übersichtlicher, bestimmte Abschnitte einer Seite mit Trennlinien zu versehen. Solche horizontalen Linien erzeugt man mit dem Tag <hr /> (=horizontal rule). Länge und Breite dieser Linie werden mit den Attributen width und size angeben also: <hr width=''90%'' size=5 />. Die Ausrichtung der Linie kann mit den align-attributen bestimmt werden. Außerdem gibt es noch das Attribut noshade, das eine ''räumliche Darstellung der Trennlinie verhindert (<hr noshad= noshade />). Allgemeines Block-Element Mit <div> leiten Sie ein allgemeines Block-Element ein, in das Sie mehrere andere Elemente (Text, Grafiken, Tabellen usw.) einschließen können (div = division = Bereich). Alles, was zwischen diesem Tag und dem abschließenden </div> steht, wird als Teil des Bereichs interpretiert. Allgemeines Inline-Element <span> leitet einen allgemeinen Inline-Bereich ein. </span> beendet diesen Bereich. Analog zum div- Element, das andere Block-Elemente enthalten kann, gibt es dieses Element, das Text und andere Inline- Elemente enthalten kann, selbst aber keinerlei Eigenschaften hat und nichts bewirkt. Bilder / Graphiken Graphiken lassen sich in HTML einbinden, indem man auf das zugehörige Bild verweist (Pfad, URL). Die gebräuchlichsten Graphikformate im WWW sind.jpg oder.gif. Um also eine Graphik einzubinden, benötigt man den Standort der Datei. Liegt die Datei in demselben Verzeichnis wie die.htm-datei, so braucht man nur den Dateinamen in Anführungszeichen anzugeben. 6

7 Beispiel: <img src=''ringeln.gif'' /> (img src steht für image source) Liegt die Datei in einem anderen Verzeichnis, muss der Pfad angegeben werden: <img src=''../../bilder/ringeln.gif'' /> Liegt die Datei auf einem anderen Web-Server, kann auch die URL angegeben werden: <img src= /> Alternativer Text bei Graphiken: Manchmal kann ein Bild vom Browser nicht geladen werden, dann ist es ganz nützlich wenn das Bild einen Alternativtext hat, der statt des Bildes angezeigt wird. Einen Alternativtext spezifiziert man mit dem Attribut alt. Beispiel <img src=''ringeln.gif'' alt=''bild von Joachim Ringelnatz'' /> Höhe und Breite von Graphiken: Mit den Angaben width und height kann die Höhe und Breite einer Graphik in Pixel angegeben werden. Beispiel <img src=''ringeln.gif'' width= 100 height= 2100 /> Abstand zwischen Graphik und Text: Der linke und rechte Abstand einer Graphik zum Text lässt sich mit hspace ausdrücken, der obere und untere Abstand zum Text mit vspace. Beispiel HTML: <img src= ringeln.gif" hspace="10" vspace="10" width= 100 height= 2100 />. CSS:.ringelnatz {margin: 3cm 2cm; width:160; height:192;} <img class= ringelnatz src= ringeln.gif /> Links Links (Hyperlinks) bzw. Verweise sind ein elementarer Bestandteil von HTML. Man kann auf Ziele innerhalb einer Datei verweisen oder auf Ziele außerhalb einer Datei. Verweist man auf Ziele ''außerhalb, so muss man den Pfad oder die URL des Ziels kennen, um darauf verlinken zu können. En Link besteht aus dem Tag <a href=''...''>beschreibung des Zieles</a>. Das Ziel steht immer in Anführungszeichen. Ein Verweis auf die Homepage des Fachbereiches sieht so aus: <a href='' des Fachbereiches</a>. Einen Verweis auf eine Datei auf dem eigenen Rechner im selben Verzeichnis gibt man so an <a href=''datei.htm''>meine-datei</a>. Hier könnte auch ein Bild stehen: <a href= Datei.htm ><img src= button.gif border= 0 /></a> Absolute Links und relative Links: Besitzt man auf seinem WWW-Server einen festen Verzeichnisbaum, der sich nicht ändert, kann man sich relativer Links bedienen. Angenommen man hat auf dem Server ein Verzeichnis htdocs, welches für HTML- Dokumente vorgesehen ist. In diesem Verzeichnis gibt es dann beispielsweise die Unterverzeichnisse Bilder und Abteilungen. Im Verzeichnis Abteilungen gibt es dann noch die Ordner Referat1 und Referat2, so dass sich folgende Struktur ergibt: bilder htdocs / \ referat1 abteilungen / \ referat2 Falls man jetzt von einem Dokument im Ordner Referat2 auf eine Dokument im Ordner Bilder verweisen möchte, könnte man den Pfad mit Hilfe einem bestimmten Syntax angeben. Dabei gilt:.. wechselt eine Verzeichnisebene höher Verzeichnisname wechselt in das untergeordnete Verzeichnis. 7

8 Bsp.: Man befindet sich im Ordner Referat2 und verweist auf eine Datei im Ordner Bilder: <a href=''../../bilder/bild1.htm'' >Bild1</a> Befindet man sich im Ordner Abteilungen und referenziert eine Datei im Ordner Referat1 so gilt: <a href=''referat1/datei.htm >Datei</a> Vom Ordner Bilder in den Ordner Referat2: <a href=''../abteilungen/referat1/datei.htm''>datei</a> Absolute Links: Absolute Links sind z.b. die Angabe einer URL: <a href='' >Google></a> Verweisungen innerhalb eines Dokumentes: Sinnvollerweise kann man auch innerhalb eines Dokumentes Links anbringen, z.b. Verweise von einer Gliederung auf den Inhalt. Dafür muss man eine Absprungmarke definieren: und ein Verweisziel Aufgabe: <a href= #Ziel''>Hier geht's zum Ziel in der gleichen Datei</a> bzw. <a href= datei.htm#ziel''>hier geht's zum Ziel in einer anderen Datei</a> <a id=''ziel''>hier steht das Ziel</a> Ergänzen Sie Ihre Seite, indem sie ein Bild von Joachim Ringelnatz einfügen und eine unnummerierte Liste mit Links erstellen: Kopieren Sie den Lebenslauf und fügen Sie ihn unter Ihrer Liste ein. Erstellen Sie in der Nähe der Überschrift einen Link, der direkt zu Ihrer Liste springt. 8

9 Tabellen: Tabellen spielen in HTML eine wichtige Rolle, da sie nicht nur zur Anzeige von tabellarischen Daten benutzt werden, sondern auch um Elemente zu plazieren. Tabellen werden mit dem Tag <table> Hier steht die Tabelle </table> definiert. Man kann Tabellen mit Gitternetzlinien oder ohne erstellen, für den ersten Fall ergänzt man das Tag: <table border= 1 >...</table> Die Struktur einer kompletten Tabelle sieht dann so aus: <table border= 1 > <th>kopfzelle: 1. Zeile, 1. Spalte</th> <th>kopfzelle: 1. Zeile, 2. Spalte</th> <th>kopfzelle: 1. Zeile, 3. Spalte</th> <td>datenzelle: 2. Zeile, 1. Spalte</td> <td>datenzelle: 2. Zeile, 2. Spalte</td> <td>datenzelle: 2. Zeile, 3. Spalte</td> <td>datenzelle: 3. Zeile, 1. Spalte</td> <td>datenzelle: 3. Zeile, 2. Spalte</td> <td>datenzelle: 3. Zeile, 3. Spalte</td> </table> Dabei steht <th> für table header (Tabellenüberschrift), für table row (Tabellenreihe), <td> für table data (Tabellenzelle). Die Anzahl der Tabellenzellen in einer Reihe sollte immer gleich sein, damit gleich viele Spalten entstehen. Die Anzahl der Spalten wird in der ersten Reihe durch die Anzahl der Zellen festgelegt. Die Länge einer Tabelle ist beliebig ergänzbar, ebenso können auch mittendrin Reihen eingefügt werden. Um eine Tabellenzelle leer zu lassen kann man einfach <td></td> eingeben oder je nach Browser <td> </td> Die Breite und Höhe einer Tabelle (ganzer Bildschirm oder Teil vom Bildschirm) lässt sich mit dem Attribut width bzw. height bestimmen: <table width=''80%''>...</table> Rahmen, Gitterlinien, Abstände: Die Breite des Rahmens um eine Tabelle wird mit dem Attribut border definiert: <table border=''5''> Damit wird festgelegt, dass der Außenrahmen eine Dicke von 5 Pixel hat. (border= 0 keine Linien werden angezeigt) Auch für die Gitterlinien kann man solche Angaben machen: <table border= 3 cellspacing= 5 > Um einen gewissen Abstand des Zelleninhalts zum Zellenrand zu bestimmen gibt es das Attribut 9

10 cellpadding: <table border= 3 cellpadding= 5 > Höhe und Breite einer Tabelle / einer Tabellenzelle: Den Umfang einer Tabelle, also Höhe und Breite kann mit den Attributen height und width festgelegt werden. Zum Beispiel <table height=''400'' width="90%">. Somit kann man bestimmte Ausmaße einer Tabelle erzwingen. Dieselben Attribute können auch auf Tabellenzellen angewendet werden Zeilenumbruch in einer Zelle verhindern: Gelegentlich ist wichtig, dass der Text in einer Zelle nicht umgebrochen wird, dafür gibt es das Attribut nowrap: <td nowrap= nowrap >Hier wird nicht umgebrochen</td> Ausrichtung: Um Text linksbündig oder rechtsbündig in einer Tabellenzelle auszurichten kann man das Attribut align verwenden: <td align=''left''>linksbündig</td>, eine Ausrichtung nach oben oder unten wird mit dem Attribut valign (=vertical align) definiert: <td valign=''top''>..</td> der <td valign=''bottom''>..</td> Die Ausrichtung kann auch direkt für eine Reihe definiert werden, in diesem Falle wird das Attribut align zusammen mit dem Tag verwendet. Zellen verbinden: Innerhalb einer Tabelle können auch Zellen vertikal oder horizontal miteinander verbunden werden, so dass zwischen diesen beiden Zellen keine Gitternetzlinien mehr sind. Beispiel: Tabelle, deren erste Zeile sich über zwei Spalten erstreckt. <table border= 1 > <th colspan="2">inhalt einer Zelle, die sich über 2 Spalten erstreckt</th> <td>inhalt der ersten Zelle unter der erstreckten Zelle</td> <td>inhalt der zweiten Zelle unter der erstreckten Zelle</td> </table> oder: Beispiel für eine Zelle, die sich über 2 Reihen erstreckt: <table border= 1 > <th rowspan="2">inhalt einer Zelle, die sich über 2 Zeilen erstreckt</th> <td >Inhalt der ersten Zelle neben der erstreckten Zelle</td> <td>inhalt der zweiten Zelle neben der erstreckten Zelle</td> </table> Beide Attribute sind auch kombinierbar. 10

11 Farbe: Die Hintergrundfarbe einer Tabelle, einer Reihe oder einer einzelnen Zelle kann durch das Attribut bgcolor (was auch oft zusammen mit dem body-tag verwendet wird) bestimmt werden. Möchte man eine Tabelle mit blauem Hintergrund so definiert man <table bgcolor=''blue''> ; für eine Tabellenreihe: <tr bgcolor=''red''>; für eine einzelne Zelle <td bgcolor=''green''>. Denkbar ist durchaus eine solche Konstruktion: <html> <head> <title>tabelle</title> </head> <body text= white > <table border= 1 bgcolor= blue width="90%" height= 300 > <tr bgcolor= red > <td>daten1</td> <td bgcolor= teal >Daten2</td> <td>daten3</td> <td>daten4</td> </table> </body> </html> Aufgabe: Erstellen Sie eine Tabelle, in der in der linken Spalte eine Navigationsleiste mit Links, rechts der bisherige Inhalt steht. 11

12 Anhang CSS-Eigenschaften Schrifteigenschaften font-family (Arial, Times...) font-size font-style (italic) font-weight (bold) text-decoration (underline) text-align (left, center, right, justify) vertical-align (top, middle, bottom) color Ränder und Rahmen margin-top margin-bottom margin-left margin-right border padding Hintergrundfarbe: background-color Listen list-style-type(disc, circle, square...) 12

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

Meine erste Homepage - Beispiele

Meine erste Homepage - Beispiele Meine erste - Beispiele 1. Beispiel meine Willkommen auf meiner Befehle nicht über Hier ist ein Senior, der noch fit für's Internet ist. Probieren wir

Mehr

HTML 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

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

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

Online-Publishing mit HTML und CSS für Einsteigerinnen

Online-Publishing mit HTML und CSS für Einsteigerinnen Online-Publishing mit HTML und CSS für Einsteigerinnen Dipl. Math. Eva Dyllong, Universität Duisburg Dipl. Math. Maria Oelinger, spirito GmbH IF MYT 07 2002 CSS-Einführung Vorschau CSS Was ist das? Einbinden

Mehr

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

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

CSS. Cascading Stylesheets

CSS. Cascading Stylesheets CSS Cascading Stylesheets Themen Was sind Cascading Stylesheets? Vorteile von CSS Nachteile von CSS CSS: Versionen Regelsyntax für Stylesheets Einem HTML-Dokument Styles hinzufügen und Numerische

Mehr

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

Format- oder Stilvorlagen

Format- oder Stilvorlagen Vorraussetzung Sie sollten Grundkenntnisse der HTML-Sprache besitzen, um die Ausbildungseinheit Formatvorlagen, auch Stilvorlagen genannt, ohne Probleme verstehen zu können. Ist dies nicht der Fall, empfehlen

Mehr

Da die Bedienung des Editors viele Möglichkeiten aufweist, aber auch etwas Übung voraussetzt, haben wir ihm ein eigenes Unterkapitel gewidmet.

Da die Bedienung des Editors viele Möglichkeiten aufweist, aber auch etwas Übung voraussetzt, haben wir ihm ein eigenes Unterkapitel gewidmet. 5.6. Der HTML-Editor Da die Bedienung des Editors viele Möglichkeiten aufweist, aber auch etwas Übung voraussetzt, haben wir ihm ein eigenes Unterkapitel gewidmet. Bild 33: Der Editor 5.6.1. Allgemeine

Mehr

Aufbau eines Klassen-Selektors: selektor.klasse { css-eigenschaft1:wert1; css-eigenschaft2:wert2;...}

Aufbau eines Klassen-Selektors: selektor.klasse { css-eigenschaft1:wert1; css-eigenschaft2:wert2;...} Cascading StyleSheets (CSS) Allgemein CSS (aufeinander aufbauende Stilvorlagen) wurden 1996 vom W3C standardisiert. dienen der Ergänzung strukturierter Dokumente wie HTML oder XML. Ermöglichen die Trennung

Mehr

http://www.therealgang.de/

http://www.therealgang.de/ http://www.therealgang.de/ Titel : Author : Kategorie : Vorlesung HTML und XML (Einführung) Dr. Pascal Rheinert Sonstige-Programmierung Vorlesung HTML / XML: Grundlegende Informationen zu HTML a.) Allgemeines:

Mehr

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

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

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

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

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

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

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

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

Mehr

Textverarbeitung 1. 1. Textentwurf 2. Texterfassung 3. Textumformung 4. Textgestaltung 5. Textverwendung

Textverarbeitung 1. 1. Textentwurf 2. Texterfassung 3. Textumformung 4. Textgestaltung 5. Textverwendung Informatik - Text / HTML 1 Textverarbeitung 1 1. Textentwurf 2. Texterfassung 3. Textumformung 4. Textgestaltung 5. Textverwendung Leistungsmerkmale Textverarbeitung ist Standardsoftware - nutzerorientiert,

Mehr

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

Textgestaltung mit dem Editor TinyMCE Schritt für Schritt

Textgestaltung mit dem Editor TinyMCE Schritt für Schritt Textgestaltung mit dem Editor TinyMCE Schritt für Schritt Folgender Artikel soll veröffentlicht und mit dem Editor TinyMCE gestaltet werden: Eine große Überschrift Ein Foto Hier kommt viel Text. Hier kommt

Mehr

Dokumentation von Ük Modul 302

Dokumentation von Ük Modul 302 Dokumentation von Ük Modul 302 Von Nicolas Kull Seite 1/ Inhaltsverzeichnis Dokumentation von Ük Modul 302... 1 Inhaltsverzeichnis... 2 Abbildungsverzeichnis... 3 Typographie (Layout)... 4 Schrift... 4

Mehr

Grundelemente der Hypertext Markup Language (HTML) Teil 1

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

Mehr

4 Aufzählungen und Listen erstellen

4 Aufzählungen und Listen erstellen 4 4 Aufzählungen und Listen erstellen Beim Strukturieren von Dokumenten und Inhalten stellen Listen und Aufzählungen wichtige Werkzeuge dar. Mit ihnen lässt sich so ziemlich alles sortieren, was auf einer

Mehr

Wie lege ich eine neue Standardseite an?

Wie lege ich eine neue Standardseite an? Online-Tutorials Referat VI.5 Internetdienste Wie lege ich eine neue Standardseite an? Legen Sie einen neuen Ordner an Klicken Sie den Ordner an, unter dem Sie die neue Standardseite anlegen möchten. Legen

Mehr

Outlook Erstellen einer E-Mail aus einer HTML - Vorlage INHALT

Outlook Erstellen einer E-Mail aus einer HTML - Vorlage INHALT Outlook Erstellen einer E-Mail aus einer HTML - Vorlage INHALT LADEN DER VORLAGE 2 Öffnen Sie Outlook 2 Klicken Sie auf EXTRAS >> OPTIONEN 2 Im Optionenfeld von Outlook folgend Sie den Schritten 2 Fenster

Mehr

11 Tabellen als Inhaltselement (ohne RichTextEditor)

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

Mehr

Einfügen von Bildern innerhalb eines Beitrages

Einfügen von Bildern innerhalb eines Beitrages Version 1.2 Einfügen von Bildern innerhalb eines Beitrages Um eigene Bilder ins Forum einzufügen, gibt es zwei Möglichkeiten. 1.) Ein Bild vom eigenem PC wird auf den Webspace von Baue-die-Bismarck.de

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

ANLEITUNG ZUR TEXTGESTALTUNG IN WORD 2003

ANLEITUNG ZUR TEXTGESTALTUNG IN WORD 2003 ANLEITUNG ZUR TEXTGESTALTUNG IN WORD 2003 Word ist zunächst ein reines Textverarbeitungsprogramm. Allerdings lassen sich hier Vorträge genauso mit Gliederung und Querverweisen sowie Textquellen, Clips

Mehr

Stellen Sie bitte den Cursor in die Spalte B2 und rufen die Funktion Sverweis auf. Es öffnet sich folgendes Dialogfenster

Stellen Sie bitte den Cursor in die Spalte B2 und rufen die Funktion Sverweis auf. Es öffnet sich folgendes Dialogfenster Es gibt in Excel unter anderem die so genannten Suchfunktionen / Matrixfunktionen Damit können Sie Werte innerhalb eines bestimmten Bereichs suchen. Als Beispiel möchte ich die Funktion Sverweis zeigen.

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

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

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

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

Primarschule Birmensdorf PIA Anleitungen Word. Bevor du mit Schreiben beginnen kannst, musst du dein Word- Dokument einrichten.

Primarschule Birmensdorf PIA Anleitungen Word. Bevor du mit Schreiben beginnen kannst, musst du dein Word- Dokument einrichten. Word einrichten Bevor du mit Schreiben beginnen kannst, musst du dein Word- Dokument einrichten. Starte ein Word Dokument, indem du auf das blaue W drückst. Wähle Ansicht 1, gehe zu Symbolleiste 2 und

Mehr

Seminar DWMX 2004. DW Session 004

Seminar DWMX 2004. DW Session 004 Seminar DWMX 2004 DW Session 004 Eigene Site aufbauen Aufbau einer persönlichen Site: Auswahl einer bestimmten Dateiorganisation Statische HTML Site Vorlagenbasierte Site Framebasierte Site Erstellen der

Mehr

Erstellen eines HTML-Templates mit externer CSS-Datei

Erstellen eines HTML-Templates mit externer CSS-Datei Erstellen eines HTML-Templates mit externer CSS-Datei Eigenschaften der Lösung Menü mit 2 Ebenen ohne Bilder, Menü besteht aus Text (Links) Durch CSS kann das Menü aber auch die Seite angepasst werden

Mehr

Einfügen mit Hilfe des Assistenten: Um eine Seite hinzufügen zu können, müssen Sie nur mehr auf ein Symbol Stelle klicken.

Einfügen mit Hilfe des Assistenten: Um eine Seite hinzufügen zu können, müssen Sie nur mehr auf ein Symbol Stelle klicken. 2. SEITE ERSTELLEN 2.1 Seite hinzufügen Klicken Sie in der Navigationsleiste mit der rechten Maustaste auf das Symbol vor dem Seitentitel. Es öffnet sich ein neues Kontextmenü. Wenn Sie nun in diesem Kontextmenü

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

STANDORT SOEST FACHBEREICH AGRARWIRTSCHAFT. Arbeiten mit Word Erstellung einer Formatvorlage

STANDORT SOEST FACHBEREICH AGRARWIRTSCHAFT. Arbeiten mit Word Erstellung einer Formatvorlage STANDORT SOEST FACHBEREICH AGRARWIRTSCHAFT Arbeiten mit Word Erstellung einer Formatvorlage Datum: März 2015 Betreuer/in: B. Sc. Lena Reisner Dipl.-Ing agr. Sibylle Henter Inhalt Einleitung... 1 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

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

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

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

Mehr

Eigene Formatvorlagen

Eigene Formatvorlagen TIPPS & TRICKS Eigene Formatvorlagen V 1.0 // Stand: Juli 2015 MS Word bietet Ihnen standardmäßig Vorlagen, mit denen Sie Textelemente formatieren können, etwa»überschrift 1«oder»Standard«. Diese Formatvorlagen

Mehr

In dieser Anleitung wird beschrieben, wie Sie eine HTML-Seite in Macromedia Dreamweaver mit blinden Tabellen strukturieren können.

In dieser Anleitung wird beschrieben, wie Sie eine HTML-Seite in Macromedia Dreamweaver mit blinden Tabellen strukturieren können. Eine HTML-Seite mit blinden Tabellen strukturieren In dieser Anleitung wird beschrieben, wie Sie eine HTML-Seite in Macromedia Dreamweaver mit blinden Tabellen strukturieren können. Legen Sie in ihrem

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

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

Signatur mit Formatierung

Signatur mit Formatierung Bedienungstip: Signatur mit Formatierung Seite 1 Signatur mit Formatierung Es können Signaturen hinterlegt werden, die beim Erstellen von Nachrichten automatisch angehängt werden. Das ist sehr praktisch,

Mehr

Als Lehrende/r oder Mitwirkende/r einer Veranstaltung können Sie das Wiki unter dem Funktionsreiter + aktivieren und deaktivieren.

Als Lehrende/r oder Mitwirkende/r einer Veranstaltung können Sie das Wiki unter dem Funktionsreiter + aktivieren und deaktivieren. WikiWikiWeb Das automatisch in einer Veranstaltung aktivierte Modul/Plugin Wiki-Web ist eine Variante eines Wiki (hawaiisch für schnell ), in dem es den TeilnehmerInnen möglich ist, direkt in der angewählten

Mehr

Bedienungsanleitung. Content-Management-System GORILLA

Bedienungsanleitung. Content-Management-System GORILLA Bedienungsanleitung Content-Management-System GORILLA Einloggen Öffnen Sie die Seite http://login.rasch-network.com Es öffnet sich folgendes Fenster. Zum Anmelden verwenden Sie die Benutzerdaten, die wir

Mehr

Barrierefreie Webseiten erstellen mit TYPO3

Barrierefreie Webseiten erstellen mit TYPO3 Barrierefreie Webseiten erstellen mit TYPO3 Alternativtexte Für jedes Nicht-Text-Element ist ein äquivalenter Text bereitzustellen. Dies gilt insbesondere für Bilder. In der Liste der HTML 4-Attribute

Mehr

Mit der Maus im Menü links auf den Menüpunkt 'Seiten' gehen und auf 'Erstellen klicken.

Mit der Maus im Menü links auf den Menüpunkt 'Seiten' gehen und auf 'Erstellen klicken. Seite erstellen Mit der Maus im Menü links auf den Menüpunkt 'Seiten' gehen und auf 'Erstellen klicken. Es öffnet sich die Eingabe Seite um eine neue Seite zu erstellen. Seiten Titel festlegen Den neuen

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

Sobald Sie in Moodle einen Textbeitrag verfassen möchten, erhalten Sie Zugang zu folgendem HTML- Texteditor:

Sobald Sie in Moodle einen Textbeitrag verfassen möchten, erhalten Sie Zugang zu folgendem HTML- Texteditor: Texteditor Sobald Sie in Moodle einen Textbeitrag verfassen möchten, erhalten Sie Zugang zu folgendem HTML- Texteditor: Anmerkung für Mac-User: Da der Safari-Browser evtl. Probleme mit dem Editor von Moodle

Mehr

Bilder und Dokumente in MediaWiki

Bilder und Dokumente in MediaWiki Dieses Handout soll erklären, wie Sie Dokumente hochladen können. Der Begriff Dokumente bezieht sich hier auf Word-Dokumente (*.doc), Acrobat-Dokumente (*.pdf), Excel-Tabellen (*.xls), Audiodateien (*.mp3),

Mehr

Microsoft Access 2013 Navigationsformular (Musterlösung)

Microsoft Access 2013 Navigationsformular (Musterlösung) Hochschulrechenzentrum Justus-Liebig-Universität Gießen Microsoft Access 2013 Navigationsformular (Musterlösung) Musterlösung zum Navigationsformular (Access 2013) Seite 1 von 5 Inhaltsverzeichnis Vorbemerkung...

Mehr

Was ist PDF? Portable Document Format, von Adobe Systems entwickelt Multiplattformfähigkeit,

Was ist PDF? Portable Document Format, von Adobe Systems entwickelt Multiplattformfähigkeit, Was ist PDF? Portable Document Format, von Adobe Systems entwickelt Multiplattformfähigkeit, Wie kann ein PDF File angezeigt werden? kann mit Acrobat-Viewern angezeigt werden auf jeder Plattform!! (Unix,

Mehr

.htaccess HOWTO. zum Schutz von Dateien und Verzeichnissen mittels Passwortabfrage

.htaccess HOWTO. zum Schutz von Dateien und Verzeichnissen mittels Passwortabfrage .htaccess HOWTO zum Schutz von Dateien und Verzeichnissen mittels Passwortabfrage Stand: 21.06.2015 Inhaltsverzeichnis 1. Vorwort...3 2. Verwendung...4 2.1 Allgemeines...4 2.1 Das Aussehen der.htaccess

Mehr

DAUERHAFTE ÄNDERUNG VON SCHRIFTART, SCHRIFTGRÖßE

DAUERHAFTE ÄNDERUNG VON SCHRIFTART, SCHRIFTGRÖßE DAUERHAFTE ÄNDERUNG VON SCHRIFTART, SCHRIFTGRÖßE UND ZEILENABSTAND Word 2010 und 2007 Jedes neue leere Dokument, das mit Word 2010 erstellt wird, basiert auf einer Dokumentvorlage mit dem Namen Normal.dotx.

Mehr

CASCADING STYLE SHEETS WEBSEITEN-GESTALTUNG MIT CSS

CASCADING STYLE SHEETS WEBSEITEN-GESTALTUNG MIT CSS CASCADING STYLE SHEETS WEBSEITEN-GESTALTUNG MIT CSS Sören Elvers, Julia Polner, Max Weller, Moritz Willig T-Doku, Werner-von-Siemens-Schule, Wetzlar 2010-2011 INHALT DIESES VORTRAGS 1. Kurze Einführung

Mehr

Übung zur Vorlesung Digitale Medien. Doris Hausen Ludwig-Maximilians-Universität München Wintersemester 2011/2012

Übung zur Vorlesung Digitale Medien. Doris Hausen Ludwig-Maximilians-Universität München Wintersemester 2011/2012 Übung zur Vorlesung Digitale Medien Doris Hausen Ludwig-Maximilians-Universität München Wintersemester 2011/2012 1 Pfadangaben (1) Pfadangaben sind relevant für Bilder, Verweise, Medienobjekte per URL:

Mehr

Textverarbeitungsprogramm WORD

Textverarbeitungsprogramm WORD Textverarbeitungsprogramm WORD Es gibt verschiedene Textverarbeitungsprogramme, z. B. von Microsoft, von IBM, von Star und anderen Softwareherstellern, die alle mehr oder weniger dieselben Funktionen anbieten!

Mehr

1. Anmeldung in das Content Management System WEBMIN CMS

1. Anmeldung in das Content Management System WEBMIN CMS Anleitung 1. Anmeldung in das Content Management System WEBMIN CMS A. Öffnen Sie Ihre Internetseite und schreiben Sie hinter der Domain noch /webmin/. Die Adresse (URL) wird wie folgt aussehen: http://www.ihre-domain.de/webmin/

Mehr

1.1 Ändern der Formatvorlagen

1.1 Ändern der Formatvorlagen Löschen einer Absatzmarke Angenommen zwei aufeinander folgende Absätze haben verschiedene Formatvorlagen und Sie löschen die Absatzmarke des ersten Absatzes, dann erhält der neue grosse Gesamtabsatz die

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

Standard-Kontaktformular

Standard-Kontaktformular Online-Tutorials Referat VI.5 Internetdienste Standard-Kontaktformular Legen Sie ein neues Dokument an Klicken Sie die Datei an, unter der Sie das Kontaktformular anlegen möchten Legen Sie über Datei >

Mehr

Nuke Menü Version 0.2 / VKP Neu! Jetzt mit Gruppenzuordnung der Links (Nur für Admins, nur für Mitglieder, nur für Anonyme oder für Alle)

Nuke Menü Version 0.2 / VKP Neu! Jetzt mit Gruppenzuordnung der Links (Nur für Admins, nur für Mitglieder, nur für Anonyme oder für Alle) Nuke Menü Version 0.2 / VKP Neu! Jetzt mit Gruppenzuordnung der Links (Nur für Admins, nur für Mitglieder, nur für Anonyme oder für Alle) Author: Bernd Alexander K. W. Köhler http://www.pixel-cms.de email:

Mehr

31. März 2015 L A TEX. 01 - Struktur und Formatieren

31. März 2015 L A TEX. 01 - Struktur und Formatieren L A TEX 01 - Struktur und Formatieren 1 Hello, World! \documentclass{article} Ein LaTeX-Dokument besteht aus: \documentclass: Dokumenttyp Präambel (Format, Befehlsdefinitionen) Textkörper %%%%%%%%%%% %

Mehr

Web-Kürzel. Krishna Tateneni Yves Arrouye Deutsche Übersetzung: Stefan Winter

Web-Kürzel. Krishna Tateneni Yves Arrouye Deutsche Übersetzung: Stefan Winter Krishna Tateneni Yves Arrouye Deutsche Übersetzung: Stefan Winter 2 Inhaltsverzeichnis 1 Web-Kürzel 4 1.1 Einführung.......................................... 4 1.2 Web-Kürzel.........................................

Mehr

EINFACHES HAUSHALT- KASSABUCH

EINFACHES HAUSHALT- KASSABUCH EINFACHES HAUSHALT- KASSABUCH Arbeiten mit Excel Wir erstellen ein einfaches Kassabuch zur Führung einer Haushalts- oder Portokasse Roland Liebing, im November 2012 Eine einfache Haushalt-Buchhaltung (Kassabuch)

Mehr

Hinweise zum Übungsblatt Formatierung von Text:

Hinweise zum Übungsblatt Formatierung von Text: Hinweise zum Übungsblatt Formatierung von Text: Zu den Aufgaben 1 und 2: Als erstes markieren wir den Text den wir verändern wollen. Dazu benutzen wir die linke Maustaste. Wir positionieren den Mauszeiger

Mehr

TABELLEN-ÜBUNGEN. Erstellen Sie eine HTML-Datei Titel: Große Tabelle Dateiname: tabelle1.htm. Überschrift 1. Textausrichtung in großen Tabellenzellen

TABELLEN-ÜBUNGEN. Erstellen Sie eine HTML-Datei Titel: Große Tabelle Dateiname: tabelle1.htm. Überschrift 1. Textausrichtung in großen Tabellenzellen Erstellen Sie eine HTML-Datei Titel: Große Tabelle Dateiname: tabelle1.htm Textausrichtung in großen Tabellenzellen Überschrift 1 links - oben zentriert - oben rechts - oben links - zentriert zentriert

Mehr

Inhalt. 1 Einleitung AUTOMATISCHE DATENSICHERUNG AUF EINEN CLOUDSPEICHER

Inhalt. 1 Einleitung AUTOMATISCHE DATENSICHERUNG AUF EINEN CLOUDSPEICHER AUTOMATISCHE DATENSICHERUNG AUF EINEN CLOUDSPEICHER Inhalt 1 Einleitung... 1 2 Einrichtung der Aufgabe für die automatische Sicherung... 2 2.1 Die Aufgabenplanung... 2 2.2 Der erste Testlauf... 9 3 Problembehebung...

Mehr

Wie Sie mit Mastern arbeiten

Wie Sie mit Mastern arbeiten Wie Sie mit Mastern arbeiten Was ist ein Master? Einer der großen Vorteile von EDV besteht darin, dass Ihnen der Rechner Arbeit abnimmt. Diesen Vorteil sollten sie nutzen, wo immer es geht. In PowerPoint

Mehr

1 Einleitung. Lernziele. das Drucklayout einer Tabelle mit der Seitenansicht kontrollieren

1 Einleitung. Lernziele. das Drucklayout einer Tabelle mit der Seitenansicht kontrollieren 1 Einleitung Lernziele das Drucklayout einer Tabelle mit der Seitenansicht kontrollieren mit dem Register Seitenlayout das Drucklayout einer Tabelle ändern Kopf- und Fußzeilen schnell einfügen Lerndauer

Mehr

Beleg 1/HTML: Erstellen einer Beispiel-Webseite

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

Mehr

Die Textvorlagen in Microsoft WORD und LibreOffice Writer

Die Textvorlagen in Microsoft WORD und LibreOffice Writer Die Textvorlagen in Microsoft WORD und LibreOffice Writer Liebe Teilnehmer(-innen) am Landeswettbewerb Deutsche Sprache und Literatur Baden- Württemberg, Diese Anleitung soll Ihnen helfen Ihren Wettbewerbsbeitrag

Mehr

FTP-Server einrichten mit automatischem Datenupload für SolarView@Fritzbox

FTP-Server einrichten mit automatischem Datenupload für SolarView@Fritzbox FTP-Server einrichten mit automatischem Datenupload für SolarView@Fritzbox Bitte beachten: Der im folgenden beschriebene Provider "www.cwcity.de" dient lediglich als Beispiel. Cwcity.de blendet recht häufig

Mehr

Word 2010 Grafiken exakt positionieren

Word 2010 Grafiken exakt positionieren WO.009, Version 1.2 10.11.2014 Kurzanleitung Word 2010 Grafiken exakt positionieren Wenn Sie eine Grafik in ein Word-Dokument einfügen, wird sie in die Textebene gesetzt, sie verhält sich also wie ein

Mehr

Neue Schriftarten installieren

Neue Schriftarten installieren .DIE Neue Schriftarten installieren Die Informationen zu jeder Schriftart (Font) sind in jeweils einer Datei untergebracht, der sog. Font-Datei mit der Endung.ttf ttf steht für True Type Font und bedeutet,

Mehr

Handbuch für Redakteure

Handbuch für Redakteure Handbuch für Redakteure Erste Schritte... 1 Artikel erstellen... 2 Artikelinhalt bearbeiten... 3 Artikel bearbeiten... 3 Trennen der Druck- und der Online-Version.. 4 Grunddaten ändern... 5 Weitere Artikel-eigenschaften...

Mehr

Dazu stellen Sie den Cursor in die Zeile, aus der eine Überschrift werden soll, und klicken auf die gewünschte Überschrift.

Dazu stellen Sie den Cursor in die Zeile, aus der eine Überschrift werden soll, und klicken auf die gewünschte Überschrift. Überschriften mit Zahlen Wenn Sie ein Stück Text als Überschrift formatieren möchten, weisen Sie diesem Text einfach das Format Überschrift 1 oder Überschrift 2 usw. zu. Dazu klicken Sie auf das Symbol

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

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

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

Handbuch für Redakteure

Handbuch für Redakteure Handbuch für Redakteure Erste Schritte... 1 Artikel erstellen... 2 Artikelinhalt bearbeiten... 3 Artikel bearbeiten... 3 Grunddaten ändern... 5 Weitere Artikeleigenschaften... 5 Der WYSIWYG-Editor... 6

Mehr

mysql - Clients MySQL - Abfragen eine serverbasierenden Datenbank

mysql - Clients MySQL - Abfragen eine serverbasierenden Datenbank mysql - Clients MySQL - Abfragen eine serverbasierenden Datenbank In den ersten beiden Abschnitten (rbanken1.pdf und rbanken2.pdf) haben wir uns mit am Ende mysql beschäftigt und kennengelernt, wie man

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

Kleines Handbuch zur Fotogalerie der Pixel AG

Kleines Handbuch zur Fotogalerie der Pixel AG 1 1. Anmelden an der Galerie Um mit der Galerie arbeiten zu können muss man sich zuerst anmelden. Aufrufen der Galerie entweder über die Homepage (www.pixel-ag-bottwartal.de) oder über den direkten Link

Mehr

Version 1.0 Merkblätter

Version 1.0 Merkblätter Version 1.0 Merkblätter Die wichtigsten CMS Prozesse zusammengefasst. Das Content Management System für Ihren Erfolg. Tabellen im Contrexx CMS einfügen Merkblatt I Tabellen dienen dazu, Texte oder Bilder

Mehr

Typo3 - Inhalte. 1. Gestaltung des Inhaltsbereichs. 2. Seitenunterteilung einfügen

Typo3 - Inhalte. 1. Gestaltung des Inhaltsbereichs. 2. Seitenunterteilung einfügen Typo3 - Inhalte 1. Gestaltung des Inhaltsbereichs Das Layout der neuen TVA Website sieht neben dem grafischen Rahmen und den Navigations-Elementen oben und links einen grossen Inhaltsbereich (graue Fläche)

Mehr

Hilfen zur Verwendung der Word-Dokumentvorlage des BIS-Verlags

Hilfen zur Verwendung der Word-Dokumentvorlage des BIS-Verlags Hilfen zur Verwendung der Word-Dokumentvorlage des BIS-Verlags 2013 style_sheet_bis_verlag_20130513 Arbeiten mit der Dokumentvorlage des BIS-Verlags... 3 Dokumentvorlage Wofür?... 3 Wohin mit der Dokumentvorlage...

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

PowerPoint: Text. Text

PowerPoint: Text. Text PowerPoint: Anders als in einem verarbeitungsprogramm steht in PowerPoint der Cursor nicht automatisch links oben auf einem Blatt in der ersten Zeile und wartet auf eingabe. kann hier vielmehr frei über

Mehr