leon.hoppe/ProjectBackup
Archived
Private
Public Access
1
0
Fork 0
Code Activity

Initial commit

Browse Source
This commit is contained in:
Leon Hoppe
2022-09-04 12:45:01 +02:00
commit f4a01d6a69
11601 changed files with 4206660 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
HTML/html-kurs/.idea/.gitignore generated vendored Normal file
View File

@@ -0,0 +1,8 @@
# Default ignored files
/shelf/
/workspace.xml
# Datasource local storage ignored files
/dataSources/
/dataSources.local.xml
# Editor-based HTTP Client requests
/httpRequests/

8
HTML/html-kurs/.idea/Kurs.iml generated Normal file
View File

@@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<module type="WEB_MODULE" version="4">
<component name="NewModuleRootManager">
<content url="file://$MODULE_DIR$" />
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>

5
HTML/html-kurs/.idea/codeStyles/codeStyleConfig.xml generated Normal file
View File

@@ -0,0 +1,5 @@
<component name="ProjectCodeStyleConfiguration">
<state>
<option name="PREFERRED_PROJECT_CODE_STYLE" value="Default" />
</state>
</component>

7
HTML/html-kurs/.idea/discord.xml generated Normal file
View File

@@ -0,0 +1,7 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="DiscordProjectSettings">
<option name="show" value="PROJECT_FILES" />
<option name="description" value="" />
</component>
</project>

8
HTML/html-kurs/.idea/modules.xml generated Normal file
View File

@@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/.idea/Kurs.iml" filepath="$PROJECT_DIR$/.idea/Kurs.iml" />
</modules>
</component>
</project>

6
HTML/html-kurs/.idea/vcs.xml generated Normal file
View File

@@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="$PROJECT_DIR$" vcs="Git" />
</component>
</project>

15
HTML/html-kurs/Basics/BorderBox/BorderBox.css Normal file
View File

@@ -0,0 +1,15 @@
* {
box-sizing: border-box;
}
div {
width: 300px;
height: 300px;
padding: 50px;
background-color: grey;
margin: 20px;
}
#div1 {
border: 20px solid red;
}

18
HTML/html-kurs/Basics/BorderBox/BorderBox.html Normal file
View File

@@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>BorderBox</title>
<link rel="stylesheet" type="text/css" href="BorderBox.css">
</head>
<body>
<div id="div1">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
</div>
<div id="div2">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
</div>
</body>
</html>

8
HTML/html-kurs/Basics/BoxModel/BoxModel.css Normal file
View File

@@ -0,0 +1,8 @@
div {
background-color: grey;
width: 300px;
height: 300px;
padding: 50px;
margin: 100px;
border: 20px solid black;
}

18
HTML/html-kurs/Basics/BoxModel/BoxModel.html Normal file
View File

@@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>BoxModel</title>
<link rel="stylesheet" type="text/css" href="BoxModel.css">
</head>
<body>
<div>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</body>
</html>

7
HTML/html-kurs/Basics/IDselektoren/IDselektoren.css Normal file
View File

@@ -0,0 +1,7 @@
#warnung {
color: orange;
}
#test {
background-color: red;
}

18
HTML/html-kurs/Basics/IDselektoren/IDselektoren.html Normal file
View File

@@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>IDselektoren</title>
<link rel="stylesheet" type="text/css" href="IDselektoren.css">
</head>
<body>
<p id="warnung">Dies ist ein wenig Text</p>
<p>Dies ist ein wenig Text</p>
<p>Dies ist ein wenig Text</p>
<span id="test">Dies ist ein wenig Text</span><br><br>
<span>Dies ist ein wenig Text</span><br><br>
<span>Dies ist ein wenig Text</span>
</body>
</html>

9
HTML/html-kurs/Basics/bilder/bilder.css Normal file
View File

@@ -0,0 +1,9 @@
#html5 {
width: auto;
height: 300px;
}
#logo {
width: auto;
height: 300px;
}

14
HTML/html-kurs/Basics/bilder/bilder.html Normal file
View File

