Kaiserreich Drachenstein

Zur Navigation

Kurs: HTML für Anfänger

8.366 Aufrufe, 66 Beiträge.

Liebe Studentinnen,

Liebe Studenten,

ich darf Sie herzlich hier begrüßen, beim ersten virtuellen Kurs der Universität Stockwich: "HTML für Anfänger". Sie haben sich hier gemeldet, weil Sie etwas über eine Programmiersprache erfahren wollen, die weltweit von allen Programmiersprachen am meisten gekonnt wird. HTML ist übrigens die Abkürzung für "Hyper Text Markup Language". Doch reden wir nicht lange um den heißen Brei herum, fangen wir an:

I. Das Grundgerüst

&

II. Texte schreiben

Das Grundgerüst kennzeichnet eine Seite als HTML-Seite und bestimmt, was allgemeine Information ist (HEAD-Bereich) und was angezeigt wird (BODY-Bereich). Auch wird hier der Titel der Seite bestimmt, der im Browser angezeigt wird.

Öffnen wir nun den Windows-Editor (Start - > Programme - > Zubehör - > Editor ist der Pfad in der Regel). Wir sehen vor uns ein Fenster, wie wir es aus normalen Textverarbeitungsprogrammen kennen, jedoch ohne Textformatierungsbuttons. Wir aktivieren das Eingabefeld durch einen Klick und schreiben hinein:

<html>

Dies gibt dem Browser die Nachricht, dass nun ein HTML-Dokument beginnt. Als nächstes lassen wir den Browser wissen, dass nun die allgemeinen Informationen im HEAD-Bereich kommen. Wir schreiben:

<head>

Als allgemeine Information wollen wir den Titel angeben. Dafür schreiben wir nun:

<title>Titel der Seite</title>

Das "<title>"-Element öffnet den Schreibmodus für den Titel der Seite im Browser, das "</title>"-Element schließt den Schreibmodus durch den Slash ( / ).

Auf die gleiche Weise wollen wir den HEAD-Bereich schließen, da wir nun alle allgemeinen Informationen, die für den Anfang benötigt werden, eingegeben haben:

</head>

Nun kommt der BODY-Bereich, in dem das steht, was später einmal im Browser-Fenster angezeigt werden soll:

<body>

Da wir aber der Seite z.B. einen grünen Hintergrund und einen weißen Text verpassen wollen, müssen wir weitere Tags (HTML-Befehle) und HEX-Code (sechsstelliger Code, mit dem sich jede Farbe definieren lässt, im Muster "#(die ersten zwei Ziffern beschreiben den Rotton)(die zweiten zwei Ziffern beschreiben den Grünton)(die dritten zwei Ziffern beschreiben den Blauton)) verwenden. Wir schreiben in das <body>-Tag:

<body[ bgcolor="#006600" text="#FFFFFF">

Mit dem bgcolor-Tag haben wir die Hintergrundfarbe bestimmt, mit dem text-Tag haben wir die Textfarbe formatiert. Weitere Body-Tags lernen wir später. Nun wollen wir aber einen kleinen Text in die Seite einfügen. Diesen Text kann man nun ganz normal schreiben:

Hallo Welt!

Zu beachten sind Sonderzeichen. Hierbei gilt:

ä wird geschrieben &auml;

ö wird geschrieben &ouml;

ü wird geschrieben &uuml;

Ä wird geschrieben &Auml;

Ö wird geschrieben &Ouml;

Ü wird geschrieben &Uuml;

ß wird geschrieben &szlig;

Beachtet man dies, ist das Textschreiben einfach. Nachdem wir nun den Text geschrieben haben, wollen wir den <body>-Tag schließen:

</body>

Natürlich muss auch der HTML-Tag geschlossen werden:

</html>

Nun speichern wir die Seite, indem wir "Datei - > Speichern unter..." anklicken. Wir wählen den Ordner, in dem wir die Datei speichern wollen, stellen als Dateityp "Alle Dateien (*.*)" ein und als Dateiname "willkommen.html" ein. Nun können wir den Ordner öffnen und dort die HTML-Datei "willkommen" doppelt anklicken. Ein Browserfenster öffnet sich und wir sehen unser Ergebnis. Glückwunsch zur ersten Seite mit HTML, die nicht von einem HTML-Erstellungsprogramm, sondern in reiner Programmierarbeit geschrieben wurde!

Hausaufgabe:

Erstellen Sie die HTML-Seite wie oben beschrieben und schicken Sie diese als Anhang an [EMAIL]stockwich@drakestrin.de[/EMAIL] !

TiAnO 09.04.2004, 15:17

2 zitieren melden

Ich habe die Hausaufgabe soeben abgeschickt. Hoffentlich kommt sie an!

09.04.2004, 15:24

3 zitieren melden

Ich habe soeben die Mitteilung erhalten, dass die angegebene Email Adresse nicht gültig oder unkorrekt sei!!!! Ich habe sie aber kopiert, kann also nicht an mir liegen. ;)

Ich versuch's gleich nochmal!

09.04.2004, 15:33

4 zitieren melden

Geht noch immer nicht. ;(

Deshalb kommt es jetzt über die von Veuxin hier angegebene Email Adresse!!!

So, mit der eMail weiß ich nicht, woran es liegt, schickt es mir dann an [EMAIL]kaetyr@drakestrin.de[/EMAIL] , das funktioniert 100%ig. :)

Tiberius hat seine Hausaufgaben jetzt gemacht. :D

Tobias der Eroberer 09.04.2004, 17:34

6 zitieren melden

ich auch. :))

