Hey everyone, today's topic is Learn HTML in 10 minutes. But before we begin, if you haven't subscribed to our channel already, make sure to subscribe to our channel and hit the bell icon to never miss an update. Let's begin. First, we'll go through a quick introduction to basic web architecture to understand how the internet works.
Then, we'll understand what exactly HTML is. After that, we'll have a look at what CSS is. Then, we'll go through JavaScript. And in the end, we'll create a simple web page using HTML and CSS to gain a better understanding of the HTML tags. So without further ado, let's begin.
Now, what exactly is the basic web architecture? Now web architecture is made up of three essential elements. That's the website, that is the front end of a web application that is visible to the user.
Then there is the server which constitutes the back end of a web application and holds and manages all the data. And finally there's the IP address, that is the address assigned to a website in order to be accessible on the internet. First up, let's have a look at what website is.
So, your browser starts by loading the main HTML file and then the CSS and JavaScript. The user interacts with the website and is not concerned with the backend of an application. Now, secondly, we have the server. Once you've developed your website, you'll have to host it on your server to make it accessible on the internet. Server, along with the database, contains all the data of a website and facilitates user interaction.
Lastly, there's IP address, which is the third element of the web architecture. Now, a website is hosted on an IP address. We put a domain name over that IP address, the same way we put names over people's phone numbers. When you type a domain name in the browser, it will give you the server call.
The server will then send over the website to you. Next, what is HTML? HTML is the most widely used markup language for developing and structuring web pages on the internet.
It defines the structure of websites and formats these web pages. So what exactly is CSS then? Now CSS is a simple design language used for making web pages look more beautiful and presentable. It can be attached to any HTML element to style it or even position it according to the developer's choice.
Then you must be wondering what exactly is JavaScript? Now JavaScript is a powerful interpreted language targeted for web development. It is used for making web pages interactive and bringing the web pages to life.
So now let's create your first website. Now HTML, short for Hypertext Markup Language, is the coding standard for documents designed for web browsers consisting of a series of elements or tags and which can be used to structure a web page, right? So these elements can include headings, paragraphs, div containers, tables and more.
HTML tags are nested, meaning there are opening and closing tags with the content in between those tags. So now let's write a simple HTML code that will help you understand the basics of the language. So for this, I'm using the text editor that is Visual Studio Code.
You can go ahead and download this text editor from their official website. So here I've created a simple.html file in my VS code and I've added the initial HTML files. Now let me explain to you one by one.
Now doc type is not so much of a tag but it is more of an instruction. Now this indicates the browser that the document type to be served to the user is in fact an HTML document. Now this doc type instruction should always be included at the very top of your HTML page. Next up, you have the HTML tag that is used to contain all the web pages HTML code, right?
So it contains an opening and closing tag with contents in between them. The HTML tag can also have attributes. Now, for example, there's the lang attribute allowing you to specify the spoken language of the contents of the page. Followed by the HTML tag, there's the head tag. Now, this is the first section of the code that contains all of the information about the web pages properties, links, and more.
It could have pages title, description, additional meta tags and CSS code. So here I've used the title tag and let's give a title say HTML in 10 minutes. Alright, you can also add CSS to the head tag by using the style tag and change the display styles of HTML elements that are being used. The next section is the body tag.
Now the body tag contains all the displayable contents of your web page including headings, paragraphs, div containers, tables and more. Now the HTML header tags are used to add headings to a web page. There are several types of headings available for developers to add to a web page. Right, so first up let's have a look at them. I'm going to create a simple h1 heading tag and the message I'm displaying is this is the first heading.
Alright, after this I'm going to add a paragraph tag which creates padding in the top and bottom of the element to help separate the text between each paragraph. Right, so I'm gonna add a p tag. and say this is the paragraph tag.
After this, let me add a simple h2 tag which is another heading tag and say this is the second heading. Now you can also add line breaks which are helpful from time to time. If you want to provide a single line break in your content, you can do so by adding the tag.
So here let me just add one for better understanding. Now the tag defines a division or a section in an HTML document that is used as a container for other HTML elements. Now these elements can include content areas, sidebars, page bars, page headers, footers, etc.
This tag is used to apply styles to HTML elements, that cannot be added otherwise. We can also make use of the HTML image tag to add images to a web page. Now these images in a web page are a very common site and they can make the website look more attractive. So for that we can use the image tag. So let's say img within which I mentioned the source.
I'm adding the HTML logo so let me just mention that here. and then I'm going to provide width for it and then a specific height. Alright, so when you save the file and when you look at the browser, you can see that the first heading is displayed, then your paragraph tag is displayed, followed by the second heading and then the image.
Now, let me show you how you can add styles for some of these headings and paragraph tags. So here, back in my first heading tag, Let me just say styles and let me change the font of the content that is being displayed. I'm going to change it to career new and for my paragraph tag, let me display the content in italics.
So I'll say font style and make it italics. So let me save this and when I look at the browser, you can see that the font has changed and so has the font style here. So now we've covered a few important HTML tags used to develop a web page.
Now there are many other tags available for almost everything you'd want to add to a web page. Now all of these are available on the internet for you and you can use them in your website. So with that, we've reached the end of this video. I hope you liked it. Do you think we missed out on anything important?
Let us know in the comment sections below. Until then, keep learning and stay tuned to Simply Learn. Hi there, if you like this video, subscribe to the Simply Learn YouTube channel, and click here to watch similar videos. To nerd up and get certified, click here.