HTLM und CSS Eine erste Einführung Karlheinz Zeiner Inhalt 1 Vorbereitung 1 1.1 HTML und CSS 1 1.2 Werkzeuge 1 1.3 Quellen 1 2 Erstes HTML-Dokument erstellen 2 2.1 Website, Webpage 2 2.2 Struktur einer HTML-Datei, Kommentare 4 2.3 Absätze und Überschriften 5 3 Styles 7 3.1 Visual Studio (VS) Anleitung für die Definition von Styles in einem Stylesheet 7 3.2 Inhalt der Stylesheet-Datei, Syntax der CSS-Sprache 8 4 Bilder 10 4.1 Bilder vorbereiten 10 4.2 Einfügen 10 5 Tabellen 11 6 Links 12 7 Weitere Tipps 12
1 Vorbereitung 1.1 HTML und CSS HTML steht für Hyper Text Markup Language, CSS steht für Cascading Style Sheet. Den Begriff Hypertext (Übertext) verwendet man als Begriff für das Konzept, zwischen Textdokumenten, die auf einem Datenspeicher in einem Netzwerk abgelegt sind, Verbindungen durch "Links" herzustellen. In der Informatik verwendet man den Begriff Sprache für jede Art von Text, der nach bestimmten Regeln (der Syntax) aufgebaut sein muss. Das gilt für alle Programmiersprachen ist aber auch ein Ansatz dafür, zusätzlich zum eigentlichen Inhalt auch die Struktur sowie Merkmale der Gestaltung (Schriftarten, Schriftgröße, -farbe, Absatzeigenschaften,..) in den Text hineinzupacken. Diese Konzepte und Ideen waren im Prinzip schon bekannt, als 1989 Tim Berners-Lee am CERN in Genf HTML vorstellte. HTML wurde und wird nun vom World Wide Web Consortium (W3C) weiterentwickelt. HTML verwendet sogenannte Tags (<html>...</html>, <p>... </p>) um Struktur und Format in das Textdokument zu packen. Mit HTML 4.0 wurden Ende 1997 Stylesheets eingeführt. Styles und Stylesheets realisieren die Idee, Inhalt und Form stärker zu trennen, für die Form Formate (Styles) zu definieren. Styles können als Attribute von HTML-Tags definiert werden (Inline-Style), in einem Style-Abschnitt in der HTML-Datei und/oder in einer zusätzlichen Datei mit der Endung css definiert werden. Derzeit ist die Einführung der Version 5 im Gange. Die Beispiele in diesem Skriptum entsprechen der neuen Norm, verwenden jedoch die eigentlichen Neuerungen nicht, sie verwenden aber auch keine Tags, die mit HTML 5 abgeschafft wurden. 1.2 Werkzeuge Im Prinzip kann man sowohl HTML als auch CSS Dateien mit einem einfachen Texteditor erstellen, weil es sich eben um Textdateien handelt. Der Nachteil ist, dass man alle Konstrukte, Begriffe, Namen der beiden Sprachen entweder im Kopf haben muss oder ständig in zugehörigen Unterlagen nachschauen muss. Schon deutlich leichter wir die Arbeit, wenn man einen Editor verwendet, der "Syntax Highlighting" kann. Beispiel: Notepad++ (kostenlos) http://notepad-plus-plus.org Noch einfacher wird es mit es mit echten HTML-Editoren, das sind Werkzeuge, die auch die HTML- Syntax kennen, d.h. sie schließen z.b. automatisch die Tags und markieren Syntax-Fehler im Text. Viele HTML-Editoren können nur im Text-Modus arbeiten. Beispiel: Phase5 (kostenlos für Schüler und Privatanwender) http://www.phase5.info Den maximalen Komfort bieten Web-Entwicklungswerkzeuge, die zusätzlich einen Design-Modus anbieten und auch die Möglichkeit, Styles über eine graphische Oberfläche zu erstellen. Beispiele: Visual Studio 2010 Professional (für HTL-Schüler über Dreamspark gratis erhältlich) Dreamweaver In diesem Skriptum beziehen sich Hinweise auf ein Werkzeug auf die Arbeit mit Visual Studio 2010. 1.3 Quellen http://www.w3schools.com http://dochub.io HTML und CSS Einführung K. Zeiner 1
2 Erstes HTML-Dokument erstellen 2.1 Website, Webpage Eine Website besteht in der Regel aus mehreren in einer Ordnerstruktur abgelegten html-, css- und Bilddateien. Ein Ordner entspricht der Wurzel der Website und entspricht dann dem Einstiegspunkt des URL's der Website also z.b. der URL www.zeiner.at. Den Begriff Webpage verwenden wir für eine einzelne HTML-Datei. Vorbereitung: Legen Sie auf ihrem Computer einen Ordner an, der die oberste Ebene für die Dateien einer ersten Website ergeben soll. Starten Sie Visual-Studio Professional und wählen Sie aus dem Menü: File Open Website Den vorbereiteten Ordner (im Beispiel den Ordner "FirstWebsite") auswählen. Falls das Fenster nicht angezeigt wird, über das Menü View den Solution Explorer anzeigen: HTML und CSS Einführung K. Zeiner 2
Dann im Solution Explorer die zweite Zeile auswählen, die rechte Maustaste drücken und Add New Item wählen. Aus der Vielzahl an Möglichkeiten "Text File" wählen, den Namen der Datei jedoch auf index.html ändern. Alternativ könnte man auch eine HTML Page einfügen, die jedoch noch Teile enthält, die in HTML5 nicht mehr erlaubt sind. Obwohl Visual Studio 2010 mit Service Pack 1 HTML 5 unterstützt beruht eine neu hinzugefügte Webpage noch auf einer XHTML Vorlage. HTML und CSS Einführung K. Zeiner 3
Eine HTML5 Seite hat folgende Form: Der Visual Studio HTML Editor ist ein Editor, der sowohl als Quellcode-Editor ( Source in der untersten Zeile auswählen), in einem Design-Mode ( Design auswählen ) als auch in einer kombinierten Ansicht (Split) verwendet werden kann. Ich empfehle zunächst vor allem den Quellcode-Editor zu verwenden. Vor allem wird nicht empfohlen, in der Design-Ansicht die leicht über die Benutzeroberfläche zugänglichen Möglichkeiten der Formatierung zu nutzen. 2.2 Struktur einer HTML-Datei, Kommentare Eine HTML-Datei enthält also nach DOCTYPE-Zeile innerhalb des obersten / äußersten Elementes <html>... </html> einen Abschnitt <head> <title></title> </head> und einen Abschnitt <body>.. </body> An beliebiger Stelle kann man Kommentare einfügen: <html> <!-- Kommentarzeile --> <!-- Mehrere Zeilen Kommentar --> <head> <title>titel angeben</title> <!-- HTML5 verlangt einen Title im Head --> </head> HTML und CSS Einführung K. Zeiner 4
2.3 Absätze und Überschriften <body>.. </body> enthält den eigentlichen Inhalt in Absätzen (Paragraphs): <p>...</p> Zusätzlich gibt es 6 Überschriftebenen (Header) von h1 bis h6 und weitere Elemente wie div und table als Container für Inhalte. HTML5: body selber darf keinen Text enthalten, nur weitere Tags. <!DOCTYPE html> <html> <head> <title>meine erste HTML-Datei</title> </head> <body> <h1>überschrift der Ebene 1</h1> <h2>überschrift der Ebene 2</h2> <h3>überschrift der Ebene 3</h3> <p>absatz</p> <p>absatz mit erzwungenen Zeilenumrüchen<br /> 2. Zeile </p> <p> Der Webbrowser (Microsoft Internet Explorer, Firefox, Google... </p> <p> Für die Umlaute und das scharfe s ist der sicherste Weg immer noch die Verwendung von sogenannten Ersatzdarstellungen:<br /> Ü ü Ä ä Ö ö ß </p> </body> </html> HTML und CSS Einführung K. Zeiner 5
Der Browser zeigt diese HTML-Datei wie folgt an: Um die Datei mit dem Browser zu öffnen, navigiert man mit dem Explorer zum Ordner der Website und macht einen Doppelklicks auf die Datei index.html. Das System öffnet dann die Datei mit dem eingerichteten Standard-Webbrowser. Trotz Design-Ansicht des HTML-Editors ist für den Test die Ansicht mit einem Webbrowser wichtig. Professionelle Web-Entwickler müssen ihre Seiten sogar mit mehreren Browsern testen. Es ergeben sich wiederholt folgende Schritte für die Weiterentwicklung und den Test einer Webseite: HTML-Code ändern und die Änderungen speichern (Strg-S) - * im Tab mit dem Filenamen verschwindet. Datei mit dem Browser öffnen oder aktualisieren! HTML und CSS Einführung K. Zeiner 6
3 Styles Der Browser zeigt unsere erste Webseite in einem nicht sehr zufriedenstellenden Layout (Schriftgrößen, Abstände,...). Mit der Definition von Styles für die Tags body, p, h1, h2 und h3 kann das Format der zugehörigen Inhalte festgelegt werden. 3.1 Visual Studio (VS) Anleitung für die Definition von Styles in einem Stylesheet Im Solution Explorer das Projekt auswählen Add New Item Style Sheet auswählen, als Dateiname z.b. Standard.css wählen Add Das VS zeigt jetzt die Stylesheet-Datei in der Textform. Die Datei enthält bereits eine leere Style- Definition für den body-tag. Auch die Styles werden in einer Textdatei mit einer einfachen Syntax definiert. Das VS enthält zur Definition von Styles einen Dialog an, der ähnlich wie der Format-Dialog im Word funktioniert. Wichtig: Tab mit einer HTML-Datei wählen und Datei speichern, sonst wird im nächsten Schritt Manage Styles nicht angezeigt. Über das Menü View das Fenster Manage Styles anzeigen. Attach Style Sheet auswählen und über den Dialog das vorbereitete Stylesheet Standard.css auswählen. Anschließend in der Symbolleiste des Manage Style Fensters das Symbol "New Style" auswählen und folgende Einstellungen wählen: HTML und CSS Einführung K. Zeiner 7
Über die Kategorie Box noch die Abstände für den Absatz einstellen: und den Dialog mit OK beenden. Das "Manage Style" Fenster zeigt alle definierten Styles an. Über das Kontextmenü zu diesen Einträgen steht "Modify Style" zur Verfügung. Damit gelangt man wieder in den Style Dialog und kann den Style ändern. Tatsächlich im aktuellen HTML-Dokument auch verwendete Styles sind mit einem blauen Kreis gekennzeichnet. 3.2 Inhalt der Stylesheet-Datei, Syntax der CSS-Sprache HTML und CSS Einführung K. Zeiner 8
Der Aufbau und die Syntax in einer Stylesheet-Datei ist offensichtlich recht einfach. Die Definition eines Styles für ein HTML-Tag beginnt mit dem Tag-Namen, die eigentliche Definition erfolgt dann zwischen den Klammern {. Die Definition besteht in einer Aufzählung von genormten Schlüsselwörtern (rot) für eine Eigenschaft. Nach einem Doppelpunkt folgt dann der Wert dieser Eigenschaft. Abgeschlossen wird eine Kombination von Eigenschaft: Wert mit einem Strichpunkt. Die Styles für h1 bis h3 definieren wir im Text-Modus. Dazu kopieren wir die Definition für p drei mal und ändern die Inhalte auf: body { background-color: #FFFFCC; p { font-family: Arial, Helvetica, sans-serif; font-size: 11pt; margin-top: 2pt; margin-bottom: 2pt; h1 { font-family: Arial, Helvetica, sans-serif; font-size: 14pt; margin-top: 6pt; margin-bottom: 6pt; h2 { font-family: Arial, Helvetica, sans-serif; font-size: 13pt; margin-top: 5pt; margin-bottom: 5pt; h3 { font-family: Arial, Helvetica, sans-serif; font-size: 12pt; margin-top: 4pt; margin-bottom: 4pt; Auch im Text-Modus bietet das VS für die Definition von Styles perfekte Unterstützung. Sowohl die Eigenschaften als auch die Werte können über eine Listbox ausgewählt werden. HTML und CSS Einführung K. Zeiner 9
Nachdem alle Dateien gespeichert wurden und im Browser aktualisiert wurde, zeigt der Browser die Datei in der Form: 4 Bilder 4.1 Bilder vorbereiten Bilder müssen zuerst vorbereitet werden. Man erstellt sie mit einem Zeichenprogramm, erzeugt sie über einen Scanner oder die Digitalkamera oder verwendete bestehende Dateien (Copyright beachten!). Geeignet sind Bilddateien des Typs png, gif oder jpeg. Meist muss man die Bilder in der Größe und in der Anzahl der Farben ändern, damit der Speicherbedarf und damit die Ladezeit auf eine vernünftige Größe kommt (50 bis 500 kb). Benötigt man Skizzen und/oder Formeln so kann man diese z.b. in einer Word-Datei vorbereiten und die Datei dann als Webseite abspeichern. Dabei werden Skizzen und Formeln in einem Verzeichnis abgelegt. Aus diesem Verzeichnis kopiert man sich die Bilder an einen Platz innerhalb der Website. Anschließend kann man die von Word generierte HTML-Datei und den Ordner mit den Bildern wieder löschen. 4.2 Einfügen Quelltext für Bild einfügen: <img alt="bild" src="addhtmlitem2.png" /> HTML5: Das alt-attribut muss angegeben werden. HTML und CSS Einführung K. Zeiner 10
5 Tabellen Tabellen verwendet man (wie auch in Word) für echte Tabellen um einzelne Textblöcke oder Bilder zu positionieren. Mit dem VS ist im Design-Mode das Einfügen einer Tabelle einfach. Menü Table Insert Table Allerdings wird jetzt Code eingefügt, der nicht ganz dem HTML 5 Standard entspricht. Zudem wird ein Style mit dem Namen style1 erzeugt und die Style-Definition im <head> Teil eingefügt..der korrigierte Code lautet: <table> <tr> <td>zelle 11</td> <td>zelle 12</td> <td>zelle 13</td> </tr> <tr> <td>zelle 21</td> <td>zelle 22</td> <td>zelle 23</td> </tr> </table> HTML und CSS Einführung K. Zeiner 11
Um die Tabelle auch zu formatieren, definieren wir noch Styles für die Tags table und td: table { border: 2px solid #808080; table-layout: auto; border-collapse: collapse; td { border: 1px solid #808080; background-color: #FFCC66; padding: 4px; 6 Links Links sind Verweise auf andere HTML-Dateien. Diese Dateien können Teil der Website sein (interne Links) oder auch auf Dateien einer anderen Website zeigen (externe Links). Quellcode: <a href="schieferwurf.html">schiefer Wurf</a> Das Attribut href enthält den Dateinamen (Pfad) auf die Zieldatei. Der Inhalt des <a> Tags ist der angezeigte Text. Für die Pfade interner Links gilt ausgehende vom Platz der Datei, die den Link enthält folgendes: Dateiname Datei befindet sich im selben Ordner /Ordnername/Dateiname Datei befindet sich im Unterordner /Ordnername../Dateiname Datei befindet sich eine Ebene höher../ordnername/dateiname Datei befindet sich in einem zum aktuellen Ordner parallelen Ordner Die Pfade dürfen nie absolute Pfade des lokalen Rechners sein, also z.b. Laufwerksbuchstaben enthalten. Für externe Links wird der vollständige URL angegeben. 7 Weitere Tipps Beachte die Fehler / Warnungen des Werkzeuges zur Syntax von HTML! Hat man bestehende HTML- und/oder CSS Dateien als Vorlage, so kann man auch z.b. mit dem Notepad++ Editor oder nur im Quelltext-Mode des Visual Studios komfortabel arbeiten. Am Ende der Arbeit darf der Website Ordner bzw. bei einer größeren Site auch die Unterordner keine Dateien mehr enthalten, die nicht verlinkt sind. Mit guten Werkzeugen kann man eine Website auf fehlerhafte oder verwaiste Hyperlinks überprüfen. Auch in HTML Dateien soll man konsequent mit Styles in einer oder mehreren Stylesheet-Dateien arbeiten. Viele Inline-Styles oder im Header definierte Styles sind zu vermeiden. HTML und CSS Einführung K. Zeiner 12