In Sammlung (en) In der gespeicherten
  1. Ingenieurwissenschaft
  2. Webdesign

HTML und CSS - DM Kommunikation

Werbung 
HTML und CSS
Daniel Beuter
Mannheimer Abendakademie, 7. Dezember 2012
Copyright: D. Beuter
Seminar-Inhalte
 Grundlagen Internet/Browser
 HTML
 Grundstruktur
 Document Type Definition
 Tags
 CSS




Einbindung
Selektoren
Klassen
Formatierungen
Ablauf Heute
 Seminar 13:00 Uhr bis 15:00 Uhr
 PAUSE 15:00 Uhr bis 15:15 Uhr
 Seminar 15:15 Uhr bis ca. 16:45 Uhr
Grundlagen Internet – Datenfluss
Server
- Bereitstellung
von
Informationen
PC/Laptop
Internet
- Datenaustausch
- Domainverwaltung
- Abruf von Daten
- Interpretation
- Darstellung
Grundlagen Internet – Darstellung einer
Internetseite
1. Datenabruf einer Internetseite
(z.B. www.dmkommunikation.de)
PC/Laptop
- Abruf von Daten
- Interpretation
- Darstellung
2. Interpretation durch einen Browser
(z.B. Firefox, Internet Explorer, Google
Chrome)
3. Darstellung auf dem Bildschirm
Was leistet der Browser?
 Interpretiert HTML und CSS
 Erstellt aus Fließtext eine übersichtliche Darstellung
Was leistet der Browser? - Einschränkungen
 ACHTUNG!
 Standards sind nicht durchgehend umgesetzt
 Jeder Browser hat seine Besonderheiten
 Vor allem im Bereich CSS ist Vorsicht geboten
Firefox/Chrome
Internet Explorer
Was ist HTML
 HTML -> Hyper Text Markup Language
 Die Hypertext Markup Language (HTML;
deutsch Hypertext-Auszeichnungssprache) ist eine
textbasierte Auszeichnungssprache zur Strukturierung von
Inhalten wie Texten, Bildern und Hyperlinks in
Dokumenten.
 Quelle:
http://de.wikipedia.org/wiki/Hypertext_Markup_Language
Wie programmiert man eine Internetseite?
 Man benötigt lediglich einen Text-Editor
 Auf jedem System vorhanden
 Beispiel
HTML - Grundlagen
 HTML besteht aus Tags:
 <b>gefetteter Text</b>
 Tags können verschachtelt werden
 <b><i>gefetteter und kursiver Text</i></b>
 Verschachtelung muss immer in der richtigen Reihenfolge
geschehen.
 Was zuletzt geöffnet wurde, muss zuerst geschlossen
werden
 <b>fetter, <i>kursiver</i></b> Text
 <b>fetter, <i>kursiver</b></i> Text
Verschiedene Tags
 Quelltextstruktur
 <html>,<head>,<body> etc
 Tags zur Textformatierung
 <b>,<i>,<strong> etc
 Layout-Tags
 <table>
 <ol>,<ul>
 Meta-Tags
 <meta name=“abc“ content=“test“ />
Quelltextstruktur
 Jede Seite besteht mindestens aus diesen Teilen
Bereiche eines HTML-Quelltextes
 <head> bietet Platz für
 Allgemeine Informationen wie Sprache, Autor, Lizenz, Inhalt,
Zusammenfassung
 Titel der Seite
 Importieren von externen Dateien (CSS und JavaScript)
 <body> bietet Platz für
 den Inhalt der Seite
Document Type Definition
 Wichtiges Detail, DTD steht vor dem öffnenden HTML-Tag
 DTD gibt an, mit welcher Syntax das Dokument erstellt
wurde
 Standards werden vom W3C herausgegeben und verwaltet


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 Transitional sollte gewählt werden
 Strict ist sehr „hart“ mit Fehlern
Welche Formatierungen werden benötigt?












Fett
Farbig
Kursiv
tiefgestellt/hochgestellt
andere Schriftart
Ausrichtung
Schriftgröße
Tabellen
Absatz
Überschrift
Bilder
Umbruch
Überschriften




werden mit <h1> bis <h6> gekennzeichnet
<h1> sollte nur einmal pro Seite vorkommen
<h1> ist Überschrift der obersten Ebene
<h6> ist Überschrift der untersten Ebene
 Überschriften nicht für Textformatierung verwenden, da
für Strukturierung der Seite vorgesehen
Beispiel Überschriften
Abschnitt
 Abschnitte werden mit <p> für „Paragraph“ eingeleitet und
