Dies ist eine alte Version des Dokuments!
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.htmlbenennen. - 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
Beispiel 1:
<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.
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.
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.
CSS
CSS, oder Cascading Style Sheets, ist ein wesentlicher Bestandteil der Webentwicklung, da es das Design und Layout von Webseiten ermöglicht. Es trennt die Präsentation vom Inhalt, indem HTML für die Struktur und CSS für das Design zuständig ist. Dies sorgt für ein konsistentes Erscheinungsbild und erleichtert die Wartung, da einheitliche Stile für mehrere Seiten einer Website festgelegt werden können.
Darüber hinaus ermöglicht CSS responsives Design, sodass Webseiten auf verschiedenen Geräten und Bildschirmgrößen gut aussehen. Mit Media Queries können spezifische Stile für unterschiedliche Geräte definiert werden. Ein weiterer Vorteil von CSS ist die Wiederverwendbarkeit, da einmal erstellte CSS-Dateien auf mehreren Seiten oder Projekten wiederverwendet werden können, was Zeit und Aufwand spart.
CSS trägt auch zur Zugänglichkeit von Webseiten bei, indem es die visuelle Darstellung verbessert und Anpassungen für Benutzer mit Behinderungen ermöglicht. Schließlich kann gut geschriebenes CSS die Ladezeiten von Webseiten verbessern, da es die Menge an HTML reduziert und die Trennung von Stil und Inhalt die Effizienz erhöht.
- Bearbeiten Sie von der Wiki-Seite von Herrn Schaller auch die Aufgabe 3.
- 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:
</WRAP>
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 …)