Sura 1 Artworks

Acrylmalerei, Mischtechniken, Webdesign

Archive for the ‘XHTML’ Category

Grundgerüst einer Webseite – DOCTYPE

Posted by sura1 - 23. Mai 2008

Bookmark and Share

Der Seiten-Quelltext einer Webseite lässt sich grob in 4 Abschnitte unterteilen:

  • DOCTYPE am Anfang in der ersten Zeile
  • Das Stammelement html, welches einen head und einen body enthalten muss
  • Vorspann head mit dem title und anderen Elementen wie meta usw.
  • body enthält den Inhalt, welcher durch den Browser dargestellt wird

DOCTYPE hat eine unübersichtliche Syntax; deshalb ist es besser, wenn Sie diesen am besten in den Quelltext kopieren. Kopiervorlagen finden Sie z.B. in SelfHTML: http://de.selfhtml.org/html/allgemein/grundgeruest.htm

Beispiel Grundgerüst:

  1. Erstellen Sie einen neuen Ordner, den Sie z.B. „meineseite“ nennen
  2. Starten Sie ihren Lieblingseditor und erstellen Sie eine leere Datei
  3. Speichern der noch leeren Datei unter dem Namen „index.html“
  4. Erstellen Sie untenstehendes HTML-Grundgerüst

<!DOCTYPE html PUBLIC „-//W3C//DTD XHTML 1.0 Transitional//EN“ „http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“&gt;

<html xmlns=“http://www.w3.org/1999/xhtml&#8220; lang=“de“ xml:lang=“de“>

<head>

<meta http-equiv=“Content-Type“ content=“text/html; charset=iso-8859-1″ />

<title>Sura 1 – Vorschaltseite</title>

</head>

<body>

</body>

</html>

Speichern Sie diese Datei und betrachten Sie diese in einem Browser. Sie sehen im Browser fast nichts, nur links oben in der Titelleiste steht der von Ihnen gewählte Titel.

Dokumententyp-Definition: <!DOCTYPE html PUBLIC…>

<!DOCTYPE html PUBLIC „-//W3C//DTD XHTML 1.0 Transitional//EN“ „http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“&gt;

Die Dokumententyp-Definition, die in meinem Beispiel zur besseren Übersichtlichkeit in zwei Zeilen aufteteilt ist, sollte in der allerersten Zeile des Quelltextes stehen. DOCTYPE sagt dem Browser 3 Dinge:

  • wie das Stammelement für das folgende Dokument heißt (html)
  • welche HTML-Version benutzt wird (hier z.B. XHTML 1.0 Transitional)
  • wo das dazugehörige Grammatikbuch zu finden ist (die URL)

Der <!DOCTYPE>-Tag gibt die Document Type Definition (DTD) des Dokuments an. Die DTD bestimmt die Grammatik und die Syntax der HTML-Sprache.

Dahinter verbirgt sich, dass die Standardisierung von HTML im Laufe der Jahre Versionen hervorbrachte, die den heutigen Bestrebungen einer reinen Strukturierungssprache entgegenliefen und z.B. Hintergrundfarben und Schriftenauszeichnung definierten, und Browser ein Reservoir an herstellerspezifischen Tags einbrachten, die heute als unerwünscht gelten. Ein moderner Browser soll aber gleichzeitig veralterte und moderne HTML-Dokumente korrekt darstellen. Die Angabe des Dokumententyps verhilft dem Browser zu einer besseren Orientierung und vermeidet Darstellungsfehler. Wenn das <!DOCTYPE>-Tag nicht gesetzt wird, simulieren neuere Browser zudem die Darstellungsfehler ihrer älteren Versionen, auch hier wieder in dem Bestreben, „antike“ HTML-Dokumente weiterhin ansehnlich zu rendern. So kann es passieren, dass Sie ein Dokument korrekt codieren, der Browser das Dokument aber fehlerhaft darstellt, da er sich an seine alte Darstellung eines Elements hält.

Alle HTML-Elemente beginnen und enden mit einem sogenannten *tag*. Dabei unterscheidet sich der Ende-Tag durch einen vorangestellten Schrägstrich vom Anfangs-Tag.

<p>Das ist ein neuer Absatz</p>

Der DOCTYPE-Tag kann nur in die erste Zeile des HTML-Codes gesetzt werden und weist weitere Besonderheiten auf:

  • Es ist der einzige Tag, das vor dem <HTML>-Tag stehen kann.
  • Es gibt keinen Ende-Tag
  • Das Ausrufezeichen „!“ ist zwingend erforderlich.



