HTML

  • HTML bedeutet Hypertext Markup Language. Es handelt sich dabei um die im World Wide Web verwendete Seitenbeschreibungssprache.
  • HTML-Dokumente sind reine Textfiles (plain-text) und können daher mit jedem beliebigen Texteditor (z. B. der Editor von Windows) erzeugt werden.
  • Zum Betrachten der HTML-Seiten wird ein sogenannter Browser (=Client), wie z. B. MS Internetexplorer, Firefox, Maxthon benötigt.
  • Die HTML-Seite muss aber zuvor entweder von einem WWW-Server bereitgestellt werden (z.B. http://www.reli4you.info) oder lokal auf einer Festplatte vorliegen (z. B. file:///E:/schule/ainf1213/baumgartner_neu/index.html).
  • HTML-Dokumente bestehen aus einzelnen Elementen, die stets in spitzen Klammern (TAGs) <…> eingeschlossen sind und überwiegend paarweise auftreten. Die Wirkung eines Elementes erstreckt sich nur auf den Text oder die Grafik zwischen den Einzelelementen der paarweise auftretenden Elemente.
    <h1>Felix Baumgartner</h1>

Ein HTML-Dokument wird grundsätzlich mit dem Kommando <HTML> begonnen und mit dem Kommando </HTML> abgeschlossen.
Im Prinzip besteht ein HTML-Dokument aus zwei Teilen. Im Header (umschlossen von <HEADER> … </HEADER>) wird das Dokument selbst beschrieben und im Body (umschlossen von <BODY> … </BODY>) sein Inhalt.
Der HEADER enthält den Titel des Dokuments, der in der Titelleiste des Webbrowsers angezeigt wird, und einige Festlegungen, z. B. zur Zeichencodierung.

 

Seitenaufbau:

<!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=utf-8" />
<title>HLW Hollabrunn</title>
</head>

<body>
<h1>Die fünfjährige Höhere Lehranstalt </h1>
<p/>Die fünfjährige Lehranstalt für wirtschaftliche Berufe führt zur Matura. … </p>

<h1>Die dreijährige Fachschule</h1>
<p>Die dreijährige Form mündet in die Abschlussprüfung. … </p> 
</body>
</html>

Ergibt:

Auf der Site http://codebeautify.org/htmlviewer/ kannst Du experimentieren. Im linken Fenster trägst Du HTML-Code ein, klickst in der Mitte auf RUN und siehst rechts das Ergebnis.




HTML-Elemente (TAGS)

HTML-Elemente zur Text-Strukturierung: Näheres siehe auf http://de.selfhtml.org/html/text/index.htm

  • <h> (h1 – h6)
    Überschriften auf 6 Ebenen
    Jede Überschrift ist eine eigener Absatz, es braucht daher davor und danach kein eigener Absatz eingefügt werden.
  • <p>
    Textabsatz
    Ein Absatz ist ein Textabschnitt, der einen Abstand davor und danach hat.
  • <br>
    erzwungener Zeilenumbruch
    Ein bloßer Zeilenumbruch erzeugt keinen Abstand wie ein Absatz.
  • <em>
    zeichnet einen Text als betont aus
  • <strong>
    zeichnet einen Text als stark betont aus
  • <b>
    zeichnet einen Text als fett aus
  • <i>
    zeichnet einen Text als kursiv aus
  • <u>
    zeichnet einen Text als unterstrichen aus
  • <sup>
    zeichnet einen Text als hochgestllt aus
  • <sub>
    zeichnet einen Text als tiefergestellt aus
  • <div>
    damit wird ein Block (Box) erzeugt

Eine umfassende Liste aller HTML-Tags findest Du auf https://wiki.selfhtml.org/wiki/Referenz:HTML




Layout mit dem Boxmodell

Layout mit dem Boxmodell

Mit DIV-Containern (Boxen) kann das Layout (die Art und Weise, wie Text und Bilder und sonstige Elemente einer Seite angeordnet sind) einer Webseite exakt definiert werden. Das sogenannte Box-Modell erlaubt, Container (Boxen) zu definieren und auf der Seite zu positionieren. Eine Box kann mehrere Eigenschaften haben:

  • Breite (width)
  • Höhe (height)
  • Hintergrundfarbe (background-color)
  • Innenabstand (padding)
  • Rahmen (border)
  • Aussenabstand (margin)

Die Gesamtbreite bzw. die Gesamthöhe einer Box ergibt sich aus der Addition von:

  • der Breite bzw. Höhe des Elementinhalts (width)
  • des Innenabstands (padding)
  • der Rahmenstärke (border-width) und
  • des Aussenabstands (margin).

Skizze zum Boxmodell

Definieren eines div-Containers (einer Box)

Die Definition einer Box erfolgt im Stylesheet. Die Syntax ist folgende:

div#name_der_box{
   Eigenschaft1: Wert;
   Eigenschaft2: Wert;
   ...
}

