HTML heißt
Hypertext Markup Language. Die Sprache gibt es eigentlich schon solange es Internet gibt und wäre heute nicht mehr weg zu denken. Dieses Tutorial soll nur einen kurzen Überblick über HTML bieten.
Für Anfänger ist
Microsoft FrontPage sehr zu empfehlen. Hierbei handelt es sich um ein Programm, das es erleichtert, Seiten zu erstellen. Sie können, wie in einem normalen Schreibprogramm, Tabellen und Formatierungen erstellen und diese werden dann als HTML-Datei ausgegeben. Sie können natürlich auch andere Programme verwenden, wie z.B. den Editor von Microsoft Windows, das bei jeder Version beinhaltet ist. Aber sogar
Microsoft Word hat Technologien, um HTML-Dateien zu erstellen. Diese sind aber nicht gerade zu empfehlen.
Grundaufbau einer Seite
Jede HTML-Seite hat folgenden Aufbau:
<html>
<head>
</head>
<body>
Inhalt
</body>
</html> |
Das
<html> sagt dem Browser, dass es sich um eine HTML-Datei handelt. Im
<head>-Bereich werden alle Informationen über die Seite angegeben, z.B. Titel oder Autor. Im
<body> wird der Inhalt der Seite angezeigt. In HTML ist es üblich, dass Befehle in
< > stehen und jeder Befehl mit dem selben Befehl endet, jedoch dass sich noch ein
/ davor befindet.
Um Kommentare zu schreiben, können Sie ganz einfach folgenden Code verwenden:
Der Text
Kommentar, auch wenn er mehrzeilig ist, der zwischen
<!-- und
--> steht, wird nicht mit angezeigt, kann jedoch über den Quelltext angezeigt werden. Wenn Sie sich den Quelltext innerhalb vom Internet Explorer ansehen möchten, können Sie einfach auf "Ansicht" > "Quelltext" gehen. Dann öffnet sich standardmäßig der Editor und SIe können die Befehle ansehen. Das können Sie übrigens auf jeder beliebigen Seite im Internet tun. (Bei PCShow.de wird jedoch nicht der wirkliche Quelltext angezeigt, da es sich um PHP handelt.)
Sonderzeichen
In HTML können nicht unbedingt alle Zeichen in den Quelltext geschrieben werden, da sie entweder einer Funktion zugeordnet sind oder von jedem Browser anders angezeigt werden. Deshalb ist es wichtig, dass Sie darauf achten, dass Ihre Homepage kompatibel mit Firefox, Internet Explorer und Co. ist.
Folgende Tabelle zeigt einige Sonderzeichen:
| Ä | Ä |
| ß | ß |
| (Leerzeichen) | |
| Á | Á |
| Â | Â |
| À | À |
| Å | Å |
| Ã | Ã |
| Ç | Ç |
| ¢ | ¢ |
| © | © |
| ¤ | ¤ |
| ° | ° |
| ÷ | ÷ |
| ½ | ½ |
| µ | µ |
| Ø | Ø |
| ± | ± |
| ® | ® |
| § | § |
| | ­ |
| ² | ² |
| α | α |
| … | … |
| ‰ | ‰ |
| ™ | ™ |
Folgenden Zeichen werden in HTML- für den Code verwendet und müssen umgewandelt werden:
Jedes Sonderzeichen kann auch in folgender Form geschrieben werden:
8 Sie ersetzen dann die
56 gegen die jeweilige Ziffer des Sonderzeichens.
Eine Liste finden Sie zum Beispiel unter
http://www.ascii.cl/htmlcodes.htm.
Titel
Jede Seite hat einen Titel, die in der oberen Leiste des Browsers angezeigt wird. Den Titel legt man mit dem
title-Tag fest. Folgendes Code-Beispiel zeigt den Titel einer Seite:
| <title>Überschrift</title> |
Diesen Code fügt man, wie im folgendem Beispiel, zwischen den
head-Tag:
<html>
<head>
<title>Überschrift</title>
</head>
<body>
<!-- Inhalt -->
</body>
</html> |
Wenn Sie diese Seite mit Ihrem Browser öffnen, wird eine weiße Seite angezeigt, die einen Titel
Überschrift hat. Der Kommentar
Inhalt wird dabei, wie oben erklärt, nicht angezeigt, sondern kann nur über den Quellcode gesehen werden. Deshalb wird die Kommentarfunktion oft auch für Copyrighthinweise benutzt.
Hintergrund
Sie können nun den
body-Tag um die Hintergrundfarbe erweitern:
In diesem Fall wird als Hintergrundfarbe
white, also Weiß, verwendet. Sie können stattdessen auch andere Farbbegriffe, wie z.B.
red oder
blue, eingeben. Jede Farbe hat auch einen Code. Weiß hat den Code
#FFFFFF und Schwarz
#000000.
Bilder
Für Bilder benutzt man das so genannte
img-Tag. Folgender Code zeigt ein Beispiel:
| <img src="logo.jpg" alt="Logo"> |
Dieser Code wird in den
body-Tag eingefügt und zeigt ein Bild an, welches sich im gleichen Ordner befindet. Der Code
alt="Logo" bewirkt, dass wenn man mit der Maus über das Bild kommt, eine Quickinfo mit dem Text
Logo erscheint. Sollte das Bild aus irgendwelchen Gründen nicht verfügbar sein, wird er stattdessen angezeigt. Wenn Sie nun in ein übergeordnetes Verzeichnis möchten, müssen Sie
src="../logo.jpg" eingeben, sollten Sie ein Bild aus einem Unterverzeichnis anzeigen wollen, geben Sie
src="/images/logo.jpg" ein. Sie können natürlich auch die gesamt URL angeben:
src="http://www.pcshow.de/images/logo.jpg"
Absätze
Geben Sie den gewünschten Text einfach zwischen dem
p-Tag ein und es wird ein Absatz zwischen dem folgdem Text erstellt. Folgender Code zeigt dies:
| <p>Text 1</p><p>Text 1</p> |
Durch diesen Code wird jetzt erreicht, dass folgender Text ausgegeben wird:
Text 1
Text 2
Links
Folgender Code zeigt den Aufbau eines Links:
| <a href="http://www.pcshow.de">PCShow.de</a> |
Der Link ist aus zwei Teilen zusammengesetzt. Zuerst kommt hinter
href der Link, der beim Klick geöffnet werden soll und dann folgt der angezeigte Text, in diesem Fall jetzt
PCShow.de. Wenn Sie nun möchten, dass der Link in einem neuen Fenster geöffnet wird, verwenden Sie den Befehl
target="_blank". Sie fügen ihn wie folgt ein:
| <a target="_blank" href="http://www.pcshow.de">PCShow.de</a> |
Mit einer E-Mailadresse funktioniert es ähnlich, nur, dass Sie vor die E-Mailadresse
mailto: schreiben:
| <a href="mailto:name@anbieter.de">E-Mail senden</a> |
Möchte man nun noch einen Betreff vorgeben, der dann per E-Mail versendet wird, muss man folgenden Code eingeben:
| <a href="mailto:name@anbieter.de?subject=E-Mail-Kontakt über die Homepage">E-Mail senden</a> |
Sie können dann den Satz
E-Mail-Kontakt über die Homepage gegen den gewünschten Betreff ersetzen.
Ausrichtung auf der Seite
Am besten dazu eignet sich der
div-Tag. Er umschließt alles, was in einer bestimmten Ausrichtung stehen soll. Folgender Code zeigt einen Text, der zentriert ist:
| <div align="center">Text</div> |
Wenn Sie nun das
center gegen
right für rechts- oder
left für linksbündig eingeben, wird der umschlossene Text in der jeweiligen Ausrichtung angezeigt.
Zeichen formatieren
Folgendes Beispiel zeigt eigentlich alles, was man formatieren kann:
| Der Text kann <b>fett</b>, <i>kursiv</i>, <u>unterstrichen</u>, <strike>durchgestrichen</strike> oder <tt>mit festem Zeichenabstand</tt> angezeigt werden. |
So sieht dann das ausgegebene Ergebnis aus:
Der Text kann fett, kursiv, unterstrichen, durchgestrichen oder mit festem Zeichenabstand angezeigt werden.
Sie können natürlich auch mehrere Formatierungen gleichzeitig anwenden:
Schriftart verändern
Dazu wird der
font-Tag verwendet. Er beinhaltet Schriftart, Farbe und Größe. Die Schriftart wird durch
face bestimmt, z.B.
Times New Roman.
size bestimmt die Schriftgröße und
color die Farbe. Hier können, wie auch beim Seitenhintergrund die englischen Farbenbegriffe und die Zahlencodes verwendet werden. Folgendes Beispiel zeigt einen formatierten Text:
| <font face="Times New Roman" size="3" color="black">Text</font> |
Der ausgegeben Text sieht dann so aus:
Text
Meta-Tags
Meta-Tags dienen vor allem den Suchmaschinen, wie z.B. Google, die Seiten zu durchsuchen. Desto besser die Begriffe in den Meta-Tags, desto höher die Wahrscheinlichkeit, in Google & Co. gefunden zu werden. Folgende Liste zeigt die wichtigsten Meta-Tags:
| <meta name="author" content="Jan Hermeneit"> | Angaben zum Autor |
| <meta name="description" content="Hierbei handelt es sich um ein HTML-Tutorial."> | Inhaltsbeschreibungen |
| <meta name="keywords" content="HTML, Tutorial, PC"> | Suchbegriffe |
Diese Meta-Tags stehen im
head-Tag der HTML-Seite.
Tabellen
Jede Tabelle beginnt mit der
<table>-Marke. In Ihr werden dann auch Informationen, wie z.B. Breite, Liniendicke, Rahmenfarbe und Hintergrundfarbe angegeben. Am Ende jeder Tabelle kommt wieder ein
</table>. Folgende Code zeigt, den Standardaufbau einer Tabelle:
<table width=“100“ border=“1“ color=“black“ bgcolor=“white“>
<tr>
<td width=“50%“>Text</td>
<td width=“50%“>Text</td>
</tr>
</table> |
Der Code zeigt und, wie die Tabelle beginnt, die 100 Pixel breit ist (
width) und eine Rahmenstärke von einem Pixel aufweist (
border). Die Rahmenfarbe ist schwarz (
color) und die Hintergrundfarbe weiß (
bgcolor). Jede Tabellenzeile wird von
<tr> und
</tr> eingeschlossen (engl.:
table
row). Jede einzelne Tabellenzelle wird von einem
<td> und
</td> eingeschlossen (engl.:
table
data). Dabei können dann, wie auch die gesamte Breite der Tabelle, Breiten für die einzelnen Spalten angegeben werden, in diesem Fall 50% der gesamten Tabelle, also 50 Pixel. Wenn man nun Spalten hat und mehrere Zellen verbinden möchte gibt es folgende Möglichkeiten:
| colspan=”2” | Verbindet zwei <td> |
| rowspan=”2” | Verbindet zwei <tr> |
Formulare
Jedes Formular wird von dem
form-Tag umschlossen. Dazwischen können Elemente eingefügt werden. Folgende Liste zeigt Beispiele für solche Elemente:
Hinweis: Wenn Sie in den
form-Tag mit
method=“POST“ erweitern, werden die eingegebenen Daten nicht in der URL angezeigt. Das ist besonders wichtig bei Passwortabfragen. Die GET-Methode, die standardmäßig ausgeführt wird, ist dagegen in der Zeichenanzahl begrenzt.
Die Formulare werden vor allem für die Programmiersprache PHP benötigt. Weiteres finden Sie dazu im
PHP-Tutorial.
![[PCShow-Logo]](http://www.pcshow.de/images/pcshowlogo.jpg)
![[Sonstige]](http://www.pcshow.de/tippstricks/images/system/22.jpg){kind=small}
