HTML Tutorial für Anfänger

Quicksilver Style

Beiträge: 145

14.01.2009, 16: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 <p> Tag.
Beispiel:

<html>
<head>
<titel>Meine erste Homepage</titel>
</head>
<body>
<p>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 <p> Tag:
Beispiel:

<html>
<head>
<titel>Meine erste Homepage</titel>
</head>
<body>
Ich habe nun erfolgreich meine erste Homepage erstellt.
<p>
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>
<b>Ich habe nun erfolgreich meine erste Homepage erstellt.</b>
</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.

TOD! - Nr. 1 Killer in Deutschland

Zitieren

sinn

Anfänger

Beiträge: 25

2

15.01.2009, 21:53

ah danke

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

Zitieren

D_Blade

Quicksilver Style

Beiträge: 145

3

16.01.2009, 15:26

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

TOD! - Nr. 1 Killer in Deutschland

Zitieren

Pump

Fortgeschrittener

Beiträge: 305

Wohnort: Bamberg

Beruf: EHK

4

25.02.2009, 08: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!

Live your Life

Zitieren

D_Blade

Quicksilver Style

Beiträge: 145

5

25.02.2009, 21: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

TOD! - Nr. 1 Killer in Deutschland

Zitieren

Pump

Fortgeschrittener

Beiträge: 305

Wohnort: Bamberg

Beruf: EHK

6

26.02.2009, 09: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

Live your Life

Zitieren

Rollstuhlfahrer

Anfänger

Beiträge: 9

7

06.03.2009, 19: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

Zitieren

D_Blade

Quicksilver Style

Beiträge: 145

8

06.03.2009, 20:11

Zitat von »Pump«

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 von »Rollstuhlfahrer«

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

TOD! - Nr. 1 Killer in Deutschland

Zitieren

Weber

Fortgeschrittener

Beiträge: 184

9

05.04.2009, 16:14

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

da findet man einfach alles was man brauch!

Zitieren

mpvie85

Anfänger

Beiträge: 32

Wohnort: Wien

Beruf: Sicherheitsdienst

10

08.04.2009, 13: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