Inhaltsverzeichnis

HTML - eine Beschreibungssprache für Dokumente im Web

Wie wird abgefragt?…

Was ist HTML

HTML (Hyper Text Markup Language) ist also eine Art Sprache, mit der wir einfache Webseiten erstellen und in einem Browser anzeigen können. Wir wollen uns nun ein bisschen anschauen, wie HTML genau funktioniert und als Produkt eine kleine Webseite erstellen. Diese werden wir aber nur lokal auf unserem Computer und nicht im Internet speichern.

HTML ist eine Beschreibungssprache (WYSIWYM = What you see is what you mean). Aber HTML ist keine Programmiersprache, denn HTML hat keine Befehle, es werden auch keine Schleifen oder Bedingungen, sprich kein Algorithmus programmiert. Diese Sprache wird genutzt, um ähnlich wie ein «Worddokument fürs Netz», Inhalt fürs Web darzustellen. Dies ist ein erheblicher Unterschied.
Typisch an HTML ist, dass sogenannte Tags verwendet werden, um die Inhalte einer Webseite zu kennzeichnen, sodass Ihr Browser weiss, wie diese darzustellen. Dies bedeutet, dass die darzustellende Seite strukturiert wird in header, navigation, main, footer etc. und in diesen Strukturelementen unter anderem noch mit Tags der Inhalt der Website dargestellt werden kann.

Hier noch etwas mehr ausholen…

Anwenderprogramm installieren

Um nun die Beispiele zu testen, ist ein Anwendungsprogramm von Vorteil.

Installieren von Visual Studio Code

  • Installieren Sie dazu Visualstudiocode, nutzen Sie Ihr Microsoft Konto zum einloggen. Öffnen Sie das Programm.
  • Installieren Sie auch die Erweiterungen (Extensions) Live Preview, Live Share, Local History, siehe dabei links in der Menuespalte Erweiterungen.
  • Wählen Sie einen Ordner (Choose a folder), dort werden die Aufgaben und Übungen gespeichert.
  • Danach können Sie eine neue Datei erstellen (new File) und dies mit aufgabe1.html benennen.
  • Jetzt können die nun folgenden Beispiele durchprobiert und durchgearbeitet werden.

TAGS kennenlernen und ausprobieren

Die folgenden Beispiele zeigen auf, wofür gewisse Elemente sind und wie diese genutzt werden können. Arbeiten Sie sich am besten durch diese Beispiele durch. Dafür nutzen Sie die eben erstellte Datei aufgabe1.html. Ergänzen Sie die Datei aufgabe1.html jeweils durch die gegebenen Beispielcodes. Das Grundgerüst eines HTML-Dokuments ist: 

<!DOCTYPE html>
<html>
 
  <head>
    <title>Dokumententitel</title>
  </head>
 
  <body>
    Hier wird der Inhalt der html-Datei angezeigt!
  </body>
 
</html>

Was Sie beobachten können ist, dass hier viele Elemnte fast gleich heissen - bis auf den /. Diese Elemente sind sogenannte Tags. Ein Tag (sprich «täg», englisch für Etiketten) hat immer einen Namen (zum Beispiel p für Paragraf) und wird in spitzen Klammern (< und >) dargestellt. Einige Tags fungieren als eine Art Behälter oder auch Formatierungsinstrument, diese enthalten die Elemente wie Texte, Titel, Bilder, Links,…

Auftrag:
Kopieren Sie als erstes den Beispielcode einer HTML-Struktur in die leere Aufgabe der Datei „aufgabe1.html“. Füllen Sie den Body-Tag des Dokuments (am Platz des Textes Hier wird der Inhalt der html-Datei angezeigt!) den Tag mit einem seltenen Rohstoff der Smartphone-Produktion (Gold, Coltan, Aluminium, Litium…) dies sollte ein reiner Text sein.

Body - Tags

Absatz
<p> Hier steht ein Absatz (paragraph), der immer auf einer neuen Zeile beginnt.</p>

