Lektion 7:

Block und Inline

HTML5-Strukturelemente

Wiederholung CSS-Selektoren

🖊️ Wiederholung CSS-Selektoren

Bildet Gruppen und jede Gruppe befasst sich mit einem dieser CSS-Selektor.

❓ Was bewirkt die CSS-Regel? Welche Elemente werden selektiert? Wie heisst der eingesetzte Selektor? Erkläre am Beispielcode. 


<h1 class="datenschutz">Datenschutz und Co.</h1>
<h2>Bemerkung</h2>
<p>
	Klare Definition der Begriffe nicht möglich.
</p>
<h3>Thema <em class="datenschutz">Datenschutz</em></h3>
<p>
	Bei dem <em class="datenschutz">Datenschutz</em> geht es um den 
	Schutz der Privatsphäre eines jeden Menschen. 
</p>
<p>
	Datenschutz garantiert jedem Bürger ein Recht auf informationelle Selbst-
	bestimmung und schützt ihn vor missbräuchlicher Verwendung seiner Daten, 
	z.B. bei <a href="https://google.com" target="_blank">Google</a>.
</p>
<p id="copyright"> © <a href="https://drdatenschutz.de">Dr. Datenschutz</a> </p>
  1. #copyright { background-color: cyan; }
  2. .datenschutz { background-color: skyblue; }
  3. #copyright a { color: black; }
  4. p em { color: green; }
  5. p { padding: 10px; }
  6. h1 { margin-bottom: 45px; }
  7. a:hover { color: red; }
  8. h2, h3, em { text-decoration: underline; }
  9. em.datenschutz { font-weight: bold; }
  10. h3 + p { color: darkblue; font-style: italic; }


➡ https://jsfiddle.net/cuj3rzkn/

Block und Inline

Block und Inline

Box-Modell: Für CSS ist alles eine Box.

CSS kennt zwei Arten, wie ein HTML-Element in der Seite positioniert werden kann:

🖊️ Aufgabe: Block/Inline

  1. Schreibt alle HTML-Tags auf ein Notizblatt, die euch in den Sinn kommen (ein Tag pro Zeile)
  2. Überlegt für jedes Tag, ob es eher zu "Block" oder "Inline" gehört (und schreibt eure Vermutung daneben hin)
  3. DO WHILE (es kommen euch noch weitere Tags in den Sinn)
    ➡ werft einen Blick auf das Cheatsheet HTML-Tags aus Lektion 1 und fügt die restlichen noch zu eurer Liste hinzu
  4. Kontrolliert die Tags, bei denen ihr unsicher seid, mithilfe dieses JSFiddles:
    https://jsfiddle.net/frh63qep/

➡ Demo: https://jsfiddle.net/8r0f12jp/

🖊️ Aufgabe: Block/Inline (Variante)

<h1> <h2> <h6> <strong> <em> <u> <s> <p> <img> <a> <ul> <ol> <li> <blockquote> <table> <td> <tr> <code> <tt> <br/> <hr/> <sup> <sub>

➡ Demo: https://jsfiddle.net/8r0f12jp/

Übersicht: Block/Inline

Block-Elemente Inline-Elemente
<h1>, <h2>, ..., <h6>
<p>
<br/>
<hr/>
<li>, <ul>, <ol>
<blockquote>
<tr>, <table>
<strong>
<em>
<u>
<s>
<code>, <tt>
<sup>, <sub>
<img>
<a>
<td>
<div> <span>

Warnung: Die beiden Tags <div> und <span> agieren als zu gestaltende, "leere Hülle" für irgendeinen Inhalt und haben keinerlei semantischen Nutzen.

Die Eigenschaft display

Block-Elemente haben die CSS-Eigenschaft display:block; und Inline-Elemente display:inline;

Block-Elemente, z.B.
p { display: block; }

Inline-Elemente, z.B.
strong { display: inline; }


💡 Es ist möglich, die Eigenschaft zu ändern, sodass aus einem (standardmässigen) Block-Element ein Inline- wird, z.B. 

li { display: inline; background-color: yellow; }

➡ Try It: Vorlage | mit CSS

❓ Was passiert, wann man die Abstände (padding oder margin) vergrössert?

Inline-Block

Inline-Block kombiniert die beiden bisherigen Eigenschaften und ermöglich, dass Inline-Elemente besser "gestylt" werden können.

Navigationsmenü mittels einer Liste

li { 
	display: inline-block;
	margin: 4px 10px;
	padding: 8px;
	background-color: yellow;
	border: 1px solid black;
}

➡ Try It

Vergleich der drei bisherigen Typen von display

➡ https://www.w3schools.com/css/tryit.asp?filename=trycss_inline-block_span1


Bemerkung: Nebst diesen drei Typen gibt es noch weitere, z.B. flex, mit dem sich ebenfalls Navigationen realisieren lassen (siehe später).

HTML5-Strukturelemente

Strukturelemente in HTML5

<header> Kopfbereich
<nav> Navigationsmenü
<main> Hauptteil
   <article> Artikel im Hauptteil
   <section> Unterkapitel im Hauptteil
<footer> Fusszeile
<aside> Inhalt "am Rande"

🖊️ Aufgabe: Strukturelemente

  1. Öffnet auf dem Tablet/Notebook eure Lieblingshomepage.
  2. Teilt die Seite mithilfe der HTML5-Strukturelemente in die verschiedenen Teile ein.

Strukturelemente mit CSS selektieren

Auf diese HTML5-Strukturelemente kann man ganz einfach via Typen-Selektor zugreifen: 

header { background-color: red; }
nav { background-color: yellowgreen; }
main { background-color: yellow2; }
article { background-color: orange; padding: 5px; }
section { background-color: tan; }
aside { background-color: magenta; padding: 5px; }
footer { background-color: cyan; }

Beispielwebsite

➡ Try It

Seitenzentrierung inkl. Rand

Idee:

➡➡

Seitenzentrierung inkl. Rand (1)

➡ Try It

Seitenzentrierung inkl. Rand (2)

Wie können alle Seitenelemente auf einmal horizontal zentriert werden?

header { margin: auto; width: 80%; }
nav { margin: auto; width: 80%; }
main { margin: auto; width: 80%; }
footer { margin: auto; width: 80%; }

Variante 1️⃣: Selektorenliste

header, nav, main, footer { margin: auto; width: 80%; }

➡ Try It

Variante 2️⃣: Wrapper

#wrapper { margin: auto; width: 80%; }

Seitenzentrierung mit Wrapper

Füge einen unsichtbaren Container (= <div>) ein, der alle umschliesst/einwickelt (engl. to wrap), die zentriert werden sollen.

HTML:

<body>
	<div id="wrapper">
		<header> ... </header>
		<nav> ... </nav>
		<main> ... </main>
		<footer> ... </footer>
	</div>
</body>

CSS:

#wrapper { margin: auto; width: 80%; }

Literatur

Übung 7

➡ Übung 7


➡ HTML5-Strukturelemente.pdf (Anleitung/Erklärung)