Skip to content

Commit bb1eb3e

Browse files
ManuelTechertManuelTechert
committed
.
1 parent 846cec2 commit bb1eb3e

File tree

16 files changed

+234
-49
lines changed

16 files changed

+234
-49
lines changed

‎.DS_Store‎

0 Bytes
Binary file not shown.

‎alt/.DS_Store‎

0 Bytes
Binary file not shown.

‎derKompletteWebentwickler/.DS_Store‎

0 Bytes
Binary file not shown.

‎derKompletteWebentwickler/1html/.DS_Store‎

6 KB
Binary file not shown.

‎derKompletteWebentwickler/WebServerLite.jar‎ renamed to ‎derKompletteWebentwickler/1html/WebServerLite.jar‎

File renamed without changes.

‎derKompletteWebentwickler/1html/index.html‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
6+
<meta http-equiv="content-type" content = "text/html"; charset=utf-8 />
7+
<title> Meine Website </title>
8+
9+
10+
</head>
11+
12+
<body>
13+
14+
<img src = "https://upload.wikimedia.org/wikipedia/commons/3/3c/Macchapuchare.jpg" width="100" height="100"
15+
align="left">
16+
<p id="top" >Dies ist ein Test </p>
17+
18+
<form>
19+
<p> Username: <input type="text" placeholder = "Dein Benutzername"> </p>
20+
<p> Eingeloggt bleiben?: <input type="checkbox" checked> </p>
21+
<p> Unter 18: <input type="radio" name="Age" value ="u18"> </p>
22+
<p> Ueber 18: <input type="radio" name="Age" value = "ue18"> </p>
23+
<p> Lieblingsessen:
24+
<select>
25+
26+
<option> Pizza</option>
27+
<option selected> Spaghetti </option>
28+
<option> Pommes</option>
29+
30+
</select>
31+
</p>
32+
33+
<p> <input type="submit" value="klick mich"> </p>
34+
</form>
35+
36+
<table>
37+
38+
<thead>
39+
40+
<tr>
41+
<th>Name</th>
42+
<th>Lieblings <br>Farbe</th>
43+
</tr>
44+
</thead>
45+
46+
<tbody>
47+
48+
<tr>
49+
<td>Denis</td>
50+
<td>Blau</td>
51+
52+
</tr>
53+
54+
<tr>
55+
<td>Stefan</td>
56+
<td>Gelb</td>
57+
58+
</tr>
59+
60+
<tr>
61+
<td>Max</td>
62+
<td>Rot</td>
63+
64+
</tr>
65+
</tbody>
66+
67+
</table>
68+
69+
<p><a href="http://wikipedia.org"><img src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Macchapuchare.jpg"
70+
width="100" height="100" ></a></p>
71+
72+
<p><a href="#top"> Nach oben zurück! </a> </p>
73+
<p> Der hashtag und nachfolgende ID leitet den User zu ID weiter. </p>
74+
<p> IDs können Elementen mitgegeben werden </p>
75+
76+
<iframe src="http://wikipedia.org" width="500" height="500"> </iframe>
77+
<p> Über Iframes können externe Websiten, auch Youtube in Websiten eingebunden werden.</p>
78+
79+
<iframe width="560" height="315" src="https://www.youtube.com/embed/26U_seo0a1g" frameborder="0" allowfullscreen></iframe>
80+
81+
</body>
82+
83+
84+
85+
86+
</html>

‎derKompletteWebentwickler/wikipedia.png‎ renamed to ‎derKompletteWebentwickler/1html/wikipedia.png‎

File renamed without changes.

‎derKompletteWebentwickler/2css/.DS_Store‎

6 KB
Binary file not shown.