Beispiel:

div#inhalt {
   position:relative;
   width:980px; height:200px;
   background-color:#A0A0A4;
}

inhalt – Name der Box
position:relative – die Boxen ordnen sich so an, dass die zuerst eingefügt oben ist, die weiteren folgen darunter; zur genaueren Positionierung gibt es weitere Möglichkeiten (margin, float)
width – Breite der Box
height – Höhe der Box
background-color – die Hintergrundfarbe der Box

Einbinden einer Box in eine HTML-Seite

Eine Box muß eigens in die HTML-Seite eingebunden werden. Das Verbinden der HTML-Seite mit dem Stylesheet, in dem die Box definiert wurde, reicht nicht. Die Einbindung einer Box erfolgt so:

<div id="name_der_box">
   ...
</div>

Beispiel:

<div id="inhalt">
   ...
</div>

Zwischen das öffnende <div> und schließende DIV-Tag </div> kommt der Inhalt der Box (…).

In Dreamweaver können Boxen über das Menü Einfügen – Layoutobjekte – Divtag eingefügt werden.




CSS-Referenz (Auszug)

[ws_table id=”11″]




Eine Website planen und programmieren

Hier wird die Vorgehensweise des Programmierens einer kleinen Website beschrieben. Die Schritte sind:

  1. Überlegung: Wer ist die Zielgruppe (Personengruppe, Alter, Bildung, Berufsgruppe) meiner Website?
    Danach richten sich: Inhalte inkl. der Bilder, Layout, Formate (z. B. Schriftgröße)
  2. Die Website mit ihren einzelnen Seiten und Inhalten inkl. der Verlinkung planen:
    Inhalte suchen, zusammenstellen, schreiben, auf die einzelnen Seiten aufteilen, Verlinkung mit den Namen für die Hyperlinks planen.
  3. Ev. Fotos in richtiger Größe und vorbereiten (laut Plan).
  4. Den Stammordner mit ev. Unterordnern (z. B. für Fotos) anlegen.
  5. Das Layout der Einzelseite und die Formatierungen planen (auf Papier).
  6. In Dreamweaver die neue Site anlegen: Site / Neue Site (der Site einen Namen geben, Stammordner auswählen).
  7. Das Stylesheet: Das Stylesheet anlegen (Datei / Neu / CSS) und gleich mit einem aussagekräftigen Namen speichern.
    Das Layout der Seite und die Formate im Stylesheet umsetzen:
    Boxen anlegen (div#boxname{…}
    Schriftformate, Hyperlinks programmieren:
    h1{font-family …}
  8. Namenskonventionen (Regeln für Dateinamen im Web):
    ausschließlich Kleinschreibung
    keine Umlaute
    keine Sonderzeichen ausser Unterstrich (_)
  9. Eine Musterseite (kann die index.html sein) anlegen:
    Datei / Neu / HTML und sofort speichern.
    Erst nach dem Speichern die Seite mit dem Stylesheet verbinden: Stylesheet anfügen (Symbol)
  10. Im Stylesheet definierte Boxen (div-Elemente) in die Musterseite einbinden: Einfügen / Layoutobjekte / DivTag
    Darauf achten, dass die Boxen nacheinander sind und nicht ineinander (verschachtetlt). Der Mauszeiger darf niemals in einer Box stehen, wenn die nächste eingefügt wird!
    In der Codeansicht der Seite sieht das richtig so aus:
    <div id=”kopf”> Inhalt </div>
    <div id=”navigation”> Home … </div>
    <div id=”inhalt”>Bla bla bla </div>
  11. Wenn mit der Musterseite alles in Ordnung ist, die Musterseite durch “Speichern unter” neuen Namen vervielfältigen (z. B. schulprofil.html; kontakt.html).
  12. Texte und andere Inhalte (Bilder etc.) in die Seiten einfügen.
  13. In die index.html die Namen für die Navigation hineinschreiben, die Verlinkung durchführen und die fertige Verlinkung in die weiteren Seiten kopieren.
  14. Die Verlinkung testen.

https://www.google.at/search?q=website+planen&source=lnms&tbm=isch&sa=X&ei=W-IvU-HiAqS07Qa8lYCgBg&sqi=2&ved=0CAcQ_AUoAQ&biw=1473&bih=814




Web: Begriffsklärungen

Eine Website besteht aus mehreren einzelnen Seiten, die miteinander verlinkt sind.  Im Zusammenhang damit hat sich folgende Begrifflichkeit eingebürgert:

WEBSITE

alle miteinander verlinkten Seiten

einzelne Seiten index.html hobbys.html kontakt.html
   ||
Homepage:

die Startseite einer Website, meist auch als Startseite/Einleitungsseite gestaltet
startet aufgrund ihres Namens automatisch bei Eingabe einer URL (z. B. www.orf.at)

mögliche Namen:

index.html (.php …)
default.html (.php …)

normale Seite normale Seite

 




Eine Website veröffentlichen

Voraussetzungen für die Veröffentlichung einer Website sind:

  • Eine fertige Website (alle dazugehörigen Elemente befinden sich im Stammordner und dessen Unterordnern)
  • Webspace (es gibt zahlreiche Gratisangebote, meist aber werbefinanziert)
  • eine Domain (bei Gratisangeboten von Webspace erhält man meist eine Subdomain: z. B. www.ertl.tipido.com)
  • Wenn man Webspace und Domain kauft, ist es praktisch dies aus einer Hand zu kaufen. Webspace und Domain werden dann fertig eingerichtet und sind sofort betriebsbereit.
  • Adresse des Verwaltungspanels, Benutzername davon; FTP-Zugangsdaten (die Dateien werden idealerweise per FTP (aus Dreamweaver heraus) hochgeladen)

Hier ist eine Liste von empfehlenswertem Gratis-Webspace: Coming soon

Kriterien für guten Webspace:

  • Sichere Erreichbarkeit des Webservers (keine Ausfälle)
  • Server-Speed
  • FTP-Zugang, DAV-Zugang
  • Größe des Speicherplatzes (für eine kleine private Website mit einigen Seiten und zwei Dutzend Bildern reichen schon 100 MB)
  • MySQL-Datenbanken (will man sich z. B. WordPress oder das CMS Typo3 oder eine Datenbank für Adressen installieren, braucht man Datenbanken)

Eine Website veröffentlichen:

  • Anmeldung bei einem Webspace-Provider (hier sind Name und Adresse erforderlich, weil sich Provider vor Missbrauch schützen müssen) und Erhalt der Zugangsdaten (ev.  zum Administrations-Panel, in dem man Einstellungen vornehmen kann, FTP-Zugang)
  • Eintrag der FTP-Daten in Dreamweaver unter ► Site ► Sites verwalten ► Die ausgewählte Site bearbeiten ► Server ► Neuen Server hinzufügen
    Einzutragen sind: FTP-Adresse, Benutzername und Kennwort und ein passender Servername

 

Webserver Verbindungsdaten
Webserver Verbindungsdaten

  • Anschließend kann die Verbindung getestet werden
  • und beim ersten Mal die gesamte Website hochgeladen werden:
    Markieren der Site im Dateienfenster
    und mit Datei(en) auf “Remote-Server” bereitstellen (Pfeil nach oben) hochladen

Hochladen
Hochladen

  • Werden einzelne Dateien später verändert oder kommen neue hinzu, werden diese markiert und hochgeladen.



3-Spalten-Layout

3-Spalten-Layout mit fixen Breiten

Ein 3-Spalten-Layout ist leicht umzusetzen. Hier die Angaben für das Stylesheet:

html, body {height: 100%; /* html bzw. body kann man sich als Container vorstellen,*/
            width: 800px; /*der eine bestimmte Größe hat und horizontal zentriert wird */
            margin-left:auto; margin-right:auto; margin-top:0px;}

div#links {height: 100%;
        background-color: #CCCCCC;
        width: 150px;
        float: left;}    /* float: left richtet die Box innerhalb des obigen Containers links aus */

