Sura 1 Artworks

Acrylmalerei, Mischtechniken, Webdesign

«
»

XHTML-Elemente: Struktur-Aufbau

Verfasst von sura1 am 21. August 2008

Bookmark and Share

XHTML-STRUKTUR:

Definition:

Elemente, die nicht in der Strict-DTD aufgeführt sind, sind grau dargestellt!

Erklärung zu den Beispielen:

Klicken Sie bitte auf den Link BESCHREIBUNG und Sie erhalten eine ausführliche Erläuterung des betreffenden XHTML-Elementes (entnommen aus http://de.selfhtml.org/ ).

Für jedes Element stelle ich Ihnen ein von mir gestaltetes Beispiel vor (mit Quell-Text und Browser-Ansicht). Zusätzlich finden Sie unter WEITERE BEISPIELE je einen Link auf die englischsprachigen XHTML-Tutorials der Webseiten http://htmlplayground.com/ und
http://www.w3schools.com/

<body> <body>

Definiert den Dokumentenkörper ( Beschreibung )

Das <body>-Element kennzeichnet Beginn und Ende des Inhalts eines HTML-Dokuments, welches im Browserfenster dargestellt wird. body = (Körper – anzuzeigender Inhalt, also Text mit Überschriften, Verweisen, Grafikreferenzen usw.)

Beispiel:

Quellcode:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">

<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>body-tag: Definition Dokumentenkörper</title>
</head>

<body>

<p>........hierher kommt der eigentliche Text
mit Überschriften, Verweisen, Grafikreferenzen usw.</p>

</body>

</html>

Beispiel: ( hier ansehen!)

Weitere Beispiele:

http://htmlplayground.com/#tag_body
http://www.w3schools.com/tags/tag_body.asp

<head> </head>

Definiert den Dokumentenkopf ( Beschreibung )

Das <head>-Element ist der Kopfbereich des HTML-Dokuments. Es stellt einen Behälter für andere Tags dar, die den Inhalt und die Darstellung des body-Elements steuern.

Informationen: http://de.selfhtml.org/html/kopfdaten/index.htm

Der <head>Tag wird direkt hinter dem <html>-Tag und noch vor dem <body>-Tag eingesetzt. Im Kopfbereich dürfen folgende HTML-Elemente vorkommen: <base>, <link>, <meta>, <script>, <style> und <title>.

Beispiel:

Quellcode:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
<base target="_blank" />
<link rel="stylesheet" type="text/css" href="styles.css" >
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Franz Sadjak">
<meta http-equiv="expires" content="Sat, 05 Aug 2008 00:00:00 GMT">
<title>head-tag: Definiton Dokumentenkopf</title>
<style type="text/css"><!-- --></style>
<script type="text/javascript"><!-- --></script>

</head>

<body>
------------ Webseiteninhalt -------------
</body>

</html>

Beispiel: ( hier ansehen!)

Weitere Beispiele:

http://htmlplayground.com/#tag_head
http://www.w3schools.com/tags/tag_head.asp

<html> </html>

Root-Element eines HTML-Dokuments ( Beschreibung )

Die erste Zeile in einer HTML-Datei stellt die Dokumententyp-Deklaration (DTD) dar (welche HTML-Version verwendet wird).

Danach folgt das <html>-Element, welches als Wurzelelement einer HTML-Datei bezeichnet wird.

Beispiel:

Quellcode:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>html-tag:  Definition HTML-Dokument</title>
</head>

<body>

--------- Webseiteninhalt -----------------

</body>

</html>

Beispiel: ( hier ansehen!)

Weitere Beispiele:

http://htmlplayground.com/#tag_html
http://www.w3schools.com/tags/tag_html.asp

<meta />

Metainformationen ( Beschreibung )

Die <meta>-Elemente stehen im Kopf-Bereich eines HTML-Dokuments, also im <head>-Element. Sie werden beim Abrufen der Webseite an den Browser geschickt, aber nicht angezeigt. Im Quellcode der Seite sind sie sichtbar.

Meta-Tags sollen vor allem die Durchsuchbarkeit des World Wide Webs bzw. einer einzelnen Webpräsenz verbessern. Außerdem lassen sich mithilfe von Meta-Tags spezielle Anweisungen zur Steuerung der Suchroboter von Suchmaschinen notieren.

Beispiel:

Quellcode:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
<meta name="author" content="Sura 1">
<meta name="description" content="Dieser Beschreibungstext soll einem
Anwender im Suchdienst bei Auffinden dieser Datei erscheinen.">
<meta name="keywords" content="HTML, Meta-Informationen,Suchprogramme,
HTTP-Protokoll">
<meta name="date" content="2008-08-05 T15:49:37+02:00">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>meta-tag: Definition Metainformationen</title>
</head>

<body>
  -------- Webseiteninhalt -----------
</body>

</html>

Beispiel: ( hier ansehen!)

Weitere Beispiele:

http://htmlplayground.com/#tag_meta
http://www.w3schools.com/tags/tag_meta.asp

<noscript> </noscript>

Bereich bei inaktiver Skriptverarbeitung ( Beschreibung )

Mit dem <noscript>-Element können Sie einen Bereich definieren, der nur angezeigt wird, wenn die verwendete Script-Sprache nicht verfügbar ist, das Script also nicht ausführbar ist.

Beispiel:

Quellcode:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <title>noscript-tag: Definition inaktive Scripverarbeitung</title>
</head>
<body>

<script type="text/javascript">
<!--
document.write("Falls Sie diesen Text sehen, kann Ihr Browser JavaScript darstellen!")
//-->
</script>

<noscript>No JavaScript support!</noscript>

<p>Ein Browser, der JavaScript nicht darstellen kann,
zeigt Ihnen den Text hier im noscript-Bereich.</p>

</body>

</html>

Beispiel: ( hier ansehen!)

Weitere Beispiele:

http://www.w3schools.com/tags/tag_noscript.asp
http://htmlplayground.com/#tag_noscript

<script> </script>

Skriptbereich ( Beschreibung )

Das <script>-Element definiert einen Script-Bereich.

Beispiel:

Quellcode:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <title>script-tag: Definition Scriptbereich</title>
</head>

<body>

<script type="text/javascript">
document.write("<h1>Hello World!</h1>")
</script>

</body>

</html>

Beispiel: ( hier ansehen!)

Weitere Beispiele:

http://www.w3schools.com/tags/tag_script.asp
http://htmlplayground.com/#tag_script

<style> </style>

Stylesheet-Bereich (CSS-Bereich) ( Beschreibung )

Das <style>-Element leitet im Kopfbereich der HTML-Datei einen Bereich zum Definieren von Formaten ein (style = Stil). Sie definieren diese nach der Syntax der Stylesheet-Sprache. Die von Ihnen vorgenommenen CSS-Definitionen gelten dann für die gesamte Datei.

<style> bindet also Stylesheet-Anweisungen ein, welche die Elemente im <body>-Bereich des –HTML-Dokumentes formatieren.

Beispiel:

Quellcode:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <title>style-tag: Defintion Stylesheet-Bereich</title>

<style>
h1 {color: red}
h3 {color: blue}
</style>

</head>
<body>
<h1>This is header 1</h1>
<h3>This is header 3</h3>
</body>
</html>

Beispiel: ( hier ansehen!)

Weitere Beispiele:

http://www.w3schools.com/tags/tag_style.asp
http://htmlplayground.com/#tag_style

<title> </title>

Titel des HTML-Dokuments ( Beschreibung )

Das <title>-Element definiert das wohl wichtigste HTML-Element auf einer ganzen Seite, welches im <head>-Bereich der HTML-Datei stehen muss. Der Titel erscheint in der Kopfleiste des Browserfensters, in dem das Dokument aufgerufen wurde. Der Titel einer Webseite sollte kurz und prägnant sein.

Beispiel:

Quellcode:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <title>title-tag: Definition Dokumententitel</title>
</head>

<body>

<p>Das <title>-Element definiert das wohl wichtigste HTML-Element auf einer ganzen
Seite, welches im <head>-Bereich der HTML-Datei stehen muss. </p>

</body>

</html>

Beispiel: ( hier ansehen!)

Weitere Beispiele:

http://www.w3schools.com/tags/tag_title.asp
http://htmlplayground.com/#tag_title

<frame />

Framebereich ( Beschreibung )

Das <frame>-Element stellt einen Teilbereich einer HTML-Seite, in dem eine andere HTML-Seite dargestellt werden kann. Das einzelne Segment wird dabei als Frame (engl. Rahmen) bezeichnet, die Definition aller Frames als Frameset. Weitere Infos: http://de.wikipedia.org/wiki/Frame_(HTML)

Beispiel:

Quellcode:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <title>frame-tag: Definition Framebereich</title>
</head>

<frameset cols="50%,50%,*">
<frame src="http://sura1.wordpress.com" />
<frame src="http://www.cssplay.com" />
</frameset>

</html>

Beispiel: ( hier ansehen!)

Weitere Beispiele:

http://www.w3schools.com/tags/tag_frame.asp
http://htmlplayground.com/#tag_frame

<frameset> </frameset>

Aufteilung des Browsers in Frames ( Beschreibung )

Das <frameset>-Element definiert eine HTML-Datei, die die Aufteilung des Browserfensters in mehrere Frames, in die jeweils eine eigene Datei geladen wird, definiert. Innerhalb des <frameset>-Tags wird die Anzahl, Größe und weitere Eigenschaften der Frames festgelegt. Weitere Infos: http://de.wikipedia.org/wiki/Frameset

Beispiel:

Quellcode:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <title>frameset-tag: Definition Frameset</title>
</head>

<frameset cols="50%,50%,*">
<frame src="http://google.com" />
<frame src="http://yahoo.com" />
</frameset>

</html>

Beispiel: ( hier ansehen!)

Weitere Beispiele:

http://www.w3schools.com/tags/tag_frameset.asp
http://htmlplayground.com/#tag_frameset

<noframes> </noframes>

Bereich inaktiver Framedarstellung ( Beschreibung )

Mit dem <noframes>-Element sollten Sie zusätzlich zu einem Frame-Bereich immer noch einen No-Frame-Bereich definieren, da nicht alle (besonders ältere) Browser keine Frames darstellen können.

Beispiel:

Quellcode:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <title>noframes-tag: Defintion inaktiver Framebereich</title>
</head>

<frameset cols = "30%, *">
  <noframes>
  <body>Wenn Ihr Browser keine Frames anzeigt, erscheint dieser Text!!</body>
  </noframes>
  <frame src ="http://google.com" />
  <frame src ="http://yahoo.com" />
</frameset>

</html>

Beispiel: ( hier ansehen!)

Weitere Beispiele:

http://www.w3schools.com/tags/tag_noframes.asp
http://htmlplayground.com/#tag_noframes

<iframe> </iframe>

Eingebettetes Frame ( Beschreibung )

Das <iframe>-Element ist ein HTML-Element, das der Strukturierung von Webseiten dient. Es wird benutzt, um andere Webinhalte als selbständige Dokumente in einem Unterfenster des Browsers anzuzeigen. Weitere Infos: http://de.wikipedia.org/wiki/Iframe

Beispiel:

Quellcode:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <title>iframe-tag: Definition eingebettetes Frame</title>
<style type="text/css">
iframe { padding:4px;
         width:1000px;
         height:600px;
         border:1px dotted #808080;
       }
</style>
</head>

<body>
<iframe src ="http://google.com">
</iframe>
</body>

</html>

Beispiel: ( hier ansehen!)

Weitere Beispiele:

http://www.w3schools.com/tags/tag_iframe.asp
http://htmlplayground.com/#tag_iframe

Dieser Eintrag wurde erstellt am 21. August 2008 um 10:06 und ist abgelegt unter XHTML-Elemente. Verschlagwortet mit : , , , , , , , , , , , , , , , , , , , , , , , , . Du kannst alle Antworten auf diesen Eintrag mitverfolgen über den RSS 2.0 Feed. Du kannst einen Kommentar hinterlassen, oder Trackback von deiner eigenen Seite.

Eine Antwort schreiben

XHTML: Du kannst diese Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <pre> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

«
»