Die HTML Grundelemente
Tutorials
Darstellungen und Erläuterungen von HTML Elementen
für alle Programmierer und Incomedia's Website X5 Nutzung
HTML-Elemente sind einzelne Komponente eines HTML-Dokuments oder einer Webseite und bestehen aus einem Baum von HTML-Knoten. Für jeden Knoten können HTML-Attribute angegeben werden. Knoten können auch Inhalt enthalten, einschließlich anderer Knoten und auch Text.
Wo gehört nun welcher Code hinein und wo ist dieser HTML Konform? Wie komme ich dort eigentlich hin?
In jedem Forum werden Fragen beantwortet und Scripte gepostet, mit meist einer pauschalen Aussage wo der Code eingefügt werden soll. Doch gibt es unzählige Bereiche, die aber ihren bedeutenden Zweck erfüllen, damit ein reibungsloser Ablauf auch gewährleistet werden kann.
In jedem Forum werden Fragen beantwortet und Scripte gepostet, mit meist einer pauschalen Aussage wo der Code eingefügt werden soll. Doch gibt es unzählige Bereiche, die aber ihren bedeutenden Zweck erfüllen, damit ein reibungsloser Ablauf auch gewährleistet werden kann.
In diesem Bereich geht es ausschließlich um HTML Grundelemente. Diese Zusammenstellung soll dabei helfen, den richtigen Bereich für den jeweiligen Code zu wählen und den Weg dahin auch zu finden. Zur optimalen Bearbeitung von HTML-Dokumenten emphehlen wir das Programm Notepad++. bereits x aufgerufen
Bereich: CSS-Code
Um HTML-Seiten ein anspruchsvolles Layout zu verpassen werden Container-Elemente sowie Style-Definitionen benötigt und die Cascading Style Sheets (CSS), um Bereiche und deren Inhalte zu gestalten. Wenn die Webseite aus vielen HTML-Seiten besteht, müssten solche Änderungen immer noch in jedem Dokument durchgeführt werden - also lässt sich der ganze CSS-Code auch noch selbst auslagern beispielsweise namens "stylesheet.css". Stattdessen kommt hier der CSS-Code Bereich ins Spiel. Somit werden keine CSS-Eigenschaften im Head-Bereich oder eine anhängende CSS-Datei benötigt.
Da die CSS-Eigenschaften aus diesem CSS-Bereich direkt in eine zugehörige CSS-Datei übertragen werden, dürfen hier keine <style>....</style> Tags genutzt werden. Dieser Bereich steht somit nur Nutzern von Website X5 zur Verfügung.
/* Style Beispiele */
body,td,th {
font-family: Verdana, Arial, Helvetica;font-size: 12px; color: #000000; }
.supHoch { vertical-align: baseline;
#imBtMn {font-size: 1.0em; position: relative;top: -0.4em; }
border: 3px solid #b4da9f; padding: 10px;margin: 10px; border-radius: 20px;-webkit-box-shadow: 0 0 20px #ccc;box-shadow: 0 0 20px #ccc; }
Website X5 - Der Weg dort hin für die jeweilige Seite:
3 SITEMAP- Seite markieren und öffnen
- HTML Code Objekt markieren und öffnen
- Reiter: Erweitert
- Bereich: CSS-Code
Vor dem <HTML> Tag
Das html-Tag informiert den Browser, dass eine HTML-codierte Seite vorliegt. Öffnendes und schließendes <html>....</html> bilden den Anfang und das Ende des
HTML-Dokuments. Das einzige Tag, das vor dem <html> Tag stehen darf, ist das <!DOCTYPE> Tag. Obwohl es nicht gefordert ist, sollte im <html> Tag die Landessprache oder »gesprochene« Sprache der Webseite durch den Sprachcode deklariert werden: lang="de"
Im html-Tag dürfen nur zwei Tags direkt sitzen: das HTML-head-Tag und das HTML-body-Tag. Allerdings dürfen im html-Tag auch Kommentare und PHP-Startcode sitzen.
Vor diesen Startcodes dürfen keine Leerzeichen eingefügt sein.
<!-- Bereich: Vor dem <HTML> Tag -->
<!DOCTYPE ... ">
<html>
<html>
<head>
<title> ..... </title><meta ..... /><link ..... /><style> ..... </style><script> ..... </script>
</head><body><div> ..... </div><script> ..... </script><code> ..... </code></body>
</html>
Website X5 - Der Weg dort hin für die jeweilige Seite:
3 SITEMAP- Seite markieren
- Button: Eigenschaften
- Reiter: Erweitert
- Benutzerdefinierter Code: Vor dem <HTML> Tag
Website X5 - Der Weg dort hin für alle Seiten:
1 EINSTELLUNGEN
- Reiter: Erweitert
- Bereich: Statistiken, SEO und Code
- Reiter: Code
- Benutzerdefinierter Code: Vor dem <HTML> Tag
Vor dem </HEAD> Tag
Der <head>....</head> ist der Kopfteil eines HTML-Dokuments. Im HEAD-Bereich liegen die Metadaten (title, meta und base), die Informationen zur Seite liefern, die Darstellung steuern und über die Beziehungen zu anderen Dateien (style, link, script) und HTML-Seiten informieren.
Was im head-Tag steht, wird nicht auf der Webseite angezeigt. Die einzige Ausnahme ist das title-Tag, das von den Browsern im oberen Fensterrahmen gezeigt wird.
Immer wieder einmal müssen Anweisungen unbedingt auch "Vor dem </head> Tag" eingefügt werden.
<!DOCTYPE ... ">
<html>
<head>
<title> ..... </title><meta ..... /><link ..... /><style> ..... </style><script> ..... </script><!-- Bereich: Vor dem </HEAD> Tag -->
</head><body><div> ..... </div><script> ..... </script><code> ..... </code></body>
</html>
Website X5 - Der Weg dort hin für die jeweilige Seite:
3 SITEMAP
- Seite markieren
- Button: Eigenschaften
- Reiter: Erweitert
- Benutzerdefinierter Code: Vor dem </HEAD> Tag
Website X5 - Der Weg dort hin für alle Seiten:
1 EINSTELLUNGEN
- Reiter: Erweitert
- Bereich: Statistiken, SEO und Code
- Reiter: Code
- Benutzerdefinierter Code: Vor dem </HEAD> Tag
Nach dem <HEAD> Tag
Der <head>....</head> ist der Kopfteil eines HTML-Dokuments. Im HEAD-Bereich liegen die Metadaten (title, meta und base), die Informationen zur Seite liefern, die Darstellung steuern und über die Beziehungen zu anderen Dateien (style, link, script) und HTML-Seiten informieren.
Was im head-Tag steht, wird nicht auf der Webseite angezeigt. Die einzige Ausnahme ist das title-Tag, das von den Browsern im oberen Fensterrahmen gezeigt wird.
Immer wieder einmal müssen Anweisungen auch direkt "Nach dem <head> Tag" eingefügt werden.
<!DOCTYPE ... ">
<html>
<html>
<head>
<!-- Bereich: Nach dem <HEAD> Tag -->
<title> ..... </title><meta ..... /><link ..... /><style> ..... </style><script> ..... </script>
</html></head><body><div> ..... </div><script> ..... </script><code> ..... </code></body>
Website X5 - Der Weg dort hin für die jeweilige Seite:
3 SITEMAP
- Seite markieren
- Button: Eigenschaften
- Reiter: Erweitert
- Benutzerdefinierter Code: Nach dem <HEAD> Tag
Website X5 - Der Weg dort hin für alle Seiten:
1 EINSTELLUNGEN
- Reiter: Erweitert
- Bereich: Statistiken, SEO und Code
- Reiter: Code
- Benutzerdefinierter Code: Nach dem <HEAD> Tag
Vor dem </BODY> Tag
Der <body>....</body> Bereich kennzeichnet den Anfang und das Ende des sichtbaren Inhalts der Webseite und enthält den anzuzeigenden bzw. darzustellenden Inhalt eines HTML-Dokumentes. Browser zeigen nur den Inhalt zwischen dem öffnenden und schließenden body Tag im Browserfenster. Ansonsten bestimmen die Reihenfolge der anzuzeigenden Elemente der Programmierer meist in Verbindung mit den CSS-Eigenschaften eines Elements.
Immer wieder einmal müssen Scripte auch unbedingt "Vor dem </body> Tag" eingefügt werden.
<!DOCTYPE ... ">
<html>
<html>
<head><title> ..... </title><meta ..... /><link ..... /><style> ..... </style><script> ..... </script>
</html></head><body><div> ..... </div><script> ..... </script><code> ..... </code><!-- Bereich: Vor dem </BODY> Tag --></body>
Website X5 - Der Weg dort hin für die jeweilige Seite:
3 SITEMAP
- Seite markieren
- Button: Eigenschaften
- Reiter: Erweitert
- Benutzerdefinierter Code: Vor dem </BODY> Tag
Website X5 - Der Weg dort hin für alle Seiten:
1 EINSTELLUNGEN
- Reiter: Erweitert
- Bereich: Statistiken, SEO und Code
- Reiter: Code
- Benutzerdefinierter Code: Vor dem </BODY> Tag
Nach dem <BODY> Tag
Der <body>....</body> Bereich kennzeichnet den Anfang und das Ende des sichtbaren Inhalts der Webseite und enthält den anzuzeigenden bzw. darzustellenden Inhalt eines HTML-Dokumentes. Browser zeigen nur den Inhalt zwischen dem öffnenden und schließenden body Tag im Browserfenster. Ansonsten bestimmen die Reihenfolge der anzuzeigenden Elemente der Programmierer meist in Verbindung mit den CSS-Eigenschaften eines Elements.
Immer wieder einmal müssen Scripte auch direkt "Nach dem <body> Tag" eingefügt werden.
<!DOCTYPE ... ">
<html>
<html>
<head>
<title> ..... </title><meta ..... /><link ..... /><style> ..... </style><script> ..... </script>
</head><body>
<!-- Bereich: Nach dem <BODY> Tag -->
</html><div> ..... </div><script> ..... </script><code> ..... </code></body>
Website X5 - Der Weg dort hin für die jeweilige Seite:
3 SITEMAP
- Seite markieren
- Button: Eigenschaften
- Reiter: Erweitert
- Benutzerdefinierter Code: Nach dem <BODY> Tag
Website X5 - Der Weg dort hin für alle Seiten:
1 EINSTELLUNGEN
- Reiter: Erweitert
- Bereich: Statistiken, SEO und Code
- Reiter: Code
- Benutzerdefinierter Code: Nach dem <BODY> Tag
Website X5 bietet dafür natürlich für jede Seite das HTML Code Objekt zum platzieren der Elemente an die gewünschte Stelle in diesem Bereich an. Somit sind die o. g. Details nur informatorisch.
Innerhalb des <BODY> Tag
Das onLoad Attribut ist eine Ereignisbehandlungsroutine die den Browser anweist ein Skript auszuführen, wenn der Besucher die Seite lädt.
Dies wird normalerweise verwendet, um den Besucher auf eine andere Seite weiterzuleiten. Es kann jedoch auch verwendet werden, um Popup-Boxen auszulösen oder ein Skript auszuführen, das auf der Browserversion des Benutzers basiert.
<!DOCTYPE ... ">
<html>
<html>
<head>
<title> ..... </title><meta ..... /><link ..... /><style> ..... </style><script> ..... </script>
</html></head><body onload="<!-- Bereich: Innerhalb des <BODY> Tag -->"><div> ..... </div><script> ..... </script><code> ..... </code></body>
Website X5 - Der Weg dort hin für die jeweilige Seite:
3 SITEMAP
- Seite markieren
- Button: Eigenschaften
- Reiter: Erweitert
- Benutzerdefinierter Code: Innerhalb des <BODY> Tag
Website X5 - Der Weg dort hin für alle Seiten:
1 EINSTELLUNGEN
- Reiter: Erweitert
- Bereich: Statistiken, SEO und Code
- Reiter: Code
- Benutzerdefinierter Code: Innerhalb des <BODY> Tag
HTML-Seite zu PHP-Seite
PHP (rekursives Akronym und Backronym für PHP: Hypertext Preprocessor) ist heutzutage eine notwendige Skriptsprache, die hauptsächlich zur Erstellung dynamischer Webseiten oder Webanwendungen und für die Webprogrammierung verwendet wird. Diese wird in HTML eingebettet und kann umfangreiche Operationen ausführen.
Um PHP ausführen zu könnn, ist es erforderlich, dass die jeweilige HTML-Seite (.html) auf PHP (.php) umbenannt wird. Das erfolgt unproblematisch, indem die Dateiendung einfach nur umbenannt wird und hat keinerlei Auswirkungen auf bereits vorhandene Inhalte.
Zu beachten wäre nur, dass Verlinkungen zu dieser Seite natürlich auch entsprechend angepasst werden müssen.
<!DOCTYPE ... ">
<html>
<head>
<title> ..... </title><meta ..... /><link ..... /><style> ..... </style><script> ..... </script>
</head><body>
<div> ..... </div><script> ..... </script><!-- Anzeige <PHP> Code --><php> ..... </php><code> ..... </code>
</body>
</html>
Website X5 - Der Weg dort hin für die jeweilige Seite:
3 SITEMAP
- Seite markieren
- Button: Eigenschaften
- Reiter: Erweitert
- Dateinamenformat: PHP
» nach oben «