Teil 9 Weitere Grundlagen Webdesign HTML und CSS

Auch dieser Teil wird wegen der Menge an Stoff und an wichtigen Informationen nach und nach veröffentlicht. So wird hoffentlich auch der Leser dem Stoff besser folgen können.

Mittwoch, 7.3.2018

An diesem Tag lernten wir, fremde Schriften aus dem Internet in unser Programm einzubinden. Wir gingen dazu auf

https://fonts.google.com/

wo wir auf eine umfangreiche Auswahl an Schriften trafen. Nachdem wir uns dort eine Schrift ausgewählt hatten, klickten wir bei dieser Schrift das rote Kreuz rechts oben, welches für Select this font steht. Es erscheint dann unten am Bildschirm 1 Family selected, was ebenfalls angeklickt wird. Dort ist zunächst einmal unter Embed font und unter Standard ein Link für das HTML-Dokument zu finden, welcher dort oben im header-Bereich eingebunden wird. Das ganze sieht dann wie folgt aus:

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>CSS Google Webfonts</title>

<link href="style.css" rel="stylesheet" type="text/css">

<link href="https://fonts.googleapis.com/css?family=Amatic+SC" rel="stylesheet">

</head>

<body>

<div id="container"> 

<header> 

<p>der header-Bereich meiner Webseite</p>

</header>

<nav>

<ul id="hauptnavi">

<li><a href="#">Startseite</a></li>

<li><a href="#">Service</a></li>

<li><a href="#">Kontakt</a></li>

</ul>

</nav>

<main>

<h1>CSS Google Webfonts. Meine Überschrift 1. Ordnung</h1>

<p class="blau">Die einfachste Art Webfonts in die eigene Webseite einzubinden bietet z.B. Google an.

Unter <a href="https://fonts.google.com" target="_blank">GOOGLE WEBFONTS</a> finden wir eine umfangreiche Auswahl.</p>

<p class="blau">Bei unserer h1-Überschrift wurde der Link zur Schriftfamilie im head-Bereich unseres HTML-Dokuments eingebunden.<br>

Die Zuordnung der font-family erfolgt dann im CSS für den jeweiligen tag.</p>

<h2>Überschrift 2. Ordnung</h2>

<p class="blau">Bei unserer h2-Überschrift wurde der Link zur Schriftfamilie im CSS-Dokument eingebunden.<br>

Die Import-Anweisung einer Schriftfamilie in der CSS-Datei sollte der erste Eintrag sein.<br>

Die Zuordnung der font-family erfolgt dann im CSS für den jeweiligen tag.</p>

<p>Lorem ipsum … sit amet.</p>

<p>Lorem ipsum … sit amet.</p>

<p>Lorem ipsum … sit amet.</p>

</main>

<aside>

<p>rechte Spalte</p>

</aside>

<footer class="floatstop">

<p><a href="#">Impressum</a></p>

<p>der Fussbereich meiner Webseite</p>

</footer>

</div> 

</body>

</html>

Der Rest des HTML-Dokumentes läuft, bis auf das <link href="https://fonts.googleapis.com/css?family=Amatic+SC" rel="stylesheet"> wieder wie bereits bekannt. Weiter muß dann aber noch der bei Google fonts unter @import stehende Link bis auf die tags <style> und </style> in das CSS-Dokument eingebunden werden. Dies geschieht wie folgt:

@charset "utf-8";

/* CSS Document */

@import url('https://fonts.googleapis.com/css?family=Aladin'); /*die Import-Anweisung einer Schriftfamilie sollte der erste Eintrag in der CSS-Datei sein*/
* { /*Universalselektor*/

margin: 0; /* alle vom Browser voreingestellten Abstandwerte werden auf NULL gesetzt*/

padding: 0;

}

body {

background-color: #D9D9D9;

}

h1 {

font-family: 'Amatic SC', cursive;

font-size: 55px;

line-height: 60px;

color: #D0B110;

margin-bottom: 35px;

}

h2 {

font-family: 'Aladin', cursive;

font-size: 88px;

line-height: 70px;

}

p {

margin-bottom: 25px;

}

p.blau {

padding: 5px;

color: #FFFFFF;

margin-bottom: 45px;

background-color: #0E65CD;

}

p.blau a {

color: #FBE30F;

background-color: #CC0C0F;

}

a {

text-decoration: none; /*alle Unterstriche fuer diese Webseite entfernen*/

}

#container { /*eine id wird mit dem Rautesymbol eingeleitet. Sie darf innerhalb eines HTML-Dokuments nur 1X notiert werden*/

width: 1000px;

padding: 25px;

/*margin: 50px 0px 100px 78px;*/ /*Zusammengefasste Schreibweise fuer alle 4 Seiten eines Elements*/

margin: 0px auto;

border:15px solid #0046BA;

/*height: 700px;*/ /*wurde nur fuer Layoutzwecke benoetigt*/

background-color: #FFFFFF;

}

header {

height: 100px;

background-color: #279606;

}

nav {

/*background-color: #D53437;*/

}

/*----------------Meine Hauptnavigation----------------------------------*/

ul#hauptnavi {

