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.

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.

HTML Tutorial für Anfänger

D_Blade