Crash Kurs in html Frauenprojektlabor

Transcription

Crash Kurs
in
HTML
Frauenprojektlabor
Crash Kurs in HTML Frauenprojektlabor der FH-Dortmund
1
Crash Kurs in HTML (Frauenprojektlabor)
Herzlich willkommen in unserem Crash-Kurs. In diesem Kurs sollt ihr
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ß
2
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.
3
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 htmlSeite hat
immer diesen
Aufbau
<body>
Hier steht der Inhalt
</body>
</html>
1. Formatierung einer html-Seite
Man kann jede html-Seite nach eigenen Wünschen gestalten.
Hier ein paar Anregungen:
Hintergrundfarbe
<body bgcolor=“#CCFFFF“>
Dein Bild wird so
hinterlegt. Aber
Vorsicht, es muss in
demselben Ordner
sein und muss als Typ
entweder *.gif oder
*.jpg sein!!!
</body>
4
Hintergrundbild
<body background=”deinBild.jpg”>
</body>
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:
<body>
<p> Hier ist dein Text mit einem Absatz </p>
<p> Hier ist dein zweiter Text mit Absatz </p>
</body>
Zeilenumbruch
Wenn du einen Text schreibst und er in mehreren Zeilen angezeigt
werden soll, musst du jedes Mal manuell einen Zeilenumbruch
einfügen.
<body>
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!
</body>
5
Schriftgröße
Du kannst die Schriftgrößen deiner Texte ändern!
<body>
<font size=”2”> Dein Text </font>
<font size=”6”> Dein Text </font>
Du kannst die
Größe selbst
bestimmen. Hier 2
Beispiele
</body>
Schriftart
Schau, du kannst auch die Schriftart deiner Texte ändern!
<body>
<font face=“Avalon“> Dein Text </font>
<font face=”Verdana”> Dein Text </font>
</body>
Schriftfarbe
Ja, du hast Recht, man kann auch die Farbe selbst bestimmen.
<body>
<font color=”olive”> Dein Text </font>
<font color=”red”> Dein Text </font>
</body>
6
Überschrift
Hmmm, willst du ein paar Überschriften? Kein Problem, das klappt
auch.
<body>
<h1> Erste Überschrift </h1>
<h2> Zweite Überschrift </h2>
<h3> Dritte Überschrift </h3>
</body>
Auflistung
Wenn du eine Liste erstellen willst, benutzt du folgende Befehle
<body>
<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.
</body>
Platzierung
Man kann Texte, Bilder oder Tabellen an verschiedenen Stellen
platzieren.
<body>
<center> Dein Text ist zentriert </center>
<left> Dein Text ist linksbündig </left>
<right> Dein Text ist rechtsbündig </right> </body>
7
Physische Auszeichnungen im Text
Es gibt viele verschiedene logische und physische Auszeichnungen
im Text. Wir werden euch drei physische Auszeichnungen im Text
zeigen.
<body>
<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>
</body>
Trennlinien
Du hast auch die Möglichkeit Trennlinien zwischen zwei Absätzen,
Bilder oder Tabellen einzufügen.
<body>
<p> Dein Text </p>
<hr size ="20"color="red">
<p> Dein Bild </p>
</body>
8
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.
<body>
<a href=”meineSeite1.HTML”>Meine erste Seite</a> <br>
<a href=”meineSeite2.HTML”>Meine zweite Seite</a> <br>
<ahref=“http://www.fh-dortmund.de“>FH Dortmund </a><br>
</body>
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.
<body>
<p> <img src=”deinBild.jpg” alt=”Name des Bildes”> </p>
</body>
Dieser Code sorgt dafür, dass du
ein Bild einfügen kannst. Aber
Vorsicht wie bei den
Hintergrundbildern auf den Typ
achten.
9
Du kannst auch ein Bild als Link benutzen. Hierfür schau dir den
Code an!!
<body>
<p>
<a href=”meineSeite.HTML”><img src=”deinBild.jpg”
“160” height=”34” border=”0” alt=”Home”></a>
width=
</body>
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.
<body><table border=”1”>
<tr> steht für eine Zeile
<tr>
<th> kopfzelle1 </th>
</tr>
<tr>
<td> Datenzelle1 </td>
</tr>
<tr>
</tr>
</table>
</body>
10
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
http://www.tomheller.de/theholycymbal/HTML-farben.HTML
ihr eine ausführliche Palette von Farbkombinationen.
habt
Hier die gängigste:
black
= #000000
maroon = #800000
green
= #008000
olive
= #808000
navy
= #000080
purple = #800080
teal
= #008080
silver
= #C0C0C0
gray
= #808080
red
= #FF0000
lime
= #00FF00
yellow = #FFFF00
blue
= #0000FF
fuchsia = #FF00FF
cyan
= #00FFFF
white = #FFFFFF
11
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
<body>
<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>
</select>
<input type="text" name="Textfeld" size="3">
<input type="button" value="OK" name="OK">
</form>
</body>
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.
12
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>
13
</frameset>
<noframes>
<body>
</body>
</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>
<body>
</body>
<html>
14
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”>
<!-alert(“Hallo Welt !”) ;
//-->
</script>
</head>
<body>
</body>
</HTML>
Im obigen Beispiel wird mit Hilfe von JavaScript ein
Meldungsfenster mit dem Text "Hallo Welt!" am Bildschirm
ausgegeben.
15
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()-100+2000;
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>
<body>
</body>
</HTML>
16
Uhrzeitanalog zeigen
Ihr könnt eine beliebige Datendatei als Objekt in eine HTML-Datei
einbinden(ZB. Eine Wanduhr.)
<html>
Die Uhrzeit wird
analog gezeigt.
<head>
<meta http-equiv="content-type" content="text/HTML;
charset=ISO-8859-1">
<title>Datendateien als Objekt einbinden</title>
</head>
<body>
<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>
</body>
</html>
10. Applets
Applets können z.B. bewegte Animationen (Tricksequenzen)
enthalten, Echtzeitabläufe in bewegten Grafiken darstellen
(Stichwort: Börsenticker).
17
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/HTML4/loose.dtd">
<HTML>
<head>
<meta http-equiv="content-type" content="text/HTML;
charset=ISO-8859-1">
<title>Java-Applets als Objekt einbinden</title>
</head>
<body>
<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>
</body>
</HTML>
Viel Spass und viel Erfolg!! Wenn Ihr noch mehr nachlesen wollte
empfehlen wir die Seite
http://de.selfhtml.org/
18

Crash Kurs in html Frauenprojektlabor

Transcription

Similar documents

Lektion 1 - Was ist HTML Lektion 2 - Text eingeben

HVB eFin Version 4.0 Installation und erste

TachoSafe Key Bedienungsanleitung

Testen von Benutzeroberflächen - Department of Information Systems

2014

gut gesund günstig einkaufen

Unix/Linux Crash Kurs