HTML. eine Einführung. Informatikkurse an der IGS im Schuljahr 2004 HTML

Größe: px
Ab Seite anzeigen:

Download "HTML. eine Einführung. Informatikkurse an der IGS im Schuljahr 2004 HTML"

Transkript

1 HTML eine Einführung Informatikkurse an der IGS im Schuljahr 2004 Webseiten werden normlaerweise heute mit speziellen Programmen erstellt, die vom Anwender wenige Kenntnisse der zugrunde liegenden Programmiersprache erfordern. Vielmehr werden mit der Maus Objekte am Bildschirm plaziert, Verknüpfungen erzeugt und das Erscheinungsbild beeinflusst. Bei den Content-Managment-Systemen reicht es oft schon aus, Texte und Bilder an der richtigen Stelle "Fallen zu lassen" - den Rest erledigt das System selbst. In dieser Einführung soll es um die Seitenbeschreibungssprache HTML gehen, die die Webseiten so aussehen lässt, wie wir sie kennen. Seite 1

2 Die ersten Schritte HTML wird oft als Programmiersprache für das Internet bezeichnet. Das ist nicht ganz richtig, denn HTML hat nicht die Möglichkeiten von Java oder C++. Man kann keine Variablen vereinbaren, es gibt keine Alternativanweisungen ( if... else) oder Wiederholungen ( for... oder do... while). Allerdings kann HTML das Erscheinungsbild einer Webseite recht einfach beschreiben, was mit den oben genannten Programmiersprachen wohl er schwierig wäre. Die Abkürzung HTML bedeutet HyperText Markup Language und es geht nur darum Webseiten auf den verschiedensten Rechnern darstellen zu können. Dazu wird der Inhalt einer Webseite in Textform beschrieben und ein spezielles Programm - der sog. Browser (Explorer, Firefox) - interpretiert diesen Text und zeigt die gewünschten Dinge dann am Bildschirm an. HTML kennt bestimmte Befehle und eine bestimmte Syntax. Zur Eingabe der HTML- Texte reicht schon ein simpler Texteditor aus, wie er bei jedem Betriebssystem als Zugabe zu finden ist ( Wordpad, Simple Text, TextEdit...). Ein erstes Beispiel Starte einen simplen Texteditor( irgendwo auf der Platte wird er sein ). Tippe dann den untenstehenden Text ein. Es handelt sich um ein Gedicht von Friedrich Schiller. Man beachte: auch im Informatikunterricht ist Hochkultur möglich. Wähle dann aus dem Ablage/Datei-Menü den Punkt "Sichern unter.." und speichere das Werk unter dem Namen "Schiller.txt". Wähle den Punkt "Sichern unter..." gleich noch einmal und speichere unter dem Namen "Schiller"(ohne Dateikennung am Ende). Seite 2

3 Ändere dann den Text ein klein wenig um, indem du als Überschrift <HTML> einfügst und am Ende </HTML> als letzte Zeile schreibst. Speichere dann unter dem Namen "Schiller.html." ( Für Windows bitte nur ".htm") Die verschiedenen Varianten des Textes werden jetzt mit einem Browser angeschaut. Starte z.b. Firefox und wähle "Datei öffnen..." Wähle zuerst die Datei "Schiller.txt". Es erscheint der Gedichttext. Allerdings hat er einen kleinen Schönheitsfehler: Die Umlaute (ä,ü,...) sind durch seltsame Zeichen ersetzt. Öffne nun in einem neuen Tab die Datei "Schiller.html" (bzw. "Schiller.htm"). Wieder erscheint der Gedichttext. Diesmal sind nicht nur die Umlaute verschwunden, sondern auch die Returnzeichen. Experimentiere mit der Breite des Fensters, um zu prüfen, ob der Browser die Zeilenlänge der Fensterbreite anpasst. Dasselbe Ergebnis bekommt man auch, wenn man die Datei öffnet, die keine Dateikennung hatte. Der Browser tut dann offensichtlich so, als sei es eine Datei mit.html am Ende Versuch: Schreibe einen kurzen Text mit dem Texteditor. Verwende einige verschiedene Schriftgrößen und Schriftstile. Speichere als Test.txt oder auch ohne jede Endung als Test und einmal als Test.html. Prüfe, ob die Formatierungen im Browser zu sehen sind. Seite 3

4 Hilfe - mein Lehrer quält mich ohne Ende! Ich will mit einem netten Webeditor alles schön bunt zusammenschieben und nicht wissen, wie HTML geht. Ein Wunsch der verständlich ist, aber noch nicht erfüllt wird. Man muss schon wissen, wie in groben Zügen HTML geht, bevor man mit Webeditoren arbeitet. Und nur mit einem grundlegenden Verständnis von HTML ist eine brauchbare Bearbeitung von Webseiten möglich. Also nicht ungeduldig werden. Eine erste Zusammenfassung Die meisten Browser prüfen den Namen der Datei auf die Endung.html ( oder.htm unter Windows). Wenn diese Endung gefunden wird, geht der Browser davon aus, dass nun ein Text kommt, der HTML-Befehle enthält. HTML-Befehle heissen TAGS. Findet der Browser solche TAGS, wird er sie ausführen. Hat der Dateiname keine passende Endung, stellt der Browser den Inhalt der Datei so gut es geht dar. Texte und Grafiken im passenden Format werden bis auf kleine Macken korrekt dargestellt ( ÜmLäütöö siehe oben ). Im Text "Schiller.html" waren zwei TAGS untergebracht. Das war <HTML> und am Ende </HTML>. Der erste Tag steht immer am Anfang eines HTML-Dokuments und der zweite Tag am Ende. Nun geht der Browser nach dem <HTML> davon aus, dass Befehle kommen. Wenn das nicht der Fall ist, stellt er den Text zwischen den Tags ohne jede Formatierung dar. Die ersten HTML-Tags Öffne nun im Texteditor noch einmal die Datei "Schiller.html" und ändere sie an zwei Stellen um. Füge in die zweite Zeile den Tag <PRE> und in die vorletzte Zeile den Tag </PRE> ein. Sichere die Datei unter dem Namen Schiller2.html und rufe die dann im Browser auf. Der Tag <PRE> gibt dem Browser an, dass nun vorformattierter Text kommt ( prefomated) und zu jedem Starttag gehört das entsprechende Ende - in unserem Fall ist das die Zeile mit der Anweisung </PRE>, was soviel bedeutet, wie "Schluss mit vorformatiert". <HTML> <PRE> Die Bürgschaft Zu Dionys, dem Tyrannen, schlich Möros, den Dolch im Gewande; Ihn schlugen die Häscher in Bande. "Was wolltest du mit dem Dolche, sprich!" Entgegnet ihm finster der Wüterich. "Die Stadt vom Tyrannen befreien!" "Das sollst du am Kreuze bereuen!" </PRE> </HTML> Nun wird der Text nicht mehr der Fensterbreite angepasst, die Zeilenumbrüche sind also erhalten geblieben. Seite 4

5 Aufgaben: 1) Ändere Schriftgößen und Schriftstile in Schiller2.html und teste im Browser. 2) Schreibe die Tags als <Pre> oder <pre> oder <pre> und teste im Browser. 3) Teste Sonderzeichen, wie Klammern, Punkte,Doppelpunkte und ähnliches. Wie erscheinen die im Browser? Versaue den armen Schiller dabei nicht zu sehr, sondern speichere sowas unter dem vielseitigen Titel test2.html. Nun wenden wir uns nochmal dem Problem der verschwundenen Sonderzeichen zu. Da HTML und alle Browser amerikanischen Ursprungs sind, hat mal wieder niemand an die Feinheiten europäischer Sprachen und Schriften gedacht. Will man die Umlaute im Browser korrekt darstellen, muss man nach der unten stehendentabelle verfahren. Diese Tabelle ist natürlich nicht vollständig. Wer weitere Sonderzeichen braucht, schlägt in entsprechenden Büchern nach. Wie kann man nun solche selt Zeichenersetzungen in ein Textdokument bekommen? Das wird nun noch einmal an dem Gedicht des Herrn Schiller vorgeführt. Der Texteditor, mit dem bis jetzt gearbeitet wurde, hat bestimmt eine Suchen / Ersetzen Funktion, die nun benutzt werden kann. Um alle Buchstaben "ü" so zu ersetzen, dass sie im Browser richtig erscheinen wird der Ersetzen-Dialog ausgefüllt. Dabei ist Groß - und Kleinschreibung zu beachten und am Ende auf den Knopf "Alles ersetzen " zu klicken. Das Gleiche wird dann passend für die Ersetzung von "ä" und "ö" durchgeführt. Am Ende sieht dann der schöne Schillertext etwas seltsam aus. Er wird nun unter dem Namen "Schiller3.html" gesichert und im Browser aufgerufen --- und siehe da!! Es geschehen doch noch kleine Wunder! Das Grundgerüst einer HTML- Datei Man sieht, dass immer zu einem eröffnenden TAG ein schließender Tag gehört, Sonderzeichen das erscheinen soll Ä ä Ü ü Ö ö ß Zeichenfolge, die man eingeben muss Ä ä Ü ü &Ouml ö ß Seite 5

6 den man daran erkennt, dass er in der spitzen Klammer mit einem "/" beginnt. Ihr werdet schon gemerkt haben, dass es dem Browser egal ist, ob TAGS gross oder KLEIN geschrieben werden. Es ist aber hilfreich und erleichtert das Arbeiten, wenn man sich daran gewöhnt, die TAGS gross zu schreiben. Auch Kommentare werden mit spitzen Klammern begonnen und entsprechend beendet. Start eines Kommentars : <!-- Seite 6

