WEBSEITEN ENTWICKELN MIT ASP.NET

jamal BAYDAOUI WEBSEITEN ENTWICKELN MIT ASP.NET EINE EINFÜHRUNG MIT UMFANGREICHEM BEISPIELPROJEKT ALLE CODES IN VISUAL BASIC UND C#

3.2 Installation 11 Bild 3.2 Der Webplattform-Installer Bild 3.3 IDE-Startbildschirm Jetzt können wir mit der Programmierung beginnen.

4 HTML und CSS In diesem Kapitel dreht sich alles um den Grundbaustein der Webentwicklung: HTML und CSS. Sie lernen hier, wie Sie einfache HTML-Dokumente erstellen und sie mit CSS stylen, anders gesagt: Sie lernen, die Darstellung und die Anzeigeeigenschaften festzulegen. Dieses Grundverständnis zu den beiden Techniken brauchen Sie, um in die ASP.NET-Programmierung einsteigen zu können. Sollten Sie schon Erfahrung in der Webprogrammierung und im Styling von Webseiten mit CSS haben, können Sie dieses Kapitel überspringen, da es für absolute Neulinge ausgelegt ist. 4.1 HTML 4.1.1 Was ist HTML? HTML bedeutet Hypertext Markup Language (Hypertext-Auszeichnungssprache), HTML ist also keine Programmiersprache, sondern eine Methode, um die Inhalte eines Dokuments zu strukturieren. Die Inhalte eines HTML-Dokuments können u. a. Bilder, Hyperlinks und Texte sein. HTML-Dokumente können ganz einfach in einem Texteditor geschrieben und dann vom Browser angezeigt werden. Die Browser parsen zuerst den Quelltext, um ihn dann zu rendern. Das Parsen bewirkt, dass der von uns geschriebene Quelltext (der komplette Text in unserem HTML-Dokument) in eine für den Browser verarbeitbare Datenstruktur umgewandelt wird. Diese Datenstruktur wird dann gerendert, also in eine darstellbare Form umgewandelt, welche dann im Browser angezeigt wird. 4.1.2 Geschichte Um den Mitarbeitern an den verschiedenen Standorten der Europäischen Organisation für Kernforschung (CERN) Dokumente bereitzustellen, entstand dort 1989 das Projekt zur Entwicklung von HTML unter der Leitung von Tim Berners-Lee, welcher als Erfinder des World

14 4 HTML und CSS Wide Web gilt. Im Zuge der Entwicklung von HTML entwickelte er auch das Transferprotokoll http, den ersten Webbrowser und den ersten Webserver. Um eine einheitliche Entwicklung von HTML sicherzustellen, gründete Tim Berners-Lee das World Wide Web Consortium (W3C), welchem er bis heute vorsteht. Ziel des W3C ist die Weiterentwicklung von HTML, CSS und weiteren Techniken. Das W3C spricht Empfehlungen zur Implementierung dieser Techniken aus, welche aber nicht verpflichtend sind. Die aktuelle Version ist HTML 4.01 (Stand Juli 2013). Die Version 5 hat derzeit den Status working draft und soll im Laufe des Jahres 2014 offiziell verabschiedet werden. Derzeit wird HTML5 unterschiedlich stark unterstützt. Einige Implementierungen finden in allen großen Browsern Unterstützung, andere Implementierungen nur in wenigen. Eine explizite Auflistung kann hier leider nicht gegeben werden, da sich die Unterstützung mit jedem BrowserUpdate ändern kann. 4.1.3 Aufbau und Syntax 4.1.3.1 Aufbau Ein HTML-Dokument hat einen Aufbau, der aus drei Bereichen besteht: 1. Doctype (Dokumenttyp): Er steht am Anfang jedes Dokuments und gibt die verwendete DTD (Dokumentypdefinition) an. Dies kann z. B. HTML4 oder HTML5 sein. 2. Headerbereich (Kopfbereich): Er gibt unter anderem Informationen des Dokuments an oder bindet externe Dateien wie Stylesheets oder JavaScript-Dateien ein und wird nicht im Browser ausgegeben. 3. Body (der HTML-Körper): Hier werden alle Daten eingegeben, die im Browser sichtbar für den Benutzer ausgegeben werden sollen. 4.1.3.2 Syntax Alle Daten innerhalb eines HTML-Dokuments sind entweder von einem Tag-Paar umschlossen oder bestehen aus einem Tag. Es gibt mehrere Arten der Schreibweise von Tags. Wir verwenden nur zwei Arten. Die eine besteht aus einem Start- und einem Endtag, die zweite aus einem Tag, der beide kombiniert. Der Aufbau eines Tags folgt im Grunde immer demselben Schema: 1. Zuerst wird der Tag mit einem <-Zeichen geöffnet. 2. Danach folgt die Elementart, z. B. p für Paragraph oder h1 für eine Überschrift der ersten Stufe. 3. Es können dem Element zusätzlich Attribute vergeben werden, wie z. B. id="first-paragraph". Dieses würde unserem Element eine eindeutige Id mit der Bezeichnung firstparagraph verleihen. 4. Als Drittes wird der Starttag mit > geschlossen. Der Aufbau des schließenden Tags (Endtag) folgt demselben Muster bis auf einen Unterschied: Vor dem schließenden >-Zeichen steht /, also />. Es wird nicht zwischen Groß- und Kleinschreibung unterschieden. Allerdings wird die Kleinschreibung bevorzugt verwendet.