@@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Bilder</title>
<link rel="stylesheet" type="text/css" href="bilder.css">
</head>
<body>
<img src="html5.png" alt="Logo von HTML5" id="html5">
<img src="https://leon-hoppe.de/favicon.png" alt="Logo von leon-hoppe.de" id="logo">
</body>
</html>

BIN
HTML/html-kurs/Basics/bilder/html5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 69 KiB

81
HTML/html-kurs/Basics/border/border.css Normal file
View File

@@ -0,0 +1,81 @@
div {
width: 200px;
height: 200px;
background-color: grey;
margin-bottom: 20px;
box-sizing: border-box;
}
#div1 {
border: 20px solid red;
}
#div2 {
border-width: 20px;
border-style: solid;
border-color: red;
}
#div3 {
border: 20px dotted red;
}
#div4 {
border: 20px dashed red;
}
#div5 {
border: 20px double red;
}
#div6 {
border: 20px groove red;
}
#div7 {
border: 20px ridge red;
}
#div8 {
border: 20px inset red;
}
#div9 {
border: 20px outset red;
}
#div10 {
border-bottom: 10px solid blue;
border-top: 20px dotted red;
border-right: 100px groove pink;
border-left: 30px dashed green;
}
#div11 {
border-bottom-width: 10px;
border-bottom-style: solid;
border-bottom-color: red;
border-top-width: 20px;
border-top-style: dotted;
border-top-color: blue;
border-right-width: 100px;
border-right-style: groove;
border-right-color: pink;
border-left-width: 30px;
border-left-style: dashed;
border-left-color: green;
}
#div12 {
color: white;
font-weight: bold;
height: 50px;
width: 400px;
padding: 15px;
font-size: 20px;
background-color: deepskyblue;
border-left: 10px solid dodgerblue;
}

25
HTML/html-kurs/Basics/border/border.html Normal file
View File

@@ -0,0 +1,25 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Border</title>
<link rel="stylesheet" type="text/css" href="border.css">
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<div id="div5"></div>
<div id="div6"></div>
<div id="div7"></div>
<div id="div8"></div>
<div id="div9"></div>
<div id="div10"></div>
<div id="div11"></div>
<div id="div12">Dies ist eine Benachrichtigung!</div>
<div id="div13"></div>
</body>
</html>

9
HTML/html-kurs/Basics/breiteUndHöhe/breiteUndHöhe.css Normal file
View File

@@ -0,0 +1,9 @@
p {
background-color: grey;
color: white;
}
p ~ p {
width: 400px;
height: 300px;
}

14
HTML/html-kurs/Basics/breiteUndHöhe/breiteUndHöhe.html Normal file
View File

@@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Breite und Höhe</title>
<link rel="stylesheet" type="text/css" href="breiteUndHöhe.css">
</head>
<body>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</body>
</html>

24
HTML/html-kurs/Basics/displayEigenschaft/displayEigenschaft.css Normal file
View File

@@ -0,0 +1,24 @@
.test1 {
display: block;
background-color: red;
width: 300px;
height: 300px;
margin-bottom: 20px;
}
.test2 {
width: 300px;
height: 300px;
background-color: #0F0;
margin-bottom: 20px;
display: inline;
}
.test3 {
width: 300px;
height: 300px;
background-color: black;
margin-bottom: 20px;
color: white;
display: inline-block;
}

20
HTML/html-kurs/Basics/displayEigenschaft/displayEigenschaft.html Normal file
View File

@@ -0,0 +1,20 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Display Eigenschaft</title>
<link rel="stylesheet" type="text/css" href="displayEigenschaft.css">
</head>
<body>
<span class="test1">Wir stellen jetzt diese span </span>
<span class="test1">statt als Inline Element als Block Element dar</span>
<div class="test2">Text!</div>
<div class="test2">Text!</div>
<div class="test3">Text!</div>
<div class="test3">Text!</div>
</body>
</html>

5
HTML/html-kurs/Basics/div/div.css Normal file
View File

@@ -0,0 +1,5 @@
div {
background-color: grey;
width: 400px;
height: 400px;
}

18
HTML/html-kurs/Basics/div/div.html Normal file
View File

