Beispiel einer beruflichen Weiterqualifizierung für Arbeitssuchende zu Beginn des 21. Jahrhunderts
Teil 8: Grundlagen Webdesign HTML und CSS
In der Woche vom 26.2.2018 bis zum 2.3.2018 habe ich sehr viel gelernt. Leider müßte ich dieses Wissen auf etwa 31 seiten wiedergeben. Um den Leser hier auf Steemit nicht zu überfordern sowie ihm die Gelegenheit zu geben, meine Fortschritte zu verfolgen und auch noch selbst etwas dabei zu lernen, werde ich hier im Teil 8 jeden Tag einen Wochentag veröffentlichen. Dies dürfte für alle etwas übersichtlicher sein.
Donnerstag, 1.3.2018
Wir beschäftigten uns nun mit den Schriftfamilien und stellten dafür das folgende HTML-Dokument her:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS font-family</title>
<link href="css_font_family.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>CSS font-family</h1>
<p>Bestimmung der Schriftarten. Die Reihenfolge im Stylesheet ist entscheidend: Ist die erste Schrift auf dem Rechner des Users wird sie verwendet. Wenn nicht dann die nachfolgende usw. Die letzte Angabe sollte immer eine "generische Schriftart" welche dem Browser die Möglichkeit gibt den gewünschten Schrifttyp darzustellen.</p>
<ul>
<li>serif = Schriftart mit Serifen</li>
<li>sans serif = Schriftart ohne Serifen</li>
<li>monospace = Schriftart mit gleich breiten Zeichen</li>
<li>cursive = Schriftart für Schreibschriften</li>
<li>fantasy = Schriftart für eher ungewöhnliche Schriften</li>
</ul>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<h2>Eine Überschrift 2. Ordnung</h2>
</body>
</html>
Während in diesem Dokument lediglich die üblichen bereits bekannten Tags eingesetzt sowie zusätzlich die Schriften erklärt wurden, ist das folgende dazugehörige CSS-Dokument nun weitaus interessanter:
@charset "utf-8"; /* CSS Document */
h1 {
font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif"; font-size: 133px; /*Moegliche Angaben zur Schriftgroesse (px =Pixel, em, %)*/
color: #8121E9;
background-color: #C19C1B;
}
p {
font-family:"Courier New";
background-color: #D4D1D1;
}
Hier gibt es für die jeweiligen tag-Bereiche den Befehl font-family: und danach nach einer Leerstelle den Namen der jeweiligen Familie. Diese Familien können aus mehreren Schriften bestehen. Der Sinn ist der, daß nicht jeder Computer gleich die erste ausgewählte Schrift verarbeiten kann und so mehrere Schriften zur Wahl gestellt werden. Die Schriften innerhalb einer Schriftfamilie werden durch Kommas getrennt. Sollte eine Schriftart mit mehr als einem Wort bezeichnet werden, so werden beide Worte in Anführungszeichen geschrieben. Mit font-size: kann ebenfalls die Schriftgröße eingestellt werden. Diese wird für gewöhnlich in px angegeben.
Danach beschäftigten wir uns mit den div-tags und stellten das folgende HTML-Dokument her:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML-Element div</title>
<link href="html_element_div.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>HTML-Element div</h1>
<p>Ein <strong>div</strong> ist ein allgemeines Block-Element ohne bestimmtes Aussehen oder Bedeutung. Es dient dazu Bereiche zu gruppieren.</p>
<div>
<h2>Beispiel 1</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p><span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</span></p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</body>
</html>
Was genau ein div ist steht bereits unter der h1-Überschrift. Das dazugehörige CSS-Dokument sieht wie folgt aus:
@charset "utf-8"; /* CSS Document */
h1 {
color: #137ACF;
}
h2 {
background-color: #F32B2F;
}
p {
/*background-color: #DCDCDC;*/
}
div {
width: 350px;
/*height: 350px;*/ /*wurde auskommentiert, dient nur zu Layoutzwecken*/
color: #287B0C;
background-color: #69C4F0;
}
p span {
color: #FFFFFF;
background-color: #064BC4;
}
Das Interessante an diesem CSS-Dokument ist, daß das div-Element hier, wie auch die anderen Elemente, definiert werden kann. Mit dem Befehl width: kann die Breite und mit dem Befehl height: kann die Höhe festgelegt werden. Es ist bei allen diesen Befehlen jedoch zu beachten, daß Breite und Höhe stets in px angegeben werden und hinter jedem Befehl, auch den Farbbefehlen, stets ein ; steht. Über ein div-Element entsteht so ein rechteckiger Bereich, der, im Gegensatz zum Rest der Seite oder zu anderen Bereichen, eine eigene Schriftfarbe, Hintergrundfarbe, Schriftart, u.s.w. haben kann.
Natürlich können über das HTML-Dokument auch mehrere div-Elemente ineinander verschachtelt sein. Es ist jedoch auch möglich, daß ebenfalls span-Elemente für einzelne Wörter oder Passagen benutzt werden können. Diese sind in dem vorliegenden Beispiel ebenfalls dargestellt und können über das CSS-Dokument eigene Bereiche mit eigenen Parametern definieren. Wie an der h2-Überschrift innerhalb des div-Bereiches jedoch leicht zu erkennen ist, können die Parameter durch div-Bereiche durch eigene Definition anderer Bereiche innerhalb des div-Bereiches außer Kraft gesetzt werden. Dies ist übrigens auch bei Listenelementen innerhalb einer Liste der Fall. Es gelten stets die Parameter des zuletzt verschachtelten tag-Bereiches.
Was mit span-Elementen alles möglich ist, ist gut im nächsten HTML-Dokument dargestellt:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML-Element span</title>
<link href="html_element_span.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>HTML-Element span</h1>
<h3>Überschrift <span>3.</span> Ordnung</h3>
<p>Ein span ist ein allgemeines HTML-Element ohne bestimmtes Aussehen oder Bedeutung.Es dient ausschliesslich der <span>CSS-Formatierung</span>. </p>
<ul>
<li>Ein <span>Listenpunkt</span></li>
</ul>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo <span>©</span> et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. <span>ICH BIN EIN span</span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</body>
</html>
Das dazugehörige CSS-Dokument lautet wie folgt:
@charset "utf-8"; /* CSS Document */
h1 {
color: #137ACF;
}
p {
background-color: #DCDCDC;
}
span {
font-size: 44px;
background-color: #E5D00D;
}
Wird nun das HTML-Dokument im Browser als Webseite aufgerufen, so die besonders hervorgehobenen span-Bereiche gut zu sehen.
Als nächstes lernten wir einiges über CSS-Klassen. Zunächst einmal gaben wir dem neuen HTML-Dokument den Namen index.html da es sich hier um unsere Hauptseite handeln sollte. Und diese wird später im Internet nur gefunden, wenn genau dieser Name vorliegt. Dieses HTML-Dokument sieht wie folgt aus:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Klassen</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1 class="gruen">CSS Klassen</h1>
<p class="merksatz">Es gibt 2 Möglichkeiten, Klassen für HTML-Elemente zu notieren.</p>
<ol>
<li>freie Klassen = für keinen bestimmten HTML-Typ</li>
<li>für einen bestimmten HTML-Typ</li>
</ol>
<ul>
<li>Klassennamen dürfen nicht mit Sonderzeichen beginnen</li>
<li>Sie dürfen keine Leerzeichen enthalten</li>
<li>Sie dürfen keine Unterstriche_ oder minus-Zeichen enthalten</li>
<li>Sie dürfen nicht mit einer Zahl beginnen</li>
</ul>
<h3 class="merksatz">Überschrift 3. Ordnung mit der Klasse .merksatz? Geht nicht, den die Klasse .merksatz wurde für den HTML-Typ (p) definiert.</h3>
<div>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
<p class="gruen">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est <span class="gruen">Lorem ipsum dolor</span> sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</body>
</html>
Überall wo nun class=“...“ steht können an dieser Stelle und in diesem Element neue Parameter in das Dokument einfließen. Definiert werden diese Klassen im CSS-Dokument:
@charset "utf-8"; /* CSS Document */
h1 {
text-align: center; /*Schrift zentriert ausrichten*/
/*width: 500px;*/ /*Beispiel wie sich der Text neu ausrichtet (optisch)*/
height: 150px; color: #AF8C14;
background-color: #1DD09B;
}
p {
background-color: #F1C36D;
}
div p {
background-color: #DC74F4;
}
/*freie Klasse dies sich bei allen HTML-Elementen anwenden laesst*/
.gruen { /*eine CSS-Klasse wird immer mit einem . eingeleitet*/
background-color: #0CCD22;
}
p.merksatz { /*Klasse fuer ein bestimmtes HTML-Element*/
color: #B71315;
background-color: #ECE252;
}
Am Beispiel der Klasse .gruen (mit Punkt werden immer die Klassen im CSS dargestellt ist gut zu sehen, daß alle Bereiche mit class=“gruen“ eine grüne Hintergrundfarbe in der Webseite besitzen. Weiter muß die Klasse immer nach dem tag-Element und nach einem Leerzeichen angegeben werden. So ähnlich wie auch href und andere. Ebenfalls sind auch Verschachtelungen möglich.
Danach wurde wieder ein neues HTML-Dokument erzeugt:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Klassen 2</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1 class="gruen">CSS Klassen 2</h1>
<div>
<p>Box 1</p>
<p>Ohne weiteren Inhalt kleben die div-Boxen aneinander (hier im Beispiel wurde der p-Absatz in Box 2 auskommentiert) </p>
</div>
<div>
<!--<p>Box 2</p>-->
</div>
<div class="rot">
<p>Box 3</p>
</div>
<div class="gelb">
<p>Box 4</p>
</div>
<div class="blau">
<p>Box 5</p>
</div>
<div class="gruen">
<p>Box 6</p>
</div>
<div>
<h5>Box 7</h5>
<div class="klein"></div>
</div>
</body>
</html>
In diesem HTML-Dokument wurden den div-Elementen Klassen zugeordnet. Das dazugehörige CSS-Dokument sieht wie folgt aus:
@charset "utf-8"; /* CSS Document */
h1 {
color: #AF8C14;
background-color: #1DD09B;
}
p {
background-color: #F1C36D;
}
div {
width: 200px;
height: 200px;
background-color: #ADADAD;
}
.gelb {
background-color: #E1E017;
}
.rot {
background-color: #F10F13;
}
.blau {
background-color: #4C28DF;
background-color: #4C28DF;
background-color: #F10F13;B513;
}
.klein {
width: 80px;
height: 80px;
background-color: #2D575C;
}
p.merksatz { /*Klasse fuer ein bestimmtes HTML-Element*/
color: #B71315;
background-color: #ECE252;
}
Im Browser ist auf der Webseite sehr gut zu sehen, wie genau die einzelnen div-Elemente und Klassen wirken. Verschachtelungen sind hier ebenfalls wieder möglich.
Den Nachmittag waren wir dann wieder mit unseren eigenen Projekten beschäftigt und beendeten so den Tag.