Erstellen von www Dokumenten mit HTML

Dozent: Dr. paed. Dipl.-Kfm. Michael Schäfer

ÜBERBLICK

• HTML Grundlagen
• HTML Elemente
• CSS Grundlagen
• CSS Elemente

Was ist HTML?

HyperText Markup Language 

→ markup = Markierung, Auszeichnung

→markup language = Auszeichnungssprache

• HTML ist da, um den Inhalt einer Webseite zu strukturieren →also eine Strukturierungssprache
• HTML ist nicht für das Design zuständig, sondern nur für die Struktur → Style = CSS
• HTML ist keine Programmiersprache!
• Browser wie Mozilla Firefox, Internet Explorer oder Safari wandeln diese Informationen innerhalb weniger Sekunden in graphische Darstellungen der Webseiten um

Wozu HTML?

Die Basis des World Wide Web sind Texte mit Verweisen auf andere Texte, also Hypertext.
HTML dient dazu, diese Texte beziehungsweise Dokumente darzustellen, welche dann von Web-Browsern interpretiert und dem Nutzer angezeigt werden. 

Grundlegender Aufbau einer HTML Datei:

Bei einer HTML Datei sind folgende Dinge zu beachten:

• die Datei muss immer mit „name.htm“ oder „name.html“ gespeichert werden
• JEDE Datei muss einen eigenen, einzigartigen Namen haben
• es dürfen keine Umlaute, „ß“, Großbuchstaben, Zahlen,Sonder- und Leerzeichen verwendet werden
• Unterstriche und Minuszeichen sind erlaubt
• die Startseite wird immer „index.html“ genannt

Eine HTML Datei ist in drei Bereiche zu unterteilen.
1. Doctype

• ist dazu da, um zu „sagen“ was für ein Dokumententyp nun folgen wird, in dem Fall HTML
• außerdem befinden sich der „head“ und „body“- Teil in dem doctype Teil
• der Doctype Bereich wird als letztes mit dem tag „</html>“ geschlossen 

2. Head

• in diesem Bereich wird der Titel der Webseite definiert, den man später im Browserkopf sieht
• alle anderen Inhalte des Head Teils sind nicht sichtbar
• der Style wird über CSS in diesem Bereich beschrieben

3. Body

• hier ist der ganze sichtbare Teil des Dokuments
• alles was hier aufgeschrieben wird, erscheint in grafischer Darstellung auf der Webseite
• hier befinden sich die ganzen Tags

Was sind Tags? 

<…> = öffnendes Tag 

</..> = schließendes Tag

→ ein öffnendes und ein schließendes Tag zusammen bilden ein HTML Element

• Durch Tags wird die Struktur einer Webseite aufgezeigt
• dies kann zum Beispiel durch Listen verschiedenster Arten, Tabellen, Überschriften, etc. erfolgen
• außerdem kann dadurch der Text bzw. Zeichen formatiert werden, sodass Schriften kursiv oder fett erscheinen
• Tags begrenzen Bereiche und definieren zusätzlich dessen Funktionen

Der grundlegende Aufbau einer HTML Datei im Editor und im Browser:

Was heißt „<meta charset=“utf-8“>“?

UTF-8 ist der Unicode -Standard Zeichensatz. Dieser dient dazu, dass der Text für jede Sprache in jedem Land kompatibel ist. 

Wie kann man Texte und Zeichen mit HTML strukturieren, formatieren oder ausrichten?

Überschriften:

Überschriften können in sechs verschiedenen Ebenen dargestellt werden, dabei ist die Erste die Größte und die Sechste die Kleinste.

Diese werden mit den Elementen „<h1> & </h1>“ bis „<h6> & </h6>“ beschrieben. 

Universalelemente:

Bei den Universalelementen wird unterschieden zwischen SPAN und DIV.
Durch <div>&</div> werden Zeilenumbrüche verursacht, aber es können auch stilbezogene Details, wie der Hintergrund eines Wortes/Satzes durch „<div style=“background-color:farbe“>Text</div>“festgelegt werden. 

Durch <span>&</span> werden keine Zeilenumbrüche verursacht, aber man kann eine Bereich innerhalb einer Zeile formatieren, wie zum Beispiel erneut die Hintergrundfarbe. Hier verwendet man: „<span style=“background-color:farbe“>Text</span>“

Unterteilungen des Textes:

Absätze werden mit dem Element „<p>&</p>“ festgelegt, Zeilenumbrüche mit dem Tag „<br>“.

