HTML Tutorial für Anfänger

D_Blade · 14.01.2009, 17:31

Dies ist ein Tutorial. Sie werden erfahren wie Sie mit HTML Homepages erstellen können, und was HTML überhaupt ist.

Inhaltsverzeichnis:
1. Einführung
2. Was ist HTML?
3. Tags und Elemente
4. Ihre eigene Homepage
5. Tabellen

1. Einführung
Die meisten der zahlreichen Menschen, meinen dass es sehr schwierig ist eine eigene Homepage zu erstellen. Aber das stimmt nicht
Jeder Mensch, der ein Computer zu Hause hat, kann es lernen.

Was benötige ich um eine Homepage zu erstellen?

Sie benötigen nur den Editor und einen Browser der in allen Windows schon vorinstalliert ist.
Mehr auch nicht.
Sie fragen sich nun wahrscheinlich, wie man mit dem Editor eine Homepage erstellt, dies erfahren Sie in diesem Tutorial.
Sie benötigen für das Erstellen einer Homepage keine Programmierkenntnisse!

Selbstverständlich kann ich in diesem Tutorial nicht alles zeigen was man mit HTML machen kann.

Welchen Browser sollte ich am besten nehmen?

Der meist verbreitete Browser ist Internet Explorer doch es gibt auch viele andere Browser wie z.B. Opera oder Mozilla-Firefox.

Wo finde ich den Editor?

Sie finden den Editor hier : Start -> Alle Programme -> Zubehör -> Editor
Damit können Sie jetzt anfangen!

2. Was ist HTML?

HTML (=HyperText Mark-up Language) wurde von dem Wissenschaftler Tim Berners-Lee im Jahr 1990 erfunden.
Eigentlich wollte er nur das Wissenschaftler anderer Universitäten schneller und komfortabler auf Forschungsergebnisse anderer
Wissenschaftler zugreifen können.

HTML ermöglicht es Informationen im Internet zu präsentieren.

Um den Quelltext anderer Homepages zu sehen gehen Sie folgendermaßen vor:

1. Öffnen Sie ihren Browser
2. Besuchen Sie eine Homepage
3. Klicken Sie im Browser auf dem Tab "Ansicht"
4. Klicken Sie auf "Quelltext"

Nun müssten Sie den Quelltext sehen können.

3. Elemente und Tags
Nun beginnen wir mit den Basics von HTML - den (Sprach-)Elementen

Tag?
Diese Tags werden benutzt, damit der Browser erkennt wann ein Element anfängt und zu Ende ist.

Alle Tags haben das gleiche Format: Beginnen tun Sie mit einem Kleiner als Zeichen "<" und enden mit einem Größer als Zeichen ">".

Es gibt den Start Tag <body> und den End Tag </body>. Was ist der Unterschied? Der Slash. Er gibt an das
ein Element zu ende ist.

4. Ihre eigene Homepage

Öffnen Sie den Editor wie im 1. Kapitel beschrieben.

Dies ist der "Grundgerüst" des HTML's:
Zuerst wird ein HTML Tag definiert damit der Browser weiß mit was er es zu tun hat:
<html>
Dann wird ein Head Tag definiert dies ist der "Kopf" des Dokuments. Hier kommt alles rein was der Browser nicht anzeigen soll.
<head>
Diesen können wir gleich schließen
</head>
Dann definieren wir den Body Tag dort kommt alles rein was der Browser anzeigen soll.
<body>
Diesen können wir auch gleich schließen
</body>
Als letztes müssen wir den HTML Tag schließen!
</html>

Also sieht der Grundgerüst so aus:

<html>
<head>
</head>
<body>
</body>
</html>

Wenn wir jetzt das Dokument öffnen sehen wir nichts, da dies im Moment nur Tags sind.

Dann möchten wir doch mal den Text "Meine erste Homepage" als Titel anzeigen.
Um dies zu erschaffen benötigen wir den Titel Tag. Diesen erstellen wir so:

<titel>

Dieser Tag muss im Head Tag geschrieben werden.

Also sieht unser Dokument wie folgt aus:

