HTML-Tutorial, erster Teil.

Akareyon · 15. February 2002, 01:22

((ACHTUNG! in den HTML-Befehlen ist ein _ eingefügt, also <_body...> anstelle <body...>. Das _ ist nur da, damit die Board-Software das Geschriebene nicht als Kommando versteht! Laßt das _ also in euren HTML-Versuchen weg

))

Nu geht's los. Ich fange bei Null an, also die fortgeschrittenen bitte nicht aufstöhnend jammern: "Och nöö, das wissen wir doch alles schon!"

Ihr seid alle Hard-Core-Poster bei Skats. Das sind allerbeste Voraussetzungen. Denn ihr kennt bestimmte Befehle wie den [_quote]BLABLABLA[/_quote] schon so gut wie auswendig und ihr wißt: zwischen zwei eckigen Klammern steht ein Befehl. Ab dort gilt eine Regel, zum Beispiel befehlt ihr mit [_I] die Umschaltung auf Kursivschrift. Der Befehl wird wieder geschlossen, indem man ein [_/I] schreibt. ein / ist also der entsprechende Schließbefehl, und dieses Kommando umschließt nun einen Text. Diesem Text wird ein Format zugewiesen.

Erstellt in einem leeren, hübschen Ordner eures Computers eine Text-Datei mit dem Namen "index.html". Öffnet diesen mit eurem Editor (Notepad, Editpad, was immer ihr verwendet).

Weil es sich um eine HTML-Datei handelt, wollen wir dem Browser-Programm (also dem Internet-Explorer oder Netscape-Navigator), der die Datei später mal anzeigen soll, sagen, daß es sich um eine HTML-Datei handelt.

das sagen wir mit einem freundlichen <_html>. (< Aufpassen! das _ weglassen

)

Wie ihr normalerweise auch, hat ein HTML-Datei einen Kopf und einen Körper. Wir geben dem Dokument nun auch einen Kopf mit <_head>, und dort, wo der Kopf aufhört, fängt der Körper an:

<_/head>
<_body>

Der Kopf ist jetzt noch leer. Den füllen wir später. In den Körper kommen nachher auch lauter lustige Sachen. Aber bis dahin kommen wir zum Schluß des Körpers und schreiben <_/body>. Und weil hier das HTML-Dokument aufhört, wird dieses definitiv mit <_/html> beendet. Was bringt uns das? Eine Datei, die so aussieht:

Code:

<_html>
 <_head>

 <_/head>
 <_body>

  Hallo Welt! 

 <_/body>
<_/html>

Das, was nun innerhalb des Body steht, ist das, was ihr später in eurem Browserfenster sehen werdet. Das ist noch nicht viel, drum schreibt mal was rein (zum Beispiel "Hallo Welt!", das kommt immer gut, das machen alle großen Programmierer in ihrem ersten Programm), abspeichern nicht vergessen, und öffnet die Datei mit eurem Browser. Ganz oben links verkümmert steht klein "Hallo Welt!". Ist das nicht erhebend?

Nein, ist es nicht, drum machen wir bald weiter und geben dem Weltengruß dann etwas Farbe.

zeus2212 · 17. February 2002, 18:23

hi
klasse weitermachen

Paff.Daddy.E_V · 20. February 2002, 21:05

Wo bleibt der Rest ??? :confused:

Brauche mehr !!!

gismo75 · 22. February 2002, 20:05

moin
super der erste teil fluppt schon aber wir brauchen mehr input

aber ist echt ne super sache weiter so

Akareyon · 22. February 2002, 21:50

Ihr fühlt euch gut, ja? Ihr meint, die Welt des Internet gehört nun euch? Seht schon Counter-Statistiken mit 340 Besuchern täglich auf eurer Seite? Träumt weiter. Ihr seid zwar schon fast fertig, aber etwas fehlt euch noch.

Zum Beispiel hättet ihr bestimmt eine Menge Bock auf grelle Farben, oder?

Interessanterweise isses beim HTML genauso wie beim Code hier auf dem Board. Angenommen, ihr wollt den Text "Hallo Welt" kursiv haben, setzt ihr ihn in <_b> ("b" steht für bold). Beendet wird der Befehl mit <_/b>. Wenn ihr also nur das "Hallo" fett haben wollt, schreibt ihr <_b>Hallo<_/b> Welt!. Bombastisch, oder? Es geht weiter.

