Crash Kurs in HTML Frauenprojektlabor

Transkript

1 Crash Kurs in HTML Frauenprojektlabor Crash Kurs in HTML Frauenprojektlabor der FH-Dortmund 1

2 Crash Kurs in HTML (Frauenprojektlabor) Herzlich willkommen in unserem Crash-Kurs. In diesem Kurs sollt ihr das einfache Programmieren von HTML-Seiten lernen. Wir erstellen die Seiten mit einem einfachen Windows Editor, den ihr alle haben müsst. Der Aufbau des Kurses ist wie folgt: Grundgerüst einer HTML-Seite Formatierungen einer HTML-Seite Hintergrundfarbe Hintergrundbild Absatz Zeilenumbruch Schriftgröße Schriftart Schriftfarbe Überschrift Auflistung Platzierung Physische Auszeichnung im Text Trennlinie Verweise auf andere HTML-Seiten (Links) Einfügen von Bildern Tabellen Farbpalette Formularelemente Frame JavaScript-Bereiche in HTML definieren Datum und Zeitangabe (Digital) Uhrzeit (Analog) Applets bewegte Animationen Und los geht`s! Viel Spaß Crash Kurs in HTML Frauenprojektlabor der FH-Dortmund 2

3 1. Name HTML steht für Hypertext Markup Language. Das "Markup Language" bedeutet übersetzt Auszeichnungssprache. Also HTML - Seitenbeschreibungssprache mit Verknüpfungen zu weiteren Seiten oder Elementen. Es werden also Inhalte beschrieben, wie diese Strukturiert werden und durch Verknüpfungen werden andere Dokumente verknüpft. 2. Ordner erstellen Zuerst soll auf dem Desktop ein Ordner erstellt werden, indem alle zu der erstellten Homepage Dateien (Fotos, Texte Webseite) gespeicherten werden. Ihr geht wie folgt vor: o Mit rechte Maus auf Desktop klicken o Eintrag Neu markieren o Eintrag Ordner auswählen 3. Homepage Um die Website zu erstellen man braucht: o Ein Text-Editor. Notepad reicht aus, Alternativen wie Dreamviewer machen das Arbeiten komfortabler. o Ein Browser o Zeit und Lust ;-) Um die Editor zu öffnen geht Ihr wie folgt vor: geht auf Start Programm Zubehör und ruft den Editor auf die Seite, die sich öffnet speichert ihr unter [Name].html in dem erstellten Ordner Alle untergeladene Fotos, Bilder usw. speichern Sie bitte nur in diesem Ordner. Crash Kurs in HTML Frauenprojektlabor der FH-Dortmund 3

4 Grundgerüst einer HTML-Seite Wie die menschliche Sprache aus Wörtern besteht, hat auch HTML seine Bausteine. Man nennt sie Tags. Tags erkennt man schnell an ihrer typischen Schreibweise mit den spitzigen Klammern. Alle Tags bestehen aus einem Anfang, <p>, z.b. und einem Ende, </p>, der Text zwischendrin, nämlich eben "bla bla bla" wird als Abschnitt (=engl. "paragraph") markiert. Mehr zu den Tags erfahren Sie in diesem Kurs, vorerst wollen wir uns nur um die Schreibweise der Tags kümmern. <html> <head> <title> Name der Seite </title> </head> Eine html- Seite hat immer diesen Aufbau Hier steht der Inhalt </html> 1. Formatierung einer html-seite Man kann jede html-seite nach eigenen Wünschen gestalten. Hier ein paar Anregungen: Hintergrundfarbe <body bgcolor= #CCFFFF > Hier steht der Inhalt Dein Bild wird so hinterlegt. Aber Vorsicht, es muss in demselben Ordner sein und muss als Typ entweder *.gif oder *.jpg sein!!! Crash Kurs in HTML Frauenprojektlabor der FH-Dortmund 4

5 Hintergrundbild <body background= deinbild.jpg > Hier steht der Inhalt Absatz Um einen Absatz zu erstellen reicht es nicht aus, einfach im Editor einen Absatz zu machen. Man muss bestimmte Code-Wörter benutzen. Also: <p> Hier ist dein Text mit einem Absatz </p> <p> Hier ist dein zweiter Text mit Absatz </p> Zeilenumbruch Wenn du einen Text schreibst und er in mehreren Zeilen angezeigt werden soll, musst du jedes Mal manuell einen Zeilenumbruch einfügen. Dein Text steht hier: Für die nächste Zeile fügst du ein <br> ein und jetzt schreibst du in der nächsten Zeile weiter! Crash Kurs in HTML Frauenprojektlabor der FH-Dortmund 5

6 Schriftgröße Du kannst die Schriftgrößen deiner Texte ändern! <font size= 2 > Dein Text </font> <font size= 6 > Dein Text </font> Du kannst die Größe selbst bestimmen. Hier 2 Beispiele Schriftart Schau, du kannst auch die Schriftart deiner Texte ändern! <font face= Avalon > Dein Text </font> <font face= Verdana > Dein Text </font> Schriftfarbe Ja, du hast Recht, man kann auch die Farbe selbst bestimmen. <font color= olive > Dein Text </font> <font color= red > Dein Text </font> Crash Kurs in HTML Frauenprojektlabor der FH-Dortmund 6

7 Überschrift Hmmm, willst du ein paar Überschriften? Kein Problem, das klappt auch. <h1> Erste Überschrift </h1> <h2> Zweite Überschrift </h2> <h3> Dritte Überschrift </h3> Auflistung Wenn du eine Liste erstellen willst, benutzt du folgende Befehle <ul> Studentinnen <li>claude</li> <li>souad</li> <li>solmaz</li> <li>hernestine</li> </ul> Das Gute dabei ist, man kann es mehrfach ineinander verschachteln. Platzierung Man kann Texte, Bilder oder Tabellen an verschiedenen Stellen platzieren. <center> Dein Text ist zentriert </center> <left> Dein Text ist linksbündig </left> <right> Dein Text ist rechtsbündig </right> Crash Kurs in HTML Frauenprojektlabor der FH-Dortmund 7

8 Physische Auszeichnungen im Text Es gibt viele verschiedene logische und physische Auszeichnungen im Text. Wir werden euch drei physische Auszeichnungen im Text zeigen. <b> Dein Text wird fett dargestellt </b> <br>(zeilenumbruch) <i> Dein Text wird kursiv dargestellt </i> <br> <u> Dein Text wird kursiv unterstrichen </u> <br> <big> Größerer Text</big> <small> Kleinerer Text</small> <s> durchgestrichener Text</s> <blink> Blinkender Text </blink> <marquee direction = right > Flash von links nach rechts </marquee> <marquee behavior = alternate > Hin und Zurück</marquee> Trennlinien Du hast auch die Möglichkeit Trennlinien zwischen zwei Absätzen, Bilder oder Tabellen einzufügen. <p> Dein Text </p> <hr size ="20"color="red"> <p> Dein Bild </p> Crash Kurs in HTML Frauenprojektlabor der FH-Dortmund 8

9 2. Verweise auf andere HTML-Seiten(Links) Eine HTML-Seite ohne Links ist nicht nur langweilig sondern auch nutzlos. Denn so kann man mehrere Seiten miteinander verknüpfen ohne jedes Mal eine Seite neu zu suchen. Man kann auch auf externe Seite hinweisen. <a href= meineseite1.html >Meine erste Seite</a> <br> <a href= meineseite2.html >Meine zweite Seite</a> <br> <ahref= >FH Dortmund </a><br> Merke dir, wenn du deine eigene Seite verlinken willst, müssen sie in dem gleichen Ordner sein 3. Einfügen von Bildern So kannst du Bilder einfügen. <p> <img src= deinbild.jpg alt= Name des Bildes > </p> Dieser Code sorgt dafür, dass du ein Bild einfügen kannst. Aber Vorsicht wie bei den Hintergrundbildern auf den Typ achten. Crash Kurs in HTML Frauenprojektlabor der FH-Dortmund 9

10 Du kannst auch ein Bild als Link benutzen. Hierfür schau dir den Code an!! <p> <a href= meineseite.html ><img src= deinbild.jpg width= 160 height= 34 border= 0 alt= Home ></a> 4. Tabellen Wenn du Tabellen erstellen willst kannst du es auch. Es gibt zwei Arten von Tabellen. Entweder man lässt das Gitter anzeigen oder nicht. <table border= 1 > <tr> steht für eine Zeile <tr> <th> kopfzelle1 </th> <th> kopfzelle2 </th> <th> kopfzelle3 </th> </tr> <tr> <td> Datenzelle1 </td> <td> Datenzelle2 </td> <td> Datenzelle3 </td> </tr> <tr> <td> Datenzelle4 </td> <td> Datenzelle5 </td> <td> Datenzelle6 </td> </tr> </table> Crash Kurs in HTML Frauenprojektlabor der FH-Dortmund 10

11 Die folgende Grafik zeigt die Wirkung der HTML-Elemente, die eine Tabelle erzeugen: 5. Farbpalette So hier stehen nur ein paar Farbbeispiele. Auf der Seite ihr eine ausführliche Palette von Farbkombinationen. habt Hier die gängigste: black = # maroon = # green = # olive = # navy = # purple = # teal = # silver = #C0C0C0 gray = # red = #FF0000 lime = #00FF00 yellow = #FFFF00 blue = #0000FF fuchsia = #FF00FF cyan = #00FFFF white = #FFFFFF Crash Kurs in HTML Frauenprojektlabor der FH-Dortmund 11

12 6. Formularelemente Weiterhin besteht die Möglichkeit verschiedene Formularelemente in die HTML-Seite einzubauen, wie z.b. Buttons, Auswahlfelder, etc. Wichtig hierbei ist, dass diese von einem Form-Element umfasst sind. Anbei eine Auflistung einiger Formularelemente <form method="post" action="--webbot-self--"> <textarea rows="2" name="textarea" cols="20"> Dies ist ein größeres Textfeld </textarea> <input type="checkbox" name="checkbox" value="on"> <select name="auswahlliste" size="4"> <option>listenfeld 1</option> <option>listenfeld 2</option> <option>listenfeld 3</option> </select> <input type="text" name="textfeld" size="3"> <input type="button" value="ok" name="ok"> </form> 7. Frames Dank Frames können wir die Anzeigebereiche der HTML-Seiten in verschiedene, frei definierbare Bereiche aufteilen. Wir arbeiten mit einem Frame der folgendermaßen aufgeteilt ist. Crash Kurs in HTML Frauenprojektlabor der FH-Dortmund 12

13 Ihr müsst es euch so vorstellen: Wir programmieren jede Seite ganz einfach wie gewohnt. Am Ende verknüpfen wir diese zu einem Frame und verlinken die Seiten miteinander!!! <html> <head> <title> Unsere Hauptseite </title> </head> <frameset rows= 80,* cols= * frameborder= yes border= 0 Framespacing= 0 > <frame src= logo.html name= topframe scrolling= No noresize= noresize id= topframe title= topframe /> <frameset cols= 80,* frameborder= yes border= 0 framespacing= 0 > <frame src= link.html name= leftframe scrolling= No noresize= noresize id= leftframe title= leftframe /> <frame src= Hauptseite.HTML name= mainframe id= mainframe title= mainframe /> </frameset> Crash Kurs in HTML Frauenprojektlabor der FH-Dortmund 13

14 </frameset> <noframes> </noframes> </html> So, jetzt haben wir unser komplettes Frame. Alle drei haben einen eigenen Namen. Der obere Frame heißt topframe, der linke Frame heißt leftframe und der Hauptteil heißt mainframe. Da wir unsere Seiten schon alle programmiert haben, können wir mit unserem linken Frame anfangen. Dort werden wir unsere Links einbauen. <html> <head> <title> linker Frame </title> </head> Target bedeutet, wo die Seite angezeigt werden soll, in diesem Fall auf der Haupseite! Test2 <a href= link1.html target= mainframe > link1.html</a> <a href= link2.html target= mainframe > link2.html</a> <a href= link3.html target= mainframe > link3.html</a> <a href= link4.html target= mainframe > link4.html</a> <html> Crash Kurs in HTML Frauenprojektlabor der FH-Dortmund 14

15 8. JavaScript-Bereiche in HTML definieren Für JavaScript-Programmabschnitte können Sie in HTML Bereiche definieren. <HTML> <head> <title> Test</title> <script type= JavaScript >  </script> </head> </HTML> Im obigen Beispiel wird mit Hilfe von JavaScript ein Meldungsfenster mit dem Text "Hallo Welt!" am Bildschirm ausgegeben. Crash Kurs in HTML Frauenprojektlabor der FH-Dortmund 15

16 9.Zeiten und Datumangaben Wenn ihr Die Datum und die Uhrzeiten anzeigen möchtet denn einfach diese Codes in eure Quellcode einfügen. <HTML> Die aktuelle Datum und die Uhrzeit werden hier gezeigt. <head><title>test</title> <script language=javascript> var jahr, monat, tag, stunden, minuten; var AktuellesDatum=new Date(); jahr=aktuellesdatum.getyear() ; monat=aktuellesdatum.getmonth ()+1; tag=aktuellesdatum.getdate(); stunden=aktuellesdatum.gethours(); minuten=aktuellesdatum.getminutes(); document.write("heute ist der "); document.write(tag + ". " + monat + ". " + jahr + ", " + stunden + " Uhr " + minuten); document.write("<br>"); document.write("uhrzeit:"); document.write(stunden + " Uhr " + minuten); </script> </head> </HTML> Crash Kurs in HTML Frauenprojektlabor der FH-Dortmund 16

17 Uhrzeitanalog zeigen Ihr könnt eine beliebige Datendatei als Objekt in eine HTML-Datei einbinden(zb. Eine Wanduhr.) <html> <head> Die Uhrzeit wird analog gezeigt. <meta http-equiv="content-type" content="text/html; charset=iso "> <title>datendateien als Objekt einbinden</title> </head> <h1>analoguhr als SVG-Grafik mit eingebettetem JavaScript</h1> <p> <object data="uhr.svg" type="image/svg+xml" width="200" height="200"> <param name="src" value="uhr.svg"> Ihr Browser kann das Objekt leider nicht anzeigen! </object></p> </html> 10. Applets Applets können z.b. bewegte Animationen (Tricksequenzen) enthalten, Echtzeitabläufe in bewegten Grafiken darstellen (Stichwort: Börsenticker). Crash Kurs in HTML Frauenprojektlabor der FH-Dortmund 17

18 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <HTML> <head> <meta http-equiv="content-type" content="text/html; charset=iso "> <title>java-applets als Objekt einbinden</title> </head> <h1>ein Lauftext mit Java</h1> <p> <object classid="java:zticker.class" codetype="application/java" width="600" height="60"> <param name="msg" value="die Energie des Verstehens"> <param name="href" value="../../../index.htm"> <param name="speed" value="5"> <param name="bgco" value="255,255,255"> <param name="txtco" value="000,000,255"> <param name="hrefco" value="255,255,255"> </object> </p> <p> <ahref="/objekte.htm#java_applets_parameter">zurück</a> </p> </HTML> Viel Spass und viel Erfolg!! Wenn Ihr noch mehr nachlesen wollte empfehlen wir die Seite Crash Kurs in HTML Frauenprojektlabor der FH-Dortmund 18