HTML5 und CSS – Grundlagen

Kurs | Albert America

1
2
3
4
5
6

Positionieren &, Hintergrundbilder, Seo

  • Lernziele
  • Ich kenne den Unterschied zwischen absoluter und relativer Positionierung von Elementen.
  • Ich kann einen Provider aussuchen.
  • Ich kenne die Voraussetzungen für ein sinnvolles SEO.

Repetition

Fragen Tag 5 - Boxmodel und Display-Angaben

Absolute und relative Positionierungen

Die userorientierte Wahl der Grösse eines Bildschirms und des Browserfensters macht die Positionierung von Elementen komplex. Nur in seltenen Fällen und richtig angewendet sind sowohl absolute, wie auch relative Positionierung Erfolg versprechend.

Absolute Positionen

HTML-Elemente können durch die Eigenschaft position: abolute aus dem normalen HTML-Fluss gehoben werden und an jede beliebige Stelle mit top, right, bottom und leftdes Bildschirms positioniert werden. Auf andere Elemente innerhalb haben absolut positionierte Elemente keinen Einfluss.

Beispiele: Elemente mit Pixelwerten absolut positionieren
Elemente mit Prozentwerten (variable Breiten) absolut positionieren
Verschachtelte Elemente Elemente ineinander verschachteln
Elemente übereinander anordnen (z-index): Zwei Elemente mit z-index anordnen | Drei Elemente mit z-index anordnen

Übung – Icon absolut positionieren

  1. Download Aktion Icon.
    Lege dieses Bild in deinen Ordner Bilder.
  2. Öffne das index.html deines Projektes.
  3. Erstelle innerhalb des main-Elements, einen div-Tag mit der class="new"
  4. Platziere das Bild kommt im erstelltendiv-Element und gib ihr die class="new".
  5. Verlinke das Bild mit deiner Projektseite.
  6. Öffne die CSS Datei style.css deines Projektes.
  7. Positioniere das Icon mit der div class="new" absolut wie folgt: von oben 20px, von rechts 20px. 
    .new{
position: absolute;
top: 20px;
right: 20px;
}
    Das Bild wird aus dem normalen HTML - Fluss gehoben und von oben rechts positioniert.
  8. Das Icon soll für kleine Bildschirme nur kleiner, für die Desktopausgabe jedoch grösser sein.
  9. Setzte die Breite des Bildes im CSS (kontextsensitiv) auf 100px. 
    .new img{
    width: 100px;
}
  10. Vergrössere das Bild auf dieselbe Weise für den Desktop auf 200px.

Lösung | Lösung ZIP

CSS Positionen

HTML-Elemente können mit CSS Positioniert werden. position:static; ist die Standard-Positionierung.
Weitere Möglichkeiten bieten: position:absolute;, position:relative; und position:fixed;.
Siehe CSS Positionen

Relative Positionen

Die Position eines relativ positionierten Elementes wird von der eigentlichen Stelle im Dokument aus berechnet. Das Element wir nach rechts, links, oben oder unten verschoben. Die nachvolgenden Elemente werden dadurch nicht verschoben. Das Element wird relativ zur eigentlichen Position (vorher stehendes Element) verschoben.

Oft verwendet man position:relative als Bezugspunkt für absolut positionierte Elemente. So können diese auch in einem dynamischen Fluss positioniert werden.

Zusatz-Übung – relative Positionen

  1. Öffne das index.html deines Projektes.
  2. Erstelle innerhalb des main Tags, einen div Tag mit der class="new"
  3. Der main Tag bekommt position: relative;. 
     main {
  position: relative;
}
    Ab sofort errechnet das Icon die absololute Position nicht mehr vom body Tag, sondern von seinem relativen Elternelemt.

Lösung | Lösung ZIP

Hintergrundbilder

Theorie Hintergrundbilder:
Der Hintergrund eines Elements kann als Farbe oder als Hintergrundbild festgelegt werden. Mit CSS kann man Hintergrundbilder horizontal oder vertikal repetieren, oder gar einzeln plazieren.
Wo werden Hintergrundbilder eingesetzt?
Wie werden diese Positioniert?

Beispiele positionierte Hintergrundbilder

  1. repeat
  2. no-repeat
  3. repeat-x

Zusatz-Übung – Hintergrundbild in eine HTML-Seite einbinden

  1. Download Material - Das Bild-Material liegt im Ordner material/tag_6/bg-bilder/.
  2. Lade alle Bilder in deinen bilder-Ordner.
  3. Öffne dein style.css
  4. Positioniere dein Hintergrundbild mit CSS.
  5. Siehe Beispiele: Beispiel 1 - Beispiel 2 - Beispiel 3 - Beispiel 4

Workshop – Template A-Z

Template

Template Tutorial A-Z
Schritt für Schritt ein Template selber bauen.

PAUSE

Hosting, Seo etc.

SEO

SEO Search Engine Optimization: Wikipedia

Meta-Tags

Theorie: Meta-Tags und Eintrag der Website in Suchmaschinen
Meta-Tag-Generator
Google: Hinzufügen der Website zum Index von Google.

Registrieren einer Site

.ch Domain bei Switch: http://nic.ch/
internationale Domains http://www.united-domains.de
Hosting: metanet.ch | hostmax.ch | hostpoint.ch

Schlussrunde / Fragestunde

Online-Ressourcen und Tipps für die Weiterarbeit,
Weiterführende Kurse
Ausblick und Feedbacks.

Frontend Focus abonnieren.

Links & Tip's