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.
Montag, 26.2.2018
Diese Woche begann für mich sehr interessant. Zunächst einmal mußte ich mich mit den meisten anderen von unserer Dozentin sowie von einigen Klassenkameraden unserer Online-Klasse verabschieden. Dafür stießen gleich am Montag neue Klassenkameraden sowie ein neuer Dozent dazu. Der Dozent unterrichtete diesmal von Stuttgart aus.
Wir fingen nun mit der Herstellung eigener Webseiten und Internetpräsentationen an. Zu diesem Zweck lernten wir zunächst einmal den Text-Editor kennen. Dies ist ein kleineres Programm, welches auch unter der Bezeichnung Editor in nahezu jedem Computer oder Laptop zu finden ist.
Nach Öffnen dieses Programmes schrieben wir dann unsere erste kleinere Webseite selbst, die nachfolgend aufgeführt ist:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Grundgerüst HTML 5 Dokument Webdesign Stuttgart</title>
</head>
<body>
<h1>Mein erstes HTML 5 Dokument</h1>
</body>
</html>
Wir lernten, daß ein jedes HTML-Dokument mit <!DOCTYPE HTML> beginnen muß. Danach erfolgt dann der Hauptbereich, welcher mit <html> eingeleitet sowie mit </html> beendet werden muß. In diesem Hauptbereich muß alles, was für die Webseite wichtig ist, eingetragen werden.
Gleich als nächstes folgt der Kopfbereich, welcher mit <head> eingeleitet sowie mit </head> beendet werden muß. Hier wird alles eingetragen, was für weitere Prozeduren und Identifikationen bezüglich dieser Webseite wichtig ist.
Das erste wichtige ist der Punkt <meta charset="UTF-8">. Bei diesem Punkt geht es um den Zeichensatz für das HTML-Dokument. Zum einen gibt es den Schriftsatz UTF-8, der im Prinzip der Schriftsatz für die westliche Welt sowie für die westliche Schreibweise ist. Allerdings existieren auch noch andere Schriftsätze, die innerhalb eines HTML-Dokumentes andere Parameter einfordern. Besonders kompliziert wird es dann für Schriftsätze in arabisch, kyrillisch, chinesisch, japanisch oder in irgendeiner anderen kulturellen Eigenart. Jedoch werden diese nicht unterrichtet, da wir uns für die Einführung in HTML erst einmal auf den gängigen westlichen Standard beschränken wollen.
Der nächste wichtige Punkt muß dann zwischen <title>und </title> stehen. Dies ist die Überschrift, die später auch oben im Reiter der Internetseite sichtbar ist. Dinge wie <...> </...> werden übrigens als tags bezeichnet. Es gibt hier tags wie <...> die wichtige Felder und Funktionen öffnen sowie tags wie </...> die diese dann wieder schließen. Jeweils ein Paar von tags gehört zusammen und beide tags müssen in einer Einheit zwingend vorhanden sein.
Danach wird hier mit </head> der Kopfbereich erst einmal beendet.
Es folgt dann zwischen <body> und </body> der Bereich, der nun wichtig sowie maßgeblich auch auf der Internetseite zu sehen ist.
In diesem body-Bereich haben wir zunächst nur <h1>Mein erstes HTML 5 Dokument</h1> untergebracht. h1 ist eine Standardüberschrift in HTML. Mindestens eine h1 muß in einem jeden HTML-Dokument zwingend vorhanden sein.
Gespeichert werden muß dieses Dokument im Übrigen mit der Endung .html. Nur dann kann es sowohl im Editor geöffnet werden als auch in irgendeinem Internetbrowser wie Google Chrome, Firefox oder Internet Explorer. Dort ist dann erst einmal nur der Text Grundgerüst HTML 5 Dokument Webdesign Stuttgart oben im Reiter sowie der Text Mein erstes HTML 5 Dokument auf der Internetseite zu sehen.
Wird im Browser irgendwo auf dieser Internetseite die rechte Maustaste geklickt und dann in dem sich öffnenden Fenster mit der linken Maustaste wieder Seitenquellentext anzeigen geklickt, so erscheint unter einem anderen Reiter genau das HTML-Textwerk, welches im Editor erstellt wurde. Auf diese Weise läßt sich übrigens jedes HTML-Dokument einer jeden Internetseite überprüfen.
Als nächstes erstellten wir uns im Editor ein zweites Dokument:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>HTML Kommentare</title>
</head>
<body>
<h1>HTML Kommentare</h1>
<h2>Mit HTML-Kommentaren können wir Textbereiche aufbauen die NICHT im Browserfenster sichtbar sind.</h2>
<!--
<p>Hier wird gerade ein toller Text vorbereitet...</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>
</body>
</html>
Wie sehr gut zu sehen ist, ist der Kopfbereich unter head mit dem Kopfbereich des ersten Dokumentes völlig identisch. Bis auf den title, der hier HTML Kommentare heißt, was beim Öffnen mit einem Browser oben im Reiter auch abgebildet ist.
Der maßgebliche Unterschied ist nun im body-Bereich auszumachen.
Nicht nur die Hauptüberschrift unter h1 hat hier in HTML Kommentare gewechselt.
Zusätzlich ist auch noch eine weitere Überschrift zwischen <h2> und </h2> mit der Bezeichnung Mit HTML-Kommentaren können wir Textbereiche aufbauen die NICHT im Browserfenster sichtbar sind. zu sehen. h2 ist eine untergeordnete Überschrift, die ebenfalls bei HTML abgerufen werden kann. Auch diese Überschrift ist noch beim Öffnen der Webseite in irgendeinem Browser zu sehen.
Unter dieser Überschrift h2 folgt dann aber die Konstruktion <!--<p>Hier wird gerade ein toller Text vorbereitet...</p>--> Alles was zwischen <!-- und --> steht ist ein Kommentar, der nicht auf der Internetseite erscheint, sondern lediglich eine Bedeutung für den Hersteller des HTML-Dokumentes sowie für die Personen hat, welche dieses HTML-Dokument weiter bearbeiten wollen. Unter Seitenquellentext anzeigen werden solche Kommentare aber auch eingeblendet.
Es folgt dann der Bereich zwischen den tags <p> und </p>. Hier wurde lediglich ein Beispieltest eingegeben, der im Netz unter http://www.loremipsum.de/ kopiert wurde. Wichtig ist hier, daß aller geschriebene Text zwischen diesen tags auch auf der Internetseite erscheint. Im Prinzip sind die Bereiche zwischen diesen p-tags textmäßig also die Hauptfüllbereiche auf der jeweiligen Webseite.
Enden tut auch dieses Dokument wieder mit </body> (Abschluß des Hauptkörpers) sowie mit </html> (Ende des gesamten HTML-Dokumentes).
Wir stellten dann noch ein drittes HTML-Dokument her, welches wie folgt aussah:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>HTML Überschriften</title>
</head>
<body>
<h1>Überschrift 1. Ordnung</h1>
<h2>Überschrift 2. Ordnung</h2>
<h3>Überschrift 3. Ordnung</h3>
<h4>Überschrift 4. Ordnung</h4>
<h5>Überschrift 5. Ordnung</h5>
<h6>Überschrift 6. Ordnung</h6>
<h7>Überschrift 7. Ordnung? Nein, die gibt es nicht. Der h7-tag wird nicht interpretiert.</h7>
<p>Ich bin ein Textabsatz, englisch "paragraph".</p>
<p>Textabsätze und auch Überschriften sind Block-Elemente. Sie bilden einen Absatz. Das nachfolgende Element steht immer in einer neuen Zeile.</p>
</body>
</html>
Wieder bleibt der obere und der head-Bereich dieses HTML-Dokumentes mit dem der anderen Dokumente identisch. Was sich einzig ändert ist die Zeile <title>HTML Überschriften</title>, da hier jetzt eine andere Überschrift eingegeben wurde.
Wesentliche Änderungen fanden dann wieder von den tags <body> bis </body> statt. Wir testeten hier einmal aus, wieviele Überschriften es bei HTML denn so gibt, indem wir von h1 nach h2 nach h3 und immer weiter gingen. So stellten wir fest, daß es Überschriften bis hin zur 6. Ordnung gibt. Eine Überschrift 7. Ordnung existiert nicht mehr. Diese h7 wird von HTML als ganz normaler Text wie unter den p-tags interpretiert. Zum Vergleich wurde noch einmal ein Text zwischen zwei p-tags geschrieben. Wird dieses HTML-Dokument in irgendeinem Browser geöffnet, so ist der Text bei jeder h-Überschrift größer als 6 nicht mehr von den normalen p-Texten zu unterscheiden.
Bezeichnend ist hier ebenfalls, daß es auf der Webseite, die von einem HTML-Dokument abgebildet wird, immer einen Absatz zwischen den jeweiligen tags <...> und </...> stehenden Elementen gibt. Dabei ist es ganz egal, wieviele Absätze im dazugehörigen HTML-Dokument gelassen wurden. Wichtig ist hier vor allem der folgende zwischen den letzten p-tags stehende Satz:
Textabsätze und auch Überschriften sind Block-Elemente. Sie bilden einen Absatz. Das nachfolgende Element steht immer in einer neuen Zeile.
Wir stellten schließlich noch ein weiteres HTML-Dokument her, welches wie folgt aussah:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>HTML verschachteln</title>
</head>
<body>
<h1>HTML verschachteln</h1>
<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. <strong>Eine wichtige Hervorhebung</strong> 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. <em>Eine starke Betonung</em> 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><strong>Merksatz:</strong> Inline-Elemente erzwingen keinen Absatz, sie laufen in der Zeile mit.</p>
</body>
</html>
Oben bei head ändert sich höchstens <title>HTML verschachteln</title>.
Unten bei body ändert sich aber nicht nur <h1>HTML verschachteln</h1>.
Innerhalb der dann folgenden p-Texte gibt es zusammengehörige tags wie zum Beispiel <strong>Eine wichtige Hervorhebung</strong>. Wird dieses HTML-Dokument einmal als Internetseite aufgerufen, so erscheint der Text zwischen <strong> und </strong> dort fett gedruckt. Daß es sich dabei um Eine wichtige Hervorhebung handelt wurde durch den Text ja schon angedeutet.
Gleich in dem folgenden p-Text stehen dann tags wie <em>Eine starke Betonung</em>. Als Webseite im Browser aufgerufen erscheint dieser Text kursiv.
Das folgende Wort Merksatz ist dann durch strong wieder fett gedruckt.
Danach stellten wir ein weiteres HTML-Dokument her, welches wie folgt aussah:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>HTML Zeilenumbruch</title>
</head>
<body>
<h1>HTML Zeilenumbruch</h1>
<p>Innerhalb von Elementen die Text beinhalten umbricht der Browser automatisch, wenn das Ende des Browserfensters erreicht ist. <br> Ein Zeilenumbruch kann jedoch an jeder gewünschten Stelle erzwungen werden.</p>
<p>br steht für <strong>break</strong> Englisch= Unterbrechung </p>
<h3>Rezept für Pfannkuchen:</h3>
<p>125 g Mehl<br> 2 Eier<br> 1 Becher Milch<br> 1 Prise Salz</p>
<h3>Zeilenumbruch verhindern</h3>
<p>Es gibt viel worin sich HTML 4 und HTML 5 unterscheiden.</p>
<p><strong>nbsp</strong> non breaking space = geschütztes Leerzeichen.</p>
</body>
</html>
Wichtig ist hier vor allem der folgende Satz:
Innerhalb von Elementen die Text beinhalten umbricht der Browser automatisch, wenn das Ende des Browserfensters erreicht ist. <br> Ein Zeilenumbruch kann jedoch an jeder gewünschten Stelle erzwungen werden.
Dieser Zeilenumbruch wird durch <br> erreicht, was in der nachfolgenden Liste einmal dargestellt ist. Auf der Webseite stehen die Zutaten für den Pfannkuchen in der Liste ordentlich untereinander.
Schließlich kamen wir noch darauf zu sprechen, daß es mittlerweile mehrere Editionen von HTML gibt. Wir selbst benutzen HTML 5 und es gibt vieles, worin sich dieses von HTML 4 unterscheidet.
Sollen innerhalb eines Textes bei HTML bestimmte Zeichen wie < oder > in einem auf der Webseite sichtbaren Text dargestellt werden, so geht das nicht so ohne weiteres, da es sich bei solchen Zeichen um Symbole handelt, mit denen HTML ja dirigiert und strukturiert wird. Diese geschützten Leerzeichen können aber wie unter https://wiki.selfhtml.org/wiki/Referenz:HTML/Zeichenreferenz beschrieben dargestellt werden. So zum Beispiel das Zeichen < indem bei html einfach < in den Text geschrieben wird.
Damit endete für uns der Montag und die erste Lektion in HTML. Wichtig ist hier nur noch, daß beim Erstellen, beim Speichern oder beim Öffnen eines Dokumentes im Text-Editor darauf geachtet werden muß, daß die Codierung stets UTF-8 lautet und daß diese Dateien unter .html und nicht unter .txt abgespeichert werden. Unter alle Dateien (*.*) lassen sich die .html-Dateien dann aber bequem wieder im Text Editor öffnen.
Natürlich ist ein jeder Leser hier bei Steemit dazu aufgerufen, die beschriebenen Dinge nachzumachen und HTML sowie später auch CSS nach meinen Beschreibungen selber zu lernen. Um die Entwicklung bei eigenen Versuchen sowie später bei try and error selber verfolgen zu können, läßt sich alles im Text-Editor, wenn dies einmal richtig gespeichert wurde, jederzeit mit der Tastenkombination Strg und S erneut speichern und so aktualisieren. Wird dieses HTML-Dokument dann noch als Webseite aufgerufen, so läßt sich dort durch das Drücken der F5-Taste auch diese Webseite jederzeit aktualisieren. So läßt sich durch den Wechsel zwischen Text-Editor und Browser die Entwicklung der Webseite bei Veränderungen im HTML-Dokument ganz gut verfolgen. Man sollte es sich aber zur Gewohnheit machen, die jeweiligen HTML- und später auch CSS-Dateien lediglich mit Kleinbuchstaben abzuspeichern und anstatt Leerzeichen immer _ einzusetzen. Auch die Laute ä,ü,ö sowie das ß sollten hier unterbleiben, da die jeweiligen Dateien sonst in einigen Fällen nicht erkannt werden können.