height:40px;

margin-bottom: 100px;

background-color: #39A5F3;

}

ul#hauptnavi li {

float: left;

width: 250px;

margin-right: 15px;

margin-bottom: 10px; /*erzwingt einen Aussenabstand nach unten*/

list-style: none;

/*background-color: #F339E6;*/

}

ul#hauptnavi li a {

display: block; /* wandelt ein inline-Element in ein block-Element*/

color: #FFFFFF;

text-decoration: none; /*entfernt den Unterstrich beim a-tag*/

text-align: center; /*zentriert den Text unseres a-tags*/

padding: 15px; /*Innenabstand eines eines Elements zu seiner eigenen Elementgrenze*/

background-color: #F33939;

}

ul#hauptnavi li a:hover { /*eine Pseudoklase wird immer mit dem : eingeleitet*/

background-color: #600809;

}

/*----------------Ende Hauptnavigation----------------------------------*/

main {

float: left;

width: 600px;

/*height: 350px;*/ /*wurde nur fuer Layoutzwecke benoetigt*/

padding: 60px;

margin-right: 25px;

margin-bottom: 25px;

/*text-align: justify;*/

line-height: 35px;

/*background-color: #C0C0C0;*/

}

aside {

float: right;

width: 200px;

height: 400px;

padding: 15px;

border-left: 2px solid #787676;

/*background-color: #548237;*/

}

footer {

padding: 15px;

background-color: #AAA3A3;

}

.floatstop {

clear: both;

}

Die wichtige Zeile ist hier @import url('https://fonts.googleapis.com/css?family=Aladin'); Diese Import-Anweisung einer Schriftfamilie sollte der erste Eintrag in der CSS-Datei sein. Wie unter h1 zu sehen wird dann einfach die font-family eingegeben. Die Eingabedaten stehen bei Google fonts unter Specify in CSS und zwar als font-family: 'Amatic SC', cursive; So kann im Prinzip eine jede Schrift über Google in die eigene Webseite eingefügt werden.

Wir lernten dann schließlich auch Medien in unsere Webseite einzubinden. Dies ist am folgenden HTML-Dokument zu sehen:

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>CSS Google Webfonts</title>

<link href="style.css" rel="stylesheet" type="text/css">

<link href="https://fonts.googleapis.com/css?family=Amatic+SC" rel="stylesheet">

</head>

<body>

<div id="container"> 

<header> 

<p>der header-Bereich meiner Webseite</p>

</header>

<nav>

<ul id="hauptnavi">

<li><a href="#">Startseite</a></li>

<li><a href="#">Service</a></li>

<li><a href="#">Kontakt</a></li>

</ul>

</nav>

<main>

<h1>CSS Medien einbinden</h1> 

<h3>GOOGLE Maps einbinden</h3>

<p>Das Attribut frameborder muß aus dem von GOOGLE gelieferten Quellcode entfernt werden. Es ist auch ratsam alle Angaben zur Dimension und zu border aus dem Quellcode zu entfernen.</p>

<h3>Youtube Video einbinden</h3>

<p>Das Attribut frameborder/allow muß aus dem von GOOGLE gelieferten Quellcode entfernt werden. Es ist auch ratsam alle Angaben zur Dimension und zu border aus dem Quellcode zu entfernen.</p>

<iframe src="https://www.youtube.com/embed/YvTZW8y86OU?rel=0" allowfullscreen></iframe>

<h3>Eigene Medien einbinden</h3>

<p>Eigenen Film abspielen</p>

<video controls>

<source src="video/rooster.mp4" type="video/mp4">

<p>Sorry bro Dein Browser ist nicht in der Lage den Film anzuzeigen!!!</p>

</video>

<h3>Eigene Sound-Datei abspielen</h3>

<p>Audio und auch Video-tags ordnen sich nebeneinander an, wenn im CSS nichts anderes definiert ist und wenn genügend Platz in der Breite vorhanden ist.</p>

<audio controls>

<source src="video/knurrens.mp3" type="audio/mp3">

<p>Du hörst nix? Nimm mal einen aktuellen Browser!!!</p>

</audio>

<audio controls>

<source src="video/knurrens.mp3" type="audio/mp3">

<p>Du hörst nix? Nimm mal einen aktuellen Browser!!!</p>

</audio>

<h3>Dateien über einen Link aufrufen</h3>

<ul>

<li><a href="tube.pdf" target="_blank" title="unsere 48 Seiten AGB zum download">Unsere AGB</a></li>

</ul>

</main>

<aside>

<p>rechte Spalte</p>

</aside>

<footer class="floatstop">

<p><a href="#">Impressum</a></p>

<p>der Fussbereich meiner Webseite</p>

</footer>

</div> 

</body>

</html>

Unter dem tag <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2628.979465508117!2d9.175321315823112!3d48.78228227928012!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4799db31515a0303%3A0x230a18453ad71ffe!2salfatraining+Bildungszentrum+Stuttgart!5e0!3m2!1sde!2sde!4v1520416303351" allowfullscreen></iframe> wurde hier ein Google-Maps-Abschnitt in die neue Webseite eingebunden.

