WEBVTT

00:00.000 --> 00:15.000
In this video, we will learn how to embed images and videos on webpage, attributes used to embed images and videos.

00:15.000 --> 00:18.000
Let's understand what we are trying to do.

00:18.000 --> 00:27.000
We are creating a webpage which will have images and videos, creating the HTML structure.

00:28.000 --> 00:40.000
Doc type HTML, HTML, Lang equals EN, open head, open title, learn how to add image, video, lists and table in HTML, close title.

00:40.000 --> 00:45.000
Close head, open body, open H1 about me.

00:45.000 --> 00:49.000
Close H1, open P, high, I am Lily.

00:49.000 --> 00:53.000
We will create a webpage which has an image, video and ordered and unordered list.

00:53.000 --> 00:55.000
We will add those lists and table.

00:55.000 --> 01:07.000
Close P, embedding images enhances the overall design of a webpage, making it more interesting and helping users better understand the content by adding visual context.

01:07.000 --> 01:15.000
Adding offline, image, open H2, adding an image, close H2.

01:15.000 --> 01:19.000
H2 is the subheading which will come under H1.

01:19.000 --> 01:24.000
Open P, here is a picture of me, close P.

01:24.000 --> 01:27.000
We will add the image which we have on our desktop.

01:27.000 --> 01:30.000
Copy the location of the image from the PC.

01:30.000 --> 01:43.000
Image SRC equals paste, the copied image path, lily.jpg, alt, equals, picture of lily, with equals, 500, height equals 500.

01:43.000 --> 01:49.000
The SRC attribute has been used with the image tag to specify the location of the image.

01:49.000 --> 01:55.000
We have added lily.jpg as it is the file name and type it helps the browser to search.

01:55.000 --> 02:03.000
The alt attribute provides alternative text in case the image fails to load or for screen readers, width and height attributes.

02:03.000 --> 02:12.000
Set the images dimensions and pixels, adding a video, open H2, adding a video, close H2.

02:12.000 --> 02:18.000
H2 is the second subheading which will come under H1.

02:18.000 --> 02:22.000
Open P, here is my favorite YouTube video, close P.

02:22.000 --> 02:33.000
Copy the YouTube video link, open iFrame, width equals 560, height equals 315, source equals paste, the copied link.

02:33.000 --> 02:41.000
We need to change the link format to youtube.com, slash embed slash xtkys3-ty8.

02:41.000 --> 02:44.000
This is the longer URL for embedding.

02:44.000 --> 02:50.000
FrameBorder equals 0, allow full screen, close iFrame.

02:50.000 --> 02:56.000
iFrame tag is used to embeds external content like a YouTube video.

02:56.000 --> 03:03.000
The FrameBorder attribute specifies the border, for now we have kept is 0, we can increase if want to.

03:03.000 --> 03:09.000
Allow full screen attribute, allows video to display full screen mode,

03:09.000 --> 03:20.000
saving and viewing the page, download or save the file as index.html, click on it to see whether it open in the browser.

03:20.000 --> 03:27.000
We can see the image and video on the web page, we will add list and create table.

03:27.000 --> 03:32.000
HTML is a great way to add different types of content to your web page.

03:32.000 --> 03:38.000
Keep experimenting by adding more elements to create exciting pages.