M-XPro

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.

Mittwoch, 21. Mai 2014

Maßeinheiten in CSS

Es ist in CCS auch wichtig die Maßeinheiten zu kennen, die uns zur Verfügung steht. Leider gibt es hier ein kleines oder auch etwas größere Problem. Da die Größe von den Betriebssystemen verschieden berechnet wird, ist nicht gewährleistet, dass z.B. die Schriftgröße auf einen anderen Rechner gut lesbar ist. Man sollte deshalb darauf achten dass die Schrift nicht zu klein ist.

Kommawerte der Maßeinheiten müssen immer mit einem Punkt geschrieben werden (11,45 ist also 11.45).

Hier sind die Maßeinheiten die uns unter CSS zur Verfügung stehen: pt, pc, in, mm, cm, px, em, ex und %

Die absolute Maßeinheiten
Absolute Maßeinheiten geben einen festen Wert an.

pt steht für Point, 1 Point ist sozusagen ein Punkt groß auf dem Bildschirm. 1 Punkt entspricht 1/72 Inches.
pc steht für Pica, 1 Pica entspricht 12 Punkte auf dem Bildschirm.
in steht für Inch, 1 Inch entspricht 2.54 Zentimeter.
mm steht für Millimeter.
cm steht für Zentimeter.
px steht für Pixel, die Größe des Pixels ist vom Bildschirm abhängig.

Die relative Maßeinheiten
Relative Maßeinheiten werden erst errechnet.

em steht für bezogen auf die Schriftgröße des Elements oder bezogen auf die Schriftgröße des Elternelements, wenn em bei der Schriftgröße des Elements angewendet wird.
ex steht für bezogen auf die Größe des Kleinbuchstaben x des Elements oder bezogen auf die Größe des Kleinbuchstaben x auf das Elternelement, wenn ex bei der Schriftgröße des Elternelements angewendet wird.
% steht für Prozent, je nach CSS-Eigenschaft relativ zur Größe des Elements, oder zu der des Elternelements.

Dienstag, 20. Mai 2014

Aufbau des CSS-Syntax

Der Syntax des CSS-Codes ist in drei Bereichen zu unterteilen. Der Selektor, die Eigenschaft und der Wert.

Selektor {Eigenschaft: Wert;}

Der Selektor der aus HTML-Tags besteht, es müssen aber nicht immer HTML-Tags sein, mehr dazu aber erst später. Die Eigenschaft und der Wert stehen zwischen { und }. Bei den Eigenschaften wird z.B. die Textfarbe angegeben, nach der Eigenschaft steht immer ein Doppelpunkt. Der Wert ist der Wert den die Eigenschaft erhält, nach einem Wert steht immer ein Semikolon. Es können auch mehr als nur eine Eigenschaft in den geschweiften Klammern angegeben werden, die dann immer durch ein Semikolon getrennt sind.

Selektor {Eigenschaft: Wert; Eigenschaft: Wert;}

Kommentare in CSS

Kommentare in CSS sind natürlich auch möglich und sinnvoll, um den Code übersichtlicher zu gestallten und eventuell anderen Web-Designer die Arbeit mit ihrem Code leichter zu machen. CSS-Kommentare stehen zischen /* und */. Hier ein Beispiel:

<html>
<head>
<title> Layout mit CSS </title>
<style>
/* Blaue Textfarbe für Textabsätze */
p{color:blue;}
</style>
</head
<body>
<p>Dies ist ein Beispieltext!</p>
</body>
</html>

Wenn der CSS-Code zentral in einer HTML-Datei liegt, darf ein CSS Kommentar nur zwischen den Tags <style> und </style> stehen, außerhalb dieser Tags wird der Kommentar nicht als Kommentar erkannt. Der Text des Kommentares kann auch über mehrere Zeilen gehen. Hier ein Beispiel:

<html>
<head>
<title> Layout mit CSS </title>
<style>
/* Blaue
Textfarbe
für Textabsätze */
p{color:blue;}
</style>
</head
<body>
<p>Dies ist ein Beispieltext!</p>
</body>
</html>

