Protokoll vom 19.05.2014

An unserem ersten Kurstag ging es erst mal darum, uns überhaupt damit vertraut zu machen, was denn HTML und CSS eigentlich sind.

HTML (Hypertext Markup Language) ist eine sog. „Auszeichnungssprache“ für die Darstellung von Inhalten auf Websites (dabei muss man zwischen den Begriffen „Website“ und „Webseite“ unterscheiden: „Webseite“ bezeichnet ein einzelnes HTML-Dokument, eine „Website“ (von engl.: site = „Ort“) bezeichnet einen gesamten Webauftritt, der ja aus vielen HTML-Seiten bestehen kann), während CSS (Cascading Style Sheets) für die optische Gestaltung zuständig sind.

Für sich betrachtet sind HTML-Dokumente und CSS-Dokumente (wir gehen in unseren Fall von externen Styles aus, mit internem Styling beschäftigen wir uns aber auch noch) erst mal völlig verschiedene und nicht miteinander verbundene Dinge. Während HTML die Inhalte einer Seite enthält bzw. von externen Quellen einbindet, ist CSS dafür zuständig, Text, Bilder etc. in schönem Styling darzustellen. HTML ohne externe CSS-Datei kann natürlich auch Styling-Informationen direkt in der HTML-Datei enthalten, das sollte man aber wo es geht vermeiden. Bei Anpassungen muss man dann nämlich ggf. die HTML-Datei durchforsten, was total nervig ist.

Eleganter geht es mit dem Einsatz externer CSS-Dateien. Diese werden mit der HTML-Datei durch einen Aufrufbefehl verbunden (link rel=“stylesheet“ …) und ab diesem Moment gelten die in der CSS definierten Styles für Überschriften, Absätze und überhaupt alles andere für die entsprechende HTML-Datei. Der große Vorteil daran: Bei Änderungen am Styling muss man nicht die HTML-Datei anfassen, riskiert also nicht, irgendwas Inhaltliches kaputt zu machen, sondern kann das allein an der CSS machen.

HTML funktioniert grundlegend mit öffnenden und schließenden Tags (Beispiel: <h1>Das ist eine Überschrift erster Ordnung</h1>). Diese Logik findet sich an allen Stellen des HTML.

Die Grundstruktur einer HTML-Seite sieht so aus:

<!DOCTYPE html>

<html>

<head>

Hier stehen nicht sichtbare Informationen zur Seite (Ausnahme <title> ist sichtbar), sowas wie Autor, Metatags, Sprache etc. Auch werden hier z.B. JavaScript-Funktionen geladen.

</head>

<body>

Hier steht der gesamte sichtbare Inhalt der Seite, also Texte, Bilder, Videos etc.

</body>

</html>

Eine CSS-Datei folgt einer anderen Syntax als HTML.

So sieht z.B. ein CSS-Eintrag aus, der die Formatierung der Überschrift 1 (h1) festlegt.

h1 {

background-color: white;
color: red;
font-family: sans-serif;

}

CSS verwendet zum Öffnen und Schließen von Formatierungsdeklarationen geschweifte Klammern (PC: AltGR + 7 und AltGR + 9 / Mac: Alt +8 und Alt +9).

So, das reicht dann erst mal für heute.

Herzlich willkommen!

Ich heiße sie herzlich willkommen, liebe Teilnehmer*innen, zu unserem gemeinsamen Kurs zu Medienkompetenz, Web2.0 und Social Media.

Ich halte die Vorstellung meiner Person bewusst knapp (denn damit wird gleich eine der ersten Recherche-Aufgaben für sie verbunden sein):

Sascha Dinse, Diplom-Soziologe und freiberuflicher Dozent für Medienkompetenz. Ich arbeite eng mit NGOs und Wohlfahrtsverbänden zusammen, führe Fortbildungen und Lehraufträge durch und stehe ebenso für die Konzeption von Social Media Kommunikationskonzepten zur Verfügung. Daneben sind Computerspiele, Jugendschutz im Netz und Cybermobbing weitere Themenbereiche, in denen ich aktiv bin.

Das erst mal in aller Kürze. Mehr wird das gegenseitige Kennenlernen ergeben.

Als kleines Intro hier ein Erklärvideo zum Begriff „Social Media“.