Beispiele:

HTML 4.01 – Strict, Transitional, Frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 – Strict, Transitional, Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1 – DTD

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Posted in XHTML | Verschlagwortet mit: , , , , , , , , | Leave a Comment »

Einführung (X)HTML – Syntax

Posted by sura1 - 22. Mai 2008

Bookmark and Share

(X)HTML-Elemente:

X H T M L

S T R U K T U R

<body></body>

Dokumentkörper, body

<frame />

Frame

<frameset></frameset>

Frameset

<head></head>

Kopfbereich einer (X)HTML-Datei, head

<html></html>

HTML

<iframe></iframe>

Eingebetteter Frame, inline frame

<meta />

Meta-Tag, Metainformationen

<noframes></noframes>

No-Frames-Bereich

<noscript></noscript>

No-Script-Bereich

<script></script>

Bereich für Script

<style></style>

Style Definition (CSS)

<title></title>

Dokumententitel, Seitentitel

L O G I S C H E

A U S Z E I C H N U N G

<abbr></abbr>

Abkürzung, abbreviated form

<acronym></acronym>

Abkürzung

<address></address>

Adresse, Kontaktinformation, address

<bdo></bdo>

Textrichtung, bidirectional overwrite

<blockquote></blockquote>

längeres Zitat

<br />

Zeilenumbruch, break

<cite></cite>

Zitat

<code></code>

Textauszeichnung für Code

<del></del>

Textausz. für gelöschten Text, deleted text

<dfn></dfn>

Definition, definition

<div></div>

Bereich/Container, division

<em></em>

betonter Text, emphasis

<h1></h6>

Überschriften der Ebenen 1-6 , heading

<hr />

Horizontale Trennlinie, horizontal rule

<ins></ins>

Eingefügter Text, inserted text

<kbd></kbd>

Tastaturtext, keyboard

<p></p>

Absatz, paragraph

<pre></pre>

vorformatierter Text, preformatted

<q></q>

kurzes Inline-Zitat, quotation

<samp></samp>

Beispielcode, sample

<span></span>

Inline-Bereich (innerhalb eines Dokuments)

<strong></strong>

stark betonter Text

<var></var>

Variable für ein Programm, variable

P H Y S I S C H E

A U S Z E I C H N U N G

<b></b>

Fettschrift

<big></big>

großer Text, big

<i><>/i>

Kursiver Text, italic

<small></small>

kleinerer Text

<sub></sub>

tiefgestellter Text, subscript

<sup></sup>

hochgestellter Text, superscript

<tt></tt>

Schreibmaschinenschrift, teletype

T A B E L L E N

<caption></caption>

Tabellenüberschrift

<col />

Tabellenspalte

<colgroup></colgroup>

Gruppe von Tabellenspalten

<table></table>

Tabelle, table

<tbody></tbody>

Tabellenkörper, table body

<td></td>

Tabellenzelle, table data

<tfood></tfood>

Tabellenfuss, table foot

<th></th>

Tabellenkopfzelle, table header

<thead></thead>

Kopfbereich einer Tabelle, table head

<tr></tr>

Tabellenzeile, table row

L I S T E N

<dd></dd>

Beschreibung einer Definition, definition definition

<dl></dl>

Definitionsliste, definition list

<dt></dt>

zu definierender Begriff, definition term

<li></li>

Listenelement, list item

<ol></ol>

Nummerierte Liste, orderd list

<ul></ul>

ungeordnete Liste, unordered list

F O R M U L A R E

<button></button>

Button für Formular

<fieldset></fieldset>

Gruppe von Formularelementen

<form></form>

Formular

<input />

Formularelement, Eingabefeld

<label></label>

Etikett, Beschriftung Formularfeld

<legend></legend>

Überschrift innerhalb Fieldset

<optgroup></optgroup>

Gruppe von Elementen in einer Liste

<option></option>

Einzelnes Element einer Auswahlliste

<select></select>

Auswahlliste, Listenauswahl

<textarea></textarea>

mehrzeiliges Eingabefeld

R E F E R E N Z I E R U N G

<a><a/>

Anker, Hyperlink, anchor

<area />

Bereich innerhalb einer Imagemap

<base />

Linkbasis

<img />

Grafik, Bild, image

<link />

Link Referenz

<map>

Imagemap

<object></object>

zur Einbindung beliebiger Objekte

<param />

