00:00Hey everyone, welcome to this exciting journey where we'll be learning the building blocks of
00:06the web. Yes, we're talking about HTML. Let's start with a basic and important question.
00:12What is HTML? HTML stands for Hypertext Markup Language. It's the standard language used to
00:19structure the content of a web page. In simple words, HTML tells the browser what to display
00:25on the page and how to display it. It contains different elements and each element defines a
00:32part of your content like headings, images, links, paragraphs, and more. Now let's take a quick look
00:39at what a web page really is. A web page is simply a single document on the internet, something you
00:45open in a browser like Chrome, Firefox, or Safari. Let's move on to the syntax, the basic structure
00:51of an HTML document. Let's start with the first part, syntax. Every HTML document begins with
00:58something called the doc type declaration. We write it as doc type HTML. This tells the browser
01:05that the document type is HTML5, the latest version. Next comes the HTML tag. This is the root element of
01:13every HTML document. Everything inside your web page lives inside this tag. After that, we have the head
01:20tag written as head with lang equals n. This part contains meta information about the web page.
01:28You can think of it like data about the page that helps the browser understand what it's about.
01:33Inside the head, we also include the title tag. This is where we write the name of our page.
01:39The same title you see at the top of a browser tab when a website is open. Then we move to the body tag.
01:45This is the visible part of your page, the content that users actually see when they open the website.
01:52It can include text, images, links, buttons, and more. Within the body, we use the heading tag,
01:59like H1, which is used to display large headings, usually titles or section names. And we also use
02:06the paragraph tag, or P tag, which is used to write regular text or content in paragraph form.
02:13Next, I want to tell you that for working on HTML, we are using Visual Studio code that can be easily
02:19downloaded from browser. Now, let's move on to the second part, elements and attributes.
02:24Let's start with elements. In HTML, an element is everything you can actually see on a web page.
02:32This includes things like images, links, headings, and paragraphs. Even something like the head tag
02:38is an element. It's not visible on the page itself, but it plays a big role. For example,
02:44it's used to attach styles or define the title of the page. So, what's the syntax of an element?
02:50It's pretty simple. First, we write the tag name. Then we put the content inside the tag. And finally,
02:57we close the tag. Let's take an example. Think about a paragraph. We start with the P tag.
03:02Write the paragraph content inside it. And then end with a closing P tag. That's how a basic HTML
03:09element works. Open tag, content, and then close tag. It's the same pattern for most HTML elements.
03:17Now, let's talk about a special type of HTML element. Empty talks. Empty tags are elements that
03:24don't have any content between an opening and a closing tag. In other words, they don't need a closing
03:30tag at all. Sometimes, their meaning or purpose is already described through their attributes.
03:36Let's look at a few common examples. The IMG tag. It's used to place an image in an HTML page.
03:43It doesn't have content inside it. Instead, it has an attribute like SRC to specify the image file.
03:50Next, the BR tag. This is used to create a line break. It simply tells the browser to move to the next
03:56line. Then we have the HR tag. It's used to insert a horizontal line across the page. Now, let's
04:03understand the syntax of an empty tag. It's written by just using the tag name and including any attributes
04:09directly within that tag. For example, let's say we want to add an image. We write the IMG tag,
04:16add a SRC attribute, and set it equal to the file name or the link to the image. And that's it.
04:23No content inside, and no closing tag needed. Next up, let's understand attributes in HTML.
04:30Attributes are used to give extra information about an HTML element. Think of them like settings
04:35or properties. For example, if you're adding an image, you might want to define its height and width.
04:42Those values are given using attributes. Now, let's look at the syntax of an attribute.
04:46Attributes are always written inside the opening tag. First, you write the attribute name, then an
04:53equal sign, and then the value, usually in side quotes. Then you close the tag. After that, you write
05:00your content. And finally, you close the tag as usual. Now, here's something important to know.
05:07When we save an HTML file, we use the extension .html. That file then becomes a webpage when opened in a
05:14browser. Also, HTML is pretty flexible. Even if you make a mistake, it often won't show an error.
05:22Why? Because the browser tries to guess what you meant, and then shows the output based on that.
05:27Let's move on to the third topic. Doctype, or the type of document. This declaration is used to tell
05:33the browser what kind of document it's about to read. In simple words, it defines the type and version
05:39of the markup language being used. Here are a few examples. If the document is using mathematical
05:45markup, we write,
05:47Doctype math. For a scalable vector graphics file, it might be,
05:51Doctype svg. If we don't use a Doctype declaration, then the browser has to analyze the entire file
05:57and guess the document type. That can slow down page loading and lead to unexpected results.
06:03And when we're working with HTML, which is the most common, we usually write, Doctype HTML. This
06:10tells the browser we're using HTML5, the latest version. Next, let's talk about something that
06:16makes your code look professional and easier to read, and that is indentation. So, what exactly is
06:24indentation in HTML? Indentation means adding spaces in your code to show the structure, like which
06:30elements are parents, and which are children. It doesn't change how the web page looks in the
06:35browser, but it makes a big difference for developers. Let's understand some basic rules
06:41of indentation. Whenever you write a child element inside a parent, you should add some space before
06:47it. For example, parent tag, some space, and then child tag. This helps show that the child is nested
06:54inside the parent. Now, what about siblings? That's easy. Siblings don't need extra spacing,
07:01because they're at the same level. Like this, Paragraph Tag. Paragraph Tag. So, why is indentation
07:08important? It helps you clearly see which tag starts where, and which tag ends where. You can easily
07:15figure out mistakes like missing end tags. Let's move on to topic number five, comments in HTML.
07:21Comments are not visible on the web page. They're just for you, the developer, or for anyone else
07:27reading the code. You can think of comments as reminders or notes inside your HTML file. They
07:33help explain what certain parts of your code are doing. So, if you come back to it later, you'll
07:39remember why you wrote it that way. Comments are also really helpful when another developer works on
07:44your file. Instead of trying to guess what's happening, they can read your comments and understand the
07:48logic quickly. So, comments make your code clearer, organized, and easier to maintain. The syntax is
07:56simple. You start with less than sign, exclamation mark, two dashes. Then write your comment and end
08:03it with two dashes and a greater than sign. Let's talk about headings in HTML. A very important part if
08:10we want our website to rank well in Google. Search engines, like Google, read the structure of your
08:16web page. So, using proper headings before paragraphs is not just good practice. It actually
08:22helps with your website's search engine optimization. And visually, headings should always be larger than
08:28the normal text, so that users can clearly see the sections of your content. Now, in HTML, we have six
08:35levels of headings. Starting from Heading 1, which is the largest, down to Heading 6, which is the
08:42smallest, Visual Studio, or any HTML editor. Let's just write them like this. Ashan, H2, H3, and so on,
08:52all the way to H6. Let me give you an example. A title or main heading would use H1, a subtopic under that
08:59might use H2, and smaller sections under that would use H3, and so on. If you want to add a line
09:07under a heading, you can use the horizontal rule tag, written as HR tag. Now, let's understand how
09:14to create paragraphs in HTML. To write a paragraph, we use the paragraph tag, written as P tag. Here's
09:21the basic syntax. P tag, then the content of the paragraph, and then the closing P tag. But what if
09:28our paragraph is long, and we want to split it into two lines or more? Just adding space or pressing enter
09:35in HTML doesn't work. HTML ignores that space. So what do we do? We use the line break tag, written as
09:43BR tag. Let's say you want your text to break into a new line. You can do it like this. P tag, some content
09:50here. BR tag, continue the content. Closing P tag, one more line breaks. Just add more BR tags.
09:58But wait, what if you want a browser to show your text, exactly as you write it, including spaces,
10:05indentation, and line breaks? Without using multiple BR tags? That's when we use the pre-tag,
10:11short for pre-formatted. The pre-tag keeps the format of your text, just the way you wrote it in
10:17your code. It even counts the spaces and shows the exact layout on the browser. Here's how you use it.
10:23Pre-tag. Write your content, and then close the pre-tag. Just one thing to note, the style of the
10:30paragraph written with the pre-tag looks different from a normal paragraph. Only use it only when you
10:35need that exact formatting. That's all for today's session. I am adding a practice video that you
10:40should try for better learning. Thanks for watching.
11:10Bye.
11:12Bye.
11:13Bye.
11:14Bye.
11:15Bye.
11:16Bye.
11:17Bye.
11:18Bye.
11:19Bye.
11:20Bye.
11:21Bye.
11:22Bye.
11:23Bye.
11:24Bye.
11:25Bye.
11:26Bye.
11:27Bye.
11:28Bye.
11:29Bye.
11:30Bye.
11:31Bye.
11:32Bye.
11:33Bye.
11:34Bye.
11:35Bye.
11:36Bye.
11:37Bye.
11:38Bye.
Comments