7 Ende eines Kommentars: --> <HTML> <HEAD> <TITLE> </HEAD> </HTML> <BODY> </BODY> Signalisiert den Beginn einer HTML-Datei Beginn Kopfteil Titel des Browserfensters Ende Kopfteil Beginn des eigentlichen Inhalts Allerlei Texte, Grafiken, etc. Ende des eigentlichen Inhalts Signalisiert das Ende einer HTML-Datei </TITLE> TAGS für Schriftartformatierungen Die folgenden Tags beeinflussen Schriften und Schriftgrößen. Diese Tags haben z.t. (ausnahmsweise ) kein End-Tag-Symbol. Nun sollen alle diese netten Befehle auch mal ausprobiert werden. Aufgabe: Start Ende Hinweise <FONT SIZE=7> <H1> <H6> <SUP> <SUB> <STRIKE> <BIG> <H6> <SUP> <SUB> <BR> <P> <B> <I> <FONT SIZE=1> <FONT SIZE=3> </H1> </H6> </SUP> </SUB> </STRIKE> </BIG> </H6> </SUP> </SUB> </B> </I> Schriftgröße 7 ( die größte, die vorerst möglich ist ) größte Überschrift kleinste Überschrift hochgestellte Schrift tiefgestellte Schrift selbst probieren selbst probieren kleinste Überschrift hochgestellte Schrift tiefgestellte Schrift Zeilenumbruch-- neue Zeile neuer Absatz Fette Schrift an und aus Italic an und aus kleinste Schrift Schriftgröße 3 Seite 7

8 Schreibe ein kleines HTML-Script, das folgenden Text auf den Bildschirm bringt: HTML Achte dabei auch auf die Umlaute, die Zeilenumbrüche und die Leerzeilen. Lasse dir den Programmtext ausdrucken und nimm ihn zu deinen Unterlagen. Dies ist eine ÜBERSCHRIFT Größe 1 Dies ist eine durchgestrichene Zeile Dies ist die Schriftgröße 6 Dies ist die Schriftgröße 4 Dies ist die Schriftgröße 2 Nun wird etwas tiefer gestellt und nun wird ein Stück Text in einer neuen Zeile höher gestellt Dieser Text ist fett und dieser hat die Größe 6 er ist fett und kursiv Grafikformate, Grössen, Auflösungen Immer wieder kommt es vor, dass man Probleme mit Grafiken am Computer hat. Da hat der "Freund" aus Frankfurt ein Bild als Anhang an eine gepackt oder direkt mit MS PowerPoint verschickt und das Bild will sich beim besten Willen nicht vom Server bei AOL oder T-online laden lassen. Warum ist das so? Hat der Freund eine DIN A4 -Landkarte des Frankfurter Bankenviertels auf den Scanner gepackt, mit 300 dpi eingescannt und das alles abgeschickt,dann klappt das nicht! Und wenn doch, dann wird es geöffnet und der unbedarfte Computerfreund ist ganz entsetzt, weil das "Bild so gross ist, dass man nur einen kleinen Ausschnitt sieht ". Bildauflösungen Damit beschreibt man, wieviele Bildpunkte pro Zoll vorhanden sind. Ein Zoll sind 2,54 cm und wenn pro Zoll das Bild in 300 kleine Punkte zerlegt ist, dann spricht man von einer Auflösung von 300 dpi ( Dots per Inch oft gleichgesetzt mit ppi Pixel per Inch, was korrekter wäre ). Ein DIN A4 Blatt ist etwa 20 cm x 30 cm groß also etwa 7,8 Zoll x 11,8 Zoll. Das sind dann bei 300 ppi insgesamt 2340 x 3540 = Bildpunkte. Da zur Speicherung jedes Bildpunkte bei einem Farbbild bis zu 24 Bit benötigt werden, sind das dann Bit = Byte = KiloByte = 24,85 Megabyte Speicherplatz die benötigt werden. Wenn sowas über eine DSL-Datenleitung mit 3000 kbit/sekunde übertragen werden soll, dann dauert das etwa 1 Minute. Das aber auch nur, wenn alles klappt und die Übertragungsgeschwindigkeit nicht absackt. Solche Grafikmonster können wir am Bildschirm nicht gebrauchen. Ruft man Bilder mit hoher Auflösung in Grafikprogrammen auf, dann versuchen diese Seite 8

9 Programme alle Punkte darzustellen. Da am Bildschirm aber nur dpi zu machen sind, muss ein Bild mit 300 dpi vergrößert erscheinen, da die Punkte auf einen Zoll ja alle zu sehen sein sollen. Am Bildschirm reichen 72 dpi immer aus! Bilder in Webseiten HTML Bevor ein Bild gespeichert wird, sollte die Verwendung klar sein. Wenn es ein Bild ist, dass in einer Homepage als Icon oder Button eingesetzt werden soll und das eventuell den Hintergrund durchscheinen lassen soll, dann ist das richtige Format GIF98a. In diesem Format hat man zu beachten, dass nur 256 Farben mitgespeichert werden. Besitzt das Bild sehr viele Farben auf die nicht verzichtet werden soll, dann ist das jpg -Format richtig. Beide Formate beinhalten eine Kompression der Bilddaten. Bei alle Liebe zu wunderschönen Bildern, dürfen Internetsurfer nicht am Rechner einschlafen, wenn Bilder geladen werden. Daher sollte man vermeiden, Bilder einzubauen, die mehr als 100KB Speicherplatz brauchen. Hat man Verweise ( Hyperlinks ) zu anderen Dateien, dann sollten auch dort die Bilder die 100 KB-Grenz nicht überschreiten. Im Zweifelsfall macht erst der Versuch klug. Grafiken "zu Fuß" in HTML einbinden Was tun, wenn man die Grafik durch TAGS einbinden will? Betrachte folgenden HTML-Text, der wieder mit einen einfachen Texeditor geschrieben wird und dann unter dem Namen "GrafText.html " gesichert wird: <HTML> <BODY> <FONT SIZE =4> Hier steht ein Text und eine Grafik wird <BR> <IMG SRC=Grafik1.jpg WIDTH=170 HEIGHT = 170 ALT= GRAFIK> <BR> darunter abgebildet! <BR> <BR> Hier steht noch eine Grafik und <IMG SRC=Grafik2.jpg WIDTH=142 HEIGHT = 106 ALT= GRAFIK2> die steht zwischen den Buchstaben </BODY> </HTML> Damit das klappt, muss dafür gesorgt werden, dass dieses HTML-Dokument und die Grafiken im gleichen Verzeichnis platziert sind. Der TAG IMG SCR zeigt an, dass ein Bild ( Image) kommt, dessen Quelldatei ( Source) den angegebenen Namen hat. Was WIDTH und HEIGHT bedeuten kannst du schnell selbst testen. Erzeuge dazu zwei Grafiken. Die eine muss den Namen Grafik1,jpg haben und die andere Grafik2.jpg. Die können natürlich ganz anders aussehen, als die hier gezeigten Bilder. Also : Teste das Beispiel! Grafiken im GIF-Format mit Transparenz erzeugen Sollen Grafiken erzeugt werden, die als GIF-Bilder in HTML eingebunden werden und Seite 9

10 Grafik1. jkpg und Grafik2.jpg die dabei transparent sein sollen, so geht das am besten mit Photoshop. Dieses Grafikprogramm ist außerordentlich leistungsstark und recht kompliziert in der Anwendung. Einfache grafische Werke sollten Euch damit aber schnell gelingen. Ist Photoshop nicht zur Hand, tut es jedes anderes Grafikprogramm auch, das GIF-Bilder speichern kann. Hier jetzt eine Kurzanleitung für ein transparenten Gif-Bild. 1. Aus dem Menü "Datei" >>"Neu.." wählen. Im Dialog 72 Pixel/Inch einstellen und unten auf Transparent klicken. Dann OK! 2. Ein kleines nettes Bild malen. Die Tatsache, dass es transparent sein soll, erkennt man in Photoshop daran, dass im Bildhintergrund ein Karomuster zu sehen ist. Seite 10

11 3. Aus dem Datei/Ablage Menü "Für Web sichern..." wählen und unter passendem Namen speichern. Nun sollte sich in deinem Ordner, in dem sich Schiller in verschiedenen Varianten befindet und dazu JPEG-Bilder und allerlei HTML auch eine GIF-Bilddatei befinden. Wird diese nun in den HTML-Text eingebunden, ist das Ergebnis so, wie erwartet - der Hintergrund scheint durch. Grafiken als Hintergrund Ein sehr beliebter Effekt auf Webseiten war anfangs die Benutzung von Grafiken als Hintergrund einer Seite. Die HTML- Anweisung der Art BACKGROUND = dateiname ( mit dem Kürzel.jpg oder.gif ) wird innerhalb des BODY - Tags eingegeben und sorgt dafür, dass der Browser den Hintergrund mit der Bilddatei "kachelt". Wenn also das Bild 100 x 100 Pixel groß ist wird es auf einem 800 x 600 Pixel großen Bildschirm 8 mal nebeneinander und 6 mal untereinander gezeigt. Als HTML : <BODY BACKGROUND = Grafik.jpg WIDTH=100 HEIGHT = 100 > Seite 11