Parameter für Anwendung

Posted in XHTML | Verschlagwortet mit: , , , , , , | Leave a Comment »

Was ist HTML eigentlich?

Posted by sura1 - 22. Mai 2008

Bookmark and Share

Webseiten bestehen aus rechteckigen Kästchen

Webseiten bestehen eigentlich aus nichts anderem als aus rechteckigen Kästchen die im Browserfenster übereinander, nebeneinander und ineinander gestapelt werden. Beim Umgang mit diesen Kästchen haben die Sprachen HTML und CSS („Cascading Style Sheets“) klart getrennte Aufgaben:

HTML ist der Maurer, der das Haus und die Zimmeraufteilung anlegt. Mit HTML werden die rechteckigen Kästchen und mit Inhalt gefüllt.

CSS ist der Dekorateur, der Haus und Zimmer gestaltet. Mit CSS werden Kästchen und Inhalt gestaltet und positioniert.

HTML ist eigentlich recht einfach und wird gerade deshalb oft nicht ernst genommen. Wenn die Kästchen in HTML aber nicht sauber gebaut sind, führt das beim Gestalten mit CSS unter Umständen zu großen Problemen. Deshalb beginnt die Gestaltung von Webseiten mit soliden HTML-Kenntnissen.

Was ist HT – M – L eigentlich?:

Die englische Bedeutung von HTML steht für HYPERTEXT MARKUP LANGUAGE und bedeutet übersetzt „Sprache zur Markierung von Hypertext„.

Eine etwas genauere Bestimmung dieser 4 Buchstaben bedeutet aber auch:

HT wie HYPERTEXT:

Hypertext ist ein Text mit automatischen Querverweisen, die im Web auch Hyperlinks oder Links genannt werden. Das Internet besteht aus Milliarden von Webseiten, die durch Hyperlinks miteinander verbunden sind.

M wie MARKUP:

Markup wird häufig mit „Auszeichnung“ übersetzt und bedeutet auch Waren auszeichnen durch „Etiketten dran kleben“ HTML klebt also Etiketten in den Text einer Webseite.

L wie LANGUAGE:

HTML ist eine Sprache und hat dementsprechend Vokabeln und eine Grammatik. Tags, Elemente, Attribute und Grammatikregeln – alles muss gelernt und sehr genau umgesetzt werden.

XHTML:

XHTML ist die neuere Version von HTML. Das W3C-Konsortium regelt die Standards rund um das World Wide Web. Das „X“ steht nach diesen Standards für „eXtensible“ („erweiterbar“). Die Grammatikregeln von XHTML sind strenger als die von HTML.

Quellen-Angabe: Little Boxes; Webseiten gestalten mit CSS. Grundlagen

Posted in XHTML | Verschlagwortet mit: , , , , | Leave a Comment »

Meine erste Webseite

Posted by sura1 - 22. Mai 2008

Bookmark and Share

Nachdem ich im Laufe von fast 2 Jahren mehr als 100 Bilder geschaffen hatte, wurde es Zeit, sich um die Veröffentlichung der Kunstwerke im Internet zu beschäftigen.

Neben meiner Malerei beschäftige ich mich deshalb seit Oktober 2007 auch sehr intensiv mit der Gestaltung meiner privaten Webseite. Ich war, wie bereits ausgeführt, zu diesem Zeitpunkt ein völliger Anfänger im Web Design. Im Laufe der Monate habe ich jedoch sehr viel dazugelernt und bin nun dabei, demnächst mit meiner ersten Webseite online zu gehen.

Screenshots meiner erste Versuche:

Vorschaltseite – Intro

————————————————–

STARTSEITE

————————————————–

BIOGRAFIE

————————————————–

BILDERGALERIE

————————————————–

KONTAKTSEITE

————————————————–

LINKLISTE

—————————————————

IMPRESSUM

————————————————–

Posted in XHTML | Verschlagwortet mit: , , , , , , , | Leave a Comment »

(X)HTML – Geschichte

Posted by sura1 - 21. Mai 2008

Bookmark and Share

Bevor ich Ihnen den Aufbau einer Webseite näher erklären werde, etwas zur Entstehung des Internets:

Surfen und HTML