Es folgt die Einbindung eines Youtube-Videos, welches mit den tags <iframe src="https://www.youtube.com/embed/YvTZW8y86OU?rel=0" allowfullscreen></iframe> eingebunden wird.

Ebenfalls lassen sich aber auch eigene Video- oder Audiodateien einfügen, was mit den folgen tags geschieht:

<p>Eigenen Film abspielen</p>

<video controls>

<source src="video/rooster.mp4" type="video/mp4">

</video>

<h3>Eigene Sound-Datei abspielen</h3>

<audio controls>

<source src="video/knurrens.mp3" type="audio/mp3">

</audio>

Weiter unten ist dann noch durch <a href="tube.pdf" target="_blank" title="unsere 48 Seiten AGB zum download">Unsere AGB</a> zu sehen, wie ebenfalls andere externe Links in das HTML-Dokument und damit die Webseite eingebunden werden können.

Die Definitionen darüber, wie groß die Fenster für Google Maps oder für die Video- oder Audiodateien sein sollen erfogt dann im dazugehörigen CSS-Dokument:

@charset "utf-8";

/* CSS Document */

@import url('https://fonts.googleapis.com/css?family=Aladin'); /*die Import-Anweisung einer Schriftfamilie sollte der erste Eintrag in der CSS-Datei sein*/
* { /*Universalselektor*/

margin: 0; /* alle vom Browser voreingestellten Abstandwerte werden auf NULL gesetzt*/

padding: 0;

}

body {

background-color: #D9D9D9;

}

h1 {

font-family: 'Amatic SC', cursive;

font-size: 55px;

line-height: 60px;

color: #D0B110;

margin-bottom: 35px;

}

h2 {

font-family: 'Aladin', cursive;

font-size: 88px;

line-height: 70px;

}

p {

text-align: justify; /*erzwingt einen Blocksatz*/

margin-bottom: 25px;

}

p.blau {

padding: 5px;

color: #FFFFFF;

margin-bottom: 45px;

background-color: #0E65CD;

}

p.blau a {

color: #FBE30F;

background-color: #CC0C0F;

}

a {

text-decoration: none; /*alle Unterstriche fuer diese Webseite entfernen*/

}

iframe {

width: 100%; /*die Angabe von %-Werten ist beim Einsatz von Medien die beste Lösung, da sich der Inhalt immer auf die zur Verfüg stehende maximale Breite ausbreitet. */

height: 400px;

border:4px solid #0E4CDD;

}

.rund {

width: 400px;

height: 400px;

background-color: #E52A2D;

}

video {

width: 100%;

border:4px solid #0E4CDD;

}

audio {

/*display: block;*/ /*Standard Darstellung des Video/Audio tags ist nebeinander, wenn Platz ist*/

margin-bottom: 15px;

}

#container { /*eine id wird mit dem Rautesymbol eingeleitet. Sie darf innerhalb eines HTML-Dokuments nur 1X notiert werden*/

width: 1000px;

padding: 25px;

/*margin: 50px 0px 100px 78px;*/ /*Zusammengefasste Schreibweise fuer alle 4 Seiten eines Elements*/

margin: 0px auto;

border:15px solid #0046BA;

/*height: 700px;*/ /*wurde nur fuer Layoutzwecke benoetigt*/

background-color: #FFFFFF;

}

header {

height: 100px;

background-color: #279606;

}

nav {

/*background-color: #D53437;*/

}

/*----------------Meine Hauptnavigation----------------------------------*/

ul#hauptnavi {

height:40px;

margin-bottom: 100px;

background-color: #39A5F3;

}

ul#hauptnavi li {

float: left;

width: 250px;

margin-right: 15px;

margin-bottom: 10px; /*erzwingt einen Aussenabstand nach unten*/

list-style: none;

/*background-color: #F339E6;*/

}

ul#hauptnavi li a {

display: block; /* wandelt ein inline-Element in ein block-Element*/

color: #FFFFFF;

text-decoration: none; /*entfernt den Unterstrich beim a-tag*/

text-align: center; /*zentriert den Text unseres a-tags*/

padding: 15px; /*Innenabstand eines eines Elements zu seiner eigenen Elementgrenze*/

background-color: #F33939;

}

ul#hauptnavi li a:hover { /*eine Pseudoklase wird immer mit dem : eingeleitet*/

background-color: #600809;

}

/*----------------Ende Hauptnavigation----------------------------------*/

main {

float: left;

width: 600px;

/*height: 350px;*/ /*wurde nur fuer Layoutzwecke benoetigt*/

padding: 60px;

margin-right: 25px;

margin-bottom: 25px;

/*text-align: justify;*/

line-height: 35px;

/*background-color: #C0C0C0;*/

}

aside {

float: right;

width: 200px;

height: 400px;

padding: 15px;

border-left: 2px solid #787676;

/*background-color: #548237;*/

}

footer {

padding: 15px;

background-color: #AAA3A3;

}

.floatstop {

clear: both;

}

Es folgte dann wieder ein Nachmittag, an dem wir alle unsere neu erworbenen Fähigkeiten selber ausprobieren konnten.