12 HTML Als Regel gilt aber in jedem Falle: Der Hintergrund darf die Seite nicht erschlagen. Die Inhalte, Texte und Vordergrundbilder müssen sich noch deutlich vom Hintergrund abheben können. Unterdessen findet man diese Hintergrundgestaltung kaum noch. Aufgabe: Erstelle in Photoshop eine 100 x 100 Pixel große Bilddatei, von der du annimmst, dass sie als Hintergrund geeignet ist. Speichere sie als JPEG und binde sie in eines deiner HTML- Dokumente ein. Nun will ich endlich mal in meiner Seite "Klick" machen... In HTML kann man "HotText" verwenden. Das bedeutet, dass bei einem Mausklick auf eine Textzeile oder auch nur ein Wort eine Aktion ausgelöst wird. Es gibt internetfähige Menschen, die sowas den ganzen Tag lang machen... das nennt man dann (sportlich) "surfen". Wir betrachten zunächst auf die Verbindung zu anderne HTML-Dokumenten. Der TAG für solche Hyperlinks ist <A...weitere Angaben > und entsprechend </A> für das Ende des Tags. Einige Beispiele, die sich auf unser Schiller.html Beispiel beziehen. Wenn auf das Wort Bürgschaft geklickt wird, soll eine Verbindung zu Wikipedia hergestellt werden und zwar zu der Seite für den Suchbegriff "Bürgschaft". <A HREF= " Bürgschaft </A> Das Kürzel HREF steht hier für Hypertextreference ( also ein Verweis irgendwo hin ). Es würde ein Sprung an den Anfang der so anvisierten HTML-Seite erfolgen. Angenommen ihr habt eine zweite HTML-Datei in eurem Verzeichnis mit dem Namen "Stadt.html", die nette Bilder von historischen Städten enthält. Wollt ihr dort einen Hyperlink hinlegen, dann ginge das etwa wie folgt: <A HREF="Stadt.html" > Stadt </A> Auch hier würde die Datei geladen und vom Browser abgearbeitet. Da fehlt, schaut der Browser zuerst im Verzeichnis nach, indem sich die html-datei befindet, von der aus der Aufruf gestartet wird. Anker Manchmal will man sofort an eine bestimmte Stelle einer aktuellen oder einer externen Seite springen. Dann müssen an den Stellen, zu denen man springen will sogenannte Anker angebracht sein. Der <A> Tag sieht dann etwas anders aus: <A HREF=#sprungziel> hierher </A> man beachte das # Bei Klick auf den Hottext hierher würde der Browser in der aktuellen Datei nach einer Markierung mit dieser Bezeichnung suchen. Diese Markierung muss natürlich gesetzt sein, sonst geht der Sprung daneben. Seite 12

13 <A NAME = sprungziel> wird an der Stelle im HTML-Code eingefügt, zu der der Sprung führen soll. Ein komplizierte Beispiel: Es gebe eine Datei "Goethe.html" mit dem Wort "Gipfeln" das HotText werden soll. Bei einem Klick soll eine zweite Datei Namens "Schiller.html " angesprungen werden, dort aber ein Anker mit der Bezeichnung "ausweia". In der Datei Schiller.html ist also mit <A NAME= auweia> das Sprungziel festgelegt worden. Dann wird nun in Goethe.html eine Zeile wie folgt geschrieben: <A HREF= "Schiller.html"#auweia> Gipfeln </A> Beim Klick auf "Gipfeln" wird im gleichen Verzeichnis nach Schiller.html gesucht und dort nach dem Anker mit dem Namen "auweia". Wenn man soetwas zum ersten Mal macht merkt man garnicht, dass eine spezielle Stelle im Dokument Schiller.html angesprungen wurde. Das fällt erst dann auf, wenn die HTML- Seiten länger als eine Bildschirmseite werden. Aufgabe: Erzeuge einige kleine Grafiken oder besorge dir Bilder ( nicht zu groß ), die mit dem Scanner eingelesen werden. Auch Bildersammlungen können benutzt werden. Es sollten in jedem Falle mindestens 4 Bilder vorliegen. Erzeuge oder besorge auch Grafiken, die als Hintergrund für Webseiten diesen könnten. Erzeuge ein HTML-Dokument "Eins.html" das eine Überschrift enthält, einigen Text und mindestens zwei Bilder. Außerdem soll es einen Hintergrund haben. Wähle einen Satz oder ein passenden Wort aus, dass ein Hyperlink zu einer zweiten Datei namens "Zwei.html" werden soll. Setze den Hyperlinks rufe aber die Datei noch nicht im Browser auf. Erzeuge die Datei "Zwei.html". Sie soll ebenfalls Texte und Bilder enthalten. Sie soll so lang werden, dass sie nicht mehr auf den Bildschirm passt. Setze oben an den Dateianfang einen Anker und unten in der Datei einen Link der zum Anfang der Seite ( also zum passenden Anker ) springt. Setze einen weiteren Links zur Datei "Eins.html" Beachte: Alle verwendeten Dateien und Bilder liegen im selben Ordner. Seite 13

14 Farben in Texten und Hintergründen Um dem Browser anzugeben, dass Hintergrund oder Text farbig werden soll, wird die Farbe als Hexadezimalzahl kodiert angegeben. (Einige Standardfarben kann man auch als Wort angeben ). Dabei reichen die Möglichkeiten von # das ist Schwarz --- bis zu #FFFFFF -- das ist Weiss. Einige weitere Standardfarben sind Rot, Grün und Blau mit den Nummern #FF0000, #00FF00 und #0000FF. Einige wichtige Farben sind nebenstehend aufgelistet. Mit diesen 6-stelligen Hexadezimalzahlen sind verschiedene Farben darstellbar. Für die farbige Gestaltung von Texten läßt der Browser aber nur 216 Farbkombinationen zu - das sind die sogenannten "sicheren Farben". Es gibt spezielle Software, die dafür sorgt, dass nur sichere Farbcodes erzeugt werden. Farbe weiss grau schwarz orange rot dunkelrot hellblau blau dunkelblau grün dunkelgrün braun Nummer #FFFFFF # # #FF6633 #EE0000 #BB0000 #0099FF #0000FF # # # # Festlegung der Farbe für Hintergrund, Text und HotText Die Farbangabe erfolgt im BODY-Tag. <BODY BGCOLOR=#xxxxxx TEXT =#yyyyyy LINK=#zzzzzz ALINK=#uuuuuu VLINK = vvvvvv> Dabei müssen nicht alle Parameter benutzt sein. #xxxxxx bis #vvvvvv sollen hier die Farbnummer symbolisieren. Durch BGCOLOR wird eine Farbe für den Hintergrund eingestellt. Die sollte man auch dann eingeben, wenn man ein Hintergrundbild lädt. Solange das Bild für den Hintergrund noch geladen wird, sieht man nämlich die leere Seite, auf der sich möglicherweise schon hellgelbe Schrift auf grauen Untergrund befindet. Bevor die endgültige Hintergrundgrafik geladen ist, hat sich der Surfer vielleicht schon angeekelt weggeklickt. Innerhalb des weiteren Skripts kann die Textfarbe jederzeit wieder verändert werden mit: <FONT COLOR = #XXXXXX> Man sollte sogar die Standardfarbe Schwarz für Texte bei Bedarf angeben, da es sein kann, dass in den Voreinstellungen des jeweiligen Browsers begeisterte User als Darstellungsfarbe Rosa gewählt haben. Es gilt: Die Farbe die ganz bestimmt erscheinen soll muss auch angegeben werden. Jede Farbangabe verliert ihr Bedeutung nach Abschluß eines HTML- Abschnitts. Teste das selbst an deiner letzten HTML-Datei. Seite 14

15 Auch bei Farbfestlegungen gibt es einige Fallen: Es soll zum Beispiel eine Überschrift der Größe H1 farbig gesetzt werden: Betrachte folgende Varianten und probiere sie aus: Version 1: Version 2: <H1> <FONT COLOR = #FF0000> Dies ist eine Titelzeile </H1> <FONT COLOR=#FF0000> <H1> Dies ist eine Titelzeile </H1> Version 3: <FONT COLOR=#FF0000> <H1> Dies ist eine Titelzeile </H1> <FONT COLOR= #FF0000> Die Farbe für Hyperlinks und Anker wird mit Ein bereits besuchter LINK wird durch <LINK=#xxxxxx> gesetzt. <VLINK = #yyyyyy> gekennzeichnet ( dabei ist VLINK der schon besuchte LINK also "visited" ) Der gerade geklickte LINK wird - solange der Mauspfeil darüber steht und die Maustaste gedrückt ist in einer neuen Farbe gezeigt, die mit <ALINK = #zzzzzz> festgelegt wird ( dabei ist ALINK der gerade aktivierte LINK) Weitere Formatierungsbefehle Bekannt ist ja schon der <PRE> </PRE> TAG, der Zeilenumbrüche erhält, die man aus einem normalen Textprogramm übernommen hat. Weitere TAGS zur Formatierung: TAG ENDTAG Beschreibung 0 <HR> <MARQUEE> </HR> </MARQUEE> Erzeugt eine Trennlinie. Beispiel <HR width=200 size=4> oder <HR width = 400 noshade size=2> (noshade erzeugt eine klare Linie ) Erzeugt einen scrollenden Text. Attribute sind bgcolor=#xxxxxx direction rigth oder left scrollamount = Anzahl der Pixel um die gescrollt wird, scrolldelay = Verzögerung in Millisekunden NUR im INTERNET EXPLORER Seite 15