geschlossen
 Automatischer Zeilenumbruch zwischen Abschnitten
 Leerzeichen und Zeilenumbrüche werden im HTMLQuelltext ignoriert
Abschnitt: Beispiel
Abschnitt: Beispiel
Textausrichtung im Absatz
 Mit dem Schlüsselwort align
 align=“center“ – mittig
 align=“right“ - rechts
 align=“left“ - links
Einfacher Umbruch
 <br/>
 eines der wenigen Elemente, die ohne ein End-Tag
auskommen
Trennlinie
 <hr/>
 auch ohne Endtag
 Erzeugt eine Trennlinie über die gesamte Breite
Schriftformatierung
 <font>
 Wird genutzt, um Schriftgröße, Farbe und Schriftart
festzulegen
 Textfarbe kann per Name oder per Hex-Code angegeben
werden
 Schriftarten mit Vorsicht einsetzen
color=green
align=center
Schriftformatierung
Kursiv, Fett, Unterstrichen, Durchgestrichen, Hoch
und Tief
 Für oft benötigte Elemente gibt es kurze Schreibweisen
Listen
 es gibt sortierte und unsortierte Listen
 sortierte Listen haben eine Nummerierung
 1,2,3 (Standard)
 a,b,c
 I,II,III
 unsortierte Listen haben Aufzählungszeichen
 square (Quadrat)
 circle (nicht ausgefüllter Kreis)
 disc (ausgefüllter Kreis, Scheibe)
Listen
 Einleitung der Liste mittels <ul> oder <ol>
 <ul> unsorted list – unsortierte Liste
 <ol> ordered list – sortierte Liste
 Listeneinträge mit <li>
 Listen können verschachtelt werden, so können
Hierarchien abgebildet werden.
Listen - Beispiele
Listen – Beispiele
Listen - Beispiele
Listen
 Bei nummerierten Listen kann der Wert des aktuellen
Eintrags angegeben werden.
 <li value=“8“>Eintrag mit Nummer 8</li>
 Arten von nummerierten Listen:
 <ol type=“a“>
 a,b,c
 <ol type=“A“>
 A,B,C
 <ol type=“I“> (großes i)
 I,II,III
 <ol type=“i“>
 i,ii,iii
Listen
 Arten von unsortierten Listen
 <ul type=“disc“>
 Ausgefüllter Kreis (Standard)
 <ul type=“circle“>
 Hohler Kreis, Ring
 <ul type=“square“>
 Quadrat
Tabellen
 Tabellen werden über das Tag <table> eingeleitet
 Zeilen einer Tabelle werden mit <tr></tr> definiert
 Zellen in einer Zeile werden mit <td></td> definiert
Tabellen – Einfaches Beispiel
Tabellen – Einfaches Beispiel
Tabelle - Header
 Eine Tabelle hat meist eine Überschrift
 Diese wird mittels <th></th> für „Table Header“ definiert
Tabelle – Header – Beispiel
Tabelle aufteilen
 Eine Tabelle kann in 3 Bereiche gegliedert werden
 thead – Der Kopf der Tabelle
 tfoot – Der Fuß der Tabelle
 tbody – Der Inhaltsbereich einer Tabelle
 Diese Reihenfolge ist einzuhalten
 einzelne Elemente können ausgelassen werden
 Werden keine Bereiche definiert, wird alles als tbody
interpretiert (Beispiel von vorhin)
Tabelle aufteilen - Beispiel
Tabelle - Formatierungsoptionen




Eine Tabelle kann formatiert werden
Gitternetzlinien: border=“1“
Innenabstand: cellpadding=“5“
Aussenabstand: cellspacing=“8“
 Die Angaben werden als Pixel interpretiert.
Gitternetz in der Tabelle
 Gitternetz wird mit border=“1“ eingeschaltet
 Standard: Alle Gitternetzlinien werden angezeigt
 Schlüsselwort: rules




none – Keine Gitternetzlinien
rows – Nur die Zeilen sind abgetrennt
cols – Nur die Spalten sind abgetrennt
groups – Die Gruppen (head,foot, body) sind voneinander
getrennt
 all – Alle Gitternetzlinien werden angezeigt
Gitternetz – Beispiel
Aussenrahmen
 Außenrahmen kann auch definiert werden.
 Schlüsselwort: frame







void – kein Rahmen
above – nur oben ein Rahmen
below – nur unten ein Rahmen
lhs – left hand side – nur links ein Rahmen
rhs – right hand side – nur rechts ein Rahmen
hsides – horizontal sides – nur oben und unten
vsides – vertical sides – nur rechts und links
Außenrahmen
Spalten definieren





