-
Notifications
You must be signed in to change notification settings - Fork 6
/
Copy pathindex.html
142 lines (130 loc) · 4.55 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<!-- Wichtig für Responsive Design -->
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Wichtig für SEO -->
<title>Internet Technik</title>
<meta
name="description"
content="In der Internet Technik Vorlesung der HdM Stuttgart lernen die Studierenden die Grundlagen des Internets und wie eine Webseite entwickelt wird."
/>
<!-- CSS Datei -->
<link rel="stylesheet" href="styles.css" />
<link rel="stylesheet" href="assets/hamburger.css" />
<!-- JavaScript Datei -->
<script src="assets/hamburger.js"></script>
</head>
<body>
<header class="nav-bar">
<div class="logo">
<strong>🚀 Internet Technik</strong>
</div>
<button id="menu">
<img id="hamburger" src="assets/icons/hamburger.svg" class="active" />
<img id="close" src="assets/icons/close.svg" />
</button>
<nav>
<ul>
<li><a href="index.html">Startseite</a></li>
<li><a href="exercises.html">Übungen</a></li>
<li><a href="projects.html">Projekte</a></li>
</ul>
</nav>
</header>
<section class="hero">
<img src="images/hero.jpg" alt="" />
<div class="headline-container">
<h1>Internet Technik</h1>
<h2>Entwickle deine eigene Webseite</h2>
</div>
</section>
<aside>
<nav class="internal">
<ul>
<li><a href="#basics">Grundlagen</a></li>
<li><a href="#html">HTML</a></li>
<li><a href="#css">CSS</a></li>
<li><a href="#javascript">JavaScript</a></li>
</ul>
</nav>
</aside>
<section class="content-container" id="basics">
<h2>Grundlagen</h2>
<p>
In den Grundlagen lernen wir wie das
<strong>Internet</strong> funktioniert. Wie kann ein Client mit einem Server kommunizieren? Und was ist
überhaupt ein <em>Server</em>?
</p>
<p>
Außerdem lernen wir die ersten Tools kennen. Wie funktioniert das
<strong>Terminal</strong> bzw. die Kommandozeile? Was ist dieses <strong>Git</strong> und wofür brauchen wir es?
</p>
</section>
<aside class="quote">
<figure>
<blockquote cite="https://de.wikipedia.org/wiki/Thomas_J._Watson">
"Ich denke, es gibt weltweit einen Markt für vielleicht fünf Computer."
</blockquote>
<figcaption>Thomas J. Watson - IBM Chef - 1943</figcaption>
</figure>
</aside>
<section class="content-container" id="html">
<h2>HTML</h2>
<div class="two-columns">
<div>
<p>
Das Grundgerüst jeder Webseite besteht aus HTML. Mit HTML beschreiben wir den Aufbau und die Inhalte unserer
Webseite.
</p>
<p>Wichtige Aspekte von HTML sind:</p>
<ul>
<li>Accesibility</li>
<li>Semantik</li>
<li>SEO</li>
</ul>
</div>
<figure>
<img src="./images/html.jpg" alt="html letters" width="300" class="image-hover" />
<figcaption>
Foto von
<a href="https://www.pexels.com/de-de/foto/vier-buchstabenkacheln-1591061/" target="_blank"
>Miguel Á. Padriñán</a
>
</figcaption>
</figure>
</div>
</section>
<aside class="content-container">
<hr />
</aside>
<section class="content-container" id="css">
<h2>CSS</h2>
<p>
Unser HTML können wir mit CSS gestalten. Hierfür stehen unterschiedliche Properties zu verfügung, die wir mit
einem Selektor auf unser HTML anwenden können.
</p>
<br />
<a class="button" href="https://developer.mozilla.org/de/docs/Web/CSS" target="_blank"> Mehr erfahren</a>
</section>
<aside class="content-container">
<hr />
</aside>
<section class="content-container" id="javascript">
<h2>JavaScript</h2>
<p>
Mit JavaScript können wir die Möglichkeiten von HTML und CSS erweitern und unsere Webseite dynamischer und
<span>interaktiver</span> gestalten.
</p>
<br />
<button class="button" onclick="document.querySelector('#javascript span').classList.toggle('highlight');">
Interaktion
</button>
</section>
<footer>
Von <a href="https://www.manuel-deutsch.de/?likes=course" target="_blank">Manuel Deutsch</a> für die
<a href="https://www.hdm-stuttgart.de" target="_blank">HdM Stuttgart</a><span> | 2021</span>
</footer>
</body>
</html>