sascha
/
cs50
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

src8

master
Dr. Sascha Woitschetzki 2024-03-12 08:41:27 +07:00
parent 2631c9e112
commit 3c1f71ea7c
52 changed files with 150161 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src8/autocomplete.html
Unescape Escape View File

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>autocomplete</title>
</head>
<body>
<input autocomplete="off" autofocus placeholder="Query" type="text">
<ul></ul>
<script src="large.js"></script>
<script>
let input = document.querySelector('input');
input.addEventListener('keyup', function(event) {
let html = '';
if (input.value) {
for (word of WORDS) {
if (word.startsWith(input.value)) {
html += `<li>${word}</li>`;
}
}
}
document.querySelector('ul').innerHTML = html;
});
</script>
</body>
</html>

28
src8/background.html
Unescape Escape View File

@ -0,0 +1,28 @@
<!DOCTYPE html>
<!-- Demonstrates programmatic changes to style -->
<html lang="en">
<head>
<title>background</title>
</head>
<body>
<button id="red">R</button>
<button id="green">G</button>
<button id="blue">B</button>
<script>
let body = document.querySelector('body');
document.querySelector('#red').addEventListener('click', function() {
body.style.backgroundColor = 'red';
});
document.querySelector('#green').addEventListener('click', function() {
body.style.backgroundColor = 'green';
});
document.querySelector('#blue').addEventListener('click', function() {
body.style.backgroundColor = 'blue';
});
</script>
</body>
</html>

30
src8/blink.html
Unescape Escape View File

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html lang="en">
<head>
<script>
// Toggles visibility of greeting
function blink()
{
let body = document.querySelector('body');
if (body.style.visibility == 'hidden')
{
body.style.visibility = 'visible';
}
else
{
body.style.visibility = 'hidden';
}
}
// Blink every 500ms
window.setInterval(blink, 500);
</script>
<title>blink</title>
</head>
<body>
hello, world
</body>
</html>

37
src8/bootstrap.html
Unescape Escape View File

@ -0,0 +1,37 @@
<!DOCTYPE html>
<!-- Demonstrates Bootstrap -->
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
<title>bootstrap</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>

BIN
src8/bridge.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 MiB

BIN
src8/cat.gif
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 71 KiB

BIN
src8/cat.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

2013
src8/favorites0.html
View File

File diff suppressed because it is too large Load Diff

2014
src8/favorites1.html
View File

File diff suppressed because it is too large Load Diff

2023
src8/favorites2.html
View File

File diff suppressed because it is too large Load Diff

16
src8/geolocation.html
Unescape Escape View File

@ -0,0 +1,16 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>geolocation</title>
</head>
<body>
<script>
navigator.geolocation.getCurrentPosition(function(position) {
document.write(position.coords.latitude + ", " + position.coords.longitude);
});
</script>
</body>
</html>

BIN
src8/harvard.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 MiB

45
src8/headings.html
Unescape Escape View File

