[Tutorial] Allgemeine HTML Erklärung in HTML
von
Bengt
• ( Admin | Beiträge: 1.532 )
Jeder Forenbesitzer, braucht damit er sein Forum seinen Wünschen anpassen kann, bestimmte Kenntnisse.
In diesem Tutorial möchte ich Sie ersteinmal die nötigen Grundlagen vermitteln.
1. Aufbau einer HTML-Seite:
"<html>" - ist die Ankündigung für den Browser , dass es sich um ein HTML-Seite handelt
"</html>" - Schließt die Seite ab und sagt dem Browser, dass die Seite nun endet
"<body>" (engl. Körper) - beinhaltet alles das, was auf der Website später angezeiogt werden soll
"</body>" - schließt den body Abschnitt
---> mit "< .... >" wird immer etwas angefangen
---> mit "</ ... >" wird immer etwas beendet
es gibt noch "<head>" "</head>"
Zwischen "<head>" und "</head>" können styles festgelegt werden und Javascript-Funktionen geschrieben werden.
Dieser Bereich muss vor Beginn des Body-Bereichs Gestartet und geschlossen werden.
Styles werden zwischen "<style></style>" definiert und Javascript Funktionen zwischen "<script type="text/javascript"></script>" definiert.
Hier finden Sie nähere Informationen zur Verwendung von Styles: klick
2. HTML in HPM-Tempaltes
In den HPM - Templates finden sie öfters Begriffe wie:
"<table>" "<td>" "<tr>" und natürlich "</table>" "</td>" "</tr>"
"<table>" - wie der Name schon sagt, öffnet eine neue Tabelle
"</table>" - schließt die Tabelle wieder
"<tr>" - erstellt eine neue Zeile
"</tr>" - schließt eine Zeile
"<td>" - erstellt in einer Zeile eine Spalte
"</td>" - schließt die Spalte wieder
2.1.1 Zusatz Codes für Table
Wenn man genau hinschaut, erkennt man, dass hinter dem <table ......> noch etwas steht.
CELLSPACING, CELLPADDING
Cellspacing:
Bezeichnung für den Abstand der Zellen untereinander
Cellpadding:
Beeichnung für den Innen Abstand der Zellen bis zum Zellen Rand.
Quelle: http://de.selfhtml.org/html/tabellen/gestaltung.htm
WICHTIG: Wenn man eine Tabelle oder irgendetwas öffnet, dann sollten diese auch immer wieder geschlossen werden.
2.1.2 Zusatz Codes für TD
"Colspan" - Hiermit könne Sie mehrere Spalten mit einander verbinden, dies ist nützlich wenn Sie zum Beispiel
in der ersten Zeile 3 Spalten angelegt haben und in der 2. nur eine, damit es dann zu einer vernünftigen Darstellung kommt.
"Rowspan" - Hiermit könne Sie mehrere Zeilen mit einander verbinden.
Natürlichen können Sie, wie im CSS Tutorial beschrieben, auch hier Ihren kreativen Geist freien Lauf lassen und die Tabellen und Spalten Ihren Wünschen nach gestalten.
Weitere Links: http://de.selfhtml.org/html/tabellen/gestaltung.htm
2.2 "<div></div>"
"<div>" - dient zur Formatierung und erstellt sogenannte Container
Es können so HTML-Elementen, die zwischen "<div>" und "</div>" stehen Stylesheet-Eigenschaften zugewiesen werden. siehe CSS - Tutorial
Ein "<div>" erzeugt aber nach dem Schließen durch "</div>" einen Zeilen Umbruch, möchten Sie dieses vermeiden verwenden sie anstelle "<div>" "<span>". Hierbei wird nach dem beenden kein Zeilenumbruch erzeugt.
2.3 "<a href=...>","</a>"
"<a href=.....>" - Setzt einen Hyperlink.
z.B.
Erläuterung: "<a href=' ihr Link'> Text/Bild unter dem der Link liegt </a>"
2.4 "<form>","<input>"
Auch diese Sachen findet man im HPM-Template.
"<form></form>" - Startet bzw. schließt ein Formular.
"<input>" - Fügt ein Element z.B. Schaltfläche oder Eingabefeld ein
*Ich würde Ihnen abraten etwas daran zuverändern!!! Sie könnten damit die Funktionalität Ihres Forums beeinträchtigen!!!*
2.4.1 Näheres zu "<form></form>"
Sie werden sicher bemerkt haben, dass sich in "<form>" öfters noch andere Dinge befinden.
Form benötigt,um richtig zu Funktionieren mindestens 2 weitere Angaben.
1. "action = '....' " - Hier wird ein Link eingefügt wohin das Formular geschickt werden soll.
2. "method = '....' " - Hier wird festgelegt, wie das Formular versendet werden soll.
Beispiel zu 1.:
Zu 2.: Am häufigsten verwendet man 2 Methoden - "GET", "POST"
Hier möchte ich nun aufhören näher auf dieses Problem einzugehen, weil dies nur für das Scripten mit PHP relevant ist.
2.4.2 Näheres zu "<input>"
Meist sehen sie im Template nicht nur "<input>", sondern "<input type='...' class='...' value='..' name='...'>"
"type" - Übergibt die Art des Input-feldes
Es gibt davon mehrere Arten:
1. Eingabefeld = 'text'
2. Schaltfläche= 'button'
3. Absenden des Formulars = 'submit'
4. Eingabetextfeld = 'textarea'
5. Es können auch Bilder als Buttons verwendet werden.
5.1 Bild als Submit-Button = 'img'
5.2 Wenn ein Bild als Normaler Button definiert werden soll, brauchen sie nur hinter dem "<input>" ihr Bild einfügen *siehe Punkt 2.5* Beispiel : http://de.selfhtml.org/html/formulare/anzeige/button.htm
"class" - Fügt weist dem Input-Feld einen bestimmte Style zu siehe [url=http://91151.homepagemodules.de/t38f55-Tutorial-Allgemeine-CSS-Erklaerung.html[/url]
"value" - Beinhaltet den Wert des Feldes
"name" - Hier können sie einen Namen des Feldes eintragen.
--> auf value und name werde ich auch nicht näher eingehen, weil dies wieder nur für PHP-Scripten von Nöten ist
2.5 Bilder einfügen "<img src= ....>"
Durch "<img src= >" können sie ein Bild einfügen und anzeigen lassen.
Beispiel:
Auch hier gibt es noch einige Zusatz Funktionen:
Beispiel:
"border" - Bestimmt den Rahmen des Bildes --> siehe hier
"alt" - Wird angzeigt, wenn das Bild geladen wird oder nicht geladen werdne kann.
"width", "height" - Legen die Anzeigebreite und Anzeigehöhe des Bildes fest
In diesem Tutorial möchte ich Sie ersteinmal die nötigen Grundlagen vermitteln.
1. Aufbau einer HTML-Seite:
<html>
<body>
</body>
</html>
"<html>" - ist die Ankündigung für den Browser , dass es sich um ein HTML-Seite handelt
"</html>" - Schließt die Seite ab und sagt dem Browser, dass die Seite nun endet
"<body>" (engl. Körper) - beinhaltet alles das, was auf der Website später angezeiogt werden soll
"</body>" - schließt den body Abschnitt
---> mit "< .... >" wird immer etwas angefangen
---> mit "</ ... >" wird immer etwas beendet
es gibt noch "<head>" "</head>"
Zwischen "<head>" und "</head>" können styles festgelegt werden und Javascript-Funktionen geschrieben werden.
Dieser Bereich muss vor Beginn des Body-Bereichs Gestartet und geschlossen werden.
Styles werden zwischen "<style></style>" definiert und Javascript Funktionen zwischen "<script type="text/javascript"></script>" definiert.
Hier finden Sie nähere Informationen zur Verwendung von Styles: klick
2. HTML in HPM-Tempaltes
In den HPM - Templates finden sie öfters Begriffe wie:
"<table>" "<td>" "<tr>" und natürlich "</table>" "</td>" "</tr>"
"<table>" - wie der Name schon sagt, öffnet eine neue Tabelle
"</table>" - schließt die Tabelle wieder
"<tr>" - erstellt eine neue Zeile
"</tr>" - schließt eine Zeile
"<td>" - erstellt in einer Zeile eine Spalte
"</td>" - schließt die Spalte wieder
2.1.1 Zusatz Codes für Table
Wenn man genau hinschaut, erkennt man, dass hinter dem <table ......> noch etwas steht.
CELLSPACING, CELLPADDING
Cellspacing:
Bezeichnung für den Abstand der Zellen untereinander
Cellpadding:
Beeichnung für den Innen Abstand der Zellen bis zum Zellen Rand.
Quelle: http://de.selfhtml.org/html/tabellen/gestaltung.htm
WICHTIG: Wenn man eine Tabelle oder irgendetwas öffnet, dann sollten diese auch immer wieder geschlossen werden.
2.1.2 Zusatz Codes für TD
"Colspan" - Hiermit könne Sie mehrere Spalten mit einander verbinden, dies ist nützlich wenn Sie zum Beispiel
in der ersten Zeile 3 Spalten angelegt haben und in der 2. nur eine, damit es dann zu einer vernünftigen Darstellung kommt.
<table cellspacing = "1" cellpadding = "2">
<tr>
<td>Spalte 1</td>
<td>Spalte 2</td>
<td>Spalte 3</td>
</tr>
<tr>
<td colspan="3">Spalte 1</td> //Die 1. Spalte in der 2. Zeile umfasst nun 3 Spalten
</tr>
</table>
"Rowspan" - Hiermit könne Sie mehrere Zeilen mit einander verbinden.
Natürlichen können Sie, wie im CSS Tutorial beschrieben, auch hier Ihren kreativen Geist freien Lauf lassen und die Tabellen und Spalten Ihren Wünschen nach gestalten.
Weitere Links: http://de.selfhtml.org/html/tabellen/gestaltung.htm
2.2 "<div></div>"
"<div>" - dient zur Formatierung und erstellt sogenannte Container
Es können so HTML-Elementen, die zwischen "<div>" und "</div>" stehen Stylesheet-Eigenschaften zugewiesen werden. siehe CSS - Tutorial
Ein "<div>" erzeugt aber nach dem Schließen durch "</div>" einen Zeilen Umbruch, möchten Sie dieses vermeiden verwenden sie anstelle "<div>" "<span>". Hierbei wird nach dem beenden kein Zeilenumbruch erzeugt.
2.3 "<a href=...>","</a>"
"<a href=.....>" - Setzt einen Hyperlink.
z.B.
<a href = "91151.homepagemodules.de>MYHPM</a>
Erläuterung: "<a href=' ihr Link'> Text/Bild unter dem der Link liegt </a>"
2.4 "<form>","<input>"
Auch diese Sachen findet man im HPM-Template.
"<form></form>" - Startet bzw. schließt ein Formular.
"<input>" - Fügt ein Element z.B. Schaltfläche oder Eingabefeld ein
*Ich würde Ihnen abraten etwas daran zuverändern!!! Sie könnten damit die Funktionalität Ihres Forums beeinträchtigen!!!*
2.4.1 Näheres zu "<form></form>"
Sie werden sicher bemerkt haben, dass sich in "<form>" öfters noch andere Dinge befinden.
Form benötigt,um richtig zu Funktionieren mindestens 2 weitere Angaben.
1. "action = '....' " - Hier wird ein Link eingefügt wohin das Formular geschickt werden soll.
2. "method = '....' " - Hier wird festgelegt, wie das Formular versendet werden soll.
Beispiel zu 1.:
<form action="http://91151.homepagemodules.de">..</form>
Zu 2.: Am häufigsten verwendet man 2 Methoden - "GET", "POST"
<form action="http://91151.homepagemodules.de" method = "POST">..</form>
Hier möchte ich nun aufhören näher auf dieses Problem einzugehen, weil dies nur für das Scripten mit PHP relevant ist.
2.4.2 Näheres zu "<input>"
Meist sehen sie im Template nicht nur "<input>", sondern "<input type='...' class='...' value='..' name='...'>"
"type" - Übergibt die Art des Input-feldes
Es gibt davon mehrere Arten:
1. Eingabefeld = 'text'
2. Schaltfläche= 'button'
3. Absenden des Formulars = 'submit'
4. Eingabetextfeld = 'textarea'
5. Es können auch Bilder als Buttons verwendet werden.
5.1 Bild als Submit-Button = 'img'
5.2 Wenn ein Bild als Normaler Button definiert werden soll, brauchen sie nur hinter dem "<input>" ihr Bild einfügen *siehe Punkt 2.5* Beispiel : http://de.selfhtml.org/html/formulare/anzeige/button.htm
"class" - Fügt weist dem Input-Feld einen bestimmte Style zu siehe [url=http://91151.homepagemodules.de/t38f55-Tutorial-Allgemeine-CSS-Erklaerung.html[/url]
"value" - Beinhaltet den Wert des Feldes
"name" - Hier können sie einen Namen des Feldes eintragen.
--> auf value und name werde ich auch nicht näher eingehen, weil dies wieder nur für PHP-Scripten von Nöten ist
2.5 Bilder einfügen "<img src= ....>"
Durch "<img src= >" können sie ein Bild einfügen und anzeigen lassen.
Beispiel:
<img src = "bild-link.">
Auch hier gibt es noch einige Zusatz Funktionen:
Beispiel:
<img src="...." height="2" width="2" border = "0" alt = "BILD">
"border" - Bestimmt den Rahmen des Bildes --> siehe hier
"alt" - Wird angzeigt, wenn das Bild geladen wird oder nicht geladen werdne kann.
"width", "height" - Legen die Anzeigebreite und Anzeigehöhe des Bildes fest
