WEBVTT 00:00.000 --> 00:06.320 Building a personal website. In this video we will understand how to plan a 00:06.320 --> 00:12.520 webpage creating the homepage for the website. We are building a simple three-page 00:12.520 --> 00:17.680 website about nature. The homepage introduces the site and includes links to a 00:17.680 --> 00:24.120 gallery page showcasing nature images and a video page embedding a nature-themed 00:24.120 --> 00:31.160 YouTube video. Each page features consistent headings, content, and a return to 00:31.160 --> 00:36.760 homepage link for easy navigation. This project demonstrates HTML basics 00:36.760 --> 00:42.480 including headings, links, images, and embedded videos while maintaining a 00:42.480 --> 00:48.760 clean and beginner-friendly structure, introduction and getting started, type, 00:48.760 --> 00:57.400 exclamation point, d-o-c-t-y-p-e, h-t-m-l, h-t-m-l-long, equals n-head. We will name 00:57.400 --> 01:03.560 the file as fun with nature, title, fun with nature, close title, close head. Now we 01:03.560 --> 01:09.880 will add body, body, header, we will add h1, h1 style equals color, equals hash, 01:09.880 --> 01:15.160 four c-a-f, five zero semicolon. We have to type the color code of the color, 01:15.720 --> 01:22.680 font size 7M semicolon, font weight equals bold semicolon, welcome to fun with nature, 01:22.680 --> 01:30.360 exclamation mark close h1. Can you recall which type of ccs has been added here, internal or inline, 01:31.400 --> 01:39.000 correct inline? Through inline CSS we have defined the style attributes such as color, font size 01:39.000 --> 01:46.040 and font weight. Now add a paragraph, p, explore the wonders of nature through images, 01:46.040 --> 01:53.800 videos, and interesting facts, close p, close header, main content, and table. Now we will add 01:53.800 --> 01:58.760 the main content main, we will add second heading in paragraph with some information, h2 style equals 01:58.840 --> 02:10.120 color, colon, two, f, four, f, four, f semicolon, font size, colon, five EM semicolon, text decoration 02:10.120 --> 02:18.680 colon, underline. What you'll discover, close h2 p, learn about amazing animals and fascinating 02:18.680 --> 02:25.400 plants, watch videos and enjoy stunning pictures of nature, close p, we are creating a table which 02:25.400 --> 02:30.200 will have a ordered list and an unordered list of animals and plants name. 02:35.560 --> 02:45.000 Can you recall what TR, TH, TD and Li tags do? TR tag creates a row. Teach tag is for the 02:45.000 --> 02:52.600 headings of the table, TD tag is for the data. In each cell, Li tag is used to define list items 02:52.600 --> 02:59.720 inside an oval and UL tags. One side of the table will have animals in ordered list and other 02:59.720 --> 03:06.840 side will have animals with unordered list. Linking to other pages, we have to link this page with 03:06.840 --> 03:12.200 other two pages. We will add third heading as explore, more as or link will direct them to a new 03:12.200 --> 03:21.080 page. H3 style, shark color, jar 556 B2F, font size, five EM, explore more, close, h3, 03:21.640 --> 03:27.160 AHRF, gallery, djhtml, go to nature gallery, close A, BRA, 03:29.240 --> 03:36.040 hrf equals gallery, dot html specifies the destination or the web page the link will take you to 03:36.040 --> 03:42.760 when clicked. In this case, it's a page named gallery dot html. The text between the opening 03:42.760 --> 03:49.400 a tag and closing, close a tag is what will be displayed as the clickable link. In this case, 03:49.400 --> 03:57.160 the text is go to nature gallery. BRA is an html tag that adds a line break, meaning it will move 03:57.160 --> 04:08.440 whatever follows it to the next line. AHRF, video, djhtml, watch nature videos, close a close main, 04:08.440 --> 04:16.360 close body, close html. Our code is not over yet, we have to style our website, open the styles.css 04:16.360 --> 04:24.680 file. Here we have already add some properties like border, margin, padding, font family, background 04:24.760 --> 04:31.000 color, text align, font size, extra. We will need to add this link in the html code. 04:32.520 --> 04:40.280 Add link areal equals style sheet hrf equals styles, dot cs styles dot css is the file name. 04:42.600 --> 04:48.760 We have completed the code, download, and click on the index file to see whether the website works. 04:49.480 --> 04:54.840 Our code is successfully implemented, but when we click on the link, it shows an error as we 04:54.840 --> 04:59.320 have not developed the code for this page. We will continue it in the next video. 05:02.680 --> 05:08.600 Great job, keep practicing and exploring more about html and css, learning never stops.