Mit diesem <p>-Tag können Sie in einem Text einen Absatz formatieren. Um im Absatz irgendwo einen Zeilenumbruch zu generieren kann <br> verwendet werden. Dies ist ein spezielles Tag, denn es gibt zu diesem kein „Endpartner-Tag“, es steht alleine. <br> steht für break the line und wird benutzt um einen Zeilenumbruch zu erzeugen. Eine andere Möglichkeit bietet <hr>, auch dies ist ein Einzel-Tag, und auch <hr> erzeugt aber neben einen Seitenumbruch zusätzlich eine horizontale Linie.

Auftrag: Erstellen Sie einen Absatz im Body-Bereich der Datei, dabei sollten alle Tags (<p> …</p> und <br> sowie <hr>) verwendet werden.

Titel im Body-Tag, unterschiedlich grosse Überschriften (headers)
 <h1>Dies ist ein Titel</h1>

Ein auf der Website als Titel sichtbarer Text kann mit dem Tag <h1> für einen sehr grossen Titel, <h2> für einen etwas kleineren Titel etc eingefügt werden. Dies ist bis <h6> möglich. Vor und nach diesen Tags wird automatisch ein Zeilenumbruch erzeugt.

Auftrag: Erstellen Sie einen Titel im Body-Bereich der Datei.

Aufzählungen
<ul>
  <li>Listenpunkt</li>
  <li>Listenpunkt</li>
  <li>Listenpunkt</li>
</ul>

Die beiden Tags <ul> …</ul> und <ol>…</ol> definieren unsortierte (unsortet) oder sortierte Listen (ordered lists). Unsortiert bedeutet eine Aufzählung und sortiert wäre eine nummerierte Liste. Jeder Listenpunkt wird in ein <li>…</li> verpackt.

Auftrag: Erstellen Sie eine Aufzählung im Body-Bereich der Datei, dies sollte auch inhaltlich in einem sinnvollen Zusammenhang stehen, so dass sich die Seite langsam füllt.

Bild
<img src="bildname.jpg" alt="alternativer Text hier schreiben" height="Höhe angeben" >

Mit dem Tag <img> wird zum einbinden von Bildern benutzt. Ein img-Tag beinhaltet den alle Informationen, wie der Name und optional auch die Grösse oder einen alternativen Text, falls das Bild nicht geladen werden kann. Auch andere Angaben können gemacht werden. Siehe hier.

Auftrag: Finden Sie auf dem Netz ein Bild, das zu Ihrem Text passt. Laden Sie dies herunter und speichern Sie dieses Bild am gleichen Ort wie die Datei aufgabe1.html. Kopieren Sie die Bildquelle in den Zwischenspeicher. Fügen Sie das Bild mit Hilfe des <img> Tags in die Website ein. 

 <a href="https://new.cscfr.ch/index.php/de/">Dies ist der Link zum Kollegium</a>

Einen Link kann mit dem Tag <a>…</a> eingefügt werden (a für anchor). Dieser Tag besteht wieder aus zwei Teilen. Der Link wir in den Start-Tag eingefügt, zwischen den Tag-Teilen steht der Text, welcher angezeigt werden soll. Dabei wird der Link an sich mit href= gekennzeichnet, href kann als hyperlink-refenence gedeutet werden.

Auftrag: Geben Sie mit Hilfe des Tags <a>…</a> den Link der Bildquelle oberhalb oder unterhalb des Bildes an.

Tabellen
<table> 
  <tr> 
    <th>Kopfzelle 1</th>
    <th>Kopfzelle 2</th>
  </tr>
 
  <tr>
    <td>Datenzelle 1</td> 
    <td>Datenzelle 2</td>
  </tr>
 
  <tr>
    <td>Datenzelle 3</td> 
    <td>Datenzelle 4</td>
  </tr>
</table>

Eine Tabelle kann mit dem Tag <table> …</table> eingefügt werden, in diesem Tag gibt es wie „Untertags“ welche die Tabellenzeilen <tr> (tablerow) oder auch die Tabellenfelder <td> (tabledata) kennzeichnen. Das Tag <table> beinhaltet <tr>-Tags diese wiederum beinhalten <td>-Tags. Dies die Verschachtelung. Probieren Sie dies am besten aus! Achtung: Der Styl der Tabelle werden wir später verändern (borders, background,…)