div#rechts {height: 100%;
         background-color: #CCCCCC;
         width: 150px;
         float: right;}  /* float: right richtet die Box innerhalb des obigen Containers rechts aus */

div#inhalt {height: 100%;
         background-color: #8D8D8D;
         width: 500px;
         margin-left:auto; margin-right:auto;
		 }

Und HTML:

Zuerst wird #links, dann #rechts und als letzes! #inhalt eigefügt.

Siehe auch: http://www.css-spielereien.de/3-spalten-layout.php

Besonderheiten:

Bekommen die Boxen ein padding und/oder einen Rahmen, so müssen diese von der Breite abgezogen werden (Breite – padding – border). “Boxsizing” funktioniert nicht.

Abstände zwischen den Boxen (horizontal) können nicht mit margin-left/margin-right realisiert werden. Die Boxen müssen einfach schmäler gemacht werden, sodass ein Abstand zwischen ihnen bliebt.

 

3-Spalten-Layout mit flexibler Breite von #inhalt

Bei html, body wird nur die Höhe angegeben:

html, body {height: 100%;}

Ebenso bei #inhalt:

#inhalt {height: 100%;
         background-color: #8D8D8D;}

Die Zentrierung kann auch wegfallen, da sich das Layout über die gesamte Breite erstreckt.