@@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>DIV</title>
<link rel="stylesheet" type="text/css" href="div.css">
</head>
<body>
<div>
<h1>Überschrift</h1>
<p>Dies ist ein wenig Text in einem DIV!</p>
</div>
<br>
<div></div>
</body>
</html>

18
HTML/html-kurs/Basics/externalCSS/externalCSS.css Normal file
View File

@@ -0,0 +1,18 @@
html {
background-color: blue;
color: white;
}
h1 {
font-size: 70px;
text-decoration: underline;
}
p {
color: purple;
}
span {
font-weight: bold;
color: white;
}

19
HTML/html-kurs/Basics/externalCSS/externalCSS.html Normal file
View File

@@ -0,0 +1,19 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>External CSS</title>
<link rel="stylesheet" type="text/css" href="externalCSS.css">
</head>
<body>
<h1>Inline CSS</h1>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. <span>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</span> Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</body>
</html>

43
HTML/html-kurs/Basics/farben/farben.css Normal file
View File

@@ -0,0 +1,43 @@
#vordefiniert {
width: 300px;
height: 300px;
background-color: olivedrab;
}
#hexadezimal {
width: 300px;
height: 300px;
background-color: #AF0F55;
}
#RGB {
width: 300px;
height: 300px;
background-color: rgb(33, 77, 99);
}
#RGBA {
width: 300px;
height: 300px;
background-color: rgba(94, 180, 199, 0.2);
}
.hintergrund {
width: 400px;
height: 400px;
padding: 50px;
box-sizing: border-box;
background-color: rgb(40, 60, 80);
}
#HSL {
width: 300px;
height: 300px;
background-color: hsl(167, 77%, 50%);
}
#HSLA {
width: 300px;
height: 300px;
background-color: hsla(44, 33%, 53%, 0.5);
}

18
HTML/html-kurs/Basics/farben/farben.html Normal file
View File

@@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Farben</title>
<link rel="stylesheet" type="text/css" href="farben.css">
</head>
<body>
<div id="vordefiniert"></div>
<div id="hexadezimal"></div>
<div id="RGB"></div>
<div class="hintergrund"><div id="RGBA"></div></div>
<div id="HSL"></div>
<div class="hintergrund"><div id="HSLA"></div></div>
</body>
</html>

7
HTML/html-kurs/Basics/geschwisterselektoren/geschwisterselektoren.css Normal file
View File

@@ -0,0 +1,7 @@
span ~ i {
color: red;
}
i ~ b {
color: blue;
}

19
HTML/html-kurs/Basics/geschwisterselektoren/geschwisterselektoren.html Normal file
View File

@@ -0,0 +1,19 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Geschwisterselektoren</title>
<link rel="stylesheet" type="text/css" href="geschwisterselektoren.css">
</head>
<body>
<p>
<span>Dies ist ein wenig Text in einer Span</span>
<b>Dieser Abschnitt ist fett!</b>
<i>Dieser Abschnitt ist kursiv!</i>
<u>Dieser Abschnitt ist unterstrichen!</u>
<b>Dieser Abschnitt ist auch fett!</b>
</p>
</body>
</html>

10
HTML/html-kurs/Basics/grundgeruest.html Normal file
View File

@@ -0,0 +1,10 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>HTML-Grundgerüst</title>
</head>
<body>
</body>
</html>

33
HTML/html-kurs/Basics/größenangaben/größenangaben.css Normal file
View File

@@ -0,0 +1,33 @@
#absoulut {
width: 300px;
height: 300px;
font-size: 20px;
background-color: #F00;
}
#prozent {
width: 20%;
height: 20%;
background-color: #0F0;
}
html, body {
height: 100%;
}
body {
margin: 0;
font-size: 20px;
}
#em {
font-size: 2em;
}
.em {
font-size: 2em;
}
.rem {
font-size: 2rem;
}

18
HTML/html-kurs/Basics/größenangaben/größenangaben.html Normal file
View File

