Skip to content

V1 morgen

Jump to bottom
hzuellig edited this page Feb 17, 2025 · 1 revision

Modulstart

Slides

Intro HTML und CSS

Visual Studio Code installieren

https://visualstudio.microsoft.com/de/ Erweiterung Live Server installieren

HTML

HTML, Abkürzung für HyperText Markup Language. Aufgabe: dem Inhalt eine Struktur geben.
Beispiel:

<h1>Time Travelling</h1>

Die Elemente in den spitzen Klammern <h1> werden tags genannt. Sie übernehmen die Rolle des Mark-ups, der Auszeichnung. Im Beispiel: Die beiden Wörter Time Travelling werden als Überschrift der höchsten Hierachiestufe 1 ausgezeichnet.

HTML ist für Inhalt und Struktur zuständig. Der Inhalt steht zwischen einem öffnenden und einem schliessenden Tag. Die Tags strukturieren den Inhalt nach Bedeutung.

CSS

CSS, Abkürzung für Cascading Stylesheets. Aufgabe: Aussehen bestimmen und zwar bezüglich Stil und Layout.
Beispiel Stilanweisung:

h1{
    color:red;
}

Alle Elemente, die mit dem HTML Tag h1 markiert sind, erhalten eine rote Schrift.


Beispiel Layoutanweisung: 
h1{
    position:fixed;
    top:100px;
}

Alle Elemente, die mit dem HTML Tag h1 markiert sind, scrollen nicht mit und sind von der linken oberen Ecke des Browsers her gesehen um 100px nach unten verschoben.

CSS ist für Aussehen zuständig. Man kann zwischen Stilanweisungen und Layoutanweisungen unterscheiden.

Grundstruktur eines HTML Dokuments

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Time Travelling</h1>
    <p>Time travel is the concept of movement between certain points in time, analogous to movement between different points in space by an object or a person, typically with the use of a hypothetical device known as a time machine. Time travel is a widely recognized concept in philosophy and fiction, particularly science fiction. The idea of a time machine was popularized by H. G. Wells' 1895 novel The Time Machine. (Quelle: Wikipedia)

    </p>
</body>
</html>

Die <!DOCTYPE html>-Deklaration definiert, dass dieses Dokument ein HTML5-Dokument ist
Das <html>-Element ist das Wurzelelement einer HTML-Seite
Das <head>-Element enthält Metainformationen über die HTML-Seite
Das <title>-Element gibt einen Titel für die HTML-Seite an (der in der Titelleiste des Browsers oder in der Registerkarte der Seite angezeigt wird)
Das <body>-Element definiert den Textkörper des Dokuments und ist ein Container für alle sichtbaren Inhalte, wie Überschriften, Absätze, Bilder, Hyperlinks, Tabellen, Listen usw.
Das <h1>-Element definiert eine große Überschrift
Das <p>-Element definiert einen Absatz

Ein paar erste Tags mit einer semantischen (=inhaltlichen) Bedeutung

Tag Bedeutung Beispiel
h1, h2, h3 ... bis h6 Überschrift in abnehmender Wichtigkeit <h6>Heading 6</h6>
p Absatz <p>Absatz</p>
p Absatz <p>Absatz</p>
b Bold (fett) <b>fett ausgezeichnet</b>
a Link <a href="http://google.com" title="Beispiellink" >Link </a>
br Umbruch <br/> nur ein Tag, kein öffnender und schliessender Tag

Ein paar Tags ohne semantische (=inhaltlichen) Bedeutung

Es gibt nebst den semantischen Tags auch Tags, die der Darstellung oder der Auswahl von Text-Teilen dienen. div ist einer davon. Man kann sich die als Box oder Schachtel vorstellen, sie umfassen und gruppieren andere Elemente. Dadurch kann man zusammengehörige Teile als Ganzes verschieben oder stylen.

<div class="inhalt">
    <h1>Titel</h1>
    <p>Der Text.</p>
    <p>Der Text.</p>
</div>
 <span class="blau">Textteil der anders dargestellt wird </span> und hier geht der Text weiter ...

Wie greifen HTML und CSS ineinander?

CSS Angaben:

h1 {
  color: #24588d;
}
p {
  font-weight: bold;
}

Im Detail:

