Die ersten Schritte zur eigenen Homepage - Cage - - Paules-PC-Forum.de

**Paule** · 14.11.2008, 12:39

Autor: Cage

html-tutorial

Einführung
Immer hört man den Wunsch nach einer eigenen Homepage. Darum habe ich mich entschlossen, ein Tutorial über das Thema zu schreiben.
Es gibt verschiedene Möglichkeiten zur eigenen Homepage: Ein Blog zum Beispiel ist leicht und schnell zu aktualsieren, es fehlen aber viele Möglichkeiten.

Auch gibt es Programme, mit denen man seine eigene Page quasi zusammenklicken kann. Leider fehlen auch ihr Gestaltungsmöglichkeiten...
Die eleganteste Methode zur eigenen Homepage ist, den Quellcode selber zu schreiben. Dies ist zwar mit ein wenig Aufwand verbunden, macht aber (meiner Ansicht nach) auch am meisten Spaß.

Jede Internetseite hat einen Quellcode (Rechtsklick => Quelltext anzeigen). Dieser Code wird vom Browser in die Internetseite umgewandelt.
Alles, was du für eine Internetseite benötigst, ist einen Editor (z.B. der Windows Editor; Start=> ausführen=> notepad eingeben / Start=> Programme=> Zubehör=> Editor) und einen Browser.
Das Format für Internetseiten ist .html oder .htm. Der einzige Unterschied ist, dass ältere Betriebssysteme das .html nicht akzeptieren, da es vierstellig ist.

Grundgerüsst
Tippe den folgenden Code in einen Editor und speichere die Datei als irgendwas.html. Achtung: Du solltest den Code jeweils abtippen, nicht kopieren! Grund: Beim abtippen lernt man deutlich mehr als beim kopieren...

Code:

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

Wenn du jetzt auf die neue Datei doppelklickst, sollte sie sich im Browser öffnen. Natürlich ist noch nichts zu sehen.
Jede Internetseite beginnt mit einem <html> und endet mit einem </html>. Solche Befehle nennen sich Tags. Die meisten Tags müssen mit einem / in den spitzen Klammern beendet werden.
<head> deklariert den Kopf der Seite. Hier kann z.B. das Layout definiert werden. Außerdem findet hier das <titel>-Tag seinen Platz. Der Titel wird später ganz oben in der Leiste des Browsers angezeigt.
Der Text, der hinterher auf dem Bildschirm erscheint, wird in den <body></body> Bereich eingegeben.

Also:

Code:

<html>
<head>
<title>
Meine erste Internetseite
</title>
</head>
<body>
Hallo, dass hier ist meine erste Internetseite :)
</body>
</html>

Mehr zum Grundgerüst

Zeilenumbrüche
Ein normaler Zeilenumbruch mit der Entertaste wird ignoriert. Stattdessen gibt es das Tag <br>. Das Tag muss, wenn man in reinem html schreibt, nicht geschlossen werden (also nicht: </br> ).

Code:

<body>
Erste Zeile
<br>
Zweite Zeile
</body>

Mehr zu Zeilenumbrüchen

Absätze
Für einen Absatz gibt es <p> und </p>

Code:

<body>
<p>
Ein Absatz
</p>
<p>
Noch einer
</p>
</body>

Mehr zu Absätzen

Text hervorheben
Ein Text soll fett, kursiv, unter- oder durchgestrichen dargestellt werden? Kein Problem.
Fett: <b></b> (das b steht für bold)
Kursiv: <i></i> (i für italic)
Unterstrichen: <u></u> (u für underlined)
Durchgestrichen: <s></s> (s für strike)

Achtung, nicht die Endtags vergessen, sonst wird zum Beispiel alles fett angezeigt.

Beispiel:

Code:

<body>
<b>fett</b><br>
<i>kursiv</i><br>
<u>unterstrichen</u><br>
<s>durchgestrichen</s><br>
</body>

Überschriften
Auch verschieden große Überschriften sind mit html kein Problem. Sie werden mit <h1></h1> bis <h6></h6> definiert. <h1> ist die größte Überschrift, <h6> die kleinste.

Beispiel:

Code:

<body>
<h1>Eine gro&szlig;e Überschrift</h1><br>
<h3>Eine mittlere Überschrift</h3><br>
<h6>Eine sehr kleine Überschrift</h6>
</body>

Umlaute
Umlaute wie ä, ö, ü und ß werden von Browsern oft nicht dargestellt. Stattdessen sind, wie im Beispiel zu den Überschriften zu sehen, besondere Zeichenfolgen zu verwenden.

Zeichen Ersetzung
ä ä
Ä Ä
ö ö
Ö Ö
ü ü
Ü Ü
ß ß

Mehrere Leerzeichen hintereinander werden zu einem zusammengefasst. Ein Leerzeichen erzwingt man mit .

Beispiel:

Code:

<body>
Ein gro&szlig;es &Auml;<br>
Ein kleines &uuml;
</body>

Texte ausrichten
Standartmäßig ist ein Text linksbündig. Dies kann man mit dem Tag <div align="center"></div> und <div align="right"></div> ändern. Center steht für zentriert, right für rechtsbündig. <div align="justify"></div> deklariert einen Blocksatz.

