M-XPro: HTML

Posts mit dem Label HTML werden angezeigt. Alle Posts anzeigen

Mittwoch, 28. Mai 2014

Aufzählungslisten in HTML

Für eine Aufzälhungsliste gibt es verschiedene Tags es kommt immer auf die Listenart an, die verwendet werden soll. Für die einzelnen Listeneinträge gibt es das Tag <li> (list item = Listeneintrag). Der Listeneintrag steht zwischen dem Start-Tag <li> und dem End-Tag </li> Nach dem End-Tag </li> wird automatisch eine neue Zeile angefangen.

Die unsortierte Liste
Bei einer unsortierten Liste, steht das Tag <li> und </li> zwischen Start-Tag <ul> (unordered list = unsortierte Liste) und End-Tag </ul>. Hier ein Beispiel:

<html>
<head>
<title> Listen in HTML </title>
</head
<body>
<ul>
<li>Erster Listeneintrag</li>
<li>Zweiter Listeneintrag</li>
<li>Dritter Listeneintrag</li>
</ul>
</body>
</html>

Bei einer unsortierten Liste wird automatisch ein Aufzählungszeichen den einzelnen Listeneinträgen hinzugefügt.

Die nummerierte Liste
Bei einer nummerierte Liste, steht das Tag <li> und </li> zwischen Start-Tag <ol> (ordered list = nummerierte Liste) und End-Tag </ol>. Hier ein Beispiel:

<html>
<head>
<title> Listen in HTML </title>
</head
<body>
<ol>
<li>Erster Listeneintrag</li>
<li>Zweiter Listeneintrag</li>
<li>Dritter Listeneintrag</li>
</ol>
</body>
</html>

Bei einer nummerischen Liste werden die Listeneinträge automatisch durchnummeriert.

Die Definitionsliste
Die Definitionsliste ist für Glossare gedacht. Das Start-Tag <dl> (defination list = Definitionsliste) und End-Tag </dl> steht für die Definitionsliste. Zwischen diesen Tags können das Start-Tag <dt> (defination term = Ausdruck der Liste) und End-Tag </dt> und das Start-Tag <dd> (defination defination = Defination der Liste) und End-Tag </dd> stehen. Hier ein Beispiel:

<html>
<head>
<title> Listen in HTML </title>
</head
<body>
<dl>
<dt>Eigenschaften von Mineralien</dt>
<dd>Durchsichtigkeit</dd>
<dd>Farbe</dd>
<dd>Dichte</dd>
<dd>Spaltbarkeit und Bruch</dd>
<dd>Härte</dd>
<dt>Entstehung und Vorkommen der Mineralien</dd>
<dd>Eruptivgesteine</dd>
<dd>Sedimentgesteine</dd>
<dd>Metamorphe Gesteine</dd>
</dl>
</body>
</html>

Der Ausdruck der Definitionsliste ist ein Begriff der z.B. die Attribute der Liste beschreibt, wie hier im Beispiel in Zeile 7 und 13. Die Definition sind die aufzählbaren Attribute des Ausdrucks.

Verschachtelte Listen
Die drei Listenarten können auch beliebig verschachtelt werden. Hier ein Beispiel:

<html>
<head>
<title> Listen in HTML </title>
</head
<body>
<dl>
<dt>Eigenschaften von Mineralien</dt>
<ul>
<li>Durchsichtigkeit</li>
<li>Farbe</li>
<li>Dichte</li>
<li>Spaltbarkeit und Bruch</li>
<li>Härte</li>
</ul>
<dt>Entstehung und Vorkommen der Mineralien</dt>
<ol>
<li>Eruptivgesteine</li>
<li>Sedimentgesteine</li>
<li>Metamorphe Gesteine</li>
</ol>
</dl>
</body>
</html>

Es ist auch möglich das Aussehen der Listen zu verändern, z.B ein anderes Aufzählungszeichen verwenden oder die Nummerierung ändern. Dafür sollte aber CSS verwendet werden und nicht mehr HTML, dies ist zwar auch noch möglich, aber CSS ist dafür um einiges besser geeignet.

Sonntag, 18. Mai 2014

Kommentare in HTML

In HTML können auch Kommentare erstellt werden, damit der Code Übersichtlicher bleibt. Hier ein Beispiel:

<html>
<head>
<title> Kommentare in HTML </title>
</head
<body>
<p> Perfekt ist man, wenn man sich seine Fehler eingesteht
und es versucht besser zu machen! </p>
<!--
Das ist auch ein Kommentar!
-->
</body>
</html>

Kommentare werden immer mit  beendet. Durch das . Der Kommentar-Text braucht nicht in der selben Zeile stehen wie , wie es in Zeile 9 bis 11 zu sehen ist. Hier das Resultat im Browser:

Donnerstag, 15. Mai 2014

Farben in HTML

Die Farben in HTML werden als Hexadezimalen Werten oder mit dem Farbnamen angegeben.

Die Hexadezimale Farbangabe
Am Anfang der Farbangabe muss das #-Zeichen stehen, danach folgt ein sechsstelliger hexadezimaler Wert (dieser besteht aus den Zahlen 0-9 und den Buchstaben A-F).