@ -0,0 +1,45 @@
<!DOCTYPE html>
<!-- Demonstrates headings (for chapters, sections, subsections, etc.) -->
<html lang="en">
<head>
<title>headings</title>
</head>
<body>
<h1>One</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis scelerisque quam, vel hendrerit lectus viverra eu. Praesent posuere eget lectus ut faucibus. Etiam eu velit laoreet, gravida lorem in, viverra est. Cras ut purus neque. In porttitor non lorem id lobortis. Mauris gravida metus libero, quis maximus dui porta at. Donec lacinia felis consectetur venenatis scelerisque. Nulla eu nisl sollicitudin, varius velit sit amet, vehicula erat. Curabitur sollicitudin felis sit amet orci mattis, a tempus nulla pulvinar. Aliquam erat volutpat.
</p>
<h2>Two</h2>
<p>
Mauris ut dui in eros semper hendrerit. Morbi vel elit mi. Sed sit amet ex non quam dignissim dignissim et vel arcu. Pellentesque eget elementum orci. Morbi ac cursus ex. Pellentesque quis turpis blandit orci dapibus semper sed non nunc. Nulla et dolor nec lacus finibus volutpat. Sed non lorem diam. Donec feugiat interdum interdum. Vivamus et justo in enim blandit fermentum vel at elit. Phasellus eu ante vitae ligula varius aliquet. Etiam id posuere nibh.
</p>
<h3>Three</h3>
<p>
Aenean venenatis convallis ante a rhoncus. Nullam in metus vel diam vehicula tincidunt. Donec lacinia metus sem, sit amet egestas elit blandit sit amet. Nunc egestas sem quis nisl mattis semper. Pellentesque ut magna congue lorem eleifend sodales. Donec tortor tortor, aliquam vitae mollis sed, interdum ut lectus. Mauris non purus quis ipsum lacinia tincidunt.
</p>
<h4>Four</h4>
<p>
Integer at justo lacinia libero blandit aliquam ut ut dui. Quisque tincidunt facilisis venenatis. Nullam dictum odio quis lorem luctus, vel malesuada dolor luctus. Aenean placerat faucibus enim a facilisis. Maecenas eleifend quis massa sed eleifend. Ut ultricies, dui ac vulputate hendrerit, ex metus iaculis diam, vitae fermentum libero dui et ante. Phasellus suscipit, arcu ut consequat sagittis, massa urna accumsan massa, eu aliquet nulla lorem vitae arcu. Pellentesque rutrum felis et metus porta semper. Nam ac consectetur mauris.
</p>
<h5>Five</h5>
<p>
Suspendisse rutrum vestibulum odio, sed venenatis purus condimentum sed. Morbi ornare tincidunt augue eu auctor. Vivamus sagittis ac lectus at aliquet. Nulla urna mauris, interdum non nibh in, vehicula porta enim. Donec et posuere sapien. Pellentesque ultrices scelerisque ipsum, vel fermentum nibh tincidunt et. Proin gravida porta ipsum nec scelerisque. Vestibulum fringilla erat at turpis laoreet, nec hendrerit nisi scelerisque.
</p>
<h6>Six</h6>
<p>
Sed quis malesuada mi. Nam id purus quis augue sagittis pharetra. Nulla facilisi. Maecenas vel fringilla ante. Cras tristique, arcu sit amet blandit auctor, urna elit ultricies lacus, a malesuada eros dui id massa. Aliquam sem odio, pretium vel cursus eget, scelerisque at urna. Vestibulum posuere a turpis consectetur consectetur. Cras consequat, risus quis tempor egestas, nulla ipsum ornare erat, nec accumsan nibh lorem nec risus. Integer at iaculis lacus. Integer congue nunc massa, quis molestie felis pellentesque vestibulum. Nulla odio tortor, aliquam nec quam in, ornare aliquet sapien.
</p>
</body>
</html>

12
src8/hello0.html
Unescape Escape View File

@ -0,0 +1,12 @@
<!DOCTYPE html>
<!-- Demonstrates HTML -->
<html lang="en">
<head>
<title>hello, title</title>
</head>
<body>
hello, body
</body>
</html>

23
src8/hello1.html
Unescape Escape View File

@ -0,0 +1,23 @@
<!DOCTYPE html>
<!-- Demonstrates onsubmit -->
<html lang="en">
<head>
<script>
function greet()
{
alert('hello, ' + document.querySelector('#name').value);
}
</script>
<title>hello</title>
</head>
<body>
<form onsubmit="greet(); return false;">
<input autocomplete="off" autofocus id="name" placeholder="Name" type="text">
<input type="submit">
</form>
</body>
</html>

23
src8/hello2.html
Unescape Escape View File

@ -0,0 +1,23 @@
<!DOCTYPE html>
<!-- Demonstrates addEventListener -->
<html lang="en">
<head>
<title>hello</title>
</head>
<body>
<form>
<input autocomplete="off" autofocus id="name" placeholder="Name" type="text">
<input type="submit">
</form>
<script>
document.querySelector('form').addEventListener('submit', function(event) {
alert('hello, ' + document.querySelector('#name').value);
event.preventDefault();
});
</script>
</body>
</html>