16 TAG ENDTAG Beschreibung 0 <BIG> <BLINK> <CENTER> <MULTICOL> <P align = > </BIG> </BLINK> Text wird in Netscape blinkend ausgegeben. </CEN- TER> </Multicol> </P> Der nachfolgende Text wird um eine Stufe grösser dargestellt. Die Inhalt der ganzen Seite wird zentriert ( mittig ) ausgegeben. Erzeugt in Netscape einen mehrspaltigen Text. z.b <MULTICOL COLS=2> erzeugt einen 2-spaltigen Text. <P align = right > oder <P align = left > oder <P align=center> oder <P align=justify> stellt rechtsbündig, linksbündig, oder centriert ein. Gilt auch für Grafiken Aufgabe: Arbeite mit einer deiner letzten HTML-Dateie. Füge einige waagerechte Trennlinien in die Seite ein. Stelle einige Textteile rechtsbündig oder zentriert dar. Versuche, einen zweispaltigen Text zu erzeugen. Teste den <BLINK> TAG und den <BIG> TAG. Da alle Browser bei einer Kette von Leerzeichen immer nur das erste Leerzeichen erkennen, ist es nicht möglich Textzeilen ohne Weiteres einzurücken, um etwa ein Zitat darzustellen. Man kann Leerzeichen mit erzwingen oder der Tag erledigt das. <BLOCKQUOTE> mit dem Endtag </BLOCKQUOTE> Wenn man auf seiner Seite eine Liste - etwa ein Inhaltsverzeichnis - anlegen möchte, dann hat man dafür folgende Möglichkeiten: Der Tag <UL> erzeugt eine unsortierte Liste die eine Einrückung mit Symbolen erzeugt. Der Tag <OL> erzeugt eine ordentliche Liste, in der die Zeilen automatisch durchnumerieret sind. Die einzelnen Zeilen der Listen werden mit dem Tag <LI> erzeugt und in der unsortierten Liste kann das passende Symbol mit <LI TYPE= Square> oder <LI TYPE = Circle> angepasst werden. Die Numerierung einer sortierten Liste kann in arabischen Ziffern erfolgen (1,2,3,4...) oder in römischen Ziffern ( I,II,III,iV...) oder mit Buchstaben (A,B,C,D,...). Erreichen kann man das mit: <LI TYPE= a VALUE =3> kleine Buchstaben ab Buchstabe c <LI TYPE= I> Liste mit römischen Ziffern <LI TYPE= 1 VALUE = 10> 10 Zahlen beginnend mit 1 Seite 16

17 Ein Beispiel zum Nachlesen und ändern: Das nachfolgende Beispiel zeigt einige der oben erwähnten Befehle und es zeigt auch einige Syntaxfeinheiten, die oben nicht erklärt worden sind. <!Ein kleines Beispiel> <html> <body bgcolor="#cccccc"> <! Beginn des Body tags > <center><h1><font color="#ff0016"> Dies ist die Überschrift </font></h1></center> Ein Beispiel für eine Einrückung: <blockquote> Dieser Text ist in zwei Zeilen eingerückt<br> Es könnte zum Beispiel ein Zitat sein </blockquote> Nun kommt ein wenig <font color="#3048ff">farbiger Text bis zum nächsten TAG</font> <br> <br> <PRE> <P align=right> Dies sind einige Zeilen eines rechtsbündigen Textes. Weil ich faul bin habe ich die Zeilenumbrüche mit dem </P> </PRE> <BR><font size=+1>nun müssen einige Listen oder Inhaltsverzeichnisse kommen</font> <ul> <li TYPE="square"> Die erste Zeile der Liste mit kleinem Quadrat</li> <li TYPE="square"> Die zweite Zeile</li> <h3> Die dritte Zeile</h3> <li TYPE="square"> <font size=+1> Die letzte Zeile mit big größer gemacht </font></li> </ul> <h4> <font size=+1>nun eine ordentliche Liste</font></H4> <ol><li><font size=+1>die erste Zeile hat kein Attribut im Tag</font></li> <li TYPE="a" Value="3"> <font size=+1> hier beginnt die Aufzählung mit dem kleinen c </font></li> <li><font size=+1>jetzt keine weiteren Attribute</font></li> <li> <font size=+1>und auch in dieser Zeile nicht</font></li> </ol> </body> <! Ende von Body > </html> Das Ergebnis sieht dann im Browser schon fast so aus, wie es mal sein soll. (siehe nächste Seite ) Seite 17

18 Was soll nun als nächstes mit den bis jetzt erstellten HTML-Beispielen geschehen? Es stört besonders die Einbindung von Grafiken in den Text. Es ist bisher kein brauchbarer Textfluss möglich. Es erscheint nur eine Zeile neben einem Bild. Die Gesamtaufteilung der Seite lässt sehr zu wünschen übrig. Es wäre nun an der Zeit, hier ein Beispiel durchzuarbeiten, dass sich mit diesen Layoutproblemem befasst. Eine besonders elegante Möglichkeit ist dabei der Einsatz von Tabellen oder von mehrspaltigen Layouts. Seite 18

19 Tabellen - der erste Schritt zu besseren Layouts Zum Erzeugen einer Tabelle in HTML bedarf es nur weniger Befehle: <TABLE> erzeugt die Tabelle <TR> erzeugt eine einzelne Zeile in der Tabelle <TD> erzeugt die einzelnen Einträge in einer Zeile </TD> Eintrag Ende </TR> Zeile Ende <TABLE> Tabelle Ende Beim TABLE - und beim TD-TAG kann man mit BGCOLOR=#xxxxxx noch eine Hintergrundfarbe zuweisen oder mit BACKGROUND=name.format (.jpg oder.gif) eine Grafik zuweisen. Der TABLE -Tag kann noch Informationen über den Textabstand enthalten CELLPADDING=Pixelanzahl, über die Rahmendicke CELLSPACING=Pixelzahl und über die Darstellung eines Randes mit dem Attribut BORDER. An einem Beispiel ist das am leichtesten zu sehen: <HTML> <CENTER> <BODY bgcolor=#cccccc> <TABLE CELLPADDING=6 BORDER BGCOLOR=#FFFFFF> <FONT SIZE=4><FONT FACE = Times> <TR> <!Die erste zeile der Tabelle > <TD> </TD> <!Hinweis: gibt Leerzeichen aus > <TD> Montag </TD> <TD> Dienstag </TD> <TD> Mittwoch </TD> <TD> Donnerstag </TD> <TD> Freitag </TD> </TR> <! Erste Zeile fertig> <TR> <! Zweite Zeile > <TD BGCOLOR =#FFFFAA> 1. </TD> <TD> G1 </TD> <TD> G3 </TD> <TD> G6 </TD> <TD> L2 </TD> <TD> L3 </TD> </TR> <!Zweite Zeile fertig> <TR> <! Dritte Zeile > <TD BGCOLOR =#FFFFAA> 2. </TD> <TD> G1 </TD> <TD> G3 </TD> <TD> G6 </TD> <TD> L2 </TD> <TD> L3 </TD> </TR> <!Dritte Zeile fertig> <TR> <! Vierte Zeile > <TD BGCOLOR =#FFFFAA> 3. </TD> <TD> G10 </TD> <TD> G7 </TD> <TD> L1 </TD> <TD> G1 </TD> <TD> G5 </TD> </TR> <!Vierte Zeile fertig> </TABLE> </BODY> </HTML> Seite 19

20 Wie man sieht, ist das ein kleiner Ausschnitt aus einem Stundenplan geworden. Der Programmtext war leicht zu realisieren, den mit Kopieren und Einsetzen waren ganze Abschnitte schnell verdoppelt. (Dieses Beispiel stammt im Prinzip aus: M.Hilscher SmartBooks HTML-Kurs, Kilchber 1999) Aufgabe: Besorge dir Bilder von Schachfiguren oder erzeuge selbst welche. Die Größe der Bilder ist etwa 50x50 Pixel. Baue ein Schachbrett als Tabelle auf. Sorge dafür, dass die Felder passende farbige Hintergründe haben. Denke auch daran, dass leere Tabellenfelder mir dem Inhalt erzeugt werden. Seite 20

21 Texte und Bilder Für das folgende Beispiel ist etwa eine halbe Seite Text und ein kleines Bild nötig. Ein passendes Bild wird sich schon irgendwo auf der Festplatte finden. Es wird im jpg-format gebracht und der Text kann irgendwo hergenommen werden. Ein Teil des HTML-Codes soll dann wie folgt aussehen:... <TABLE WIDTH=600> <TR><TD> <FONT FACE = Geneva><P ALIGN=justify><FONT SIZE =5>... Hier stehen einige Zeilen des Textes in voller Bildschirmbreite. Also ohne <BR>. <BR><BR> <IMG SRC= name_des_bildes.jpg witdth=100 height=150 align = right alt = Testbild>... Hier nun der Text, der links um das Bild herumlaufen soll... </TD></TR></TABLE> Wenn du dieses Beispiel ausprobiert hast, hast du etwa folgendes Bild erhalten: Das überraschende ist, dass es nur eine Tabellenzelle ist, die definiert wurde. Der entscheidende Befehl, der das Umfließen möglich macht, ist im IMG-TAG das align=right Attribut. Ändere gleich den Code noch einmal so um, dass das Bild auf der linken Seite steht. Eine besondere Eigenart von Tabellenzeilen ist es, den Inhalt der Zellen in der Höhe zu zentrieren. Das sieht manchmal recht schlecht aus und soll verbessert werden. Das geht mit einem Attribut in dem <TD>-Tag : <TD valign=top> richtet oben aus <TD valign= Bottom > richtet unten aus Mit dem Attribut BORDER ( oben schon einmal erwähnt) lassen sich die Tabellen recht ansehnlich gestalten. Seite 21

