M-XPro

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>

Sonntag, 11. Mai 2014

Textabsätze in HTML

Mit dem Start-Tag <p> (p = pargraph = Absatz) und End-Tag </p> können Textabsätze erstellt werden. Der Text des Absatzes muss zwischen den Start- und End-Tags stehen. Nach einem Absatz wird eine Leerzeile hinzugefügt und automatisch eine neue Zeile begonnen. Hier ein Beispiel:

<html>
<head>
<title> Textabsätze in HTML </title>
</head
<body>
<p> Dies ist ein Textabsatz! </p>
Dies ist ein Text ohne Textabsatz! <br />
Aber mit Zeilenumbruch.
</body>
</html>

Um den Absatz gut zu demonstrieren habe ich einen normalen Text mit dem Zeilenumbruch <br /> (br = break = Umbruch) hinzugefügt. Im Browser wird unsere Seite so angezeigt:

Hier kann man gut erkennen, dass zwischen den Absatz und den unteren beiden Sätzen eine eine Leerzeile durch den Absatz entsteht. Natürlich stehen uns wie in den Überschriften das Attribut align (Ausrichtung) zur Verfügung um den Text auszurichten.

Donnerstag, 8. Mai 2014

Überschriften in HTML

In HTML gibt es für Überschriften das Tag <h1> bis <h6> (h = heading = Überschrift). Diese Tags bestehen immer aus Start- und End-Tag. Die Zahl ist sozusagen eine Ebene. Zwischen den Start- und End-Tag steht der Text der Überschrift. Hier ein Beispiel dazu:

<html>
<head>
<title> Textstrukturierung in HTML </title>
</head
<body>
<h1>Erste Überschrift</h1>
<h2>Zweite Überschrift</h2>
<h3>Dritte Überschrift</h3>
<h4>Vierte Überschrift</h4>
<h5>Fünfte Überschrift</h5>
<h6>Sechste Überschrift</h6>
</body>
</html>

Man sollte darauf achten, dass die Nummer des Start- und End-Tags identisch sind. Im Browser wird unser Beispiel so angezeigt:

Wie wir sehen ist die erste Überschrift die Größte und die nächste Überschriften werden immer kleiner. Dies sind die Standardeinstellungen der Tags <h1> bis <h6>. Wenn die Textausrichtung nicht angegeben wird, wie im Beispiel, wird die Überschrift standardmäßig linksbündig Ausgerichtet. Jede Überschrift ist ein Absatz, d.h. nach dem End-Tag wird eine Leerzeile hinzugefügt und eine neue Zeile begonnen.

Mit dem Attribut align (Ausrichtung) ist es uns möglich die Überschrift nicht nur linksbündig auszurichten.

