Photoshop
Cinema 4d
Fotografie
Weitere Grafiksoftware
HTML / CSS
JavaScript
Flash
PHP
Webserver
Sonstige
Einführung in HTML (HTML Tutorial)
Tutorial erstellt von cinpix, letzte Änderung am 17.07.2007
HTML - Hypertext Markup Language
Hypertext Markup Language (Abkz. HTML) ist die Programmiersprache, die dafür sorgt, dass Informationen auf
eurem Browser dargestellt werden können. HTML ist eine leicht zu erlernende Programmiersprache, wenn nicht die leichteste!
Vielleicht mag euch das alles etwas kompliziert vorkommen, wenn ihr den Quelltext einer Website betrachtet,
aber in Wirklichkeit ist das alles gar nicht so schwer. Webseiten bestehen aber meistens nicht nur aus purer Hypertext Markup Language,
sondern zusätzlich auch aus CSS, PHP, Javascript oder Flash. Diese Programmiersprachen benötigen meistens aber nur diejenigen,
die eine professionelle Website gestalten möchten.
Als Software für die Programmierung verwenden wir den kostenlosen HTML-Editor ab Phase 5.3! Ihr könnt ihn hier downloaden.
Eine Seite besteht aus dem "head" und dem "body". Im "head" steht der Titel der Website und es können auch noch andere
Informationen enthalten sein, welche für den Betrachter aber nicht sichtbar sind und meistens für Suchmaschinen Bedeutung haben.
Im "head" kann man auch Cascading Syle Sheets definieren.
Im "body" steht der eigentliche Inhalt der Website, der im Browserfenster abgebildet wird.
Hier seht ihr das Grundgerüst eines HTML-Dokuments:
Code:
Dieses Gerüst besteht aus Tags! <html> oder <body> nennt man einen Tag (engl. "täg" gesprochen). Mit ihrer Hilfe werden bestimmte
Elemente identifiziert und Formatierungen festgelegt. Alle HTML-Tags werden von spitzen Klammern umschlossen.
Zum Beispiel </body> wird wegen dem / als geschlossener Tag bezeichnet! Es gibt immer einen offenen und einen geschlossenen Tag.
Nun werde ich euch in das Programm einweisen, mit dem ich bisher schon viel gearbeitet habe und eindeutig sagen kann,
dass es benutzerfreundlich und sehr umfangreich ist, was die eigentliche Programmierarbeit um einiges leichter macht.
Deswegen kann ich es vor allem Anfängern empfehlen, ihre ersten Schritte mit diesem Programm zu versuchen.
Wenn ihr den HTML Editor Phase 5.3 gedownloadet und installiert habt, startet ihn nun bitte.
Einführung in HTML
Jetzt wollen wir mit unserer ersten selber programmierten HTML-Seite beginnen!
Geht unter Datei > Neues HTML Dokument.
Es öffnet sich ein neues Fenster mit dem Titel "Neues Dokument anlegen".
Hier könnt ihr den Titel eurer Website angeben und optionale Angaben, die man am Anfang noch nicht beachten muss,
denn sie sind nur für Suchmaschinen interessant.
Lasst aber alle Angaben offen und drückt auf den Button "Leeres Dokument erstellen".
Nun wollen wir mit der Programmierung beginnen!
Schreibt folgenden Code mit beliebigen Titel und Inhalt im Editor:
Code:
Die Freizeichen dienen lediglich der besseren Übersichtlichkeit.
Speichert dieses Dokument unter Datei > Speichern unter... als Dateityp "HTML-Dateien" mit beliebigen Dateinamen ab.
Beendet den HTML Editor und öffnet euer HTML Dokument. Euer Dokument sieht noch sehr mager aus,
aber ihr habt ja gerade erst angefangen!
Freundliche Grüße!
>> Allgemeine Fragen oder Probleme mit dem Tutorial? Hier gehts zum Forum!
Hypertext Markup Language (Abkz. HTML) ist die Programmiersprache, die dafür sorgt, dass Informationen auf
eurem Browser dargestellt werden können. HTML ist eine leicht zu erlernende Programmiersprache, wenn nicht die leichteste!
Vielleicht mag euch das alles etwas kompliziert vorkommen, wenn ihr den Quelltext einer Website betrachtet,
aber in Wirklichkeit ist das alles gar nicht so schwer. Webseiten bestehen aber meistens nicht nur aus purer Hypertext Markup Language,
sondern zusätzlich auch aus CSS, PHP, Javascript oder Flash. Diese Programmiersprachen benötigen meistens aber nur diejenigen,
die eine professionelle Website gestalten möchten.
Als Software für die Programmierung verwenden wir den kostenlosen HTML-Editor ab Phase 5.3! Ihr könnt ihn hier downloaden.
Grundgerüst
Eine Seite besteht aus dem "head" und dem "body". Im "head" steht der Titel der Website und es können auch noch andere
Informationen enthalten sein, welche für den Betrachter aber nicht sichtbar sind und meistens für Suchmaschinen Bedeutung haben.
Im "head" kann man auch Cascading Syle Sheets definieren.
Im "body" steht der eigentliche Inhalt der Website, der im Browserfenster abgebildet wird.
Hier seht ihr das Grundgerüst eines HTML-Dokuments:
Code:
<html>
<head>
<title>Titel der Website</title>
</head>
<body>
Inhalt der Website
</body>
</html>
<head>
<title>Titel der Website</title>
</head>
<body>
Inhalt der Website
</body>
</html>
Dieses Gerüst besteht aus Tags! <html> oder <body> nennt man einen Tag (engl. "täg" gesprochen). Mit ihrer Hilfe werden bestimmte
Elemente identifiziert und Formatierungen festgelegt. Alle HTML-Tags werden von spitzen Klammern umschlossen.
Zum Beispiel </body> wird wegen dem / als geschlossener Tag bezeichnet! Es gibt immer einen offenen und einen geschlossenen Tag.
Einführung in das Programm "HTML Editor Phase 5.3"
Nun werde ich euch in das Programm einweisen, mit dem ich bisher schon viel gearbeitet habe und eindeutig sagen kann,
dass es benutzerfreundlich und sehr umfangreich ist, was die eigentliche Programmierarbeit um einiges leichter macht.
Deswegen kann ich es vor allem Anfängern empfehlen, ihre ersten Schritte mit diesem Programm zu versuchen.
Wenn ihr den HTML Editor Phase 5.3 gedownloadet und installiert habt, startet ihn nun bitte.
Einführung in HTML
Jetzt wollen wir mit unserer ersten selber programmierten HTML-Seite beginnen!
Geht unter Datei > Neues HTML Dokument.
Es öffnet sich ein neues Fenster mit dem Titel "Neues Dokument anlegen".
Hier könnt ihr den Titel eurer Website angeben und optionale Angaben, die man am Anfang noch nicht beachten muss,
denn sie sind nur für Suchmaschinen interessant.
Lasst aber alle Angaben offen und drückt auf den Button "Leeres Dokument erstellen".
Nun wollen wir mit der Programmierung beginnen!
Schreibt folgenden Code mit beliebigen Titel und Inhalt im Editor:
Code:
<html>
<head>
<title>Meine erste Website</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
<head>
<title>Meine erste Website</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
Die Freizeichen dienen lediglich der besseren Übersichtlichkeit.
Speichert dieses Dokument unter Datei > Speichern unter... als Dateityp "HTML-Dateien" mit beliebigen Dateinamen ab.
Beendet den HTML Editor und öffnet euer HTML Dokument. Euer Dokument sieht noch sehr mager aus,
aber ihr habt ja gerade erst angefangen!
Freundliche Grüße!
>> Allgemeine Fragen oder Probleme mit dem Tutorial? Hier gehts zum Forum!