Mit dem Tag „<hr>“ werden Texte sowohl durch einen Zeilenumbruch, als auch durch eine horizontale Linie getrennt.

Mit dem Element „<blockquote>&</blockquote>“ können Blockzitate in Texte eingebaut werden.

Inline-Elemente:

Diese Elemente werden auch in den Body Teil hinzugefügt, um die später sichtbaren Texte genauer zu beschreiben. Hierbei können Texte fett gedruckt, kursiv, durchgestrichen, oder in vielen anderen Varianten dargestellt werden. Um dies zu erreichen, können zum Beispiel folgende Elemente genutzt werden:

Befehl:	Erklärung:
<b>Text</b>	Dadurch erscheint der Text fettgedruckt
<i>Text</i>	Dadurch erscheint der Text kursiv
<sub>Text</sub>	Dadurch wird der Text tiefgestellt
<em>Text</em>	Dadurch wird der Text betont
<sup>Text</sup>	Dadurch wird der Text hochgestellt
<strong>Text</strong>	Dadurch erscheint der Text größer und fettgedruckt
<q>Text</q>	Dadurch können Zitate angezeigt werden
<u>Text</u>	Dadurch wird der Text unterstrichen
<s>Text</s>	Dadurch wird der Text durchgestrichen
<div style=“text-align: center“>Text</div>	Dadurch wird der Text zentriert
<div style=“text-align: right“>Text</div>	Dadurch wird der Text rechtsbündig dargestellt
<span style=“font-family:monospace“>Text</span>	Dadurch wird der Text in Festbreitschrift angezeigt

Hier ein paar Beispiele dieser Elemente:

Listen:

Listen können in unterschiedlichen Formen dargestellt werden, entweder in einer Aufzählung, einer nummerierten Liste oder in einer verschachtelten Liste. Die Befehle dafür sehen wie folgt aus:

Befehl:	Erklärung:
<ul> <li>Aufzählung</li> <li>Aufzählung</li> </ul>	durch das Element <ul></ul> wird die Art der Liste bestimmt, in dem Fall eine Aufzählungsliste die Elemente <li></li> bestimmen den Listenrang, bzw den Beginn und das Ende
<ol> <li>Nummer 1</li> <li>Nummer 2</li> </ol>	durch das Element <ol></ol> wird die Art der Liste bestimmt, in dem Fall eine Nummerierte Liste die Elemente <li></li> bestimmen den Listenrang, bzw den Beginn und das Ende

Um eine verschachtelte Liste zu erzeugen, muss man die Elemente der beiden Listen einfach kombinieren. So zum Beispiel:

Grafiken:

Grafiken können durch zwei verschiedene Varianten dargestellt werden. Entweder man bindet diese direkt ein, oder sie fungieren durch einen Link. 

Befehl:	Erklärung:
„<img src=“name.jpg“ width=“1200“ height=“800“ alt=“alternativer Text, falls das Bild nicht erscheint“ />“	dadurch wird der Pfad zur Datei kenntlich gemacht dadurch wird die Größe der Grafik bestimmt (in Pixel) hier wird ein alternativer Text festgelegt, welcher erscheint, falls es keinen Zugriff auf die Datei gibt
<a href=“http://link.de“> <img src=“name.jpg“ width=“1200“ height=“800“ alt=“alternativer Text, falls das Bild nicht erscheint“/> </a>	hierdurch wird ermöglicht, dass die Grafik angeklickt werden kann, und als Link genutzt werden kann

In diesem von mir aufgenommen Video sieht man, wie dies nun aussieht, und auch wie die Grafik als Link funktioniert. Außerdem zeige ich auch, wie die Seite aussieht, wenn der Name der Grafik falsch eingegeben wird, bzw wie es aussieht, wenn die HTML-Datei keine Verbindung auf die verknüpfte Grafik aufbauen kann. 

Links:

Auch Links können unterschiedliche Funktionen haben, basieren aber alle auf einem gleichen Tag.