Auftrag: Fügen Sie eine kleine Tabelle mit Informationen zum gegebenen Rohstoff in das Html-Dokument ein. Dabei sollte auch auf die Quellenangabe geachtet werden.

Text formatieren - Fett, Kursiv,...
<em>betont (emphatisch)</em>
<strong>stark betont</strong>
<sup>hochgestellt</sup>  
<sub>tiefgestellt</sub>

Im obigen Beispiel sind einige verschiedene Textdekorationen aufgelistet, so zum Beispiel <em>-kursiv, oder <strong>-fett, oder auch <sup>-hochgestellt… etc.

Auftrag: Nutzen Sie diese kleinen Formatierungselemente, um in Ihrer Übungsseite einiges übersichtlicher und besser zu gestalten.

Head-Tags

Neben den Tags im Body können auch einige Head-Tags sehr wichtig werden.

Title

Dieser Tag kann genutzt werden, um den Titel der Seite zu definieren. Dieser steht nicht in der Webseite selbst, sondern wird bei den meisten Browsern im „Tab“ angezeigt. Der Title-Tag gehört immer in den Head-Teil des Dokumentes.

Meta

Der Meta-Tag <meta> liefern Metadaten über das HTML-Dokument, dies wären beispielsweise die Beschreibung der vorliegenden Seite, Schlüsselwörter für den Index einer Suchmaschine, den Autor und die Charakterkodierung. Innerhalb dieses Tags können Umlaute von der Website richtig dargestellt werden. Dies gehschieht mit 

<meta charset="UTF-8">

Mit <meta name=„description“ content=„Beschreibung der Seite“> kann eine Beschreibung der Seite eigefügt werden. Für weitere Metatags, können Sie hier nachschauen.

Wenn das Stylesheet dazugeladen werden muss, oder auch andere Dateien - wie json-Dateien dazugeladen werden müssen, dann geschieht dies mit dem Link-Tag <link>. Beispielsweise 

 <link rel="stylesheet" href="styles.css">

Diese Tags helfen dabei, die Webseite korrekt darzustellen, ihre Funktionalität zu gewährleisten und sie für Suchmaschinen und Benutzer zugänglicher zu machen.

Auftrag: Fügen Sie im head mindestens die Sonderzeichendarstellung ein.

CSS

Da nun für jede Unterseite hier das Layout und das Design der Seite wieder neu eingefügt werden müsste in jeder html-Datei, ist man dazu übergegangen, eine Trennung von Stil und Inhalt vorzunehmen. Dadurch erhöht sich unter anderem die Effizienz. Diese Layout-Dateien werden CSS, oder Cascading Style Sheets genannt und sind ein wesentlicher Bestandteil der Webentwicklung, der Ausdruck Cascading Style Sheets kann mit stufenförmig, geschachtelte Stilvorlage. Eine CSS-Datei enthält das Design und Layout von Webseiten. Die HTML-Datei ist nur noch für die Struktur und den Inhalt zuständig und CSS für das Design zuständig. Dadurch erreichen wir ein konsistentes Erscheinungsbild und erleichtert die Wartung, da einheitliche Stile für mehrere Seiten festgelegt werden können.
Um nun die CSS-DAtei einzubinden, sollte wie schon weiter oben erwähnt, eine Verlinkung von der HTML-Seite zur CSS-Seite passieren. 

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="styling.css" media="screen" />
    </head>
    <body>
 
    </body>
</html>

Dabei muss das CSS nun styling.css heissen und am gleichen Ort abgespeichert sein wie die Seite, die auf dieses Stylesheet verweist. Das Stylesheet selbst sieht anders aus. Es enthält keine html-Elemente. 

h1{
  color:blue;
  font-size: 35px; 
}
p{
  color: green;	
}