Syntax Bedeutung Im Detail
h1 Selektor Der Selektor gibt an, auf welche HTML Elemente die CSS Angaben zutreffen sollen
color Attribut Hier wird angegeben, welches Attribut des ausgewählten Elements gesetzt wird. color ist die Textfarbe
#24588d Wert Hier wird angegeben, welchen Wert das Attribut haben soll. #24588d ist eine Farbe im Hexadezimalsystem (dazu gleich mehr)

Selektoren im Detail

Selektoren können tags sein, wie oben h1oder p. Die Auswahl betrifft alle Elemente mit diesen Tags.

Klassen

Einem HTML-Tag kann immer auch eine Klasse zugewiesen werden. Die Klasse wird in der HTML-Datei im Tag über ein das Attribut «class» definiert. Im CSS-Selektor wird die Klasse über einen Punkt, gefolgt vom Klassenname, ausgewählt. Den Klassennamen könnt ihr frei setzen, er darf jedoch nicht mit Zahlen beginnen, keine Leerschläge enthalten und keine Sonderzeichen. Gross- und Kleinschreibung werden unterschieden. Klassen können mehrfach vergeben werden.

.blue { 
    color:blue;
 }
<h1>Eine erste Überschrift ohne spezielles CSS</h1>
<h2 class="blue">Eine zweite blaue Überschrift</h2>
<h2 >Eine dritte Überschrift ohne spezielles CSS</h2>
<h2 class="blue">Eine vierte blaue Überschrift</h2>

ID

Einem HTML-Tag kann immer auch eine ID zugewiesen werden. Die ID wird in der HTML-Datei im Tag über ein das Attribut «id» definiert. Im CSS-Selektor wird die ID über eine Raute (#), gefolgt vom ID-Name, ausgewählt. (Eine ID darf pro HTML Dokument im Unterschied zu einer Klasse nur einmal verwendet werden.)

#blauebox { 
    background-color:blue;
 }
<div id="blauebox">
    <h1>Eine erste Überschrift ohne spezielles CSS</h1>
    <h2 class="blue">Eine zweite blaue Überschrift</h2>
    <h2 >Eine dritte Überschrift ohne spezielles CSS</h2>
    <h2 class="blue">Eine vierte blaue Überschrift</h2>
</div>

Wo wird das CSS eingebunden?

Variante direkt im head
CSS kann direkt im head eingebunden werden. Es wird ausgezeichnet mit den style tags.

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1{
            color:blue;
        }
    </style>
</head>

Variante ausgelagert
Um Styles an einem zentralen Ort anpassen und verwalten zu können, werden sie in ein eigenes File mit der Endung .css geschrieben. Im CSS File sind keine style tags mehr notwendig. Das File wird im Head über das Element link eingebunden.

<link rel="stylesheet" href="style.css">

Variante direkt beim Element
In Übungen findet ihr styles manchmal auch in dieser Art mit dem style Attribut direkt beim Element. Da der Code dadurch schlechter leserlich wird, sollte man diese Methode nicht verwenden.

<h1 style="color:blue;text-align:center;">This is a heading</h1>

Hands-On, my first html page

Werkzeuge
Editor
Visual Studio Code installieren https://visualstudio.microsoft.com/de/
Einstellungen -> Erweiterungen -> Live Server installieren



Browser
Google Chrome oder Firefox

├── kickweb
│   ├── tag1
│   │   ├── uebung1.html
│   │   │

Ordnerstruktur anlegen, uebung1.html erstellen. Ausrufezeichen und Entertaste drücken -> generiert die Grundstruktur eines HTML Files.

Aufgabe eine erste Seite anlegen, einen Text schreiben oder kopieren, die genannten unterschiedlichen Tags verwenden, um Teile auszuzeichnen. Erste CSS Angaben im <head> des Dokuments angeben. Über Live Server Erweiterung im Browser ansehen.

Farben

Farben können im CSS unterschiedlich angegeben werden. Das hat damit zu tun, dass CSS sich über die Jahre immer weiter entwickelt hat. Heute gibt es für einige Dinge mehrere Möglichkeiten einen ähnlichen Effekt zu erzielen, so zum Beispiel Farbangaben.

