Eigentlich ist HTML die wichtigste Programmiersprache im Internet, da selbst PHP mit dieser Sprache kombiniert wird. HTML heißt Hypertext Markup Language. Die Sprache gibt es eigentlich schon solange es Internet gibt und wäre heute nicht mehr wegzudenken. 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. Du kannst, wie in einem normalen Schreibprogramm, Tabellen und Formatierungen erstellen und diese werden dann als HTML-Datei ausgegeben. Du kannst natürlich auch andere Programme verwenden, wie z. B. den Editor von Microsoft Windows, das bei jeder Version beinhaltet ist. Aber sogar Microsoft Office 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 / darin befindet.

Um Kommentare zu schreiben, kannst Du ganz einfach folgenden Code verwenden:

<!– Kommentar –>

Der Text Kommentar, auch wenn er mehrzeilig ist, der zwischen <!– und –> steht, wird nicht mit angezeigt, kann jedoch über den Quelltext angezeigt werden. Wenn Du dir den Quelltext innerhalb vom Internet Explorer ansehen möchtest, kannst Du einfach auf "Ansicht" > "Quelltext" gehen. Dann öffnet sich standardmäßig der Editor und Du kannst die Befehle ansehen. Das kannst Du ü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 Du darauf achtest, dass deine Homepage kompatibel mit Firefox, Internet Explorer und Co. ist.

Folgende Tabelle zeigt einige Sonderzeichen:

Ä

&Auml;

ß

&szlig;

(Leerzeichen) &nbsp;
Á

&Aacute;

Â

&Acirc;

À

&Agrave;

Å

&Aring;

Ã

&Atilde;

Ç

&Ccedil;

¢

&cent;

©

&copy;

¤

&curren;

°

&deg;

÷

&divide;

½

&frac12;

µ

&micro;

Ø

&Oslash;

±

&plusmn;

®

&reg;

§

&sect;

²

&sup2;

α &alpha;
&hellip;

&permil;

&trade;

Folgende Zeichen werden in HTML für den Code verwendet und müssen umgewandelt werden:

<

&lt;

> &gt;
& &amp;
" &quot;

Jedes Sonderzeichen kann auch in folgender Form geschrieben werden: Du ersetzt dann die 32 gegen die jeweilige Ziffer des Sonderzeichens. Eine Liste findest Du 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 Du diese Seite mit Ihrem Browser öffnest, 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

Du kannst nun den body-Tag um die Hintergrundfarbe erweitern:

<body bgcolor="white">

In diesem Fall wird als Hintergrundfarbe white, also Weiß, verwendet. Du kannst 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 Du nun in ein übergeordnetes Verzeichnis möchtest, musst Du src="../logo.jpg" eingeben, solltest Du ein Bild aus einem Unterverzeichnis anzeigen wollen, gebe src="/images/logo.jpg" ein. Du kannst natürlich auch die gesamte URL angeben: src="https://www.pcshow.de/images/logo.jpg"

Absätze

Gebe den gewünschten Text einfach zwischen dem p-Tag ein und es wird ein Absatz zwischen dem folgenden 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="https://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 Du nun möchtest, dass der Link in einem neuen Fenster geöffnet wird, verwendest Du den Befehl target="_blank". Füge ihn wie folgt ein:

<a target="_blank" href="https://www.pcshow.de">PCShow.de</a>

Mit einer E-Mailadresse funktioniert es ähnlich, nur, dass Du 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>

Du kannst 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 Du nun das center gegen right für rechts- oder left für linksbündig eingibst, 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.

Du kannst natürlich auch mehrere Formatierungen gleichzeitig anwenden:

<b><i>Text</i></b>

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 eine Tabelle, 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.: tablerow). Jede einzelne Tabellenzelle wird von einem <td> und </td> eingeschlossen (engl.: tabledata). 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>

Gleich weiterlesen