Arno Richter

d.sign@mailman.hs-mannheim.de

mail@arnorichter.de

richter@lba.hs-mannheim.de

Der Kurs vermittelt technische Grundlagen des Webdesigns in den Sprachen HTML und CSS.

In den ersten Stunden werden kleine Aufgaben umgesetzt, später auch umfangreichere Websites.

Die Semesteraufgabe wird eine praktische Arbeit sein; die Erstellung einer Website zu einem gegebenen Thema, bewertet durch eine Note.

Ein kurzer Exkurs über das Dateisystem

• Dateien (Files) sind digitale Dokumente – zB. Fotos, Texte, Videos, PDFs.
• Ein Verzeichnis (Ordner, "Directory") ist eine Sammlung von Dateien, eine Möglichkeit, mehrere Dateien zu gruppieren.
• Das Dateisystem ist das Organisationssystem auf deinem Computer, das bestimmt, wie Dateien und Ordner strukturiert, benannt und gefunden werden können.

Dateien / Files

• Eine Datei speichert Informationen, wie z.B. ein Foto, Musik, Text oder ein Video.
• Jede Datei hat einen Namen und meist auch eine Dateiendung (z.B. .jpg, .txt, .pdf, .mp3), die angibt, um welchen Typ es sich handelt.
• Eine Datei besteht aus einer Reihe von Bytes und einer Bezeichnung (Name + Speicherort, Pfad, Path)
  zB. /Users/Arno/Desktop/cat.jpg

Dateien / Files

• Erstellt man eine neue Datei mit den gleichen Bytes wie einer anderen, aber einem anderen Speicherort, spricht man von einer Kopie (copy)
• Ändert man nur den Speicherort einer Datei, sagt man die Datei wurde bewegt oder verschoben (moved)
• Ändert man die Bytes, aber der Speicherort bleibt gleich, sagt man die Datei wurde bearbeitet oder geändert (changed, edited)

Verzeichnisse / Directories

• Ein Verzeichnis ist ein Container, in dem du mehrere Dateien zusammenfassen kannst.
• Es ist vergleichbar mit einem digitalen Aktenschrank oder Fotoalbum, in dem du Dinge thematisch gruppierst.
• Du kannst Ordner verschachteln, also Ordner in anderen Ordnern ablegen, um eine klare Struktur zu schaffen.

Verzeichnisse / Directories

• Gute Verzeichnis- und Dateinamen helfen dir, deine gespeicherten Inhalte später wieder zu finden
• Die Ordner und Unterordner, die uns zum Inhalt einer bestimmten Datei bringen, bezeichnet man als Pfad (path)
• Pfade können unter verschiedenen Betriebssystemen unterschiedlich aussehen:
  /Users/Arno/Desktop/cat.jpg macOS
  C:\Users\Arno\Desktop\cat.jpg Windows
  https://arnorichter.de/hsma/index.html Browser, URL

Dateisystem / File System

• Das Dateisystem verwaltet alle Dateien und Verzeichnisse auf deinem Gerät.
• Es legt fest, wo jede Datei gespeichert wird und wie sie gefunden werden kann – ähnlich wie ein Inhaltsverzeichnis in einem Buch.
• Verbreitete Dateisysteme sind zB. APFS, NTFS, exFAT, EXT4

Dateisystem / File System

• Manche Geräte, zB. Smartphones, Router, etc., erlauben keinen direkten Zugriff ihre Dateien und abstrahieren das Dateisystem.
• Trotzdem funktionieren sie alle auf die gleiche Weise wie ein normaler Computer
• Eine Suchfunktion ist ein schlechter Ersatz für ein gut geordnetes System von Dateinamen und Ordnern.

Dateinamen

Achte darauf, dass du in deinem Betriebssystem einstellst, dass es dir vollständige Dateinamen inkl. Dateiendung (Erweiterung, extension) anzeigt!

Anleitung Mac / Anleitung Windows

Dateinamen

Wenn du Dateien abgibst, ermögliche bitte die Zuordnung, indem du Name oder Matrikelnr. im Dateinamen vermerkst.

Trennungen sind zB. mit - oder _ möglich.
Im Web am besten keine Leerzeichen.

name_matrikel_projekt.zip
richter-arno-220577-uebung1.zip

Ablauf des Kurses

Fragen

Was bedeutet Webdesign?

Organisation von Inhalten zur Anzeige in einem Webbrowser

Strukturierung von Texten in Links, Listen und Tabellen. Verknüpfung von Medien wie Bilder und Videos. Nutzereingaben über Formulare.

Gestaltung der in HTML definierten Inhalte in ein funktionales Layout. Erleichtern der Seitenbedienung durch nutzerfreundliches User-Interface-Design.

Der Unterricht vermittelt eine Reihe von HTML-Elementen und wie diese eingesetzt werden.

HTML und CSS

Affliliate-Links (Amazon)

	Deutsch	http://arnorichter.de/hsma/html-de
	Englisch	http://arnorichter.de/hsma/html-en

HTML-Seiten sind
Textdokumente.

HTML verwendet Elemente,
so genannte Tags.

Tags fungieren als Container und sagen etwas über die Information aus, die dazwischen steht.

Tags bestehen in der Regel immer aus einem Opening Tag und einem Closing Tag.

Der Opening Tag markiert den Beginn eines Inhaltsbereichs, der Closing Tag das Ende.

		
			<p>Hello World!</p>
		
	

Tags können ineinander verschachtelt werden. Dadurch erreicht man eine Baumstruktur ähnlich dem Dateisystem auf deinem Rechner.

Zur Übersicht rückt man dann oft zeilenweise ein.

Das kann man wahlweise mit Leerzeichen oder Tabulator-Zeichen tun. Man sollte nur konsistent bleiben.

Opening Tags können Attribute tragen.

		
			<html>
		
	

html Element

Opening Tags können Attribute tragen.

		
			<html lang="de">
		
	

Tag-Name Attribut-Name Attribut-Wert

Attribute beschreiben ein Element/Tag genauer.

Sie bestehen immer aus Paaren von Name="Wert"

Elemente können beliebig viele Attribute tragen:

		
			<img src="bild1.jpg" width="600">
		
	

HTML-Dokumente lassen sich in jedem Texteditor bearbeiten.

Es gibt allerdings einige spezialisierte Programme.

Verwendeter Editor: Sublime Text

https://www.sublimetext.com

Dateien bitte nach dem Öffnen im Editor nicht mehr von Hand verschieben, sondern zuerst schließen!

Dein Editor merkt idR. nichts davon und speichert sonst weiterhin an den bisherigen Speicherort.

Informationen zu einzelnen Elementen lassen sich gut online, zB. unter MDN und wiki.selfhtml.org nachschlagen. W3Schools ist in der Szene nicht hoch angesehen.

Aufgaben werden auf Github bereitgestellt:

https://arnorichter.de/hsma/int/aufgaben

Beginne mit Aufgabe 1.

https://arnorichter.de/hsma/int/aufgaben