ausgewählte Farbnamen
Aktuell 140 Namen, die unterstützt werden: https://www.w3schools.com/colors/colors_names.asp, zum Beispiel red, blue, green, aber auch speziellere wie DarkSlateGray, CornflowerBlue.

Hexadezimalwerte Eine hexadezimale Farbe wird so angegeben: #RRGGBB.
Die ersten beiden Werte für Rot, drei und vier für Grün, fünf und sechs für Blau. RR (Rot), GG (Grün) und BB (Blau) sind hexadezimale Ganzzahlen zwischen 00 und FF, die die Intensität der Farbe angeben.
Zum Beispiel wird #0000FF als blau angezeigt, da die blaue Komponente auf ihren höchsten Wert (FF) und die anderen auf 00 gesetzt sind.
F entspricht im Hexadezimalsystem 16, FF ist 16*16 -> 256, wenn man mit 0 zu zählen beginnt statt 1 -> 255.

RGB, RGBA Ein RGB-Farbwert wird angegeben mit: rgb(rot, grün, blau).

Jeder Parameter (Rot, Grün und Blau) definiert die Intensität der Farbe als Ganzzahl zwischen 0 und 255.

Zum Beispiel wird rgb(0, 0, 255) als Blau wiedergegeben, da der Parameter Blau auf den höchsten Wert (255) und die anderen auf 0 gesetzt sind.
rgba empfängt einen vierten Wert für den Alpha Kanal, dort reichen die Werte aber für 0 (ganz durchsichtig) bis 1 (deckend).

.rot{
    color:rgb(255, 0, 0);
}
.mitTransparenz{
    background-color: rgba(51, 170, 51, 0.4);
}

HSL https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl

Grundsätzlich sind in der CSS-Farbspezifikation für das Web alle Farben im Farbraum sRGB definiert. https://en.wikipedia.org/wiki/SRGB

Mehr zu Farben: https://www.w3schools.com/colors/default.asp

Accessibility und Farben https://coolors.co/contrast-checker/112a46-acc8e5

Gradients

Masseinheiten

CSS werte können verschiedene Einheiten annehmen. Einige Grössen-/Längeneinheiten können wie folgt kategorisiert werden:

  • fixe Einheiten (immer gleich)
  • flexible Einheiten (abhängig von Kontext)

Fixe Einheiten, sind fest, und eine Länge, die in einer dieser Einheiten ausgedrückt wird, erscheint in genau dieser Größe.

Abkürzung Grösse
cm
mm
in inches (1in = 96px = 2.54cm)
px pixels (1px = 1/96th of 1in)
pt points (1pt = 1/72 of 1in)
pc picas (1pc = 12 pt) 
h1 {
  font-size: 32px;
  line-height: 48px;
}

Absolute Längeneinheiten sind für die Verwendung am Bildschirm nicht zu empfehlen, da die Bildschirmgrößen so stark variieren. Sie können jedoch verwendet werden, wenn das Ausgabemedium bekannt ist, z. B. für das Drucklayout.

CSS Pixel (px) sind relativ zum Anzeigegerät. Bei Geräten mit niedriger Pixeldichte entspricht 1px einem Gerätepixel (Punkt) der Anzeige. Für Drucker und hochauflösende Bildschirme bedeutet 1px mehrere Gerätepixel.

Flexible Einheiten, geben ein Mass relativ zu einer anderen Längeneigenschaft an. Flexible Einheiten skalieren besser zwischen verschiedenen Rendering-Medien.

Eine Auswahl:

Abkürzung Grösse
% Relativ zum Parent-Element
em 1em entspricht der aktuellen Schriftgrösse des jeweiligen Elements
rem Entspricht der Schriftgrösse des Root-Elements (HTML)
vw 1% der Fensterbreite (Viewport)
vh 1% der Fensterhöhe (Viewport)

https://www.w3schools.com/cssref/css_units.php

Hands-On

Probiert die Farbangaben und die Masseinheiten auf eurer Übungsseite systematisch durch. Lest die Properties zu CSS Text: https://www.w3schools.com/css/css_text.asp und probiert auch dazu ein Beispiel. Die Idee ist, dass ihr euch selber eine Referenz erstellt, auf der ihr Beispiele und Konzepte nachschauen könnt. https://ida2021-staging.netlify.app/sira_trinkler/myprocess.html

W3Schools

Clone this wiki locally