Elemente
Dauer: 40 Minuten
keine Übung, dafür interaktives Live-Coding und ggf. Diskussion
Themen:
- Überschriften
- Paragraphen
- Textformatierung
- Block- und Inline-Elemente
Ziele:
- erste Elemente für Text kennenlernen
- Unterschied von Block- und inline-Elementen verstehen
Erste grobe App-Idee
Live Coding beginnt!
Gemeinsam entwickeln wir die Wetter-App. Eine einfache Skizze der App-Idee wird auf dem Whiteboard oder online mit Excalidraw entworfen:
- Überschrift
- Blöcke von p-Elementen untereinander:
- Basel 21 Wolken(später als Bild/Icon)
- Berlin 19 Regen(später als Bild/Icon)
- Barcelona Sonne(später als Bild/Icon)
Wir halten es hier ganz bewusst SEHR einfach, da CSS erst beim nächsten Termin dazukommt.
Wir starten mit h1, p, b, i in VS Code und übernehmen ggf. das HTML-Grundgerüst von
replit.com (HTML/CSS/JS Template).
Überschriften
Mit h1 bis h6 gibt es Überschriften verschiedener Ebenen. Die
Hauptüberschrift dabei ist h1.
Überschriften werden von Browsern unterschiedlich groß und in Fettdruck dargestellt. Allerdings werden wir erst mit CSS die Möglichkeit erhalten, die Erscheinung von HTML-Elementen beliebig zu gestalten.
Live Coding
Überschrift mit h1: Meine Wetter-App (oder so ähnlich)
Überschriften auf Prog Content
Texte in Paragraphen
Bei Text ist insbesondere zu beachten, dass Leerzeichen ignoriert werden.
Zusammengehörende Texte werden meistens mit dem p-Element umgeben
(p steht für paragraph).
Text in Paragraphen auf Prog Content
Live Coding
Mehrere p-Elemente untereinander mit Beispiel-Daten für Städte
Textformatierung
Mit den Elementen b und i lassen sich Texte in Fettdruck (b) und
in kursiv (schräg) darstellen.
Nochmals: die eigentliche Gestaltung (Schriftgrößen, Farben, usw.) werden wir mit CSS definieren.
Dies dient hier in erster Linie nur zur Veranschaulichung von Block- und inline-Elementen (siehe folgenden Abschnitt)
Textformatierung auf Prog Content
Live Coding
Name der Stadt in Fettdruck, Temperatur in kursiver Schrift
Block- und inline
Vergleichen wir den p-Tag mit den Elementen b und i. Was fällt auf?
Nach dem p-Element erhalten wir einen Zeilenumbruch bzw. das nächste Element
fängt auf einer neuen Zeile an. Bei b und i hingegen findet kein
Zeilenumbruch statt. p ist eine Beispiel eines Blockelements. b und i
sind hingegen inline-Elemente.
Mit div und span stehen uns Blockelemente (div) und inline-Elemente
(span) zur Verfügung, die ganz allgemein und vielseitig eingesetzt werden
können. Diese werden häufig mit CSS-Styles zur flexiblen Gestaltung
ausgestattet. Wir werden diese noch im Detail kennenlernen und einsetzen.