Scribd
Hochladen
77 Ansichten181 Seiten

Homepage Bastelkurs

Das Dokument beschreibt die Grundlagen für die Erstellung einer Homepage. Es erklärt Begriffe wie HTML, Browser, Client, Server und gibt einen Überblick über wichtige Konzepte des World Wide Webs.

Hochgeladen von

Heinrich
Copyright
© © All Rights Reserved
Wir nehmen die Rechte an Inhalten ernst. Wenn Sie vermuten, dass dies Ihr Inhalt ist, beanspruchen Sie ihn hier.
Verfügbare Formate
Als PPT, PDF, TXT herunterladen oder online auf Scribd lesen
77 Ansichten181 Seiten

Homepage Bastelkurs

Das Dokument beschreibt die Grundlagen für die Erstellung einer Homepage. Es erklärt Begriffe wie HTML, Browser, Client, Server und gibt einen Überblick über wichtige Konzepte des World Wide Webs.

Hochgeladen von

Heinrich
Copyright
© © All Rights Reserved
Wir nehmen die Rechte an Inhalten ernst. Wenn Sie vermuten, dass dies Ihr Inhalt ist, beanspruchen Sie ihn hier.
Verfügbare Formate
Als PPT, PDF, TXT herunterladen oder online auf Scribd lesen
Sie sind auf Seite 1/ 181

Homepage Bastelkurs

für Anfänger

Dipl.-Ing. Heinrich Dornmayr MBA


"Gib einem Menschen einen Fisch,
und er wird für einen Tag satt.
Lehre ihn Fischen, und er
wird ein Leben lang satt."
Inhalt
1. Wir basteln …
2. Grundlagen (Internet, WWW, Provider, Domain, …)
3. Webdesign – Technik
4. Webdesign – Tools
5. … wir basteln weiter. (Wie?)
6. Lessons Learned
7. Anhang

Dipl.-Ing. Heinrich Dornmayr MBA 3


Wir basteln …

Dipl.-Ing. Heinrich Dornmayr MBA 4


HTML
• HTML = HyperText Markup Language
• HTML = Auszeichnungssprache (Markup
Language).
• Bietet die Möglichkeit an, typische
Elemente eines textorientierten
Dokuments, wie Überschriften,
Textabsätze, Listen, Tabellen oder
Grafikreferenzen, als solche
auszuzeichnen.
Dipl.-Ing. Heinrich Dornmayr MBA 5
HTML
• "Das Nachschlagewerk": SELFHTML
– http://selfhtml.org/
– Eine Internet-Dokumentation (in html), die sich
mit den verschiedenen Aspekten der Erstellung
von Webseiten befasst, in erster Linie aber mit
dem html-Code (online-Version).
– Kann auch auf den eigenen Rechner geladen
werden (offline-Version).
– Existiert auch als Buch.

Dipl.-Ing. Heinrich Dornmayr MBA 6


Elemente und Tags in HTML
• HTML-Dateien sind Text-Dateien, die sich
aus HTML-Elementen zusammensetzen.
• HTML-Elemente werden durch so
genannte Tags markiert, meist durch ein
einleitendes und ein abschließendes Tag,
dazwischen ist der "Gültigkeitsbereich".
• Tags werden in spitzen Klammern notiert.
<h1>HTML ist die Sprache des Web</h1>

Dipl.-Ing. Heinrich Dornmayr MBA 7


Grundgerüst einer HTML-Datei
<html>

<head>
<title>
Text des Titels
</title>
</head>

<body>
Inhalt
</body>

</html>
Dipl.-Ing. Heinrich Dornmayr MBA 8
Angabe von Farben
• Drei Grundfarben Rot, Grün und Blau =
RGB-Werte
• Hexadezimale Farbdefinition ist 6stellig
und hat das Schema: #XXXXXX

Dipl.-Ing. Heinrich Dornmayr MBA 9


Hexadezimale Angabe von Farben
• Hexadezimale Ziffern können 16 Zustände
haben. Von 0 - 9 und von A – F
entsprechend dezimal von 0 – 15.
• Für jeden Farbwert (Rot, Grün, Blau)
stehen 2 Ziffern zur Verfügung. Das macht
16 x 16 (= 256) mögliche Zustände pro
Farbwert.
– Wie viele unterschiedliche Farben lassen sich
darstellen?
Dipl.-Ing. Heinrich Dornmayr MBA 10
Angabe von Farben
• Angabemöglichkeiten:
– #rrggbb #00FF00

– rgb(rr,gg,bb)
rgb(0,255,0)
– rgb(rr%,gg%,bb%) rgb(0%,100%,0%)
– Farbe red

Dipl.-Ing. Heinrich Dornmayr MBA 11


VGA-Farbpalette – 16 Grundfarben
black #000000 gray #808080

maroon #800000 red #FF0000

green #008000 lime #00FF00

olive #808000 yellow #FFFF00

navy #000080 blue #0000FF

purple #800080 fuchsia #FF00FF

teal #008080 aqua #00FFFF

silver #C0C0C0 white #FFFFFF

Dipl.-Ing. Heinrich Dornmayr MBA 12


Farben zuweisen
• Farbe für den Text:
color:rgb(0,255,0)
• Farbe für den Hintergrund:
background-color:rgb(0,255,0)

• HTML Elemente können mit dem style


Attribut verändert werden. CSS
verwenden und nicht mehr die alten
Angaben ohne style!
• Beispiel:
<body style="background-color:black">
Dipl.-Ing. Heinrich Dornmayr MBA 13
CSS - Cascaded Style Sheets
• CSS Stylesheets sind eine unmittelbare
Ergänzung zu HTML.
• Sprache zur Definition von Format-
eigenschaften einzelner HTML-Elemente.
• Es können Überschriften, Textabsätze,
Listen, Tabellenzellen oder Formulare
formatiert werden.
• Es können aber auch zentrale Formate
definiert werden, sogar in separater Datei
(css-Datei).
Dipl.-Ing. Heinrich Dornmayr MBA 14
HTML-Elemente mit Stylesheet-
Eigenschaften formatieren
• Jede Eigenschaft besteht aus einem
Namen, z.B. color (Schriftfarbe) und einem
Wert, z.B. #D8FD02, getrennt durch einen
Doppelpunkt.
• Schließen Sie jede Formatdefinition
jeweils durch einen Strichpunkt ab.
• Nur bei der letzten Formatdefinition vor
dem abschließenden Anführungszeichen
darf der Strichpunkt entfallen.
Dipl.-Ing. Heinrich Dornmayr MBA 15
Überschriften
• <h1> bis <h6> (h = heading = Überschrift)
leitet eine Überschrift ein.
• Die Nummer steht für die
Überschriftenebene. 1 ist die höchste
Ebene, 6 die niedrigste.
• Dahinter folgt der Text der Überschrift.
• </h1> bis </h6> beendet die Überschrift und
steht am Ende des Überschriftentextes.

Dipl.-Ing. Heinrich Dornmayr MBA 16


Ausrichtung
• Durch die Angabe style="text-align:center"
im einleitenden Tag erreicht man, dass
das Element zentriert ausgerichtet wird
(align = Ausrichtung, center = zentriert).
• Mit der Angabe style="text-align:right" wird
rechtsbündig ausgerichtet, mit style="text-
align:left" linksbündig
(=Standardeinstellung).

Dipl.-Ing. Heinrich Dornmayr MBA 17


Überschriften

<h1 style="text-align:center">1. Ordnung zentriert</h1>

<h2 style="text-align:center">2. Ordnung zentriert</h2>

<h3 style="text-align:right; color:red">3. Ordnung


rechtsbündig und rot</h3>

Dipl.-Ing. Heinrich Dornmayr MBA 18


Später basteln wir weiter …

Dipl.-Ing. Heinrich Dornmayr MBA 19


Grundlagen
Grundlagen
• Internet
– Interconnected Networks – "untereinander
verbundene Netzwerke"
– Das Internet ist das umfangreichste
Computer-Netzwerk der Welt, aber nicht das
einzige.

Dipl.-Ing. Heinrich Dornmayr MBA 21


Grundlagen
– Das Internet unterstützt viele verschiedene
Dienste, wie z.B.:
• Telnet (Telecommunication Network)
– Ein Programm, mit dem man Programme auf anderen
Computern aufrufen kann.
• FTP (File Transfer Protocol)
• Telefonie (z.B. "Skype")
• E-Mail
• WWW (World Wide Web )

Dipl.-Ing. Heinrich Dornmayr MBA 22


Grundlagen
• WWW
– Ist ein über das Internet abrufbares Hypertext-
System.
• Hypertext: Netzartige Struktur aufgrund der Links.
– Hierzu benötigt man einen Webbrowser, um
die Daten vom Webserver zu holen und auf
dem Bildschirm anzuzeigen.
• Der Benutzer kann den Hyperlinks im Dokument
folgen, die auf andere Dokumente verweisen,
gleichgültig ob sie auf demselben Webserver oder
einem anderen gespeichert sind.
Dipl.-Ing. Heinrich Dornmayr MBA 23
Grundlagen
• Browser
– Sind spezielle Computerprogramme zum
Betrachten von Webseiten im WWW, d.h. zum
Betrachten von HTML-Seiten.
– Der Browser interpretiert den HTML-Code:
• D.h. wenn er ein <h1>-Tag findet wird der folgende
Text als "große Überschrift" dargestellt.
• Was nun genau (Schriftart, Schriftgröße, …) eine
"große Überschrift" ist, hängt vom Browser ab.
• Daher schaut ein und dieselbe Homepage auf
unterschiedlichen Browsern leicht unterschiedlich aus.
Dipl.-Ing. Heinrich Dornmayr MBA 24
Grundlagen
– Die am häufigsten verwendeten Browser sind:
• Microsoft Internet Explorer
• Firefox (gratis)
• Netscape Navigator (mit 01.03.2008 wurden Entwicklung
und Support eingestellt)

