Skip to content

Commit f16ca9d

Browse files
mikebarkminmikebarkmin
committed
neue seiten zur webentwicklung
1 parent 329de1b commit f16ca9d

26 files changed

+1109
-0
lines changed

‎book/index.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
---
22
name: Willkommen
33
lang: de
4+
index: 0
45
---
56

67
# Willkommen

‎book/lesezeichen.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
---
2+
name: Lesezeichen
3+
lang: de
4+
index: 1
5+
---
6+
7+
# Lesezeichen
8+
9+
Wenn du hinter einer Überschrift das Lesezeichen aktivierst, dann wirst du einen Link zu dieser Überschrift hier unten sehen. Du kannst das Lesezeichen auch wieder deaktivieren, indem du erneut auf die Überschrift klickst.
10+
11+
::bookmarks

‎book/projekte/bunny-hop/index.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22
name: Bunny Hop
33
index: 6
44
lang: de
5+
keywords:
6+
- scratch4j
7+
- java
8+
- level-1
59
---
610

711
# Bunny Hop

‎book/projekte/donut-io/index.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
---
22
name: Scratch for Java Donut IO
33
lang: de
4+
keywords:
5+
- scratch4j
6+
- java
7+
- level-1
48
---
59

610
# Scratch for Java Donut IO

‎book/projekte/evolutionaere-algorithmen/index.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22
name: Evolutionäre Algortihmen
33
index: 5
44
lang: de
5+
keywords:
6+
- java
7+
- scratch4j
8+
- level-1
59
---
610

711
# Evolutionäre Algorithmen

‎book/projekte/messenger/index.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@
22
name: Verschlüsselter Messenger
33
index: 3
44
lang: de
5+
keywords:
6+
- java
7+
- level-2
58
---
69

710
# Messenger

‎book/projekte/rpg/index.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
---
22
name: Scratch for Java RPG
33
lang: de
4+
keywords:
5+
- scratch4j
6+
- java
7+
- level-0
48
---
59

610
# Scratch for Java RPG

‎book/projekte/uebersicht.md

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
---
2+
name: Übersicht
3+
lang: de
4+
---
5+
6+
# Übersicht
7+
8+
## Programmierung mit Java (Level 0)
9+
10+
Das sind Projekte, die sich an Anfänger:innen richten. Hier wird die Programmiersprache Java und die objektorientierte Programmierung erlernt.
11+
12+
::pagelist{source="keyword(java) AND keyword(level-0)"}
13+
14+
## Programmierung mit Java (Level 1)
15+
16+
Diese Projekte richten sich an Personen, die bereits erste Erfahrungen mit Java gesammelt haben und nun tiefer in die Materie einsteigen möchten.
17+
18+
::pagelist{source="keyword(java) AND keyword(level-1)"}
19+
20+
## Programmierung mit Java (Level 2)
21+
22+
In diesen Projekten wird das Wissen aus den Level 0 und Level 1 Projekten vertieft und erweitert.
23+
24+
::pagelist{source="keyword(java) AND keyword(level-2)"}
25+
26+
## Webentwicklung (Level 0)
27+
28+
Hier lernst du die Grundlagen der Webentwicklung kennen. Du wirst HTML, CSS und JavaScript lernen.
29+
30+
::pagelist{source="keyword(web) AND keyword(level-0)"}

‎book/web/grundlagen/css/01-anatomie-einer-css-datei.md

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
---
2+
name: Anatomie einer CSS-Datei
3+
lang: de
4+
---
5+
6+
# Anatomie einer CSS-Datei
7+
8+
CSS-Dateien bestehen aus Regeln, die das Aussehen von HTML-Elementen bestimmen. Eine Regel besteht aus einem Selektor und einer oder mehreren Deklarationen. Ein Selektor bestimmt, auf welche Elemente die Deklarationen angewendet werden sollen. Eine Deklaration besteht aus einem Eigenschaftsname und einem Wert, der dieser Eigenschaft zugewiesen wird.
9+
10+
:::webide{id="css-anatomy"}
11+
12+
```html
13+
<h1>Beispiel</h1>
14+
```
15+
16+
```css
17+
/* Beispiel für eine Regel */
18+
h1 {
19+
color: red;
20+
font-size: 24px;
21+
}
22+
```
23+
:::
24+
25+
In diesem Beispiel wird die Schriftfarbe von `h1`-Elementen auf Rot und die Schriftgröße auf 24 Pixel festgelegt.

‎book/web/grundlagen/css/02-einbinden-von-css-dateien.md

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
---
2+
name: Einbinden von CSS-Dateien
3+
lang: de
4+
index: 2
5+
---
6+
7+
# Einbinden von CSS-Dateien
8+
9+
CSS-Dateien werden in HTML-Dokumente eingebunden, um das Aussehen von HTML-Elementen zu definieren. Dazu wird das `<link>`-Element verwendet. Das `<link>`-Element wird im `<head>`-Bereich des HTML-Dokuments platziert und verweist auf die CSS-Datei, die eingebunden werden soll.
10+
11+
```html
12+
<!DOCTYPE html>
13+
<html lang="de">
14+
<head>
15+
<meta charset="UTF-8" />
16+
<title>Meine Webseite</title>
17+
<link rel="stylesheet" href="styles.css" />
18+
</head>
19+
<body>
20+
<h1>Willkommen auf meiner Webseite</h1>
21+
<p>Hier steht der Inhalt meiner Webseite.</p>
22+
</body>
23+
</html>
24+
```
25+
26+
In diesem Beispiel wird die CSS-Datei `styles.css` eingebunden. Die CSS-Datei muss sich im gleichen Verzeichnis wie das HTML-Dokument befinden, damit sie korrekt eingebunden wird. Wenn sich die CSS-Datei in einem anderen Verzeichnis befindet, muss der Pfad zur CSS-Datei entsprechend angepasst werden.
27+
28+
```html
29+
<link rel="stylesheet" href="pfad/zur/css-datei/styles.css" />
30+
```
31+
32+
Am besten setzt man den Pfad absolut, um sicherzustellen, dass die CSS-Datei immer gefunden wird, unabhängig davon, wo sich das HTML-Dokument befindet.
33+
34+
```html
35+
<link rel="stylesheet" href="/pfad/zur/css-datei/styles.css" />
36+
```
37+
38+
Es können auch mehrere CSS-Dateien in einem HTML-Dokument eingebunden werden, indem mehrere `<link>`-Elemente verwendet werden.
39+
40+
```html
41+
<link rel="stylesheet" href="/styles.css" />
42+
<link rel="stylesheet" href="/more-styles.css" />
43+
```
44+
45+
:::alert{info}
46+
Die Reihenfolge, in der die CSS-Dateien eingebunden werden, ist wichtig, da die zuletzt eingebundene CSS-Datei Vorrang hat. Wenn also zwei CSS-Dateien die gleiche Eigenschaft für dasselbe Element definieren, wird die Eigenschaft aus der zuletzt eingebundenen CSS-Datei verwendet.
47+
:::

0 commit comments

Comments
 (0)