0 = dezimal 0
1 = dezimal 1
2 = dezimal 2
3 = dezimal 3
4 = dezimal 4
5 = dezimal 5
6 = dezimal 6
7 = dezimal 7
8 = dezimal 8
9 = dezimal 9
A = dezimal 10
B = dezimal 11
C = dezimal 12
D = dezimal 13
E = dezimal 14
F = dezimal 15

Die Farbe setzt sich aus den RGB-Farbwerten (rot, grün, blau) zusammen. Für jeden Farbwert stehen zwei Stellen zum definieren der Farben zur Verfügung, somit ergeben sich 16*16 = 256 Farbeinstellungen für jede Farbe.

Die Farbangabe mit VGA-Farbnamen
Die VGA-Farbpalette besteht aus 16 Farben: black, gray, maroon, red, green, lime, olive, yellow, navy, blue, purple, fuchsia, teal, aqua, silver und white.
Ff

Montag, 12. Mai 2014

Grafiken in HTML

Um eine Grafik einzubinden gibt es das Standalone-Tag <img> (img = Image = Bild) dieses Tag besitzt kein Start- und End-Tag. Hier der Beispielcode dazu:

<html>
<head>
<title> Grafiken in HTML </title>
</head
<body>
<img src="Bild.jpg">
</body>
</html>

Den Attribut src (source = Quelle) übergeben wir die Adresse oder das Verzeichnis. Hier im Beispiel ist es das Verzeichnis. Es ist auch möglich mit ../ in ein vorheriges Verzeichnis auf eine Grafik zuzugreifen oder z.B. mit "Bilder/Bild.jpg" in ein Unterverzeichnis auf eine Grafik zuzugreifen. Es ist natürlich auch möglich das komplette Verzeichnis anzugeben. Wenn sich aber unser Projektverzeichnis änder, müssen wir die Verzeichnisse der Grafiken ändern, deren kompletten Pfade angegeben wurden, deshalb sollte man es vermeiden komplette Verzeichnisse anzugeben. Die Grafiken sollten das Format GIF, JPG oder PNG haben.

Hier das Bild im Browser:

Nach der Adressangabe oder Verzeichnisangabe sollte noch das Attribut alt (alternativ) hinzugefügt werden. Wenn die Grafik nicht angezeigt werden kann, aus welchen Grund auch immer, wird der Text vom Attribut alt angezeigt, hier kann z.B. eine Beschreibung der Grafik angegeben werden. Wenn die Grafik nur dekorativ ist, sollte alt="" angeben werden.

<html>
<head>
<title> Grafiken in HTML </title>
</head
<body>
<img src="Bild.jpg" alt="Grafik">
</body>
</html>

Der Alternativtext sollte also immer angegeben werden. Hier ein Beispiel wenn der Browser die Grafik nicht anzeigen kann:

Wie man sehen kann, wird der Alternativtext im Browser ausgegeben.

Die Größe der Grafiken verändern
Wir können natürlich auch die Größe der Grafik mit den Attributen width (Breite) und height (Höhe) verändern. Wir können die Größe in Pixel angeben. Hier ein Beispiel:

<html>
<head>
<title> Grafiken in HTML </title>
</head
<body>
<img src="Bild.jpg" width="450" height="310" alt="Grafik">
</body>
</html>

Die Grafik wird in der angegebenen Größe dargestellt, auch wenn das Browserfenster kleiner sein sollte.

Wer die Seitenverhältnisse beibehalten möchte, kann auch nur eine Größe angeben dadurch wird die zweite Größe automatisch berechnet um das Seitenverhältnis beizubehalten. Hier ein Beispiel:

<html>
<head>
<title> Grafiken in HTML </title>
</head
<body>
<img src="Bild.jpg" width="200" alt="Grafik">
</body>
</html>

Es ist natürlich uns überlassen welche Größe wir angeben wollen. Wir könnten anstatt der Breite width auch nur die Höhe mit height angeben.

Es ist auch möglich die Größe anzugeben, die die Grafik im Browserfenster belegen soll, dafür geben wir den Prozentsatz an, dessen Fläche im Fenster die Grafik belegen soll. Wenn wir die Größe als Prozent angeben wollen müssen wir nur nach der Zahl ein %-Zeichen anhängen.

<html>
<head>
<title> Grafiken in HTML </title>
</head
<body>
<img src="Bild.jpg" width="100%" height="100%" alt="Grafik">
</body>
</html>

Hier im Beispiel wird die Grafik vergrößert oder verkleinert damit sie das ganze Browserfenster ausfüllt. Dabei werden die Seitenverhältnisse nicht eingehalten.

Wenn wir nur Breite oder nur Höhe angeben, wird das Seitenverhältnis beibehalten. Hier ein Beispiel:

<html>
<head>
<title> Grafiken in HTML </title>
</head
<body>
<img src="Bild.jpg" height="50%" alt="Grafik">
</body>
</html>

In diesen Beispiel nimmt die Grafik 50% der Fensterhöhe ein die Seitenverhältnisse werden dabei eingehalten, auch wenn die Breite des Fensters kleiner ist als die Breite der Grafik.

Rahmen für Grafiken erstellen
Mit dem Attribut border (Rahmen) kann ganz einfach ein Rahmen gezeichnet werden. Es muss border nur die Dicke des Rahmens in Pixel übergeben werden.

<html>
<head>
<title> Grafiken in HTML </title>
</head
<body>
<img src="Bild.jpg" height="50%" border="3" alt="Grafik">
</body>
</html>