HTML: Show or hide?

topic 01

Basis-Content-Typen

Drei Arten, wie HTML-Elemente angezeigt werden können (Default CSS Settings):

block

„I need space.“

inline

„I’m in a state of flux.“

none

„I’m like a ghost.“

Blockelemente

  • werden so breit wie möglich dargestellt
  • beinhalten einen Zeilenumbruch vor und nach dem Element
  • nachfolgende Elemente stehen unterhalb der Box
  • können Blockelemente enthalten
  • können Inline-Elemente enthalten

Note: „Absatzformat“; Blockelemente werden auch Block-Level-Elemente genannt

Visualisierung Blockelement

Inline-Elemente

  • werden nur so breit wie ihr Inhalt dargestellt
  • nachfolgender Text fließt direkt nach dem Element weiter
  • Inline-Elemente erzeugen keine neue Zeile
  • sind den Blockelementen untergeordnet
  • können normalen Text & andere Inline-Elemente enthalten
  • dürfen keine Blockelemente enthalten

Note: „Zeichenformat“

Visualisierung Inline-Element

Blockelemente

<div>
<h1> bis <h6>
<p>
<ul>, <ol>, <li> 
<hr>
<header> HTML5
<nav> HTML5
<article> HTML5
<aside> HTML5
<section> HTML5
<footer> HTML5

Note: Vollständige Liste auf mozilla.org. Die neuen HTML5-Element sind technisch gesehen nicht als „Block-Level“ definiert, read more Flow-Content.

Inline-Elemente

<span>
<b> (stylistically offset)
<i> (alternate voice)
<strong> HTML5 (strong importance)
<em> HTML5 (stress emphasis)
<a>
<br> 
<img>

Note: Vollständige Liste auf mozilla.org.

CSS: Point of View

topic 02

display: block;

„I need space.“

display: inline;

„I’m in a state of flux.“

display: inline-block;

„I’m a hybrid of both.“

Mit display kann das Verhalten eines HTML-Elements bei der Darstellung im Browser geändert werden.

Inline-Blockelemente

  • Mischung aus block & inline
  • erzeugen einen Block
  • nach innen hin Eigenschaften eines Blockelements
  • und bleiben dennoch im Fluß
  • nach außen hin Eigenschaften eines Inline-Elements
  • ermöglichen Elemente mit Blockeigenschaften nebeneinander anzuordnen
Visualisierung Inline-Blockelement

Arten von display im Überblick

Blendet ein Element auf der Seite aus: 

display: none;

Elemente sind nicht im flow (width, height und margins können frei gewählt werden): 

display: block;

Flow-Elemente wie z.B. ein Wort oder ein Zeichen in einem Paragrafen/Absatz (width, height und vertical margins können nicht definiert werden): 

display: inline;

Flow-Elemente wie z.B. ein Wort oder ein Zeichen in einem Paragrafen/Absatz (width, height und vertical margins können frei gewählt werden):

display: inline-block;

Magic rainbow unicorns (mehr dazu im 2. Semester):

display: flex;

History of web design

in a nutshell

CSS (1998)

CSS © froont

Etwa zur gleichen Zeit wie Flash wurde ein wesentlich besserer Ansatz zur Strukturierung von Inhalten geboren: Cascading Style Sheets (CSS). Das Grundkonzept besteht darin, Inhalte vom Design zu trennen. Das Aussehen und die Formatierung sind in CSS definiert, der Inhalt in HTML. Die ersten Versionen von CSS waren weit weg von flexibel, aber das wirkliche Problem waren die Browser. Es dauerte Jahre, bis die Browser CSS vollständig unterstützten. Und oft war es ziemlich fehlerhaft. Um klar zu stellen: CSS ist keine Programmiersprache, sondern eine Gestaltungssprache. Sollten Web-Designer coden lernen? Möglicherweise. Sollten sie verstehen, wie CSS funktioniert? Absolut!

CSS: Style Options

topic 03

div {
  //display: block;
  width: 200px;
  height: 200px;
  margin: 40px;
  padding: 20px;
  …
  }
Beispiel 1:
Blockelement <div>
span {
  //display: inline;
  margin-left: 40px;
  margin-right: 40px;
  …
  }

Note: NO width, height & vertical margins

Beispiel 2:

An inline element does not start on a new line and only takes up as much width as necessary. This is an inline element <span> which is formatted and inside a paragraph.

li {
  display: inline-block;
  width: 200px;
  margin: 10px;
  padding: 10px;
  …
  }
Beispiel 3:
  • Portfolio
  • About
  • Contact

Standardwert für display überschreibbar

Jedes Element hat default-Display-Werte, die man überschreiben kann. Von block auf inline und vice versa. Oder auf inline-block.
Ein beliebtes Beispiel ist die Änderung der <li>-Elemente für horizontale Menüs.

li {
  display: inline;
  …
}
Beispiel 4:
  • Portfolio
  • About
  • Contact
li {
  display: inline-block;
  text-align: center;
}

li a {
  display: block;
  width: 150px;
  padding: 25px 0;
  color: #000;
  background-color: yellow;
}

li a:hover {
  background-color: orange;
}

Renny Gleeson: 404, the story of a page not found

beyond