Spalten werden über Colgroups definiert
direkt nach dem Begin der Tabelle
vor dem ersten Inhalt, also vor thead
Können absolut definiert werden (in Pixeln)
Können in % angegeben werden
Spalten definieren
Bilder
 Werden mit dem Tag <img> eingebunden
 benötigen kein Endtag
 Schlüsselwort src um Bilddatei zu laden
Bilder - Beispiel
Bilder – Optionen
 Bilder können formatiert werden
 Rahmen ums Bild mit border=“1“
 Größe kann festgelegt werden
 width=“200px“ – Festlegen der Breite
 height=“180px“ – Festlegen der Höhe
 Man kann auch beides festlegen, hier ist jedoch Vorsicht
geboten, sonst:
Links, Anker
 Links und Anker werden über das Tag <a> definiert
 Ankerpunkte werden innerhalb eines Dokumentes gesetzt,
um an eine definierte Stelle des Dokumentes zu springen
 Sinnvoll bei sehr langen Text-Seiten, Glosar
 Links werden genutzt, um Ankerpunkte oder andere Seiten
zu verlinken
Links - Beispiel
Ankerpunkt setzen




<a name=“seitenanfang“>
Kann in einem Link direkt angesprungen werden
Seitenintern und Seitenextern
Zum Anspringen eines Ankerpunktes wird # verwendet
DIV/Span
 DIV (diverse) und Span werden verwendet, um den Inhalt
zu strukturieren
 DIV ist Blockelement
 Umbruch, falls nicht anders definiert
 Span ist Inline-Element
 kein Umbruch
 Können Style-Informationen aufnehmen, ähnlich wie
<font>
Meta-Tags
 Es gibt diverse Meta-Tags
 werden verwendet, um Informationen über die Seite
anzugeben
 Beispiele sind:





Schlüsselwörter
Beschreibung des Inhalts
Nennung des Autors
Nennung des Copyright
Codierung der Seite
Meta-Tags
 Meta-Tags waren für Suchmaschinen sehr relevant
 mittlerweile nur noch für Yahoo interessant, Google
verwendet sie kaum
 Aufbau
Meta-Tags
 Keywords
 Stichwortartige Beschreibung des Seiteninhalts
 Getrennt durch Komma
 Description
 Fließtext, sollte nicht mehr als 180 Zeichen haben
 aber auch nicht zu kurz
 robots
 wird von Suchmaschinen ausgewertet, um festzulegen, ob
die Seite indexiert werden soll
 Optionen: index vs. no-index
follow vs. no-follow
Meta-Tags
 Ein sehr wichtiges Meta-Tag ist die Angabe der
Zeichenkodierung
 Fehlendes Meta-Tag kann unleserliche Zeichen zur Folge
haben
Umlaute kodieren
 ä -> ä
 Ä -> Ä
 ß -> ß
HTML und CSS
 Heute




CSS als Auszeichnungssprache
Formen der Einbindung
Selektoren
Regeln für die Gestalltung
CSS – Cascading Style Sheets
 Grundidee beim Entwurf von CSS war es, mittels HTML
oder XML nur die inhaltliche Untergliederung eines
Dokumentes und die Bedeutung seiner Teile zu
beschreiben, während mittels CSS weitgehend unabhängig
davon die konkrete Darstellung (Farben, Layout,
Schrifteigenschaften usw.) der Teile festgelegt wird.
Wie kann man CSS einbinden?
 Möglichkeiten der Einbindung von CSS
 Inline
 Style-Blöcke
 Separate Datei
Inline-CSS
 Die einfachste Möglichkeit, CSS einzusetzen
 Schlüsselwort: style
Vorteile/Nachteile Inline-CSS
 Vorteile
 sehr einfach umzusetzen
 Style ist immer direkt am Element
 keine komplizierten Konstrukte
 Nachteile
 Jedes Element muss für sich definiert werden
 keine Wiederverwertbarkeit
 uneinheitlich
Inline Style-Blöcke
 Werden direkt in der HTML-Datei geschrieben
Vorteile/Nachteile Style-Blöcke
 Vorteile
 Alle Design-Informationen an einer Stelle
 Regeln können wiederverwendet werden
 „volle Kraft“ von CSS kann genutzt werden
 Nachteile
 nur für eine Seite gültig
 zwischen den Seiten nach wie vor kein Standard
 „geht unter“ zwischen HTML-Code
CSS in eigene Datei auslagern
 CSS-Regeln können in einer eigenen Datei ausgelagert
werden
 Diese Datei wird auf allen Seiten verwendet
 Styles sind somit im ganzen Projekt verfügbar