Beispiel:

Code:

<body>
Dieser Text ist linksbündig.<br>
<div align="center">Dieser Text ist zentriert</div><br>
<div align="right">Dieser Text ist rechtbündig</div>
</body>

Listen
Listen werden oft bei Aufzählungen verwendet. Die einzelnen Listenpunkte werden einzeln von <li></li> ausgezeichnet. Alle Listenpunkte müssen noch einmal von einem Tag umklammert werden, um die Listenart zu definieren.
<ul> erzeugt einen kleinen schwarzen Punkt vor dem Text
<ol> erzeugt eine nummerierte Liste, also 1. 2. 3. usw.

Beispiel:

Code:

<body>
<ul>
<li>Punkt 1</li>
<li>Punkt 2</li>
<li>Punkt 3</li>
</ul>
<ol>
<li>nummeriert 1</li>
<li>nummeriert 2</li>
<li>nummeriert 3</li>
</ol>
</body>

Trennlinien
Eine Trennlinie ist eine einfache Linie, die verschiedene Inhalte/Themen trennt. Sie wird mit <hr> erzeugt. Dazu gibt es noch eine Reihe an Attributen. Diese werden einfach, mit einem Leerzeichen getrennt, hinter das hr gesetzt.
noshade => Die Linie wird unschattiert dargestellt.
width="100" => Die Linie hat eine Breite (Länge) von 100 Pixeln (width = Breite)
size="3" => Dieses Attribut bestimmt die Dicke der Linie. 2 ist der Standartwert, d.h., 1 bildet eine besonders dünne Linie, alles über 2 eine dickere.
color="red" => Damit kann der Trennlinie eine Farbe zugewiesen werden, hier z.B. rot. Mehr zu den veschiedenen Farben im Bereich "Farben". Achtung: Dieses Attribut wird nur vom Internet Explorer interpretiert.

Beispiel:

Code:

<body>
<p>
Ein Thema
</p>
<hr>
<p>
Ein anderes Thema
</p>
<p>
Eine ganz tolle Trennlinie:<br>
<hr noshade width="300" size="5" color="red">
</body>

Mehr zu Listen

Lauftext
<marquee></marquee> definiert einen Lauftext. Aber Vorsicht, ein solcher Text kann extrem ablenkend und damit störend sein. Außerdem ist dieses Tag kein html Standart und wird z.B. vom Opera nicht interpretiert.

Beispiel:

Code:

<body>
<marquee>
Ein Lauftext
</marquee>
</body>

Farben
Es gibt einmal festgelegte Namen für Farben, z.B. "blue" oder "yellow". Alle Farben, für die kein Namen festgelegt wurde, werden mit einem hexadezimalen Wert angegeben. Diese Farbnamen sehen so aus: #RRGGBB . Die beiden R stehen für den Rotanteil der Farbe, die Gs für den Grün und die Bs für den Blauanteil.
Einen kleinen Überblick gibt es hier.

Hintergrundfarbe
Die Hintergrundfarbe einer Seite kann im <body> definiert werden. Dazu einfach bgcolor="farbe" hinzufügen. Statt "farbe" muss ein hexadezimaler Wert oder ein html-Farbname eingefügt werden.

Beispiel:

Code:

<body bgcolor="red">
</body>

Hintergrundbild
Anstatt einer Farbe kann auch ein Bild als Hintergrund dienen. Dieses ist mit dem Attribut background="bild" zu verwirklichen. Das Bild muss im gleichen Verzeichnis liegen wie die html-Datei und sollte das Format .jpg oder .gif haben.

Beispiel:

Code:

<body background="hintergrund.jpg">
</body>

Schriftfarben
Die Standartschriftfarbe ist schwarz. Um sie zu ändern, wird das Tag <font color="farbe"></font> benötigt.

Beispiel:

Code:

<body>
<font color="red">
Ein roter Text
</font>
</body>

Grafiken einfügen
Grafiken werden mit dem img-Tag eingebunden. Genauer: <img src="bild"> . Die Grafik sollte im .jpg- oder .gif-Format vorliegen und muss im gleichen Verzeichnis wie die html-Datei gespeichert sein. Andernfalls muss dieses im Pfad berücksichtigt werden, also z.B. <img src="bilder/bild.jpg">. Um einen Ordner abwärts zu navigieren, werden zwei Punkte gesetzt, also <img src="../bilder/bild.jpg">.
Dazu gibt es noch eine Reihe von Attributen:
height="Höhe in Pixel"
width="Breite in Pixel"
border="zahl" => Definiert die Rahmendicke des Bildes.
alt="Wenn die Grafik nicht angezeigt werden kann, steht dort stattdessen dieser Text"
align="right" => Bestimmt die Ausrichtung der Grafik. Weitere Werte: top, middle, bottom.

Beispiel:

Code:

<body>
<img src="bild.jpg" alt="Ein Bild..."><br>
<img src="bild2.jpg" width="100" height="100" alt="Ein anderes Bild..."><br>
<img src="bild3.jpg" border="0" align="top" alt="Ein nach oben ausgerichtetes Bild ohne Rahmen">
</body>