@@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Größenangaben</title>
<link rel="stylesheet" type="text/css" href="größenangaben.css">
</head>
<body>
<div id="absoulut">Dies ist ein Div mit absouluten Größenangaben</div>
<div id="prozent">Dies ist ein Div mit Größenangaben in Prozent</div>
<div id="em">Text!</div>
<div class="em">Text!<div class="em">Text!<div class="em">Text!<div class="em">Text!</div></div></div></div>
<div class="rem">Text!<div class="rem">Text!<div class="rem">Text!<div class="rem">Text!</div></div></div></div>
</body>
</html>

10
HTML/html-kurs/Basics/halloWelt.html Normal file
View File

@@ -0,0 +1,10 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
Hallo Welt!
</body>
</html>

8
HTML/html-kurs/Basics/inlineBlock/inlineBlock.css Normal file
View File

@@ -0,0 +1,8 @@
div {
width: 300px;
height: 300px;
}
p, div, h1 {
background-color: #00F;
}

26
HTML/html-kurs/Basics/inlineBlock/inlineBlock.html Normal file
View File

@@ -0,0 +1,26 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Inline Block</title>
<link rel="stylesheet" type="text/css" href="inlineBlock.css">
</head>
<body>
<span>Die span ist ein Inline Element</span>
<u> also fängt das nächste Inline Element nicht in der nächsten Zeile an</u>
<strong> sondern die aktuelle Zeile wird einfach fortgesetzt</strong>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<div></div>
<h1>Dies ist ein Block Element</h1>
</body>
</html>

18
HTML/html-kurs/Basics/inlineCSS.html Normal file
View File

@@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang="de" style="background-color: blue; color: white">
<head>
<meta charset="UTF-8">
<title>Inline CSS</title>
</head>
<body>
<h1 style="font-size: 70px; text-decoration: underline">Inline CSS</h1>
<p style="color: purple">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<br>
At vero eos et accusam et justo duo dolores et ea rebum. <span style="font-weight: bold; color: white">Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</span> Lorem ipsum dolor sit amet,<br>
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.<br>
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</body>
</html>

40
HTML/html-kurs/Basics/internalCSS.html Normal file
View File

@@ -0,0 +1,40 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Internal CSS</title>
<style>
html {
background-color: blue;
color: white;
}
h1 {
font-size: 70px;
text-decoration: underline;
}
p {
color: purple;
}
span {
color: white;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Inline CSS</h1>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. <span>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</span> Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</body>
</html>

16
HTML/html-kurs/Basics/kindselektoren/kindselektoren.css Normal file
View File

@@ -0,0 +1,16 @@
p > span {
color: red;
}
p > b {
color: blue;
}
span > b {
color: blue;
}
html > body > p > span > i {
color: green;
font-weight: bold;
}

24
HTML/html-kurs/Basics/kindselektoren/kindselektoren.html Normal file
View File

@@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Kindselektoren</title>
<link rel="stylesheet" type="text/css" href="kindselektoren.css">
</head>
<body>
<h1>Esse edison bulb pok pok leggings semiotics, est la croix cold-pressed.</h1>
<p>
Labore 3 wolf moon hexagon, hell of anim polaroid deserunt celiac la croix next level.
<span>
<b>Occupy adaptogen kombucha, </b>
<i>heirloom banh mi messenger bag mumblecore franzen typewriter biodiesel artisan pork belly. </i>
</span>
Locavore duis nostrud, exercitation single-origin coffee slow-carb migas.
<b>Master cleanse chia slow-carb dreamcatcher pour-over, </b>
cardigan shabby chic sint tattooed vice ut velit intelligentsia exercitation ex.
</p>
<span>Slow-carb trust fund bicycle rights artisan four dollar toast fanny pack sunt.</span>
</body>
</html>

15
HTML/html-kurs/Basics/klassenselektoren/klassenselektoren.css Normal file
View File

@@ -0,0 +1,15 @@
.gefahr {
color: red;
}
.wichtig {
font-weight: bold;
}
p.gefahr {
text-decoration: underline;
}
span.wichtig {
background-color: grey;
}

18
HTML/html-kurs/Basics/klassenselektoren/klassenselektoren.html Normal file
View File

@@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Klassenselektoren</title>
<link rel="stylesheet" type="text/css" href="klassenselektoren.css">
</head>
<body>
<p class="gefahr">Dies ist ein wenig Text</p>
<p>Dies ist ein wenig Text</p>
<p class="gefahr">Dies ist ein wenig Text</p>
<span class="wichtig">Dies ist ein wenig Text</span><br><br>
<span>Dies ist ein wenig Text</span><br><br>
<span class="gefahr wichtig">Dies ist ein wenig Text</span>
</body>
</html>

16
HTML/html-kurs/Basics/kombinatoren/kombinatoren.css Normal file
View File

@@ -0,0 +1,16 @@
b ~ span > b {
color: red;
}
p span.warnung {
background-color: pink;
}
.warnung ~ b {
color: yellow;
}
html head ~ body > p > b ~ #wichtig {
font-size: 100px;
color: green;
}