„Surfen“ war 1984 olympische Disziplin, „Seiten“ kennt man aus Zeitschriften und Büchern und „blättern“ (engl. to browse) ist die typische Handbewegung des Lesers. All diese Begriffe sind Metaphern für die Benutzung von Programmen, die HTML-Dateien anzeigen. Wenn man einen Computer aufschraubt, gibt es darin keine Meeresbrandung, keine Surfbretter und keine Papierstapel. Auch bunte Seiten und Bilder, Animationen und Filmchen sucht man vergeblich. In Wirklichkeit ist eine HTML-Datei eine Ansammlung von magnetisierten Stellen auf einer sich drehenden Scheibe irgendwo auf der Welt. Eine HTML-Datei läßt sich in elektrische Signale umwandeln, die über Telefonleitungen verschickt werden können. Ein Computer kann diese Signale dann wieder als magnetisierte Stellen auf seiner Festplatte „abspeichern“, die dann von einem Programm „geöffnet“ werden können, das eine Interpratation dieser Daten vornimmt und eine menschenlesbare Ausgabe am Bildschirm erzeugt.

Was ist HTML?

HTML steht für Hypertext Markup Language und ist die Sprache des World Wide Web (WWW). Entwickelt wurde HTML durch Tim Berners-Lee, damals Mitarbeiter am CERN, und verbreitete sich mit dem Wachstum des Internets und des WWW in den 1990er Jahren. HTML ist eine Anwendung von SGML (Standard Generalized Markup Language), einem System zur Definition von Dokumentenbeschreibungssprachen und genügt der ISO Norm 8879.

Neben einem universellen Bennenungsschema zur Lokalisierung von Webresourcen, den URIs (Uniform Resource Identifier), und dem gemeinsamen Protokoll, HTTP (Hypertext Transfer Protokoll), ist HTML die wichtigste Grundlage des WWW, indem es die Darstellung der Ressourcen des WWW und eine einfache Navigation zwischen den Inhalten ermöglicht.

Eine HTML-Datei enthält keine Informationen darüber, wie der Computer Bildpunkt (engl. Pixel) für Bildpunkt zeilenweise einen Bildschirm füllen soll. Eine HTML-Datei enthält Text, Informationen darüber, was der Text bedeutet (die logische Struktur des Dokuments) und Informationen über bestimmte physische Attribute bestimmter Textpassagen (wie Hervorhebungen durch Fettdruck, kursive Schrift oder Unterstreichungen).

Ein Webbrowser ist ein Programm, das Text auf dem Bildschirm darstellen (rendern) kann. Dabei interpretiert der Browser Informationen über die logische und physische Struktur des Textes, die in einer HTML-Datei enthalten sind und stellt den Text entsprechend dar.

Enthält eine HTML-Datei etwa die Information, daß eine Textpassage ein Hyperlink ist, dann stellt der Browser diese Passage mit Hervorhebungen (normalerweise blau und unterstrichen) dar und „springt“, wenn man das Link anklickt auf eine andere „Seite“ bzw. Stelle derselben „Seite“. Die HTML-Datei enthält nur Informationen, die besagen, daß eine Textpassage ein Hyperlink ist und daß die Zieladresse dieses Links soundso ist. Hyperlinks als blaue, unterstrichene und anklickbare Textpassagen zu rendern ist eine Konvention, der die Mehrzahl der Internetbrowser genügt, aber nicht Inhalt der HTML-Datei.

Was ist XHTML?

XHTML (Extensible Hypertext Markup Language) war eine Neufassung von HTML als Anwendung von XML (Extensible Markup Language). Daher genügen XHTML 1.0 Dokumente gleichzeitig dem XML Standard und entsprechen mit sehr geringfügigen Abweichungen auch dem letzten HTML Standard (HTML 4.01). So sind z. B. die Unterschiede zwischen HTML 3.2 und HTML 4.01 viel bedeutsamer als die zwischen HTML 4.01 und XHTML 1.0.

HTML (als SGML-Anwendung) wird inzwischen nicht mehr vom W3C weiterentwickelt. Seit XHTML 1.1 versucht das W3C die stärkere Modularisierung der Markupsprache durchzusetzen. XHTML 2.0 ist die neueste Entwicklung in dieser Richtung, sie soll nicht mehr abwärtskompatibel sein.

Wesentliche Vorzüge von XHTML gegenüber HTML sind:

  • Erweiterbarkeit der Sprache
  • Verwendbarkeit von XML Werkzeugen
  • Kompatibilität zu existierender HTML Software

Quelle: Uni Bielefeld/Fakultät für Linguistik und Literaturwissenschaft

Posted in XHTML | Verschlagwortet mit: , , , , , , , , , , | Leave a Comment »