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
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"> <!--unser wichtigstes Element um die Seitenstruktur zusammenzuhalten-->
<header> <!--der Kopf-Bereich meiner Webseite (z.B. ein banner-Bild)-->
<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> <!--ende container-->
</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"> <!--unser wichtigstes Element um die Seitenstruktur zusammenzuhalten-->
<header> <!--der Kopf-Bereich meiner Webseite (z.B. ein banner-Bild)-->
<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> <!--Die gelieferten Angaben von Google sind nicht HTML 5 valide-->
<!--<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" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>-->
<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>
<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>
<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 width="560" height="315" src="
<iframe src="
<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>
<!--Wenn der Browser das angegebene Videoformat nicht anzeigen kann, erhält der User eine Textnachricht.-->
</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> <!--ende container-->
</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="
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.
float und clear sind vollkommen veraltete Techniken.
Schade das Ihr so eine Mist noch lernen müsst. Aber das ist ein typisches Problem auf Schulungen. die Ausbilder müssen selbst erst gebildet werden und meist sind das nicht die hellsten Lampen im Saal.
Falls Du ernsthaft mehr Berufschancen haben willst. Lerne unbedingt JavaScript und PHP. HTMl ist heute kaum mehr als schmückendes Beiwerk. Als Webgestalter haben die letzten Menschen im Jahr 2000 Geld damit verdient, nachdem die endlose Weller der arbeitslosen Designer losging.
PS: Schau Dir mal das Flex-Modell an. Damit hast du gefühlt Milliarden mal weniger Ärger und Aufwand.
Für Deinen Quellcode solltest Du eine andere Formatierung verwenden. Der wird bei Steemit ganz komisch angezeigt. Oder schau mal nach solchen Services wie Pastebin oder so, so Du den separat verlinken kannst.
Wenn Du Beispieldateien einbindest, wäre funktionierende Video ganz gut. Mit HTML kannst Du auch bei Steemit selber Deine Seiten gespalten und hast da gleich eine echte Grundlage zum üben.
hier noch eine nette Sammlung, die ich mal über die Jahre zusammengetragen habe. Da sind Liveditoren dabei zum testen.
Viel Spaß damit und viel Erfolg bei der Ausbildung!
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Das Problem liegt im Prinzip nicht bei diesem "Mist", sondern noch auf einer ganz anderen Ebene.
So bin ich zum einen als Diplom-Chemiker ausgebildet worden, habe es sogar zum Dr. rer. nat gebracht, es dann aber trotzdem nicht in den regulären Arbeitsmarkt geschafft. Mir dafür allein die Schuld zu geben wäre etwas zu kurz gegriffen, da in den Kursen bei alfatraining auch noch jede Menge anderer Leute sitzen, die zwar meist nicht promoviert sind, mir in ihren Bereichen, für die sie beruflich ausgebildet worden sind und in denen sie ihre Berufserfahrung gesammelt haben, an Kompetenz und Qualifikation aber in nichts nachstehen. Es kommen da im Prinzip Leute wie ich, die nie auf dem ersten Arbeitsmarkt Fuß fassen konnten, mit Leuten zusammen, die im fortgeschrittenen Alter entlassen wurden und nun so einfach keinen Wiedereinstieg schaffen können. Ebenfalls gibt es auch jüngere Leute, die sich hier umschulen lassen oder eine Zusatzqualifikation haben wollen. Manche Singles wie ich, manche aber auch mit Familien im Hintergrund. Allen ist jedoch gemeinsam, daß zumeist das Arbeitsamt oder das Jobcenter diese Maßnahmen finanziert. Und das, obwohl angeblich kompetente Fachkräfte wie wir händeringend für den deutschen Arbeitsmarkt gesucht werden. Wie kann es denn dann sein, daß in unserem Fall quasi der Steuerzahler und nicht der Arbeitgeber, der Betrieb, die Firma oder der Konzern für diese Ausbildung aufkommt?
In anderen Bereichen als dem Online-Marketing-Manager, dem Online-Social-Media-Manager und dem Online-Redakteur werden bei alfatraining sogar Ausländer zum Beispiel aus Syrien und anderen arabischen Staaten unter anderem in Dingen wie SAP ausgebildet. Ich habe einmal gehört, daß die Unternehmervertreter von den vielen ausländischen Fachkräften schwärmen, die nun vermehrt nach Deutschland strömen. Wenn diese nun bereits Deutsch können, und das müssen sie, um bei alfatraining dem Unterricht folgen zu können, wieso müssen solche Fachkräfte dann überhaupt noch so umfassend ausgebildet werden? Müßten Fachkräfte, die aus dem Ausland kommen und angeblich so gut und kompetent sind, nicht in kürzester Zeit einsatzbereit sein? Oder werden hier nur wieder Leute geparkt und aus der Statistik entfernt, genauso wie es mit den Deutschen schon seit längerem geschieht?
In unser neuen großen Koalition haben wir ja jetzt eine Beauftragte für Digitalisierung. Ich habe diesbezüglich manchmal den Eindruck, daß in Deutschland so verschiedene Entwicklungen schlicht verpennt wurden und jetzt auf die Schnelle nachgeholt werden sollen. Jedenfalls bekam ich bei alfatraining von anderen Mitschülern bereits gesagt, daß mittlerweile kein Redakteur mehr ohne Online-Erfahrung auskommt. Was aber würde einen normalen Redakteur dann von einem Online-Redakteur unterscheiden?
Meiner Meinung nach sind mit diesen Lehrgängen im Wesentlichen drei Dinge beabsichtigt:
Erstens die Leute aus der Statistik herausrechnen zu können und diesen weiszumachen, daß sie nach Ende solcher Maßnahmen auf dem ersten Arbeitsmarkt wieder gute Chancen hätten. Wenn ich jedoch in den Stellenanzeigen sehe, daß meist Leute mit einem Studium oder einem Hintergrund in Journalismus oder Kommunikationswissenschaften gesucht werden, ist dies ein aussichtsloses Unterfangen. Zumal potentielle Arbeitgeber hier ja auch nicht mit im Boot sitzen.
Zweitens die verpennte Digitalisierung nachzuholen, was jedoch sehr schwer möglich und sehr langwierig ist.
Drittens neben dem ersten Arbeitsmarkt einen prekären Arbeitsmarkt zu schaffen, der die Arbeitgeber dann mit hochqualifizierten, billigen und austauschbaren Fachkräften versorgt ohne daß die Arbeitgeber hier groß etwas finanzieren müssen. Diese können eher noch die Gewinne abschöpfen und festangestellte teure Fachkräfte entlassen, während die Steuerzahler sowie die Teilnehmer dieser Maßnahmen die Zeche in Form von Altersarmut und dem baldigen Zerfall der Sozialsysteme zahlen müssen, die so auf Dauer nicht mehr finanziert werden können.
Mit PHP und Java-Script beschäftigen wir uns gegenwärtig auch, weil wir diese Woche damit angefangen haben, uns mit Wordpress zu beschäftigen, wo dieses ebenfalls vorkommt. In Anbetracht der Tatsache, daß wir jedoch lediglich 2 Wochen für Adobe Photoshop CC, lediglich 2 Wochen für Adobe InDesign CC, lediglich 2 Wochen für Programmierung und dann lediglich zwei Wochen für ein Contentmanagementsystem wie Wordpress haben, bleibt uns nur eine sehr kurze Zeit, die nicht für eine Vertiefung reicht. Ein komplettes Informatikstudium kann in dieser Zeit nicht durchgezogen werden. Ich habe jedoch vor, mich nach Ende dieser Maßnahme selber in diesem Bereich weiterzubilden, so mir dies zeitlich und anderweitig möglich ist. Dann komme ich auch gerne auf das Flex-Modell zurück. Gegenwärtig aber muß ich erst einmal alles dransetzen, diesem Lehrgang folgen zu können und meine Zeit und meinen Aufwand dafür verwenden.
Daß bei Steemit einiges ganz merkwürdig angezeigt wird, habe ich bereits gemerkt. Ich habe aber momentan kaum die Zeit mich damit näher zu beschäftigen. Momentan bin ich froh, den Lehrgang machen zu können und hier bei Steemit ab und an einiges dazu einzustellen.
Das mit dem HTML bei Steemit ist eine gute Idee und ich werde dies auf jeden Fall einmal versuchen, wenn ich wieder etwas mehr Freiraum habe und so experimentieren kann. Denn auch für diese Übungszwecke veröffentliche ich Dinge auf Steemit.
Auf jeden Fall aber schon einmal vielen Dank für die guten Ratschläge.
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Wordpress in 2 Wochen. Oh man. Aber Ich schätzt Dich schon so ein, dass Du sehr auffassungsfähig bist. Mein Kommentar war übrigens nicht persönlich. Ich würde Dir nie Vorwürfe machen oder was gegen Dich sagen ohne Dich zu kennen. Nein, ich meine immer nur die Sache. Was Du schreibst ist absolut nachvollziehbar.
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit