In this article, We are going to learn HTML Tags and HTML Attribute for new developers now if you missed my last article which is What is HTML in detail. here is the link
HTML Tutorial : What is HTML? | Web Development - Full Course | Episode 1 | ASRCdoing
So I guess we can move ahead and discuss how does it work? So inside this will be discussing HTML tags. So let's move ahead and see what's in it.
How does it work? (HTML tags) :-
So here's an example of basic HTML code.
<!DOCTYPE html>
<html>
<body>
<h1> My first Header/Headline </h1>
<p> My first Paragraph </p>
</body>
</html>
Well, I have written this code in my VSCode IDE but you guys can write it down in note pad or even you can use IDs like VS Code, Atom more brackets. Well, as you can see these shortcodes over here, these are known as tags. These words between the angular bracket are known as HTML tags. Okay, they're used to label pieces of content such as heading paragraph or even it allows some other cool stuff like adding a major and table to your web page or to tell your browser what to render on the page and what not obviously different tags perform different functions. Don't worry. We'll discuss them.
On HTML tutorial for now just understand that HTML tags normally come and pair like p + /p okay. The first tag in the pair is a start tag and the second tag is the end tag, the only difference between the end tag and start tag is the forward-slash symbol. It's like the end. I guess it is written just like the start tag, but only the forward-slash symbol is inserted before the targeting. Okay fine. So now that you know, what an HTML tag is, let's see whether you can understand this simple HTML code or not. Let me discuss each line code one by one so starting with exclamation mark (!) doctype HTML.
<!DOCTYPE html>:- So what does this mean? Well, if you are mentioning this tag, it means that you are defining your document to be of HTML5 or in other words. You are going to use the HTML5 version. Okay.
<html>:- The next line is or the next tag is HTML tag, as you can see, there is no forward slash symbol. So it is an opening tag. So our next tag is HTML. This is the root element of the HTML page this tag specifies that from here the page starts. Okay.
<body>:- (Body Tag) Next comes the body tag inside this body tag. We specify all the visible content on the page. We specify all the visible page content. Okay.
<h1>:- (Heading Tag) Next comes the H1 tag. H1 tag is a header tag and is used to define a Heading. All right, there are multiple header tags like H1 H2 H3 H4, and so on. Alright, so as you can see, I have closed my H1 tag with /H1. This means that my first header or headline. So this thing would be treated as my first heading. Okay.
<p>:- (Paragraph Tag) Next comes the P tag the P defines a paragraph So after headline what you do you guys just go ahead and write the paragraph inside it right so below each one comes the P tag. Well, it's not necessary. But generally, the paragraph comes after the header. Okay. So whatever you have to write inside the paragraph just mention it within the start and end tag of the paragraph. Okay, then finally what we did we close the body tag and the HTML tag. Okay.
Now write down this code in your IDE or any Text Editor. So now that you have written your HTML code your next step would be to save your code with an extension of dot HTML. So let's click on Save instead of normal text file select dot HTML hypertext markup language file and a side that just rename the folder. I'll rename it to like Basic dot HTML and I'll save it fine. So now when you'll go back to save location and open the basic dot HTML file see that your file opens into your default browser. But as you can see here, the browser is only showing the content without their respective tags. There is no tag like H1 tag or P tag in it, right? You're just seeing the content over here. So these browsers do not display the HTML tags, but what it does it reads the file and translates the text into a visible form thereby using them to render the content of the page. All right.
Well, if you are practicing it along let me just congratulate you on creating your very first web page. Yeah, guys. You heard me right? This is your web page. Let me just show you the very first web page that was ever created. Let's search for its first page ever created.
So as you can see Google found me this the first web page went live on August 6, 1991. It was dedicated to information on the World Wide Web project that was made by Tim Berners-lee it ran on the NeXT computer are the European Organization for nuclear research at CER. Can you see how basic this web page as well? This was the very first web page that was ever created. Well, there's a very basic webpage comparing to what we have right now currently. If you see the webpage at consists of this type of Animation that type of Animation SVG image PNG image and many other plugins and add-ons on the webpage or website, right? So don't worry about that. So once you are done with going through the entire Article of web development, I can assure you that you would definitely be able to create a dynamic and interactive web page for yourself. Okay, for now, let me just come back to our topic. Let's not deviate from it. So for now let's just focus on what is HTML later on step by step. We'll move ahead. All right, let's move ahead and see what's next.
So the next comes HTML tags attribute:-
So what are these HTML tag attributes? Well, one last thing to know about tags and attributes these attributes defined special features of a tag, if tags are windows and doors than attribute specifies the specific building detail. This could be the width and height to the frame or whether the window opens or the door has a lock. It's that kind of attribute which I'm talking about. like well, attributes are always included inside the opening tag, like one example is present Below:-
<a href="asrcoding.blogspot.com"> Visit to learn more </a>
Well, we are defining here a tag this a tag is basically used for a hyperlink using this you can hyperlink your text to any other Link in other words if the user clicks on that hyperlinked text, you'll be redirected to another website or any other webpage. Whatever you have linked to Let's consider this, for example, a space href this. href is an attribute name that you're doing here defining attribute and the value of an attribute is what triple www.asrcoding.blogspot.com. All right.
So this entire thing a (href = www.asrcoding.blogspot.com), inside codes this tag is your opening tag. All right, and what you have mentioned like href equals Well, www.asrcoding.blogspot.com. this is your attribute and after that what are you doing here specifying the text which has to be hyperlinked with www.asrcoding.blogspot.com and finally you're closing the tag so once you are done with it and you open this in your web page, you will see that you will get a hyperlink text.
Now write this <a href="asrcoding.blogspot.com"> Visit to learn more </a> code in your IDE or Text Editor and save it in dot HTML format. Finally, open the directory where you saved this file and open it you will see hyperlink text. Let's click it. Let's see whether it is redirecting to the website or not. So yeah, it is definitely redirecting me to www.asrcoding.blogspot.com.
Hope this article helps you. If you have any suggestion Drop it in Comment Section and Join Our Family by Clicking Subscribe Button and For More Article/Post Like this Join us on:-
No comments:
Post a Comment
Please do not enter spam link in the comment box.