Push-Nachrichten von MacTechNews.de
Würden Sie gerne aktuelle Nachrichten aus der Apple-Welt direkt über Push-Nachrichten erhalten?
Journals>Stefans Kiste>Deine erste Website - Teil 1

Deine erste Website - Teil 1

Deine erste Website
... geht ganz einfach.

Websites, also Dateien/Dokumente, die in Webbrowsern dargestellt werden sollen, sind html-Dateien. Ein simples
<html>
in einen Texteditor eingeben und als website.htm abgespeichert, ist bereits ein html-Dokument, aber noch kein sinnvolles.

Da soll ja was drinstehen, was angezeigt werden soll. z.B.: "Hallo MTN-Leser".
Jetzt muß man noch wissen, dass die Befehle und Darstellungshinweise für die Maschine in spitze Klammern zu schreiben sind und man der Maschine sagen muss, wo das Ende des jeweiligen Befehls-Bereiches ist: das wird mit einem Schrägstrich angezeigt:
</html>
markiert also das Ende einer html-Datei.

Und wie bei den meisten anderen Dateien auch, kriegt die Datei einen Kopfbereich für diverse Informationen zur Datei selbst ( <head> ) und dann einen Körper ( <body> ), also den eigentlichen Hauptteil in dem dann z.B. "Hallo MTN-Leser" zur Anzeige gebracht werden soll.

Here we go:
<html>
<head>
</head>
<body>
Hallo MTN-Leser
</body>
</html>
Diese Zeilen in einen Texteditor einfügen (in Textedit unbedingt auf Format"in reinen Text umwandeln" gehen), die Datei mit Endung .html (oder nur .htm) abspeichern und diese Datei auf Safari schieben (also. in Safari öffnen)
und schon lächelt uns:
Hallo MTN-Leser
an.

Das war es dann auch schon, so funktioniert html.

Und das kannst Du also jetzt auch.

Und damit es noch etwas mehr Spaß macht, ein paar weitere Befehle (bzw tags, Einzahl: tag, so heißen die spitzen geklammerten Befehle in Englisch):
  • <b> bedeutet "bold" und ist Fettdruck, und der Bereich wird beendet mit </b>
  • <i> bedeutet "italics" und ist Schrägdruck </i>
  • <br> heißt der Zeilen-Umbruch. Wenn man einen will, muß man ihn eingeben. Dieses tag braucht kein Ende.
  • <h1> Ueberschrift (headline 1.Größe) groooß geschrieben </h1>
Und der Website geben wir noch einen Titel, der muß in den <head>-Bereich und wird oben im Browser angezeigt.

Also folgendes jetzt in die Datei kopieren (in reinen Text umwandeln nicht vergessen), mit .htm als Endung speicher und rein in damit in Safari (Reload-Button?):
<html>
<head>
<title>Meine erste Website</title>
</head>
<body>
<h1>Es kann losgehen</h1>
Hallo MTN-Leser. Das ist meine erste Website. 
Hallo MTN-Leser. Das ist meine erste Website <br>
Hallo MTN-Leser. Das ist meine <b>erste Website</b><br>
Hallo MTN-Leser.<br><br> Das ist <i>meine erste <b>Website</b></i>
</body>
</html>
Falls Interesse besteht, schreibe ich mehr, z.B. wie man Umlaute hinkriegt und Links, Bilder... Das hier war nur zum Anfixen.

Im Übrigen gibt es ein wunderbare Website zum Thema html, die wohl jeder html-"Programmierer" kennt: selfhtml.org , bzw.: Da stehen alle weiteren Befehle drin.

Und: angefixt? Hier ist der 2.Teil:

Kommentare

OS10.505.02.08 10:19
hey, danke für's Anfixen .
Hat echt spass gemacht, es zu lesen!
Martin Springer05.02.08 11:08
Schließem mich an! Genaun das richtige für jemanden der gar keine Ahnung hat! Ich bin für MEHR!
Schildie
Schildie05.02.08 13:09
Hübsch.

Allerdings würde ich das ganze lieber W3C-konform aufziehen. Das jetzt schon beim ersten Post so ein bisschen zu missachten, finde ich schade.

Aber sonst: Nett.
Moe99999
Moe9999905.02.08 14:09
jaja.. die html Programmierer aber ganz nett gemacht.

Solltest vielleicht noch kurz hinschreiben wozu man den head und den body braucht
42
macguy05.02.08 15:57
Moe99999: Den Body braucht man zum Angeben.
Moe99999
Moe9999905.02.08 16:02
als grabstein Spruch
< / life >