<_i> macht den Text kursiv
<_u> unterstreicht den Text.

Was? Ihr wollt dem Text eine andere Farbe geben? Alright.
Probiert mal das hier:
<_font color="blue">Hallo Welt!<_/font>
Das ist doch phänomenal, oder? Beachtet, wenn ihr den Befehl bereits nach dem "Hallo" schließt, das "Welt!" wieder schwarz ist.

Das ist ja soweit alles ganz prima, aber font heißt ja bekanntermaßen "Schrift". Das deutet doch irgendwie an, daß man mit dem Befehl eine Menge Schindluder treiben kann, oder?

In der Tat. Wenn euch zum Beispiel die Schrift nun gar nicht gefällt, sagt ihr das einfach und fügt in den Font-Befehl folgendes ein: <_font color="blue" face="Verdana">Wie ihr seht, habt ihr nun eine andere Schrift. Anstatt Verdana könnt ihr natürlich jeden beliebigen Schriftnamen einsetzen, denkt aber daran, daß nicht jeder die gleichen Schriften hat wie Ihr. Es ist also besser, Standard-Schriftarten wie WinDings, Arial, Times New Roman, Courier New, Verdana, Impact, Comic Sans MS oder Symbol zu benutzen. Bereits Dauphin ist nicht mehr in jeder Schriftensammlung vorhanden.

Ihr habt jedoch auch die Möglichkeit, zu bestimmen, welche Schrift angezeigt werden soll, wenn auf dem Computer eures Besuchers eine Schrift nicht voranden ist, nämlich so:
<_font color= "blue" face="Crappy Gothic, Arial">
Nicht jeder wird die Schriftart "Crappy Gothic" besitzen, also wird in diesem Falle stattdessen die Schriftart "Arial" angezeigt. Genial, nicht?

Es geht noch weiter. Als letztes zeige ich euch nämlich wie man die Schriftgröße einstellt!
<_font color="blue" face="Verdana" size="2">
Normale Schriftgröße ist 3. 2 ist also etwas kleiner, 1 schon fast nicht mehr zu lesen. 4 eignet sich für Überschriften. Ich persönlich vermeide es, Schriftgrößen über 3 zu nutzen, weil ich mich auf anderen Seiten immer so angeschrien fühle. Eine kleine Schrift liest sich um Klassen angenehmer (und professioneller

)

Was gibt's das nächste Mal?
1. ich zeige euch, wie man andere Farben außer "blue", "red", "orange" und yellow etc einstellen kann. Das wird schwierig...
2. Werden wir den Text formatieren: linksbündig, rechtsbündig, zentriert etc...

Paff.Daddy.E_V · 22. February 2002, 21:54

huhu
super sache das mit den grellen farben
echt eh

gismo75 · 22. February 2002, 22:59

moin
eine frage mal eben
wenn ich jetzt den text in grün mit einer fetten kursiven und größeren anderen schrift haben will,wie muss ich das dann eingeben und wie die klammern setzten????

Akareyon · 23. February 2002, 00:11

Gute Frage.

Es ist vollkommen egal, ob du den text zuerst mit dem "FONT"-befehl umklammerst oder mit dem "B". Ich habe mir allerdings zur Angewohnheit gemacht, die Fett- und Kursiv-Formatierungen in die FONT-Klammer zu setzen. Schon allein, um zu vermeiden, daß ich klammer eins öffne, klammer zwei öffne, klammer eins schließe und klammer zwei schließe:

[ ( ] )

Das geht in der Mathematik schließlich auch nicht, da gehört es sich so:

[ ( ) ]

(die zuletzt geöffnete Klammer wird als erstes geschlossen)
Bei HTML ist es aber eigentlich total Humpe... der Code ist einfach übersichtlicher, wenn man sich gleich anständiges Schreiben angewöhnt...