• Safari (von der Firma Apple)

• Opera

Dipl.-Ing. Heinrich Dornmayr MBA 25


Grundlagen
• Client (Klient, Kunde, Auftraggeber) / Server (Diener, Zusteller)
– Ein Server ist ein Computer in einem Netzwerk der
Informationen zur Verfügung stellt und daher ständig in
Betrieb ist.
– Diese können von einem anderen Computer (Client)
aus abgefragt werden: z.B. Dokumente, Videos, usw.
– Web-Server beantworten Anfragen von Web-Clients
z.B. einem Browser, rufen die gewünschte Datei ab
und schicken das angeforderte Dokument.
– Web-Browser und Web-Server kommunizieren mittels
dem Hypertext Transfer Protocol HTTP. siehe z.B.
http://www.tanz-dich-frei.at

Dipl.-Ing. Heinrich Dornmayr MBA 26


Grundlagen
Anfrage HTML-Seite http://www.tanz-dich-frei.at

Web-Client
                                                                            Web-Server

Seite index.html wird gesendet


und am Client (Browser) dargstellt.

Dipl.-Ing. Heinrich Dornmayr MBA 27


Grundlagen
• Default-Dateinamen bei Web-Servern:
– Die meisten heutigen Web-Server sehen
einen oder mehrere bestimmte Dateinamen
als Datei für die "Einstiegsseite" vor.
– Meistens ist das der Name index.html oder
index.htm.
– Default-Dateinamen haben den Vorteil, dass
die Web-Adresse keinen HTML-Dateinamen
mehr braucht und kürzer wird.

Dipl.-Ing. Heinrich Dornmayr MBA 28


Grundlagen
• Von der Webseite zum WWW:
– Eine HTML-Seite kann man mit einem
speziellen HTML-Editierprogramm oder ganz
einfach mit dem Texteditor erzeugen.
– Man speichert die Textdatei, denn nichts
anderes ist HTML, mit der Endung .htm
bzw. .html ab (z.B. index.html).
– Die Datei kann man dann in jedem beliebigem
Browser öffnen.

Dipl.-Ing. Heinrich Dornmayr MBA 29


Grundlagen
– Damit die Datei nicht nur am lokalen Rechner,
sondern im Internet für die "ganze" Welt
sichtbar wird, muss man sie mit einem FTP-
Programm auf den Server eines Providers
laden.
• FTP: File Transfer Protocol - Programm

• Provider: Anbieter von Diensten, Inhalten oder


technischen Leistungen fürs Internet.

Dipl.-Ing. Heinrich Dornmayr MBA 30


Grundlagen
• FTP
– FTP – Programme:
• FileZilla (gratis!)
• SmartFTP
– WebFTP:
• Dies sind Dienste im WWW, die die Nutzung von
FTP-Servern mit einem Webbrowser ermöglichen.
Viele kommerzielle Internet Service Provider
bieten WebFTP als Ergänzung zu ihrem Service
an.

Dipl.-Ing. Heinrich Dornmayr MBA 31


Grundlagen

Dipl.-Ing. Heinrich Dornmayr MBA 32


Grundlagen
• Provider (Beispiele)
– UPC Austria (ehemals: Telekabel)
• Im Jahr 2006 wurde der Internetdienstleister Inode
übernommen.
– Telekom Austria AG (Marke "aon")
– Host Europe GmbH (ein 1997 gegründeter
deutscher Internetprovider)
• günstiger Webspace
– Strato, Goneo, 1 und 1, …Billiganbieter mit
Homepage-Baukasten
Dipl.-Ing. Heinrich Dornmayr MBA 33
Grundlagen
• Provider-Beispiel: www.world4you.com
– Österreichischer Anbieter aus Linz
– Webhosting und Domainregistrierung
– Domaincheck
– Softwarepaket inklusive
– Domainserver Basic (500 MB Webspace, Mail):
• 2,50 € / Monat
– Domaingebühren:
• .com 9,50 € / Jahr
• .at 29,00 € / Jahr
Dipl.-Ing. Heinrich Dornmayr MBA 34
Grundlagen
• Provider
– Gratis-Webspace bekommt man heute jede
Menge, die Sache hat aber ein paar Haken:
• Werbung, die auf der eigenen Homepage auftaucht
• Keine Top Level Domain
• Kaum Support
• Teure Extras
• Schwieriger Wechsel (oft schwer die erstellte
Homepage mitzunehmen)

Dipl.-Ing. Heinrich Dornmayr MBA 35


Grundlagen
• Domain
– Nichtgesponserte Domains (uTLD)
• .com commercial
ursprünglich nur für US-Unternehmen, heute frei für jeden
• .info information
für Informationsanbieter, mittlerweile für jeden frei zugänglich.
• .int international
für Internationale Organisationen
• .name name
nur für natürliche Personen oder Familien (Privatpersonen)
• .net network
ursprünglich für Netzverwaltungseinrichtungen, heute frei für
jeden
• .org organization
ursprünglich für nichtkommerzielle Organisationen (Non-Profit-
Organisation) reserviert, inzwischen allgemein freigegeben
Dipl.-Ing. Heinrich Dornmayr MBA 36
Grundlagen
– Länderspezifische Top-Level-Domains
(ccTLD)
• Es gibt über 200 ccTLDs.
• Jedem Land ist genau ein Zwei-Buchstaben-Code
zugeordnet.
• z.B.: .at, .de, .uk, .us, …

Dipl.-Ing. Heinrich Dornmayr MBA 37


Grundlagen
• Domain Registrierung
– www.nic.at
• Registrierung und Verwaltung von .at-Domains
• Verwaltet die Daten aller Domains mit .at, .co.at
und .or.at.
• Bittet auch eine Domain Suche.
• Egal, über wen eine Domain-Anmeldung erfolgt:
Die Domain muss bei nic.at registriert sein, damit
sie funktioniert.
• Alle Rechte an einer Domain hat der Domain-
Inhaber, auch wenn sie über einen Provider
registriert wurde.
Dipl.-Ing. Heinrich Dornmayr MBA 38
Grundlagen

Dipl.-Ing. Heinrich Dornmayr MBA 39


Grundlagen
• Suchmaschinen (Google, …):
– Wenn man gar nix tut, finden einem die
Suchmaschinen irgendwann von selbst.
– Händische Eintragung bei Suchmaschinen:
• Ein Link dazu findet sich meistens auf der Startseite.
– Automatische Eintragung:
• Eintragservices wie z.B. Submitter.de und
Webdesign-Firmen sowie Internetagenturen bieten
dafür automatisierte Verfahren an, die die
Homepage bei vielen Suchmaschinen und
Branchen-Verzeichnissen eintragen.
• Kosten ab 15,- Euro.
Dipl.-Ing. Heinrich Dornmayr MBA 40
Grundlagen
– Suchmaschinen-Optimierung:
• Damit eine Website bei den Suchmaschinen gut
platziert ist, müssen Inhalt und Programmierung
entsprechend angepasst und noch einige andere
Maßnahmen getroffen werden.
• Suchmaschinen-Optimierung ist relativ aufwendig.
• Webdesign-Firmen und Internetagenturen bieten
entsprechende Services an.
• Kosten ab 700,- Euro.
• Allerdings kann eine einmal erreichte Platzierung bei
einer Suchmaschine schnell wieder verloren sein, da
die Suchalgorithmen immer wieder verändert werden.
Dipl.-Ing. Heinrich Dornmayr MBA 41
Webdesign – Technik
Webdesign – Technik
• HTML "LifeCoach" und "tanz-dich-frei" als Beispiele

– Grundlegende Frage: Frames oder Tabellen?


• CSS
– HTML ist eigentlich nicht dazu gedacht, um
exakt anzugeben, wie ein Element aussehen
soll, sondern nur worum es sich handelt (z.B.
Überschrift).
– CSS - eine unmittelbare Ergänzungssprache -
erlaubt das beliebige Formatieren einzelner
HTML-Elemente (style = " …").
Dipl.-Ing. Heinrich Dornmayr MBA 43
Webdesign – Technik
• XML
– Dient zum Definieren von Auszeichnungs-
Sprachen.
– Für normales Homepage-Design ist XML bis
heute relativ uninteressant, es wird nur im
professionellen Bereich verwendet.
– Microsoft verwendet seit Office 2007 Office Open
XML als offenen Standard für XML-basierte
Dateiformate zur Speicherung von
Bürodokumenten (z.B. WORD-Dokumente
haben nun nicht mehr die Endung .doc
sondern .docx).
Dipl.-Ing. Heinrich Dornmayr MBA 44
Webdesign – Technik
• JavaScript
– Eine Programmiersprache die meist in
Kombination mit HTML und CSS verwendet
wird zur Gestaltung dynamischer Seiten.
– JavaScript erlaubt es, Maus- und
Tastatureingaben des Anwenders zu
verarbeiten und darauf mit Bildschirmausgaben
oder dynamischen Änderungen innerhalb der
angezeigten Web-Seite zu reagieren.

Dipl.-Ing. Heinrich Dornmayr MBA 45


Webdesign – Technik
– JavaScripts laufen im Web-Browser des
Anwenders ab (Sicherheitsrisiko), d.h. der
Browser muss JacaScript-fähig sein.
– JavaScript lässt sich auch bei jedem Browser
deaktivieren.
– Man kann daher nie sicher sein ob der
Benutzer die mit JavaScript programmierten
Anwendungen auch wirklich sehen kann.

Dipl.-Ing. Heinrich Dornmayr MBA 46


Webdesign – Technik
• PHP
– Wie JavaScript dient PHP zur dynamischen
Gestaltung von Websites, allerdings mit dem
großen Unterschied, dass es eine
serverseitige Script-Sprache ist.
– Der PHP-Code wird am Server ausgewertet,
der Client erhält reinen HTML-Code.
– Stellt dadurch im Gegensatz zu JavaScript
kein Sicherheitsrisiko dar.

Dipl.-Ing. Heinrich Dornmayr MBA 47


Webdesign – Technik
– Wird vor allem in Verbindung mit Datenbanken
(z.B. mySQL), für Anwendungen verwendet,
die eine Datenverarbeitung auf dem Server-
Rechner erfordern.
• Z.B. "Gästebuch"
– WICHTIG: Bei den meisten Basis-Paketen der
Internet-Provider ist die PHP - Funktionalität
nicht inkludiert (kostet extra).

Dipl.-Ing. Heinrich Dornmayr MBA 48


Webdesign – Technik
• Flash
– Flash bietet die Möglichkeit, Multimedia-
Effekte auf Web-Seiten zu bringen, aber auch
Anwendungen wie Spiele, Simulationen oder
Navigations-Unterstützung für Web-Seiten.
– Da hinter Flash ein kommerzielles Software-
Produkt (ehemals Macromedia, seit 2005
Adobe) steckt, ist es aber in keiner Weise mit
den offenen Internet-Standards vergleichbar!

Dipl.-Ing. Heinrich Dornmayr MBA 49


Webdesign – Technik
– Flash findet heutzutage auf vielen Webseiten
Anwendung, sei es als eingebundener Flash-
Film (Datei mit der Endung .swf, Intros auf
Webseiten oder animierte Werbebanner), sei
es als Teil einer Website oder in Form
kompletter Flash-Seiten.
– Mit Version 4 wurde Flash um ActionScript
erweitert und erlaubte seitdem die Erstellung
komplexer Websites oder die Programmierung
browserbasierter Anwendungen.

Dipl.-Ing. Heinrich Dornmayr MBA 50


Webdesign – Tools
Webdesign – Tools
1. Textorientiert mit unterschiedlichsten
Editoren

2. Vorlagen verwenden

3. Grafisch mit unterschiedlichsten


Software-Tools

4. Web-Content-Management-Systeme
(WCMS)
Dipl.-Ing. Heinrich Dornmayr MBA 52
Webdesign – Tools

1. Textorientiert mit unterschiedlichsten


Editoren (direkt HTML-Code erzeugen):
– Einfacher Texteditor (z.B. Microsoft Editor)
– Texteditor mit Syntax-Highlighting (z.B. Notepad2)

– HTML Editor (z.B. phase 5)

Dipl.-Ing. Heinrich Dornmayr MBA 53


Webdesign – Tools

2. Vorlagen verwenden:
– von Heinrich Dornmayr

– von on-mouseover

– von SELFHTML

– usw.

Dipl.-Ing. Heinrich Dornmayr MBA 54


Webdesign – Tools
3. Grafisch mit unterschiedlichsten Software-
Tools ("ohne HTML-Kenntnisse"):
– Microsoft Word (HTML-Grundkenntnisse trotzdem notwendig,
liefert scheußlichen Code aber es funktioniert)
– Fireworks und Flash (von Adobe)
– Online-Tools
• www.jimdo.com
• www.magix.net
• www.websitex5.com (incl. Suchmaschinenoptimierung)
– usw.

Dipl.-Ing. Heinrich Dornmayr MBA 55


Webdesign – Tools
4. Web-Content-Management-Systeme
(WCMS)
– "Inhaltsverwaltungssysteme": Wenn ein
solches System einmal installiert und
entsprechend den Anforderungen des
Anwenders konfiguriert ist, braucht sich
dieser nur noch um den Inhalt kümmern.
– Serverseitige CMS sind z.B.: Drupal,
Wordpress, Joomla, Typo3 und Mambo.
– Clientseitige CMS sind z.B.: BuddyW, zeta
producer, AXXIO, weblica und CityDesk.
Dipl.-Ing. Heinrich Dornmayr MBA 56
Webdesign – Tools
• WCMS-Beispiel: Mambo
– Mambo ist ein populäres Open Source
WCMS.
– Mambo basiert auf der serverseitigen
Skriptsprache PHP, die ebenso wie die
verwendete Datenbank MySQL unter einer
freien Lizenz steht.
– Es ist kostenlos erhältlich.
– Anwendung: www.karingraf.at

Dipl.-Ing. Heinrich Dornmayr MBA 57


… wir basteln weiter
mit HTML und CSS

Dipl.-Ing. Heinrich Dornmayr MBA 58


Absätze
• <p> (p = paragraph = Absatz) leitet einen
Textabsatz ein.
• </p> beendet den Textabsatz.
• Das <p>-Element darf keine anderen
blockerzeugenden Elemente wie z.B.
Überschriften oder Listen enthalten.
<p>Hier beginnt ein Absatz, hier ist er zu Ende.</p>

<p>Hier beginnt ein neuer Absatz, hier ist er zu Ende.</p>


Dipl.-Ing. Heinrich Dornmayr MBA 59
Absätze formatieren
<p style="text-align:center">...</p>

<p style="text-align:center; color:blue">Formatierter


Absatz.</p>

<p style="background-color:yellow">Ein anderer


formatierter Absatz.</p>

Dipl.-Ing. Heinrich Dornmayr MBA 60


Zeilenumbruch
• <br> (br = break = Umbruch) fügt einen
Zeilenumbruch ein.
• Alleinstehender Tag!

<h1>Otto's Brief an die Mutter</h1>


<p>Liebe Mama!</p>
<p>Vor drei Wochen habe ich erfahren<br>
dass Du krank bist<br>
Mach Dir keine Sorgen<br>
Mir geht es gut.</p>
Dipl.-Ing. Heinrich Dornmayr MBA 61
Unsortierte Listen
• <ul> leitet eine Aufzählungsliste ein
(ul = unordered list = unsortierte Liste).
• Mit <li> beginnt ein neuer Punkt innerhalb
der Liste (li = list item = Listeneintrag).
• </li> beendet den Listeneintrag.
<ul>
<li>Erster Eintrag</li>
<li>Zweiter Eintrag</li>
<li>Dritter Eintrag</li>
</ul>
Dipl.-Ing. Heinrich Dornmayr MBA 62
<ul>
Verschachteln von Listen
<li>Suchmaschinen
<ul>
<li>Google</li>
<li>Altavista</li>
<li>Fireball</li>
</ul>
</li>
<li>Verzeichnisse
<ul>
<li>Yahoo</li>
<li>Web.de</li>
<li>Dino-Online</li>
</ul>
</li>
<li>Was anderes</li>
<li>Noch was anderes</li>
</ul>
Dipl.-Ing. Heinrich Dornmayr MBA 63
Nummerierte Listen
• <ol> leitet eine nummerierte Liste ein
(ol = ordered list = nummerierte Liste).
• Mit <li> beginnt ein neuer Punkt innerhalb
der Liste (li = list item = Listeneintrag).
• </li> beendet den Listeneintrag.

<ol>
<li>das ist der erste Listeneintrag</li>
<li>das ist der zweite Listeneintrag</li>
<li>das ist der dritte Listeneintrag</li>
</ol>
Dipl.-Ing. Heinrich Dornmayr MBA 64
Lauftext - Marquee (Microsoft)
• Gehört nicht zum HTML-Standard und wurde
ursprünglich nur vom Internet Explorer
interpretiert.
– Mittlerweile setzen auch andere Browser das
marquee-Element um.

<marquee>Dieser Text bewegt sich</marquee>

• Eigenschaften:
– direction, scrollamount, scrolldelay, behavior, …

Dipl.-Ing. Heinrich Dornmayr MBA 65


Trennlinie
• Trennlinien dienen der optischen Abgrenzung
von nicht unmittelbar zusammengehörigen
Textabschnitten oder allgemein zur
Auflockerung.
• Eine Trennlinie erzeugt einen eigenen Absatz.
<hr>
…fügt eine Trennlinie ein (hr = horizontal rule
= Querlinie).
Dipl.-Ing. Heinrich Dornmayr MBA 66
Kommentare

<h1>Willkommen!</h1>

<!-- Kommentar: das oben drüber ist eine Überschrift -->

Dipl.-Ing. Heinrich Dornmayr MBA 67


Physische Textauszeichnungen
• Physische Textauszeichnungen haben
Bedeutungen wie "fett" oder "kursiv", stellen
also direkte Angaben zur gewünschten
Schriftformatierung dar.
…
<body>

