Basic concepts

12 minutes
Share the link to this page
Copied
  Completed

Transcript

Hello guys am Shahzad and welcome election number four. Today we are going to discuss about some core concept or some basic concepts related with the HTML. So first of all, what are the markup? So this is the markup first of all lesson than greater than sign. And your browser do not show any markup. So what are the elements HTML element usually consists of a start tag and the end tag with the content inserted in between.

So how because I'm saying that tag name and now pick name. And inside between content here, I'm saying content here. So that means you are starting your tags. Your tag name goes here, your tag content goes there. And you have to close your tag name for suppose if you have a tag h1, then you have to close h1. And where you can write you can write your anything here for suppose shaggy.com.

So, this is the tag name h1, this is a tag name, h1, and you can close your tag by adding this backslash. And you can pride your content inside the tags or in between these two tags. Okay, so these are the tag. And now your elements can be nested. So how how? Because as you can see, you have your HTML tag.

You have your HTML tag here, and these are the tags nested. Because in the tag, you have another tag in the tag you have an annotation In the tag we have another tag. So these are the tags name, HTML header, title body as one anchor, br image, these are the tags name so what Don't worry we will discuss about each and every tag in our later lectures, but these are the tags name okay. So, your tag may have some attributes for suppose class. So, class is the attribute which is defining your one or your tag may have it Okay, you can okay if you have an image tag, you have your image tag then you have src src is a property of your tag, image tag. Okay if you have an anchor, for suppose anchor is a tag name href is a property and now I'm going to close the anchor why I'm closing Why am clothing as one why I'm closing this why I'm not closing this because you don't need to close the image tag.

Okay so don't worry about it we will discuss each and everything in our little lectures. So your HTML elements can have attributes first of all as you can see you have your attributes and attributes are attributes provide additional information about an element, because I'm using the edge see, that means I'm providing the additional informations for this tag attributes are always specific in the start tag. So as you can see, you can write all the attributes in the start tag. So this is your start tag. And this is your and tags you can not write any attribute in the end tag you have to write any attribute in the start, tag and attribute usually come in name value pair. So, how can this is the for suppose href name class so, this is the attribute name and this is the value you can provide the value.

So, this is the attribute name you can provide a value here and this is attribute name you can provide the value here. So, in this way you can create your attributes we have created the HTML index dot HTML file in our previous lecture. Now, we are defining something for suppose I'm saying Okay, so don't worry about it. All HTML document must start with a document type declaration. So how how can you define for suppose HTML and you can write Not doctype okay. And your HTML document itself begins with HTML and ends with HTML.

So you have started your HTML and now you are ending your HTML like this. yada, yada, yada start Korean. So we have created the index dot HTML file in our previous lecture. Now. These are the tags First of all, and if I write as one that means this is the h1 element. So whenever I say element, that means I'm talking about a specific element element which is header h1 heading, okay, if I'm saying elements, that means I'm talking about all the elements which element header footer, h1 means heading or paragraph image.

So don't worry about it, I'm just giving you some overview or the basic concepts. So before starting, you have to write the HTML. First of all, this is also an element and make sure this is the root of your text, you are starting your HTML, then you have to close your HTML also. It's basic, and it's necessary, okay. Now in this day, you are you have to define the head head tag, and you have to close the head tag. Okay.

And in the head tag, you have to write the title and you have to And the title. Okay, in the title, you have to write some string for suppose I'm saying sixty.com Why am writing cheesy.com Don't worry, we will. I'm going to explain each and everything. So now you have your HTML. It starts here you are sgml close here, your head tag, start here, your head tag close here. inside your head tag, you have your title tags.

And you can also define your meta tags, and also write your external styling and external scripting. If you're not familiar with external styling and external scripting, don't worry about it. We will discuss a lot of things in our series. Okay, so you can How can okay fine save your file First of all, go to your folder. Double click on the file. So as you can see, currently, it's showing cheesy Rosco So, this title defines the title of your page.

For suppose if you are saying that x, y zed.com. Just save your file, go to your browser, refresh the page. So as you can see, it's saying x y Zed. So working fine. Why you are not defining or it's not showing anything, just right click view page source. As you can see, it's showing your tags.

But it's not showing anything because you have to define your body. Now you have defined your body, your body starts here, your body and say, refresh the page. So as you can see, it's not showing anything Why because you have to define your HTML elements, or paragraph header each and everything which you want to show Here. So first of all, I want to show something here for suppose I'm saying this is p p is a tag. And I'm saying, check the.com. Save the file.

Good. Save the file, go to your browser, refresh the page. So as you can see, it's now showing me the content. Whenever you want to show any content, that means you have to define those tags inside your body. First of all, I'm saying I have to define the h1. h1 is the heading.

And I'm saying shake the.com go to your page refresh the page. As you can see, the font is large. And it's showing me the bold and the fixed calm. If I want to show something image SRC or suppose I have, I have to write the image I don't worry we will discuss about the images each and everything in our Let our lectures but for now, we are saying that this is the image refresh the page. So as you can see, it's showing me the image because it's some large image. So that's why it's not showing me properly.

So don't worry about this because why the image is showing on the page because you are defining your HTML tags in the body. So, in this way, you can create your or you can define your elements and you can show your elements on the homepage or the browser, okay. So this is the basic introduction or this is a core concepts you have to familiar with them before starting anything. Whenever you create a file, you have to create these blocks for suppose these are the necessary tags you need whenever you want to create another file for school. If you are creating another file, I'm going to create another file. First of all the Ctrl S, I'm saving this file, second dot html, make your second dot html and hit the enter button.

So this is the HTML type. And now what you need just need to define these texts. So Ctrl Alt or Ctrl A, that means copy all the content Ctrl C, and paste to a copied text and Ctrl V. You can also right click, copy and right click paste here. Okay, so now how can you access your second HTML file, go to your browser, sorry, go to your folder. This is the second file make sure the HTML file, double click on this as you can see, it's not showing anything because it's empty. You have to define h1 hair so it can show you the elements for Cisco shaggy dog.

Calm, refresh the page. Sorry, go to your browser and refresh your page. So as you can see, it's showing sixty.com make sure this is the second dot html file. Okay, so in this way you can create your file, and you can define your tags and you can define your anything inside your body. So thank you for watching.

Sign Up

Share

Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.