gf1:html [DokuWiki CSC]

Dies ist eine alte Version des Dokuments!

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.

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)

Beispiel:

 <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

Beispiel:

<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

Beispiel:

<img src="bildname.jpg" alt="alternativer Text hier schreiben" hight="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.

Links

 <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

Beispiel:

<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.

Link im Head

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.

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:

Erstellen Sie eine im Moment noch leere Datei namens styling.css im gleichen Ordner wie die Datei aufgabe1.html.
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?
Verändern Sie mit Hilfe des CSS:
die Grösse und Farbe der Überschriften,
die Hintergrundfarbe der Seite,
zentrieren Sie das Bild
verändern Sie den Zeichenabstand (letter-spacing) der Aufzählung auf 3 px
verändern Sie die Tabelle (Linien in der Tabelle etc…)
Werden Sie kreativ! ;)

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

Studieren Sie die Informationen zu CSS von Herrn Schaller bearbeiten Sie die Aufgabe 4.
Als letzte Aufgabe müssen wir uns noch um die div-Containter kümmern, diese beinhalten auch die Menueliste. Bearbeiten Sie die Aufgabe 5.

Links für Tipps sind:

SPICK
Erstellen Sie ein Spick mit allen wichtigen HTML - Befehlen (Auf OneNote oder in einem Word) wer Probleme mit Replit hat, soll codepen benutzen!

Lösungen

Lernziele

Ich kann grob aufzeigen, wie sich das Internet bis heute entwickelt hat.
Ich weiss, was die Abkürzungen HTML udn CSS bedeuten und wofür diese verwendet werden.
Ich kenne die Struktur einer html-Datei und kann mit HTML-Tags eine einfache Webseite erstellen. Ich kann dabei die wichtigsten Elemente einsetzten und kenne die notwendige Syntax dafür: Doctype, Grundstruktur: <html>,<head>, <body>, Text-Encoding (Unicode): <meta charset=„UTF-8“/>, Überschriften <h1>, <h2>, …, <h6>, Aufzählungen: <ul>, <li>, Tabelle: <table> <tr> <th> <td>, Listen: <ol> <ul> <li>, Text-Formatierung: <br> <hr> <b> <i> <p>, Links: <a href>, Bilder: <img src>, Umbrüche: <br> und <hr>
Ich weiss was ein CSS ist und kann dieses zum Designen einer Website nutzen und kenne das Zusammenspiel zwischen html und CSS.
Ich kann eine CSS Datei, Befehle davon verändern und kenne die wichtigsten Elemente wie beispielsweise die div-Container oder andere… (Menueleiste …)