25
src8/hello3.html
Unescape Escape View File

@ -0,0 +1,25 @@
<!DOCTYPE html>
<!-- Demonstrates DOMContentLoaded -->
<html lang="en">
<head>
<script>
document.addEventListener('DOMContentLoaded', function() {
document.querySelector('form').addEventListener('submit', function(e) {
alert('hello, ' + document.querySelector('#name').value);
e.preventDefault();
});
});
</script>
<title>hello</title>
</head>
<body>
<form>
<input autocomplete="off" autofocus id="name" placeholder="Name" type="text">
<input type="submit">
</form>
</body>
</html>

16
src8/hello4.html
Unescape Escape View File

@ -0,0 +1,16 @@
<!DOCTYPE html>
<!-- Demonstrates external JavaScript -->
<html lang="en">
<head>
<script src="hello4.js"></script>
<title>hello</title>
</head>
<body>
<form>
<input autocomplete="off" autofocus id="name" placeholder="Name" type="text">
<input type="submit">
</form>
</body>
</html>

6
src8/hello4.js
Unescape Escape View File

@ -0,0 +1,6 @@
document.addEventListener('DOMContentLoaded', function() {
document.querySelector('form').addEventListener('submit', function(e) {
alert('hello, ' + document.querySelector('#name').value);
e.preventDefault();
});
});

31
src8/hello5.html
Unescape Escape View File

@ -0,0 +1,31 @@
<!DOCTYPE html>
<!-- Demonstrates keyup and template literals -->
<html lang="en">
<head>
<script>
document.addEventListener('DOMContentLoaded', function() {
let input = document.querySelector('input');
input.addEventListener('keyup', function(event) {
let name = document.querySelector('p');
if (input.value) {
name.innerHTML = `hello, ${input.value}`;
}
else {
name.innerHTML = 'hello, whoever you are';
}
});
});
</script>
<title>hello</title>
</head>
<body>
<form>
<input autocomplete="off" autofocus placeholder="Name" type="text">
</form>
<p></p>
</body>
</html>

25
src8/hello6.html
Unescape Escape View File

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html lang="en">
<head>
<script>
document.addEventListener('DOMContentLoaded', function() {
document.querySelector('form').addEventListener('submit', function(e) {
let name = document.querySelector('#name').value;
let utterance = new SpeechSynthesisUtterance(`hello, ${name}`);
window.speechSynthesis.speak(utterance);
e.preventDefault();
});
});
</script>
<title>title</title>
</head>
<body>
<form>
<input autocomplete="off" autofocus id="name" placeholder="Name" type="text">
<input type="submit">
</form>
</body>
</html>

20
src8/home0.html
Unescape Escape View File

@ -0,0 +1,20 @@
<!DOCTYPE html>
<!-- Demonstrates inline CSS with P tags -->
<html lang="en">
<head>
<title>css</title>
</head>
<body>
<p style="font-size: large; text-align: center;">
John Harvard
</p>
<p style="font-size: medium; text-align: center;">
Welcome to my home page!
</p>
<p style="font-size: small; text-align: center;">
Copyright &#169; John Harvard
</p>
</body>
</html>

20
src8/home1.html
Unescape Escape View File

@ -0,0 +1,20 @@
<!DOCTYPE html>
<!-- Demonstrates inline CSS with DIV tags -->
<html lang="en">
<head>
<title>css</title>
</head>
<body>
<div style="font-size: large; text-align: center;">
John Harvard
</div>
<div style="font-size: medium; text-align: center;">
Welcome to my home page!
</div>
<div style="font-size: small; text-align: center;">
Copyright &#169; John Harvard
</div>
</body>
</html>

22
src8/home2.html
Unescape Escape View File

@ -0,0 +1,22 @@
<!DOCTYPE html>
<!-- Adds outer DIV, demonstrates cascading -->
<html lang="en">
<head>
<title>css</title>
</head>
<body>
<div style="text-align: center">
<div style="font-size: large">
John Harvard
</div>
<div style="font-size: medium">
Welcome to my home page!
</div>
<div style="font-size: small">
Copyright &#169; John Harvard
</div>
</div>
</body>
</html>