21
HTML/html-kurs/Basics/kombinatoren/kombinatoren.html Normal file
View File

@@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Kombinatoren</title>
<link rel="stylesheet" type="text/css" href="kombinatoren.css">
</head>
<body>
<p>
<span class="warnung">Dies ist Text in einer Span mit einer Klasse!</span>
<b>Dies ist Text der fett gedruckt ist!</b>
<u id="wichtig">Dierser Text ist unterstrichen!</u>
<span>
Dies ist Text in einer Span!
<b>Dies ist Text der fett gedruckt ist!</b>
</span>
</p>
</body>
</html>

11
HTML/html-kurs/Basics/nachfahrenselektoren/nachfahrenselektoren.css Normal file
View File

@@ -0,0 +1,11 @@
p b {
color: blue;
}
body span {
background-color: red;
}
html p i {
font-size: 60px;
}

24
HTML/html-kurs/Basics/nachfahrenselektoren/nachfahrenselektoren.html Normal file
View File

@@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Nachfahrenselektoren</title>
<link rel="stylesheet" type="text/css" href="nachfahrenselektoren.css">
</head>
<body>
<h1>Esse edison bulb pok pok leggings semiotics, est la croix cold-pressed.</h1>
<p>
Labore 3 wolf moon hexagon, hell of anim polaroid deserunt celiac la croix next level.
<span>
<b>Occupy adaptogen kombucha, </b>
<i>heirloom banh mi messenger bag mumblecore franzen typewriter biodiesel artisan pork belly. </i>
</span>
Locavore duis nostrud, exercitation single-origin coffee slow-carb migas.
<b>Master cleanse chia slow-carb dreamcatcher pour-over, </b>
cardigan shabby chic sint tattooed vice ut velit intelligentsia exercitation ex.
</p>
<span>Slow-carb trust fund bicycle rights artisan four dollar toast fanny pack sunt.</span>
</body>
</html>

29
HTML/html-kurs/Basics/positionierung1/positionierung1.css Normal file
View File

@@ -0,0 +1,29 @@
#relativesDIV {
width: 400px;
height: 400px;
background-color: grey;
position: relative;
top: 120px;
left: 200px;
}
#absoulutesDIV {
width: 50px;
height: 50px;
background-color: red;
position: absolute;
top: 100px;
right: 200px;
}
span {
position: relative;
top: 20px;
left: 20px;
}
b {
position: absolute;
top: 20px;
left: 20px;
}

19
HTML/html-kurs/Basics/positionierung1/positionierung1.html Normal file
View File

@@ -0,0 +1,19 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Positionierung 1</title>
<link rel="stylesheet" type="text/css" href="positionierung1.css">
</head>
<body>
<div id="relativesDIV">
<div id="absoulutesDIV"></div>
</div>
<br><br><br><br><br><br><br><br>
<span>Relative</span> und <b>Absoulute</b> Positionierung sind voll super!
</body>
</html>

25
HTML/html-kurs/Basics/positionierung2/positionierung2.css Normal file
View File

@@ -0,0 +1,25 @@
body {
height: 10000px;
}
#fixedDIV {
width: 200px;
height: 200px;
background-color: grey;
position: fixed;
bottom: 0;
right: 0;
}
#stickyDIV {
width: 200px;
height: 200px;
background-color: red;
position: sticky;
top: 20px;
margin-top: 350px;
}
span {
position: static;
}

