The following code is the first 6 lines for every web page.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
The following code is the last 2 lines for every web page.
</body>
</html>
Let’s change title as Timelapse. Here is the code for now.
<!DOCTYPE html>
<html>
<head>
<title>Timelapse</title>
</head>
<body>
</body>
</html>
Between <body> and </body> we will write whatever we see on the main window.
There are 9 elements on the web page in the following order:
Heading 1
Video
Horizontal Line
Heading 1
Video
Horizontal Line
Heading 1
Video
Horizontal Line
We know the code for heading 1s and horizontal lines, but we have not learned the video embed code yet. Let’s start with what we know and leave other lines empty for now.
<h1>Cucumber Time Lapse</h1>
..
<hr>
<h1>Ginger Time Lapse</h1>
..
<hr>
<h1>Strawberry Time Lapse</h1>
..
<hr>
What will we put in the blanks?
Go to Box Lapse video channel, choose a video. Write click and see the options starting with Loop. Choose the 4th one (Copy embed code)
Paste it after the first Heading 1.
Find Ginger Time Lapse. Copy embed code and paste it after the second heading 1.
Find Strawberry Time Lapse. Copy embed code and paste it after the third heading 1.
Here is the final code for Timelapse web page.
<!DOCTYPE html>
<html>
<head>
<title> Timelapse </title>
</head>
<body>
<h1>Cucumber Time Lapse</h1>
<iframe width=”1920″ height=”1080″ src=”https://www.youtube.com/embed/Xdt33Pqcm0Y” title=”Pinecone to Pine tree timelapse” frameborder=”0″ allow=”accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share” referrerpolicy=”strict-origin-when-cross-origin” allowfullscreen></iframe>
<hr>
<h1>Ginger Time Lapse</h1>
<iframe width=”1236″ height=”695″ src=”https://www.youtube.com/embed/JMTsWdDZJiE” title=”Giant Sunflowers Time-lapse” frameborder=”0″ allow=”accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share” referrerpolicy=”strict-origin-when-cross-origin” allowfullscreen></iframe>
<hr>
<h1>Strawberry Time Lapse</h1>
<iframe width=”1920″ height=”1080″ src=”https://www.youtube.com/embed/Xdt33Pqcm0Y” title=”Pinecone to Pine tree timelapse” frameborder=”0″ allow=”accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share” referrerpolicy=”strict-origin-when-cross-origin” allowfullscreen></iframe>
<hr>
</body>
</html>
Save web page as timelapse.html and show it to the teacher.
Challenges:
1. Change the size of videos and make the height 600 pixels.
2. Put one of your favorite videos before Ginger Time Lapse.