22 Tippe folgendes kleines Beispiel ein: <html>...<head>...<title>tabellentest</title>...</head>...<body bgcolor="#ffffff">......<table border="4" cellpadding="0" cellspacing="2" width="540"> <tr> <td bgcolor="#ffff99"> <center> <h1>dies ist eine Überschrift</h1> </center> </td> </tr> <! Ende der ersten Zeile> <tr> <! Hier Beginn der zweiten Zeile > <td valign="top" bgcolor="#ffffcc"> <! NUN DER TRICK: TABELLE IN EINER ZELLE DER TABELLE > <table border="0" cellpadding="0" cellspacing="2" width="539"> <tr> <td width="170" valign="top"> Dies ist ein kleiner Textder in der linken Spalte steht</td> <td valign="top"> Dies wird ein grösserer Text der in der mittleren Spalte steht Dies wird ein gr& ouml;sserer Text der in der mittleren Spalte stehtdies wird ein grösserer Text der in der mittleren Spalte steht <p>hier beginnt ein neuer Absatz</td> <td width="170" valign="top"> und dies ist der Text ganz rechts</td> </tr> </table> </td> </tr>......</table>...</body> </html> Seite 22

23 So wie nebenstehend, sollte das Ergebnis aussehen. Weitere Möglichkeiten der Layoutgestaltung Tabellengrößen können prozentual vorgegeben werden. Tabellengrössen können sich ( wie waagerechte Trennlinien auch ) prozentual an die vorhandene Bildschirmbreite anpassen. Wird im Tag die Breite mit dem %-Zeichen versehen, passt sich die Tabelle dieser Angabe an. <TABLE width=75%>...</table> erzeugt also eine Tabelle, die immer ( auch bei Verkleinerung des Browserfensters) 75% derbreite einnimmt. Zentrieren einer Grafik oder eines Textes mit Hilfe einer Tabelle Möchte man eine Startseite so erstellen, dass auf ihr z.b. eine Schrift oder eine Grafik genau in der Mitte des Browserfensters erscheint, egal wie gross das auch sein mag, dann geht das auf folgende Weise:... <BODY Background=irgendeinBild.jpg>...<TABLE Height=100% width=100%>......<tr>......<td><center> <img SRC=nettesBild.jpg><BR> <FONT FACE=Geneva> <H2> Eine Titelschrift </H2> </FONT> </CENTER>......</TD> Seite 23

24 ......</TR>...</TABLE> </BODY>... Probiere ein passendes Beispiel aus. Grafiken, Banner, Icons und Animationen Wenn Grafiken in einer Webseite erscheinen, muss man sich über deren Grösse zuerst Gedanken machen. Abgesehen vom Speicherplatz einer Grafikdatei ( siehe weiter oben) ist auch zu bedenken, dass viele Surfer keinen 20 Zoll Bildschirm zur Verfügung und daher möglicherweise nur ca. 800 x 600 Bildpunkte ohne zu scrollen sehen können, weil für Menüleisten, Leisten des Browsers, seitlche Fensterrahmen e.t.c Platz am Bildschirm verloren geht. Daher eine Faustregel für Bilder: Bitte nie größer als 800x600 Pixel. Wenn eine Grafik ( eine kleine nennt man gerne ICON) als Link verwendet werden soll ( und das findet man sehr oft auf Webseiten) dann geht das so ähnlich, wie bei den Worten, die als Link verwendet werden. <A HREF= linkziel> <IMG SRC=nettesBild.format width=xx heigth=yy alt=passende_bezeichnung> Der Rahmen eines Bildes, das als Linkk gedacht ist, wird durch den Befehl BORDER erzeugt. Leider ist Border=1 voreingestellt. Das ergibt einen schwarzen Rand um das Bild herum, der oft unerwünscht ist. Will man das verhindern, muss man Border=0 einsetzen. Damit sieht der Tag dann wie folgt aus: <A HREF= linkziel> <IMG SRC=nettesBild.format width=xx heigth=yy Border=0 alt= passende_bezeichnung> Aufgabe Öffne noch einmal dein Beispiel, dass zwei Seiten miteinander verbunden hat. In mindestens einer der Seiten wird ein Bild sein. Mache daraus einen Link, wie hier beschrieben und probiere das alles dann im Browser aus. Du wirst feststellen, dass sich der Mauspfeil in eine Hand verwandelt, wenn du in das Bild hineinkommst. Text umfließt Bild Das gab es schon einmal weiter oben. Hier noch mal in der Zusammenschau: <IMG SRC...align=right> Text links, Bild rechts <IMG SRC...align=left> Text rechts, Bild links <IMG SRC...align=Top> Text neben der Grafik beginnt oben <IMG SRC...align=Bottom> Text neben der Grafik beginnt unten <IMG SRC...align=Middle> Text neben der Grafik beginnt mittig Seite 24

25 Beim Umfliessen der Grafik kann man durch die Angabe von HSPACE= xx im IMG-TAG noch beeinflussen, wie dicht der Text am Bild vorbeifließt. Und nicht zu vergessen ist der Ausrichtungstag <P align=justify>...</p>, der dafür sorgt, dass der Text mit einer Bestimmten Ausrichtung am Bild vorbeiläuft. (siehe oben). Viele Bilder aus der gleichen Bilddatei beziehen Es ist manchmal sehr gut anzusehen, wenn auf eine Seite mehrere Bilder mit dem gleichen Motiv aber in unterscheidlicher Größe auftauchen. Das folgende Beispiel zeigt eine solche Konstruktion. Zusätzlich will ich dieses Beispiel nutzen, um einen empfehlenswerten Weg zur Erzeugung des Scripts zu zeigen. <HTML>...<HEAD>...<TITLE> </TITLE>...</HEAD>...<BODY>...</BODY> </HTML> 1 <HTML>...<HEAD> 2...<TITLE> GRAFIK </TITLE>...</HEAD>...<BODY bgcolor=#ffffff>...</body> </HTML> <HTML>...<HEAD> 3 <HTML>...<HEAD> 4...<TITLE> GRAFIK </TITLE>...</HEAD>...<TITLE> GRAFIK </TITLE>...</HEAD>...<BODY bgcolor=#ffffff>...<table>...<tr>...</tr>...</table>...</body> </HTML>...<BODY bgcolor=#ffffff>...<table>...<tr>...<td> </TD>...<TD> </TD>...<TD> </TD>...<TD> </TD>...<TD> </TD>...</TR>...</TABLE>...</BODY> </HTML> Zu Beginn ( 1) werden nur die öffnenden und schließenden TAGs gesetzt. Dann wird immer weiter verfeinert. Dabei werden wieder die TAGS komplett gesetzt (2) Seite 25

26 Dann wird hier im BODY der Tabellentag eingebaut (3) und dort wird mit <TR> und </TR> die erste Zeile gesetzt. In der ersten Zeile sollen dann offensichtlich 5 Zellen entstehen, die ich jeweils mit <TD> und </TD> erzeuge. Bis hierher sind als einzige Attribute nur der Titel und die Hintergrundfarbe festgelegt worden. Nun geht es erst daran die Inhalte der einzelnen Zellen anzugeben. In diesem Fall werden es Bilder sein, die alle der selben SRC-Datei entstammen ( benutze eine deiner Grafiken ). Es reicht dem Browser dann aus, diese Grafik einmal zu laden. Das Neuberechnen der Größe erfolgt dann so schnell, dass es kaum auffällt. <HTML>...<HEAD>......<TITLE> GRAFIK </TITLE>...</HEAD>...<BODY bgcolor=#ffffff>...<table>...<tr>...<td>.<img SRC="End01.jpg" width=50 heigth=80> </TD>...<TD>.<IMG SRC="End01.jpg" width=100 heigth=160> </TD>...<TD>.<IMG SRC="End01.jpg" width=120 heigth=200> </TD>...<TD>.<IMG SRC="End01.jpg" width=50 heigth=80> </TD>...<TD>.<BR><BR><BR><BR><IMG SRC="End01.jpg" width=25 heigth=40 >...</TD>...</TR>...</TABLE>...</BODY> </HTML> Das ist bis hierher nur ein knapper und einfacher Einstieg in HTML. Viele Einsatzmöglichkeiten von Tabellen, Frames und auch Javascript sind hier nicht erörtert. Nun kann man aber sicher selbst weiterarbeiten, wenn man sich die nötigen Informationen besorgt. Eine beliebte Informationsquelle ist dabei Hier findet man zu fast allen Fragen rund um HTML passende Antworten. Seite 26

27 Seite NV!

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

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

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

Mehr

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

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

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

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

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

Viele Bilder auf der FA-Homepage

Viele Bilder auf der FA-Homepage Viele Bilder auf der FA-Homepage Standardmäßig lassen sich auf einer FA-Homepage nur 2 Bilder mit zugehörigem Text unterbringen. Sollen es mehr Bilder sein, muss man diese als von einer im Internet

Mehr

Um in das Administrationsmenü zu gelangen ruft Ihr Eure Seite auf mit dem Zusatz?mod=admin :

Um in das Administrationsmenü zu gelangen ruft Ihr Eure Seite auf mit dem Zusatz?mod=admin : WebsoziCMS 2.8.9 Kurzanleitung Stand: 10.04.2008 Andreas Kesting Diese Kurzanleitung zum WebsoziCMS 2.8.9 beschränkt beschränkt sich auf die häufigsten Tätigkeiten beim Administrieren Eurer Homepage: -

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

Mediator 9 - Lernprogramm

Mediator 9 - Lernprogramm Mediator 9 - Lernprogramm Ein Lernprogramm mit Mediator erstellen Mediator 9 bietet viele Möglichkeiten, CBT-Module (Computer Based Training = Computerunterstütztes Lernen) zu erstellen, z. B. Drag & Drop

Mehr

Zahlen auf einen Blick

