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 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

Legende:

Innerhalb des <BODY> Tag

HTML-Seite zu PHP-Seite

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;

font-size: 1.0em; position: relative;
top: -0.4em; }

#imBtMn {

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

Klick

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.

<!DOCTYPE ... ">
<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

Klick

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

Klick

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>

</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

Klick

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

Klick

Nach dem <HEAD> Tag

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>

<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: Nach dem <HEAD> Tag

Klick

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

Klick

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>

<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 </BODY> Tag

Klick

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

Klick

Nach dem <BODY> Tag

Immer wieder einmal müssen Scripte auch direkt "Nach dem <body> Tag" eingefügt werden.

<!DOCTYPE ... ">
<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: Nach dem <BODY> Tag

Klick

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

Klick

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>

<head>

<title> ..... </title>
<meta ..... />
<link ..... />
<style> ..... </style>
<script> ..... </script>

</head>
<body onload="">
<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: Innerhalb des <BODY> Tag

Klick

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

Klick

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>

<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

Klick

» nach oben «