Auftrag:

  1. Erstellen Sie eine im Moment noch leere Datei namens styling.css im gleichen Ordner wie die Datei aufgabe1.html.
  2. Fügen Sie anschliessend eine Verlinkung zum Stylesheet ein wie oben beschrieben. Kopieren Sie den Inhalt des obigen Beispiels in die CSS-Datei. Was passiert mit der Datei aufgabe1.html in der Browseransicht?
  3. Verändern Sie mit Hilfe des CSS die Grösse und Farbe der Überschriften.
  4. Verändern Sie mit Hilfe des CSS die Hintergrundfarbe der Seite.
  5. Zentrieren Sie mit Hilfe des CSS Sie das Bild
  6. Verändern Sie mit Hilfe des CSS den Zeichenabstand (letter-spacing) der Aufzählung auf 3 px.
  7. Verändern Sie mit Hilfe des CSS die Tabelle (Linien in der Tabelle etc…)
  8. Werden Sie kreativ! ;)

Um diese und noch weitere Erweitungen des Layouts Ihrer Beispielseite im CSs durchzuführen, nutzen Sie diese Seite.

DIV-CONTAINER

Was ist ein Div-Container? Schauen Sie das folgende Lernvideo!

Mit dem Div-Tag können Sie Block-Elemente ein, in das Sie mehrere andere Elemente einschließen können. Alles, was zwischen diesem Start-Tag und dem abschließenden End-Tag steht, wird als Teil des Bereichs interpretiert. Weitere Informationen finden Sie hier.

Unterseiten - Seiten verlinken
<!DOCTYPE html>
<html>
	<head>
		<title>...</title>
		<meta charset="UTF-8"/>
                <link rel="stylesheet" type="text/css" href="styling.css" media="screen" />
	</head>
	<body>
		<div id="menu">
                    <a href="Seite1.html">Hautpseite</a><br/> 
		    <a href="Seite2.html">Seite 2</a><br/>
		    <a href="Seite3.html">Seite 3</a><br/> 
		</div>
                <div id="main">
		    <h1>Hauptseite</h1>
		    <p>...</p>
                </div>
	</body>
</html>

Wie kann nun eine Website mit einer anderen Unterseite verlinkt werden? Im obigen Beispiel ist ein Menubereich definiert, welcher auf zwei Unterseiten (Seite2.html und Seite3.html) verweist. Hier ist es wichtig, dass diese beiden Unterseiten existieren und sich diese html-Dateien im gleichen Ordner befinden wie die Hauptseite, ansonsten muss der Pfad (Name der Seite zwischen den Anführungszeichen) angepasst werden.

Auftrag:

  1. Erstellen Sie zwei im Moment noch leere Datei namens seite2.html und seite3.html im gleichen Ordner wie die Datei aufgabe1.html.
  2. Kopieren Sie anschliessend den Div-Teil des Menues wie oben angegeben ein.
  3. Gestalten Sie mit weiteren Div-Elementen (Main oder Header oder Right …) die Seiten.

Wenn Sie das Menue noch weiter gestalten möchten, finden Sie viel Hilfe auf dieser Seite.
Zu Div-Elementen allgemein finden Sie Rat hier.

Ob jetzt das Div-Element ein Menue beinhaltet oder einen header- oder footer-Teil der Website als Bereich speziell formatiert werden soll, kann dann für jedes div-Element einzeln erfolgen. Beispielsweise kann im div-Element jeweils im CSS Länge, Breite, Position, Hintergrund, Textfarbe oder -position und vieles mehr festgelegt werden. 

#meindivElement {
  border: 5px outset red;
  background-color: lightblue;    
  text-align: center;
  margin-left:30%; 
}

In der html-Datei muss dann entsprechend nur ein <div id=„meindivElement“> </div> um die entsprechende Textstelle oder Text-Bild -Tabellen…-Stelle gepackt werden. 

<div id="meindivElement ">
  Text-Bild -Tabellen...-Stelle: hier schreiben Sie alles, was innerhalb dieses div-Elements formatiert werden muss. Ein div-Tag umfasst diese Stelle.   
</div>

SPICK
Erstellen Sie ein Spick mit allen wichtigen HTML - Befehlen.

Start