Farbe, Farbtiefe und Dateiformate

Für Pixelbilder gibt es eine Reihe von Dateiformaten (Speicherformaten), die sich in der Farbtiefe, der möglichen Verwendung u. a. unterscheiden. Häufige Dateiformate sind die folgenden:

Format Farben/Farbtiefe Weitere Eigenschaften und Verwendung
GIF 256/8 bit vektorbasierende Vorlagen, große gleichfarbige Flächen (Texte, Cartoons, Logos, Vektorformen), Animationen, Transparenz, Anzeige im Webbrowser
JPEG 16,7 Mio/24 bit fotorealistische Bilder, Fotos, Farbverläufe, Komprimierung mit kalkulierbarem Detailverlust, Anzeige im Webbrowser, keine Transparenz
PNG 4,3 Mia/32 bit Alternative zu GIF und JPEG, MM Fireworks-eigenes Format, Webbrowser, Transparenz
TIF 4,3 Mia/32 bit Druck, Ebenen, verlustfreie Komprimierung, Transparenz
PSD 4,3 Mia/32 bit Druck, Ebenen, Montagen, immer ohne Verlust, Adobe photoshopeigenes Format, Transparenz

Speichere das gleiche Foto im TIFF-Format und im JPG-Format in höchster Qualität. Vergleiche die Dateigrößen!

Übungen

  1. Speichere ein Foto mit der Funktion Für Web speichern. Verändere im Dialogfenster die Qualität und achte, wie sich die Vorschau des Bildes und die Dateigröße ändert!
  2. Mache einen Bereich eines Bildes transparent (durchsichtig). Speichere das Bild im JPG-Format. Was geschieht mit dem transparenten Bereich?
    Speichere das Bild im TIFF-Format. Was ist mit der Transparenz?
  3. Speichere ein Foto im GIF-Format. Verändert sich die Qualität?
    Speichere ein Foto im GIF-Format und reduziere die Anzahl der verwendeten Farben auf 16.

 

