fahdi/js-intro.html

## js-intro.html
<html>
	<head>

		<title>
			Hello Silted - This is HTML formatting
		</title>

	<style type="text/css">
		.container {
		    width: 80%;
		    margin: 20px auto;
		    padding: 10px;
		    background-color: burlywood;
		    color: #333333;
		}

		p {
			margin: 20px 0;
		}

		.math {
			font-family: monospace;
			background-color: beige;
			padding: 10px;
		}

		#formatting-doc {
			background-color: #444444;
			color: white;
		}

	</style>

	</head>

	<body id="formatting-doc">
		<div class="container">

			<strong id="message">
				This should change
			</strong>
			<br/>
			<em>
				This looks italic but to browser it's emphasized text!
			</em>
			<br/>

			<h2>X square</h2>

			<p class="math">
				x
				<sup>
					2
				</sup>

			</p>

			<h2>Natural Log</h2>
			<p class="math">
				l
				<sub>
				n
				</sub>
			</p>

			<h2>First One</h2>
			<p class="math">
				(x + y)
				<sup>
				2
				</sup>
			</p>

		</div>


		<p>
			These roses are
			<del>
				red
			</del>
			<ins>
				blue.
			</ins>

			I just want to <mark>highlight</mark> this particular text.
		</p>

		This is a saying by someone:
		<blockquote cite="https://quoteinvestigator.com">
			You may forget what they did for you, but you'll never forget how you made them feel!
		</blockquote>

		<p>
			The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.
			The <a href="https://www.un.org/en/academic-impact/" title="World Health Organization">WHO</a> was founded in 1948.
		</p>

		<table>
			<tr><th>Student Name</th><th>Assignment Done?</th></tr>
			<tr><td>Maheen I</td><td>Yes</td></tr>
			<tr><td>Zainab S</td><td>No</td></tr>
			<tr><td>Mehrin R</td><td>No</td></tr>
		</table>

<iframe width="560" height="315" src="https://www.youtube.com/embed/lD9BDgAdQr0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
	</body>

<script type="text/javascript">
	var message = "Hello Sisters from SILTED"
	var x = 1;
	var y = 2;
	var z = x + y;
	console.log(message);
	console.log(z);

	console.log(document.getElementById("message").innerHTML);

	document.getElementById("message").innerHTML = message;
</script>
</html>
	<html>
	<head>

	<title>
	Hello Silted - This is HTML formatting
	</title>

	<style type="text/css">
	.container {
	width: 80%;
	margin: 20px auto;
	padding: 10px;
	background-color: burlywood;
	color: #333333;
	}

	p {
	margin: 20px 0;
	}

	.math {
	font-family: monospace;
	background-color: beige;
	padding: 10px;
	}

	#formatting-doc {
	background-color: #444444;
	color: white;
	}

	</style>

	</head>

	<body id="formatting-doc">
	<div class="container">

	<strong id="message">
	This should change
	</strong>
	<br/>
	<em>
	This looks italic but to browser it's emphasized text!
	</em>
	<br/>

	<h2>X square</h2>

	<p class="math">
	x
	<sup>
	2
	</sup>

	</p>

	<h2>Natural Log</h2>
	<p class="math">
	l
	<sub>
	n
	</sub>
	</p>

	<h2>First One</h2>
	<p class="math">
	(x + y)
	<sup>
	2
	</sup>
	</p>

	</div>


	<p>
	These roses are
	<del>
	red
	</del>
	<ins>
	blue.
	</ins>

	I just want to <mark>highlight</mark> this particular text.
	</p>

	This is a saying by someone:
	<blockquote cite="https://quoteinvestigator.com">
	You may forget what they did for you, but you'll never forget how you made them feel!
	</blockquote>

	<p>
	The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.
	The <a href="https://www.un.org/en/academic-impact/" title="World Health Organization">WHO</a> was founded in 1948.
	</p>

	<table>
	<tr><th>Student Name</th><th>Assignment Done?</th></tr>
	<tr><td>Maheen I</td><td>Yes</td></tr>
	<tr><td>Zainab S</td><td>No</td></tr>
	<tr><td>Mehrin R</td><td>No</td></tr>
	</table>

	<iframe width="560" height="315" src="https://www.youtube.com/embed/lD9BDgAdQr0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
	</body>

	<script type="text/javascript">
	var message = "Hello Sisters from SILTED"
	var x = 1;
	var y = 2;
	var z = x + y;
	console.log(message);
	console.log(z);

	console.log(document.getElementById("message").innerHTML);

	document.getElementById("message").innerHTML = message;
	</script>
	</html>