<p>Das Schwein ist <b>fett</b> und der Turm von Pisa ist
<i>schief</i>.<br>
Und was ist <b><i>fett und schief</i></b>?</p>

</body>
…
Dipl.-Ing. Heinrich Dornmayr MBA 68
Physische Textauszeichnungen
• Physische Textauszeichnungen gehören
zu den Inline-Elementen.
– Inline-Elemente erzeugen keine neue Zeile im
Textfluss. Inline-Elemente sind als
untergeordnete, "innere" Elemente für Block-
Elemente gedacht.
– Inline-Elemente für Auszeichnungen im Text
müssen innerhalb anderer Block-Elemente
vorkommen.

Dipl.-Ing. Heinrich Dornmayr MBA 69


Physische Textauszeichnungen
Element Bedeutung

<b>...</b> zeichnet einen Text als fett aus


<i>...</i> zeichnet einen Text als kursiv aus
<tt>...</tt> zeichnet einen Text als
dicktengleich formatiert aus (tt =
Teletyper = Fernschreiber)
<u>...</u> zeichnet einen Text als unterstrichen aus
<s>...</s> zeichnet einen Text als durchgestrichen aus
<big>...</big> zeichnet einen Text größer als normal aus
<small>...</small> zeichnet einen Text kleiner als normal aus
<sup>...</sup> zeichnet einen Text als hochgestellt aus
<sub>...</sub> zeichnet einen Text als tiefgestellt aus

Dipl.-Ing. Heinrich Dornmayr MBA 70


Allgemeines Block-Element
• Es können mehrere Elemente wie Text,
Grafiken, Tabellen usw., in einen
gemeinsamen Bereich einschlossen
werden.
• Dieses allgemeine Element bewirkt nichts
weiter als dass es in einer neuen Zeile des
Fließtextes beginnt. Ansonsten hat es
keine Eigenschaften.
• Es ist dazu gedacht, um mit Hilfe von CSS
formatiert zu werden.
Dipl.-Ing. Heinrich Dornmayr MBA 71
Allgemeines Block-Element
…
<body>
<div style="text-align:center">
<h1>Alles zentriert</h1>
<ul>
<li>alles zentriert</li>
<li>alles?</li>
<li>alles!</li>
</ul>
</div>
</body>
…

Dipl.-Ing. Heinrich Dornmayr MBA 72


Allgemeines Block-Element
• Mit <div> leitet man ein allgemeines
Blockelement ein, in das man mehrere
andere Block-Elemente einschließen kann
(div = division = Bereich).
• Alles, was zwischen diesem Tag und dem
abschließenden </div> steht, wird als Teil
des Bereichs interpretiert.

Dipl.-Ing. Heinrich Dornmayr MBA 73


Allgemeines Inline-Element
• Analog zum div-Element, das andere
Block-Elemente enthalten kann, gibt es ein
Element, das Text und andere Inline-
Elemente enthalten kann, selbst aber
keinerlei Eigenschaften hat und nichts
bewirkt.
• Es ist dazu gedacht, um mit Hilfe von CSS
formatiert zu werden.

Dipl.-Ing. Heinrich Dornmayr MBA 74


Allgemeines Inline-Element
…
<body>

<h1 style="font-size:500%">
<span style="color:blue">A</span>
<span style="color:red">B</span>
<span style="color:green">C</span>
</h1>

</body>
…

Dipl.-Ing. Heinrich Dornmayr MBA 75


Allgemeines Inline-Element
• <span> leitet einen allgemeinen Inline-
Bereich ein.
• </span> beendet diesen Bereich.
• In jedem span-Element können mit Hilfe
von CSS andere Formatierungen
zugewiesen werden.

Dipl.-Ing. Heinrich Dornmayr MBA 76


Allgemeine Elemente formatieren mit CSS:

Schriftformatierung

• Unter Schriftformatierung sind Angaben zu


– Schriftarten,
– Schriftgrößen,
– Schriftfarben,
– Schriftgewicht,
– usw.
zu verstehen.

Dipl.-Ing. Heinrich Dornmayr MBA 77


Allgemeine Elemente formatieren mit CSS:

Schriftformatierung
• font-family (Schriftart)

style="font-family:'Times New Roman',Times,Arial"

– Bei mehreren angegebenen Schriftarten ist


die Reihenfolge der Angabe entscheidend.
– Schriftartnamen, die Leerzeichen enthalten, in
Anführungszeichen setzen. Wichtig: Nicht die
gleichen Anführungszeichen wie für das style-
Attribut verwenden!

Dipl.-Ing. Heinrich Dornmayr MBA 78


Allgemeine Elemente formatieren mit CSS:

Schriftformatierung
• font-style (Schriftstil)

style="font-style:italic"

– italic = Schriftstil kursiv

Dipl.-Ing. Heinrich Dornmayr MBA 79


Allgemeine Elemente formatieren mit CSS:

Schriftformatierung
• font-size (Schriftgröße)

style="font-size:6pt"

– Erlaubt ist eine numerische Angabe, sowie


Prozentangaben als auch „ungenaue“
Angaben wie
– small, medium, large, x-large
– sind erlaubt.
Dipl.-Ing. Heinrich Dornmayr MBA 80
Allgemeine Elemente formatieren mit CSS:

Schriftformatierung
• font-weight (Schriftgewicht)

style="font-weight:bold"

– Das Schriftgewicht bezeichnet die Dicke und


Stärke einer Schrift.
– Folgende Angaben sind möglich:
– bold, bolder, lighter ,
– 100,200, … 900 = extra-dünn (100) bis extra-
fett (900).
Dipl.-Ing. Heinrich Dornmayr MBA 81
Allgemeine Elemente formatieren mit CSS:

Ausrichtung und Absatzkontrolle


• text-indent (Texteinrückung)

style="text-indent:0.5cm"

– Damit kann man eine Einrückung für die erste


Zeile bestimmen.

Dipl.-Ing. Heinrich Dornmayr MBA 82


Allgemeine Elemente formatieren mit CSS:

Ausrichtung und Absatzkontrolle


• text-align (horizontale Ausrichtung)

style="text-align:left"

– Folgende Angaben sind möglich:


• left = linksbündig ausrichten (Voreinstellung).
• center = zentriert ausrichten.
• right = rechtsbündig ausrichten.
• justify = als Blocksatz ausrichten.

Dipl.-Ing. Heinrich Dornmayr MBA 83


Grafiken
• Geeignete Dateiformate für Web-gerechte
Grafiken sind vor allem GIF und JPEG.
• Grafiken sind aus HTML-Sicht Inline-
Elemente und sind daher innerhalb von
Block-Elementen anzugeben, etwa in
einem Textabsatz oder einem allgemeinen
Bereich oder auch einer Tabellenzelle.

Dipl.-Ing. Heinrich Dornmayr MBA 84


Grafiken
<img src="schuhe.gif" alt="Schuhe">

• Beispiel:
<html>
<head><title>Text des Titels</title></head>
<body>
<h1>Schuhe</h1>
<p><img src=„schuhe.gif" alt="Schuhe"></p>
</body>
</html>
Dipl.-Ing. Heinrich Dornmayr MBA 85
Grafiken
• <img>-Tag
– img = image = Bild
• Es handelt sich um ein Standalone-Tag
ohne Elementinhalt und ohne End-Tag!
• Mit Hilfe von Attributen bestimmen Sie
nähere Einzelheiten der Grafikreferenz.
• Zwei Attribute sind Pflicht und müssen
immer angegeben werden: src=, alt=
Dipl.-Ing. Heinrich Dornmayr MBA 86
Grafiken
• Attribute:
– src=
• src = source = Quelle
• Wenn Grafikdatei im gleichen Verzeichnis wie die
HTML-Datei → es genügt Angabe des
Dateinamens der Grafik, ansonsten Referenzieren
mit relativen oder absoluten Pfadangaben.
– alt=
• Angabe eines Alternativtextes an für den Fall, dass
die Grafik nicht angezeigt werden kann.

Dipl.-Ing. Heinrich Dornmayr MBA 87


Grafiken
• Zusatzattribute:
– width= " [Pixel] " → Angabe der Breite der Grafik
– height= " [Pixel] " → Angabe der Höhe
– border= " [Pixel] " → Rahmen um die Grafik

• Beispiel:
<img src="denker.gif" width="70" height="137" alt="Denker">

Dipl.-Ing. Heinrich Dornmayr MBA 88


Allgemeine Elemente formatieren mit CSS:
z.B. Grafiken ausrichten mit CSS
•  vertical-align (Vertikale Ausrichtung)

<img src="denker.gif" width="70" height="137" style="vertical-align:middle"


alt="Denker">

– Mögliche Angaben sind:


• text-top = am oberen Schriftrand ausrichten
• middle = mittig ausrichten
• text-bottom = am unteren Schriftrand ausrichten

Dipl.-Ing. Heinrich Dornmayr MBA 89


Allgemeine Elemente formatieren mit CSS:
z.B. Grafiken ausrichten mit CSS
• float (Textumfluss)

<img src="text.gif" width="311" height="194" style="float:left;"


alt="Text?">

– Mögliche Angaben sind:


• left = Element (Bild) steht links und wird rechts
davon von nachfolgenden Elementen umflossen.
• right = Element (Bild) steht rechts und wird links
davon von nachfolgenden Elementen umflossen.
• none = Kein Umfluss (Normaleinstellung).

