WEBVTT

00:00.000 --> 00:05.920
Creating and linking pages to homepage. In this video, we will learn to create

00:05.920 --> 00:12.200
multiple pages in HTML. Link the pages. Add page and start with the code.

00:12.200 --> 00:16.560
Continuing from the previous video, we will develop the pages linked to the

00:16.560 --> 00:22.920
homepage. Creating the Nature Gallery page. Click on the plus icon to add a new file.

00:22.920 --> 00:31.720
Select new HTML file from the options. Rename the file as gallery.html. This is

00:31.720 --> 00:37.040
important because it must match the link name in the homepage code. Once created,

00:37.040 --> 00:42.920
we can start adding content for the Nature Gallery. Start coding. We will add

00:42.920 --> 00:51.720
style attributes to the body. We have added basic style attributes to the page.

00:51.720 --> 00:59.640
Now we will add the same style attributes to the image. We will add style

00:59.640 --> 01:14.080
attributes to the link. Now we will add attributes to the exit button. Can you

01:14.080 --> 01:22.400
recall which type of CSS is this internal or external? Write internal. Create the

01:22.400 --> 01:30.000
body of the page. We will add h1 as image of nature. Add images and an exit

01:30.000 --> 01:37.560
button to the page. Let's add the images. IMG SRC. Copy and paste the image path

01:37.560 --> 01:45.160
from your PC. And add backslash image name. Here, we will add 1.jpg as our image name

01:45.160 --> 01:51.960
is 1 and jpg is the file format. Alt equals nature image. Follow the same process

01:51.960 --> 02:01.840
to add other images. In this, the IMG tag embeds an image in a web page. The SRC

02:01.840 --> 02:07.720
attribute specifies the source, file path of the image. The alt attribute provides

02:07.720 --> 02:14.000
alternative text for the image, if the image fails to load. The file path is

02:14.000 --> 02:18.400
specific to your local machine. While this works when viewing the HTML file

02:18.400 --> 02:23.080
locally, it will not work if you upload the web page to a server because the

02:23.080 --> 02:29.480
server won't have access to your local file system. Add exit button.

02:29.480 --> 02:38.840
A. Anchor tag. This is the HTML tag used to create hyperlinks. HREF equals index.html.

02:38.840 --> 02:46.560
The HRF attribute specifies the destination URL or file. Index.html means that when clicked,

02:46.560 --> 02:52.240
the user will be taken to the home page. Assuming index.html is the home page file in the same

02:52.240 --> 02:58.680
directory. Class equals exit button. This applies CSS styling to the link, making it look

02:58.680 --> 03:05.040
more like a button. The class exit button is defined in your style tag, coding the nature

03:05.040 --> 03:12.280
videos page. Type the code. We will add the same style attributes to this page as we added

03:12.280 --> 03:18.240
to the gallery page. We will add the style attributes to the video links that will be displayed

03:18.240 --> 03:29.800
on our web page. We will add some style attributes to the link. Add body. We will add

03:29.800 --> 03:38.760
H1 as nature videos. We will add the video links to the page. Adding video links to the page

03:38.760 --> 03:49.720
Open. Iframe. SRC. Copy and Paste. The link from YouTube. Allow full screen close iframe.

03:49.720 --> 03:59.400
Follow the same process to add the other video links. Can you recall for what have we used

03:59.400 --> 04:06.040
the iframe tag, SRC, and allow full screen? The iframe tag is used to embed another web

04:06.040 --> 04:14.440
page or external content inside your HTML document. The source. Source. Attribute specifies

04:14.440 --> 04:21.320
the URL of the YouTube video. Allow full screen. This attribute allows the video to be played

04:21.320 --> 04:27.560
in full screen mode when the user clicks the full screen button. Let's add the exit button

04:27.560 --> 04:35.560
to the home page. Our code is completed. Let's download a check whether it works or not. Click

04:35.560 --> 04:43.160
on the index.html file to open the home page. Click on the first link gallery to check if the

04:43.160 --> 04:49.640
image page opens. Click the exit button to return to the home page. Click on the second link,

04:49.640 --> 04:56.280
videos to check if the video page opens. Click the exit button to return to the home page.

04:57.160 --> 05:03.160
We have successfully created and linked multiple pages in HTML. We have built a basic website

05:03.160 --> 05:13.320
with images and videos. Keep experimenting and enhancing your website with more features.

05:13.880 --> 05:19.720
Stay creative and keep building amazing web pages.