<html>
<head>
<titel>Meine erste Homepage</titel>
</head>
<body>
</body>
</html>

Wie man sieht habe ich zwischen den <titel> Tag und den </titel> Tag den gewünschten Titel geschrieben.
Speichern Sie dies unter index.html
Wenn Sie das Dokument nun öffnen sehen sie den Titel oben gefolgt vom Browsernamen.

Warum soll ich die Datei index.html benennen?
Wenn der Browser eine Indexseite sieht, dann öffnet er diese zuerst.
Damit der Browser diese Datei als HTML-Datei sieht, muss man dahinter .html schreiben.

Nun möchten wir doch ein Text anzeigen.
z.B. "Ich habe nun erfolgreich meine erste Homepage erstellt."
Diesen Text schreiben wir einfach wie gewohnt zwischen den <body> und den </body> Tag.

Sieht wie folgt aus:

<html>
<head>
<titel>Meine erste Homepage</titel>
</head>
<body>
Ich habe nun erfolgreich meine erste Homepage erstellt.
</body>
</html>

Um einen Absatz zu erstellen, benötigen wir den

Tag.
Beispiel:

<html>
<head>
<titel>Meine erste Homepage</titel>
</head>
<body>

Ich habe nun erfolgreich meine erste Homepage erstellt.</p>
</body>
</html>

Dies ist nun ein Absatz.

Um einen Zeilenumbruch zu kreieren, benötigen wir wieder den

Tag:
Beispiel:

<html>
<head>
<titel>Meine erste Homepage</titel>
</head>
<body>
Ich habe nun erfolgreich meine erste Homepage erstellt.

Dies ist ein Absatz
</body>
</html>

Um die Schrift fettig zu machen, benötigen wir den [b] Tag
Beispiel

<html>
<head>
<titel>Meine erste Homepage</titel>
</head>
<body>
Ich habe nun erfolgreich meine erste Homepage erstellt.
</body>
</html>

Um die Schrift zu unterstreichen benötigen wir den <u> Tag
Beispiel:

<html>
<head>
<titel>Meine erste Homepage</titel>
</head>
<body>
<u>Ich habe nun erfolgreich meine erste Homepage erstellt.</u>
</body>
</html>

Um eine Überschrift zu erstellen benötigen wir den <h*> Tag
Dabei ersetzen wir das * mit einer Zahl zwischen 1 und 6
<h1> ist die größte Überschrift und <h6> die kleinste.
Beispiel:

<html>
<head>
<titel>Meine erste Homepage</titel>
</head>
<body>
<h1>Ich habe nun erfolgreich meine erste Homepage erstellt.</h1>
<h2>Ich habe nun erfolgreich meine erste Homepage erstellt.</h2>
<h3>Ich habe nun erfolgreich meine erste Homepage erstellt.</h3>
<h4>Ich habe nun erfolgreich meine erste Homepage erstellt.</h4>
<h5>Ich habe nun erfolgreich meine erste Homepage erstellt.</h5>
<h6>Ich habe nun erfolgreich meine erste Homepage erstellt.</h6>
</body>
</html>

5. Tabellen

Es ist eigentlich ganz einfach eine Tabelle zu erstellen.
Meistens werden auch Tabellen benutzt um professionelle Homepages zu erstellen doch das ist sehr kompliziert.
Um eine Tabelle zu erstellen benötigen Sie den Table Tag Table heißt nichts anderes als Tabelle
Der Table Tag sieht so aus : <table> um es zu beenden </table>
Um eine neue Zeile anzufangen benötigen Sie den TR Tag (tr = Table Row)
In diesen TR Tag benötigen Sie den TD Tag dieser wird benötigt um eine neue Spalte zu erstellen.
Ich habe mal einen Beispiel für euch erstellt. Natürlich kann es auch ganz anders aussehen:

<table>
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
</tr>
<tr>
<td>Zelle 3</td>
<td>Zelle 4</td>
</tr>
</table>

Perfekt! Natürlich kann man die Tabelle dann noch erweitern und z.B. einen dicken Rand machen oder die Hintergrundfarbe wählen...