Es gibt vier Möglichkeiten den Text auszurichten. Left (links) richtet den Text linksbündig aus, dies ist die Standardeinstellung von HTML und braucht normal nicht verwendet werden. Center (zentriert) richtet den Text mittig aus. Right (recht) richtet den Text rechtsbündig aus. Justify (justieren) richtet den Text als Blocksatz aus (der Abstand der einzelnen Wörter wird angepasst, wenn man die Fenstergröße mit der Maus manuell verändert, kann man es sehr gut beobachten, dass die Abstände sich verändern.

Hier der Beispielcode dazu:

<html>
<head>
<title> Textstrukturierung in HTML </title>
</head
<body>
<h4 align="center">Erste Überschrift</h4>
<h2 align="right">Zweite Überschrift</h2>
<h1 align="left">Dritte Überschrift</h1>
<h2 align="justify">Hier kommt ein etwas längere Überschrift um den Blocksatz zu demonstrieren und dafür muss er einfach etwas länger sein.
</body>
</html>

Das Attribut align muss im Start-Tag nach den Überschriftenebene stehen und mit den = die Textausrichtung angegeben werden.

Samstag, 3. Mai 2014

Links in HTML

Um in HTML einen Link setzen zu können, muss zuerst ein Anker gesetzt werden, mit dem Tag <a> und </a>. In den Start-Tag hinter den a setzen wir eine Hypertext Reference mit der Abkürzung href=.

Link zu einer Webseite im Internet
Um jetzt z.B. einen Link auf meinen Blog zu setzen, fügen wir einfach die Adresse ein "http://m-xpro.blogspot.de/" ein. Damit der Link sichtbar wird, müssen wir den Link einen Namen geben, den wir zwischen den Start- und End-Tag schreiben. Hier ein Beispiel:

<html>
<head>
<title> Meine erste Homepage! </title>
</head
<body>
<p>Links</p>
<a href="http://m-xpro.blogspot.de/">M-XPro</a>
</body>
</html>

Für das Verlinken von Seiten muss immer in der Adresse “http://” angegeben werden.

Link zu einer eigenen Seite
Das Verlinken einer eigenen Seite auf der Homepage geht im Prinzip genauso wie das Verlinken einer Webseite aus dem Internet. Wir geben einfach den Namen der Seite als Hypertext Reference an. Hier ein Beispiel:

<html>
<head>
<title> Meine erste Homepage! </title>
</head
<body>
<p>Links</p>
<a href="test.html">Testlink</a>
</body>
</html>

Bei diesen Beispiel ist vorausgesetzt, dass die test.html im selben Verzeichnis ist, in der unser Beispielcode abgespeichert ist. Es ist auch möglich einen Link zu erstellen, deren Datei in einen Unterverzeichnis ist.

<html>
<head>
<title> Meine erste Homepage! </title>
</head
<body>
<p>Links</p>
<a href="unterverzeichnis/test.html">Testlink</a>
</body>
</html>

Es ist natürlich auch möglich, einen Link in einen vorherigen Verzeichnis zu erstellen.

<html>
<head>
<title> Meine erste Homepage! </title>
</head
<body>
<p>Links</p>
<a href="../test.html">Testlink</a>
</body>
</html>

Natürlich ist es auch möglich ../ mehrfach zu verwenden, um mehrere Verzeichnisse zurück zu gehen. Hier noch ein Beispiel:

<html>
<head>
<title> Meine erste Homepage! </title>
</head
<body>
<p>Links</p>
<a href="../../testverzeichnis/test.html">Testlink</a>
</body>
</html>

Bei diesen Beispiel gehen wir zwei Verzeichnisse zurück und in das Unterverzeichnis "testverzeichnis". Es ist natürlich auch möglich das komplette Verzeichnis anzugeben. Wenn sich aber unser Projektverzeichnis änder, müssen wir die Verzeichnisse der Links ändern, deren kompletten Pfade angegeben wurden.

Ein Bild als Link
Es ist auch möglich ein Bild für den Link zu verwenden. Hier ein Beispiel:

<html>
<head>
<title> Meine erste Homepage! </title>
</head
<body>
<a href="test.html"><img src="bild.jpg" /></a>
</body>
</html>

Das Tag img steht für Imge (Bild), src= ist ein Attribut das die Adresse/Verzeichnis des Bild erwartet. Wie wir sehen ist <img /> ein Tag ist das gleichzeitig Start- und auch End-Tag ist, wie <br /> auch. Oft möchte man die Bilder für einen Link kleiner haben, dies ist auch kein Problem. Hier ein Beispiel:

<html>
<head>
<title> Meine erste Homepage! </title>
</head
<body>
<a href="test.html"><img src="bild.jpg" width="112" height="268"></a>
</body>
</html>

Mit den Attributen width und height können wir die Bildgröße nach belieben anpassen.

Links innerhalb einer Seite
Es ist natürlich auch möglich innerhalb einer Seite einen Link zu setzen, dies bewerkstelligen wir mit einer ID. Hier ein Beispiel:

<html>
<head>
<title> Meine erste Homepage! </title>
</head
<body>
<a href="#pos1">Link 1</a><br />
<a href="#pos2">Link 2</a>
<p id="pos1"> Position des ersten Links </p>
<p id="pos2"> Position des zweiten Links </p>
</body>
</html>

Der Hypertext Reference übergeben wir dieses mal keine Adresse sondern eine ID die wir am Anfang mit einen # markieren. Eine ID muss immer mit einen Buchstaben beginnen. In den Tag das wir verlinken wollen, schreiben wir id= gefolgt von der gewünschten ID.
In den Beispiel wird man den Sprung auf die ID nicht sehen, da die Seitenzeilen zu gering sind. Wer es aber testen möchte kann einige Zeilenumbrüche mit <br /> einfügen um es zu testen.

Verlinken einer E-Mail-Adresse
Es ist uns auch möglich eine E-Mail-Adresse zu verlinken. Hier ein Beispiel:

<html>
<head>
<title> Meine erste Homepage! </title>
</head
<body>
<a href="mailto:mailadresse@gmail.de">
e-mail an mailadresse@gmail.de senden</a>
</body>
</html>

Jetzt übergeben wir einfach der Hypertext Reference mailto: gefolgt mit der gewünschte E-Mail-Adresse.

Donnerstag, 1. Mai 2014

EPICA - Storm The Sorrow (OFFICIAL VIDEO)

Einführung in HTML

Willkommen zu meinen ersten HTML Tutorial.

Für den Anfang stellt sich die Frage, was brauche ich für HTML? Wenn man es genau nimmt, hat man schon alles was nötig ist. Wir brauchen nur dazu einen Texteditor mehr nicht. Ich verwende für den Anfang einfach den Texteditor von Windows 8. Wir müssen nur darauf achten den Text nicht als Textdatei (*.txt, usw.) zu speichern, sondern als HTML-Datei (*.htm oder *.html).

Wir könnten z.B. "Hallo, dies ist meine erste Homepage" schreiben und es als HTML-Datei speichern und dann in einem Browser öffnen. Das Ergebnis ist recht unspektakulär.

Elemente und Tags
Elemente geben an, wie die Webseite ausschauen soll, sie bestehen fast immer aus einen Start- und End-Tag. Tag-Bezeichnungen stehen immer zwischen < und >. Es gibt zwei Arten von Tags, das Start-Tag wie <html> und das End-Tag </html>, das mit einem Slash (/) dargestellt wird. Es gibt auch Ausnahmen wie <br />, das Start- und End-Tag gleich zusammen ist.

Jetzt wollen wir mal etwas Struktur in den HTML-Code bringen. Hier ein Beispiel:

<html>
<head>
<title> Meine erste Homepage! </title>
</head
<body>
<p> Meine erste Homepage! </p>
</body>
</html>

Wir werden sehen dass sich nicht viel geändert hat, wenn wir die Datei mit dem Browser öffnen. Dies ist aber die Grundstruktur die jeder HTML-Seite haben sollte. Gehen wir unseren Code einfach mal durch.

In Zeile 1 steht das Start-Tag <html> damit geben wir an, dass ab hier HTML-Code steht, bis zum End-Tag </html>.

In Zeile 2 bis 4 wird mit den Tags <head> und </head> angegeben dass hier die Informationen der Datei stehen. Hier wird z.B. in Zeile 3 zwischen den Tag <title> und </title> der Titel der Datei angegeben. Der Titel wird auch von Suchmaschinen verwendet um die Seite im Suchindex aufzunehmen und der Seitentitel wird im Suchergebnis angezeigt.

In Zeile 5 bis 7 die mit den Tags <body> und </body> angegeben sind, steht der Inhalt der Datei, sozusagen das was wir im Browser sehen. Zwischen den Tags <p> und </p> steht der Text der im Browser ausgegeben werden soll. Das p steht für paragraph und bedeutet soviel wie Absatz. Man könnte auch die Tags <p> und </p> weglassen hier im Beispiel würde es kein Unterschied machen.

Es ist auch egal ob man die Tags groß oder klein schreibt es würde kein Unterschied machen. Besser ist es aber bei der Kleinschreibung zu bleiben.