- Korrektes HTML 5P
- gut strukturierter, übersichtlicher Code 5P
- Verwendung der HTML-Elemente H1, p, img, a evtl. ul und li für die Navigation 5P
- funktionierende Navigation 5P
- sinnvolle Seiten- und Absatzstruktur 2P
- Gesamtkonzept der Seite 2P
- (Verwendung von CSS) 2P
HTML-Projekt
Erstelle eine Website mit 4 Seiten (+Quellenseite). Die Seiten sollen durch ein gemeinsames Menü (Navigation) verbunden werden. Jeder Seite sollte min. 1 Überschrift (besser mehr), 300 Wörter Text in min. 3 Absätzen und 1 dazu passendes Bild enthalten.
Das Thema bleibt euch überlassen. Es kann über deinen letztes Urlaubsland sein, dein Hobby oder irgendetwas Anderes sein, für das ihr euch gerade interessiert.
Beachte bei den Bildern das Urheberrecht. D.h. Informiere dich welche Bilder du wie im Internet nutzen kannst.
Ihr könnt gerne eine KI zum erzeugen des Textes nutzen (Erstelle eine weitere Seite mit deinen Verwendeten Quellen). Auf das Projekt gibt es zwei Noten. Eine Note für Recherche und Inhalt und eine Note für HTML & CSS Nutzung.
Ihr habt maximal 3 Doppelstunden Zeit.
Tipps zum Ablauf:
- Erstelle zunächst die Grundgerüste für die Seiten. Deine Startseite muss index.html heißen (diese wird vom Webserver automatisch zuerst aufgerufen) Alle anderen Seiten können bliebig benannt werden (verwende websichere Dateinamen, kein Leerzeichen, keine deutschen Umlaute). Alle Dateien benötigen die Endung .html
- Verbind die Seiten mit Links die in einer unsortierten Liste angeordnet sein.
(Auf der Seite zu Bildern findest du ein Video zu relativen und absoluten Pfaden) - Fülle die Seiten mit Inhalt (Texten und Bilder)
- Erstelle eine zentrales CSS-Datei für das Projekt
Beispiel: meine kleine Seite zu KI
CSS-Syntax
Trennung von Inhalt und Design
Ein extrem großer Vorteil von CSS ist die Trennung des Designs vom eigentlichen Inhalt, der in HTML-Dateien steckt. Das Design wird dazu in eine eigene Datei ausgelagert und kann dann für alle Seiten eines Internetauftritts verwendet werden. Werden dann Änderungen am Design gemacht, sind durch diese gemeinsame CSS-Datei sofort alle Einzelseiten auf dem neuesten Stand.
Beispiel
Grundlagen Webentwicklung
Was du eigentlich lernen musst, ist HTML, CSS und evtl. JavaScript (je nachdem wir tief du in das Thema einsteigen willst.
Ich persönlich mag den Youtube-Kanal The Morpheus Tutorials, hier findest du sehr viele fachlich gute Tutorials zum vielen IT-Themen.
Ich nutze und schätze folgende Online-Doku zum Webentwicklungsthemen:
Hier im Unterricht benutzen wir notepad++. Ich bevorzuge Visual Studio Code.
RGB-Farben
Aufgabe für den 28.11.2023 Erstelle eine HTML-Seite
Erstellt eine Internetseite mit mindestens 3 Unterseite (Also insgesamt 4 html-Dateien + 1 css-Datei) in der über ein Menü (für jede Seite ein Link) miteinander verknüpft sind zu einem Thema eurer Wahl.
Sucht euch ein Thema aus, am besten eins das euch wirklich interessiert, sonst wird es schnell langweilig.
Jede Seiten sollten mehrere Überschriften, min. 200 Zeichen Text und min. 3 Bilder enthalten.
Formatiert die Seiten mit CSS. Informiert euch auf selfhtml.org weiter zu CSS Eigenschaften, die ihr benötigt. Verwendet min. 10 Eigenschaften pro Seite. Dort könnt ihr auch nochmal nachlesen wie
Abhängig von eurem Wissensstand könnt ihr euch hier weiteren Informationen holen.
Für eurer Ergebnis gibt es nächste Stunde Feedback und eine Note. Anschließend werden wir an der Seite weiterarbeiten und weitere Feedbackschleifen werden folgen.
HTML & CSS Kurs
HTML(HyperText Markup Language) ist keine Programmiersprache, sondern eine Auszeichnungssprache und wurde von Tim Bernes-Lee 1990 entwickelt. Eine Auszeichnungssprache hat die Aufgabe, logische Bestandteile eines textorientierten Dokuments zu beschreiben. Das ursprüngliche HTML enthielt nur 18 Elemente. Einige davon, wie h1-h6, p, a, ol, ul und li benutzen wir noch heute.
Inhalt
- Grundgerüst
- HTML-Tags
- Block- und Inline-Elemente
- img-Tag – Bilder einfügen
- Links einfügen (a-Tag)
- CSS einbinden
- CSS Eigenschaften
Unsere erste HTML-Datei
Die zentrale HTML-Datei in jedem Verzeichnis heißt immer index.html. Diese Datei wird von Webserver automatisch aufgerufen.
Die Datei hat folgendes Grundgerüst:
HTML-Tags
Es gibt zwei unterschiedliche Arten von HTML-ELementen.
Normale Tags bestehen aus zwei Tags, dem Start-Tag <h1> und dem End-Tag </h1>.
<h1>
<em>HTML</em> - die Sprache im Web
</h1>Inhaltslehren Elementen, wie <br />, <img /> und <hr />, bestehen nur aus einem Tag.
<h1>Vor dem Tor</h1>
<p>
<img src="...Park_an_der_Ilm.jpg" alt="Park an der Ilm" />
Vom Eise befreit sind Strom und Bäche<br />
Durch des Frühlings holden, belebenden Blick,<br />
...
</p>Block- und Inline Elemente
Bei den zweiteiligen HTML-Tags unterscheidet man zwischen Block- und Inline Elementen. Ein Block-Element füllt unabhängig von seiner Länge den gesamten Raum (Zeile) aus. Sie stehen als einzelner Block auf einer Zeile. Block-Elemente können Nachfahren des Body-Elements oder eines anderen Block-Elements sein.
Typische Block-Elemente sind: h1 … h6, p
Inline-Elemente erzeugen keinen eigenen Absatz im Textfluss. Sie können normalen Text und andere Inline-Elemente, aber keine Block-Elemente enthalten.
Typische Inline-Elemente sind: a, br, b, i, img, …
Liste der Inline-Elemente auf webkompetenz.wikidot.com
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Block- und Inline-Elemente</title>
</head>
<body>
<div style="background-color:red; color:white; width:500px">Dies ist mein Block-Element (DIV)</div>
<span style="background-color:blue; color:white; width:500px">Ich bin eine Inline-Element (SPAN)</span>
</body>
</html>Bilder in Websiten – img-Tag
<img src="../img/enten.jpg" alt="Alternativer Text">| src | engl. source für Quelle – Referenz der Bilddatei |
| alt | engl. alternative für Alternativtext – Textliche Beschreibung des Bildes. Wird angezeigt, wenn das Bild nicht geladen werden kann bzw. von Screen Readern vorgelesen. |
| height | Höhe des Bildes |
| width | Breite des Bildes |
| title | wird als Tooltip beim Mousehover angezeigt |
Nur inhaltliche Bilder werden ins HTML Markup eingefügt. Design-Elemente sollten über CSS eingebunden werden.
Verweise / Links – der a-Tag
<a href="/meineVerzeichnis/meinbild.jpg" target="_blank">CSS einbinden
CSS einbinden auf selfhtml.org
- direkt im style-Attribut des Tags
- zentral im style-Element des Headers
- externes Stylesheets im Header einbinden
<!doctype html>
<html lang="de">
<head>
<link rel="stylesheet" href="stylesheet.css">
...Die wichtigsten CSS-Eigenschaften
HTML & CSS Dokumentation
Hier findet ihr gute HTML und CSS Dokumentation