HTML-Grundlagen

Definition

HTML, Hypertext Markup Language ist die ,,Sprache" in der man Internet-Seiten programmiert. HTML ist ein dauernd weiterentwickelder Standart. Es ist unabhängig von allen Betriebsysthemen, das heißt man kann die Dokumente sowol auf Windows, Mac und Linux PCs schreiben und lesen. Auslesen tun dies die Internet-Browser, schreiben kann man HTML mit einem normalen Text-Editoren. Erweitert kann man die Dokumente mit JavaScript und PHP. Heutzutage schreibt man kaum noch die Seiten im Quelltext, sondern mit Content-Management-Systems (CMS) hier bearbeitet man die Seite fast wie ein Word®-Dokument.

Html-Dokumente enden immer mit .html oder .htm. Sie können ein solches Dokumen ganz einfach erstellen, öffnen sie einen Editor und speichern sie es mit *.html.

Die Anweisungen an den browsern werden in sogenannten "Tags" geschrieben, diese beginnen mit "<", dann kommt die Anweisung und enden mit ">". Dann kommt der meistens der Text, der formatiert werden soll. Zum beenden der Anweisung wird der Tag geschrieben, aber nach dem "<" kommt direkt ein "/" bei wenigen Ausnahmen ist dies nich so, z.B. bem Einfügen von Bildern. Generell kann man Tags immer groß oder klein schreiben, dies macht kein unterschied, doch übersichtlicher ist es in Kleinbuchstaben.

Jedes Dokument beginnt mit den <html>-Tag und endet mit </html>. Nach <html> kommt der Head-Teil. Hier sind Informationen zum z.B.: Autor, außerdem Verweise zu z.B.: CSS-Dateien. Mit CSS kann man Layout-Anweisungen geben.

Außerdem liegt im Head-Teil der <title></title>-Tag. Mit diesem wird der Title der HTML-Seite bestimmt. Dann kommt wieder </head>

 

Der Body-Teil

Nun kommt der Body-Teil. Er beginnt mit <body> und endet vor dem </html> mit </body>. In diesem Body-Bereich steht der Ganze Inhalt.

In <body> kann man die Hintergrundfarbe für die ganze Seite definieren und zwar mit:


<body bgcolor="green">


für grün. Können aber auch HEX-Code nehmen.

Siehe Farbnamen beziehungsweise Formatieren der Schriftfarben.


oder ein Hintergrundbild:


<body background="hintergrund.jpg">


Siehe genaueres in Einfügen von Bildern.

Ist das Bild zu klein, wird es automatisch wiederholt:

 

Verlaufhintergrund

Dies ist das Hintergrundbild und es sieht dann so aus:


Beispielseite


Schrift


Die Schrift kann mit einfachen Befehlen formariert werden:

 

Code Aussehen
<b>Fett</b> Fett
<i>kusiv</i> kusiv
<em>kusiv</em> kusiv
<u>unterstrichen</u> unterstrichen
<br> Zeile frei
<p>Text</p> Absatz mit Text
<div align="left">Linksbündig</div> linksbündig
<div align="right">Rechtsbündig</div> Rechtsbündig
<div align="center">Zentriert</div> Zentriert
<center>Zentriert</center> Zentriert
<tt>...</tt> Buchstabe i nimmt genauso viel Platz ein wie W

Das <div...> </div> (Bereich) kann auch durch <p>...</p> (Absatz mit Text) erstezt werden. Dies könnte dann so aussehen: <p align="links">Linksbündig</p>.

 

Eine Formatierung von der Schriftfarbe und größe usw beginnt immer mit <font (engl. Schrift).

Formatieren der Schriftfarbe (a): <font color="green">Grün</font>

Formatieren der Schriftfarbe (b): <font color="#009933">Grün</font>

Aussehen (a): Grün

Aussehen (b): Grün

Erklärung: In das color="." kommt entwerder ein Hexafarbcode oder ein Farbname.

Farbnamen


Formatieren des Schrifttyps: <font face="Wide Latin, Avalon">Text in Wide Latin dargestellt, wenn dies nicht dargestellt werden kann, dann in Avalon.</font>

Aussehen: Text in Wide Latin und wenn dies nicht dargestellt werden kann, dann in Avalon.

Erklärung: In das face="." kann man einefach gewöhnliche Schriftart-Namen eintragen wie z.B. Arial. Am besten man trägt mehrere Namen ein, indem man sie mit einem Komma abtrennt, da es sein könnte, dass eine oder mehrere Browser die Schriftart nicht darstellen können.

 