16
HTML/html-kurs/Basics/positionierung2/positionierung2.html Normal file
View File

@@ -0,0 +1,16 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Positionierung 2</title>
<link rel="stylesheet" type="text/css" href="positionierung2.css">
</head>
<body>
<span>Dies ist static Text</span>
<div id="fixedDIV"></div>
<div id="stickyDIV"></div>
</body>
</html>

34
HTML/html-kurs/Basics/schriftarten/schriftarten.css Normal file
View File

@@ -0,0 +1,34 @@
@import url('https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap');
body {
font-family: Tahoma, Verdana, sans-serif;
font-size: 50px;
}
#span1 {
font-family: serif;
}
#span2 {
font-family: sans-serif;
}
#span3 {
font-family: cursive;
}
#span4 {
font-family: fantasy;
}
#span5 {
font-family: monospace;
}
#extern {
font-family: 'Libre Barcode 39 Text', cursive;
}
#extern2 {
font-family: 'Indie Flower', cursive;
}

24
HTML/html-kurs/Basics/schriftarten/schriftarten.html Normal file
View File

@@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Schriftarten</title>
<link rel="stylesheet" type="text/css" href="schriftarten.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Libre+Barcode+39+Text&display=swap" rel="stylesheet">
</head>
<body>
Lorem Ipsum<br><br>
<span id="span1">Lorem Ipsum</span><br><br>
<span id="span2">Lorem Ipsum</span><br><br>
<span id="span3">Lorem Ipsum</span><br><br>
<span id="span4">Lorem Ipsum</span><br><br>
<span id="span5">Lorem Ipsum</span><br><br>
<span id="extern">Lorem Ipsum</span><br><br>
<span id="extern2">Lorem Ipsum</span>
</body>
</html>

32
HTML/html-kurs/Basics/schriftartenLokalEinbinden/schriftartenLokalEinbinden.css Normal file
View File

@@ -0,0 +1,32 @@
@font-face {
font-family: "Spectral";
src: url(spectral-regular.ttf) format("truetype"),
url(spectral-regular.woff2) format("woff2");
font-style: normal;
font-weight: normal;
}
@font-face {
font-family: "Spectral";
src: url(spectral-bold.woff2) format("woff2");
font-style: normal;
font-weight: bold;
}
@font-face {
font-family: "Spectral";
src: url(spectral-italic.woff2) format("woff2");
font-style: italic;
font-weight: normal;
}
body {
font-size: 50px;
font-family: Spectral, sans-serif;
}
#bold {
font-weight: bold;
}
#italic {
font-style: italic;
}

15
HTML/html-kurs/Basics/schriftartenLokalEinbinden/schriftartenLokalEinbinden.html Normal file
View File

@@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Schriftarten Lokal Einbinden</title>
<link rel="stylesheet" type="text/css" href="schriftartenLokalEinbinden.css">
</head>
<body>
Lorem Ipsum dolor sit amet.
<span id="bold">Lorem Ipsum dolor sit amet.</span>
<span id="italic">Lorem Ipsum dolor sit amet.</span>
</body>
</html>

BIN
HTML/html-kurs/Basics/schriftartenLokalEinbinden/spectral-bold.woff2 Normal file
View File

Binary file not shown.

BIN
HTML/html-kurs/Basics/schriftartenLokalEinbinden/spectral-italic.woff2 Normal file
View File

Binary file not shown.

BIN
HTML/html-kurs/Basics/schriftartenLokalEinbinden/spectral-regular.ttf Normal file
View File

Binary file not shown.

BIN
HTML/html-kurs/Basics/schriftartenLokalEinbinden/spectral-regular.woff2 Normal file
View File

Binary file not shown.

0
HTML/html-kurs/Basics/seitenstrukturierung/seitenstrukturierung.css Normal file
View File

27
HTML/html-kurs/Basics/seitenstrukturierung/seitenstrukturierung.html Normal file
View File