Befehl:	Erklärung:
<a href=“http://link.de“>Text der angezeigt wird </a>	dadurch wird die Verbindung zum Link hergestellt und der anzuzeigende Text festgelegt
<a href=“eine Weitere eigene HTML Datei.html“>Text der angezeigt wird</a>	hierdurch kann man auf eine weitere Seite seines eigenes Webangebots verweisen zu beachten ist, dass sich beide HTML Dateien im selben Verzeichnis befinden
<a href=“download.pdf“>Der Text der angezeigt wird</a>	über Links können Dateien verknüpft werden, die zum Download bereit stehen
<a name=“anfang“ id=“anfang“></a> Text…………………….Text<br> <a href=“#anfang“>Zum Anfang zurück</a>	hierdurch gelangt man wieder an den Anfang des Textes oder der Seite, je nach dem wie dies festgelegt wurde
<a href=“eine Weitere eigene HTML Datei.html“ target=“_blank“>Text der angezeigt wird </a>	durch „_blank“ erfolgt das Öffnen des Links in einem neuen Browserfenster
<a href=“eine Weitere eigene HTML Datei.html“ target=“_self“>Text der angezeigt wird </a>	durch „_self“ erfolgt das Öffnen des Links in dem gleichen, aktuellen Fenster

Tabellen:

Auch bei Tabellen gibt es verschiedene Möglichkeiten diese zu formatieren.

Befehl:	Erklärung:
<table border=“1“> <tr> <th> Erste Zeile, erste Spalte </th> <th> Erste Zeile, zweite Spalte </th> </tr> </tr> <td> Zweite Zeile, erste Spalte </td> <td> Seite Zeile, zweite Spalte </td> </tr> </table>	durch <table>&</table> werden Anfang und Ende der Tabelle bestimmt border bestimmt den Tabellenrahmen in Pixel <tr>&</tr> bestimmt den Beginn und das Ende einer Tabellenzeile <th>&</th> hebt den Anfang und das Ende einer Spaltenüberschrift hervor, und zentriert diese -> ist daher optional <td>&</td> bestimmt den Anfang und das Ende eines Tabellenfeldes
<table border=“1“ cellpadding=“5“ cellspacing=“5“ width=“100%“> <tr> <td width=“30%“> Linkes Feld</td> <td>Rechtes Feld</td> </tr> </table>	border bestimmt den Tabellenrahmen in Pixel Zelleninhalt zum Zellenrand in Pixel Zelleninhalt untereinander Tabelle über ganze Breite des Browserfenster Größe der Spalte im Bezug auf die gesamte Tabelle
<table border=“1“> <tr><th colspan=“2“> Tabellenüberschrift </th></tr><tr> <td rowspan=“2“> Zelle links</td></tr><tr> <td>Zelle rechts oben</td> <td>Zelle rechts unten</td> </tr></table>	Zellen in einer Zelle spaltenweise verbinden Zellen in einer Spalte zeilenweise verbinden
<table border=“0“ width=“200“> <tr> <th colspan=2>Bild Name </th></tr><tr><td width=“80“> <img src=“Bild.jpg“ width=“80“ height=“60“ alt=“Alternativer Text“/></td> <td>Hier kommt ein Text hin, der dann das Bild beschreiben könnte</td> </tr> </table>	durch unsichtbare Tabellen (border=0) können Texte und Grafiken angeordnet werden

Was ist CSS?

1996 wurde „CSS Level 1 Recommendation“ von Bert Bos und Hakon Wium Lie veröffentlich, und wird seither von fast allen Browsern als Standard Web-Stylesheets genutzt. 

CSS steht für Cascading Style Sheets, und ist in einem HTML Dokument dafür zuständig, die Optik und Layout festzulegen. Dadurch können Schriften, Abstände, Farben, und vieles mehr festgelegt werden.
Die Layoutmerkmale werden immer nach Regeln umgesetzt, definiert man beispielsweise die Hintergrundfarbe des Dokuments zwei mal hinter einander, wird immer letzteres umgesetzt.
Also so zum Beispiel: 

body{background-color: blue}; {background-color:red}

Wozu CSS?

CSS ersetzt zum Beispiel die HTML-Elemente „font“ oder „center“, welche als veraltet und „überholt“ gelten, da nun alle Style-bezogenen Elemente durch CSS festgelegt werden können, und dies meist auch so gemacht wird.

Beispiele für Formatierung von Schriften:

Schriftgröße:

Befehl:	Erklärung:
font-size: normal	Normale Schriftgröße
font-size: large	große Schriftgröße
font-size: xx-small	extra kleine Schriftgröße
font-size: 0,5cm	Schriftgröße 0,5 cm
font-size: 2em	Doppelte Schriftgröße

Schriftstil:

Befehl:	Erklärung:
font-style: normal	keine Schriftneigung
font-style: italic	kursive Schrift
font-weight: bold	dick gedruckte Schrift
font-weight: light	dünner gedruckte Schrift (wird aber oft nicht im Browser dargestellt)
font-weight: normal	normale Schriftdicke
font-variant: small-caps	alternative Schriftdarstellung mit Kapitälchen
text-decoration: line-trough	durchgestrichener Text
text-decoration: underline	unterstrichener Text

Abstände:

Befehl:	Erklärung:
letter-spacing: 0,5 em	Sperrsatz
word-spacing: 2em	Der Abstand zwischen den einzelnen Wörtern wird verändert

Schrifttypen:

Befehl:	Erklärung:
font-family: Verdana/Geneva/Arial/sans-serif	dies sind alles serifenlosen Schriften
font-family:“Times New Roman“, Times, serif	dies sind alles Schriften mit Serifen
font-family: Courier, “Courier New“, “Andale Mono“, monospace	diese Schriften haben alle die gleiche Breite
font-family: cursive	sieht wie eine Handschrift aus
font-family: fantasy	dies sind dekorative Schriften

Schriftfarben

Befehl:	Erklärung:
color: fuchsia	Schriftfarbe „fuchsia“
color: rgb(30%, 70%, 40%)	Schriftfarbe 30% rot, 70% grün, 40% blau
color: #D2691E	Schriftfarbe im Hexcode #D2691E
background-color: yellow	Schrift mit gelben Hintergrund

Beispiele für Formatierung von Absätzen, Blöcken oder Bereichen:

Zeilenabstände:

Befehl:	Erklärung:
line-height: 2em	Dadurch kann die Größe des Zeilenabstandes bestimmt werden

Einrückungen:

Befehl:	Erklärung:
text-indent: 2em	Hier erscheint ein mehrzeiliger Text mit Zeilenumbruch, die erste Zeile eingerückt, und alle anderen Zeilen erscheinen linksbündig.
padding-left: 2em	Der ganze, mehrzeilige Text erscheint eingerückt
text-align: right	Der mehrzeilige Text ist rechts ausgerichtet
text-align: left	Der mehrzeilige Text ist links ausgerichtet
text-align: justify	Der Text erscheint als Blocksatz

Rahmen und Linien:

Befehl:	Erklärung:
border: 3px dotted green	hierdurch können alle vier Seite einer Elementbox formatiert werden; Farbe, Dicke und Art können dabei festgelegt werden
border-left: 0.1cm solid light blue	hierbei werden auch Dicke, Art und Farbe der linken Grenze festgelegt
border-bottom-style: double; border-color: red	hierbei wird die Grenzlinie unter dem Text formatiert

Das Box-Modell:

Quelle

Wichtige CSS-Sektoren:

Befehl:	Erklärung:
p {font-size: 1.5em}	Anderthalbfache Schriftgröße innerhalb aller p-Elemente
h1, h2 {font-family: sans-serif}	Alle h1 und h2 Elemente (bzw je nach Befehl) in serifenloser Schrift
.dringend {color: red}	Alle Element der Klasse „.dringend“ in Rot zum Beispiel: „heute <span class=“dringend“>kaufen!</span>“ erscheint: heute kaufen!
#wichtigsterTOP {background-color: yellow}	Das Element mit der ID wichtigsterTOP mit gelben Hintergrund zum Beispiel: „<p id=“wichtigsterTOP“>…bla bla…</p>“ erscheint: …bla bla…
h1 strong {background-color: lightblue}	blaue Hintergrundfarbe für strong-Elemente innerhalb von h1-Elementen zum Beispiel: „<h1>Die<strong>wichtigsten</strong>Punkte</h1>“ erscheint: Die wichtigsten Punkte

FAZIT:

In dem Kurs von Herrn Schäfer, wurden uns die Basis Kenntnisse zu HTML und CSS nahegelegt. Während der Blockveranstaltungen haben wir zunächst theoretische Grundlagen gelernt, welche wir daraufhin direkt anwenden sollten. Auf dem Fundament dieser neu erlernten Sprache, konnte ich dann auch meinen Schwerpunkt, eine eigene HTML Seite, entwickeln. Im Großen und Ganzen kann ich sagen, dass ich durch diesen Kurs, ein für mich komplett unbekanntes Themengebiet neu erlernt habe, und nun auch erfolgreich nutzen kann. Außerdem hatte ich sehr viel Spaß und Freude daran gehabt, was ich zu Beginn nie erwartet hätte.