4.1 HTML 15 Wenn wir nun ein Element Paragraph, welches einen Textabsatz auszeichnet, in unser HTML-Dokument einfügen wollen, müssen wir die in Listing 4.1 dargestellten Inhalte verwenden. Listing 4.1 HTML-Syntax am Beispiel p-tag <p id="first-paragraph"> Mein erster Absatz. </p> Ein kombiniertes Tag besteht aus einem Start und Endtag in einem. Dies wird z. B. für die Einbindung eines Bildes mittels eines Bild-Elements (img-tag) verwendet (Listing 4.2). Listing 4.2 HTML-Syntax am Beispiel img-tag <img src="pfad zu meinem Bild" alt="bezeichnung des Bildes" /> Verschachtelung von Elementen Einige der HTML-Elemente lassen sich auch verschachteln, das bedeutet, dass innerhalb eines HTML-Elements ein oder mehrere weitere Elemente eingebaut werden können. Wollen wir ein Bild innerhalb eines Paragraphen einbinden, würde das so wie in Listing 4.3 dargestellt aussehen. Listing 4.3 HTML-Verschachtelung, Bild in Paragraph <p> <img src="pfad zu meinem Bild" alt="bildbezeichnung" /> Mein Text, der unterhalb des Bildes angezeigt wird. </p> Block- und Inline-Elemente Es gibt zwei Arten von HTML-Elementen: Block-Elemente: Block-Elemente nutzen immer eine ganze Zeile bzw. den restlichen verfügbaren Platz der Zeile. Das bedeutet, dass nachfolgende Elemente immer in einer neuen Zeile unterhalb des Block-Elements angezeigt werden. Block-Elemente können Text, Inline- und Block-Elemente enthalten. Inline-Elemente: Inline-Elemente nutzen nur so viel Breite, wie ihr Inhalt benötigt. Mehrere Inline-Elemente hintereinander reihen sich nebeneinander an, bis der Platz der Zeile zu Ende ist, und werden daraufhin in der nächsten Zeile fortgeführt. Folgt ein Inline-Element auf ein Block-Element bzw. umgekehrt, stehen diese immer in zwei Zeilen, da das Block-Element immer die gesamte Zeile verwendet und somit das Inline-Element verdrängt. Inline-Elemente können Text und andere Inline-Elemente enthalten, aber keine Block-Elemente. HINWEIS: Grundlegend sei gesagt: Block-Elemente dürfen nicht innerhalb von Inline-Elementen liegen, umgekehrt ist es aber erlaubt. Es gibt Aus nahmen wie in HTML5, die es erlauben, Block-Elemente innerhalb eines a-tags (Link) zu platzieren.