Die Farbtiefe wird in bit angegeben und gibt die Anzahl der maximal darstellbaren Farben an:

Farbtiefe (in bit) Berechnung Maximal darstellbare Farben
1 bit 2 (schwarz und weiß)
8 bit 2⁸ 256 Farben
16 bit 2¹⁶ 65.536 Farben
24 bit 2²⁴ über 16 Millionen Farben
32 bit 2³² knapp 4,3 Milliarden Farben

Komprimierung mit kontrolliertem Detailverlust

Die Formate GIF, JPEG und PNG können in Webbrowsern dargestellt werden (sind webtauglich) und ermöglichen eine Komprimierung mit kontrolliertem Detailverlust. Bilder für das Internet sollen eine möglichst geringe Dateigröße aufweisen. Durch die Komprimierung mit kontrollierten Detailverlust kann ein Kompromiss zwischen Dateigröße und Detailgenauigkeit erreicht werden.

„Speichern für Web“ im Programm Photoshop (Elements) ermöglicht die Einstellung der Qualität. Geringere Qualität ergibt kleinere Dateigrößen. Die Qualität kann mit Hilfe des Vorschaubildes kontrolliert werden.

Die Farben

Die einfallende Belichtung erzeugt auf dem CCD-Chip einer digitalen Kamera oder eines Scanners elektrische Spannungen. Die Spannung ist abhängig von der Lichtmenge. Je mehr Licht einfällt, um so größer ist
die elektrische Spannung. Über den nachgeschalteten A/D-Wandler wird die Spannung in digital erfassbare Werte umgewandelt. Daraus ergeben sich 256 Abstufungen je Farbe von reinem Rot bzw. Grün bzw. Blau zu Schwarz (Schwarz = am Bildschirm keine Farbe). Die 256 Abstufungen sind für das Auge nicht erkennbar. Wir sehen einen harmonischen Farbverlauf.

RGB Farbabstufungen

 

Rot: 8 bit = 256 Stufen
Blau: 8 bit = 256 Stufen
Grün: 8 bit = 256 Stufen

Gesamt: 24 bit = 16,777 Mio Farben

Insgesamt ergeben sich 24 Bit Farbtiefe für eine beliebige Farbe. 1 Bit ist die kleinste Recheneinheit des Computers und kann nur „Schwarz oder Weiß“ darstellen. Mit den 8 Bits pro Farbe können 256 verschieden Abstufungen dargestellt werden. Bei drei Farben macht das 24 Bit oder auch 224, vereinfacht ausgedrückt: 16,777 Millionen Farben.

Eine Bilddarstellung mit 24 Bit Farbtiefe wird vom menschlichen Auge als harmonisch wahrgenommen, obwohl die Wahrnehmung des menschlichen Auges in der natürlichen Umgebung noch viel feiner ist.




Farbmodi, Farbmodelle, Pixel- und Vektorgrafiken

Farbmodi

Photoshop kennt mehrere Farbmodi (Bild / Modus). Die gängigsten sind:

Farbmodus Merkmale
RGB Rot: 8 Bit – 256 Abstufungen
Grün: 8 Bit – 256 Abst.
Blau: 8 Bit – 256 Abst.
Summe: 24 Bit – über 16 Millionen Farben
Indizierte Farbe Farbe
Graustufen 256 Graustufen
Bitmap Schwarz und Weiß

Farbmodelle

RGB-Farbmodell

Die Darstellung von Farben am Bildschirm erfolgt über das RGB-Farbmodell. Digitalkameras und Scanner arbeiten ebenso nach dem RGB-Farbmodell. Die Grundfarben dieses Modells sind Rot, Grün und Blau.

RGB-Farbmodell