15. February 2002, 01:22	#1
Akareyon Registriert seit: November 2001 Beiträge: 2.823	HTML-Tutorial, erster Teil. ((ACHTUNG! in den HTML-Befehlen ist ein _ eingefügt, also <_body...> anstelle <body...>. Das _ ist nur da, damit die Board-Software das Geschriebene nicht als Kommando versteht! Laßt das _ also in euren HTML-Versuchen weg )) Nu geht's los. Ich fange bei Null an, also die fortgeschrittenen bitte nicht aufstöhnend jammern: "Och nöö, das wissen wir doch alles schon!" Ihr seid alle Hard-Core-Poster bei Skats. Das sind allerbeste Voraussetzungen. Denn ihr kennt bestimmte Befehle wie den [_quote]BLABLABLA[/_quote] schon so gut wie auswendig und ihr wißt: zwischen zwei eckigen Klammern steht ein Befehl. Ab dort gilt eine Regel, zum Beispiel befehlt ihr mit [_I] die Umschaltung auf Kursivschrift. Der Befehl wird wieder geschlossen, indem man ein [_/I] schreibt. ein / ist also der entsprechende Schließbefehl, und dieses Kommando umschließt nun einen Text. Diesem Text wird ein Format zugewiesen. Erstellt in einem leeren, hübschen Ordner eures Computers eine Text-Datei mit dem Namen "index.html". Öffnet diesen mit eurem Editor (Notepad, Editpad, was immer ihr verwendet). Weil es sich um eine HTML-Datei handelt, wollen wir dem Browser-Programm (also dem Internet-Explorer oder Netscape-Navigator), der die Datei später mal anzeigen soll, sagen, daß es sich um eine HTML-Datei handelt. das sagen wir mit einem freundlichen <_html>. (< Aufpassen! das _ weglassen ) Wie ihr normalerweise auch, hat ein HTML-Datei einen Kopf und einen Körper. Wir geben dem Dokument nun auch einen Kopf mit <_head>, und dort, wo der Kopf aufhört, fängt der Körper an: <_/head> <_body> Der Kopf ist jetzt noch leer. Den füllen wir später. In den Körper kommen nachher auch lauter lustige Sachen. Aber bis dahin kommen wir zum Schluß des Körpers und schreiben <_/body>. Und weil hier das HTML-Dokument aufhört, wird dieses definitiv mit <_/html> beendet. Was bringt uns das? Eine Datei, die so aussieht: Code: <_html> <_head> <_/head> <_body> Hallo Welt! <_/body> <_/html> Das, was nun innerhalb des Body steht, ist das, was ihr später in eurem Browserfenster sehen werdet. Das ist noch nicht viel, drum schreibt mal was rein (zum Beispiel "Hallo Welt!", das kommt immer gut, das machen alle großen Programmierer in ihrem ersten Programm), abspeichern nicht vergessen, und öffnet die Datei mit eurem Browser. Ganz oben links verkümmert steht klein "Hallo Welt!". Ist das nicht erhebend? Nein, ist es nicht, drum machen wir bald weiter und geben dem Weltengruß dann etwas Farbe.

17. February 2002, 18:23	#2
zeus2212 Registriert seit: November 2001 Beiträge: 4.800	hi klasse weitermachen

20. February 2002, 21:05	#3
Paff.Daddy.E_V Ungültige E-Mail Angabe Registriert seit: February 2002 Ort: Berlin Beiträge: 458	Wo bleibt der Rest ??? :confused: Brauche mehr !!!

22. February 2002, 20:05	#4
gismo75 Registriert seit: November 2001 Ort: datteln Beiträge: 773	moin super der erste teil fluppt schon aber wir brauchen mehr input aber ist echt ne super sache weiter so

