09 April, 2018

Was ist ist HTML

HTML

  • Beschreibt die Struktur von Websites
  • Legt die Art von Content fest jedoch nicht das Aussehen dieses.

Minimales HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Titel</title>
</head>

<body>
Inhalt...
</body>

</html>

HTML Elemente

Ein Element fängt jeweils mit <elementName> und wird geschlossen mit </elementName>.

HTML Elemente 2

Block vs Inline Elemente

<span>first</span><span>second</span><span>third</span>

<p>fourth</p><p>fifth</p><p>sixth</p>

firstsecondthird

fourth

fifth

sixth

Attribute

Bestimmte Elemente benötigen zusätliche Attribute.

Links

<a href="https://www.mozilla.com/">
External Link
</a>

Bilder

<a href="https://developer.mozilla.org/en-US/" target="_blank">
  <img src="https://mdn.mozillademos.org/files/6851/mdn_logo.png" alt="MDN logo">
</a>

HTML

CSS - Styles

Cascading Stylesheets fügt den Präsentations Layer zum HTML. So kann damit die Schrift Art verändert werden und das Aussehen von HTML Elementen festgelegt werden.

Der Browser wendet die CSS Regeln auf das HTML an und dadurch wird das Aussehen dieser festgelegt.

Beispiel

<!DOCTYPE html>
<html>
  <head><meta charset="utf-8"><title>My CSS experiment</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first CSS example</p>
  </body>
</html>
h1 {
  color: blue;
  background-color: yellow;
  border: 1px solid black;
}
p {
  color: red;
}

CSS Bestandteile

CSS besteht aus Properties und Values.

  • Properties: Lesbare Identifier die festlegen wie etwas geändert werden soll wie z.B. Schrift, Weite, Farbe, usw.
  • Values: Jede Property bekommt einen Wert welcher festlegt wie die Property geändert wird.

CSS Blocks

Alle CSS Styles können als declaration blocks zusammengefasst werden.

CSS Selektoren und Regel

Es gibt verscheidene Arten von Selektoren:

  • Simple selectors
  • Attribute selectors
  • pseudo-classs
  • pseudo-elements
  • combinators
  • multiple selectors

Simple Selektors

Diese Matchen direkt ein Element des Dokuments basierend auf dem Typ des Elements oder basierend auf Classen oder der Id.

<p>What color do you like?</p>
<div class="test">I like blue.</div>
<p id="blubber">I prefer red!</p>
p {
  color: red;
}
.test {
  font-weight: bold;
}
#blubber {
  font-family: cursive;
}

Attribute Selektoren

  • [attr]: Selektiert alle Elemente mit dem Attribute attr unabhängig vom Wert
  • [attr=val]: Selektiert alle Elemente mit dem Attribute attr wo der Wert val ist.
  • [attr|=val]: Selektiert alle Atrribute welche gleich wie dem Wert sind oder mit diesem anfangen.
  • [attr^=val]: Selektiert alle Attribute welche mit dem Wert anfangen.
  • [attr$=val]: Selektiert alle Atrribute welche mit dem Wert enden.

Pseudo Klassen

Pseudo Klassen werden mit einen Doppelpunkt an einen Selektor angehängt um bestimmte Zustände auszuwählen.

a:hover {
  text-decoration: underline;
  color: red;
}
li:nth-of-type(2n) {
  background-color: gray;
}

li:nth-of-type(2n+1) {
  background-color: blue;
}

Kombination von Selektoren

  • AB: Jedes Element das sowohl A als auch B matched.
  • A B: Jedes Element B das ein Nachkommen von Element A ist. (Kind, Kind von Kind, usw.)
  • A>B: Jedes Element B das ein direktes Kind vom Element B ist.
  • A+B: Jedes Element B das das nächste Geschwister von Element A ist. (Nächste Kind vom Eltern Element)
  • A~B: Jedes Element B das eines der Geschwister von Element A ist.

Multiple Selektoren

Mehrere Selektoren für eine Regel können mit einem Komma separiert werden:

h1, h2, h3 {
  font-family: 'sans serif';
}

Welcher Selektor wird angewendet?

Es kommt vor das mehrere Selektoren auf ein Element zutreffen, um die Wichtigkeit zu bestimmen gibt es folgende Regel:

  • 1000: Alle inline styles in einem Element ansonsten 0.
  • 100: Je 100 Punkte für jeden ID Selektor
  • 10: Je 10 Punkte für jeden Call Selektor, Attribute oder Pseudo Klass Selektor
  • 1: Je einen Punkt für jedes Element oder Pseudo Element

https://specificity.keegan.st/

Das Boxmodel

Berechnung der Weite

#box {
  margin: 10px;
  border: 10px solid green;
  padding: 10px;
  widht: 40px;
  heigth: 40px;
  background-color: yellow;
}

Outline

#box {
  margin: 10px;
  outline: 10px solid green;
  padding: 10px;
  widht: 40px;
  heigth: 40px;
  background-color: yellow;
}

Margin Collapsing

max(m1, m2)

Block und Inline Elemente

Block Elemente nehmen die maximal Verfügbare Breite ein, mit einem Zeilenumbruch davor und dannach. h1, p, div, li

Inline Elemente nehmen nur den notwendigen Platz ein. span, a, img

Dies kann auch im CSS geändert werden:

li { display: inline;}
span { display: block;}

Inline Block?

li { display: inline-block;}

Dies Spezifiziert eine Element, dass wie ein Inline Element posioniert wird, man jedoch wie bei einem Block Properties wie height, width, paddings etc gesetzt werden können.

Positionierung

Alle Elemente müssen im Browser Positioniert werden, dazu gibt es verschiedene Möglichkeiten.

Normal Flow

Normale Reihenfolge von HTML Elementen:

Absolute

Nimmt ein Element aus den normalen Flow und positioniert es relativ zum nächsten Positionierten Eltern Element.

Float

Nimmt ein Element aus dem normalen Flow und lässt ihn mit oder zu anderen floating Elementen floaten.

relativ

Bewegt ein Element relativ zur zugeordneten Position.

Fixed Positionierung

Ähnlich wie Absolute aber im Bezug auf den Viewport.

<p id="hello">welcome to my website</p>

#hello {
position: fixed; top: 50px; right: 50px;
padding: 10px; background-color: yellow;
}

Aufgabe

Erstellen Sie nach dem vorliegendem Mockup eine Portfolio Website.