Formatieren der Schriftgröße (a): <font size="5">Große Schrift</font>
Formatieren der Schriftgröße (b): <font size="1">kleine Schrift</font>

Aussehen (a): Große Schrift

Aussehen (b): Kleine Schrift

Erklärung: Die Schriftgröße wird einfach in size="." eingetragen. Die Angaben sind automatisch in Pixel.

 

Formatieren der Schriftgröße (c):<font size="+3">Größere Schrift als normal</font>

Formatieren der Schriftgröße (d):<font size="-2">Kleinere Schrift als normal</font>

 

Aussehen (a):Größere Schrift als normal

Aussehen (b):Kleinere Schrift als normal

Erklärung: Die Angaben sind ein relatives Maß, bezogen auf die Standart, bzw. die vohrige Schriftgröße. +3 ist 3x so groß, wie der normale Text.

 

Überschriften:

<h1>Überschrift 1</h1>

Überschrift 1

<h2>Überschrift 2</h2>

Überschrift 2

<h3>Überschrift 3</h3>

Überschrift 3

<h4>Überschrift 4</h4>

Überschrift 4

<h5>Überschrift 5</h5>
Überschrift 5
<h6>Überschrift 6</h6>
Überschrift 6


Das Anzeigen von Tabellen:

<table border="1px" bgcolor="yellow" width="50%" align="center">
<tr>
<td>Zeile1, Zelle1 </td>
<td>Zeile1, Zelle2 </td>
</tr>
<tr>
<td>Zeile2, Zelle1 </td>
<td>Zeile2, Zelle2 </td>
</tr>
</table>

Zeile1, Zelle1 Zeile1, Zelle2
Zeile2, Zelle1 Zeile2, Zelle2

 

Erklärung:

Border="1px" ist die Umrandung der Tabelle. Man kann auch 2px, oder 0px nehmen, bei 0px ist die Tabelle unsichtbar. Dies kann man nehmen, um Inhalte besser zu sortieren. bgcolor="belibige Farbe" für die ganze Tabelle (siehe Farben). Width="50%" nimmt 50% der Seite ein, ein relatives Maß. Man kann natürlich auch pixel (px) nehmen. align="center" zentriert die Inhalte der Tabelle. Natürlich auch "left" (linksbündig) oder "right" (rechtsbündig) möglich.

<tr>, Table Row, damit beginnt man eine neue Zeile.

<td>, Table Coldspan, beginnen einer neuen Zelle. Man schreibt die Tabelle von Links nach Rechts d.h., dass man als erstes die ganze 1.Zeile schreibt und dann die 2.Zeile usw.

 

Umlaute und Sonderzeichen

Deutsche Umlaute und Sonderzeichen müssen umschrieben werden:
ü &uuml;
ä &auml;
ö &ouml;
" &quot;
& &amp;
< &lt;
> &gt;
© &copy;
Mehr als ein Leerzeichen &nbsp;

weitere Sonderzeichen

 

Unteranderem deutesche Umlaute müssen umschrieben werden, da HTML international. Außerdem müssen die Zeichen die auch in HTML-Tags verwendet werden (<) werden umschrieben.

 


Link zu externer Internet-Seite

Externer Weblink:

<a href="http://www.beispielseite.de target="_blank">Zur Beispielseite</a>

 

Erklärung:

Für Link einfach URL der Seite statt www.beispielseite.de nehmen. Mit target="_blank" wird der Link in einem neuen Tab geöffnet. Sieht dann für user so aus:

Zur Beispielseite

 

 

Link zu einer internen Seite

Interner Link:

<a href="seite2.html">Zur Seite2</a>

 

Erklärung:
Man muss einfach nur den ganzen Namen und Endung (.html, .htm) der Datei angeben. Vorausgesetzt ist, dass sich die Datei im selben Verseichnis befindet (siehe für den Pfad das Einfügen von Bildern).


Einfügen von Bildern


<img src="x-bild.jpg">


Erklärung:

Für diesen Code ist es Vorausgesetzt, dass sich das Bild im selben Ordner befindet wie die HTML-Datei. In src=" " wird die Quelle des Bildes angegeben. Das Bild könnte sich der Übersicht halber in einem Unterordener befinden, der sich zum Beispiel images oder bilder nennt. Ist das Bild in einem Unterordner, so wird dieser einfach mir in die Quelle angegeben. Bsp.: "images/x-bild.jpg".


Pfad für Bilder

In den <img-Tag kann man außerdem noch eineige Informationen einbinden:

 