@@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Seitenstrukturierung</title>
<link rel="stylesheet" type="text/css" href="seitenstrukturierung.css">
</head>
<body>
<main></main>
<section></section>
<article></article>
<nav></nav>
<aside></aside>
<header></header>
<footer></footer>
<div></div>
</body>
</html>

15
HTML/html-kurs/Basics/textstrukturierung.html Normal file
View File

@@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Textstrukturierung</title>
</head>
<body>
<h1>Überschrift erster Ordnung</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<br>
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.<br>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,<br>
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.<br>
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</body>
</html>

24
HTML/html-kurs/Basics/textstrukturierung2.html Normal file
View File

@@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Textstrukturierung 2</title>
</head>
<body>
<h1>Fettgedruckter Text</h1>
<b>Fettgedruckter Text</b><br>
<strong>Fettgedruckter Text</strong>
<h1>Kursivgedruckter Text</h1>
<i>Kursivgedruckter Text</i><br>
<em>Kursivgedruckter Text</em>
<h1>Unterstrichener Text</h1>
<u>Unterstrichener Text</u>
<h1>Span-Tag</h1>
<span>span-tag</span>
</body>
</html>

18
HTML/html-kurs/Basics/typselectoren/typselektoren.css Normal file
View File

@@ -0,0 +1,18 @@
body {
color: red;
border: 2px solid red;
}
h1 {
color: blue;
border: inherit;
}
span {
color: grey;
}
b {
color: yellow;
border: inherit;
}

22
HTML/html-kurs/Basics/typselectoren/typselektoren.html Normal file
View File

@@ -0,0 +1,22 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Typselektoren</title>
<link rel="stylesheet" type="text/css" href="typselektoren.css">
</head>
<body>
<h1>Leggins Kikstarter</h1>
<p>
Wolf vegan sartorial biodiesel yuccie flexitarian gastropub pork belly adipisicing freegan tilde gentrify direct trade.
<span>
Tousled butcher sriracha dolore, meh voluptate esse hashtag readymade mlkshk whatever green juice.
<b>Meh bitters thundercats succulents tempor humblebrag fixie. </b>
Shaman banh mi raclette nostrud pork belly.
</span>
Vaporware dolore you probably haven't heard of them do.
</p>
</body>
</html>

11
HTML/html-kurs/Praxis/impressum.html Normal file
View File

@@ -0,0 +1,11 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Impressum</title>
<link rel="stylesheet" type="text/css" href="src/css/styles.css">
</head>
<body>
</body>
</html>

11
HTML/html-kurs/Praxis/index.html Normal file
View File

@@ -0,0 +1,11 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Startseite</title>
<link rel="stylesheet" type="text/css" href="src/css/styles.css">
</head>
<body>
</body>
</html>

11
HTML/html-kurs/Praxis/kontakt.html Normal file
View File

@@ -0,0 +1,11 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Kontakt</title>
<link rel="stylesheet" type="text/css" href="src/css/styles.css">
</head>
<body>
</body>
</html>

11
HTML/html-kurs/Praxis/leistungen.html Normal file
View File

@@ -0,0 +1,11 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Leistungen</title>
<link rel="stylesheet" type="text/css" href="src/css/styles.css">
</head>
<body>
</body>
</html>

10
HTML/html-kurs/Praxis/src/css/styles.css Normal file
View File

@@ -0,0 +1,10 @@
@import url('https://fonts.googleapis.com/css2?family=Lato&family=Raleway&display=swap');
body {
margin: 0;
font-family: Raleway, Lato, "Helvetica Neue", Arial, sans-serif;
}
* {
box-sizing: border-box;
}

BIN
HTML/html-kurs/Praxis/src/img/hintergrund-klein.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 132 KiB

BIN
HTML/html-kurs/Praxis/src/img/hintergrund.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 186 KiB

BIN
HTML/html-kurs/Praxis/src/img/services-sprite.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

BIN
HTML/html-kurs/Praxis/src/img/webdesign-logo-klein.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

BIN
HTML/html-kurs/Praxis/src/img/webdesign-logo-vertical.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 41 KiB

BIN
HTML/html-kurs/Praxis/src/img/webdesign-logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 41 KiB