Easiest Way To Learn HTML5 and CSS3 Coding

Lesson 2 - Inserting Images and Videos

Section 1- Inserting Images

For inserting any image, you need the address of that image. It may be illegal to copy images without permission. Therefore, create a folder named “pix” inside the sub-folder global family .

Copy the following images and save them in “pix” folder that you just created. Name the images exactly as indicated below (Naming them correctly is very important):


kautilaya.png

Old Couple.png

Structure.png

lions1.jpg

sunset.jpg

pattern.png

If you look at the proposed website in Lesson 2, Section 1, there is an image below the sentence, “A family that keeps together.” Let’s do that.

Open your file: “global family.html”.

Write the following above the closing body tag indicated by </body>

<!DOCTYPE html>

<html>

<head>

<title>Global Family</title>

</head>

<body>

<h1 style="color:red; text-align:center;">Global Family</h1>

<p style="text-align:center;"> A Family That Keeps Togetherlt;/p>

<p><img src="pix/Old Couple.png" rel="Old Couple" width="10%" /></p>

</img>

</body>

</html>

Save the above as “global family.html” in your Global Family directory that you created. Click on that file. This will open a web page that should look like the following, if you wrote the program correctly:

Global Family

Global Family

A family that keeps together

However, the picture is to the left. In order to center it, we will write an Inline rule before the image tag like the following:

We used a line break by inserting an empty tag <br> . Empty tags will be explained in later Lessons. Just remember that empty tags do not require a closing tag.

Let us also insert a picture of a rose that we will take from a public domain website. Let us write the following.

Once you insert the above two revisions, your program should look like the following:

<!DOCTYPE html>

<html>

<head>

<title>Global Family</title>

</head>

<body>

<h1 style="color:red; text-align:center;">Global Family</h1>

<p style="text-align:center;"> A Family That Keeps Together</p>

<p style="text-align:center;"> <img src="pix/Old Couple.png" rel="Old Couple" width="10%"><br> Old Couple</p>

<p style="text-align: center;" > <img src="https://i.pinimg.com/originals/b0/98/01/b09801e517bb55371ef5358205e831c0.jpg" width="5%" /> </p>

</body>

</html>

Save the file, "global family.html" and open it again. Your webpage should look as shown below:

Global Family

Global Family

A family that keeps together

Old Couple
Old Couple

Explanation

(Remember, you must use all lower case while writing an html code unless you are using proper names such as filename which has to be written exactly the way that appears in your directory).

  1. You added an image below the slogan that says “A family that keeps together” by writing the code: <p><image; src="pix/Old Couple.png" rel="Old Couple" width="10%" /></p>
  2. You used <p></p> to place the image in a separate paragraph.
  3. You created an open tag for image starting with < and ending with />. Notice that you did not use <image></image>.
  4. Inside the open tag you wrote <image or <img. Following that you specified the source of your image by writing src. In an html code you must identify property and value. Your property was source indicated by src. Your value was "pix/Old Couple.png". You wrote “pix/Old Couple.png” because the picture you are inserting is in a directory named “pix.” The file name should be exactly as it appears in your folder.
  5. You wrote another property and value rel=”pix/Old Couple.” This is a requirement established by W3C (World Wide Web Consortium) for blind users.
  6. Next you determined the width of your image by writing another property and value, width="10%"
  7. You inserted a picture of a rose from someone else’s website (public domain) by writing the following:
  8. <img src="https://i.pinimg.com/originals/b0/98/01/b09801e517bb55371ef5358205e831c0.jpg" width="10%" />
  9. Lastly, you closed the tag by writing />.

If you wrote your program correctly, it should look like the following:

Important Rules:

Empty Tags

Before we move on to Section 2, a word about Empty Tag. Most HTML elements have a start tag and an end tag</p> </p> that indicate where the element begins and where it ends. There is a group of elements that are exceptions to this rule. These elements are called empty tags and only have a start tag such as <img. Below is a list of empty tags for your reference.

<area>

<base>

<col>

<embed>

<hr>

<img>

<input>

<link>

<meta>

<param>

<source>

<track>

<wbr>

Let us move to Section 2 where we will continue with creating the Global Family website.

Section 2- Inserting Videos

If you look at the proposed website in Lesson 1, Section 3, there is a video below the ordered list (numbered bullets). First of all, copy this video shown below in your pix folder. Name the video clip "clap.webm":

Woman Clapping

Let us insert that video on the website we are designing.

Open your file: “global family.html”

Write the following below the closing paragraph tag </p>:

<video controls style="align:center;">

<source="pix/clap.webm" type="video/webm" style="width:50%;" <

</video>

<p>Woman Clapping</p>

Save the file and open in html. You will see the video posted with a subtitle, “Woman Clapping.”

Explanation

  1. You created a tag for video <video controls>.
  2. Then, just like inserting image, you inserted the clip from your pix folder, ”pix/clamp.webm”
  3. You closed the tag with </video>
  4. You created a subtitle for the video by writing <p>Woman Clapping</p>

Note: <video controls> specifies that video controls should be displayed. There are different attributes to video play. Write the attribute <video controls autoplay>. The woman in video will clap automatically..

If you write the attribute <video controls loop>, the woman in video will keep clapping continuously. Try that and have fun.

Let us go to Section 3 and learn to insert YouTube videos.

Section3- Embedding YouTube Clips

If you look at the proposed website in Lesson 1, Section 3, there is a YouTube video below the table. Let us insert a YouTube clip in the website we are designing.

Open your file: “Global Family.html”.

Write the following just after the line <Woman Clapping>

<iframe width="320" height="245" src=https://www.youtube.com/embed/tgbNymZ7vqy>

</iframe>

<p>Family of Chickens</p>

Save the file and open in html. You will see the video posted with a subtitle, “Family of Chickens.”

Global Family

Family of Chickens

Explanation

  1. You wrote an <iframe> element in your web page
  2. You determined width and height of the video frame width=”320” height=”245”
  3. You defined an attribute point to the video URL

    src="https://www.youtube.com/embed/tgbNymZ7vqY">

  4. You also gave instruction to embed the video on your web page by writing /embed/
  5. You closed the tag with </iframe>
  6. You created a subtitle for the video by writing <p>Family of Chicken</p>

Note: 1. You can make the video auto play by writing the following:

2. You may also play the video in loop by writing the following:

You have gained enough knowledge about inserting images and videos in your web pages. Now, we will go to Lesson 3 to learn about paragraph, list, table and link.