Zahlen auf einen Blick Zahlen auf einen Blick Nicht ohne Grund heißt es: Ein Bild sagt mehr als 1000 Worte. Die meisten Menschen nehmen Informationen schneller auf und behalten diese eher, wenn sie als Schaubild dargeboten werden.

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

Einführung in Powerpoint M. Hasler 2010. Wie erstelle ich eine Präsentation mit Powerpoint? - Eine Kurzanleitung

Einführung in Powerpoint M. Hasler 2010. Wie erstelle ich eine Präsentation mit Powerpoint? - Eine Kurzanleitung Wie erstelle ich eine Präsentation mit Powerpoint? - Eine Kurzanleitung 1 Als erstes musst du wissen, was du präsentieren willst logisch - sonst bleiben deine Folien ohne Inhalt. Vielleicht willst du die

Mehr

Pfötchenhoffung e.v. Tier Manager

Pfötchenhoffung e.v. Tier Manager Pfötchenhoffung e.v. Tier Manager A.Ennenbach 01.08.2015 Tier Manager Inhalt Administrationsbereich Tiere auflisten & suchen Tier hinzufügen Tier bearbeiten (Status ändern, etc.) Administrationsbereich

Mehr

HTML ist eine Auszeichnungssprache / Seitenbeschreibungssprache, mit der es möglich ist Internetseiten zu gestalten.

HTML ist eine Auszeichnungssprache / Seitenbeschreibungssprache, mit der es möglich ist Internetseiten zu gestalten. HTML HTML ist eine Auszeichnungssprache / Seitenbeschreibungssprache, mit der es möglich ist Internetseiten zu gestalten. Hierfür bedient man sich sog. Tags zur Darstellung und Beschreibung einer Internetseite

Mehr

Flyer, Sharepics usw. mit LibreOffice oder OpenOffice erstellen

Flyer, Sharepics usw. mit LibreOffice oder OpenOffice erstellen Flyer, Sharepics usw. mit LibreOffice oder OpenOffice erstellen Wir wollen, dass ihr einfach für eure Ideen und Vorschläge werben könnt. Egal ob in ausgedruckten Flyern, oder in sozialen Netzwerken und

Mehr

Tipps und Tricks zu den Updates

Tipps und Tricks zu den Updates Tipps und Tricks zu den Updates Grundsätzlich können Sie Updates immer auf 2 Wegen herunterladen, zum einen direkt über unsere Internetseite, zum anderen aus unserer email zu einem aktuellen Update. Wenn

Mehr

Kapitel 4 Tabellen Seite 1. Nun wirst du eine Tabelle erstellen und ein wenig über deren Aufbau lernen.

Kapitel 4 Tabellen Seite 1. Nun wirst du eine Tabelle erstellen und ein wenig über deren Aufbau lernen. Kapitel 4 Tabellen Seite 1 4 Tabellen Nun wirst du eine Tabelle erstellen und ein wenig über deren Aufbau lernen. Abbildung 4.1: Link auf eine Seite mit Tabelle Wie Abbildung 4.1 zeigt, soll der Benutzer

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

1. Trennlinie mit hr Eine dünne Trennlinie wie die obige in der Regio-Farbe (gelb) kann man recht einfach erstellen. Dafür reicht der Befehl

1. Trennlinie mit hr Eine dünne Trennlinie wie die obige in der Regio-Farbe (gelb) kann man recht einfach erstellen. Dafür reicht der Befehl Bilder bearbeiten In diesem Artikel geht es um Bilder im Backoffice, Bildformate, Trennlinien, Rahmen, das Ändern von Bildunterschriften, ein Grafik-Programm und einiges mehr in Sachen Grafik. Hierzu diese

Mehr

Satzhilfen Publisher Seite Einrichten

Satzhilfen Publisher Seite Einrichten Satzhilfen Publisher Seite Einrichten Es gibt verschiedene Möglichkeiten die Seite einzurichten, wir fangen mit der normalen Version an, Seite einrichten auf Format A5 Wählen Sie zunächst Datei Seite einrichten,

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

Wie halte ich Ordnung auf meiner Festplatte?

Wie halte ich Ordnung auf meiner Festplatte? Wie halte ich Ordnung auf meiner Festplatte? Was hältst du von folgender Ordnung? Du hast zu Hause einen Schrank. Alles was dir im Wege ist, Zeitungen, Briefe, schmutzige Wäsche, Essensreste, Küchenabfälle,

Mehr

Zwischenablage (Bilder, Texte,...)

Zwischenablage (Bilder, Texte,...) Zwischenablage was ist das? Informationen über. die Bedeutung der Windows-Zwischenablage Kopieren und Einfügen mit der Zwischenablage Vermeiden von Fehlern beim Arbeiten mit der Zwischenablage Bei diesen

Mehr

Eigene Dokumente, Fotos, Bilder etc. sichern

Eigene Dokumente, Fotos, Bilder etc. sichern Eigene Dokumente, Fotos, Bilder etc. sichern Solange alles am PC rund läuft, macht man sich keine Gedanken darüber, dass bei einem Computer auch mal ein technischer Defekt auftreten könnte. Aber Grundsätzliches

Mehr

Anleitung über den Umgang mit Schildern

Anleitung über den Umgang mit Schildern Anleitung über den Umgang mit Schildern -Vorwort -Wo bekommt man Schilder? -Wo und wie speichert man die Schilder? -Wie füge ich die Schilder in meinen Track ein? -Welche Bauteile kann man noch für Schilder

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

Handbuch Fischertechnik-Einzelteiltabelle V3.7.3

Handbuch Fischertechnik-Einzelteiltabelle V3.7.3 Handbuch Fischertechnik-Einzelteiltabelle V3.7.3 von Markus Mack Stand: Samstag, 17. April 2004 Inhaltsverzeichnis 1. Systemvorraussetzungen...3 2. Installation und Start...3 3. Anpassen der Tabelle...3

Mehr

Erstellen einer Collage. Zuerst ein leeres Dokument erzeugen, auf dem alle anderen Bilder zusammengefügt werden sollen (über [Datei] > [Neu])