Original von Tobias der Eroberer

ich auch. :))

Ja, aber:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Das lass mal weg, das ist erstmal unnötig. :)

Sonst: Gut gemacht Tobias, setzen. :rofl:

Tobias der Eroberer 10.04.2004, 13:22

8 zitieren melden

jaaa....das macht er bei Mozilla automatisch...8)

Machst du jetzt weiter?

Wenn du immer wartest, bis alle ihre Hausaufgaben abgegeben haben, kann das noch lange dauern.

Du kannst ja weiter machen und sagen: Alle HA auf 20.04. Dann können wir weiter machen, auch wenn ab und zu mal jemand fehlt.

Titus von Aloys 10.04.2004, 19:56

9 zitieren melden

Ach Gott ,tschuldigung , dass ich so spät reinplatze.

Ist es ok, wenn ich nur zuschaue und mich nicht am Unterricht beteilige?

Lofwyrf 11.04.2004, 11:21

10 zitieren melden

Original von Veuxin

Mit dem bgcolor-Tag haben wir die Hintergrundfarbe bestimmt, mit dem text-Tag haben wir die Textfarbe formatiert. Weitere Body-Tags lernen wir später. Nun wollen wir aber einen kleinen Text in die Seite einfügen. Diesen Text kann man nun ganz normal schreiben:

Du meintest bestimmt mit dem bgcolor-Element. des Body Tag´s.

@Tobias:

Du sollst deine Hausaufgaben aber mit keinem Webeditor ;o

Der Sinn des ganzen ist doch, dass du die Seite von Hand nach deiner Vorstellung programmieren kannst!

@Tinos:

Hmmm...eigentlich hast du dich doch eingeschrieben. ?(

@Lofwyrf:

Ja, stimmt, 'tschuldigung, herrje, ich komm mit diesen ganzen Bezeichnungen immer durcheinander (ich bin wahrscheinlich der einzige, der ab und zu mit ganz neuen HTML-Normen wie "bg-picture" oder ähnlichem daherkommt. :D)

Titus von Aloys 11.04.2004, 21:04

12 zitieren melden

Hmmm...eigentlich hast du dich doch eingeschrieben

ABer was nützt das, wenn ich zB. die kommende Woche sowieso nicht da bin. :(

Tobias 12.04.2004, 12:32

13 zitieren melden

ja, aber ich wollte mir die seite nur noch mal anschauen und hab dan versehentlich die Mozillaversion gespeichert und dir zugeschickt.

Original von Tobias

ja, aber ich wollte mir die seite nur noch mal anschauen und hab dan versehentlich die Mozillaversion gespeichert und dir zugeschickt.

Ok, Ausrede angenommen. :rofl:

@Tinos:

Ok, du kannst Zuschauer sein (jeder kann Zuschauer sein). :)

Veuxin, könntest du bitte Fortfahren, wenn du fertig bist?

Original von Tobias der Eroberer

Veuxin, könntest du bitte Fortfahren, wenn du fertig bist?

Es fehlen noch die Hausaufgaben von Erinn. :)

Kann man die Hausaufgaben nich auch noch nachreichen?

Sonst dauert das ewig....:(

Original von Tobias der Eroberer

Kann man die Hausaufgaben nich auch noch nachreichen?

Sonst dauert das ewig....:(

Das der Kurs nicht in ein paar Tagen fertig ist, damit kannst du rechnen. 4-5 Monate wird er schon komplett dauern.

Erinn 14.04.2004, 12:21

19 zitieren melden

Original von Veuxin
Original von Tobias der Eroberer

Veuxin, könntest du bitte Fortfahren, wenn du fertig bist?



Es fehlen noch die Hausaufgaben von Erinn. :)

Ich bitte um Entschuldigung, werde es so schnell wie möglich nachreichen !

EDIT:

Ich habe es gerade losgeschickt ;)

Ich hätte da noch eine Frage. Gibt es denn irgendwo eine Farbtabelle, wo man sehen kann, welcher Code man für welche Farbe nehmen muß ?

TiAnO 14.04.2004, 13:03

20 zitieren melden

Eine sehr gute Frage!! Wenn ich von meinem Tylus-Forum nicht über Rechtsklick / Quelltext anzeigen erfahren hätte, welche Farbe ich nehmen muss, dann wäre ich auch aufgeschmissen gewesen!!!