Seminar DWMX 2004 DW Session 002
Mit Dreamweaver starten (1) Coder oder Designer eine Frage der Einstellung Bearbeiten/Voreinstellungen Kategorie Allgemein Arbeitsbereich ändern Bedienfelder und Bedienfeldgruppen Einfügeleiste Das erste Dokument Datei/Neu/einfache Seite/HTML Erstellen Ansichten Statusleiste Fenstergröße Bearbeiten/Voreinstellungen/Statusleiste Dokumentengröße und Downloadzeit Bearbeiten/Voreinstellungen/Statusleiste Verbindungsgeschwindigkeit
Mit Dreamweaver starten (2) Symbolleisten Ansicht/Symbolleisten Mehrere Leerzeichen Bearbeiten/Voreinstellungen/Allgemein/Bearbeitungsoptionen Leerzeichen zulassen Mehrere aufeinanderfolgende Verschiedene Browser definieren Bearbeiten/Voreinstellungen/Vorschau in Browser Externe Editoren definieren Bearbeiten/Voreinstellungen/Dateitypen / Editoren
HTML eine Auszeichnungssprache HTML definiert das Erscheinungsbild eines Textdokumentes Eine HTML-Datei ist eine normale Textdatei mit der Endung.htm oder.html Den Text, den eine HTML-Datei enthält, wird Quelltext, Sourcecode oder einfach Code genannt Das Format in dem HTML-Dateien gespeichert werden, ist das allgemeingültige ASCII-Format, das mit jedem normalen Texteditor bearbeitet werden kann Um HTML-Code als Webseite anzeigen zu können, muss ein Browser den HTML-Code interpretieren
HTML die Struktur (1) Wie für jede Sprache gelten auch für HTML Grammatikregeln und eine Rechtschreibung Diese Regeln werden Syntax genannt Die Syntax definiert sich über Tags, auch Elemente genannt Diese Tags stehen immer zwischen spitzen Klammern um sich vom Content zu unterscheiden XHTML(!) Alle Tags sollten immer klein geschrieben werden. Unter DW kann die XHTML- Konformität bei der Erstellung von Dokumenten aktiviert werden Tags definieren immer einen Gültigkeitsbereich Hierbei gibt es fast immer ein einleitendes <strong> und ein schließendes </strong> Tag. Das schließende Tag wird durch einen Slash / gekennzeichnet
HTML die Struktur (2) XHTML(!) Es gibt einige Standalone-Tags (z.b. <br>). Hierbei sollte XHTML-konform <br/> geschrieben werden, das als Abkürzung für das eigentliche <br></br> steht Einleitende Tags und Standalone-Tags können in Attributen zusätzliche Angaben enthalten <tag attributname=attributwert>content</tag> <h1 align= center >Eine zentrierte Überschrift</h1> Die Attributwerte, die zu einem bestimmten Tag gehören, können aus - einer bestimmten, verfügbaren Menge (für align = left, center, right, justify), - einer freien Wertzuweisung mit bestimmten Datentypen/Konventionen (<style type= text/css > oder <table border= 1 >), - einer freien Wertzuweisung ohne Konventionen (<p title= Irgend ein Text >), - oder einem allein stehenden Attribut bestehen (<hr noshade>). Attributwerte müssen in Anführungszeichen stehen (vgl. W3C)
HTML die Struktur (3) Sonderfall: Universalattribute können in allen Tags verwendet werden <p id= EinName >Text</p> Eine Verschachtelung von Tags ist möglich, sollte aber hierarchisch richtig geschehen <strong><em> Erst fett und dann kursiv öffnen, und passend schließen </em></strong> <strong><em> Nicht so... </strong></em> Die Hierarchie kann bei einer strukturierten Schreibweise sichtbar gemacht werden <strong> <em> Erst fett, dann kursiv </em> </strong> Unter DW kann eine automatische Einrückung und eine Reparatur falscher Verschachtelungen (Vorsicht!!!) aktiviert werden
HTML die Struktur (4) Verschachtelungen können beliebig kombiniert und addiert werden <strong> Erst nur fett <em> Dann fett und kursiv kursiv </em> Jetzt wieder nur fett </strong> Das Grundgerüst einer HTML-Datei besteht aus: - Dokumenttyp-Angabe (Die verwendete HTML-Version etc.) - Header (Allgemeine Angaben zur HTML-Seite) - Body (anzuzeigender Inhalt mit entsprechenden formatierenden Tags)
HTML Aufbau einer Seite <!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"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>unbenanntes Dokument</title> </head> <body> </body> </html>
Zeichen in HTML Damit die Zeichen im Browser richtig angezeigt werden, sollte ein Zeichensatz definiert sein <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> Der Latin-1-Zeichensatz (ISO 8859-1) gilt für alle westeuropäischen Sprachen vgl. SelfHTML, Thema Internationalisierung Deutsche Umlaute werden durch benannte Zeichen (Entities) kodiert ä = ä Ä = Ä ß = ß Euro Zeichen = Nach diesem Schema werden auch spezielle Zeichen kodiert Trademark-Zeichen (vgl. SelfHTML http://de.selfhtml.org/html/referenz/zeichen.htm) Oder auch HTML eigene Zeichen, die sonst nicht angezeigt würden <strong> muss als <strong> kodiert werden, damit es auch so angezeigt wird
Rund um das Coden Kommentare werden im Code, nicht aber in der Seite angezeigt <!-- dies ist ein HTML-Kommentar --> Für Dateinamen sollten gewisse Konventionen beachtet werden: - Unix Systeme unterscheiden Groß- und Kleinschreibung text.htm ist nicht gleich TeXt.htm - Sonderzeichen sollten vermieden werden, da es je nach Server Probleme geben kann - Keine Verwendung von Leerzeichen - Zur Strukturierung von Namen Groß- und Kleinschreibung oder _ verwenden - Bei neuen Servern maximal 256 Zeichen, bei älteren 8 Zeichen - Die Endung sollte immer verwendet werden (.htm oder.html) - Server finden die Einstiegsseite anhand des Namens (index.htm/index.html, manchmal auch default.htm/default.html oder welcome.htm/welcome.html)
Richtig oder falsch? seite.htm Seite.html Seite 1.htm Seite_1.htm Seite_1 SEITÄ_1.htm EineSeite.htmi EineSeite.html EineGanzGenaueBezeichnungFuerDieSeiteDamitManSieNichtVergisst.htm
Richtig oder Falsch die Antworten! seite.htm richtig Seite.html richtig Seite 1.htm Falsch Leerzeichen Seite_1.htm richtig Seite_1 Falsch keine Endung SEITÄ_1.htm Falsch Sonderzeichen EineSeite.htmi Falsch falsche Endung EineSeite.html richtig EineGanzGenaueBezeichnungFuerDieSeiteDamitManSieNichtVergisst.htm (wenn auch etwas unübersichtlich!) auch richtig