<img src="images/x-bild.jpg" height="200" width="200" alt="Ein x-Bild" title="X-Bild">


Erklärung:

Mit height (engl. Höhe) bestimmt man die Höhe des Bildes. Die angeben werden automatisch in Pixeln angegeben, genauso bei width (engl. Breite). Alt steht für einen Alternativ-Text der auftritt wenn das Bild aus irgendeinem Grund nicht gefunden werden kann. Title ist der Text, der erscheint wenn man mit der Maus kurz über dem Bild verweilt. Alle kusiven Angaben sind natürlich änderbar. Man kann sowol .jpg, .png usw. -Dateien verwenden. Auch gif-Animationen sind möglich. Die Verwndung von align, direkt im img-Tag, für die Ausrichtung ist möglich.


X-Bild

Bilder und Links

Man kann auch Bilder zum Aufrufen eines Links verwenden:

 

<a href="http://www.xaverkasparek.de" target="_blank"> <img src="images/x-icon.png" title="xaverkasparek.de" alt="xaverkasparek.de" height="200" width="200"></a>

xaverkasparek.de

Klickt man das Bild so wird der Link aktiviert.

 

Kommentar

 

Man kann im Quellcode einen Kommentar zu Hinterlassen, ohne dass dieser vom Browser ausgelesen wird:

<!-- Kommentar -->

In den Kommentar kann man alles reinschreiben, auch HTML-Tags.

 

HTML-Code

 

Das Dokument sieht so aus und hat den Namen: test.html. Sie können den Code einfach kopieren und mit einem Text-Editor (siehe unten) speichern und mit einem Internet-Browser aufrufen.

 

<html>

Beginn des HTML-Dokuments

<head>

<meta name="description" content="Test" />
<meta name="keywords" content="Test, hallo, usw." />

<title>Test-Seite</title>

</head>

Beginn des head-Teils

Beschreibung der Seite  | Nicht umbedingt nötig

Suchbegriffe                   | Nicht umbedingt nötig

Titel der Internet-Seite

Ende des head-Teils

<body bgcolor="#999999">

<center>

<h1><font color="red">Testseite</font></h1>

</center>

<p align="left"><font size="+3">Da kommt Text 'rein:</font></p>

<p align="right">Der Text kann

<font color="green">farbig,</font>

<b>fett,</b>

<em>kusiv,</em>

<b><em>fett und kusiv,</em></b>

oder

<u>unterstrichen</u>

sein</p>

<div align="justify">

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>

<div>

</body>

</html>

Beginn des body-Teils mit der Hintergrundfarbe Grau

Beginn der Zentrierung

Überschrift in Rot

Ende der Zentrierung

Absatz mit Text, der rechtsbündig ist und dreimal größer ist als der normale

Beginn eines <p>-Elements

farbige Schrift

fette Schrift

kusive Schrift

fette und kusive Schrift

Text ohne Formatierung

unterstrichene Schrift |nicht bei xhtml 1.1

Ende des <p>-Elements mit </p>

Beginn eines Bereichs mit div ausrichtung: Blockabsatz

Ganz viel Text! Beginn mit <p>

 

 

 

 

 

 

 

Ende des Bereichs mit </div>

Ende des body-Teils

Ende des HTML-Dokuments



Editoren

Bei einem Windows®-Betriebsystem können sie den Standartisierten Editor benutzen. Vorteile haben aber auch HTML-Editoren, da sie meißt Tags selbst verfollständigen und Ihnen diese auch farbig markieren. Eine Empfehlung von mir ist der Editor Webocton-Scriptly. Dies ist ein reiner HTML-Editor.

http://scriptly.webocton.de/11/download.html

 

Sie können sich auch für die etwas spartanischere Weise eines Editors entscheinden wie Notepad ++. Dies ist kein reiner HTML-Editor mit ihm kann man alle möglichen Programmiersprachen schreiben wie zum Beispiel C++.

http://notepad-plus-plus.org/download/v5.9.8.html


Bei einem Mac kann man leider nicht den Standart-Editor (TextEdit) nehmen. Ich empfehle den TextWrangler zu benutzen.

http://www.barebones.com/products/textwrangler/download.html

Einfach ganz rechts auf den "Download Now"-Button drücken.


Zum Überprüfen, ob ihr Code stimmt können sie über validator.w3.org dies testen lassen. Dies ist kostenlos und risikofrei.




Bei Fragen, angemessene Kritik und Anregungen schreib doch eine E-mail an html@xaverkasaprek.de.

©Xaver Kasparek 2012