Dipl.-Ing. Heinrich Dornmayr MBA 90


Allgemeine Elemente formatieren mit CSS:
z.B. Grafiken ausrichten mit CSS
• clear (Fortsetzung bei Textumfluss)

<p style="clear:both">Wir schreiben unten weiter!</p>

– Mögliche Angaben sind:


• left = Erzwingt bei float:left die Fortsetzung unterhalb.
• right = Erzwingt bei float:right die Fortsetzung unterhalb.
• both = Erzwingt in jedem Fall die Fortsetzung unterhalb.
• none = Erzwingt keine Fortsetzung unterhalb.
(Normaleinstellung).

Dipl.-Ing. Heinrich Dornmayr MBA 91


Allgemeine Elemente formatieren mit CSS:

Außenrand und Abstand

Dipl.-Ing. Heinrich Dornmayr MBA 92


Allgemeine Elemente formatieren mit CSS:

Außenrand und Abstand


• margin-top (Außenrand/Abstand oben)

<img src="text.gif" width="311" height="194"


style="float:left; margin-top:20px" alt="Text?">

– Numerische Angaben, möglich sind:


• pt = Punkt
• mm = Millimeter
• cm = Zentimeter
• px = Pixel
• em = bezogen auf die Schriftgröße des Elements
• % = relativ zur elementeigenen Größe
Dipl.-Ing. Heinrich Dornmayr MBA 93
Allgemeine Elemente formatieren mit CSS:

Außenrand und Abstand


• margin-bottom (Außenrand/Abstand unten)
• margin-left (Außenrand/Abstand links)
• margin-right (Außenrand/Abstand rechts)
• margin (Außenrand/Abstand allgemein)
– Zusammenfassung der vorhergehenden Einzelangaben.
– Erlaubt sind ein bis vier numerische Angaben (1.=oben,
2.=rechts, 3.=unten, 4.=links). margin: 1cm 2cm 3cm 4cm;
– Eine Angabe bedeutet alle Ränder gleicher Abstand.

Dipl.-Ing. Heinrich Dornmayr MBA 94


Allgemeine Elemente formatieren mit CSS:

Innenabstand

Dipl.-Ing. Heinrich Dornmayr MBA 95


Allgemeine Elemente formatieren mit CSS:

Innenabstand
• padding-top (Innenabstand oben)
• padding-bottom (Innenabstand unten)
• padding-left (Innenabstand links)
• padding-right (Innenabstand rechts)
• padding (Innenabstand allgemein)

Dipl.-Ing. Heinrich Dornmayr MBA 96


Allgemeine Elemente formatieren mit CSS:

Rahmen

style="border-width:12px;
border-color:#9999FF;
border-style:groove;"

Dipl.-Ing. Heinrich Dornmayr MBA 97


Allgemeine Elemente formatieren mit CSS:

Rahmen
• border[-top, -left, -right, -bottom]-width
(Rahmendicke)
• border[-top, -left, -right, -bottom]-color
(Rahmenfarbe)
• border[-top, -left, -right, -bottom]-style
(Rahmentyp)
• border[-top, -left, -right, -bottom]
(Rahmen allgemein)

Dipl.-Ing. Heinrich Dornmayr MBA 98


Allgemeine Elemente formatieren mit CSS:

Rahmen
• border-style:
– Folgende Angaben sind möglich:
• none = kein/unsichtbarer Rahmen
• hidden = kein/unsichtbarer Rahmen, auch Rahmen von
Nachbarelementen wird unterdrückt.
• dotted = gepunktet
• dashed = gestrichelt
• solid = durchgezogen
• double = doppelt durchgezogen
• groove = 3D-Effekt
• ridge = 3D-Effekt
• inset = 3D-Effekt
• outset = 3D-Effekt

Dipl.-Ing. Heinrich Dornmayr MBA 99


Allgemeine Elemente formatieren mit CSS:

Hintergrundbilder
<body style="background-image:url(Hintergrund.jpg)">

• Dabei wird das Bild über das ganze


Anzeigefenster hinweg immer wiederholt, so
dass ein Tapeteneffekt (Wallpaper) entsteht.
• Besonders geeignet für Wallpaper-Effekte sind
relativ kleine Grafiken, die irgendein abstraktes
Muster darstellen.
• Mit background-repeat: können Sie das
Wiederholungsverhalten einer Hintergrundgrafik
kontrollieren (z.B. no-repeat = nicht wiederholen,
nur als Einzelbild anzeigen).
Dipl.-Ing. Heinrich Dornmayr MBA 100
Verweise (Links)
• Verweise sind der entscheidende
Bestandteil jedes Hypertext-Projekts und
der "intelligente Mehrwert" des WWW.
• Erst dadurch wird aus der losen
Dateisammlung ein zusammenhängendes
Web-Projekt, eine Homepage.
• Verweise zu anderen Ebenen, Verweise
zum Wechseln zwischen Beschreibungen
und Anzeigebeispielen, Querverweise,
Verweise zu anderen Web-Adressen usw.
Dipl.-Ing. Heinrich Dornmayr MBA 101
Verweise (Links)
<body>
<h1>Eine kleine Verweissammlung</h1>
<p>
<a href="http://www.tagesschau.de">Tagesschau</a>
<a href="http://www.heise.de">Heise News</a>
<a href="http://www.google.at">Google Suchmaschine</a>
<a href="http://www.oneworld.org">OneWorld News</a>
</p>
<br>
<p>
<a href="index.html">Home</a>
</p>
</body>
Dipl.-Ing. Heinrich Dornmayr MBA 102
Verweise (Links)
• <a>-Element (a = anchor = Anker)
• Damit jedoch ein Verweis aus diesem Element
wird, ist das Attribut "href =" erforderlich (href =
hyper reference = Hyper(text)-Referenz).
• Als Wert an das href-Attribut weisen Sie das
gewünschte Verweisziel zu.
• Als Inhalt des a-Elements, also zwischen <a> und
</a>, notieren Sie den Text, der dem Anwender
als Verweis angeboten wird (bei den meisten
Web-Browsern andersfarbig, meist unterstrichen).
Dipl.-Ing. Heinrich Dornmayr MBA 103
Referenzieren in HTML
• Mit vollständigen URIs referenzieren:
– Mit vollständigen URIs (Universal Resource
Identifier - universelle Quellenbezeichnung)
müssen Sie dann referenzieren, wenn sich die
gewünschte Datenquelle nicht im eigenen
Web-Angebot befindet.
– z.B.: http://www.google.at

Dipl.-Ing. Heinrich Dornmayr MBA 104


Referenzieren in HTML
• Mit relativen Pfadangaben relativ zum
Basis-URI referenzieren:
– Diese Form der relativen Adressierung ist
innerhalb von Web-Projekten sehr zu
empfehlen!!!
– Der Grund ist, dass Sie das Web-Projekt auf
diese Weise problemlos an eine andere
Adresse verschieben können, und trotzdem
funktionieren noch alle projektinternen
Verweise und Grafikreferenzen.
Dipl.-Ing. Heinrich Dornmayr MBA 105
Referenzieren in HTML
– z.B.:
• farben.htm
• ./farben.htm
• ../farben.htm
• bilder/grafik.gif
– Erläuterungen:
• Eine Datei im gleichen Verzeichnis wie dem aktuellen wird
durch Angabe des Dateinamens referenziert.
• Das aktuelle Verzeichnis referenzieren Sie durch "./ ". (=>
farben.htm und ./farben.htm = gleicher Effekt.)
• Mit "../" referenzieren Sie das Verzeichnis über dem aktuellen
Verzeichnis, egal wie es heißt.
• Auch Unterverzeichnis des aktuellen Verzeichnisses können
referenziert werden.
Dipl.-Ing. Heinrich Dornmayr MBA 106
Zielfenster für Verweise bestimmen
• Mit dem Attribut target= im einleitenden
<a>-Tag können Sie ein Zielfenster für
den Verweis festlegen.
• Verweis in einem neuen Fenster öffnen →
target="_blank" → Mit dem Unterstrich am
Anfang!
• target="_self" → Verweis im aktuellen
Fenster öffnen.

Dipl.-Ing. Heinrich Dornmayr MBA 107


Verweise optisch gestalten mit CSS
<head>

<style type="text/css">

<!--