Fertig! Nun haben Sie ihre eigene Homepage erstellt! Freuen Sie sich wenn Sie das geschafft haben denn von nun an sind Sie
ein HTML-Neuling.

Dies war eigentlich schon alles über die Basics des HTML's
Natürlich können Sie sich auch weitere Tutorials im Web anschauen wenn Sie dies schon gelernt haben.
Es gibt noch eine Menge zu lernen wenn sie professionelle Webseiten erstellen möchten.
Wenn Sie schon alles über HTML wissen dann können Sie auch mit CSS (=Cascading Style Sheet) anfangen.

Fêrbûn · 15.01.2009, 22:53

die html codes kann man immer gebrauchen ich bearbeite nämlich immer sieteb bei myblog.de
wenn man sich gut dmait ausgkennt kommt man da gut klar aber es wäre besser wenn es immer neue html codes hhier vorgestellt werden
ansonsten nochma danke

D_Blade · 16.01.2009, 16:26

Kein Problem. Mal sehen wie es zeitlich wird hier Tutorials einzustellen^^

Pump · 25.02.2009, 09:34

Sehr hilfreiches Tutorial!
Einige Dinge daraus kannte ich noch nicht und bin froh das du es so schön und übersichtlich verfasst hast!
Herzlichen Dank!

D_Blade · 25.02.2009, 22:38

Kein Problem

Nur ist evt. das "siezen" etwas komisch ?( . Sollte ich es vllt doch zu einem duzen oder ähnliches umändern?

Naja, es ist eben neutral geschrieben und soll auch andere Leute, die vllt zufällig über Google kommen mit ansprechen

Pump · 26.02.2009, 10:24

Also an deiner Stelle würde ich auf die "Du" Form umsteigen..
liest sich einfach leichter und viel schöner meiner Meinung nach...
Klingt persönlicher

Rollstuhlfahrer · 06.03.2009, 20:56

soll ich die tage mal sowas machen wie der erste in diesem post ? wird aber dann ein knapp 5 seiten beitrag xD

das was bis jetzt hier drin steht sind ja nur Grundtags später wirds interessanter ^^

D_Blade · 06.03.2009, 21:11

Zitat:

Zitat von 'Pump',index.php?page=Thread&postID=602681#post602 681

Also an deiner Stelle würde ich auf die "Du" Form umsteigen..
liest sich einfach leichter und viel schöner meiner Meinung nach...
Klingt persönlicher

Das habe ich mir auch schon gedacht, aber es kommen auch mal einige aus Google her und bei älteren Herrschaften würde das "Sie" professioneller klingen, glaube ich ^^

Zitat:

Zitat von 'Rollstuhlfahrer',index.php?page=Thread&postID=602 858#post602858

soll ich die tage mal sowas machen wie der erste in diesem post ? wird aber dann ein knapp 5 seiten beitrag xD

das was bis jetzt hier drin steht sind ja nur Grundtags später wirds interessanter ^^

Ja, das darfst du ruhig machen. Damit könntest du bestimmt auch noch anderen helfen =)
Aber wenn es ein 5 Seitenbeitrag wird, dann mach lieber ein neuen Thread auf. Dann hast du mehr Platz

Und die Basics sind ja schließlich der Grundbaustein für alles andere

Weber · 05.04.2009, 17:14

für das weitere lernen empfehle ich:
http://de.selfhtml.org

da findet man einfach alles was man brauch!

mpvie85 · 08.04.2009, 14:02

Super Tutorial. Gute Idee die Codes gleich mit-einzubinden. http://de.selfhtml.org kann ich ebenfalls sehr empfehlen, dort findet man alles was man so braucht.

lg Mike

07.05.2009, 17:22

Es heißt <title>, nicht <titel>

FoRuM2fReAk · 06.06.2009, 00:09

Lol und ich dachte immer dass man dazu tausende Programme braucht...
Danke für das TuT