Mehr zu Grafiken

Verweise
Mit Verweisen (Links) lassen sich Seiten miteinander verknüpfen.
Einen Link auf eine andere Seite benötigt folgenden Code:

Code:

<a href="http://www.paules-pc-forum.de">Ein ganz tolles Forum</a>

Die Adresse zu der anderes Seite muss in Anfühungsstrichen hinter dem href stehen. Der Text, der später vom User angeklickt werden kann, folgt außerhalb der abschließenden spitzen Klammer (hier: Ein ganz tolles Forum).
Wenn die Seite in einem neuen Fenster geöffnet werden soll, muss das Attribut target="_blank" hinzugefügt werden. Also:

Code:

<a href="http://www.paules-pc-forum.de" target="_blank">Super Forum</a>

Auf diese Weise können auch Seite innerhalb einen Projektes verlinkt werden. Beispiel: index.html und uebermich.html

index.html:

Code:

<body>
<p>
Hallo, Herzlich Willkommen auf meiner Homepage!
</p>
<p>
<a href="uebermich.html">&Uuml;ber mich</a>
</p>
</body>

uebermich.html:

Code:

<body>
<p>
Hallo, ich bin der Cage... ;)
</p>
<p>
<a href="index.html">Home</a>
</p>
</body>

In diesem Beispiel wird also die Startseite des Projektes mit der Seite Über mich verknüpft. Dadurch lässt sich innerhalb eines Projektes durch die verschiedenen Seiten navigieren. Die Seiten müssen sich entweder im gleichen Verzeichnis befinden oder das Verzeichnis muss mit angegeben werden.
Beispiel:

Code:

<a href="uebermich/uebermich.html">&Uuml;ber mich</a>

Um in der Verzeichnisstruktur einen Ordner nach unten zu gehen, müssen in der Adresse zwei Punkte notiert werden.
Beispiel:

Code:

<a href="../uebermich.html">&Uuml;ber mich</a>

Bilder verlinken
Natürlich lassen sich auch Bilder verlinken. Wenn man z.B. einen Text hat, der auf der nächsten Seite weitergehen soll, würde es sich anbieten, einen Pfeil zu verlinken.

Code:

<a href="seite.html"><img src="bild.jpg"></a>

Linkfarben
Farben von Verweisen lassen sich folgendermasen definieren:

Code:

<body link="red" vlink="green" alink="yellow">
</body>

link="red" steht für die ursprüngliche Farbe des Verweises, in diesem Fall Rot.
vlink="green" bedeutet, dass der Verweis, nach dem er besucht (angeklickt) worden ist, die Farbe Grün annimmt (vlink = visited link)
alink="yellow": Wenn der Link angeklickt ist, nimmt er die Farbe Gelb an (alink = active link)

Mehr zu Verweisen

Tabellen
Mit Tabellen können z.B. Daten übersichtlich präsentiert werden.
Alle Tabellen werden mit dem Tag <table> begonnen und mit </table> beendet. Mit dem Attribut border lässt sich die Rahmendicke der Tabelle angeben (also z.B. <table border="1"> ).
Eine neue Tabellenzeile (waagerecht) wird mit <tr> erzeugt. An das Ende jeder Zeile kommt das Tag </tr>.
Eine neue Zelle kann mit <td></td> erzeugt werden. Zusätzlich gibt es noch <th></th>. Dieses Tag ist optional und wird in der ersten Zeile der Tabelle eingesetzt (das h steht für head).

Code:

<table border="2">
<tr>
<th>
Name
</th>
<th>
Alter
</th>
<th>
Ort
</th>
</tr>
<tr>
<td>
Max Mustermann
<td>
Monika Mustermann
</td>
<td>
Max Mustermann Junior
</td>
</tr>
<tr>
<td>
40
</td>
<td>
38
</td>
<td>
11
</td>
</tr>
<tr>
<td>
Berlin
</td>
<td>
Dresden
</td>
<td>
Hinterm Mond
</td>
</tr>
</table>

Mehr zu Tabellen

Frames
Frames unterteilen die Seite in mehrere Bereiche. Diese Bereiche sind wiederum einzelne html-Dateien. Die Frames (Frameset) werden in einer seperaten Datei definiert.
Das Frameset beginnt mit <frameset> und endet mit </frameset> (normal...

). Hier werden die einzelnen Bereiche angegeben, entweder Reihen oder Spalten. Die Tags heißen dann <frameset rows="Wert"> und/oder <frameset cols="Wert">. "Wert" wird durch eine Pixel oder Prozentangabe ersetzt, wobei Prozentangaben wegen unterschiedlicher Bildschirmgrößen und im Sinne eines baierrefreien Webs sicherlich zu bevorzugen sind.
Falls der User einen Browser benutzt, der Frames nicht darstellen kann oder Frames deaktiviert hat, sollte man einen Alternativtext angeben. Dies wird mit <noframes><body>Alternativtext</body></noframes> realisiert.

Code:

