Web Development Fundamentals: HTML

1. Introduction: Hello, everyone, and welcome to the HTML plus. I'm Sa and I will be your instructor throughout this class. What you will learn in this class is we will start from very basics. You will learn about HTML structure, what HTML is, why we need to learn and you will learn about HTML tags. What are the commonly used tags in HTML? As you will learn about images, how to include image in HTML web page, and also you will learn about list in HTML. What are the different types of list available in HTML? A you will talk about forms in HTMI and also you will learn about how to include multimedia content like VDO ARU in STML webpage. What is needed to start this class? You no need to know everything to start this class, no prayer experience is needed. We will start from scratch. All we need is a computer with a text editor and a browser and also enthusiasm to learn something new. Let's get started. See you on the first class. Thank you. 2. Whats is HTML?: An. Welcome to this lecture. In this lecture, we are going to see what is a TML. HTML stands for hypertext markup language. It is the standard language used to create and structure content on the web. Think of HTML as the foundation of every web page. It organizes text, images, links, and multimedia into a form that browser can display. The term hypertext refers to the ability to link documents together using hyperlinks, while markup language refers to the use of tag to define the structure of content. Why is HTML important? HTML is the starting point of web development. Every website begins with HTML to structure its content. It allows you to build the skeleton of a web page, which is later sleed with CSS and made interactive with JavaScript. HTML is essential for creating user friendly and accessible website. Thank you. 3. Workspace Setup: Welcome to this lecture. In this lecture, we are going to setting up our workspace. In this project, I'm going to use Visual Studio as my editor and Google Chrome as a browser. Editor, it can be anything based on your availability. You can use note pa Noel plus. Let's create our first HTML file. For that, we need to create directory for our project. Let's do it first. In desktop, I'm going to create a new folder called HDML. Open your Visual Studio. Let's open our directory. Go to File, click on Open Folder and select your folder. Click Select Folder. Let's create our first HDMLFle. Click a new file. Let's name it as first program dot HTML. The HTML file should end with the extension dot HTML. Let it say hello world. Control par save. Let's run this file in our browser. Go to your desktop, open your HTML folder, double click on it. See, we have successfully created our first HTML file. Thank you. 4. HTML Structure: Hi, everyone. Welcome to this lecture. In this lecture, we are going to see structuring a basic HTML document, understanding the structure of HTM file, and also we are going to add title and basic content into our HtableFle. Let's begin. See, this is the basic structure of HTTMFle. Every HTML file should have a document type HTML and HTML tag, this is a root tag of HTML and also have head tag. Inside head tag, there is title tag, and we have body tag. Let's add title to our DST program. Control is for save. Let's run in browser. See, this is title. Inside the title tag, the information so visible in browser tab. Let's add some content in body sexon. Control is for save. Go to browser. Reference. See inside the body tag, the text is visible here. Thank you. See you on next lecture. 5. HTML Tags: Hello, everyone. Welcome to this lecture. In this lecture, we are going to see commonly used tags, heading tags, paragraph, line breaks, text embassies, Strang, and EM. We will also see how to a link in our HTML file. Let's begin. Let's create new file cards tags dot HTML. Quickly structure our HTML document. Let's add title to our HTML program. They did it say tans. Now we are going to see heading tags. Every HTML tags should have starting tag and also ending tag. This is Hachon tag heading tag. Control is for save. Let's take a preview in our browser. See, this is our heading. Let's see H two tag. Starting with H two and ending with H two. Let's see the output in our browser. The H two tag is smaller than H one tag. You see H four hatch five, and H six. Control is passive. Let's take a output review in our browser. See, H one is bigger tag, H three is smaller tag. 6. Paragraph Tag: Let's create our paragraph tag. Paragraph tag, start with P and ending with P. Control is for Save. Let's take a preview in our browser. This is paragraph text. Let's see how to add line break to this text. For this, we are going to use break tag. Let's take a preview in our browser. See, the text is breaking to the next line. But next, we are going to see strong tag. Strong tag is used to bold this text. See, our text is in bold format. Let's see what this EM tag is going to do. Start with EM and end with EM. Controls. Let's take a preview in browser. See, our text is in Italic format. Next, we are going to see a tag. A tag is used to link in HTML document. There is an attribute called HREF. Let's ink Inside the HRF, we need to give our link Control is for Save. See, we successfully added our first hyperlink. When you click on it, it will redirect to the Google website. Thank you. 7. Images in HTML: Welcome to this lecture. In this lecture, we are going to see how to add images in our HTML file. In order to display image in our HTML file, we need to use IMG tag, and also you are going to see source attribute and what is alt attribute. And we are going to see proper image formatting and file path usage. Let's begin. Let's create a new file called mag dot HTML. Let's give title to our table file. Inside the body tag, let's use IMG tag to display image. There is an attribute called SRC. Inside SRC attribute, we need to give our image URL. Let's go to Google, touch for image. Right, click on the image, click on OpenimageNw tab. Let's copy the image URL. Control C for copy, and control to paste. Control S. Let's take a preview in our browser. See, we successfully displayed image in our iML file. Let's add alt attribute. ALT. This is image. What is Alt attribute and what is the use of alt attribute? Let's see. I suppose the image is broken, means the Alt text will display in browser. See, our Alt test is, this is image. In the next lecture, we are going to see how to use image path. Thank you. 8. HTML Images: Let's see how to use local image Path. Instead of displaying live URL, we are going to use local Path image. Path let's save this image first. Click Save Images. Let it say image one. Go to your editor instead of giving live shots Let's give our local image. Control C, we have successfully display our local image. Let's move our image to new path. Create new folder. Let say image. Move our image to the newly created folder. Let's take a preview in our browser. See our image is broken. For that, we need to give proper image path. Our image inside image folder. Inside image folder, this is our image file name. Control far save. Let's take a preview. Now, our image is displaying. Let's add with property. And also there is a property called height. Let's give 500, 500. See, our image Diamondson has changed. Thank you. 9. HTML Lists: Welcome to this lecture. In this lecture, we are going to see HTML list. There are two type of list available in HTML. One is narded list UL and another one is deristOL. Let's see one by one. Let's create a new file called list dart HTML. Let's give our title as list. Let's see added list first. Added lists start with Oil tag and end with Oil tag. Inside Oil tag, there is a tang to display list. Control is, let's take a preview in our web browser. See our information listed as adder list one, two, three. This is the usage of added list L. Now let's see what is unadded list. P unadded list, we are going to use UL tag inside UL tag, there will be a LA tag to display item. Control per save. Let's take a review in our browser. See, nodded list displayed as without any harder, without any number to indicate. Thank you. See you on next lecture. 10. HTML Tables: On. Welcome to this lecture. In this lecture, we are going to see HTML tables. We are going to see table tag, table row, TR, table head, TH, table data, TD. Let's begin. Let's create a new file card tablet HDL. Let's give title to our SDMlPle it say table. Inside body tug, let's give heading to our pile. Let it say tables, table. Let's see how to create table in our ATM file. For that, we need to use tag, start with table, and also end with table. Also, there is a tag called TR tag. Inside Tartag we are going to display table header that. Et's use table data. Control A save. Let's take a preview in our browser. See, you have successfully created a table. Let's add another table row. Controls. Let's add barred to our table. For that, inside table tag, there is a property called border. S, we have successfully added barter to our table. Let's add some spacing between each tax. For then we are going to use sell padding. Let's add control. See, there is some padding between each element. Let's see what is cell spacing. I will add spacing between each elements. Let's say it does five also there is a property called. We can size our table. Let's set 500. See, our image size has been increased up to 500 pixel. Thank you. See you on the next lecture. 11. Forms: One, welcome to this lecture. In this lecture, we are going to see how to use Farms in HTML file. We are going to learn text input, email input, number input, radio, text box, text area, and submit butter. Let's begin. Let's create a new file called forms dot HD AML. Let's add title to our SDMLfle it say forms. Let's give title to our document. Let it say forms. To create Farm, we need to use Farm tag, starting with farm and ending with Farm tag. Let's assume we are going to create student registration Farm. Let's collect student name. Input type text. Let's add names student name. Control yes. Let's take a preview in our browser. See, we have successfully created text box to collect student name. Let's create a field for to collect EMI. Let's say email, input type, email, name as student email. Control, let's take a preview in our browser. See if we have successfully created. Input field for Email. Et's add break, tag, to display one by one. Control, yes. Let's add another a tag to give some additional space. See extra space as RM. Next, we are going to collect student g. For that, we are going to use input type number. Let's add name as student age. Controls, let's take a preview. Here you can only type number. Let's add radio button. Input type, radio, name, gender value. I would say male and add another radio button to Min son. Female. Let's add a break statement. Let's take a preview in our browser. This is radio button. Either you can choose male or female. Let's see how to add checkbox. Input type, checkbox, name, hobby. Let's give value. Football. Let's add a break statement. Let's add another checkbox, input type, checkbox, name, hobbies, value, reading. Let's break tag. C save. Let's take a preview in our browser. See, we have successfully added our hobbies. Next, we are going to see what is text area. Ts are filled to collect student address, starting with text area and ending with text area. Let's give name as student address. Control, see this is text area to enter address. This is multiline text. We can use text area. Let's submit button. Input, type, submit, name, submit, value Control yes. See, this is our submit button. We have successfully created student registration form with all fields like input type text, input type Emil, number input, radio button, checkbox, and text area, and submit button. See you on next lecture. Thank you. 12. Multimedia Content in HTML: Hello, everyone. Welcome to this lecture. In this lecture, we are going to see how to add multimedia content in our HTML file. You will learn how to add video, how to add audio and also, you will learn how to embed YouTube videos in our web page. Let's see one by one. Let's create a new file in the name of multimedia dot HTML. Let's give title as Media. Let's add title to our web page multimedia content. First, we are going to see how to add video tag. Further, we need to use video tag, starting with video and ending with video. Inside the video, there is a tag called source. Inside a source, we need to give source URL of the image file. Let's download new video file. Go to Google search sample MP four Video, go to First Link. Click Download. Our sample video file that's downloaded. Let's copy and paste it our Hart directory. Let's link our video file. Inside source tag, select your video file name. Control. Let's take a preview in our web browser. This see our video. We have successfully displayed our video. To show the media control in the video, tagged and controls equaled one. Control, yes. See, we can play and pass. Successfully displayed our first video file. Thank you. See you on the next lecture. 13. Include Audio and YouTube in HTML: One. In previous lecture, we see how to add video in our webpage. In this video, we are going to see how to add audio and how to add YouTube video in our webpage. Let's begin. Like PDO tag, there is a tag called audio to display audio in our webpage. Inside Audio tag, there is a property called source. Inside source, we need to give ARC. Let's download sample audio file. Go to Google search, download sample MP three. Let's download this one. Click Download. Let's copy and paste it in our HTML directory. In source tag, let's add our MP three file. Control and audio tag, controls equal to one. Control per se. Let's take a preview in our web browser. See, we successfully adder. Now let's see how to add YouTube video in our webpage. Further, go to YouTube website, select any one of the video. Here, there is Hobson to sack click click embedded. Copy creme code and paste it in our Webpage. Control is, let's take a preview. See our YouTube video has successfully embedded in our web page. 14. Conclusion: Hello. Thank you for joining in this HTML course. I hope you have gained valuable knowledge and confidence in building web pages from scratch. We have covered everything from the basics of TMR structure to working with forms, tables, multimedia, and sematic elements. Now it's time to apply what you have learned, practicing by creating your own projects, experimenting with different elements, and refining your skills. If you ever get stuck, don't hesitate to revisit the lessons or explore additional resources. I would love to hear your feedback. If you found this course helpful, please leave a review. It helps others to discover it and supports my work as an instructor. Also, feel free to share your project in the community discussion. Finally, if you're interested in learning, CSS, Javas web or other web development topics, stay connected for future courses. Thanks again for being part of this learning journey. Keep coding, keep creating, and I will see you in another class. Thank you.