14.01.2009, 17:31	- 1
D_Blade Neuer Benutzer Registriert seit: 19.11.2008 Beiträge: 0 Abgegebene Danke: 0 Erhielt 0 Danke für 0 Beiträge	Dies ist ein Tutorial. Sie werden erfahren wie Sie mit HTML Homepages erstellen können, und was HTML überhaupt ist. Inhaltsverzeichnis: 1. Einführung 2. Was ist HTML? 3. Tags und Elemente 4. Ihre eigene Homepage 5. Tabellen 1. Einführung Die meisten der zahlreichen Menschen, meinen dass es sehr schwierig ist eine eigene Homepage zu erstellen. Aber das stimmt nicht Jeder Mensch, der ein Computer zu Hause hat, kann es lernen. Was benötige ich um eine Homepage zu erstellen? Sie benötigen nur den Editor und einen Browser der in allen Windows schon vorinstalliert ist. Mehr auch nicht. Sie fragen sich nun wahrscheinlich, wie man mit dem Editor eine Homepage erstellt, dies erfahren Sie in diesem Tutorial. Sie benötigen für das Erstellen einer Homepage keine Programmierkenntnisse! Selbstverständlich kann ich in diesem Tutorial nicht alles zeigen was man mit HTML machen kann. Welchen Browser sollte ich am besten nehmen? Der meist verbreitete Browser ist Internet Explorer doch es gibt auch viele andere Browser wie z.B. Opera oder Mozilla-Firefox. Wo finde ich den Editor? Sie finden den Editor hier : Start -> Alle Programme -> Zubehör -> Editor Damit können Sie jetzt anfangen! 2. Was ist HTML? HTML (=HyperText Mark-up Language) wurde von dem Wissenschaftler Tim Berners-Lee im Jahr 1990 erfunden. Eigentlich wollte er nur das Wissenschaftler anderer Universitäten schneller und komfortabler auf Forschungsergebnisse anderer Wissenschaftler zugreifen können. HTML ermöglicht es Informationen im Internet zu präsentieren. Um den Quelltext anderer Homepages zu sehen gehen Sie folgendermaßen vor: 1. Öffnen Sie ihren Browser 2. Besuchen Sie eine Homepage 3. Klicken Sie im Browser auf dem Tab "Ansicht" 4. Klicken Sie auf "Quelltext" Nun müssten Sie den Quelltext sehen können. 3. Elemente und Tags Nun beginnen wir mit den Basics von HTML - den (Sprach-)Elementen Tag? Diese Tags werden benutzt, damit der Browser erkennt wann ein Element anfängt und zu Ende ist. Alle Tags haben das gleiche Format: Beginnen tun Sie mit einem Kleiner als Zeichen "<" und enden mit einem Größer als Zeichen ">". Es gibt den Start Tag <body> und den End Tag </body>. Was ist der Unterschied? Der Slash. Er gibt an das ein Element zu ende ist. 4. Ihre eigene Homepage Öffnen Sie den Editor wie im 1. Kapitel beschrieben. Dies ist der "Grundgerüst" des HTML's: Zuerst wird ein HTML Tag definiert damit der Browser weiß mit was er es zu tun hat: <html> Dann wird ein Head Tag definiert dies ist der "Kopf" des Dokuments. Hier kommt alles rein was der Browser nicht anzeigen soll. <head> Diesen können wir gleich schließen </head> Dann definieren wir den Body Tag dort kommt alles rein was der Browser anzeigen soll. <body> Diesen können wir auch gleich schließen </body> Als letztes müssen wir den HTML Tag schließen! </html> Also sieht der Grundgerüst so aus: <html> <head> </head> <body> </body> </html> Wenn wir jetzt das Dokument öffnen sehen wir nichts, da dies im Moment nur Tags sind. Dann möchten wir doch mal den Text "Meine erste Homepage" als Titel anzeigen. Um dies zu erschaffen benötigen wir den Titel Tag. Diesen erstellen wir so: <titel> Dieser Tag muss im Head Tag geschrieben werden. Also sieht unser Dokument wie folgt aus: <html> <head> <titel>Meine erste Homepage</titel> </head> <body> </body> </html> Wie man sieht habe ich zwischen den <titel> Tag und den </titel> Tag den gewünschten Titel geschrieben. Speichern Sie dies unter index.html Wenn Sie das Dokument nun öffnen sehen sie den Titel oben gefolgt vom Browsernamen. Warum soll ich die Datei index.html benennen? Wenn der Browser eine Indexseite sieht, dann öffnet er diese zuerst. Damit der Browser diese Datei als HTML-Datei sieht, muss man dahinter .html schreiben. Nun möchten wir doch ein Text anzeigen. z.B. "Ich habe nun erfolgreich meine erste Homepage erstellt." Diesen Text schreiben wir einfach wie gewohnt zwischen den <body> und den </body> Tag. Sieht wie folgt aus: <html> <head> <titel>Meine erste Homepage</titel> </head> <body> Ich habe nun erfolgreich meine erste Homepage erstellt. </body> </html> Um einen Absatz zu erstellen, benötigen wir den Tag. Beispiel: <html> <head> <titel>Meine erste Homepage</titel> </head> <body> Ich habe nun erfolgreich meine erste Homepage erstellt.</p> </body> </html> Dies ist nun ein Absatz. Um einen Zeilenumbruch zu kreieren, benötigen wir wieder den Tag: Beispiel: <html> <head> <titel>Meine erste Homepage</titel> </head> <body> Ich habe nun erfolgreich meine erste Homepage erstellt. Dies ist ein Absatz </body> </html> Um die Schrift fettig zu machen, benötigen wir den [b] Tag Beispiel <html> <head> <titel>Meine erste Homepage</titel> </head> <body> Ich habe nun erfolgreich meine erste Homepage erstellt. </body> </html> Um die Schrift zu unterstreichen benötigen wir den <u> Tag Beispiel: <html> <head> <titel>Meine erste Homepage</titel> </head> <body> <u>Ich habe nun erfolgreich meine erste Homepage erstellt.</u> </body> </html> Um eine Überschrift zu erstellen benötigen wir den <h> Tag Dabei ersetzen wir das mit einer Zahl zwischen 1 und 6 <h1> ist die größte Überschrift und <h6> die kleinste. Beispiel: <html> <head> <titel>Meine erste Homepage</titel> </head> <body> <h1>Ich habe nun erfolgreich meine erste Homepage erstellt.</h1> <h2>Ich habe nun erfolgreich meine erste Homepage erstellt.</h2> <h3>Ich habe nun erfolgreich meine erste Homepage erstellt.</h3> <h4>Ich habe nun erfolgreich meine erste Homepage erstellt.</h4> <h5>Ich habe nun erfolgreich meine erste Homepage erstellt.</h5> <h6>Ich habe nun erfolgreich meine erste Homepage erstellt.</h6> </body> </html> 5. Tabellen Es ist eigentlich ganz einfach eine Tabelle zu erstellen. Meistens werden auch Tabellen benutzt um professionelle Homepages zu erstellen doch das ist sehr kompliziert. Um eine Tabelle zu erstellen benötigen Sie den Table Tag Table heißt nichts anderes als Tabelle Der Table Tag sieht so aus : <table> um es zu beenden </table> Um eine neue Zeile anzufangen benötigen Sie den TR Tag (tr = Table Row) In diesen TR Tag benötigen Sie den TD Tag dieser wird benötigt um eine neue Spalte zu erstellen. Ich habe mal einen Beispiel für euch erstellt. Natürlich kann es auch ganz anders aussehen: <table> <tr> <td>Zelle 1</td> <td>Zelle 2</td> </tr> <tr> <td>Zelle 3</td> <td>Zelle 4</td> </tr> </table> Perfekt! Natürlich kann man die Tabelle dann noch erweitern und z.B. einen dicken Rand machen oder die Hintergrundfarbe wählen... Fertig! Nun haben Sie ihre eigene Homepage erstellt! Freuen Sie sich wenn Sie das geschafft haben denn von nun an sind Sie ein HTML-Neuling. Dies war eigentlich schon alles über die Basics des HTML's Natürlich können Sie sich auch weitere Tutorials im Web anschauen wenn Sie dies schon gelernt haben. Es gibt noch eine Menge zu lernen wenn sie professionelle Webseiten erstellen möchten. Wenn Sie schon alles über HTML wissen dann können Sie auch mit CSS (=Cascading Style Sheet) anfangen.

