<
>
Download

Zusammenfassung
Informatik

Gymnasium Köln

2,hoischen,2015

Yannik M. ©
3.70

0.07 Mb
sternsternsternsternstern_0.2
ID# 50220







HTML und CSS: Wie erstelle ich meine erste eigene Webseite

HTML und CSS kennen lernen

Die Abkürzung HTML bedeutet Hypertext Markup Language. Im Zusammenhang mit HTML spricht man nicht von Programmierung, sondern von „Schreiben“. Textpassagen werden mit so genannten Tags ausgezeichnet. Sie werden in spitzen Klammern geschrieben.

Beispiel: <p> Beginn eines Absatzes </p> Ende eines Absatzes.

In der Regel beginnen HTML-Elemente mit einem Eröffnungstag und schließen mit einem schließenden Tag.

Man benötigt keinen speziellen Editor, um HTML-Dokumente zu erstellen. Ein einfacher Texteditor genügt (z.B. Note++).

Browser: Programm, um HTML-Code darzustellen. (engl.to browse = durchsuchen, stöbern).
Ein grafischer Browser liest HTML-Code und ist für die Wiedergabe des Inhaltsauf dem Bildschirm zuständig. Er berücksichtigt auch Formatierungsangaben. Die Rendering Engine ist für die Darstellung der Website zuständig.

Von Gerät zu Gerät sind manchmal unterschiedliche Formen einer Website notwendig, abhängig z.B. von der Bildschirmgröße. Microsoft dated den InternetExplorer einmal jährlich ab. Das führt zu einer schleichenden Veraltung im laufendend Jahr. Mozilla dated den Firefox mehrmals jährlich ab.

Darum hat man mit diesem bezüglich Aktualität in der Regel weniger Probleme.

Idealerweise sollte eine Website:

  • In allen Bereichen lesbar sein

  • Bedienelemente sollten erwartungsgemäß funktionieren

  • Formulare sollten sich ausfüllen und abschicken lassen

  • Programmierte Elemente (JavaScript-Funktionen) können bedient werden und führen zum erwarteten Ergebnis.

Formatierung von Webseiten

Zunächst waren Webseiten überhaupt nicht formatiert. Bilder waren selten, Hyperlinks waren bereits blau und unterstrichen dargestellt. Es gab die Möglichkeit, wichtige Textstellen fett oder kursiv darzustellen. Nach und nach kam aber das Bedürfnis aus, Webseiten optisch ansprechender darzustellen.

Beispiel:

<u>Wichtig</u>

Der <u>-Tag bewirkt, dass ein bestimmtes Wort unterstrichen wird.

Jedoch musste jede Formatierung per Hand codiert werden. Das bedeutete manchmal einen Aufwand von hunderten Änderungen. Darum wurde die Beschreibersprache CSS (Cascading Style Sheets) entwickelt.


Das Traumpaar CSS und HTML

CSS ermöglicht es, dass die Struktur und die Darstellung einer Webseite voneinander getrennt werden können. Änderungen an der Darstellung werden einmal in der CSS Datei festgelegt und wirken sich auf alle mit ihr verknüpften HTML-Dokumente aus. Bis HTML 4.01 konnte man noch über HTML formatieren.

Ab HTML 5 geht das nicht mehr. Es dient ausschließlich der logischen Aufzeichnung von Texten und interaktiven Elementen wie Formularen.

Vorteile von CSS in Verbindung mit HTML

  1. Arbeitsersparnis weil man mehrere Textpassagen auf einmal bearbeiten (formatieren) kann.

  2. Eine CSS-Datei kann auch noch auf anderen Webseiten angewendet werden.

  3. HTML-Dateien sind kleiner, sie werden schneller geladen.

  4. Die CSS-Datei wird nur einmal vom Browser in den Cache geladen. Auch dadurch kommt es zu schnelleren Zugriffszeiten auf die Webseite.


Arten von Editoren

WYSIWYG

Integrierte Entwicklungsumgebungen (IDE)

Reine Texteditoren