22. February 2002, 21:50	#5
Akareyon Registriert seit: November 2001 Beiträge: 2.823	Ihr fühlt euch gut, ja? Ihr meint, die Welt des Internet gehört nun euch? Seht schon Counter-Statistiken mit 340 Besuchern täglich auf eurer Seite? Träumt weiter. Ihr seid zwar schon fast fertig, aber etwas fehlt euch noch. Zum Beispiel hättet ihr bestimmt eine Menge Bock auf grelle Farben, oder? Interessanterweise isses beim HTML genauso wie beim Code hier auf dem Board. Angenommen, ihr wollt den Text "Hallo Welt" kursiv haben, setzt ihr ihn in <_b> ("b" steht für bold). Beendet wird der Befehl mit <_/b>. Wenn ihr also nur das "Hallo" fett haben wollt, schreibt ihr <_b>Hallo<_/b> Welt!. Bombastisch, oder? Es geht weiter. <_i> macht den Text kursiv <_u> unterstreicht den Text. Was? Ihr wollt dem Text eine andere Farbe geben? Alright. Probiert mal das hier: <_font color="blue">Hallo Welt!<_/font> Das ist doch phänomenal, oder? Beachtet, wenn ihr den Befehl bereits nach dem "Hallo" schließt, das "Welt!" wieder schwarz ist. Das ist ja soweit alles ganz prima, aber font heißt ja bekanntermaßen "Schrift". Das deutet doch irgendwie an, daß man mit dem Befehl eine Menge Schindluder treiben kann, oder? In der Tat. Wenn euch zum Beispiel die Schrift nun gar nicht gefällt, sagt ihr das einfach und fügt in den Font-Befehl folgendes ein: <_font color="blue" face="Verdana">Wie ihr seht, habt ihr nun eine andere Schrift. Anstatt Verdana könnt ihr natürlich jeden beliebigen Schriftnamen einsetzen, denkt aber daran, daß nicht jeder die gleichen Schriften hat wie Ihr. Es ist also besser, Standard-Schriftarten wie WinDings, Arial, Times New Roman, Courier New, Verdana, Impact, Comic Sans MS oder Symbol zu benutzen. Bereits Dauphin ist nicht mehr in jeder Schriftensammlung vorhanden. Ihr habt jedoch auch die Möglichkeit, zu bestimmen, welche Schrift angezeigt werden soll, wenn auf dem Computer eures Besuchers eine Schrift nicht voranden ist, nämlich so: <_font color= "blue" face="Crappy Gothic, Arial"> Nicht jeder wird die Schriftart "Crappy Gothic" besitzen, also wird in diesem Falle stattdessen die Schriftart "Arial" angezeigt. Genial, nicht? Es geht noch weiter. Als letztes zeige ich euch nämlich wie man die Schriftgröße einstellt! <_font color="blue" face="Verdana" size="2"> Normale Schriftgröße ist 3. 2 ist also etwas kleiner, 1 schon fast nicht mehr zu lesen. 4 eignet sich für Überschriften. Ich persönlich vermeide es, Schriftgrößen über 3 zu nutzen, weil ich mich auf anderen Seiten immer so angeschrien fühle. Eine kleine Schrift liest sich um Klassen angenehmer (und professioneller ) Was gibt's das nächste Mal? 1. ich zeige euch, wie man andere Farben außer "blue", "red", "orange" und yellow etc einstellen kann. Das wird schwierig... 2. Werden wir den Text formatieren: linksbündig, rechtsbündig, zentriert etc...

22. February 2002, 21:54	#6
Paff.Daddy.E_V Ungültige E-Mail Angabe Registriert seit: February 2002 Ort: Berlin Beiträge: 458	huhu super sache das mit den grellen farben echt eh

22. February 2002, 22:59	#7
gismo75 Registriert seit: November 2001 Ort: datteln Beiträge: 773	moin eine frage mal eben wenn ich jetzt den text in grün mit einer fetten kursiven und größeren anderen schrift haben will,wie muss ich das dann eingeben und wie die klammern setzten????

23. February 2002, 00:11	#8
Akareyon Registriert seit: November 2001 Beiträge: 2.823	Gute Frage. Es ist vollkommen egal, ob du den text zuerst mit dem "FONT"-befehl umklammerst oder mit dem "B". Ich habe mir allerdings zur Angewohnheit gemacht, die Fett- und Kursiv-Formatierungen in die FONT-Klammer zu setzen. Schon allein, um zu vermeiden, daß ich klammer eins öffne, klammer zwei öffne, klammer eins schließe und klammer zwei schließe: [ ( ] ) Das geht in der Mathematik schließlich auch nicht, da gehört es sich so: [ ( ) ] (die zuletzt geöffnete Klammer wird als erstes geschlossen) Bei HTML ist es aber eigentlich total Humpe... der Code ist einfach übersichtlicher, wenn man sich gleich anständiges Schreiben angewöhnt...