42
nornje
nornje05.02.08 16:41
super! vielen dank )
Time Flies Like an Arrow; Fruit Flies Like a Banana (Groucho Marx)
Stefan S.
Stefan S.05.02.08 17:50
Danke.
Zunächst wollte ich mal kurz das Prinzip darstellen. Da gleich mit W3C-konform Doctype bla und IE5.5 zu kommen verwirrt und schreckt ab.
Demnächst mache ich dann mal einen zweiten Teil.
Stefan S.
Stefan S.05.02.08 17:56
body und head habe ich noch besser dargestellt. Danke für den Hinweis Moe99999. "Programmierer" klingt besser als äh ja was eigtl.?
Moe99999
Moe9999905.02.08 18:13
webdesigner
42
Stefan S.
Stefan S.05.02.08 18:22
Design kommt erst später Teil 3 oder so
bernddasbrot
bernddasbrot06.02.08 11:47
Ich würde einige übergeordnete Tipps einbauen. Man braucht für eine Webseite (der Titel ist ja "Deine erste eigene Webseite") nicht nur Spitzklammern und ein paar befehle, sondern vor allem auch eine Idee, einen Plan, Vürüberlegungen, die man anstellen sollte.

Nette Idee, freundlich gemacht (obwohl es ja schon ein paar tausend solcher Anleitungen gibt.).
Stefan S.
Stefan S.06.02.08 12:04
Ich möchte vermitteln, dass man sieht, "auja, das kann ich auch."
Denn so habe ich auch angefangen. Reines Lustprinzip!

"Lernen Sie CSS, HTML und Javascript und stellen sie Vorüberlegungen zu Design und Usability und Inhalt ihrer Webpräsenz an" ist - äh - sozusagen ein anderer Ansatz.
bernddasbrot
bernddasbrot06.02.08 12:12
OK, das hatte ich nicht gemeint. Ich habe selber gemerkt, dass es wichtig ist, zu überlegen, was ich der Welt mitteilen möchte. Welche Bilder, Filme, Titel, Themen, Inhalte habe ich, die ich darstellen möchte.

Sonst hat man am Ende nur Blindtext à la test1, test2, test3, mal fett, mal kursiv.

Man braucht auch eine inhaltliche Motivation. Man kann auch Excel nicht lernen, wenn man keine ZAhlen hat, keine Idee, was man darstellen, errechnen oder erfassen möchte.

Nur so als Anstoss.
Stefan S.
Stefan S.06.02.08 12:24
Das stimmt schon. Mein Ausgangspunkt ist eher zu zeigen, dass html einfach ist, selber "programmieren" Spaß macht und man kein Adobe GoLive braucht. Mein Fokus liegt also mehr auf "Do It Yourself" als auf "Gute Webpräsenz". Später, wenn es ernster wird, kann man ja immer noch (bzw. sollte man dann auch) überlegen was man eigtl. sagen/zeigen/veröffentlichen wollte.
Stefan S.
Stefan S.06.02.08 12:27
Man braucht auch eine inhaltliche Motivation
Nicht unbedingt. Bsp.:
Erst als es die Möglichkeit zu Journalen gab, habe ich angefangen zu überlegen, ob das was für mich wäre.
lanz2407.02.08 11:40
Ich finde den Ansatz von Stefan S. sehr gut. Es ist kein Journal für Experten sondern für
"Deine erste Website"
Learning by doing, mit Spiel hat alles angefangen.
Die Ratio und der analytische Ansatz kann erst Erfolg haben, wenn ich genug gespielt und erfahren habe,
wenn ich eine auch nur vage Vorstellung habe.

Der Mensch lebt erst mal empirisch, erst wenn er damit nicht weiter kommt nimmt er sein Verstand.
karatekid2393
karatekid239307.02.08 16:31
hii...

super journal...wollte schon immer html programmieren bzw ein bisschen wissen wies geht und was dreamweaver usw da so herumschreibt...vielen, vielen dank für die einführung und schreib unbedingt ein weiteres !!!

lg
bernddasbrot
bernddasbrot08.02.08 14:04
karatekid2393

Schau mal hier, da sind auch praktische Beispiele, alles zum Ausprobieren (innerhalb es Tutorials):

Die Textversion:
http://www.boku.ac.at/htmleinf/hein.html

Interaktive Version mit Online-Übungen:
http://art.ph-freiburg.de/HTML-Tutor/login-d.html

Aber man kann natürlich auch ein Rad erfinden.

Stefan S.
Stefan S.08.02.08 15:15
bernddasbrot
der erste Link ist tot, das zweite Tutorial ist nicht wirklich ein "niederschwelliges" Angebot Login, mit Tutorial fürs Tutorial...
bernddasbrot
bernddasbrot11.02.08 11:31
Bei mir geht der erste Link () problemlos.

Das sog. "Login" gab es früher nicht, aber man kann da eintragen, was man will, ist völlig egal.

Ist ja auch egal, habe ja gar nichts gegen die 10527. Auflistung von html-tags mit Kommentaren.

Gerhard Uhlhorn15.02.08 12:59
Und ich dachte, dass man heute Websites mit RapidWeaver oder iWeb macht. Ich dachte, dass diese Art Websites zu machen längst überwunden ist.
DerTom31.08.09 00:53
tolles journal

Kommentieren

Sie müssen sich einloggen, um diese Funktion nutzen zu können.