20
src8/home3.html
Unescape Escape View File

@ -0,0 +1,20 @@
<!DOCTYPE html>
<!-- Removes outer DIV -->
<html lang="en">
<head>
<title>css</title>
</head>
<body style="text-align: center">
<div style="font-size: large">
John Harvard
</div>
<div style="font-size: medium">
Welcome to my home page!
</div>
<div style="font-size: small">
Copyright &#169; John Harvard
</div>
</body>
</html>

20
src8/home4.html
Unescape Escape View File

@ -0,0 +1,20 @@
<!DOCTYPE html>
<!-- Uses semantic tags instead of DIVs -->
<html lang="en">
<head>
<title>css</title>
</head>
<body style="text-align: center">
<header style="font-size: large">
John Harvard
</header>
<main style="font-size: medium">
Welcome to my home page!
</main>
<footer style="font-size: small">
Copyright &#169; John Harvard
</footer>
</body>
</html>

43
src8/home5.html
Unescape Escape View File

@ -0,0 +1,43 @@
<!DOCTYPE html>
<!-- Demonstrates CSS selectors -->
<html lang="en">
<head>
<style>
body
{
text-align: center;
}
header
{
font-size: large;
}
main
{
font-size: medium;
}
footer
{
font-size: small;
}
</style>
<title>css</title>
</head>
<body>
<header>
John Harvard
</header>
<main>
Welcome to my home page!
</main>
<footer>
Copyright &#169; John Harvard
</footer>
</body>
</html>

43
src8/home6.html
Unescape Escape View File

@ -0,0 +1,43 @@
<!DOCTYPE html>
<!-- Demonstrates class selectors -->
<html lang="en">
<head>
<style>
.centered
{
text-align: center;
}
.large
{
font-size: large;
}
.medium
{
font-size: medium;
}
.small
{
font-size: small;
}
</style>
<title>css</title>
</head>
<body class="centered">
<header class="large">
John Harvard
</header>
<main class="medium">
Welcome to my home page!
</main>
<footer class="small">
Copyright &#169; John Harvard
</footer>
</body>
</html>

19
src8/home7.css
Unescape Escape View File

@ -0,0 +1,19 @@
.centered
{
text-align: center;
}
.large
{
font-size: large;
}
.medium
{
font-size: medium;
}
.small
{
font-size: small;
}

21
src8/home7.html
Unescape Escape View File

@ -0,0 +1,21 @@
<!DOCTYPE html>
<!-- Demonstrates external stylesheets -->
<html lang="en">
<head>
<link href="home5.css" rel="stylesheet">
<title>css</title>
</head>
<body class="centered">
<header class="large">
John Harvard
</header>
<main class="medium">
Welcome to my home page!
</main>
<footer class="small">
Copyright &#169; John Harvard
</footer>
</body>
</html>

12
src8/image.html
Unescape Escape View File

@ -0,0 +1,12 @@
<!DOCTYPE html>
<!-- Demonstrates image -->
<html lang="en">
<head>
<title>image</title>
</head>
<body>
<img alt="Harvard University" src="bridge.png">
</body>
</html>

143093
src8/large.js
View File

File diff suppressed because it is too large Load Diff

12
src8/link0.html
Unescape Escape View File

@ -0,0 +1,12 @@
<!DOCTYPE html>
<!-- Demonstrates link -->
<html lang="en">
<head>
<title>link</title>
</head>
<body>
Visit <a href="image.html">Harvard</a>.
</body>
</html>

12
src8/link1.html
Unescape Escape View File

@ -0,0 +1,12 @@
<!DOCTYPE html>
<!-- Demonstrates link -->
<html lang="en">
<head>
<title>link</title>
</head>
<body>
Visit <a href="https://www.harvard.edu/">Harvard</a>.
</body>
</html>

24
src8/link2.html
Unescape Escape View File