Vorteile/Nachteile von Auslagerung
 Vorteile
 Einheitliches Design für die ganze Seite möglich
 Klare Trennung von Inhalt und Design
 CSS kann „komplett“ genutzt werden
 Nachteile
 zwei unterschiedliche Dateien
Empfehlung für den Einsatz von CSS
 keine Methode ist für alles geeignet
 Mischen ist möglich
 Empfehlung: Für jede Regel individuell überlegen, wo sie
am besten hinpasst
 Gibt es das Element auch auf anderen Seiten?
 Auslagern
 Gibt es das Element noch einmal auf dieser Seite?
 Auslagern oder Style-Block (besser Auslagern)
 Ist das Element wirklich einmalig?
 Inline mit Style-Tag (sehr sparsam gebrauchen)
Aufbau einer CSS-Regel
 CSS-Regeln sind immer nach folgendem Schema
aufgebaut:
 Es können mehrere Selektoren mit Komma getrennt
verwendet werden
 Es können mehrere Schlüsselwörter mit Strichpunkten
getrennt in einer Regel verwendet werden
Sonderfall: Inline-CSS mit Style-Schlüsselwort
 Wird das CSS direkt im Element mit dem Schlüsselwort
„style“ verwendet, fällt der Selektor und die Klammern
weg
 Stattdessen:
Selektoren
 Selektoren in CSS selektieren ein oder mehrere Elemente
 Verschiedene Möglichkeiten





über eine ID
über eine Klasse
über den Elementname
über ein Schlüsselwort
über die Position im Dokument
Selektor: ID
 Über die ID wird ein spezielles Element selektiert
 Aufbau im CSS
 #ID des Elements
 Aufbau im HTML
 <p id=“ID_des_Elements“>
 Wird verwendet, um einzigartige Elemente zu
referenzieren, welche einmalig auf einer Seite sind
Selektor: Klasse
 Über eine Klasse können mehrere Elemente einer Seite
selektiert werden
 Aufbau im CSS
 .Klasse des Elements
 Aufbau im HTML
 class=“Klasse des Elements“
 Ein Element kann mehrere Klassen haben
 dadurch lässt sich eine schöne Aufteilung der FormatRegeln erziehlen
Selektor: Elementname
 Über den Elementname können gleiche Elemente
selektiert werden
 Keine Anpassungen im HTML notwendig
 Sollte so viel wie möglich verwendet werden, um
einheitliches Design zu ermöglichen
 Aufbau im CSS
 h1
 span
 p
Selektor: Schlüsselwort
 Es können Elemente selektiert werden, welche ein
bestimmtes Schlüsselwort gesetzt haben.
 Über dies können auch Elemente selektiert werden, welche
einen bestimmten Wert für ein bestimmtes Schlüsselwort
gesetzt haben
 Aufbau CSS
 *[Schlüsselwort=Wert]
 =Wert kann weggelassen werden
Selektor: Position im Dokument
 Selektoren können verknüpft werden
 Selektoren können aufgelistet werden
Verknüpfung von Selektoren
 Elemente, welche innerhalb eines anderen liegen, werden
selektiert
 Es können Ebenen dazwischen liegen, es muss also kein
direktes Kindelement sein
 Beispiel
 #content h1
 Wird nur angewendet auf Überschriften, welche innerhalb
des content-Blocks liegen
Auflistung von Selektoren
 Durch Komma von einander getrennte Selektoren
 Jeder Teil des Selektors kann greifen
 Beispiel:
 h1, h2, h3 { color: red; }
 Alle Überschriften h1-h3 werden rot dargestellt
Verschiedene Verknüpfungsarten




Nachfolger
Kindelement
Geschwister-Selektor
Tiefen-Selektor
Nachfolger
 Nachfolger werden als einfache Liste dargestellt
 Arten von Einzel-Selektoren können beliebig gemischt
werden
 Beispiel
 body #content p.abschnitt h4
 Selektiert wird jetzt Überschrift (H4), welche innerhalb eines
Abschnittes mit der Klasse .abschnitt liegen, welche
wiederum zum Content-Bereich gehören muss. Das bodyElement kann hier weggelassen werden.
Kindelemente
 Ähnlich dem Nachfolger-Selektor
 Nur direkte Kinder werden selektiert
 Beispiel
 #content > h4
 Nur eine Überschrift (h4) welche direkt im Content-Bereich
liegt
Geschwister-Selektor
 Elemente liegen auf gleicher Ebene
 Müssen nicht direkte Geschwister sein
 Beispiel:
 p + span
 Jeder Span, welcher auf gleicher Ebene ein „p“-Element