Bei Stylesheets die im HTML-Tag stehen, ist es nur möglich einen HTML-Kommentar (Kommentare in HTML) zu schreiben.

In einer externen CSS-Datei können Kommentare in der ganzen Datei verwendet werden.

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:

Einführung in CSS

CSS (Cascading Style Sheets) ist für das Layout der Webseiten zuständig. Es ist zwar in HTML auch möglich, wie es im HTML Tutorial beschrieben ist, in HTML ist es aber um einiges umständlicher und es ist nicht sicher, ob alle Tags und Attribute von jeden Browser unterstützt werden. CSS dagegen wird von allen Browsern unterstützt. Man sollte sich angewöhnen für das Layout CSS zu verwenden und nicht mehr die HTML-Attribute.

Wir erstellen uns eine Datei home.html, diese Datei wird in den nächsten Tutorials immer wieder verwendet, der Code wird aber öfters ausgetauscht und/oder erweitert. Jetzt schreiben wir das HTML-Grundgerüst für unsere Webseite. Hier der dazugehörige HTML-Code:

<html>
<head>
<title> Layout mit CSS </title>
</head
<body>
</body>
</html>

Wer das erste HTML Tutorial (Einführung in HTML) gelesen hat, dürfte den Beispielcode ohne Probleme verstehen.

Es gibt drei Methoden Stylesheets zu verwenden.

Stylesheets in ein Tag schreiben
Mit dem Attribut style können wir den CSS-Code in ein HTML-Tag schreiben. Hier ein Beispiel:

<html>
<head>
<title> Layout mit CSS </title>
</head
<body>
<p style="color:red;">Beispieltext für den Textabsatz.</p>
</body>
</html>

Die Werte des style-Attributs ändert die Schriftfarbe des Absatzes auf rot. Man muss aber bedenken, dass die Eigenschaft nur in diesem Tag verändert wird in der das style-Attribut steht. Würde noch ein <p>-Tag folgen würde dieser Absatz die Standardschriftart haben.

Stylesheets zentral definieren
Es ist möglich Stylesheets im HTML-Code einzufügen. Hier der Code für die Datei home.html:

<html>
<head>
<title> Layout mit CSS </title>
<style type="text/css">
</style>
</head
<body>
</body>
</html>

Zwischen dem Start-Tag <style> und End-Tag </style> können wir den CSS-Code einfügen, für dieses Tutorial werden wir keinen CSS-Code einfügen. Die beiden Tags sollten zwischen dem <head>-Tag und </head> stehen. Das Attibut type (Typ) ist ein MIME-Type (für MIME-Type werde ich auch noch ein Tutorial schreiben) und dafür müssen wir die CSS-Sprache angeben, damit wir CSS nutzen können, dies geht mit "text/css".

Stylesheets als externe Datei
Ich finde die beste Methode ist, eine externe Datei dafür anzulegen. Wir erstellen ein neues Verzeichnis mit dem Namen Style und erstellen uns im Verzeichnis Style die Datei default.css.

Jetzt müssen wir noch einen Link mit dem <link />-HTML-Tag in der Datei home.html erstellen. Hier der Beispielcode dazu:

<html>
<head>
<title> Layout mit CSS </title>
<link rel="stylesheet" type="text/css" href="style/default.css" />
</head
<body>
</body>
</html>

Das <link />-Tag ist dafür da einen Verweis auf eine andere Datei zu erstellen, damit der Inhalt der angegebenen Datei in der home.html verwendet werden kann. Dieses Tag muss zwischen dem <head>-Tag und </head>-Tag stehen. Das Attribut rel (relation = Bezug), hier geben wir "stylesheet" an. Für das Attribut type (Typ) geben wir für CSS "text/css" an und zum Schluss für das Attribut href (Hypertext Reference, das HTML-Tag href wird im Tutorial Links in HTML besprochen), geben wir das Verzeichnis oder Adresse unserer erstellten CSS-Datei default.css an.

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

Seiten

Mittwoch, 28. Mai 2014

Mittwoch, 21. Mai 2014

Dienstag, 20. Mai 2014

Sonntag, 18. Mai 2014

Donnerstag, 15. Mai 2014