‎derKompletteWebentwickler/2css/Webpage-with-style.html‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!DOCTYPE>
2+
<html>
3+
4+
<head>
5+
6+
<meta http-equiv="content-type" content ="text/html" charset="utf-8" />
7+
<title> Meine Website </title>
8+
9+
<style type="text/css">
10+
11+
p{
12+
color:blue;
13+
font-size:200%;
14+
}
15+
16+
h1{
17+
color:red;
18+
}
19+
20+
</style>
21+
22+
</head>
23+
24+
<body>
25+
26+
<p> Jo hier mal ein bisschen Text, den ich gleich mit CSS verändern werde.
27+
Richtig cool, oder? Man kann über Inline CSS in einem HTML Dokument style als Attribut mitgeben.
28+
Dadurch kann man dann z.B. über style="color:blue; font-size:200%" Befehle mitgeben, die immer
29+
durch ein Semikolon getrennt sind. Das alles geschieht inline, man kann aber auch extra Dateien anlegen. </p>
30+
<p> Internal CSS ist super </p>
31+
<h1> So hier nochmal ein kurzer Text, um CSS zu üben </h1>
32+
<p> Neben extra CSS-Dateien oder Inline-CSS, kann man auch im Head ein style tag anlegen und als Attribut
33+
type="text/css" mitgeben. Innerhalb davon kann man dann mit Selektoren verschiedene Elemente beeinflussen.
34+
Jeder Befehl muss dort auch mit einem Semikolon getrennt werden.
35+
36+
37+
38+
39+
</body>
40+
41+
</html>

‎derKompletteWebentwickler/2css/cssKlassen.html‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
<!DOCTYPE>
2+
<html>
3+
4+
<head>
5+
6+
<meta http-equiv="content-type" content ="text/html" charset="utf-8" />
7+
<title> Meine Website </title>
8+
9+
<style type="text/css">
10+
11+
.red{
12+
color:red;
13+
}
14+
15+
.large{
16+
font-size:200%;
17+
}
18+
19+
#green{
20+
21+
color:green;
22+
}
23+
24+
.underlined{
25+
26+
text-decoration:underline;
27+
}
28+
29+
#div1{
30+
color:blue;
31+
background-color:pink;
32+
width:200px;
33+
position:fixed;
34+
/*position:relative;
35+
left:200px; /*Abstand nach links.
36+
Position absolute ist permanent, andere Elemente ignorieren die Position.
37+
Geht immer um obere linke Ecke, außerhalb des Flows.
38+
Fixed bleibt gleich, wandert mit Scrollen mit, wird immer an gleicher Position angezeigt.*/
39+
40+
/*float gibt an in welche Richtung die ELemente fließen,
41+
zwei linke float Objekte würden sich der Reihe nach links anordnen (nebeneinander).
42+
Um darunter dann z.B. Text anzeigen zu können, muss clear-float benutzt werden!*/
43+
44+
}
45+
#div2{
46+
background-color:#00FF0C;
47+
width:400px;
48+
height:5000px;
49+
50+
/*Der z-index gibt an, welches Element im Vordergrund ist, je höher, desto weiter oben*/
51+
/*Opacity Wert von 0 bis 1 Transparenz*/
52+
}
53+
54+
55+
56+
</style>
57+
58+
</head>
59+
60+
<body>
61+
62+
<div id="div1">
63+
<p> Jo hier mal ein bisschen Text, den ich gleich mit CSS verändern werde.
64+
Richtig cool, oder? Man kann über Inline CSS in einem HTML Dokument style als Attribut mitgeben.
65+
Dadurch kann man dann z.B. über style="color:blue; font-size:200%" Befehle mitgeben, die immer
66+
durch ein Semikolon getrennt sind. Das alles geschieht inline, man kann aber auch extra Dateien anlegen. </p>
67+
<p class="large"> Internal CSS ist super </p>
68+
</div>
69+
70+
<div id="div2">
71+
<h1 class="red"> So hier nochmal ein kurzer Text, um CSS zu üben </h1>
72+
<p id="green"> Dies ist etwas mehr text. <span class=underlined>Und dies ist unterstrichen.
73+
Innere Tags überschreiben die Äußeren. Internal CSS überschreibt external CSS</span> </p><
74+
</div>
75+
76+
<p> Etwas mehr Text! </p>
77+
78+
79+
80+
</body>
81+
82+
</html>

0 commit comments

Comments
 (0)