Project & Responsive Web Page
Tutorial of the Day:
Creating a web page and applying the three Video Parameters on three different Video links
Good day everyone, this is Jil Yago and I will be discussing a little tutorial about Linking Video Parameters or Multimedia through definitions and step-by-step here in my website.
In line 1 (see photo on right) as every html should start, always start with the <!DOCTYPE> tag in order for it to declare an instruction for your web browser about the kind of HTML version the page is written in.
in this case, I added html beside the <!DOCTYPE> tag since we're using HTML. next, we will add the opening tag of the <html> which is the root and container of all other HTML elements except for the <!DOCTYPE> tag. |
The <html> tag is then followed by the <head> tag which contains metadata (data about data) or, in other words, the <title>, <style>, <meta>, <link>, <script>, <base>, and <noscript> tags.
*Tip: The <title> tag is always required every time you create an html document. The page title is used by the search engine algorithms to decide the order when listing pages in search results which is why it is always required.
Next, in line 4 (based on the image above) we added the meta tag in order to make a responsive web page.
• Line 4: <meta name="viewport" content="width=device-width, initial-scale=1">
The meta tag is added in order to control the web page's dimensions and scaling. In this case, we added this tag to make a Responsive Web Page.
And then we added the <title> tag which is the Linking Videos, followed by the <link> tag for our .css file or the design of our web page.
• Line 5: <title> Title of your page </title>
• Line 6: <link rel="stylesheet" href="myCSS.css">
In line 6, I used an external style sheet file inside the href since it can be hard to scroll up and down looking for a specific type of CSS property.
*Tip: Do not forget to add the title of your HTML file / page because it is ALWAYS required upon creating an HTML file / page
*Tip: When doing an external style sheet file method, always save your style sheet file in a .css file format AND always put that .css file within the folder containing the HTML file you will link it to, otherwise it will not be read if they are in separate folders.
*Tip: The <title> tag is always required every time you create an html document. The page title is used by the search engine algorithms to decide the order when listing pages in search results which is why it is always required.
Next, in line 4 (based on the image above) we added the meta tag in order to make a responsive web page.
• Line 4: <meta name="viewport" content="width=device-width, initial-scale=1">
The meta tag is added in order to control the web page's dimensions and scaling. In this case, we added this tag to make a Responsive Web Page.
And then we added the <title> tag which is the Linking Videos, followed by the <link> tag for our .css file or the design of our web page.
• Line 5: <title> Title of your page </title>
• Line 6: <link rel="stylesheet" href="myCSS.css">
In line 6, I used an external style sheet file inside the href since it can be hard to scroll up and down looking for a specific type of CSS property.
*Tip: Do not forget to add the title of your HTML file / page because it is ALWAYS required upon creating an HTML file / page
*Tip: When doing an external style sheet file method, always save your style sheet file in a .css file format AND always put that .css file within the folder containing the HTML file you will link it to, otherwise it will not be read if they are in separate folders.
Next, we added a <div> container with a class of "navbar" containing 3 <a hrefs> for some links that redirect to some sites.
The <div> is a container for various elements used in making the body of the HTML like the <p>, <br>, <hr> and <form>, but in this case we are using <iframe> tag. The first <a href> is we gave it a name of "#home" redirecting it to the home page (which will be described in the video later). The rest of the <a href>s below (as per the image above) will redirect to the links (site) that are assigned to them.
The <div> is a container for various elements used in making the body of the HTML like the <p>, <br>, <hr> and <form>, but in this case we are using <iframe> tag. The first <a href> is we gave it a name of "#home" redirecting it to the home page (which will be described in the video later). The rest of the <a href>s below (as per the image above) will redirect to the links (site) that are assigned to them.
The a in <a href> means Anchor and the href means Hypertext REFerence. The <href> tag is the most important attribute since its purpose is to be a hyperlink to the link that is placed on the <href> tag. It can also be used on creating a navigation bar (which will be explained later in the video tutorial) or other kinds of navigation bars.
|
Next, we added another <div> tag with the id of "row1" and class of "row" containing another div with the class of "column1". This div container serves as a small margin within the page (will be shown later).
Next, we added another <div> container with the same properties as the previous container but the second container within it, we'll give it a class of "column2". Then we added a <h1> or header tag and gave it an id of "home" and called it HOME then we added a <h3> tag and typed in a small phrase saying I wanna share some videos! ☺
By the way, the <h1>, <h3> tags have different font sizes.
By the way, the <h1>, <h3> tags have different font sizes.
Heading tags differ in sizes:
• <h1> = largest font size
• <h2>
• <h3>
• <h4>
• <h5>
• <h6> = smallest font size and is least used / important.
*Tip: You can also change their font sizes using the style attribute. Either you use it in external style sheet file, internal style sheet file or inline style.
• <h1> = largest font size
• <h2>
• <h3>
• <h4>
• <h5>
• <h6> = smallest font size and is least used / important.
*Tip: You can also change their font sizes using the style attribute. Either you use it in external style sheet file, internal style sheet file or inline style.
Example of an External style sheet file:
*Tip: When doing an External style sheet file, save the external file with a .css file extension
Example of an Internal style sheet file:
*Tip: When doing an internal style sheet file, always start with a <style> tag WITHIN the <head> container
Example of an inline style:
*Tip: When doing an inline style, place it within the element or tag like <p>, <hr>, and other tags that are placed within the <body> container
After adding a heading and some small messages, we will add a divider called <hr> or horizontal rule.
Then, that is where we add our section for our iframe. As you can see on the image at the right, we added a few tags like the heading <h1> and paragraph breaker <p> for a few messages. Next, we added our <iframe> tag which will be used for displaying a link assigned on it. Within the <iframe> we added our width and height (no need for a style attribute for the sizing). |
In this tutorial, what we need is three different video links and the <src> or source tag for our <iframe> in order to display the video that we want to see on our web page. The first section displays the video link parameter of the video being played in autoplay but muted upon the opening of the site.
Here is and example showing how the autoplay but muted parameters are done
• src="https://www.youtube.com/embed/2Grdpu7zbwM?autoplay=1&mute=1"
Here is an example of the default YouTube link that we use when sending it to friends on social media:
https://www.youtube.com/watch?v=cgVd2d8GQiU
Notice that there is a watch within the link. If we want to add it to the iframe and add our parameters; the autoplay and mute. Within the link, we will replace the watch? with embed/ and add the parameters ?autoplay=1&mute=1 at the end of the link. Both parameters and the embed/ need to be present within the src, otherwise the video will not appear upon opening the web page on your browser.
From
https://www.youtube.com/watch?v=cgVd2d8GQiU
to
https://www.youtube.com/embed/v=cgVd2d8GQiU?autoplay=1&mute=1
*Same method goes to the other sections for the looped video and controls not displayed parameters.
For the looped video, here is an example on how to add the parameters in html:
• src="https://www.youtube.com/embed/zk6w6vZbEVQ?playlist=zk6w6vZbEVQ&loop=1"
In this kind of parameter, we will add the embed/, playlist= and &loop=1
See how it is done below:
From
https://www.youtube.com/watch?v=cgVd2d8GQiU
to
https://www.youtube.com/embed/v=cgVd2d8GQiU?playlist=v=cgVd2d8GQiU&loop=1
We added a playlist= within the link and added the link of the YouTube ( v=cgVd2d8GQiU ) and then added the &loop=1 in the end in order for the parameter to work once the web page opens.
Lastly, for the controls not displayed parameter, we will add embed/ and ?controls=0
From
https://www.youtube.com/watch?v=cgVd2d8GQiU
to
https://www.youtube.com/embed/v=cgVd2d8GQiU?controls=0
We added a ?controls=0 at the end of the link. There are two options for the controls parameter:
• 0 => do not display video controls such as the play button, duration of the video, etc.
• 1 => display all the video controls
!! MAKE SURE TO DOUBLE-CHECK YOUR YOUTUBE LINKS BEFORE OPENING THE WEB PAGE ON YOUR WEB BROWSER !!
!! OTHERWISE THE DESIRED VIDEO PARAMETER MAY NOT PLAY !!
Lastly, you can add a <footer> section if you want to put some of your online portfolios using <a href> for a little aesthetic. Of course, don't forget to add the end tags of </body> and </html> before finishing up your web page.
For more details, you can watch the video below to understand the tutorial better
Here is and example showing how the autoplay but muted parameters are done
• src="https://www.youtube.com/embed/2Grdpu7zbwM?autoplay=1&mute=1"
Here is an example of the default YouTube link that we use when sending it to friends on social media:
https://www.youtube.com/watch?v=cgVd2d8GQiU
Notice that there is a watch within the link. If we want to add it to the iframe and add our parameters; the autoplay and mute. Within the link, we will replace the watch? with embed/ and add the parameters ?autoplay=1&mute=1 at the end of the link. Both parameters and the embed/ need to be present within the src, otherwise the video will not appear upon opening the web page on your browser.
From
https://www.youtube.com/watch?v=cgVd2d8GQiU
to
https://www.youtube.com/embed/v=cgVd2d8GQiU?autoplay=1&mute=1
*Same method goes to the other sections for the looped video and controls not displayed parameters.
For the looped video, here is an example on how to add the parameters in html:
• src="https://www.youtube.com/embed/zk6w6vZbEVQ?playlist=zk6w6vZbEVQ&loop=1"
In this kind of parameter, we will add the embed/, playlist= and &loop=1
See how it is done below:
From
https://www.youtube.com/watch?v=cgVd2d8GQiU
to
https://www.youtube.com/embed/v=cgVd2d8GQiU?playlist=v=cgVd2d8GQiU&loop=1
We added a playlist= within the link and added the link of the YouTube ( v=cgVd2d8GQiU ) and then added the &loop=1 in the end in order for the parameter to work once the web page opens.
Lastly, for the controls not displayed parameter, we will add embed/ and ?controls=0
From
https://www.youtube.com/watch?v=cgVd2d8GQiU
to
https://www.youtube.com/embed/v=cgVd2d8GQiU?controls=0
We added a ?controls=0 at the end of the link. There are two options for the controls parameter:
• 0 => do not display video controls such as the play button, duration of the video, etc.
• 1 => display all the video controls
!! MAKE SURE TO DOUBLE-CHECK YOUR YOUTUBE LINKS BEFORE OPENING THE WEB PAGE ON YOUR WEB BROWSER !!
!! OTHERWISE THE DESIRED VIDEO PARAMETER MAY NOT PLAY !!
Lastly, you can add a <footer> section if you want to put some of your online portfolios using <a href> for a little aesthetic. Of course, don't forget to add the end tags of </body> and </html> before finishing up your web page.
For more details, you can watch the video below to understand the tutorial better
Video Tutorial
Responsive Web Page Design
A Responsive Web Page Design is used for automatically adjusting the screen for different screen sizes and viewports. This will make it easy for the viewer to view all the contents of the web page.
Simply add a meta tag within the <head> container:
<meta name="viewport" content="width=device-width, initial-scale=1">
Then you're good to go!
Simply add a meta tag within the <head> container:
<meta name="viewport" content="width=device-width, initial-scale=1">
Then you're good to go!
Compilation of all previous activities
Click buttons below to view codes used for this compilation: