HTML Tutorial For Beginners | HTML Tutorial | HTML Crash Course | HTML Basics | Simplilearn

Key Takeaways

[Music] Welcome to our HTML tutorial at simply learn. In this session, we will be diving into the fundamentals of HTML which is the backbone of all the web pages. HTML stands for hypertext markup language. It is a standard language which is used to create and design the content on web. So whether you are creating a simple web page or a complex web application, HTML is essential for structuring the content and ensures it displays correctly in the browser. So guys, if you're interested about it, watch this video till the end. Now before you move on, just a quick info guys. Simply learn has got AI powered fullstack developer program. You can become job ready with AI powered fullstack web developer course. You can develop modern web apps using moon stack, Java and AI powered tools. So guys, this course is going to boost your CV with 60 plus hands-on project and you're going to earn official Microsoft certificates. So guys, hurry up now and join the course. The course link is mentioned in the description box. Now here's the agenda of our today's session. First, we are going to start with introduction to HTML. Then we will understand the basic HTML structure. Moving ahead, we are going to discover common HTML tags. Then study about HTML attributes, forms, and input element. Moving ahead, we are going to have HTML semantic elements, styling HTML with CSS, multimedia in HTML, and HTML links and navigation. Now, before we move ahead, here's a short quiz to test your knowledge. Which HTML tag is used to display an image on the web page? And your option are picture, image, img or media. Please mention your answers in the comment section below. And also guys do not forget to hit the subscribe button and click the bell icon. So let's get started. So guys, let us start with a basic introduction about HTML. So as you know HTML stands for hypertext markup language. Basically it is one of the most simple programming that you do by using we design the content of our web page. So you're going to see various tags like head, title, body, header, footer and all those thing. So that these things are used. So guys as you can see all over here there are various tags mentioned like head, title, body, header, footer, data list and so on and so forth. Basically each one of them help us to structure the content of our web application. Now you will understand more about it as we proceed to the hands-on part. So for this given tutorial I'll be using VS code for demonstration. If you haven't downloaded VS code just type VS code all over here and based on your operating system you can easily download it. So just go all over here and you can say since it is auto detecting which operating system I have. So just right click all over here and it is going to start a download. Now next step would be creating a folder and inside this let's say you create a given file name let's say index.html. Now what are you seeing all over here is the given syntax or the structure of the HTML content. Now you can see it starts with doc type HTML. Then here we have HTML lang in then there's a head tag and there you are defining the meta properties like what will be the character set the viewport and what will be the and the initial scale and then here what you are trying to put is the title what will be the title of your given web page which appears basically on the top. So let me show you a given website and then you close this head part and finally there is a content which goes out here. So this is inside your body tag. Now let us discuss bit about it. So you'll be wondering what exactly is viewport. So guys in HTML the view port refers to the visible area of a web page that can be seen by the user in the browser. It's essentially the part of a browser window where your content is displayed. And the size of the view port changes depending upon the device being used whether it is a desktop or let's say a laptop or in a smartphone. So this help us to manage the window based on the different different devices. Now let us explore all over here. Now you can see there is a syntax declaration that we have done dock type. So this is a declaration that defines a document type is of HTML and Ian says the language we are using is English. Now you can see inside the head tag we added metadata like character set, viewport settings for responsiveness and also the title of the page that appears at the browser tab. And the body section is where you are going to write the actual content of the page like for example it could be like headings, text, images, links and many more. So this is a simple structure and it is a foundation for the HTML pages. Now let us move ahead and try to explore some of the common HTML tags. Now if we talk about the text formatting tags. So you have lot of them like H1 then similarly there can be H2. Then similarly you can have H3 all over here and H4. So depending upon the size of the heading you can just mention something like this. H1 being the largest and the most important use for titles and sections. Then we have next tag that is paragraph tag. So if I talk about the paragraph tag all over here. So this tag is used to define the blocks of text. Then let's say if you type something like let's say strong. So basically it is used for bold text typically to emphasize the importance. Then you have em tag which is used for italicize. So let's say if you want to write in italics it is often used for that purpose. Now let me show you one example so that you will have a clear idea. So guys let's say we have a given HTML document and let's say I have given my title as my first web page and you can see I have text tags like H tag where I'm saying welcome to my first web page and there is an paragraph. Now after this just click on run and let's say I select my browser as Chrome. So you can see all over here we are going to see something like this. Now you can see this is a title that is being displayed my first web page and you can see this is the H heading that we added and this is the paragraph. So you can see how these things are getting aligned. I hope so you would have got a brief idea regarding this. Now let's move ahead. Now let us talk bit about list. So for list we have tags something like this. So guys, ul stands for unordered list. Okay? And o stands for ordered list. So basically unordered list is going to be a bulleted list. You're going to see a bullet. And here ordered list will be a numbered wise. Then one more tag we can add that is tag. So if I talk about the tag, this is used to list item. It is used within both ordered and unordered list. for example guys. So here you can see all over here we have a H1 tag. Then we have a P tag. This is in strong. Okay. And you can see I have also used an italicized text. And then here are the unordered list. For example, apple, bananas, oranges. And let's say if you're starting an unordered list and you need to add the LI tags our you know below this. So you can see this is going to be a bulleted list. Now let us see the output. So you can see all over here that we have got output let's say HTML formatting this is a bold statement and here are the list of the given things apple bananas and oranges let's say if I put it up as the ordered list now instead of bullet points I'm going to see the numbers let us try with that now let's click on restart and you can see all over here we are having apple bananas and oranges in the numbered now let us discuss bit about attributes so attributes provide additional information about HTML elements. They are always written within the opening tag. For example, if you see the attribute in the anchor tag, it is specifies the link definition. So for let's say for example and you can see here I have added the given link. Now in this anchor tag, so the attribute that which we are referring all over here is a href and you can see there are some of the common attributes that you're going to see across the elements. For example, the ID this attribute is very much important while applying the CSS. And then we have the class. So what class does is that it is going to group all the elements together for styling purposes. Then if you're working with image, src is very important attribute. And with src you can give the address of your given image. If it's on your system, you can give the local address. If it is on some server then you can link here. And finally you can see it is used with image is going to provide you with alternative names. Now let me show you one example. Inside our body we have one H1 tag and a paragraph. Here we are starting the anchor tag. Anchor tag is used when you are trying to put up some link in your given web page. For example this given link is exampample.com. And then next attribute I have target I have set it up to blank. Now let's say this is a simple website and this is enclosed inside the tag. Then you can see for the image tag I have used src attribute and this is a link which I have given and for alternative text to that given image I have given placeholder image. Then I have wrapped these elements inside the body and I have closed the respective tags. Now let's refresh this and see the output. So you can see all over here I have got a nice clickable link all over here and if you click on this and let's say you're going to get directed to the given page. So basically guys this is how we deal with the attributes. Now guys let us discuss bit about HTML forms and input elements. So HTML forms allows users to interact with a web page by adding the data or it lets you input the data. And uh here is a sample snippet of the code how you can do it. Let's say you are filling up your given information on a login form and let's say you have the given name and let's say you are typing your given details and finally you are submitting it. So for that purpose you can see I have used form action. The action of that form is submit. Now this is related to bit bit of backend concept. So the request that made to the server is a post request. Here you have added the label name. Here you have added the input type then the ID. So name is required. You need to type your name. Then you have a button which says submit. So let's say there is a label which u which says like write your given name and after that there is a button which says to press it and uh you can submit the given information. Now in this given code if you see the form is specifying the form and you can see input all over here defines an input field. There are many types like text, email, password etc which could be used as a input field. Now next you can see there is a button element. So there is a clickable button. So after filling your data you can just press it and your data goes to the back end. Now let me show you a complete example of the same. So let's say for example we are creating a signup form and let's say there is a form action which means this form action is somewhat not now guys you can see all over here I have put form action and then there is a hash sign. So this says that the form data is going to be there on the same URL. Then we have a label name full name input type text then we have id name and also this is required and then we are breaking the line then let's say we have a label okay then we have a input type all over here email and ID and then we have the button and finally we are submitting our given form let's see the UI now you can see this is what I meant let's say for example if you type your name let's say JSON and let's say at the rate let's say gmail.com and you submit the button. So you can see the data is submitted onto the same URL. Okay. So this is how your given form works. Now you can also inspect this. So just right click all over here and inspect it and you can go onto the console. So guys this is how your form actually works. Now let us discuss bit about semantic elements. Now semantic HTML tags helps to define the structure of your document clearly. These tags give meaning to the content inside them making it more readable for both humans and search engines. For example, include header. So you can see all over here this is where it is going to define the top section of a page or a section of a content. Then you can see we have now tells that you're going to define the content at the bottom section of a page. Now let's say you want to define the navigation links. So for the same purpose you can use the nav. Then similarly you can also use article. Now article defines a content that forms an independent part of the document. So these are some of the semantic elements of HTML. And you can see all over here we have a header in which we are defining the header such as with the H1 tag semantic HTML example. Then we have the H2 tag about semantic HTML. Then we have the paragraph with the given section. And let's say we have the given footer which says the footer content goes all over here. Now you can proceed ahead to look at the output. And you can see all over here this is how we are using our semantic elements. So this is H1 tag. Let's say this is a header. Okay. Then you can see this is a footer content goes out here. Then you have u you know some paragraph you have put all over here. So if you monitor your given code for example this section is under header then this is under the section tag. So this forms your given section. So about HTML semantic element. So these content is under your section tag. And finally at the bottom of your given web page trying to put is so in this way you can differentiate or you can do the partition for your given HTML elements. So that's why guys these uh semantic elements are kind of very much important and using these semantic tags helps with SEO accessibility and it makes your code more maintainable. Now guys here comes a pretty interesting part that's styling. So while HTML structures the content the CSS or we talk about CSS which stands for cascading style sheets it is used to style the layout of the page. For example, you can change the font colors, spacing and the layout also. And these things you can include in your HTML file. So you have to write the CSS for the same. Now there are a couple of ways in which you can write the CSS. So for example, you can write the inline CSS like within the tag itself using the style attribute. So you can see all over here I have written inside the HTML document only. So this is your inline CSS. Now there's another thing what you can do is you can write the internal CSS. So mostly if you have got ever a chance to work with Tailwind CSS or even with a normal CSS also what you do is you write the CSS all over here inside the given tag. So that's how basically you do it. And then there is a external CSS. You create a file like for example let's say we have a index.html file and you can create one more file like say index dot which helps us you with the CSS part. Now you can see all over here. So in order to put CSS in this what you have done is inside the head tag you have put the style tag. And let's say we are trying to target the body element. So you can see for body I have designed my something like this. Let's say all the content should be written with aerial or serif as a font and the background color is white. You can change the background color. So let's say for example I could change it to green somewhat. You can see we have easily changed this and you can say the H1 tag color somewhat is bluish and u the paragraph colors are gray. So in this way you can just style your entire elements just you can target these things and for more like let's say you are building a kind of a bigger application for those purposes guys as earlier we discussed you can use the attributes also for example you could use the class name or the ID to target the CSS of the respective elements. Now let us try to run this and see the output. So you can see all over here guys we have got this output. So you can see the background is green and you can see the you know here we have written style with web page and this is the paragraph. So this is how you can target the styling part. So this is pretty interesting. Now let's say I want to change the given colors from green to white. So I can go all over here and do this. Just refresh once more. And you can see all over here the background color has changed. So it's kind of pretty interesting. So do try out this. Now let us discuss bit about multimedia in H. Now HTML makes it kind of easy to embed multimedia content like audio video in your given web page and you would have seen various application in which you are able to play the music or play the video. Now if you want to do something like that we have the respective tags. For example, let's say if you want to embed any MP file like an audio file. So you can use an audio tag and let's say if you are trying to embed a video file you can use a video tag something like this. So for example you're going to see a syntax like this. So here in this what I have written is video let's say you have given the width of the given screen. Let's say it's it's a 20x 240 and u then you have added controls. So this is how you end the given video tag. Then let's say source you have given the given file let's say movie.mpp4. M before. So guys here what you are going to do is you are going to give the address of your given video. Your HTML document is going to take that video and it is going to embed in your web page. And let's say type you have to write let's say video MP4. If it is audio you have to write audio MP3. And um then you close this with the video tags. Okay. So this is how a basic demonstration of using the multimedia with the given HTML. Now let me show you a complete demonstration of the same. So guys you can see all over here we have the multimedia example. Let's refresh this. And you can see I've added a video and I've also added audio. And you can see video I've given width and height as the attribute and then this is used across both of them. Okay. And um also guys don't forget to write the type of uh like what you are using. Let's say if you are using a video you have to type video/mpp4. If it's audio audio/mpp3 and this is how it's going to work. Then let's get to the given um uh let's say your web page and you're going to see this thing like a screen a video player kind of a screen. Okay. And let's say if you're trying to play any music file, you're going to see this uh you know MP3 player something like this. So this is pretty interesting guys. You can make your own uh web page where let's say you are trying to play some video of let's say of any travel vlog which you have gone through or let's say if you are trying to you know play some music or you can just create a simple Spotify clone app that would be pretty much interesting. So you can try a lot of thing with this. Now finally we have HTML links and navigation part. So links are one of the most important elements in the web development. They help users to navigate between different pages on your site or external sites. So here you're going to give the given URL. Now in addition to external links, you also can create internal links like to other pages in the same website and anchor links to the specific sections of the same page. So that will be pretty much interesting because let's say when you create a big application like e-commerce, so you're going to have a different different routing pages for example /roucts slashcard slog. So there can be a different different routing involved. So you might have to create different different pages. Now for that purpose you know for routing. So here we can give the navigation link so that you could navigate to the other section. Now this generally differs from frameworks to framework. In react you have react router which handles this. In next it's a different game altogether. For example in ReactJS for handling the routing part you have the react router which basically manages the routing. And similarly it is available in other frameworks also. for example in angular or let's say you're working nextjs. So they have their own router which helps in navigation. Now let us uh try to also see in the navigation link we are having two links all over here. So let's say this is external link target we have kept it as blank and let's say one we have the about section. So this is going to go to the about section. Now this is your section and here you have something like let's say about us. Here is some information very basic thing. So you can see all over here first on the given UI what you're going to see is is the H1 tag then there are going to be navigation links with two links all over here and then the section in which you have the H2 tag the paragraph. So as I've already told you when you are going to click on about it is going to go to the same page. So guys this is how we have given this thing. Now let us try to run this. Just click on refresh and you can see these are the navigation links that we have. So let's say this is external link. If you right click you are going to get directed somewhere here. Okay. And let's say if you are trying to go all over here. So it navigates to the same page and u you're going to see uh URL in the change like for example /bout. So if you refresh this given page for example now let's say when you go back so you're not seeing anything right now but let's say when you click all over here you can see about is added so this is kind of pretty basic in terms of HTML so this is some of some of the basic things that you should be aware about which is very very much important when you are trying to learn the front end because later on you'll also be required to learn CSS JavaScript and then you can proceed to any full-fledged frameworks like React or Angular. So guys, that was all for today's session. I hope so you would have enjoyed our today's video. If you like these kind of videos, then I request you guys that do not forget to hit the subscribe button and click the bell icon so that you don't miss out any update from our end. Thank you guys for watching this video.