Frontend

== inline style sheet ==
p {
	border-radius: 5px;
	margin-left:10px;
	margin-right:25px;
	padding: 0px 15px;
	padding-bottom:10px;
	width: 50%;
	font-family:verdana;
}
/*center align*/
h1 {
	margin: auto;
	padding-top: 30px;
	outline-width: 3px;
	outline-color: white;
	outline-style: solid;
}
.u {
	color: pink;
	text-transform: uppercase;
	font-style:italic;
}
#l {
	color: green;
	border: 4px dotted red;
	text-align: center;
	font-size:21px;
}
.r {
	color: yellow;
	
	border-style: solid;
	border-color: blue;
	border-width: 8px;
	font-variant: small-caps;
}
div {
	color: gray;
}
body {
	background-color: black;
}
#i {
	background-image: url('matt.jpg');
	background-repeat: repeat-x;
	height: 100px;
	width: 500px;
}
#o{
	color:white;
	border-radius: 5px;
	border-width:2px;
	border-style:solid;
	border-left-color:orange;
	border-right-color:purple;
	border-top-color:pink;
	border-bottom-color:red;
	font-weight:bold;
}
.z{
	color:white;
	border-radius: 5px;
	border-width:2px;
	border-style:solid;
	border-left-color:orange;
	border-right-color:purple;
	border-top-color:pink;
	border-bottom-color:red;
	font-weight:bold;
}
.t{
	text-decoration:none;
}
a:hover{
	background-color:brown;
	color:green;
}
a:visited{
	color:pink;
}
ul{
	list-style-type:square;
}
ol {
	list-style-type:upper-roman;
}
li {
	display:inline;
}
table,th,td {
	border:solid 1px white;
	border-collapse:collapse;
}
table {
	background-color:blue;
}
td {
	text-align:right;
}
th{
	padding: 5px;
}
#y {
	position: fixed;
	top: 25px;
	left:18px;
}
==HTML==
<!DOCTYPE html>
<html>
<head><title>HTML summary</title>
<link rel="stylesheet" href="AndysCssPractice.css">
</head>
<body style=background-color:yellow>
<!--Headers from first to sixth highest-->
First Header: Strong, Line Break, and Href
<!--Purpose of strong text is-->
My name is Andreas!
<!--Line Break-->
<!--link that has the target/will open in new page-->
<a href ="https://musicaddictand.tumblr.com" target="_blank">Andy's tumblr!</a>
Second Header: Emphasize, and contentiedible
<!--Purpose of the emphasized text is-->
His name is Livio!
When the contenteditable attribute is not set on an element, the element will inherit it from its parent.
Second Header: Emphasize
<img src="matt.jpg" alt="shit">
Alt Background
Mit Hilfe des Blindtextes kann die Verteilung des Textes auf der Seite (Layout oder Satzspiegel) sowie Lesbarkeit und Platzbedarf der verwendeten Schriftarten (Typografie) beurteilt werden. Er besteht aus einer mehr oder minder sinnlosen Folge von Wörtern, oft auch nur aus wortähnlichen Silbenfolgen. Ein bekanntes Beispiel dafür ist das pseudolateinische Lorem ipsum. Komponisten von Liedern benutzen Blindtexte beim Komponieren von Melodien und singen diese, bevor der Liedtext gedichtet wird (vgl. Vokalise).
Andere Texte dienen dazu, die Eigenheiten der Schriftarten miteinander zu vergleichen. In Pangrammen werden alle Buchstaben und Sonderzeichen des jeweiligen sprachtypischen Alphabets bei einer möglichst geringen Gesamtlänge des Satzes beziehungsweise der Sätze verwendet. Bekannte Beispiele sind: 
HEader 3: Video Player
<video height="900" width="900" controls>
	<source src="wolfPack1.mp4" type="video/mp4">
	Fuck off!
</video>
Header 3: Audio
<audio controls>
<source src="dk.mp3" type="audio/mpeg">
Fuck off!
</audio>
Third Header: Ordered List
Philosopher's Stone
Chamber of Secrets
Prizoner of Azkaban
Goblet of Fire
Order of the Phoenix
Half-Blood Prince
Deathly Hallows
Fourth Header: Unordered List
Kanto
Johto
Hoenn
Sinnoh
Unova
Kalos
Alola
Galar
Fifth Header: Input Types-Checkbox
<!--Difference between id, name and value is-->
<!--ID has to be unique, name better, value send when submitted-->
<input type="checkbox" id="positive" name="positive" value="Yes" required>
<label for="positive">Yes</label>
Fifth Header: Input Types-Text
<!--Difference between id, name and value is-->
<!--ID has to be unique, name better, value default value-->
<label for="textfield">Input please:</label>
<input type="text" id="textfield" name="textfield" required>
Fifth Header: Dropdown List
<select name="selectLIst" id="selector">
<option value="Volvo">Volvo</option>
<option value="Opel">Opel</option>
</select>
Fifth Header: Textarea
<textarea id="andy" name="andyName" rows="4" cols="50">Am zehnten zehnten um zehn Uhr zehn!</textarea>
Sixth
<!--Line Break-->
<footer>
Created by Andreas Baur
<a href="https://musicaddictand.tumblr.com/ask">Message me!</a>
</footer>
</body>
</html>
== CSS ==
<!DOCTYPE HTML>
<html>
<head>
<title>Andreas CSS struggle</title>
<!--Inline style sheet-->
<link rel="stylesheet" href="AndysCssPractice.css">
<script src="AndysJavascript.js"></script>
<style>
#a {
	color: red;
	text-transform:capitalize;
	position: relative;
	top: 25px;
}
</style>
</head>
<body>
first sentence
Andy ist cool.
second sentence
Livio ist cool
third sentence
Gokhan ist cool
just h1
Roman ist voll cool!
<a href="https://musicaddictand.tumblr.com">Andy's tumblr</a>
<a class="t" href="https://musicaddictand.tumblr.com">Andy's tumblr</a>
<a href="https://bahn.de">Schande</a>
Hello Moto!
Hello Mojo!
Hello Momo!
aaaaa
 
 Bitten
 Born
 
 
 Everett
 Harlan
 
 
 Blake
 Luna
 
<input type="number" id="tf">
<input type="number" id="td">
<button type="button" onclick='document.getElementById("b").innerHTML = "Hello JavaScript!"'>Click Me!</button>
<button type="button" onclick='one()'>1</button>
<button type="button" onclick='two()'>2</button>
<button type="button" onclick='three()'>3</button>
<button type="button" onclick='four()'>4</button>
<button type="button" onclick='five()'>5</button>
<button type="button" onclick='six()'>6</button>
<button type ="button" onclick='seven()'>7</button>
<button type ="button" onclick='eight()'>8</button>
<button type ="button" onclick='nine()'>9</button>
</body>
</html>
== HTML 3== 
<html>
<head>
<style>
p{border: 1px solid yellow;}
</style>
</head> 
<body>
This is a heading
<!--This is a comment-->
This is a paragraph.<img src="scream.png" style="width:250px;height:400px;"> 
HTML is FUN to learn!
 <a href="default.html" target="_blank">Visit our HTML tutorial.</a>
HTML is FUN to learn!
HTML is FUN to learn!
H2O is the scientific term for water.
My favorite color is blue red.
What a beautiful day!
The WHO was founded in 1948.
 
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally. 
 Caption
 
	Name
	Age
 
 
 Jill Smith
 50
 
 Coffee
 - black hot drink
 Milk
 - white cold drink
 
</body>
</html>