15.01.2009, 22:53	- 2
Fêrbûn Neuer Benutzer Registriert seit: 13.01.2009 Beiträge: 0 Abgegebene Danke: 0 Erhielt 0 Danke für 0 Beiträge	die html codes kann man immer gebrauchen ich bearbeite nämlich immer sieteb bei myblog.de wenn man sich gut dmait ausgkennt kommt man da gut klar aber es wäre besser wenn es immer neue html codes hhier vorgestellt werden ansonsten nochma danke

16.01.2009, 16:26	- 3
D_Blade Neuer Benutzer Registriert seit: 19.11.2008 Beiträge: 0 Abgegebene Danke: 0 Erhielt 0 Danke für 0 Beiträge	Kein Problem. Mal sehen wie es zeitlich wird hier Tutorials einzustellen^^

25.02.2009, 09:34	- 4
Pump Neuer Benutzer Registriert seit: 24.02.2009 Beiträge: 0 Abgegebene Danke: 0 Erhielt 0 Danke für 0 Beiträge	Sehr hilfreiches Tutorial! Einige Dinge daraus kannte ich noch nicht und bin froh das du es so schön und übersichtlich verfasst hast! Herzlichen Dank!

25.02.2009, 22:38	- 5
D_Blade Neuer Benutzer Registriert seit: 19.11.2008 Beiträge: 0 Abgegebene Danke: 0 Erhielt 0 Danke für 0 Beiträge	Kein Problem Nur ist evt. das "siezen" etwas komisch ?( . Sollte ich es vllt doch zu einem duzen oder ähnliches umändern? Naja, es ist eben neutral geschrieben und soll auch andere Leute, die vllt zufällig über Google kommen mit ansprechen

26.02.2009, 10:24	- 6
Pump Neuer Benutzer Registriert seit: 24.02.2009 Beiträge: 0 Abgegebene Danke: 0 Erhielt 0 Danke für 0 Beiträge	Also an deiner Stelle würde ich auf die "Du" Form umsteigen.. liest sich einfach leichter und viel schöner meiner Meinung nach... Klingt persönlicher

06.03.2009, 20:56	- 7
Rollstuhlfahrer Neuer Benutzer Registriert seit: 06.03.2009 Beiträge: 0 Abgegebene Danke: 0 Erhielt 0 Danke für 0 Beiträge	soll ich die tage mal sowas machen wie der erste in diesem post ? wird aber dann ein knapp 5 seiten beitrag xD das was bis jetzt hier drin steht sind ja nur Grundtags später wirds interessanter ^^

05.04.2009, 17:14	- 9
Weber Neuer Benutzer Registriert seit: 05.04.2009 Beiträge: 0 Abgegebene Danke: 0 Erhielt 0 Danke für 0 Beiträge	für das weitere lernen empfehle ich: http://de.selfhtml.org da findet man einfach alles was man brauch!

08.04.2009, 14:02	- 10
mpvie85 Neuer Benutzer Registriert seit: 07.04.2009 Beiträge: 0 Abgegebene Danke: 0 Erhielt 0 Danke für 0 Beiträge	Super Tutorial. Gute Idee die Codes gleich mit-einzubinden. http://de.selfhtml.org kann ich ebenfalls sehr empfehlen, dort findet man alles was man so braucht. lg Mike

07.05.2009, 17:22	- 11
zufällig hier Gast Beiträge: n/a	Es heißt <title>, nicht <titel>

Werbung
	--

06.06.2009, 00:09	- 12
FoRuM2fReAk Neuer Benutzer Registriert seit: 03.03.2009 Beiträge: 0 Abgegebene Danke: 0 Erhielt 0 Danke für 0 Beiträge	Lol und ich dachte immer dass man dazu tausende Programme braucht... Danke für das TuT

HTML Tutorial für Anfänger

D_Blade

Fêrbûn

D_Blade

Pump

D_Blade

Pump

Rollstuhlfahrer

D_Blade

Weber

mpvie85

FoRuM2fReAk