<html>
<head>
<title>
Achtung, einen aussagekräftigen Titel wählen, da dieser die ganze Zeit angezeigt wird.
</title>
</head>
<frameset cols="15%, 85%">
<noframes>
<body>
Diese Seite verwendet Frames, welche von ihrem Browser nicht dargestellt werden können. Bitte verwenden Sie einen anderen Browser.
</body>
</noframes>
</frameset>
</html>

Jetzt sollten im Browser zwei Frames angezeigt werden, ein schmaler links und ein breiter rechts. Allerdings haben diese Frames noch keinen Inhalt. Der Inhalt kommt in eine seperate Datei. Diese Datei wird im jeweiligen Frame mit <frame="datei.html"> geöffnet. Ein End-Tag wird nicht benötigt.

Beispiel für eine Seite mit zwei Frames, links die Navigation und rechts den Inhalt:

index.html

Code:

<html>
<head>
<title>
Homepage von Karl Heinz Müller
</title>
</head>
<frameset cols="15%, 85%">
<frame="navigation.html">
<frame="home.html">
<noframes>
<body>
Diese Seite verwendet Frames, welche von ihrem Browser nicht dargestellt werden können. Bitte verwenden Sie einen anderen Browser.
</body>
</noframes>
</frameset>
</html>

navigation.html

Code:

<html>
<head>
<title>
Unwichtig, da er sowie so nicht angezeigt wird
</title>
</head>
<body>
<p>
<b>Navigation</b>
</p>
<p>
<a href="home.html">Startseite</a><br>
<a href="ueber_mich.html">Über mich</a><br>
<a href="impressum.html">Impressum</a>
</p>
</body>
</html>

home.html

Code:

<html>
<head>
<title>
Unwichtig, da er sowie so nicht angezeigt wird
</title>
</head>
<body>
<p>
<h1>
Herzlich Willkommen!
</h1>
</p>
<p>
Hi, ich bin der Karl Heinz Müller und das ist meine Homepage
</p>
</body>
</html>

Damit die Links aus dem Frame "navigation" im rechten geöffnet werden, ist es nötig, den Frames Namen zu geben und ein Ziel für die Links zu definieren.

index.html

Code:

<frameset cols="15%, 85%">
<frame="navigation.html" name="navigation">
<frame="home.html" name="inhalt">

Durch das name="inhalt" bekommt der rechte Frame den Namen inhalt.

Code:

<p>
<a href="home.html" target="inhalt">Startseite</a><br>
<a href="ueber_mich.html" target="inhalt">Über mich</a><br>
<a href="impressum.html" target="inhalt">Impressum</a>
</p>

Durch das target="inhalt" wird bestimmt, dass dieser Verweiß im Frame mit dem Namen inhalt geöffnet werden soll (target = Ziel)
Wenn sowie so alle Verweise in einem anderen Frame geöffnet werden sollen (z.B. bei so einer Navigation wie im Beispiel), kann man sich durch einen Trick viel Tipparbeit ersparen: Einfach <base target="inhalt"> in den Head schreiben. Dieses Tag bewirkt, dass alle Verweise dieser Seite (also dieses Frames) im Frame mit dem Namen inhalt geöffnet werden.

navigation.html

Code:

<head>
<title>
Immer noch unwichtig
</title>
<base target="inhalt">
</head>
<body>
<a href="home.html">Startseite</a>

Den (hässlichen) Rahmen zwischen den Frames vermeiden? Kein Problem. Einfach frameborder="0" framespacing="0" border="0" mit in das <frameset> Tag schreiben.

Code:

<frameset cols="15%, 85%" frameborder="0" framespacing="0" border="0">

Mehr zu Frames

Seite online stellen
Um die erstellte Seite ins Web zu stellen, braucht man als erstes einen Webspace und ein FTP-Programm.
Webspace ist Speicherplatz auf Computern (Servern), die ständig mit dem Internet verbunden sind. Auf diesen Speicherplatz läd man sein Projekt, um es für den User ständig zugänglich zu machen. Webspace wird bei sogenannten Providern gemietet. Es gibt auch kostenlosen Speicherplatz, dann allerding meißtens mit Werbung. Eine umfangreiche Liste gibt es hier.
Um seine Seiten, Grafiken und sonstiges auf seinen Webspace laden zu können, benötigt man ein FTP-Programm. Empfehlenswert ist z.B. Filezilla.
Oben gibt man die Daten ein, die man von seinem Provider bekommt ein und klickt auf "Connect" (Verbinden). Auf der linken Seite sieht man nun den Inhalt seines Computers, rechts die Dateien auf dem Server.
Per Drag und Drop werden die Dateien auf den Server hochgeladen.
Jetzt wird nur noch eine Domain (Internetadresse) benötigt. Auch diese sind kostenplichtig, aber auch hier gibt es kostenlose, z.B. bei de|nic|vu - Kostenlose Domains für alle! - Herzlich willkommen! (www.nic.de.vu) - Kostenlose Domain - Free Domain - Gratis Domain (Werbung lässt sich abstellen).

Links
www.de.selfhtml.org Eine komplette Referenz über das Thema html