What you see is what you get.”Was man im Editor sieht, sieht man auch auf der Webseite. Sie ähneln oft einem Textverarbeitungsprogramm. Man kann zwischen Codeansicht und Webseitenansicht wechseln.

Beispiele sind: Microsoft Expression Weg oder Adobe Dream Weaver.

Integrated Development Environment. Haben einen sehr großen Funktionsumfang und können nahezu alles. Sie empfehlen sich für komplexe Projekte und fortgeschrittene Anwender. Beispiele sind Eclipse, Visual Studio und NetBeans.

Ermöglichen die saubersten Ergebnisse und den kompaktesten Code. Beispiele: Notepadd++, jEdit, UltraEdit,Sublime.

HTML-Versionen

HTML gibt es seit 1990. Das W3C (World Wide Web COnsortium,
entscheidet, welche Richtung die Entwicklung von HTML nimmt und welche neuen Funktionalitäten in HTML aufgenommen werden.


HTML 4.01

War die letzte HTML-Version im traditionellen Sinn. Der Prozess bis zu einer neuen Version war sehr zeitaufwändig. Kurzfristige Entwicklungen konnten nur schwer aufgegriffen werden. Zusätzliche Technologien wie Flash, Java Applets, Real Audio oder Silverlight waren nötig, um diese abzubilden.

XHTML

Strengere Variante von HTML. (X = eXtensible). Entwickler können bei Bedarf Tags selbst festlegen. Wurde aber in der Praxis oft identisch zum HTML 4.01 eingesetzt und bot darum keine Vorteile.

HTML5

HTML 5 ist keine weiteren Versionen von HTML, sondern der Nachfolger von HTML 4.01.Das Ziel ist es, weiteren Versionen unnötig zu machen. Daher steht auch keine Leerzeichen zwischen Wort und Zahl. HTML soll Schrittweise weiterentwickelt werden. Browserhersteller können Vorschläge machen, die dann häufig auch von anderen Herstellern übernommen werden. Vieles , wofür zuvor eine andere Sprache nötig war, wird in HTML 5 integriert. Z.B. Multimedia_Elemente, Zeichenflächen für Animationen, Offlinespeichermöglichkeiten u.v.a.m.
Neue Funktionen kommen ständig hinzu.


Die erste Webseite mit HTML erstellen

Webseiten erstellen, speichern und testen

Um später alle Dateien für den Webauftritt ablegen zu können, benötigen wir einen Wurzelordner (engl. Root directory) Dieser soll in unserem durchgängigen Beispiel „hotel“ heißen. Als Editor wählen wir Notepad++.

Zunächst wird angegeben, welche HTML-Version wir nutzen möchten. Mit <!DOCTYPE html> teilen wir dem Browser mit, dass wir den Standard HTML5 verwenden möchten.
Das HTML Dokument selbst wird dem Tagpaar <html> und </html> umschlossen.
Es wird auch Rootelement genannt, weil es der Ausgang für alle anderen Elemente ist.

Dokumentenkopf

Der Dokumentenkopf, eingeleitet und beendet von <head> und </head> enthält Informationen über das HTML-Dokument.j Seine Inhalte werden nicht im Browser dargestellt. Ausnahme ist der Titel. Er wird zwar nicht auf der Webseite selbst dargestellt, erscheint jedoch z.B. in der Titelleiste des Browsers und/oder Tabs, Windows Taskbar, Google-Suchergebnis usw. Außerdem dient er in der Regel als Vorschlag für Favoriten.

Dokumentenrumpf:

Zwischen <body> und </body>-Tags befindet sich der eigentlich darzustellende Inhalt.


Der Browser zeigt den obigen Code dann so an:


Elemente: Die meisten Elemente bestehen aus einem Start- und einem Endtag und dem Inhalt. Beispiel <p> Text </p> für einen Absatz. Leere Elemente schließen sofort mit einem Schrägstrich. Beispiel <br/> für einen Zeilenumbruch.

Attribute: Zusätzlich zum Elementnamen können


Im folgenden Bild wird die Schriftart Arial für das body- Element festgelegt. Die Schriftart gilt für alle untergeordneten Elemente des body-Element untergeordnet sind, gilt die Schriftart als Standardschriftart für die Webseite.


Beispiel:

<style type="text/css">

h1,h2 {font-family: Arial; border-bottom:

1px solid black; }

p { }

body {font-family: Arial}

Die Schriftart Arial wird in einem Beispiel im body-Element festgelegt. Daher gilt sie für alle Elemente der Webseite.


CSS-Regeln die man für ein übergeordnetes Element festlegt, kann man überschreiben, indem einzelnen Elementen eine andere Regel zuweist. Diese Ausnahme ist dann für einen kleineren Bereich im Dokument gültig.


Im obigen Beispiel wird über einen Selektor dem Element „Überschrift 1 und 2“ ein neuer Schrifttyp zugewiesen. Dadurch wird die Vererbung unterbrochen.

Die Verwendung externer Stylesheets bietet den großen Vorteil, dass man Änderungen um Layout nur an einem zentralen Punkt vornehmen muss. Das spart viel Zeit und Mühe. Hierdurch kann man ein konsistentes Erscheinungsbild der Webseiten gewährleisten. Je nach Bedarf sind beliebig viele Stylesheets für die Webseite mögöich.

Erstellt wird ein neues Stylesheet als separate Datei. Sie muss die Endung .css haben.



BUCHNAME: HTML FÜR ANFÄNGER

Farbwerte definieren:

Farben auf Computermonitoren entstehen aus rotem, grünem und blauem Licht. Darum wird dieses Farbsystem RGB (Red Green Blue) genannt. Durch die verschiedenen Mischungen dieser Farben können über 16.000.000 Farbvarianten dargestellt werden. Es gibt mehrere Möglichkeiten, Farbwerte in CSS festzulegen. Drei davon sehen sie hier:

Farbname

RGB Werte

Hexadezimal

Aqua

0,255,255

#00FFFF

Black

0,0,0

#000000

Blau

0,0,255

#0000FF

fuchsia

255,0,255

#FF00FF

Die am häufigsten Verwendete Methode ist die mithilfe der Hexadezimalwerte. Sie werden auch Hex-Codes genannt. Die Angabe eines Hexadezimalwertes beginnt mit einer Raute. Dahinter werden die Rot-, Grün-und Blauwerte einer jeweils durch zweistellige Ziffer-/Buchstabenkombinationen angegeben.

Es können viele Farbtöne angesprochen werden, wie mit RGB werten.

Es gibt eine Liste mit 216 websicheren Farben. Früher waren das die Farben, die auf jedem Monitor konsistent dargestellt werden konnten. Heute hat diese Liste aufgrund der technischen Entwicklung keine Relevanz mehr.


Beispiel: p{font-size:16px;}

  • Kein Leerzeichen zwischen dem Wert und der Maßeinheit eingeben.

  • Dezimalstellen sind erlaubt, sie werden aber mit einem Punkt getrennt.

  • Es gibt keine Standardmaßeinheit. Wenn man die Angabe der Maßeinheit vergisst, kann der Browser dies unterschiedlich interpretieren oder sogar ignorieren.

Maßeinheit

Beschreibung

Pixel(px)

Die einzelnen Quadrate auf dem Computerbildschirm. Längenangaben werden oft mit dieser Maßeinheit festgelegt. Die Größe eines Pixels variiert von Bildschirm zu Bildschirm

Punkt(pt)

Typografisches Maß. Ist gleich 1/72 bzw. 0,353mm.

Pica(pc)

Ebenfalls typografisches Maß. Die Schriftgröße 12 ist 1/6 in groß und entspricht einem pica.

Inch(in)

Ein englisches Längenmaß das gleich 2,54cm ist. Umrechnung in Pixel nicht möglich.

Millimeter(mm) und Zentimeter(cm)

Gleiche Einschränkungen wie beim Inch.


| | | | |
Tausche dein Hausarbeiten