Hands On Work Inserting Videos - Learn

1/23/23, 8:53 AM TechnoHTML: 6.
Inserting Videos: Learn
23/1/2023
Techno HTML
HOME / COURSES / TECHNOHTML / THIRD QUARTER / 6. INSERTING VIDEOS
6. Inserting Videos
Indie Big Screen

Creating a Movie Website
SKILLS:
► Designing a Website
► Creating a Website
► Searching on the Internet
► Linking Web Pages
► Adding Video (Best Way)
Learn
Steps:
https://www.youtube.com/watch?v=m2onbLECTzA
1. Open Notepad++.
Click on Start ► All Programs ► Notepad++ folder ► Notepad++ or double-click on the Notepad++shortcut on the desktop. This will open a
blank document in Notepad++.
https://tlib.ph/mod/lesson/view.php?id=15126&pageid=1868 1/8
1/23/23, 8:53 AM TechnoHTML: 6. Inserting Videos: Learn
2. Create folders: Indie, images and clips
Create a folder in your Desktop and name it as Indie.
Inside the Indie folder, create two folders: images, and clips.
NOTE:
- The images found on IndieBigScreen_images.zip must be placed inside the previously created images folder.
- The videos found on IndieBigScreen_videos.zipmust be placed inside the previously created clips folder.
3. Type the basic HTML structure.
Type in the code on your right.
NOTE: It is advisable if you use the Tab key to indent the next set of tags. This is to allow you to easily review the previous codes.
4. Type the visible page content.
Type in the code on your right inside the <body> tag.
NOTE:
- This code is for the website’s header and body.
- images/ means that the images are stored in a folder named images.
This is the continuation of the previous code.
NOTE:
- This code is for the first two links located at the footer (News, and Schedules), and Film reel image.
- The links News and Schedules will redirect you to the official News and Schedules Webpage of Cinemalaya.
- target=_blank means that the link will be opened on a new tab.
This is the continuation of the previous code.
NOTE:
- This code is for the next two links located at the footer (Archives, and About Us).
- The links Archives and About Us will redirect you to the official Archives and About Us Webpage of Cinemalaya.
5. Save your file.
After writing the code, save your file by clicking File ► Save As.
Upon clicking Save As, the Save As window will appear. Choose the destination of your file ► rename it in the File name textbox ► choose the
file format in the Save as type drop down menu.
NOTE: You should save your HTML file inside the Indiefolder where the images folder is stored. Name your file as Home.html.
6. Create a new file.
Click File ► New or press Ctrl + N.
Upon clicking the New button or pressing the shortcut keys, a new document will appear.
Copy the codes from “Home.html” by highlighting everything and pressing the shortcut keys: Ctrl + C. Paste the copied code
from “Home.html” to the new file by pressing Ctrl + V.
We’ll need to change some lines in the copied code. Follow the codes on your right.
After typing the codes, save your file again, but this time, name it as “Video.html”.
NOTE:
- Lines 16-18 (2nd row) will be covered by Lines 16-18 on your right.
- The codes will create a new table row with a table data having a 3 column span. It will also display the title of the movie trailer.
Continue adding codes on Lines 19-28.
NOTE:
- The codes will add video to your page using the best way or approach.
Continue adding the last set of codes on Line 29-32.
NOTE:
- The codes will close all tags. It will also create a new table row with a table data having a 3 column span. The content of the cell is only blank
space.
- You should save your HTML file on the Indie folder where the images folder is stored.
Check the HTML files: Home.html, and Videos.html
After saving all the needed HTML files, you will notice that each of them now has the icon of your default browser.
Double click on “Home.html”. The image on the right should be the result of your work.
Click on the Featured Video button. The image on the right will display the result of the codes you typed earlier in “Video.html”.
NOTE:
- The video will play if the browser you used supports the HTML tags and file formats you used.
- Try to open it on other browsers such as Internet Explorer, Opera, and Firefox.
Return to TEACH Next - EVALUATE
◄ 5. Inserting Videos
Jump to...
7. Creating Forms and Input Types ►

Hands On Work Inserting Videos - Learn

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Hands On Work Inserting Videos - Learn

Uploaded by

Copyright:

Available Formats

1/23/23, 8:53 AM TechnoHTML: 6.

Inserting Videos: Learn

Indie Big Screen

2. Create folders: Indie, images and clips

Create a folder in your Desktop and name it as Indie.

Inside the Indie folder, create two folders: images, and clips.

3. Type the basic HTML structure.

Type in the code on your right.

4. Type the visible page content.

Type in the code on your right inside the <body> tag.

This is the continuation of the previous code.

This is the continuation of the previous code.

5. Save your file.

6. Create a new file.

Click File ► New or press Ctrl + N.

Continue adding codes on Lines 19-28.

Continue adding the last set of codes on Line 29-32.

Check the HTML files: Home.html, and Videos.html

Return to TEACH Next - EVALUATE

7. Creating Forms and Input Types ►

You might also like