a:link { text-decoration:none; font-weight:bold; color:#E00000; }


a:visited { text-decoration:none; font-weight:bold; color:#800000; }
a:hover { text-decoration:none; font-weight:bold; background-color:#FFFF00; }
a:active { text-decoration:none; font-weight:bold; background-color:#CCFFFF; }

-->

</style>

Dipl.-Ing. Heinrich Dornmayr MBA 108


Anker
• Es können auch innerhalb einer HTML-Datei
Anker definiert werden.
• Mit einem Verweis kann man dann genau an die
Ankerstelle innerhalb der Datei springen.
• Der Verweis kann in der gleichen Datei stehen.
– Dann wird einfach ein Sprung innerhalb der
angezeigten Seite ausgeführt.
• Der Verweis kann aber auch in einer anderen
Datei stehen.
– Dann wird die Zieldatei geladen, und an die
entsprechende Stelle innerhalb der Datei gesprungen.
Dipl.-Ing. Heinrich Dornmayr MBA 109
Anker
• Verweis in der gleichen Datei:

<a name="anfang">Lange Seite</a>

<!– Hier Text, der mehr als eine Bildschirmseite


füllt, einfügen. -->

<a href="#anfang">Seitenanfang</a>

Dipl.-Ing. Heinrich Dornmayr MBA 110


Anker
• Verweis in einer anderen Datei:

<a href="../andereSeite.html#anfang">Anker in
anderer Datei</a>

Dipl.-Ing. Heinrich Dornmayr MBA 111


Zeichenkodierung
• Zeichen werden in Bytes abgespeichert (8
binäre Stellen (0 oder 1) -> siehe ASCII-
Code
• Die Zeichenkodierung greift auf eine
Übersetzungstabelle (Codetabelle) zurück,
die jedem Zeichen, das verwendet werden
kann, eine fortlaufende Nummer (einen
Code) zuweist.

Dipl.-Ing. Heinrich Dornmayr MBA 112


Zeichenkodierung
• Die Menge der Zeichen in einer solchen
Tabelle wird Zeichenvorrat genannt.
• Es werden unzählige Kodierungen für
HTML-Dateien verwendet, daher sollte die
HTML-Datei eine Angabe zur verwendeten
Zeichenkodierung enthalten.
– Die Browser sind in diesem Punkt äußerst
tolerant, wenn keine Angabe existiert und
greifen zumeist auf die voreingestellte
Kodierung zurück.
Dipl.-Ing. Heinrich Dornmayr MBA 113
Zeichenkodierung
• Wenn Sie im Text einzelne Zeichen
eingeben wollen, die nicht im
Zeichenvorrat der verwendeten Kodierung
enthalten sind, können Sie zwischen zwei
Möglichkeiten wählen:
– Entweder Sie verwenden eine spezielle
numerische Notation.
– Für häufiger verwendete Sonderzeichen stellt
HTML aber auch so genannte benannte
Zeichen zur Verfügung.
Dipl.-Ing. Heinrich Dornmayr MBA 114
Zeichenkodierung
• Die benannten Zeichen für die deutschen
Umlaute und das scharfe S:
Zeichen Ersetzung
ä &auml;
Ä &Auml;
ö &ouml;
Ö &Ouml;
ü &uuml;
Ü &Uuml;
ß &szlig;
Dipl.-Ing. Heinrich Dornmayr MBA 115
Das Euro-Zeichen in HTML
• Auch für das Euro-Zeichen gibt es ein
benanntes Zeichen in HTML.
– Das Euro-Zeichen ist nicht im Zeichenvorrat
von ISO 8859-1 enthalten, sodass das
benannte Zeichen an dessen Stelle benutzt
werden muss, wenn diese Kodierung
verwendet wird.

&euro;

Dipl.-Ing. Heinrich Dornmayr MBA 116


Geschützte Leerzeichen
• Die Zeichenfolge &nbsp; erzeugt ein
geschütztes Leerzeichen
(nbsp =nonbreaking space = Leerzeichen
ohne Umbruch).
• Es wird ein normales Leerzeichen
angezeigt, doch an dieser Stelle kann kein
Zeilenumbruch erfolgen.
• Häufige Verwendung bei Tabellen noch
ohne Inhalt, zur Darstellung der
Gitternetzlinien!
Dipl.-Ing. Heinrich Dornmayr MBA 117
Tabellen
• HTML Tabellen werden einerseits
verwendet, um tabellarische Daten
darzustellen, und andererseits um Text und
Grafik attraktiver am Bildschirm zu
verteilen.
• Obwohl Tabellen vornehmlich zur
Darstellung tabellarischer Daten
geschaffen wurden, werden sie in der
heutigen Praxis des Web-Designs vor
allem als Grundgestaltungsmittel für
Seiten-Layouts verwendet.
Dipl.-Ing. Heinrich Dornmayr MBA 118
Tabellen
<table border="1">
<tr>
<th>Widerstand</th>
<th>Kondensator</th>
<th>Spule</th>
</tr>
<tr> Randstärke 1 oder mehr
<td>Ohm</td> bedeutet "mit Gitternetzlinien,
Randstärke 0 bedeutet
<td>Farad</td> "ohne Gitternetzlinien"
<td>Henry</td> (Web-Design Hilfsmittel).
</tr>
</table>
Dipl.-Ing. Heinrich Dornmayr MBA 119
Tabellen

Dipl.-Ing. Heinrich Dornmayr MBA 120


Tabellen
Die folgende Grafik zeigt die Wirkungsweise der Attribute im einleitenden <table>-Tag:

Dipl.-Ing. Heinrich Dornmayr MBA 121


Tabellen
• Breiten- und Höhenangaben von Zellen:

<td style="width:100px">

<td style="height:100px">

Dipl.-Ing. Heinrich Dornmayr MBA 122


Tabellen
• Ausrichtung von Zellen:
align="left"
align="right"
align="center"

valign="top"
valign="bottom"
valign="middle"

Dipl.-Ing. Heinrich Dornmayr MBA 123


Tabellen
• Zellen verbinden:
colspan= "Anzahl Spalten"
(colspan = column span = Spalten spannen)

rowspan= "Anzahl Zeilen"


(rowspan = Zeilen spannen)

– Die Attribute colspan und rowspan lassen sich


auch in einer Zelle kombinieren.

Dipl.-Ing. Heinrich Dornmayr MBA 124


Tabellen
• Hintergrundfarbe:

style="background-color:#00FFFF"

• Hintergrundbild:

style="background-image:url(background.jpg)"

Dipl.-Ing. Heinrich Dornmayr MBA 125


Tabellen
• Im Gegensatz zur Angabe eines
Hintergrundbildes mit dem style-Attribut im
<td>-Tag, kann ein Bild auch als Inhalt
zwischen dem <td> und dem </td>-Tag
angebenen werden:

<img src="schuhe.gif" alt="Schuhe">

Dipl.-Ing. Heinrich Dornmayr MBA 126


Übungsbeispiel -
Grundgestaltungsmittel für Seiten-Layouts

Dipl.-Ing. Heinrich Dornmayr MBA 127


Jetzt seid Ihr am Zug …

Dipl.-Ing. Heinrich Dornmayr MBA 128


Zentrale Formate definieren mit
CSS
• Bisher: Formate innerhalb eines HTML-
Elements mit "style"-Attribut definieren.
• Formate zentral für eine HTML-Datei
definieren.
• Individualformate definieren („#“ und „id“).
• Formate zentral in separater CSS-Datei
definieren.

Dipl.-Ing. Heinrich Dornmayr MBA 129


Zentrale Formate definieren mit
CSS
• Allgemein:
– Mit <style...> ... </style> im HTML-Dateikopf
notiert man den Bereich für Stylesheet-
Formatdefinitionen.
– Im einleitenden <style>-Tag muss der Typ der
Stylesheet-Sprache angeben werden.
– Für CSS ist das die Angabe type="text/css".
– Zwischen dem einleitenden Tag und dem
abschließenden </style> können dann die
zentralen CSS-Formate definiert werden.
Dipl.-Ing. Heinrich Dornmayr MBA 130
Zentrale Formate definieren mit
CSS
– Damit ältere Web-Browser, die keine
Stylesheets kennen, den Inhalt des style-
Elements nicht irrtümlich als anzuzeigenden
Text interpretieren, kann man den Inhalt in
einen  HTML-Kommentar (<!-- ... -->)
einbinden, so wie im folgenden Beispiel.

Dipl.-Ing. Heinrich Dornmayr MBA 131


Formate zentral für eine HTML-
<html> Datei definieren
<head>
<title>Titel der Datei</title>
<style type="text/css">
<!--
h1 { color:red; font-size:36pt; }
-->
</style>
</head>
<body>
<h1>Dieses Format ist zentral formatiert!</h1>
</body>
</html>
Dipl.-Ing. Heinrich Dornmayr MBA 132
Individualformate definieren
• Solche Formate beginnen mit dem
Gatterzeichen #, gefolgt vom Namen.
• Über das Universalattribut id= können
diese Formate angesprochen werden.
• Ein HTML-Element, das diesen Namen als
Wertzuweisung an das id-Attribut benutzt,
bekommt dann die entsprechenden
Formate zugewiesen.

Dipl.-Ing. Heinrich Dornmayr MBA 133


Individualformate definieren
<html> Angabe im head-Bereich
<head>
<title>Titel der Datei</title> Einleitendes style-Attribut
<style type="text/css">
<!-- Definition mit # und Namen
#roterBereich
{color:red;font-size:18pt;font-style:italic;font-family:Arial;}
#blauerBereich
{color:blue;font-size:30pt;} Style-Angaben in
--> geschwungene
</style> Klammern, getrennt
</head> durch Strichpunkte.
Dipl.-Ing. Heinrich Dornmayr MBA 134
Individualformate definieren
Name als Wertzuweisung an das id-Attribut
<body>
<div id="roterBereich">Der rote Bereich</div>
<div id="blauerBereich">Der blaue Bereich</div>
</body>
</html>

Dipl.-Ing. Heinrich Dornmayr MBA 135


Formate zentral in separater CSS-
Datei definieren
• Im Dateikopf einer HTML-Datei referenziert man
mit <link...> eine CSS-Datei, die CSS-
Formatdefinitionen enthält.
• Innerhalb des <link>-Tags müssen die Angaben
rel="stylesheet" type="text/css" stehen (rel =
relation = Bezug).
• Mit Attribut href= gibt man die Datei an.
• Befindet sich die CSS-Datei in einem anderen
Verzeichnis => Pfadangaben!
• → Wie beim Einbinden von Grafiken.
Dipl.-Ing. Heinrich Dornmayr MBA 136
Formate zentral in separater CSS-
Datei definieren
• Bei der referenzierten Datei muss es sich
um eine reine Textdatei handeln, die die
Endung .css haben sollte.
• Die Datei darf nichts anderes als
Definitionen zentraler Formate und
Kommentare enthalten.
• Eine solche CSS-Datei können Sie mit
jedem einfachen Texteditor erstellen.
Dipl.-Ing. Heinrich Dornmayr MBA 137
Formate zentral in separater CSS-
Datei definieren
<html>
<head>
<title>Titel der Datei</title>

<link rel="stylesheet" type="text/css" href="formate.css">

</head>
<body>
</body>
</html>

Dipl.-Ing. Heinrich Dornmayr MBA 138


Beispiel für CSS-Datei
h1 {font-size:26px; margin-bottom:18px;}

h2 {font-size:21px; margin-bottom:18px;}

li {margin-top:3px;}

a:link {color:#AA5522; text-decoration:underline;}

a:visited {color:#772200; text-decoration:underline;}

a:active {color:#000000; text-decoration:none;}

Dipl.-Ing. Heinrich Dornmayr MBA 139


Reihenfolge von CSS-Formaten
1. Zuerst wird die CSS-Datei geladen,
wenn eine angegeben wurde. Diese
definiert einige HTML Elemente.
2. Gibt es eine allgemeine CSS-Definition
in der HTML Datei, so überschreibt diese
für die angegebenen HTML Elemente die
vorige Definition von 1.
3. Gibt es bei einem HTML Element eine
Definition überschreibt diese die vorige
Definition von 1 bzw. 2.
Dipl.-Ing. Heinrich Dornmayr MBA 140
Meta-Angaben
• Für Anweisungen an Web-Server, Web-Browser
und automatische Suchprogramme im Internet.
• Sie können Angaben zum Autor und zum Inhalt
der Datei enthalten.
• Sie können aber auch HTTP-Befehle absetzen,
zum Beispiel zum automatischen Weiterleiten des
Web-Browsers zu einer anderen Adresse.
• Meta-Angaben sind nicht für persönliche
Anmerkungen oder Kommentare zum Quelltext
der HTML-Datei gedacht.

Dipl.-Ing. Heinrich Dornmayr MBA 141


Meta-Angaben
• Für jede Meta-Angabe ist ein Meta-Tag im
HTML-Dateikopf anzugeben.
• Beispiel:

<meta name="description" content="Dieser


Beschreibungstext soll einem Anwender im
Suchdienst bei Auffinden dieser Datei erscheinen.">
<meta name="author" content="Rainer Wahnsinn">
<meta name="keywords" content="HTML">

Dipl.-Ing. Heinrich Dornmayr MBA 142


Meta-Angaben
• Automatische Weiterleitung zu anderer
Adresse (Forwarding):
<meta http-equiv="refresh" content="5;
URL=http://www.google.at/">

=> Die aktuelle Seite wird, nachdem sie


geladen ist, 5 Sekunden lang angezeigt.
Danach wird die Adresse aufgerufen, die
mit url=... angegeben ist.
Dipl.-Ing. Heinrich Dornmayr MBA 143
Frames - Grundlagen
• Mit Hilfe von Frames kann der Anzeigebereich des
Browsers in verschiedene, frei definierbare
Segmente aufgeteilt werden.
• Jedes Segment kann eigene Inhalte enthalten. Die
einzelnen Anzeigesegmente (also die Frames)
können wahlweise einen statischen Inhalt (= "non
scrolling regions") oder einen wechselnden Inhalt
haben.
• Frames sind ein Element, das die spezifischen
Eigenschaften der Bildschirmanzeige konsequent
nutzt. Frames eröffnen neue Möglichkeiten, um
Information hypertextuell (d.h. nicht-linear)
aufzubereiten.
Dipl.-Ing. Heinrich Dornmayr MBA 144
Frames - Grundlagen

2. Frame

1. Frame

3. Frame

Dipl.-Ing. Heinrich Dornmayr MBA 145


Frames - Grundlagen
• Um Frames zu definieren, brauchen Sie
eine spezielle HTML-Datei, in der ein
Frameset definiert wird.
• Das Frameset bestimmt die
Fensteraufteilung.
• Für eine solche Datei ist ein anderes
Grundgerüst erforderlich als das sonst
übliche Grundgerüst von HTML-Dateien.

Dipl.-Ing. Heinrich Dornmayr MBA 146


Frames - Grundgerüst
<html>
<head>
<title>
</title>
</head>
<frameset ...>
<frame ...>
<noframes>
</noframes>
</frameset>
</html>
Dipl.-Ing. Heinrich Dornmayr MBA 147
Frames - Grundgerüst
• Dateien mit Frameset-Definitionen
besitzen kein body-Element.
• Anstelle des body-Elements, also nach
dem abschließenden </head>-Tag für den
Dateikopf, werden die Frames definiert.
• Der Noframes-Bereich ist für Browser
gedacht, die keine Frames anzeigen
können.

Dipl.-Ing. Heinrich Dornmayr MBA 148


Frames - Beispiele

Fensterhöhe in %

<frameset rows="20%,80%">
<frame …>
<frame …>
</frameset>
Dipl.-Ing. Heinrich Dornmayr MBA 149
Frames - Beispiele

Breite in Pixel Breite ist Rest

<frameset cols="200,*">
<frame …>
<frame …>
</frameset> 150
Dipl.-Ing. Heinrich Dornmayr MBA
Frames - Beispiele
<frameset cols="40%,60%">
<frame …>
<frameset rows="20%,80%">
<frame …>
<frame …>
</frameset>
</frameset>

Dipl.-Ing. Heinrich Dornmayr MBA 151


Frames - Beispiele
<html>
<head>
<title>Text des Titels</title>
</head> Referenzname
Zieldatei
<frameset cols="250,*">
<frame src="verweise.htm" name="Navigation">
<frame src="startseite.htm" name="Daten">
<noframes>
Ihr Browser kann diese Seite leider nicht anzeigen!
</noframes>
</frameset>
</html>

Dipl.-Ing. Heinrich Dornmayr MBA 152


Frames - Beispiele
Datei verweise.htm für linkes Framefenster :
• <html>
• <body>
• <h1>Navigation</h1>
• <p>
• <a href="seite1.html" target="Daten">Punkt1</a><br>
• <a href="seite2.html" target="Daten">Punkt2</a>
• </p>
Navigation Daten
• </body>
• </html>
Seite 1 Seite 2

Dipl.-Ing. Heinrich Dornmayr MBA 153


Frames
• Ausschalten der Trennung mit
frameborder=0 bei Frameset!
• Fixes Fenster mit
noresize bei Frame (d.h. Anwender kann
die Fenstergröße nicht verändern)!
• Scrollbars an und ausschalten mit
scrolling="no" bzw scrolling="yes"
bei Frame!

Dipl.-Ing. Heinrich Dornmayr MBA 154


Frames
• Verweise bei Links mit Name des Frames
target=
• Auflösen der Frames mit
target="_parent"
• Im gleichen Frame-Fenster wie der Verweis mit
target="_self"
• Bei neuem Fenster im Browser mit
target="_blank"

Dipl.-Ing. Heinrich Dornmayr MBA 155


iFrame
• iFrame = inline Frame = Rahmen im Textfluss =
eingebetteten Frame
• Gehören seit HTML 4.0 zum HTML-Standard.
• Eigenständiges Gestaltungsmittel zur
Informationsaufbereitung, das anders funktioniert
als "normale" Frames.
• Erzeugen keine Aufteilung des Bildschirms,
sondern sind Bereiche, in denen fremde Quellen,
vor allem andere HTML-Dateien angezeigt werden
können.

Dipl.-Ing. Heinrich Dornmayr MBA 156


iFrame
<body>

<h1>Fenstergucker</h1>
<p>Gucken Sie mal GOOGLE im Fenster an:</p>

<iframe src="http://www.google.at" width="90%" height="400"


name=„GOOGLE_in_a_box">

<p>Ihr Browser kann leider keine eingebetteten Frames anzeigen: Sie


können die eingebettete Seite über den folgenden Verweis aufrufen:
<a href=" http://www.google.at ">GOOGLE</a></p>

</iframe>

</body>

Dipl.-Ing. Heinrich Dornmayr MBA 157


iFrame
• <iframe...> einleiten eines eingebetteten
Frames.
• Mit Attribut src= bestimmen der Quelle (eine
andere HTML-Datei oder eine beliebige
andere lokale oder entfernte Datenquelle )
• name= Name des Frames, notwendig um
Verweise zum IFRAME durchführen zu
können. Darf keine Leerzeichen,
Sonderzeichen oder deutsche Umlaute
enthalten.
Dipl.-Ing. Heinrich Dornmayr MBA 158
iFrame
• Dringend zu empfehlen ist das Bestimmen der
gewünschten Breite und Höhe des eingebetteten
Framefensters.
• Erlaubt sind dafür Pixelangaben oder
Prozentwerte, die sich auf die Größe des
verfügbaren Raums beziehen.
• Zwischen <iframe> und dem erforderlichen,
abschließenden </iframe> können Text und
andere Elemente notieren, die von Web-Browsern
angezeigt werden, die den eingebetteten Frame
nicht interpretieren.

Dipl.-Ing. Heinrich Dornmayr MBA 159


Eigenschaften von iFrame
• align="..." Richtet den Inlineframe gegen den
folgenden Text aus. Werte sind right und left.
Text umfließt den Inlineframe.
• scrolling="yes" bzw. scrolling="no" zum
erzwingen bzw. unterdrücken der Scrollbars.
• Mit frameborder="0" unterdrücken des
sichtbaren Außenrahmen des eingebetteten
Frames. frameborder="1" ist die
Voreinstellung.
Dipl.-Ing. Heinrich Dornmayr MBA 160
Verweise zu iFrame

<iframe src="startseite.html" name="Fensterlein" width="500"


height="400" align="right">
</iframe>

<p>
<a href="willkommen.html" target="Fensterlein"><b>andere
Seite</b></a><br>
<a href="startseite.html" target="Fensterlein"><b>erste
Seite</b></a>
</p>

Dipl.-Ing. Heinrich Dornmayr MBA 161


Verweise zu iFrame
• iFrame muß mit name= einen Namen
erhalten haben.
• Damit das Verweisziel in dem Frame
angezeigt wird, notieren Sie im
einleitenden Verweis-Tag zusätzlich die
Angabe target= mit dem Namen des
Frame-Fensters, als Verweisziel.

Dipl.-Ing. Heinrich Dornmayr MBA 162


Verweise zu beliebigen Dateien
• Es kann auf jede beliebige Datei ein
Verweis gesetzt werden.
• Es kann sich um Audio-Dateien, Tabellen-
kalkulations-Dateien, CAD-Dateien, Video-
Dateien, Grafikdateien, Textverarbeitungs-
Dateien, Programmdateien, Datenbank-
Dateien handeln, usw. handeln.
• Aus Sicht von HTML ist das kein Problem.

Dipl.-Ing. Heinrich Dornmayr MBA 163


Verweise zu beliebigen Dateien
• Das Problem besteht darin, was der Web-
Browser des Anwenders mit den Dateien
anfangen kann, bzw. wie er ihren Inhalt korrekt
anzeigen oder abspielen lassen kann.
– Wenn der Anwender ein Programm besitzt, das den
Dateityp verarbeiten kann, und dem Web-Browser ist
die Verknüpfung zwischen Dateien mit der Endung
des Verweisziels und einem Programm bekannt, das
solche Dateien verarbeitet, dann kann der Browser
das Programm starten.

Dipl.-Ing. Heinrich Dornmayr MBA 164


Verweise zu beliebigen Dateien
• Wenn das Betriebssystem, der Web-
Browser und das andere Programm den
dynamischen Datenaustausch zwischen
Programmen erlauben, kann das
Anzeigefenster des Fremdprogramms in das
Browser-Fenster eingebettet werden.
• Es gibt jedoch keine Möglichkeit, solche
Dinge in irgendeiner Weise als Web-Autor
zu beeinflussen!
Dipl.-Ing. Heinrich Dornmayr MBA 165
Download-Verweise
• Es gibt keine spezifische Notation in HTML,
um Dateien beim Anklicken zum
Downloaden anzubieten.
• Es gibt lediglich Dateitypen, die (fast) jeder
Web-Browser so interpretiert, dass er dem
Anwender anbietet, die Datei
downzuloaden.
• Das bekannteste Dateiformat dafür ist heute
das ZIP-Format (*.zip).
Dipl.-Ing. Heinrich Dornmayr MBA 166
Download-Verweise
– ZIP-Dateien sind Archivdateien, die mehrere
andere Dateien enthalten können, sogar
ganze Verzeichnisstrukturen.
– Die enthaltenen Dateien werden außerdem
komprimiert.
– Der Anwender muss die ZIP-Datei nach dem
Download mit einem geeigneten Programm
entpacken ("Unzip"-Programm).

Dipl.-Ing. Heinrich Dornmayr MBA 167


Image Maps
• = Verweis-sensitive Grafiken
• Grafiken, in denen der Anwender mit der
Maus auf ein Detail klicken kann.
Daraufhin wird ein Verweis ausgeführt.
• Anwender gelangt oft wesentlich intuitiver
und schneller zu Information als durch
lange verbale Verweislisten.

Dipl.-Ing. Heinrich Dornmayr MBA 168


Image Maps - Beispiel
• <map name="Landkarte">

• <area shape="rect" coords="11,10,59,29" href=„…“ alt=„…“>


• <area shape="rect" coords="42,36,96,57" href=„…“ alt=„…“>
• <area shape="rect" coords="42,59,78,80" href=„…“ alt=„…“>

• </map>

• <img src="karte.gif" width="345" height="312"


border="0" alt="Karte" usemap="#Landkarte">

Dipl.-Ing. Heinrich Dornmayr MBA 169


Image Maps
• Definition der verweis-sensitiven Flächen:
– <map name="[Name]">
– Name muss nichts mit dem Dateinamen der
Grafik zu tun haben. Ist nur Ankername.
• Das map-Element kann an einer
beliebigen Stelle innerhalb des Körpers
einer HTML-Datei (also zwischen <body>
und </body>) stehen.

Dipl.-Ing. Heinrich Dornmayr MBA 170


Image Maps
• Zwischen <map...> und </map> definieren
der verweis-sensitiven Flächen.
• Mit <area...> definieren der einzelnen
verweis-sensitiven Flächen.
• Mit shape=„…“ definieren der Form.
• Mit coords=„…“ Angabe der Koordinaten.
Die Pixelangaben bedeuten absolute Werte
innerhalb der Grafik. Ausgangspunkt ist die
linke obere Ecke des gesamten Bildes.

Dipl.-Ing. Heinrich Dornmayr MBA 171


Image Maps
• Arten von verweis-sensitiven Flächen:
– Viereck (shape=„rect“): Koordinaten für
x1,y1,x2,y2
• 1 = linke obere Ecke der Fläche
• 2 = rechte untere Ecke der fläche
– Kreis (shape=„circle“): Koordinaten für x,y,r
• x,y = Mittelpunkt
• r = Radius in Pixel
– Polygon (shape=„poly“): Koordinaten
x1,y1,x2,y2 ... xn,yn
• x,y = Pixel einer Ecke
Dipl.-Ing. Heinrich Dornmayr MBA 172
Image Maps
• Mit Attribut href=„…“ bestimmen des
Verweisziels.
• Mit alt-Attribut notieren eines
Alternativtextes für den Fall, dass die
verweis-sensitive Fläche nicht angezeigt
werden kann. Dieses Attribut ist ein
Pflichtattribut!

Dipl.-Ing. Heinrich Dornmayr MBA 173


Image Maps
• Grafik, die verweis-sensitive Flächen haben soll,
referenzieren mit Hilfe des <img>-Tags.
• Um Grafik als verweis-sensitiv zu kennzeichnen,
Attribut usemap=„…“ notieren.
• Dieses Attribut erwartet als Wertzuweisung einen
URI, der zu der Stelle führt, an der das zugehörige
map-Element notiert ist. Normalerweise ist dieses
Element in der gleichen Datei notiert. Deshalb
besteht die Zuweisung einfach in einem
Gatterzeichen # und dem Namen des Ankers, der
bei <map name=„…“> definiert wurde.

URI = Uniform Resource Identifier 174


Dipl.-Ing. Heinrich Dornmayr MBA
Image Maps
• Um Pixelkoordinaten einer Grafik zu erhalten →
Grafikprogramm benutzen → Pixelkoordinaten
des Mauszeigers.
• Um beim Überfahren einer verweis-sensitiven
Fläche mit der Maus ein kleines Fenster
("Tooltip"-Fenster) anzuzeigen, in den <area>-
Tags jeweils das Universalattribut title="Mein
angezeigter Text" verwenden. Dies wird
allerdings nicht von allen Browsern interpretiert.

Dipl.-Ing. Heinrich Dornmayr MBA 175


Lessons Learned
Lessons Learned
• Was ist eine Homepage?
– Eine Textdatei mit HTML-Code die auf einem
Server eines Internet-Providers gespeichert ist
und von einem Browser herunter geladen,
interpretiert und angezeigt wird.
• Wie wird eine Homepage erstellt?
– "Viele Wege führen nach Rom." Grundsätzlich
kann zwischen textorientierten und grafischen
Lösungen unterschieden werden.

Dipl.-Ing. Heinrich Dornmayr MBA 177


Anhang
Anhang
• Weitere Unterlagen:
– SELFHTML

– Homepage-Vorlagen
• von Heinrich Dornmayr
• von on-mouseover
• siehe auch SELFHTML

Dipl.-Ing. Heinrich Dornmayr MBA 179


Anhang
• Software: (Freeware-Programme für den privaten Gebrauch)
– Notepad2 (Texteditor mit Syntax-Highlighting)
– phase 5 (html-Editor)
– FileZilla Client (Up-/Downloaden von Dateien mittels FTP)
– Firefox (Browser)
– IrfanView (zur Betrachtung und Bearbeitung von Bildern)
– zeta producer (Content Management System)

Dipl.-Ing. Heinrich Dornmayr MBA 180

Das könnte Ihnen auch gefallen