So, das wars erstmal, Ergänzungen zu CSS, Formularen usw. folgen in Kürze.
Kritik, Anregungen und Lob bitte per PN, Fragen ins Forum.

© Clemens Holtmann

14.11.2008, 12:39	#1 (Direktlink)
Paule Moderator Registriert seit: 27.10.2008 Beiträge: 4.434	Die ersten Schritte zur eigenen Homepage - Cage - Autor: Cage html-tutorial Einführung Immer hört man den Wunsch nach einer eigenen Homepage. Darum habe ich mich entschlossen, ein Tutorial über das Thema zu schreiben. Es gibt verschiedene Möglichkeiten zur eigenen Homepage: Ein Blog zum Beispiel ist leicht und schnell zu aktualsieren, es fehlen aber viele Möglichkeiten. Auch gibt es Programme, mit denen man seine eigene Page quasi zusammenklicken kann. Leider fehlen auch ihr Gestaltungsmöglichkeiten... Die eleganteste Methode zur eigenen Homepage ist, den Quellcode selber zu schreiben. Dies ist zwar mit ein wenig Aufwand verbunden, macht aber (meiner Ansicht nach) auch am meisten Spaß. Jede Internetseite hat einen Quellcode (Rechtsklick => Quelltext anzeigen). Dieser Code wird vom Browser in die Internetseite umgewandelt. Alles, was du für eine Internetseite benötigst, ist einen Editor (z.B. der Windows Editor; Start=> ausführen=> notepad eingeben / Start=> Programme=> Zubehör=> Editor) und einen Browser. Das Format für Internetseiten ist .html oder .htm. Der einzige Unterschied ist, dass ältere Betriebssysteme das .html nicht akzeptieren, da es vierstellig ist. Grundgerüsst Tippe den folgenden Code in einen Editor und speichere die Datei als irgendwas.html. Achtung: Du solltest den Code jeweils abtippen, nicht kopieren! Grund: Beim abtippen lernt man deutlich mehr als beim kopieren... Code: <html> <head> <title> </title> </head> <body> </body> </html> Wenn du jetzt auf die neue Datei doppelklickst, sollte sie sich im Browser öffnen. Natürlich ist noch nichts zu sehen. Jede Internetseite beginnt mit einem <html> und endet mit einem </html>. Solche Befehle nennen sich Tags. Die meisten Tags müssen mit einem / in den spitzen Klammern beendet werden. <head> deklariert den Kopf der Seite. Hier kann z.B. das Layout definiert werden. Außerdem findet hier das <titel>-Tag seinen Platz. Der Titel wird später ganz oben in der Leiste des Browsers angezeigt. Der Text, der hinterher auf dem Bildschirm erscheint, wird in den <body></body> Bereich eingegeben. Also: Code: <html> <head> <title> Meine erste Internetseite </title> </head> <body> Hallo, dass hier ist meine erste Internetseite :) </body> </html> Mehr zum Grundgerüst Zeilenumbrüche Ein normaler Zeilenumbruch mit der Entertaste wird ignoriert. Stattdessen gibt es das Tag <br>. Das Tag muss, wenn man in reinem html schreibt, nicht geschlossen werden (also nicht: </br> ). Code: <body> Erste Zeile <br> Zweite Zeile </body> Mehr zu Zeilenumbrüchen Absätze Für einen Absatz gibt es <p> und </p> Code: <body> <p> Ein Absatz </p> <p> Noch einer </p> </body> Mehr zu Absätzen Text hervorheben Ein Text soll fett, kursiv, unter- oder durchgestrichen dargestellt werden? Kein Problem. Fett: <b></b> (das b steht für bold) Kursiv: <i></i> (i für italic) Unterstrichen: <u></u> (u für underlined) Durchgestrichen: <s></s> (s für strike) Achtung, nicht die Endtags vergessen, sonst wird zum Beispiel alles fett angezeigt. Beispiel: Code: <body> <b>fett</b><br> <i>kursiv</i><br> <u>unterstrichen</u><br> <s>durchgestrichen</s><br> </body> Überschriften Auch verschieden große Überschriften sind mit html kein Problem. Sie werden mit <h1></h1> bis <h6></h6> definiert. <h1> ist die größte Überschrift, <h6> die kleinste. Beispiel: Code: <body> <h1>Eine große Überschrift</h1><br> <h3>Eine mittlere Überschrift</h3><br> <h6>Eine sehr kleine Überschrift</h6> </body> Umlaute Umlaute wie ä, ö, ü und ß werden von Browsern oft nicht dargestellt. Stattdessen sind, wie im Beispiel zu den Überschriften zu sehen, besondere Zeichenfolgen zu verwenden. Zeichen Ersetzung ä ä Ä Ä ö ö Ö Ö ü ü Ü Ü ß ß Mehrere Leerzeichen hintereinander werden zu einem zusammengefasst. Ein Leerzeichen erzwingt man mit . Beispiel: Code: <body> Ein großes Ä<br> Ein kleines ü </body> Texte ausrichten Standartmäßig ist ein Text linksbündig. Dies kann man mit dem Tag <div align="center"></div> und <div align="right"></div> ändern. Center steht für zentriert, right für rechtsbündig. <div align="justify"></div> deklariert einen Blocksatz. Beispiel: Code: <body> Dieser Text ist linksbündig.<br> <div align="center">Dieser Text ist zentriert</div><br> <div align="right">Dieser Text ist rechtbündig</div> </body> Listen Listen werden oft bei Aufzählungen verwendet. Die einzelnen Listenpunkte werden einzeln von <li></li> ausgezeichnet. Alle Listenpunkte müssen noch einmal von einem Tag umklammert werden, um die Listenart zu definieren. <ul> erzeugt einen kleinen schwarzen Punkt vor dem Text <ol> erzeugt eine nummerierte Liste, also 1. 2. 3. usw. Beispiel: Code: <body> <ul> <li>Punkt 1</li> <li>Punkt 2</li> <li>Punkt 3</li> </ul> <ol> <li>nummeriert 1</li> <li>nummeriert 2</li> <li>nummeriert 3</li> </ol> </body> Trennlinien Eine Trennlinie ist eine einfache Linie, die verschiedene Inhalte/Themen trennt. Sie wird mit <hr> erzeugt. Dazu gibt es noch eine Reihe an Attributen. Diese werden einfach, mit einem Leerzeichen getrennt, hinter das hr gesetzt. noshade => Die Linie wird unschattiert dargestellt. width="100" => Die Linie hat eine Breite (Länge) von 100 Pixeln (width = Breite) size="3" => Dieses Attribut bestimmt die Dicke der Linie. 2 ist der Standartwert, d.h., 1 bildet eine besonders dünne Linie, alles über 2 eine dickere. color="red" => Damit kann der Trennlinie eine Farbe zugewiesen werden, hier z.B. rot. Mehr zu den veschiedenen Farben im Bereich "Farben". Achtung: Dieses Attribut wird nur vom Internet Explorer interpretiert. Beispiel: Code: <body> <p> Ein Thema </p> <hr> <p> Ein anderes Thema </p> <p> Eine ganz tolle Trennlinie:<br> <hr noshade width="300" size="5" color="red"> </body> Mehr zu Listen Lauftext <marquee></marquee> definiert einen Lauftext. Aber Vorsicht, ein solcher Text kann extrem ablenkend und damit störend sein. Außerdem ist dieses Tag kein html Standart und wird z.B. vom Opera nicht interpretiert. Beispiel: Code: <body> <marquee> Ein Lauftext </marquee> </body> Farben Es gibt einmal festgelegte Namen für Farben, z.B. "blue" oder "yellow". Alle Farben, für die kein Namen festgelegt wurde, werden mit einem hexadezimalen Wert angegeben. Diese Farbnamen sehen so aus: #RRGGBB . Die beiden R stehen für den Rotanteil der Farbe, die Gs für den Grün und die Bs für den Blauanteil. Einen kleinen Überblick gibt es hier. Hintergrundfarbe Die Hintergrundfarbe einer Seite kann im <body> definiert werden. Dazu einfach bgcolor="farbe" hinzufügen. Statt "farbe" muss ein hexadezimaler Wert oder ein html-Farbname eingefügt werden. Beispiel: Code: <body bgcolor="red"> </body> Hintergrundbild Anstatt einer Farbe kann auch ein Bild als Hintergrund dienen. Dieses ist mit dem Attribut background="bild" zu verwirklichen. Das Bild muss im gleichen Verzeichnis liegen wie die html-Datei und sollte das Format .jpg oder .gif haben. Beispiel: Code: <body background="hintergrund.jpg"> </body> Schriftfarben Die Standartschriftfarbe ist schwarz. Um sie zu ändern, wird das Tag <font color="farbe"></font> benötigt. Beispiel: Code: <body> <font color="red"> Ein roter Text </font> </body> Grafiken einfügen Grafiken werden mit dem img-Tag eingebunden. Genauer: <img src="bild"> . Die Grafik sollte im .jpg- oder .gif-Format vorliegen und muss im gleichen Verzeichnis wie die html-Datei gespeichert sein. Andernfalls muss dieses im Pfad berücksichtigt werden, also z.B. <img src="bilder/bild.jpg">. Um einen Ordner abwärts zu navigieren, werden zwei Punkte gesetzt, also <img src="../bilder/bild.jpg">. Dazu gibt es noch eine Reihe von Attributen: height="Höhe in Pixel" width="Breite in Pixel" border="zahl" => Definiert die Rahmendicke des Bildes. alt="Wenn die Grafik nicht angezeigt werden kann, steht dort stattdessen dieser Text" align="right" => Bestimmt die Ausrichtung der Grafik. Weitere Werte: top, middle, bottom. Beispiel: Code: <body> <img src="bild.jpg" alt="Ein Bild..."><br> <img src="bild2.jpg" width="100" height="100" alt="Ein anderes Bild..."><br> <img src="bild3.jpg" border="0" align="top" alt="Ein nach oben ausgerichtetes Bild ohne Rahmen"> </body> Mehr zu Grafiken Verweise Mit Verweisen (Links) lassen sich Seiten miteinander verknüpfen. Einen Link auf eine andere Seite benötigt folgenden Code: Code: <a href="http://www.paules-pc-forum.de">Ein ganz tolles Forum</a> Die Adresse zu der anderes Seite muss in Anfühungsstrichen hinter dem href stehen. Der Text, der später vom User angeklickt werden kann, folgt außerhalb der abschließenden spitzen Klammer (hier: Ein ganz tolles Forum). Wenn die Seite in einem neuen Fenster geöffnet werden soll, muss das Attribut target="_blank" hinzugefügt werden. Also: Code: <a href="http://www.paules-pc-forum.de" target="_blank">Super Forum</a> Auf diese Weise können auch Seite innerhalb einen Projektes verlinkt werden. Beispiel: index.html und uebermich.html index.html: Code: <body> <p> Hallo, Herzlich Willkommen auf meiner Homepage! </p> <p> <a href="uebermich.html">Über mich</a> </p> </body> uebermich.html: Code: <body> <p> Hallo, ich bin der Cage... ;) </p> <p> <a href="index.html">Home</a> </p> </body> In diesem Beispiel wird also die Startseite des Projektes mit der Seite Über mich verknüpft. Dadurch lässt sich innerhalb eines Projektes durch die verschiedenen Seiten navigieren. Die Seiten müssen sich entweder im gleichen Verzeichnis befinden oder das Verzeichnis muss mit angegeben werden. Beispiel: Code: <a href="uebermich/uebermich.html">Über mich</a> Um in der Verzeichnisstruktur einen Ordner nach unten zu gehen, müssen in der Adresse zwei Punkte notiert werden. Beispiel: Code: <a href="../uebermich.html">Über mich</a> Bilder verlinken Natürlich lassen sich auch Bilder verlinken. Wenn man z.B. einen Text hat, der auf der nächsten Seite weitergehen soll, würde es sich anbieten, einen Pfeil zu verlinken. Code: <a href="seite.html"><img src="bild.jpg"></a> Linkfarben Farben von Verweisen lassen sich folgendermasen definieren: Code: <body link="red" vlink="green" alink="yellow"> </body> link="red" steht für die ursprüngliche Farbe des Verweises, in diesem Fall Rot. vlink="green" bedeutet, dass der Verweis, nach dem er besucht (angeklickt) worden ist, die Farbe Grün annimmt (vlink = visited link) alink="yellow": Wenn der Link angeklickt ist, nimmt er die Farbe Gelb an (alink = active link) Mehr zu Verweisen Tabellen Mit Tabellen können z.B. Daten übersichtlich präsentiert werden. Alle Tabellen werden mit dem Tag <table> begonnen und mit </table> beendet. Mit dem Attribut border lässt sich die Rahmendicke der Tabelle angeben (also z.B. <table border="1"> ). Eine neue Tabellenzeile (waagerecht) wird mit <tr> erzeugt. An das Ende jeder Zeile kommt das Tag </tr>. Eine neue Zelle kann mit <td></td> erzeugt werden. Zusätzlich gibt es noch <th></th>. Dieses Tag ist optional und wird in der ersten Zeile der Tabelle eingesetzt (das h steht für head). Code: <table border="2"> <tr> <th> Name </th> <th> Alter </th> <th> Ort </th> </tr> <tr> <td> Max Mustermann <td> Monika Mustermann </td> <td> Max Mustermann Junior </td> </tr> <tr> <td> 40 </td> <td> 38 </td> <td> 11 </td> </tr> <tr> <td> Berlin </td> <td> Dresden </td> <td> Hinterm Mond </td> </tr> </table> Mehr zu Tabellen Frames Frames unterteilen die Seite in mehrere Bereiche. Diese Bereiche sind wiederum einzelne html-Dateien. Die Frames (Frameset) werden in einer seperaten Datei definiert. Das Frameset beginnt mit <frameset> und endet mit </frameset> (normal... ). Hier werden die einzelnen Bereiche angegeben, entweder Reihen oder Spalten. Die Tags heißen dann <frameset rows="Wert"> und/oder <frameset cols="Wert">. "Wert" wird durch eine Pixel oder Prozentangabe ersetzt, wobei Prozentangaben wegen unterschiedlicher Bildschirmgrößen und im Sinne eines baierrefreien Webs sicherlich zu bevorzugen sind. Falls der User einen Browser benutzt, der Frames nicht darstellen kann oder Frames deaktiviert hat, sollte man einen Alternativtext angeben. Dies wird mit <noframes><body>Alternativtext</body></noframes> realisiert. Code: <html> <head> <title> Achtung, einen aussagekräftigen Titel wählen, da dieser die ganze Zeit angezeigt wird. </title> </head> <frameset cols="15%, 85%"> <noframes> <body> Diese Seite verwendet Frames, welche von ihrem Browser nicht dargestellt werden können. Bitte verwenden Sie einen anderen Browser. </body> </noframes> </frameset> </html> Jetzt sollten im Browser zwei Frames angezeigt werden, ein schmaler links und ein breiter rechts. Allerdings haben diese Frames noch keinen Inhalt. Der Inhalt kommt in eine seperate Datei. Diese Datei wird im jeweiligen Frame mit <frame="datei.html"> geöffnet. Ein End-Tag wird nicht benötigt. Beispiel für eine Seite mit zwei Frames, links die Navigation und rechts den Inhalt: index.html Code: <html> <head> <title> Homepage von Karl Heinz Müller </title> </head> <frameset cols="15%, 85%"> <frame="navigation.html"> <frame="home.html"> <noframes> <body> Diese Seite verwendet Frames, welche von ihrem Browser nicht dargestellt werden können. Bitte verwenden Sie einen anderen Browser. </body> </noframes> </frameset> </html> navigation.html Code: <html> <head> <title> Unwichtig, da er sowie so nicht angezeigt wird </title> </head> <body> <p> <b>Navigation</b> </p> <p> <a href="home.html">Startseite</a><br> <a href="ueber_mich.html">Über mich</a><br> <a href="impressum.html">Impressum</a> </p> </body> </html> home.html Code: <html> <head> <title> Unwichtig, da er sowie so nicht angezeigt wird </title> </head> <body> <p> <h1> Herzlich Willkommen! </h1> </p> <p> Hi, ich bin der Karl Heinz Müller und das ist meine Homepage </p> </body> </html> Damit die Links aus dem Frame "navigation" im rechten geöffnet werden, ist es nötig, den Frames Namen zu geben und ein Ziel für die Links zu definieren. index.html Code: <frameset cols="15%, 85%"> <frame="navigation.html" name="navigation"> <frame="home.html" name="inhalt"> Durch das name="inhalt" bekommt der rechte Frame den Namen inhalt. Code: <p> <a href="home.html" target="inhalt">Startseite</a><br> <a href="ueber_mich.html" target="inhalt">Über mich</a><br> <a href="impressum.html" target="inhalt">Impressum</a> </p> Durch das target="inhalt" wird bestimmt, dass dieser Verweiß im Frame mit dem Namen inhalt geöffnet werden soll (target = Ziel) Wenn sowie so alle Verweise in einem anderen Frame geöffnet werden sollen (z.B. bei so einer Navigation wie im Beispiel), kann man sich durch einen Trick viel Tipparbeit ersparen: Einfach <base target="inhalt"> in den Head schreiben. Dieses Tag bewirkt, dass alle Verweise dieser Seite (also dieses Frames) im Frame mit dem Namen inhalt geöffnet werden. navigation.html Code: <head> <title> Immer noch unwichtig </title> <base target="inhalt"> </head> <body> <a href="home.html">Startseite</a> Den (hässlichen) Rahmen zwischen den Frames vermeiden? Kein Problem. Einfach frameborder="0" framespacing="0" border="0" mit in das <frameset> Tag schreiben. Code: <frameset cols="15%, 85%" frameborder="0" framespacing="0" border="0"> Mehr zu Frames Seite online stellen Um die erstellte Seite ins Web zu stellen, braucht man als erstes einen Webspace und ein FTP-Programm. Webspace ist Speicherplatz auf Computern (Servern), die ständig mit dem Internet verbunden sind. Auf diesen Speicherplatz läd man sein Projekt, um es für den User ständig zugänglich zu machen. Webspace wird bei sogenannten Providern gemietet. Es gibt auch kostenlosen Speicherplatz, dann allerding meißtens mit Werbung. Eine umfangreiche Liste gibt es hier. Um seine Seiten, Grafiken und sonstiges auf seinen Webspace laden zu können, benötigt man ein FTP-Programm. Empfehlenswert ist z.B. Filezilla. Oben gibt man die Daten ein, die man von seinem Provider bekommt ein und klickt auf "Connect" (Verbinden). Auf der linken Seite sieht man nun den Inhalt seines Computers, rechts die Dateien auf dem Server. Per Drag und Drop werden die Dateien auf den Server hochgeladen. Jetzt wird nur noch eine Domain (Internetadresse) benötigt. Auch diese sind kostenplichtig, aber auch hier gibt es kostenlose, z.B. bei de\|nic\|vu - Kostenlose Domains für alle! - Herzlich willkommen! (www.nic.de.vu) - Kostenlose Domain - Free Domain - Gratis Domain (Werbung lässt sich abstellen). Links www.de.selfhtml.org Eine komplette Referenz über das Thema html So, das wars erstmal, Ergänzungen zu CSS, Formularen usw. folgen in Kürze. Kritik, Anregungen und Lob bitte per PN, Fragen ins Forum. © Clemens Holtmann

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Die ersten Schritte zur eigenen Homepage - michi -	Paule	a.) Die eigene Homepage	13	13.11.2008 14:07
Werbung auf der eigenen Homepage - gewerbemeldepflichtig?	desktopman	Homepagegestaltung	3	16.12.2007 23:11
Herzlichen Glückwunsch an Cage, DaRkLoRd...	Christian Matt	Vorstellungen und Glückwünsche	10	11.06.2007 20:31
Suchfunktion in der eigenen Homepage^^	mark66	PHP/MySQL	0	15.08.2005 13:12
Ein Webradio-Stream auf der eigenen Homepage	Cyber Sonic	Allgemein	7	21.10.2004 22:46