haben, werden selektiert
Tiefen-Selektor
 Das „Gegenteil“ vom Kind-Selektor
 Es muss mindestens eine Ebene zwischen dem ersten und
dem zweiten Element liegen
 Beispiel
 #content * h3
 Jede Überschrift H3 wird selektiert, welche innerhalb von
#content liegt, und mindestens ein Element dazwischen
liegt.
Schriften
 Schriften werden durch das Schlüsselwort “font“ definiert
 Beispiel
 <span style=“font-family:Arial“>Text</span>
 Fettung in CSS
 Fettung wird durch das schlüsselwort “font-weight“ definiert.
 Mögliche Werte





bold
bolder
light
lighter
100,200,300,400,500,600,700,800,900
Schriften
 kursive Schriften werden durch das Schlüsselwort
“font-style“
 Mögliche Werte sind
 normal (Standard)
 italic
 oblique
Farben
 Wie auch in HTML werden Farben in CSS über einen
Farbcode (Hexadezimal) angegeben
 Referenzierung auch über Namen möglich
 Auflistung aller Farbnamen mit Codes:
 http://www.farb-tabelle.de/de/farbtabelle.htm
Farben in CSS
 Farben werden mit dem Schlüsselwort “color“ festgelegt
 color bezieht sich dabei auf die Textfarbe, also den Inhalt
des Elements
Hintergrund
 Hintergrund kann sein:
 Farbfläche
 Bild
 Schlüsselwort: background-color
Hintergrund-Bild
 Der Hintergrund eines Elementes kann auch aus einem Bild
bestehen
 Schlüsselwort: background-image
 Als Wert muss die Adresse des Bildes angegeben werden.
Hintergrund-Bild
Hintergrund - Repeat
 Standardmäßig wird der Hintergrund in alle Richtungen
wiederholt
 Dieses Verhalten kann gesteuert werden:
 background-repeat
 Mögliche Werte




repeat-x
repeat-y
repeat
no-repeat
horizontal wiederholt
vertikal wiederholt
in beide Richtungen wiederholt
keine Wiederholung
Hintergrundeffekte mit Repeat
 Durch die Wiederholung wird Speicherplatz gespart
 eine kleine Graphik kann eine ganze Fläche füllen
Hintergrundeffekte für Menüs
 durch vertikales Wiederholen kann man einen Hintergrund
beispielsweise für ein Menu erstellen
Home | Über uns | Anfahrt
Float




Float = Fluss, fließen
Elemente in HTML fließen immer
Mit CSS kann der Float beeinflusst werden
Beispiel:
 float:left;
 float: right;
 Einheitlicher Umbruch (auch für übergeordnete Container)
 <br style=“clear:both“ />
Positionierung
 In CSS gibt es 2 weitere Möglichkeiten, Elemente zu
positionieren
 Standard ist relative Positionierung
 Es gibt noch die absolute Positionierung
 Absolut: Die linke obere Ecke wird zum Elternelement um
bestimmte Pixel verschoben
 Relativ: Die Position wird von der laut Float zugewiesenen
Position aus entsprechend verschoben
Schatten
 Man kann Elementen einen Schatten zuordnen
 Schlüsselwort: box-shadow
 Beispiel:
 box-shadow: 3px 2px 7px #ccc;
 wobei gilt: verschiebung vertikal, verschiebung horizontal,
breite des Schattens, Farbe des Schattens
Unterschiedliche Umsetzung in Browsern
 box-shadow wird nicht von allen Browsern erkannt
 Für Mozilla Firefox:
 -moz-box-shadow
 Für Webkit-basierte Browser (Chrome, iPhone)
 -webkit-box-shadow
 Kompletter Schatten-Block also
 -moz-box-shadow: 3px 2px 7px #ccc;
 -webkit-box-shadow: 3px 2px 7px #ccc;
 box-shadow: 3px 2px 7px #ccc;
Runde Ecken
 Ecken können abgerundet werden
 Auch hier ist die Umsetzung in den Browsern (noch) nicht
einheitlich
 Beispiel:
 border-radius: 5px;
 Für Mozilla und Webkit wieder entsprechend:
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
Runde Ecken
 Man kann auch einzelne Ecken abrunden




border-top-left-radius: 5px;
border-top-right-radius: 18px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 15px;
Vielen Dank!
Daniel Beuter
DM Kommunikation
Neustadt / Weinstraße
Tel. 06321 – 484 0162
[email protected]
http://www.dmkommunikation.de
https://www.xing.com/profile/Daniel_Beuter3
Zugehörige Unterlagen
Web Design Praktikum
Web Design Praktikum
Herunterladen
Werbung