Jede Farbe wird aus verschieden hohen Anteilen der drei Grundfarben Rot, Grün und Blau zusammengesetzt. Die Anteile der Grundfarben an der Mischfarbe werden durch einen Wert zwischen 0 und 255 oder eine Prozentangabe festgelegt.

Rot, Grün und Blau werden als additive Primärfarben bezeichnet, da sie nicht durch Mischen anderer Farbtöne erzeugt werden können. Mischt man zwei additative Primärfarben, so wird jeweils eine Sekundärfarbe (Cyan, Magenta oder Yellow) erzeugt.

Rot + Grün: Gelb
Grün + Blau: Cyan
Rot + Blau: Magenta

 

 

 

 

CMYK-Farbmodell

 

CMYK-Farben

Das CMYK-Farbsystem besteht aus den Farben Cyan (einem hellen, grünlichen Blau), Magenta (ein violettes Rot), Gelb (helles, bis mittleres Gelb) und Schwarz (K: das K leitet sich von Keyplate, Schlüsselplatte ab, das ist die schwarz druckende Platte, an der die drei farbigen Platten ausgerichtet werden). Das schwarz soll die Druckqualität des Farbmodells erhöhen. Theoretisch ergibt zwar die Mischung von CMY eine schwarze Farbe, die ist jedoch in der Praxis kein reines Schwarz, da die drei Grundfarben meist nicht ganz rein sind.

Dieses Modell wird beim Druck verwendet. Cyan, Magenta und Yellow sind subtraktive Primärfarben.  Der Druck nach diesem Modell wird als Vierfarbdruck bezeichnet.

Aus den Grundfarben Cyan, Magenta und Yellow werden alle Farben gemischt:

 

CMYK-Farbmodell

Cyan + Magenta: Blau
Magenta + Yellow: Rot
Cyan + Yellow: Grün
Cyan + Magenta + Yellow: Schwarz

 

 

 

 

 

 

 

Farbräume

[Farbmodelle unterschieden sich auch im Umfang der darstellbaren Farben (Farbraum). Der Farbraum des CMYK-Modells ist kleiner als der des RGB-Modells. Besonders im grünen und blauen/violetten Farbbereich sind sind im RGB-Modell mehr Farbabstufungen möglich. Das CMYK-Farbmodell tut sich in diesen Bereichen schwer, die Farben korrekt darzustellen, bzw. kann dies nicht. Daher können Farben am Bildschirm brilliant aussehen, am Ausdruck fehlt diese Brillianz. ]

 

Farbräume

Übung:

  • Lege ein leeres Bild mit der Größe von 800 x 600 px im RGB-Modus an.
  • Wähle im Farbwähler reines Blau aus (R: 0, G: 0, B: 255)
  • Wähle das Füllwerkzeug aus und klicke ins Bild, sodass es blau eingefärbt wird.
  • Stelle den Bild-Modus auf CMYK (Bild / Modus / CMYK-Farbe) und achte auf die Änderungen!

Vektorgrafiken und Pixelgrafiken

[Innerhalb der Computergrafik wird zwischen zwei Gruppen von Grafikformaten unterschieden: Vektorgrafiken und Pixelgrafiken.

Vektorgrafiken

Bei Vektorgrafiken werden mit Hilfe von Punkten in einem Koordinatensystem Linien, Kurven (so genannte Bezierkurven), Objekte und Schrift durch mathematische Funktionen definiert.

Vektorgrafiken sind verlustfrei skalierbar; man kann sie vergrößeren bzw. verkleinern, ohne dass die Qualität leidet. Bei Größenänderungen berechnet das Programm die Objekte neu.

Vgl. http://www.on-design.de/tutor/ebv/wissen.html

Pixelgrafiken

Ein Pixel (picture element, Bildpunkt) ist die kleinste Einheit eines als Bitmap gespeicherten Bildes. Pixelbilder bestehen aus einer festen Anzahl von quadratischen Bildpunkten, die rasterförmig angeordnet sind.
Digitaler Kamera und Scanner liefern Pixelbilder. ]