Wie funktioniert das Internet

Wie funktioniert das Internet?

HTML und CSS für Anfänger



Jörg Kantel, 24. und 25. Januar 2013, aktualisiert am 14. und 21. August 2013

Teil 1: Kommunikation

image

Der Client fragt:

(standardmäßig auf Port 80)

	GET /index.html HTTP/1.1
	User-Agent: Safari (Macintosh)
	Accept: */*
	Accept: image/gif>
	Accept: image/jpeg
	...
	[Leerzeile (wichtig!)]
	eventuell Daten

Der Server antwortet

(hoffentlich)

	HTTP/1.1 200 OK
	Server: Apache
	MIME-version: 1.0
	Content-Type: text/html
	Last-modified: ...
	Content-lenght: 1029
	[Leerzeile (wichtig!)]
	Body ... (HTML)

Was fällt daran auf?

Was sind Webserver?

image

Der erste Webserver der Welt lief auf dem Schreibtisch von Tim Berners-Lee am CERN.

Webserver-Software

Clients

image

The Web is a Writing Environment

Das sah zumindest Tim Berners-Lee so (Screenshot des ersten Browsers am CERN).

Teil 2: Hypertext/Hypermedia

image

Definition: Hypertext ist das Verfahren, Textpassagen untereinander durch Software-Links netzartig zu verknüpfen. Ted Nelson hatte es Mitte der sechziger Jahre, als an ein ziviles Internet noch nicht zu denken war, im Rahmen des Xanadu-Projekts mit der Absicht konzipiert, das digitalisierte Wissen der Menschheit effizienter zu organisieren.

Hypermedia

Der Begriff Hypermedia setzt sich zusammen aus den Wörtern Hypertext und Multimedia. Er bezeichnet ein verlinktes Dokument (oder verlinkte Dokumente), deren Knoten nicht nur Text-, sondern auch andere multimediale Elemente (Photo, Video, Audio etc.) sein können.

Das WWW war ursprünglich als Hypertext-Umgebung konzipiert worden (HTML: HyperTextMarkupLanguage).

Multimedia

Die Sprachen des Web (1)

Im Client

Die Sprechen des Web (2)

Auf dem Server

HTML

Wichtig: HTML ist eine Auszeichnungs-, keine Programmiersprache!

Aktuelle HTML-Versionen

HTML 4.0.1

XHTML

Zurück auf Anfang: HTML5

HTML5 (2)

Welches HTML soll ich nehmen?

Welches HTML? (2)

Ich werde im Folgenden auf die Elemente eingehen, die in XHTML und HTML5 gleich sind und ein wenig auf die neue Audio- und Video-Unterstützung in HTML5. Alles weitere zu HTML5 eventuell in einem späteren Lehrgang.

HTML-Struktur

Die einfachst-mögliche HTML-Seite:

	<hmtl>
		<head>
			<title>Meine HTML-Seite</title>
		</head>
		<body>
			<h1>Hallo Welt</h1>
		</body>
	</html>

Nicht ganz standardkonform, aber die meisten Browser interpretieren das korrekt.

HTML 4.0.1 Header

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<title>HTML 4.0.1 Header</title>
</head>
<body>
	Your HTML here …
</body>
</html>

XHTML Header

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>XHTML-Header</title>
</head>
<body>
	Your HTML here …
</body>
</html>

HTML5 Header

<!DOCTYPE html>
<html lang="de">
<head>
	<meta charset="utf-8" />
	<title>HTML5 Header</title>
</head>
<body>
	Your HTML here …
</body>
</html>

Warum dann HTML5?

Was ist HTML5?

image

Weiter …?

Das war der schwierige Teil …

Block-Elemente

Block-Elemente dienen der Gleiderung eines Dokuments, kennzeichnen also Absätze, Überschriften und Ähnliches.

Block-Elemente (2)

Block-Elemente (3)

Es versteht sich von selbst, daß alle Block-Elemente mit einem schließenden Tag versehen werden müssen.

Inline Elemente

Inline Elemente (2)

Bei diesen vier Elementen hat HTML eine Unterscheidung zwischen semantischer und syntaktischer Auszeichnung versucht, da dies aber generell sehr inkonsistent gehandhabt wurde, ist das ziemlich in die Hose gegangen.

Inline Elemente (3)

Inline Elemente (4)

Inline Elemente (5)

Inline Elemente (6)

Bilder

image

<img src="http://mein-server-de/clara.jpg" width="450" height="303" alt="Clara, das Rhinozeros" />

Tags können auch Attribute haben!

Bilder im Text

image <img src="http://mein-server-de/freiheit.jpg" width="255" height="276" alt="'La Liberté ou la Mort' von Jean-Baptiste Regnault" align="right" hspace="8" vspace="4" />

Die meisten der Attribute werden aber heutzutage in der Regel via CSS gesetzt.

Hyperlinks

Hier geht es zu <a href="http://www.spiegel.de/">Spiegel Online</a>.

Hier geht es zu Spiegel Online.

Hier geht es zu <a href="http://www.spiegel.de/" target="_blank" title="Hier geht es zu Spiegel Online">Spiegel Online</a>.

Hier geht es zu Spiegel Online.

Listen 1: Einfache Listen

	<ul>
		<li>Kapitel 1: Der Anfang</li>
		<li>Kapitel 2: Fortsetzung ...</li>
	</ul>

Listen 2: Geordnete Listen

	<ol>
		<li>Das Kapitel am Anfang</li>
		<li>Das Kapitel, das darauf folgt</li>
	</ol>

  1. Das Kapitel am Anfang
  2. Das Kapitel, das darauf folgt

Listen 3: Gemischte Listen

	<ul>
		<li>Kapitel 1: Der Anfang</li>
		<ol>
			<li>Am Anfang war das Wort</li>
			<li>Und das Wort ist Fleisch geworden</li>
		</ol>
		<li>Kapitel 2: Fortsetzung ...</li>
	</ul>

Definitionslisten

	<dl>
		<dt><b>Blattlaus</b></dt>
			<dd>Die gefräßige Blattlaus schädigt den Kumquat-Baum,
			indem sie seine Blätter frißt.</dd>
		<dt><b>Borkenkäfer</b></dt>
			<dd>Die Larven des Borkenkäfers werden unter die Rinde abgelegt
			und verzehren von dort den Kumquat-Baum von innen.</dd>
	</dl>
Blattlaus
Die gefräßige Blattlaus schädigt den Kumquat-Baum, indem sie seine Blätter frißt.
Borkenkäfer
Die Larven des Borkenkäfers werden unter die Rinde abgelegt und verzehren von dort den Kumquat-Baum von innen.

Tabellen

image

Tabellen – der Code

<table border="1" cellpadding="8" cellspacing="0" width="90%" align="center">
	<tr>
		<th>&nbsp;</th><th>Stuttgart</th><th>Berlin</th>
	</tr>
	<tr>
		<th align="left">Einwohner</th>
		<td align="right">595.000</td>
		<td align="right">3.405.000</td>
	</tr>
	<tr>
		<th align="left">Fläche</th>
		<td align="right">207 km<sup>2</sup></td>
		<td align="right">891 km<sup>2</sup></td>
	</tr>
</table>

In der Regel werden heutzutage die Attributwerte für Tabellen ebenfalls via CSS vergeben. Das sorgt für ein einheitliches Aussehen aller Tabellen in einem Dokument (und spart Schreibarbeit).

HTML-Farben

FarbeHex-Wert FarbeHex-Wert
  #ffffff   #000000
  #ff0000   #00ff00
  #0000ff   #cccccc
  #3993ff   #ff1c92

HTML-Farben

Entities

ZeichenEntityUTF-8 ZeichenEntitiyUTF-8
Ä&Auml;&#196; ä&auml;&#228;
Ö&Ouml;&#214; ö&ouml;&#246;
Ü&Uuml;&#220; ü&uuml;&#225;
ß&szlig;&#223; §&sect;&#167;
<&lt;&#060; >&gt;&#062;
&&amp;&#038; °&deg;&#176;
€&euro;&#8364; ¢&cent;&#162;

Entities (2)

CSS

CSS: Cascading Style Sheets

Inline Styles

<p style="color:red; background:yellow;">
Vorsicht! Dieser Text verursacht Augenkrebs!</p>

Vorsicht! Dieser Text verursacht Augenkrebs!

Inline Styles (2)

<p>Niemand liest die
<b style="color:white; background-color:red">BLÖD<b>-Zeitung.</p>

Niemand liest die BLÖD-Zeitung.

Inline Styles (3)

<p>Alle meine Photos sind auf
<strong style="color:#3993ff">flick<span style="color:#ff1c92">r</span>
</strong>.</p>

Alle meine Photos sind auf flickr.

Eingebettete Stylesheets

<!DOCTYPE html>
<html lang="de">
<head>
	<meta charset="utf-8" />
	<title>Das hat Stil!</title>
	<style type="text/css">
		h1 {color:red;}
		p  {font-size:12px;color:gray;}
	</style>
</head>
<body>
	<h1>Hallo rote Welt!</h1>
	<p>Dieser Text ist grau und hat eine Größe von 12 Pixeln.</p>
</body>
</html>

Externe Stylesheets

<!DOCTYPE html>
<html lang="de">
<head>
	<meta charset="utf-8" />
	<title>Das hat (noch mehr) Stil!</title>
	<link rel="stylesheet" type="text/css" href="default.css">
</head>
<body>
	<h1>Hallo rote Welt!</h1>
	<p>Dieser Text ist grau und hat eine Größe von 12 Pixeln.</p>
</body>
</html>

Externe Stylesheets

Und so sieht die Datei default.css aus:

h1 {
	color: red;
}

p {
	font-size: 12px;
	color: gray}

Der andere Umbruch ist nur der Übersichtlichkeit geschuldet.

Klassen und IDs

image

Klassen

Im HTML-Dokument: 

<div class="maincontent">

Im Stylesheet: 

.maincontent {
	font-size: 12px;
}

IDs

Im HTML-Dokument: 

<div id="footer">
<div id="header">

Im Stylesheet 

#footer {
	font-size: 9px;
}
#header {
	margin-left: 8px;
	text-decoration: underline;
}

Frühe Experimente (1)

image

Auch mit Stylesheets kann man Augenkrebs erzeugen!

Frühe Experimente (Quelltext)

HTML:

<BODY BGCOLOR="#FF0000" LINK="#FFFFFF" ALINK="#000000" VLINK="#FFFFFF">
   <SPAN ID="name">jörg</SPAN>
   <SPAN ID="subt">www.schockwellenreiter.de</SPAN>
   <DIV ID="text">
   Diese Seiten sind mein Experimentierfeld. Sie dienen dazu,
   Versuche mit Cascading Style Sheets und anderen DHTML-Elementen
   anzustellen, um irgendwann einmal ein Design zu finden, das auch
   der <A HREF="http://www.stylepolice.de/">stylepolice</A>
   genügt.</DIV>
</BODY>

Frühe Experimente (1 - CSS)

body {
  margin-left: 10em;
  margin-right: 10em;
}
#name {
  font-family: Verdana, Helvetica, sans-serif;
  font-style: italic;
  font-weight: bold;
  font-size: 100px;
  color: blue;
  position: absolute;
  top: 100px;
  left: 250px;
}
#subt {
  font-family: Times, serif;
  font-size: 60px;
  color: #999933;
  position: absolute;
  top: 145px;
  left: 50px;
}

Frühe Experimente (2 - CSS)

#text {
  font-family: Verdana, Helvetica, sans-serif;
  font-size: 18px;
  line-height: 36px;
  color: white;
  position: absolute;
  top: 210px;
  left: 250px;
}
a {
  text-decoration: none;
}

Frühe Experimente (2)

image

Frühe Experimente (3)

image

Frühe Experimente (4)

image

Ein Beispiel aus meinem Buch

image

Zum Nachbauen … (Seite 105-110)

Clara ohne Stil

image

Das ist die Seite in HTML pur (ohne CSS).

Clara mit Stil

image

Und dann ein wenig CSS-Zauberei und aus der gleichen HTML-Datei wird diese Seite.

Ein kleines Projekt

image

Eine persönliche Homepage ansprechend gestalten

Die Ordner und Dateien

image

Das HTML5-Grundgerüst

<!DOCTYPE html>
<html lang="de">
<head>
   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <link rel="stylesheet" href="css/jj.css" type="text/css" />
   <title>Jörg Kantel und Joey</title>
</head>
<body>

</body>
</html>

Die ersten CSS-Anweisungen

body {
   background-image: url("jj.jpg");
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-position: center center;
   background-size: cover;
   -moz-background-size: cover;
   -webkit-background-size: cover;
   -o-background-size: cover;
}

Die letzten drei Zeilen machen das Stylesheet auch für ältere Browser fit: -moz- für Firefox 3.6, -webkit- für Safari 3 und Chrome 1 und -o- für Opera 9.5.

Zwischenergebnis 1

image

Zum Photo

Die Vorstellung

Im <body> der HTML-Seite:

<h1>Jörg Kantel und Joey</h1>
<h2>Chaoten auf sechs Pfoten</h2>

Und im Stylesheet:

h1 {
   font-family: Verdana, sans-serif;
   font-size: 350%;
   color: #ffffff;
   margin: 10% 5% 10px 5%;
}
h2 {
   font-family: Verdana, sans-serif;
   font-size: 200%;
   color: #ffffff;
   margin: 0% 5% 10px 5%;
}

Zwischenergebnis 2

image

Ein wenig Text hinzugefügt:

<div id="article">
   <p>
   Jörg und der Sheltie Joey bevölkern seit
   Mai 2013 die Agility-Turnierplätze der
   Republik. Unser lautstarkes Motto lautet:
   »Shelties bellen nicht!«</p>
   <p>
   Das Ergebnis unserer bisherigen
   sportlichen Erfolge läßt sich so
   zusammenfassen: »Der Hund ist gut,
   aber an dem Hundeführer müssen wir noch
   arbeiten.«</p>
</div>

Und ein wenig CSS:

#article {
   font-family: Georgia, Times, "Times New Roman", serif;
   font-size: 200%;
   color: #ffffff;
   text-shadow: 1px 1px 0 #333333;
   width: 50%;
   max-width: 600px;
   margin: 0% 5% 10px 5%;
}

Der leichte Schatten im Text bewirkt, daß dieser auch vor hellem Hintergrund gut lesbar bleibt. Daher habe ich ihn mit 3px für den <h1>- und mit 2px für den <h2>-Tag ebenfalls noch eingefügt.

Zwischenergebnis 3

image

… und Links

HTML:

<p>
Trefft uns auf <a href="https://www.facebook.com/joerg.kantel">
<strong style="color:#ffffff; background-color: #3B5998; padding: 2px;">
facebook</strong></a> und
<a href="http://www.flickr.com/photos/schockwellenreiter/?details=1">
<strong style="color:#3993ff">flick<span
style="color:#ff1c92">r</span></strong></a>.</p>

… und Links

CSS:

a {
   font-family: Verdana, sans-serif;
   text-decoration: none;
}
a:hover {
   opacity: .6;
   transition: opacity .4s ease;
   -moz-transition: opacity .4s ease;
   -webkit-transition: opacity .4s ease;
   -o-transition: opacity .4s ease;
}

Voilà …

image

Helfen lassen (1)

Template Engines

RubyFrontier (1)

image

RubyFrontier (2)

Perl Template Toolkit (1)

image

Perl Template Toolkit (2)

Helfen lassen (2)

image

MAMP

MAMP

Helfen lassen (3)

Bootstrap

image

Bootstrap

Bootstrap (2)

image

Eine Bootstrap-Site muß nicht wie eine Bootstrap-Site aussehen (diese Site wurde von mir mit Bootstrap und RubyFrontier gebaut)

Entwicklungsumgebung

Für die Entwicklung von HTML-Seiten genügt eigentlich ein normaler Texteditor, es macht die Sache aber einfacher, wenn man sich eine Entwicklungsumgebung einrichtet:

Entwicklungsumgebung (2)

Von der Website zur App

Mit

lassen sich mittlerweile Anwendungen bauen, die von einer nativen Applikation auf dem Desktop, dem Tablet oder dem Smartphone nicht mehr zu unterscheiden sind. Doch das ist der Stoff für ein weiteres Tutorial.

Danke!

Danke für die Aufmerksamkeit und die Mitarbeit.


URL: folien.kantel-chaos-team.de/slidesfolder/internetwie.html