Basic Tags in HTML – Learn to Code in HTML and CSS

Basic Tags in HTML – Learn to Code in HTML and CSS


– [Voiceover] In this lesson, you’ll create your very first HTML text. And I want to begin by saying that the role of HTML in a website, is to specify the content that you will see in the web browser. You’ve probably visited a
lot of websites in your life and you already know that
a website is not just text. Websites have other elements. They have headings, they have images, they have forms, tables,
and many other things. So how do we tell the browser what it is that we want to show? That’s when tags come into play. For example, I want to tell the browser that this “hello world” text is actually a main heading in my document. In an ideal world, I would
be able to just talk, and maybe that’s where we’re headed. I can just say “Hey
browser” or “Hey computer, “show this text as a main heading”, but that doesn’t work for now. So we need to use tags. The first type we’ll be learning will be the main heading tag. Tags are a bit like a sandwich. A tag has an opening, and then a lot of tags have a filling as well, and a closing. So this example here shows the h1 tag, which is a main heading. And that’s exactly what we’re going to implement in our code. So you begin by opening your tag and just like a sandwich,
you always need to close it. So I’m gonna close it. For that you type the same tag as well, but you add the forward slash before the name of your tag, and then you save. If we look at Google Chrome
and refresh the page, this is now a main heading. What if I want a secondary heading? I can use the h2 tag
and type something like “the sky is blue”. Close my tag just like the sandwich, save, refresh the page, and
we’ve got a second heading. “The water is cold” will be some other text I will be adding. And there we go. So HTML tags are the way for us to tell the browser to tell the page how we want
to display our content.

[#17] What Is CSS?

[#17] What Is CSS?


Styling with CSS has set a lot of time for web developers. Styling of HTML document describes, how HTML element is going to look in a browser. Now, what is CSS? CSS stands for Cascading Style Sheet. It is used to define the style of web page. You can apply style to any element of a web page. You can apply style to any element directly or can use external file for it. Let me show you the basic syntax of CSS rule set. For example, if you want to add style to p element. You have to write it like this way, p then open and closing curly braces. And CSS rule inside it for the color to green and font size to fourteen. The p is the selector and on the left side of the rule set, it is a property and on the right side it is the value. There are three ways of adding style to a project. The first one is Inline. In this way you add the CSS rule set directly inside the element tag like this. This may be used to apply a unique style for a single element. The second is adding Internal style sheet. It goes directly into the head section of a webpage. The third method is adding CSS by external file. And this is the method, we will be using in this course. Link tag is the tag used to add or link external style sheet into your document. And there is no closing tag for this element. Let me show it to you. I need to open the brackets editor. OK. I will continue with simple business page project OK. Lets create a new file with style dot CSS. So all of the CSS will go inside style dot CSS. Let me added to the index dot HTML file, link, relation, style sheet, type would be text and CSS and href CSS and then style dot CSS. So this is the way to add style dot CSS into HTML file. Now we have added our external style dot CSS file In the coming lecture, we will be applying CSS to our simple business web page. See you there. Thanks