Webdesign 2016/17 Dozentin: Karin Maier Teil 1: HTML Grundlagen
Werbung
Webdesign
2016/17
NaReM – 3.Semester
www.karinmaier.de/hfr
Karin Maier
Webdesign 3. Semester Dozentin: Karin Maier
1
HTML
Teil 1: HTML
Grundlagen
Dozentin: Karin Maier
www.karinmaier.de/hfr
Webdesign 3. Semester Dozentin: Karin Maier
Karin Maier
Einführung
1
Grundlagen
HTML – Hyper Text Markup Language
Jeder Webseite liegt
HTML-Quelltext, der
einsehbar ist
zu Grunde
www.unilog.integrata.
de
www.karinmaier.de/hfr
Webdesign 3. Semester Dozentin: Karin Maier
Folie 3
1
Einführung
1
Grundlagen
HTML - Der Sprachstandard für Webseiten
HTML – Hypertext Markup Language
XHTML – Extensible Hypertext Markup Language
www.unilog.integrata.
de
www.karinmaier.de/hfr
Webdesign 3. Semester Dozentin: Karin Maier
Folie 4
Einführung1
Grundlagen
Sprachentwicklung
XML
1998
1997
strict
HTML 4.01
XHTML 1.0
HTML 4.01
XHTML 1.0
strict
HTML 3.2
1999
XHTML 1.0
transitional
transitional
frameset
2009
XHTML 2.0
HTML 5.0
frameset
www.unilog.integrata.
2006
XHTML 2.0
2014
HTML 4.01
de
www.karinmaier.de/hfr
2000
XHTML 1.1
Folie 5
Webdesign 3. Semester Dozentin: Karin Maier
Einführung1
Grundlagen
Welche Browser unterstützen HTML5?
Score
Browsername
526
Chrome 44
467
Firefox 40
525
396
402
Opera 31
Safari 8.0
Internet Explorer (Edge)
Erläuterung: erreichte Punktzahl von 555 möglichen Punkten, bei
denen HTML5 Eigenschaften getestet wurden. (Stand: 09/2015)
Quelle: http://html5test.com/results/desktop.html
www.unilog.integrata.
de
www.karinmaier.de/hfr
Webdesign 3. Semester Dozentin: Karin Maier
Folie 6
2
Einführung
Grundlagen1
Bei der Seitenerstellung ist zu berücksichtigen:
Welche Browser-Software wird verwendet?
Welche Browser-Version ist im Einsatz?
Welche Auflösungen sind häufig?
Sollen Seiten oft ausgedruckt werden?
www.unilog.integrata.
de
www.karinmaier.de/hfr
Webdesign 3. Semester Dozentin: Karin Maier
HTML
Aufbau/Strukturierung
einer HTML-Datei
Folie 7
2
Dozentin: Karin Maier
www.karinmaier.de/hfr
Webdesign 3. Semester Dozentin: Karin Maier
Karin Maier
Aufbau
einer 2
HTML-Datei
Jede HTML5-Seite
besteht aus 3 Teilen:
<!doctype.....>
<head>....... </head>
<body>....... </body>
www.unilog.integrata.
de
www.karinmaier.de/hfr
Webdesign 3. Semester Dozentin: Karin Maier
Folie 9
3
Aufbau
einer2
HTML-Datei
Syntax
<Elementname....>
</Elementname....>
<....Attributname>
Attribute können beliebig innerhalb der
Klammer kombiniert werden
www.unilog.integrata.
de
www.karinmaier.de/hfr
Webdesign 3. Semester Dozentin: Karin Maier
Folie 10
Aufbau
einer2
HTML-Datei
Um einen validen HTML-Code zu erhalten, gelten
folgende Regeln:
In HTML nur Kleinbuchstaben verwenden
Elemente müssen sauber verschachtelt sein
Attributwerte müssen in Anführungszeichen gesetzt werden
Wird in XHTML programmiert:
• Jedes Element muss ein Schließelement haben
www.unilog.integrata.
de
www.karinmaier.de/hfr
Webdesign 3. Semester Dozentin: Karin Maier
Kopfdaten
Im Head-Bereich können stehen:
Tag-Name
Folie 11
Aufbau
einer2
HTML-Datei
Beschreibung
<title>
Beschreibt den Dokumententitel
<link>
Verbindung zwischen dem Dokument und externen
Resourcen
<base>
Spezifiziert den Seitenursprung
<style>
Definiert die Style-Informationen für CSS
<script>
Definiert ein clientseitiges Script
<meta>
www.unilog.integrata.
de
www.karinmaier.de/hfr
Beschreibt Metadaten des Dokumentes
Webdesign 3. Semester Dozentin: Karin Maier
Folie 12
4
Aufbau
einer2
HTML-Datei
Titel
Beispiel:
<head><title>Webdesign Vorlesung HFR Rottenburg</title></head>
Der Titel taucht an folgenden Stellen auf:
in der Titelzeile des Browser-Anzeigefensters
in den Tabs
beim Setzen von Lesezeichen
in der Liste der bereits besuchten Seiten
bei vielen automatischen Suchprogrammen als wichtige Anzeige bei
Suchtreffern
www.unilog.integrata.
de
www.karinmaier.de/hfr
Webdesign 3. Semester Dozentin: Karin Maier
Aufbau
einer2
HTML-Datei
Titel
www.unilog.integrata.
de
www.karinmaier.de/hfr
Folie 13
Webdesign 3. Semester Dozentin: Karin Maier
Folie 14
Aufbau
einer2
HTML-Datei
Kommentare
Einzeilige und mehrzeilige Kommentare:
Beispiel:
<!-- mit h1 werden Überschriften definiert -->
Kommentare werden zur besseren Lesbarkeit des
HTML-Codes erstellt, zum dokumentieren und erläutern.
www.unilog.integrata.
de
www.karinmaier.de/hfr
Webdesign 3. Semester Dozentin: Karin Maier
Folie 15
5
Aufbau
einer2
HTML-Datei
HTML5
Elemente
www.unilog.integrata.
de
www.karinmaier.de/hfr
Webdesign 3. Semester Dozentin: Karin Maier
Folie 16
Aufbau
einer2
HTML-Datei
HTML5
Elemente
Formulare
Dokumente
Tabellen
www.unilog.integrata.
de
www.karinmaier.de/hfr
HTML5
Elemente
www.unilog.integrata.
de
www.karinmaier.de/hfr
Webdesign 3. Semester Dozentin: Karin Maier
Folie 17
Aufbau
einer2
HTML-Datei
Tags zum Einbinden von Dateien
Webdesign 3. Semester Dozentin: Karin Maier
Folie 18
6
Aufbau
einer2
HTML-Datei
Seitenstruktur
Semantische Divs
Semantische Divs dienen dazu, der Suchmaschine zu sagen, was die
Funktion eines bestimmten Abschnittes ist. Die neuen Elemente sind:
Header
Footer
Section
Article
Aside (Seitenspalte, Zitate)
Nav
www.unilog.integrata.
de
www.karinmaier.de/hfr
Webdesign 3. Semester Dozentin: Karin Maier
HTML
Textformatierungen
Folie 19
3
Dozentin: Karin Maier
www.karinmaier.de/hfr
Webdesign 3. Semester Dozentin: Karin Maier
Karin Maier
Text3
formatierungen
Vorformatierte Überschriften
Headings (h1..) werden zum Formatieren
von Überschriften verwendet.
Es sind Werte von 1-6 möglich.
Beispiel:
<h1> text </h1>
www.unilog.integrata.
de
www.karinmaier.de/hfr
Webdesign 3. Semester Dozentin: Karin Maier
Folie 21
7
Textformatierungen
Zeilenumbrüche/Absätze
Absatzformatierung mit p=paragraph
<p>hier entsteht ein Absatz</p>
Einfacher Umbruch mit br (break)
Beispiel:
1. Zeile <br>
2. Zeile
www.unilog.integrata.
de
www.karinmaier.de/hfr
Webdesign 3. Semester Dozentin: Karin Maier
Folie 22
Text3
formatierungen
Veraltete Schriftformatierung
Mit font-Element: <font ......> text </font>
Kombiniert mit Attributen:
–size (Schriftgröße)
–color (Schriftfarbe)
–face (Schriftart)
Beispiel: <font size= “3“ color = “red“> text </font>
Nicht mehr erlaubt in HTML5!!!
www.unilog.integrata.
de
www.karinmaier.de/hfr
Webdesign 3. Semester Dozentin: Karin Maier
Folie 23
Textformatierungen
Weitere Formatierungsmöglichkeiten (nicht
vollständig)
<em></em>
betont
<b></b>
Fett
<code></code>
<i></i>
<sub></sub>
<sup></sup>
<small></small>
www.unilog.integrata.
de
www.karinmaier.de/hfr
Kennzeichnet Code
Kursiv
tiefgestellt
hochgestellt
Kleiner Font
Webdesign 3. Semester Dozentin: Karin Maier
Folie 24
8
Textformatierungen
Weitere Formatierungsmöglichkeiten
Beispiel:
<b>Chemische Formeln </b> <br />
H<sub>2</sub>O = Wasser
www.unilog.integrata.
de
www.karinmaier.de/hfr
Webdesign 3. Semester Dozentin: Karin Maier
Folie 25
Textformatierungen
Listen
Listen ohne Zählung (Unordered Lists)
<ul>….</ul>
<ul>
<li>Kaffee</li>
<li>Tee</li>
<li>Milch</li>
</ul>
www.unilog.integrata.
de
www.karinmaier.de/hfr
•
Kaffee
•
Milch
•
Tee
Webdesign 3. Semester Dozentin: Karin Maier
Folie 26
Textformatierungen
Listen
Listen mit Zählung (Ordered Lists)
<ol>…</ol>
<ol>
<li>Kaffee</li>
<li>Tee</li>
<li>Milch</li>
</ol>
www.unilog.integrata.
de
www.karinmaier.de/hfr
1. Kaffee
2. Tee
3. Milch
Webdesign 3. Semester Dozentin: Karin Maier
Folie 27
9
Hyperlinks4
Der Hyperlink
www.unilog.integrata.
de
www.karinmaier.de/hfr
Webdesign 3. Semester Dozentin: Karin Maier
Folie 28
Hyperlinks4
Der Hyperlink
absoluter Link
<a href=“http://www.hs-rottenburg.de/ “>..</a>
relativer Link
<a href=“../forstwirtschaft.html“>..</a>
interner Link
<a href=“#seitenende“>..</a>
www.unilog.integrata.
de
www.karinmaier.de/hfr
Webdesign 3. Semester Dozentin: Karin Maier
Folie 29
Hyperlinks4
Der Hyperlink
http://www.hs-rottenburg.de/bioenergie/index.html
Datei (Name und Typ)
Protokoll
Domainname
www.unilog.integrata.
de
www.karinmaier.de/hfr
Genauer Verzeichnispfad
Webdesign 3. Semester Dozentin: Karin Maier
Folie 30
10
Hyperlinks4
Der Hyperlink
Spezifische Attribute
Attribute
href
Wert
URL
media
media_query
rel
Alternate, author, bookmark, help,
license, next, nofollow, noreferrer,
prefetch, prev
search, tag
hreflang
language_code
_blank _parent
framename
target
type
_self
_top
MIME_type
www.unilog.integrata.
de
www.karinmaier.de/hfr
Beschreibung
Legt die Seite fest, zu der der Link führt
Legt die Sprache des verlinkten
Dokumentes fest
Spezifiziert für welchen Medium der Link
optimiert ist.
Spezifiziert die Beziehung zwischen dem
bestehenden und dem verlinkten Dokument
Legt fest, wo das Dokument geöffnet
werden soll
Spezifiziert den MIME-Type
Webdesign 3. Semester Dozentin: Karin Maier
Folie 31
Hyperlinks4
Der interne Link
Verweisziel markieren:
<a id="ziel"> Hier ist das Verweisziel </a>
Verweis zum markierten Ziel:
<a href="#ziel">zum Verweis</a>
www.unilog.integrata.
de
www.karinmaier.de/hfr
Webdesign 3. Semester Dozentin: Karin Maier
Folie 32
Hyperlinks4
Der Hyperlink
Gestaltung mit CSS
<style type="text/css">
a:link { text-decoration:none; color:#e00000; }
a:visited { text-decoration:none; color:#800000; }
a:hover { text-decoration:none; color:#ff0; }
a:active { text-decoration:none; color:#cff; }
a:focus { text-decoration:none; color:#080; }
</style>
www.unilog.integrata.
de
www.karinmaier.de/hfr
Webdesign 3. Semester Dozentin: Karin Maier
Folie 33
11
4
HTML
Grafiken
Dozentin: Karin Maier
www.karinmaier.de/hfr
Webdesign 3. Semester Dozentin: Karin Maier
Karin Maier
Grafiken5
Grafik einbinden
<img src=“bild.gif“...>
<img src=“bild.jpg“...> Verweis auf Bildquelle
Bildquelle kann absolut oder relativ angegeben werden.
<img src=“http://www.hs-rottenburg.de/images/bild.jpg“>
www.unilog.integrata.
de
www.karinmaier.de/hfr
Webdesign 3. Semester Dozentin: Karin Maier
Folie 35
Grafiken5
Bildattribute
Beispiel:
<img src=“logo.gif“ alt=„Firmenlogo“> Alternativer Text
Weitere Attribute:
alt
Alternativer Text
width
Breite des Bildes
height
Höhe des Bildes
www.unilog.integrata.
de
www.karinmaier.de/hfr
Webdesign 3. Semester Dozentin: Karin Maier
Folie 36
12
Grafiken5
Standardisierte Grafikformate
JPG – Joint Expert Picture Group
GIF - Graphic Interchange Format
PNG - Portable Network Graphics
SVG - Scalable Vector Graphics
www.unilog.integrata.
de
www.karinmaier.de/hfr
Webdesign 3. Semester Dozentin: Karin Maier
Folie 37
Grafiken5
Unterschied Bitmap-Vektorgrafik
Bitmap:
Besteht aus einzelnen Punkten
Bearbeitung von Bildpunkten
Spezialeffekte möglich
Auflösung wird durch Einstellung bestimmt
Besteht aus Objekten
Jedem Objekt sind Eigenschaften zugeordnet
Ein Objekt=eine Einheit
Auflösung wird durch Ausgabegerät bestimmt
Vektorgrafik:
www.unilog.integrata.
de
www.karinmaier.de/hfr
Webdesign 3. Semester Dozentin: Karin Maier
Folie 38
Grafiken5
Unterschied in der Dateigröße: gif-jpg
jpg: 90kb
gif: 40kb
www.unilog.integrata.
de
www.karinmaier.de/hfr
jpg: 27kb
gif: 118kb
Folie 39
13
Grafiken5
SVG
Skalierbare Vektorgrafik
Offener Standard, durch W3C
Basiert auf XML
Beispiel:
<svg>
<desc>Ein Rechteck</desc>
<rect width=200 height=100 />
</svg>
www.unilog.integrata.
de
www.karinmaier.de/hfr
Webdesign 3. Semester Dozentin: Karin Maier
Folie 40
Grafiken5
Imagemaps
Ermöglicht anklicken auf ein Detail und damit
Sprung auf neue Seite
Reiner HTML-Code
Beispiel:
<map name="karte">
<area shape=rect coords="60,0,147,11"
href=http://www.stuttgart.de>
</map>
www.unilog.integrata.
de
www.karinmaier.de/hfr
Webdesign 3. Semester Dozentin: Karin Maier
Folie 41
Grafiken5
Imagemaps
Bereiche können mit den Attributen
- rect
- circle
- poly
festgelegt werden.
Mit coords werden die Koordinaten des Bereichs
definiert und mit href die Sprungmarke festgelegt.
www.unilog.integrata.
de
www.karinmaier.de/hfr
Webdesign 3. Semester Dozentin: Karin Maier
Folie 42
14
Grafiken5
Multimedia einbinden
<audio>
<source>
<track>
<video>
www.unilog.integrata.
de
www.karinmaier.de/hfr
Definiert Sound Inhalt
(im Moment standardisiert: mp3, wav, ogg)
Definiert unterschiedliche Medien-Quellen für Media-Elemente
(<video> und <audio>)
Für Text-Spuren, die Media-Elemente begleiten – z.B. Untertitel
Für Video und Film-Verweise (mp4, webM, ogg)
Webdesign 3. Semester Dozentin: Karin Maier
Folie 43
Grafiken5
Neues Element: canvas
<canvas>
Um Grafiken direkt am Bildschirm zu zeichnen
Realisiert durch JavaScript
Attribute: height und width mit Pixelangabe. Definiert die Größe
des Zeichenfeldes
www.unilog.integrata.
de
www.karinmaier.de/hfr
Webdesign 3. Semester Dozentin: Karin Maier
Folie 44
5
HTML
Tabellen
Dozentin: Karin Maier
www.karinmaier.de/hfr
Webdesign 3. Semester Dozentin: Karin Maier
Karin Maier
15
Tabellen6
Reihenanfang
(table row)
(
Reihenanfang
Tabelleninhalt (table data)
Reihenende
Reihenende
Tabellenende
<table>
<tr><td></td><td></td> </tr>
<tr><td></td><td></td></tr>
</table>
www.unilog.integrata.
de
www.karinmaier.de/hfr
Webdesign 3. Semester Dozentin: Karin Maier
Folie 46
Tabellen6
Tabellengestaltung
<table border= „1">
Rahmenbreite in px
Hier existiert in HTML5 nur noch 1 und „“
Zur Strukturierung:
<caption> Tabellenüberschrift
<colgroup> <col> Hier können Spalten zusammengefasst werden
<thead> Tabellenkopf
<tfoot> Tabellenfuß
<tbody> Hauptteil der Tabelle
www.unilog.integrata.
de
www.karinmaier.de/hfr
Webdesign 3. Semester Dozentin: Karin Maier
Folie 47
Tabellen6
Zellen verbinden
colspan
<td colspan="3"> inhalt </td>
www.unilog.integrata.
de
www.karinmaier.de/hfr
Webdesign 3. Semester Dozentin: Karin Maier
Folie 48
16
Tabellen
Zellen verbinden
rowspan
<tr><td rowspan="3"> inhalt </td>
<td>inhalt 2. Spalte
</td>
www.unilog.integrata.
de
www.karinmaier.de/hfr
</tr>
Folie 49
Webdesign 3. Semester Dozentin: Karin Maier
HTML
CSS-Cascading Style Sheets
6
6
Dozentin: Karin Maier
www.karinmaier.de/hfr
Webdesign 3. Semester Dozentin: Karin Maier
Karin Maier
Cascading
Style Sheets7
- CSS
Eigenschaften:
Sehr viele Formatierungsmöglichkeiten
Bei großen Projekten sehr effektives Arbeiten
möglich
Gut geeignet fürs Intranet
Unterschiedliche Browser-Ergebnisse
Momentaner Standard: CSS3 (Stand 10/2013)
www.unilog.integrata.
de
www.karinmaier.de/hfr
Webdesign 3. Semester Dozentin: Karin Maier
Folie 51
17
Cascading
Style Sheets7
- CSS
Syntax:
H1 { font-size: 20px}
Selektor { Eigenschaft: Wert}
www.unilog.integrata.
de
www.karinmaier.de/hfr
Webdesign 3. Semester Dozentin: Karin Maier
Folie 52
Cascading
Style Sheets7
- CSS
Regeln/Möglichkeiten
Verknüpfung mehrerer Selektoren möglich
h1, h2, td {font-size: 20px}
Verknüpfung mehrerer Eigenschaften möglich
h1 {font-size: 20px; color: yellow}
www.unilog.integrata.
de
www.karinmaier.de/hfr
Webdesign 3. Semester Dozentin: Karin Maier
Folie 53
Cascading
Style Sheets7
- CSS
Formatierungsmöglichkeiten
Direkt vor dem zu formatierenden Text
Beispiel:
<h1 style=“color:yellow“>text</h1>
www.unilog.integrata.
de
www.karinmaier.de/hfr
Webdesign 3. Semester Dozentin: Karin Maier
Folie 54
18
Cascading
Style Sheets7
- CSS
Formatierungsmöglichkeiten
Im Header, gültig für aktuelles Dokument
Beispiel:
<head>
<style type=“text/css“>
h1{color:yellow}
</style>
</head>
www.unilog.integrata.
de
www.karinmaier.de/hfr
Webdesign 3. Semester Dozentin: Karin Maier
Folie 55
Cascading
Style Sheets7
- CSS
Formatierungsmöglichkeiten
In externer Datei; gültig für alle darauf verweisende Dokumente
Beispiel:
<link rel=„stylesheet“ type=“text/css“ href=„vorlage.css“>
</link>
www.unilog.integrata.
de
www.karinmaier.de/hfr
Webdesign 3. Semester Dozentin: Karin Maier
Pseudoklassen
Folie 56
Cascading
Style Sheets7
- CSS
Klassifizierungen, die einen Zustand oder eine Eigenschaft eines
Elements beschreiben.
Sie werden an den Elementnamen angehängt.
:link - Unbesuchter Link
:visited - Besuchter Link
:active - Aktiver Link
Beispiel:
a:visited {color: yellow; text-decoration: none}
www.unilog.integrata.
de
www.karinmaier.de/hfr
Webdesign 3. Semester Dozentin: Karin Maier
Folie 57
19
Cascading
Style Sheets7
- CSS
Weitere Klassen
Selektoren können selbst definiert werden. Sie müssen dann
über ein Klasse-Attribut aufgerufen werden.
Beispiel:
.überschrift {font-size:14pt;color: darkblue}
Im Body:
<div class=“überschrift“>....</div> oder
<h1 class=“überschirft“>....</h1>
www.unilog.integrata.
de
www.karinmaier.de/hfr
Webdesign 3. Semester Dozentin: Karin Maier
Folie 58
Cascading
Style Sheets7
- CSS
Maße und Einheiten
Längen
In = Inch
cm = Zentimeter
mm = Millimeter
pt = Punkt (1pt=0,3527... mm)
pc = Pica (pc = 12 pt)
em = Schriftgröße (1 em = 100% Schriftgröße)
px = Pixel
www.unilog.integrata.
de
www.karinmaier.de/hfr
Webdesign 3. Semester Dozentin: Karin Maier
Folie 59
Cascading
Style Sheets7
- CSS
Farben
Farbname = Name der Farbe (yellow)
Farbwert = RGB-Wert der Farbe hexadezimal mit # (#FF0044)
RGB-Zahlenwert = RGB-Wert der Farbe als Zahl von 0 bis 255
(rgb(255,255,0))
RGB-Prozentwert = RGB-Wert der Farbe als Prozentzahl
(rgb(10%,20%,30%) )
www.unilog.integrata.
de
www.karinmaier.de/hfr
Webdesign 3. Semester Dozentin: Karin Maier
Folie 60
20
Cascading
Style Sheets7
- CSS
Schriftgestaltung
font-family – Schriftart
font-size – Schriftgröße
font-style – Schriftstil
font-variant – Schriftveränderung
font-weight – Schriftgewichtung
font-size-adjust - Einstellung der Schriftgröße
font-stretch - Schriftstreckung
Beispiel:
H1{font-color: yellow; font-family: verdana}
www.unilog.integrata.
de
www.karinmaier.de/hfr
Webdesign 3. Semester Dozentin: Karin Maier
Textgestaltung
Folie 61
Cascading
Style Sheets7
- CSS
letter-spacing - Buchstabenabstand
line-height - Zeilenhöhe
text-align - Horizontale Textausrichtung
text-decoration - Textdekoration
text-indent - Einrücken der ersten Zeile
text-transform - Textveränderung
vertical-align - Vertikale Textausrichtung
word-spacing - Wortabstand
Beispiel:
H1{letter-spacing:2px; text-align:center}
www.unilog.integrata.
de
www.karinmaier.de/hfr
Webdesign 3. Semester Dozentin: Karin Maier
Folie 62
Cascading
Style Sheets7
- CSS
Farbe und Hintergrundgestaltung
color – Schriftfarbe
background-attachment - Einpassung des
Hintergrundbildes
background-color - Hintergrundfarbe
background-image – Hintergrundbild
background-position - Position des Hintergrundbildes
background-repeat - Wiederholung des Hintergrundes
background - allgemeine Hintergrundangaben
Beispiel: img{background-image:url(‘bild.jpg‘);
background-repeat: no-repeat;
background-position:center}
www.unilog.integrata.
de
www.karinmaier.de/hfr
Webdesign 3. Semester Dozentin: Karin Maier
Folie 63
21
Cascading
Style Sheets7
- CSS
Positionierung
absolute - Absolute Positionierung
fixed - Fixierte Positionierung
relative - Relative Positionierung
static - Statische Positionierung
Beispiel: H1 { position:absolute; left:20px; top:30px;}
www.unilog.integrata.
de
www.karinmaier.de/hfr
Webdesign 3. Semester Dozentin: Karin Maier
Folie 64
22
