DATA
5 GmbH - Themenseite
|
|
|
|
|
|
|||
Verwandte Seiten |
|
||||
| 11. Juni 2004 |  |
 |
HTML ist DIE Seitenbeschreibungssprache des Internets. Fundierte Kenntnisse dieser "Sprache" sind für jeden Webautor unerlässlich. Trotz langsam besser werdender Autorensystemen, wie zum Beispiel Macromedia Dreamweaver oder MS-Frontpage, kommt trotzdem kein ernsthafter Webautor daran vorbei, sich mit den Grundlagen und Details der HTML-Sprache zu beschäftigen.
Zur Thema HTML sind im Internet zahlreich, teilweise sehr gute Informationen verfügbar. Hier einige Links zur Einarbeitung in das Thema:
HTMLWorld
- sehr gute Einführung
SelfHTML
von Stefan Münze - DIE Referenz zu fast allen Themen der Webentwicklung
Webreference
- HTML
Bloberry
HTML-Reference
Übersicht
über verschiedene HTML-Normen (mit Erscheinungsdatum)
Offizielle Seiten des W3C
Die
offizielle HTML-Homepage des W3C
XHTML
1.0 Spezifikation (Januar 2000)
HTML
4.01 Spezifikation (Dezember 99)
HTML
4.0 Spezifikation (April 98)
HTML
3.2 Spezifikation (Jan. 97)
Sind Sie sicher, dass der HTML-Code Ihrer Seite "korrekt" im Sinne der Norm ist? Wirklich? Eine kostenfreie Überprüfung schafft Klarheit.
Validieren
von HTML und CSS-Dateien [ T2128 ]
Cascading Style Sheets (CSS) ist vergleichbar mit Formatvorlagen in einer Textverarbeitung. Die Idee ist, den Inhalt eines Dokumentes von dessen Formatierung zu trennen. Man generiert dabei "Stylesheets" für Überschriften, Titel, Normale Absätze etc...
Unterschieden wird wie bei der Textverarbeitung zwischen Zeichen und Absatzformaten.
Das Wort "Cascading" weist darauf hin, dass mehrere Formatvorlagen "kaskadiert" also nacheinander angewendet werden können. Tatsächlich lassen sich die Formatvorlagen an mehreren Stellen definieren. Es ist dann wichtig zu wissen, in welcher Reihenfolge die Abarbeitung erfolgt, und welche Informationen welche anderen überschreiben. Ein gutes CSS Konzepte führt zu einheitlicheren Webseiten, die sich darüber hinaus auch noch einfacher pflegen lassen.
Interessant ist auch die Möglichkeiten, für separate Medien unterschiedliche CSS-Dateien zu definieren. So kann beispielsweise die Druckausgabe mit anderen Einstellungen, Schriftarten, Schriftgrößen etc.. arbeiten. Somit kann man beim Drucken die Schriftgröße genau festsetzen, während die Bildschirmausgabe mit skalierbaren, vom Anwender steuerbaren Schriftgrößen arbeiten.
Auf den ersten Blick ist CSS relativ einfach. Lassen Sie sich nicht täuschen! Eine tiefgehende Einarbeitung ist notwendig und spart viel Ärger. Hier einige Links, die die Einarbeitung erleichtern.
CSS-Tutorials
HTMLWord
- CSS Einführung
Hypergurl
- CSS Tutorial (sehr gut!)
SelfHTML-
CSS
Bluberry
CSS-Index (gut!)
Offizielle Seiten des W3C
CSS-Homepage
des W3C
CSS-Specification Version 2
(Mai 98)
CSS-Specification Version
1 (Dez 96)
Das folgende Dokument zeigt, wie man via CSS die Scrollleisten des
Explorers farblich anpassen kann:
Using
Cascading Style Sheets on Your Web Site
Wenn man sich mit CSS beschäftigt stößt man schnell auf Begriffe wie "Vererbung", "Kindobjekte" oder "Elternobjekte". Teilweise werden CSS-Attribute "nach unten vererbt", teilweise aber auch nicht.
Beispiel:
Wenn Sie in einer CSS-Datei auf Ebene von "Body" die Schriftart definieren, dann wird diese Information vererbt. Das heißt Sie müssen dann die Schriftart nicht mehr angeben, falls die ganze HTML-Datei mit einheitlicher Schrift arbeiten soll. Viele andere Attribute werden allerdings nicht vererbt.
Neben der Frage der Vererbung ist es oft auch interessant, welche Standardwerte bestimmte Attribute haben. Diese und ähnliche Fragen lassen sich mit Hilfe der Microsoft Entwicklerreferenz gut klären. Hier sind zwar auch MS-spezifische Informationen aufgelistet, doch sind diese immer entsprechend gekennzeichnet.
Die MS-Entwicklerreferenz zum Thema CSS finden Sie an folgender Stelle:
Hier wird jedes Attribut ausführlich beschrieben.
Screenshot
der MSDN-Library (Ausschnitt aus dem Attribut "font family")
In dieser Referenz wird auch dokumentiert, wie man das entsprechende Attribut via JavaScript adressieren und ändern kann.
Um mit Begriffen wie Vererbung / Kind- oder Elternobjekte sinnvoll umgehen zu können, man man die Hierarchie einer Webseite kennen. Alle Elemente einer Webseite (außer dem Kopf) sind im "Body" untergebracht. Der Body wiederum enthält weitere Objekte. So entsteht einer Hierarchie. Manche Webeditoren zeigen diese Hierarchie auch übersichtlich an. Hier ein Screenshot von Frontpage 2003.
Grafische Darstellung der Hierarchie in Frontpage 2003
Man erkennt hier das der markierte Link <a> "Online-Kurse" Kindobjekt des Absatzes <p> ist. <p> ist Bestandteil einer Tabellenzelle <td>. Diese Zelle gehört zu einer Tabellenzeile <tr>, die wiederum zur Tabelle <table> gehört. Die Tabelle ist Kindobjekt von <body>.
Fundierte Informationen zum Thema "Hiearchie einer Webseite" finden Sie bei SelfHTML im Rahmen der einführenden Beschreibung des "Document Object Modells". Es lohnt sich, zumindest den Teil "Allgemeines zum DOM" zu lesen.
Document
Objekt Modell - hierarchische Struktur von Webseiten
Ein besonders wichtiges (und komplexes) Thema sind die in HTML (bzw. CSS) möglichen Einheiten. Dies ist insbesondere bei der Definition von Schriftgrößen und Abständen wichtig. Prinzipiell gibt es die Möglichkeiten Maße in absoluten, aber auch in relativen Einheiten festzulegen. Nach unseren Erfahrungen ist es meist sinnvoll, sich auf die absoluten Angaben zu beschränken, da die relativen Angaben oft zu unerwarteten Ergebnissen führen. Bei den absoluten angaben haben wir gute Erfahrung mit der Verwendung der Schlüsselwörten "xx-small", "small", "medium", "large", "x-large" und "xx-large". Absolut heißt hier allerdings, dass der Browser die tatsächliche Schriftgröße bestimmt. Diese ist insbesondere abhängig von der im Browser eingestellten Skalierung. Diese Schriftgröße sind allerdings NICHT abhängig von Definitionen irgendwelcher Elternobjekte. Insofern ist die Einordnung als "absolute Einheit" korrekt.
Vorsicht
Die Schlüsselwörter "smaller" und "larger" sind relative Einheiten! Die resultierenden Schriftgrößen sind hier sehr wohl von den jeweiligen Elternobjekten abhängig.
Hier einige Links zu Thema Maße und Einheiten:
HTML-World
Maße und Einheiten
SelfHTML
- Maßeinheiten
Hypergurs
- CSS-Tutorial
Ähnlich wie bei HTML lassen sich auch CSS-Dateien einfach und kostenfrei auf syntaktische Richtigkeit prüfen:
Validieren
von HTML und CSS-Dateien [ T2128 ]
JavaScriptBeim Gestalten von Webseiten kommt man relativ schnell mit JavaScript in Berührung. Sobald HTML und CSS nicht mehr ausreicht, ist JavaScript angesagt.
JavaScript
- wie geht das? (Kurs von Prof. Dr. Hirte)
JavaScript
- Workshop von Stefan Mintert und Christine Kühnel
JavaScript
- Referenz - SelfHTM
HTML-World
Hervorragendes
CSS-Tutorial (Hypergurl.com)
JavaScript
- Tutorial List
Wer
weiß was (hervorragende FAQ zur Javascript!)
Javascript
Tutorials (DMOZ.org)
Interessante
Infos zu Javascript und CSS (Codestyle.org)
Dt.
Kurs zum Thema Cookies (HTML-World)
Grundlagen
zu Cookies (wichtige Infos)
Popups
mit JavaScript (ausführliche dt. Anleitung)
Doc
JavaScript
JavaScript.Internet.com
ScriptSearch.com
Hypergurl.com
Treemenu.com
(ein explorer-ähnliches Menüsystem als Freeware)
Explorer
Menü (SelfHTML)
Scriptindex.de
- dt. Script Seite
Erkennen
von Browsern per JavaScript [ T2127 ]
Wer-weiss-was
- Javascript Forum
In JS gibt es den Begriff der globalen Variablen. Leider ist diese "Globalität" auf eine HTML-Datei begrenzt. Sobald eine neue HTML-Datei gestartet wird, vergisst JS alle Variablen. Klassische Möglichkeit, um Informationen in eine andere Datei "hinüberzuretten" ist das Setzen von Cookies. Mit einigen Tricks geht es eventuell (je nach Anwendung) aber auch ohne Cookies. Folgende Links liefern weiter Infos.
Javascript
Wertübergabe zwischen HTML-Dokumenten
Wertübergabe
zwischen HTML-Dokumenten - Teil 2
Seitenübergreifende
Variablenübergabe
Measuring
Element Dimension and Location
Controlling
Presentation with Measurement and Location Properties
Dynamische HTML. Der Name sagt es schon. Irgendetwas wird dynamisch generiert, geändert, ein- oder ausgeschaltet. Sehr beliebt ist auch die Änderung von Positionsdaten einzelner Element. So bringt man Ufo's zum Fliegen, Navigationseinrichtungen bleiben beim Scrollen stehen, und den Marketiers fallen immer neue, mehr oder weniger nervende Einrichtungen ein, um die Aufmerksamkeit des Benutzers auf sich zu ziehen.
DHTML ist nichts prinzipiell neues. Hinter dem Begriff verbirgt sich "nur" die Kombination von HTML, CSS und Javascript. Konkret versucht man, HTML und CSS-Attribute dynamisch, über Javascript gesteuert, zu ändern. Hier beginnt nun schon das Problem. Wie adressiert man eigentlich CSS-Attribute aus Javascript heraus? Dafür gibt es leider nicht nur eine Antwort, sondern (mindestens) drei:
nach der "Microsoft Methode"
nach der "Netscape Methode"
nach der genormten Methode des Document Object Modells (DOM)
Zur Ehrenrettung der Browserhersteller sei erwähnt, dass die aktuellen Versionen der Browser alle das Document Object Modell verstehen. Wenn Sie auf ältere Browser keine Rücksicht nehmen müssen, ist also das DOM die beste Wahl.
Hinweis
Die untenstehende Menüleiste ist übrigens eine relativ einfache Anwendung von DHTML. Wenige Zeilen JS-Code sorgen dafür, dass sich die Menüzeile immer am unteren Ende des Fensters befindet. Falls der Browser ein älteres Modell ist, wird die Menüzeile erst gar nicht eingeblendet.
Für interessierte Leser hier einige Links für die Einarbeitung in DHTML
Kurze
Einführung (zwei A4-Seiten) mit sehr einfachem Beispiel
DHTML-Einführung
von HTML-World
DHTML-Seit
von SelfHTML
DHTML-Shock
HTMLGuru
Ein Webdesigner braucht oft auch Grafiken. Natürlich bietet das Internet auch hier sehr viel. Hier nun einige wenige ausgewählte Seiten:
Index-Server:
Volltextsuche auf der Webseite
Webgeeignete
Farbkompositionen (ColorMatch)
Umgang mit der MS Knowledge Base
- Setzen von Links [ T2102 ]
Direkte
Links auf Online-Inhalte der Technet oder MSDN setzen [ T2137 ]
Direkte
Links auf Artikel der Conrad Electronic GmbH [ T2139 ]
Webbrowser
- Infos und Links [ T2107 ]
Symbolleiste
des IE konfigurieren [ T2101 ]
HTML-Tabelle
in Frontpage [ T2108 ]
Wo
speichert Frontpage Makros und benutzerdefinierte Symbolleisten [ T2110 ]
Generierung
individueller Icons beim "Bookmarking" - Favorite Icons
Seitenumbruch
beim Drucken von HTML-Dateien erzwingen
Mailing
a web page - Link auf die aktuelle Seite per Mail versenden
(JavaScript)
Über Metadaten werden im Kopfbereich zahlreiche
Details definiert. Eine Auflistung gängiger Metadaten findet man bei
SelfHTML:
Meta-Angaben
zum Inhalt (SelfHTML)
Die ct hat in Ausgabe 23/2003 einen sehr guten Artikel zu XHTML und CSS veröffentlicht.
RechtshinweiseKein Teil dieser Informationen darf ohne schriftliche Genehmigung reproduziert, vervielfältigt, veröffentlicht oder in Lehrveranstaltungen verwendet werden. Die Nutzung ist ausschließlich zum persönlichen Gebrauch des Lesers gedacht. Sie können aber gerne einen Link auf diese Seite setzen (Links sollten ein neues Fenster öffnen). Es wird darauf hingewiesen, dass Markenzeichen, Namen, Produkte und Bezeichnungen auch ohne ausdrückliche Nennung oder Kennzeichnung durch Rechte Dritter geschützt sind! Es obliegt dem Anwender die Informationen und Programme selbst zu prüfen und gegebenenfalls zu entscheiden, ob diese für seine beabsichtigten Zwecke tauglich sind. Die Informationen auf unserer Webpräsenz werden ohne Anspruch auf Korrektheit oder Vollständigkeit veröffentlicht. Auf unsere ausführliche Rechtshinweise wird ausdrücklich verwiesen.
|
(C) DATA 5 Ingenieurbüro für Datentechnik GmbH |
|
(C) DATA 5 Ingenieurbüro für Datentechnik GmbH |
Entwicklung von Webseiten
Drucken
Menuleiste ein
---AC.net---
Inhalt
Themen
Tipps
Sitemap