Erstellen einer Collage. Zuerst ein leeres Dokument erzeugen, auf dem alle anderen Bilder zusammengefügt werden sollen (über [Datei] > [Neu]) 3.7 Erstellen einer Collage Zuerst ein leeres Dokument erzeugen, auf dem alle anderen Bilder zusammengefügt werden sollen (über [Datei] > [Neu]) Dann Größe des Dokuments festlegen beispielsweise A4 (weitere

Mehr

In dem unterem Feld können Sie Ihre E-Mail eintragen, wenn sie im System hinterlegt wurde. Dann wird Ihnen Ihr Passwort noch einmal zugeschickt.

In dem unterem Feld können Sie Ihre E-Mail eintragen, wenn sie im System hinterlegt wurde. Dann wird Ihnen Ihr Passwort noch einmal zugeschickt. Wyhdata Hilfe Login: www.n-21online.de (Login Formular) Ihr Login-Name: Hier tragen Sie Redak1 bis Redak6 ein, der Chefredakteur bekommt ein eigenes Login. Ihr Passwort: Eine Zahlenkombination, die vom

Mehr

Bilder zum Upload verkleinern

Bilder zum Upload verkleinern Seite 1 von 9 Bilder zum Upload verkleinern Teil 1: Maße der Bilder verändern Um Bilder in ihren Abmessungen zu verkleinern benutze ich die Freeware Irfan View. Die Software biete zwar noch einiges mehr

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

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

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

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

Windows. Workshop Internet-Explorer: Arbeiten mit Favoriten, Teil 1

Windows. Workshop Internet-Explorer: Arbeiten mit Favoriten, Teil 1 Workshop Internet-Explorer: Arbeiten mit Favoriten, Teil 1 Wenn der Name nicht gerade www.buch.de oder www.bmw.de heißt, sind Internetadressen oft schwer zu merken Deshalb ist es sinnvoll, die Adressen

Mehr

TESTEN SIE IHR KÖNNEN UND GEWINNEN SIE!

TESTEN SIE IHR KÖNNEN UND GEWINNEN SIE! 9 TESTEN SIE IHR KÖNNEN UND GEWINNEN SIE! An den SeniorNETclub 50+ Währinger Str. 57/7 1090 Wien Und zwar gleich in doppelter Hinsicht:!"Beantworten Sie die folgenden Fragen und vertiefen Sie damit Ihr

Mehr

Handbuch ECDL 2003 Basic Modul 5: Datenbank Access starten und neue Datenbank anlegen

Handbuch ECDL 2003 Basic Modul 5: Datenbank Access starten und neue Datenbank anlegen Handbuch ECDL 2003 Basic Modul 5: Datenbank Access starten und neue Datenbank anlegen Dateiname: ecdl5_01_02_documentation_standard.doc Speicherdatum: 14.02.2005 ECDL 2003 Basic Modul 5 Datenbank - Access

Mehr

Wordpress: Blogbeiträge richtig löschen, archivieren und weiterleiten

Wordpress: Blogbeiträge richtig löschen, archivieren und weiterleiten Wordpress: Blogbeiträge richtig löschen, archivieren und weiterleiten Version 1.0 Wordpress: Blogbeiträge richtig löschen, archivieren und weiterleiten In unserer Anleitung zeigen wir Dir, wie Du Blogbeiträge

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

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

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

Anleitung zur Erstellung von Serienbriefen (Word 2003) unter Berücksichtigung von Titeln (wie Dr., Dr. med. usw.)

Anleitung zur Erstellung von Serienbriefen (Word 2003) unter Berücksichtigung von Titeln (wie Dr., Dr. med. usw.) Seite 1/7 Anleitung zur Erstellung von Serienbriefen (Word 2003) unter Berücksichtigung von Titeln (wie Dr., Dr. med. usw.) Hier sehen Sie eine Anleitung wie man einen Serienbrief erstellt. Die Anleitung

Mehr

Unperfekthaus-Tutorial: Wordpress

Unperfekthaus-Tutorial: Wordpress Unperfekthaus-Tutorial: Wordpress Teilweise werden im Unperfekthaus Seiten mit Wordpress realisiert. Diese Anleitung ist für alle gedacht, die diese Seiten bearbeiten und dort Neuigkeiten posten dürfen

Mehr

Anleitung für Autoren auf sv-bofsheim.de

Anleitung für Autoren auf sv-bofsheim.de Anleitung für Autoren auf sv-bofsheim.de http://www.sv-bofsheim.de 1 Registrieren als Benutzer sv-bofsheim.de basiert auf der Software Wordpress, die mit einer Erweiterung für ein Forum ausgestattet wurde.

Mehr

Diese Anleitung wurde erstellt von Niclas Lüchau und Daniel Scherer. Erste Anmeldung. Schritt 1: Anmeldung..2. Schritt 2: Passwort setzen 3

Diese Anleitung wurde erstellt von Niclas Lüchau und Daniel Scherer. Erste Anmeldung. Schritt 1: Anmeldung..2. Schritt 2: Passwort setzen 3 Diese Anleitung wurde erstellt von Niclas Lüchau und Daniel Scherer Inhalt Erste Anmeldung. Schritt 1: Anmeldung..2 Schritt 2: Passwort setzen 3 Schritt 3: Nachträgliches Ändern des Passworts..4 Schreiben

Mehr

S/W mit PhotoLine. Inhaltsverzeichnis. PhotoLine

S/W mit PhotoLine. Inhaltsverzeichnis. PhotoLine PhotoLine S/W mit PhotoLine Erstellt mit Version 16.11 Ich liebe Schwarzweiß-Bilder und schaue mir neidisch die Meisterwerke an, die andere Fotografen zustande bringen. Schon lange versuche ich, auch so

Mehr

Datei Erweiterungen Anzeigen!

Datei Erweiterungen Anzeigen! Einleitung Beim Kauf eines PCs werden die Dateierweiterungen sowie einige Dateien nicht angezeigt. Grund: Es gibt sehr viele Dateien die für das System ganz wichtig sind. Diese Dateien und auch Ordner

Mehr

Einführungskurs MOODLE Themen:

Einführungskurs MOODLE Themen: Einführungskurs MOODLE Themen: Grundlegende Einstellungen Teilnehmer in einen Kurs einschreiben Konfiguration der Arbeitsunterlagen Konfiguration der Lernaktivitäten Die Einstellungen für einen Kurs erreichst

Mehr

AutoTexte und AutoKorrektur unter Outlook verwenden

AutoTexte und AutoKorrektur unter Outlook verwenden AutoTexte und AutoKorrektur unter Outlook verwenden Die Hilfsmittel "AutoKorrektur" und "AutoTexte", die schon unter Microsoft Word das Arbeiten erleichtern, sind natürlich auch unter Outlook verfügbar.

Mehr

Jederzeit Ordnung halten

Jederzeit Ordnung halten Kapitel Jederzeit Ordnung halten 6 auf Ihrem Mac In diesem Buch war bereits einige Male vom Finder die Rede. Dieses Kapitel wird sich nun ausführlich diesem so wichtigen Programm widmen. Sie werden das

Mehr

Arbeiten mit UMLed und Delphi

Arbeiten mit UMLed und Delphi Arbeiten mit UMLed und Delphi Diese Anleitung soll zeigen, wie man Klassen mit dem UML ( Unified Modeling Language ) Editor UMLed erstellt, in Delphi exportiert und dort so einbindet, dass diese (bis auf

Mehr

Erstellen eines Beitrags auf der Homepage Schachverband Schleswig-Holstein - Stand vom 01.06.2015

Erstellen eines Beitrags auf der Homepage Schachverband Schleswig-Holstein - Stand vom 01.06.2015 Erstellen eines Beitrags auf der Homepage Einleitung... 3 01 Startseite aufrufen... 4 02 Anmeldedaten eingeben... 5 03 Anmelden... 6 04 Anmeldung erfolgreich... 7 05 Neuen Beitrag anlegen... 8 06 Titel

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

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-Tags zur Gestaltung von Informationen im Redaktionssystem SixCMS. Handbuch für Webredakteure

HTML-Tags zur Gestaltung von Informationen im Redaktionssystem SixCMS. Handbuch für Webredakteure s zur Gestaltung von Informationen im Redaktionssystem SixCMS Handbuch für Webredakteure V 0.1 Stand: 17.12.2003 Ministerium des Innern Webredaktion Seite 2 von 14 Inhaltsübersicht s zur Gestaltung von

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

Anton Ochsenkühn. amac BUCH VERLAG. Ecxel 2016. für Mac. amac-buch Verlag

Anton Ochsenkühn. amac BUCH VERLAG. Ecxel 2016. für Mac. amac-buch Verlag Anton Ochsenkühn amac BUCH VERLAG Ecxel 2016 für Mac amac-buch Verlag 2 Word-Dokumentenkatalog! Zudem können unterhalb von Neu noch Zuletzt verwendet eingeblendet werden. Damit hat der Anwender einen sehr

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

Kapitel 3 Bilder farblich verändern - Arbeiten mit Objekten

Kapitel 3 Bilder farblich verändern - Arbeiten mit Objekten Nahezu auf jedem Buchcover, CD Hülle oder auf den Werbeseiten in Zeitschriften und Magazinen, sehen Sie fast ausschließlich Bilder, die mit einem EBV Programm einen sogenannten künstlerischen Touch erhalten

Mehr

Outlook. sysplus.ch outlook - mail-grundlagen Seite 1/8. Mail-Grundlagen. Posteingang

Outlook. sysplus.ch outlook - mail-grundlagen Seite 1/8. Mail-Grundlagen. Posteingang sysplus.ch outlook - mail-grundlagen Seite 1/8 Outlook Mail-Grundlagen Posteingang Es gibt verschiedene Möglichkeiten, um zum Posteingang zu gelangen. Man kann links im Outlook-Fenster auf die Schaltfläche

Mehr

Der transparente Look. Die Struktur, die oben angegeben wurde, ist im Anwendungsdesigner, wie in der nächsten Grafik ersichtlich, abgebildet.

Der transparente Look. Die Struktur, die oben angegeben wurde, ist im Anwendungsdesigner, wie in der nächsten Grafik ersichtlich, abgebildet. Intrapact Layout Allgemeines Das Layout einer Firma wird im Intrapact Manager, und dort im Layout Designer erstellt. Alle Eingaben im Layout Designer dienen dazu um die CSS/ASP Dateien zu generieren, die

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

Kurzanleitung für eine erfüllte Partnerschaft

Kurzanleitung für eine erfüllte Partnerschaft Kurzanleitung für eine erfüllte Partnerschaft 10 Schritte die deine Beziehungen zum Erblühen bringen Oft ist weniger mehr und es sind nicht immer nur die großen Worte, die dann Veränderungen bewirken.

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

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

Enigmail Konfiguration

Enigmail Konfiguration Enigmail Konfiguration 11.06.2006 Steffen.Teubner@Arcor.de Enigmail ist in der Grundkonfiguration so eingestellt, dass alles funktioniert ohne weitere Einstellungen vornehmen zu müssen. Für alle, die es

Mehr

Anleitung Homepage TAfIE

Anleitung Homepage TAfIE Anleitung Homepage TAfIE Wichtig: Die HP kann nur mit Mozilla Firefox korrekt bearbeitet werden. Wer den Browser noch nicht am Computer hat, muss ihn herunterladen und installieren. Freigabe von Veröffentlichungen:

Mehr

Das sogenannte Beamen ist auch in EEP möglich ohne das Zusatzprogramm Beamer. Zwar etwas umständlicher aber es funktioniert

Das sogenannte Beamen ist auch in EEP möglich ohne das Zusatzprogramm Beamer. Zwar etwas umständlicher aber es funktioniert Beamen in EEP Das sogenannte Beamen ist auch in EEP möglich ohne das Zusatzprogramm Beamer. Zwar etwas umständlicher aber es funktioniert Zuerst musst du dir 2 Programme besorgen und zwar: Albert, das

Mehr

4.1 Wie bediene ich das Webportal?

4.1 Wie bediene ich das Webportal? 4.1 Wie bediene ich das Webportal? Die Bedienung ist durch ein Redaktionssystem sehr einfach möglich. Das Tutorial zeigt Ihnen wie Sie SMS-News und Top-News erstellen und veröffentlichen können. Schritt

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

Stundenerfassung Version 1.8 Anleitung Arbeiten mit Replikaten

Stundenerfassung Version 1.8 Anleitung Arbeiten mit Replikaten Stundenerfassung Version 1.8 Anleitung Arbeiten mit Replikaten 2008 netcadservice GmbH netcadservice GmbH Augustinerstraße 3 D-83395 Freilassing Dieses Programm ist urheberrechtlich geschützt. Eine Weitergabe

Mehr

Inhaltsverzeichnis Seite

Inhaltsverzeichnis Seite Inhaltsverzeichnis Seite 1. Email mit Anhang versenden 2 1.a Email vorbereiten und zweites Fenster (Tab) öffnen. 2 1. b. Bild im Internet suchen und speichern. 3 1.c. Bild als Anlage in Email einbinden

Mehr

Matrix42. Use Case - Sicherung und Rücksicherung persönlicher Einstellungen über Personal Backup. Version 1.0.0. 23. September 2015 - 1 -

Matrix42. Use Case - Sicherung und Rücksicherung persönlicher Einstellungen über Personal Backup. Version 1.0.0. 23. September 2015 - 1 - Matrix42 Use Case - Sicherung und Rücksicherung persönlicher Version 1.0.0 23. September 2015-1 - Inhaltsverzeichnis 1 Einleitung 3 1.1 Beschreibung 3 1.2 Vorbereitung 3 1.3 Ziel 3 2 Use Case 4-2 - 1 Einleitung

Mehr

1. Allgemein 2. 2. Speichern und Zwischenspeichern des Designs 2. 3. Auswahl der zu bearbeitenden Seite 2. 4. Text ergänzen 3. 5. Textgrösse ändern 3

1. Allgemein 2. 2. Speichern und Zwischenspeichern des Designs 2. 3. Auswahl der zu bearbeitenden Seite 2. 4. Text ergänzen 3. 5. Textgrösse ändern 3 Inhaltsverzeichnis 1. Allgemein 2 2. Speichern und Zwischenspeichern des Designs 2 3. Auswahl der zu bearbeitenden Seite 2 4. Text ergänzen 3 5. Textgrösse ändern 3 6. Schriftart ändern 3 7. Textfarbe

Mehr

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

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

Mehr

Das Festkomitee hat die Abi-Seite neu konzipiert, die nun auf einem (gemieteten) Share Point Server

Das Festkomitee hat die Abi-Seite neu konzipiert, die nun auf einem (gemieteten) Share Point Server Hallo Leute Das Festkomitee hat die Abi-Seite neu konzipiert, die nun auf einem (gemieteten) Share Point Server (= echtes - zeug ) liegt! Die neue Form hat insbesondere folgende Vorteile: Du bekommst einen

Mehr

Professionelle Seminare im Bereich MS-Office

Professionelle Seminare im Bereich MS-Office Serienbrief aus Outlook heraus Schritt 1 Zuerst sollten Sie die Kontakte einblenden, damit Ihnen der Seriendruck zur Verfügung steht. Schritt 2 Danach wählen Sie bitte Gerhard Grünholz 1 Schritt 3 Es öffnet

Mehr

Vorbereitung einer Grafik zum Druck einer Glotze aus, Stadion an! -Zaunfahne Torsten Bunde, Stand 5. Juli 2014

Vorbereitung einer Grafik zum Druck einer Glotze aus, Stadion an! -Zaunfahne Torsten Bunde, Stand 5. Juli 2014 Vorbereitung einer Grafik zum Druck einer Glotze aus, Stadion an! -Zaunfahne Torsten Bunde, Stand 5. Juli 2014 Wer wie wir beim SV Arminia Hannover eventuell das Problem hat, das sich nicht genügend Leute

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

Erstellen der Barcode-Etiketten:

Erstellen der Barcode-Etiketten: Erstellen der Barcode-Etiketten: 1.) Zuerst muss die Schriftart Code-39-Logitogo installiert werden! Das ist eine einmalige Sache und muss nicht zu jeder Börse gemacht werden! Dazu speichert man zunächst

Mehr

Anleitung zur Daten zur Datensicherung und Datenrücksicherung. Datensicherung

Anleitung zur Daten zur Datensicherung und Datenrücksicherung. Datensicherung Anleitung zur Daten zur Datensicherung und Datenrücksicherung Datensicherung Es gibt drei Möglichkeiten der Datensicherung. Zwei davon sind in Ges eingebaut, die dritte ist eine manuelle Möglichkeit. In

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

HTML5. Grundlagen der Erstellung von Webseiten. Linda York, Tina Wegener. 2. Ausgabe, 3. Aktualisierung, Januar 2013 HTML5

HTML5. Grundlagen der Erstellung von Webseiten. Linda York, Tina Wegener. 2. Ausgabe, 3. Aktualisierung, Januar 2013 HTML5 HTML5 Linda York, Tina Wegener 2. Ausgabe, 3. Aktualisierung, Januar 2013 Grundlagen der Erstellung von Webseiten HTML5 2 HTML5 - Grundlagen der Erstellung von Webseiten 2 Die erste Webseite mit HTML erstellen

Mehr

Bildbearbeitung für BFV-Homepage mit IrfanView. IrfanView ist ein kostenloses Bildbearbeitungsprogramm. Einen geprüften Download finden Sie hier:

Bildbearbeitung für BFV-Homepage mit IrfanView. IrfanView ist ein kostenloses Bildbearbeitungsprogramm. Einen geprüften Download finden Sie hier: Bildbearbeitung für BFV-Homepage mit IrfanView IrfanView ist ein kostenloses Bildbearbeitungsprogramm. Einen geprüften Download finden Sie hier: http://www.chip.de/downloads/irfanview_12998187.html Um

Mehr

Bedienung des Web-Portales der Sportbergbetriebe

Bedienung des Web-Portales der Sportbergbetriebe Bedienung des Web-Portales der Sportbergbetriebe Allgemein Über dieses Web-Portal, können sich Tourismusbetriebe via Internet präsentieren, wobei jeder Betrieb seine Daten zu 100% selbst warten kann. Anfragen

Mehr

Stammdatenanlage über den Einrichtungsassistenten

Stammdatenanlage über den Einrichtungsassistenten Stammdatenanlage über den Einrichtungsassistenten Schritt für Schritt zur fertig eingerichteten Hotelverwaltung mit dem Einrichtungsassistenten Bitte bereiten Sie sich, bevor Sie starten, mit der Checkliste

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

Produktschulung WinDachJournal

Produktschulung WinDachJournal Produktschulung WinDachJournal Codex GmbH Stand 2009 Inhaltsverzeichnis Einleitung... 3 Starten des Programms... 4 Erfassen von Notizen in WinJournal... 6 Einfügen von vorgefertigten Objekten in WinJournal...

Mehr

Standard-Formatvorlagen in WORD und WRITER

Standard-Formatvorlagen in WORD und WRITER Standard-Formatvorlagen in WORD und WRITER Inhalt: 1. Was ist eine Formatvorlage und wozu braucht man sie? 2. Formatvorlage in WORD (2010) erstellen 3. Formatvorlage in WRITER erstellen 4. Die Standard-Formatvorlage

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

Programme im Griff Was bringt Ihnen dieses Kapitel?

Programme im Griff Was bringt Ihnen dieses Kapitel? 3-8272-5838-3 Windows Me 2 Programme im Griff Was bringt Ihnen dieses Kapitel? Wenn Sie unter Windows arbeiten (z.b. einen Brief schreiben, etwas ausdrucken oder ein Fenster öffnen), steckt letztendlich

Mehr

Der Kalender im ipad

Der Kalender im ipad Der Kalender im ipad Wir haben im ipad, dem ipod Touch und dem iphone, sowie auf dem PC in der Cloud einen Kalender. Die App ist voreingestellt, man braucht sie nicht laden. So macht es das ipad leicht,

Mehr

Fotogalerie mit PWGallery in Joomla (3.4.0) erstellen

Fotogalerie mit PWGallery in Joomla (3.4.0) erstellen Fotogalerie mit PWGallery in Joomla (3.4.0) erstellen Als ersten Schritt müssen wir alle Fotos die in die Galerie sollen hochladen. Wir gehen davon aus, dass das Plugin PWGallery bereits installiert und

Mehr

1. Adressen für den Serienversand (Briefe Katalogdruck Werbung/Anfrage ) auswählen. Die Auswahl kann gespeichert werden.

1. Adressen für den Serienversand (Briefe Katalogdruck Werbung/Anfrage ) auswählen. Die Auswahl kann gespeichert werden. Der Serienversand Was kann man mit der Maske Serienversand machen? 1. Adressen für den Serienversand (Briefe Katalogdruck Werbung/Anfrage ) auswählen. Die Auswahl kann gespeichert werden. 2. Adressen auswählen,

Mehr

Bedienungshilfe Webseite 2.0. Deutsche Parkinson Vereinigung e.v.

Bedienungshilfe Webseite 2.0. Deutsche Parkinson Vereinigung e.v. Bedienungshilfe Webseite 2.0 Deutsche Parkinson Vereinigung e.v. LOGIN 1. Login: Um sich bei der AdministraEon anzumelden, klicken Sie biie auf LOGIN am oberen rechten Bildschirmrand. aachen ******** Hier

Mehr

Erstellen von x-y-diagrammen in OpenOffice.calc

Erstellen von x-y-diagrammen in OpenOffice.calc Erstellen von x-y-diagrammen in OpenOffice.calc In dieser kleinen Anleitung geht es nur darum, aus einer bestehenden Tabelle ein x-y-diagramm zu erzeugen. D.h. es müssen in der Tabelle mindestens zwei

Mehr

Warten auf Ereignisse

Warten auf Ereignisse Abb. 1: Diese Botschaften wurden von dem Programm WINSIGHT aufgezeichnet. Warten auf Ereignisse Wenn wir in einem Windows-Programm eine Schaltfläche anklicken, wenn wir die Maus bewegen oder eine Taste

Mehr

Photopaint - Linsen. (Speichere deine Arbeit von Anfang an regelmäßig unter dem Namen Linsen.cpt )

Photopaint - Linsen. (Speichere deine Arbeit von Anfang an regelmäßig unter dem Namen Linsen.cpt ) Photopaint - Linsen Arbeiten mit Linsen (Speichere deine Arbeit von Anfang an regelmäßig unter dem Namen Linsen.cpt ) Für diese Übung öffne die Datei Winter.jp2 du kannst natürlich auch mit jeder anderen

Mehr