public/web-development/presentation.git

			@@ -90,9 +90,11 @@
			</section>
			<section>
			<ul>
			<li>HyperText Markup Language</li>
			<li>Erste Version 1993 von Tim Berners-Lee</li>
			<li>Dokumentationsmedium</li>
			<li>Ursprünglich rein akademische Verwendung</li>
			<li>Verlinkungen der Dokumente macht sie "hyper"</li>
			</ul>
			</section>
			<section>
			@@ -129,30 +131,21 @@
			</pre>
			</section>
			<section>
			<h3>Grundgerüst</h3>
			<pre>
			<code data-trim data-line-numbers>
			<script type="text/template">
			<div>Inhalt</div>
			</script>
			</code>
			</pre>
			</section>
			<section>
			<h3>Beispiel</h3>
			<pre>
			<code data-trim data-line-numbers>
			<script type="text/template">
			<!DOCTYPE html>
			<html lang="de">
			<html lang="en">
			<head>
			<meta charset="UTF-8">
			<title>Title</title>
			</head>
			<body>
			<h1>Überschrift</h1>
			<h1>Lorem Ipsum</h1>
			<div>
			<p>Dies ist ein Paragraph</p>
			<p>Dies ist noch ein Paragraph mit einem längeren Text</p>
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing</p>
			<a href="/assets/html/simple2.html">Weitere Infos</a>
			</div>
			</body>
			</html>
			@@ -162,13 +155,118 @@
			</section>
			<section>
			<h3>Beispiel</h3>
			<iframe data-src="/assets/html/simple.html"></iframe>
			</section>
			<section>
			<h3>Aufbau eines Elements</h3>
			<pre>
			<code>
			<h1>Überschrift</h1>
			<div>
			<p>Dies ist ein Paragraph</p>
			<p>Dies ist noch ein Paragraph mit einem längeren Text</p>
			</div>
			<code data-trim data-line-numbers>
			<script type="text/template">
			<span id="my-id" class="super important">Inhalt</span>
			</script>
			</code>
			</pre>
			<pre>
			<code data-trim data-line-numbers>
			<script type="text/template">
			<input id="input" class="super important" disabled="disabled"/>
			<input id="input2" class="super important" disabled>
			</script>
			</code>
			</pre>
			</section>
			</section>
			<section>
			<section>
			<h2>CSS</h2>
			</section>
			<section>
			<ul>
			<li>Cascading Style Sheet</li>
			<li>Nach größerer Verbreitung von HTML</li>
			<li>Webseiten ansprechend gestalten</li>
			</ul>
			</section>
			<section>
			<img data-src="/assets/images/css-sucks.png">
			</section>
			<section>
			<h3>Beispiel</h3>
			<pre>
			<code data-trim data-line-numbers>
			<script type="text/template">
			selector [, selector, selector, ...] {
			property: value;
			}
			</script>
			</code>
			</pre>
			</section>
			<section>
			<h3>Beispiel</h3>
			<pre>
			<code data-trim data-line-numbers>
			<script type="text/template">
			html {
			background-color: red;
			font-size: 30px;
			}
			</script>
			</code>
			</pre>
			</section>
			<section>
			<h3>Beispiel</h3>
			<pre>
			<code data-trim data-line-numbers>
			<script type="text/template">
			<html lang="en">
			<head>
			...
			<style>
			html {
			background-color: red;
			font-size: 30px;
			}
			</style>
			</head>
			<body>
			...
			</body>
			</html>
			</script>
			</code>
			</pre>
			</section>
			<section>
			<h3>Beispielhafte CSS-Eigenschaften</h3>
			<ul>
			<li>background-color: red</li>
			<li>font-family: Georgia, serif, Arial</li>
			<li>text-decoration: line-through underline</li>
			</ul>
			</section>
			<section>
			<h3>Selektoren</h3>
			<ul>
			<li>Umfangreiche Element-Selektoren zur Anwendung der Styles</li>
			<li>Kinder, Enkel...</li>
			<li>Geschwister, direkte Nachfolger</li>
			<li>Attribute</li>
			<li>Pseudoklassen</li>
			</ul>
			</section>
			<section>
			<h3>Selektoren</h3>
			<pre>
			<code data-trim data-line-numbers>
			<script type="text/template">
			#my-id // Id
			html, body // Mehrfachselektion
			div > p // p die direkt unterhalb eines div sind
			a:visited // besuchte Links
			span.important // span mit der Klasse "important"
			</script>
			</code>
			</pre>
			</section>