@ -0,0 +1,24 @@
<!DOCTYPE html>
<!-- Demonstrates type selector and pseudoselector for link -->
<html lang="en">
<head>
<style>
a {
color: #ff0000;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
</style>
<title>link</title>
</head>
<body>
Visit <a href="https://www.harvard.edu/">Harvard</a>.
</body>
</html>

35
src8/link3.html
Unescape Escape View File

@ -0,0 +1,35 @@
<!DOCTYPE html>
<!-- Demonstrates multiple ID selectors -->
<html lang="en">
<head>
<style>
#harvard
{
color: #ff0000;
}
#yale
{
color: #0000ff;
}
a
{
text-decoration: none;
}
a:hover
{
text-decoration: underline;
}
</style>
<title>link</title>
</head>
<body>
Visit <a href="https://www.harvard.edu/" id="harvard">Harvard</a> or <a href="https://www.yale.edu/" id="yale" >Yale</a>.
</body>
</html>

30
src8/link4.html
Unescape Escape View File

@ -0,0 +1,30 @@
<!DOCTYPE html>
<!-- Demonstrates multiple class selectors -->
<html lang="en">
<head>
<style>
.harvard
{
color: #ff0000;
}
a
{
text-decoration: none;
}
a:hover
{
text-decoration: underline;
}
</style>
<title>link</title>
</head>
<body>
Visit <span class="harvard">Harvard</span> at <a class="harvard" href="https://www.harvard.edu/">Harvard</a>.
</body>
</html>

16
src8/list0.html
Unescape Escape View File

@ -0,0 +1,16 @@
<!DOCTYPE html>
<!-- Demonstrates (unordered) lists -->
<html lang="en">
<head>
<title>list</title>
</head>
<body>
<ul>
<li>foo</li>
<li>bar</li>
<li>baz</li>
</ul>
</body>
</html>

16
src8/list1.html
Unescape Escape View File

@ -0,0 +1,16 @@
<!DOCTYPE html>
<!-- Demonstrates (ordered) lists -->
<html lang="en">
<head>
<title>list</title>
</head>
<body>
<ol>
<li>foo</li>
<li>bar</li>
<li>baz</li>
</ol>
</body>
</html>

13
src8/meta0.html
Unescape Escape View File

@ -0,0 +1,13 @@
<!DOCTYPE html>
<!-- Demonstrates responsive design -->
<html lang="en">
<head>
<meta name="viewport" content="initial-scale=1, width=device-width">
<title>meta</title>
</head>
<body>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis scelerisque quam, vel hendrerit lectus viverra eu. Praesent posuere eget lectus ut faucibus. Etiam eu velit laoreet, gravida lorem in, viverra est. Cras ut purus neque. In porttitor non lorem id lobortis. Mauris gravida metus libero, quis maximus dui porta at. Donec lacinia felis consectetur venenatis scelerisque. Nulla eu nisl sollicitudin, varius velit sit amet, vehicula erat. Curabitur sollicitudin felis sit amet orci mattis, a tempus nulla pulvinar. Aliquam erat volutpat.
</body>
</html>

15
src8/meta1.html
Unescape Escape View File

@ -0,0 +1,15 @@
<!DOCTYPE html>
<!-- Demonstrates Open Graph tags -->
<html lang="en">
<head>
<meta property="og:title" content="CS50">
<meta property="og:description" content="Introduction to the intellectual enterprises of computer science and the art of programming.">
<meta property="og:image" content="cat.jpg">
<title>meta</title>
</head>
<body>
...
</body>
</html>

29
src8/paragraphs.html
Unescape Escape View File

@ -0,0 +1,29 @@
<!DOCTYPE html>
<!-- Demonstrates paragraphs -->
<html lang="en">
<head>
<title>paragraphs</title>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis scelerisque quam, vel hendrerit lectus viverra eu. Praesent posuere eget lectus ut faucibus. Etiam eu velit laoreet, gravida lorem in, viverra est. Cras ut purus neque. In porttitor non lorem id lobortis. Mauris gravida metus libero, quis maximus dui porta at. Donec lacinia felis consectetur venenatis scelerisque. Nulla eu nisl sollicitudin, varius velit sit amet, vehicula erat. Curabitur sollicitudin felis sit amet orci mattis, a tempus nulla pulvinar. Aliquam erat volutpat.
</p>
<p>
Mauris ut dui in eros semper hendrerit. Morbi vel elit mi. Sed sit amet ex non quam dignissim dignissim et vel arcu. Pellentesque eget elementum orci. Morbi ac cursus ex. Pellentesque quis turpis blandit orci dapibus semper sed non nunc. Nulla et dolor nec lacus finibus volutpat. Sed non lorem diam. Donec feugiat interdum interdum. Vivamus et justo in enim blandit fermentum vel at elit. Phasellus eu ante vitae ligula varius aliquet. Etiam id posuere nibh.
</p>
<p>
Aenean venenatis convallis ante a rhoncus. Nullam in metus vel diam vehicula tincidunt. Donec lacinia metus sem, sit amet egestas elit blandit sit amet. Nunc egestas sem quis nisl mattis semper. Pellentesque ut magna congue lorem eleifend sodales. Donec tortor tortor, aliquam vitae mollis sed, interdum ut lectus. Mauris non purus quis ipsum lacinia tincidunt.
</p>
<p>
Integer at justo lacinia libero blandit aliquam ut ut dui. Quisque tincidunt facilisis venenatis. Nullam dictum odio quis lorem luctus, vel malesuada dolor luctus. Aenean placerat faucibus enim a facilisis. Maecenas eleifend quis massa sed eleifend. Ut ultricies, dui ac vulputate hendrerit, ex metus iaculis diam, vitae fermentum libero dui et ante. Phasellus suscipit, arcu ut consequat sagittis, massa urna accumsan massa, eu aliquet nulla lorem vitae arcu. Pellentesque rutrum felis et metus porta semper. Nam ac consectetur mauris.
</p>
<p>
Suspendisse rutrum vestibulum odio, sed venenatis purus condimentum sed. Morbi ornare tincidunt augue eu auctor. Vivamus sagittis ac lectus at aliquet. Nulla urna mauris, interdum non nibh in, vehicula porta enim. Donec et posuere sapien. Pellentesque ultrices scelerisque ipsum, vel fermentum nibh tincidunt et. Proin gravida porta ipsum nec scelerisque. Vestibulum fringilla erat at turpis laoreet, nec hendrerit nisi scelerisque.
</p>
<p>
Sed quis malesuada mi. Nam id purus quis augue sagittis pharetra. Nulla facilisi. Maecenas vel fringilla ante. Cras tristique, arcu sit amet blandit auctor, urna elit ultricies lacus, a malesuada eros dui id massa. Aliquam sem odio, pretium vel cursus eget, scelerisque at urna. Vestibulum posuere a turpis consectetur consectetur. Cras consequat, risus quis tempor egestas, nulla ipsum ornare erat, nec accumsan nibh lorem nec risus. Integer at iaculis lacus. Integer congue nunc massa, quis molestie felis pellentesque vestibulum. Nulla odio tortor, aliquam nec quam in, ornare aliquet sapien.
</p>
</body>
</html>

33
src8/phonebook0.html
Unescape Escape View File

@ -0,0 +1,33 @@
<!DOCTYPE html>
<!-- Demonstrates table -->
<html lang="en">
<head>
<title>phonebook</title>
</head>
<body>
<table>
<thead>
<tr>
<th>Name</th>
<th>Number</th>
</tr>
</thead>
<tbody>
<tr>
<td>Carter</td>
<td>+1-617-495-1000</td>
</tr>
<tr>
<td>David</td>
<td>+1-617-495-1000</td>
</tr>
<tr>
<td>John</td>
<td>+1-949-468-2750</td>
</tr>
</tbody>
</table>
</body>
</html>

30
src8/phonebook1.html
Unescape Escape View File

@ -0,0 +1,30 @@
<!DOCTYPE html>
<!-- Demonstrates table with Bootstrap -->
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<title>phonebook</title>
</head>
<body>
<table class="table">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Number</th>
</tr>
</thead>
<tbody>
<tr>
<td>Carter</td>
<td>+1-617-495-1000</td>
</tr>
<tr>
<td>David</td>
<td>+1-949-468-2750</td>
</tr>
</tbody>
</table>
</body>
</html>

15
src8/register0.html
Unescape Escape View File

@ -0,0 +1,15 @@
<!DOCTYPE html>
<!-- Demonstrates type="email" -->
<html lang="en">
<head>
<title>register</title>
</head>
<body>
<form>
<input autocomplete="off" autofocus name="email" placeholder="Email" type="email">
<button>Register</button>
</form>
</body>
</html>

15
src8/register1.html
Unescape Escape View File

@ -0,0 +1,15 @@
<!DOCTYPE html>
<!-- Demonstrates pattern attribute -->
<html lang="en">
<head>
<title>register</title>
</head>
<body>
<form>
<input autocomplete="off" autofocus name="email" pattern=".+@.+\.edu" placeholder="Email" type="email">
<button>Register</button>
</form>
</body>
</html>

15
src8/search0.html
Unescape Escape View File

@ -0,0 +1,15 @@
<!DOCTYPE html>
<!-- Demonstrates form -->
<html lang="en">
<head>
<title>search</title>
</head>
<body>
<form action="https://www.google.com/search" method="get">
<input name="q" type="search">
<input type="submit" value="Google Search">
</form>
</body>
</html>

15
src8/search1.html
Unescape Escape View File

@ -0,0 +1,15 @@
<!DOCTYPE html>
<!-- Demonstrates additional form attributes -->
<html lang="en">
<head>
<title>search</title>
</head>
<body>
<form action="https://www.google.com/search" method="get">
<input autocomplete="off" autofocus name="q" placeholder="Query" type="search">
<button>Google Search</button>
</form>
</body>
</html>

55
src8/search2.html
Unescape Escape View File

@ -0,0 +1,55 @@
<!DOCTYPE html>
<!-- Demonstrates layout with Bootstrap -->
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<title>search</title>
</head>
<body>
<div class="container-fluid">
<ul class="m-3 nav">
<li class="nav-item">
<a class="nav-link text-dark" href="https://about.google/">About</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="https://store.google.com/">Store</a>
</li>
<li class="nav-item ms-auto">
<a class="nav-link text-dark" href="https://www.google.com/gmail/">Gmail</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="https://www.google.com/imghp">Images</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="https://www.google.com/intl/en/about/products">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-grid-3x3-gap-fill" viewBox="0 0 16 16">
<path d="M1 2a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V2zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1V2zM1 7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V7zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V7zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1V7zM1 12a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-2zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1v-2zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-2z"/>
</svg>
</a>
</li>
<li class="nav-item">
<a class="btn btn-primary" href="https://accounts.google.com/ServiceLogin" role="button">Sign in</a>
</li>
</ul>
<div class="text-center">
<!-- https://knowyourmeme.com/memes/happy-cat -->
<img alt="Happy Cat" class="img-fluid w-25" src="cat.gif">
<form action="https://www.google.com/search" class="mt-4" method="get">
<input autocomplete="off" autofocus class="form-control form-control-lg mb-4 mx-auto w-50" name="q" placeholder="Query" type="search">
<button class="btn btn-light">Google Search</button>
<button class="btn btn-light" name="btnI">I'm Feeling Lucky</button>
</form>
</div>
</div>
</body>
</html>

33
src8/table.html
Unescape Escape View File

@ -0,0 +1,33 @@
<!DOCTYPE html>
<!-- Demonstrates table -->
<html lang="en">
<head>
<title>table</title>
</head>
<body>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>*</td>
<td>0</td>
<td>#</td>
</tr>
</table>
</body>
</html>

14
src8/video.html
Unescape Escape View File

@ -0,0 +1,14 @@
<!DOCTYPE html>
<!-- Demonstrates video -->
<html lang="en">
<head>
<title>video</title>
</head>
<body>
<video controls muted>
<source src="video.mp4" type="video/mp4">
</video>
</body>
</html>

BIN
src8/video.mp4
View File

Binary file not shown.