D
Dan-Kode
Guest
Hey there everyone. After a long time away, I'm back again. This time, with a new HTML5 Tutorial.
So in this Tutorial, I'll be covering what Comments are, the Title that will be displayed in your Browser Tab and the <meta> Tag.
At the end of the last Tutorial, your Code should have looked like this:
[CODE lang="html" title="tutorial.html"]<!DOCTYPE html>
<html>
<head>
<body>
<!--This is your Heading. Just so you know. I'm a Comment. You'll learn about me later.-->
<h1>Beginner HTML</h1>
<!--This is your Paragraph. It displays Text. I'm just another Commnet which you'll learn about
soon.-->
<p>Hey there. I'm a Beginner in HTML. I'm learning the Basics just now but I will be moving on to
the more advanced stuff soon.</p>
</body>
</head>
</html>[/CODE]
If it doesn't then copy and paste the Code above into a File by the name of: 'tutorial.html' or 'tutorial.htm'
So we'll begin with the most simplest Tag, which is <title>
The <title> Tag is a Tag that will display the Name of your Site/Webpage in the User's Browser-Tab. If you don't have a <title> Tag then the Browser-Tab will just display the File Name of your .html/.htm File.
To add a <title> Tag, write the new Line of Code displayed in the following Block inside your <head> Tag:
[CODE lang="html" title="tutorial.html" highlight="3"]<!DOCTYPE html>
<html>
<title>My HTML Webpage</title>
<head>
<body>
<!--This is your Heading. Just so you know. I'm a Comment. You'll learn about me later.-->
<h1>Beginner HTML</h1>
<!--This is your Paragraph. It displays Text. I'm just another Commnet which you'll learn about
soon.-->
<p>Hey there. I'm a Beginner in HTML. I'm learning the Basics just now but I will be moving on to
the more advanced stuff soon.</p>
</body>
</head>
</html>[/CODE]
Your Browser-Tab should look like this now:
Now that wasn't so hard, was it? So if your Browser-Tab is displaying the File Name instead of just the Name of the Site/Webpage then make sure you've added a <title> Tag.
Now, let's move onto Comments. Comments are just lines of Code that document what your Code does. Say that there is a piece of Code that might be hard for others to understand. You document that Code by adding Comments to it.
Let's edit the current Comments in our Code to document what each part is:
[CODE lang="html" title="tutorial.html" highlight="3, 7, 9"]<!DOCTYPE html>
<html>
<!--The Title of my Website which will be displayed in the Browser-Tab-->
<title>My HTML Webpage</title>
<head>
<body>
<!--The Heading for my Website-->
<h1>Beginner HTML</h1>
<!--The Text that tells the User that I'm a HTML Beginner.-->
<p>Hey there. I'm a Beginner in HTML. I'm learning the Basics just now but I will be moving on to
the more advanced stuff soon.</p>
</body>
</head>
</html>[/CODE]
Remember that you should always Document your Code with Comments. But do not over-do it with the Comments by adding a Comment for every single Line. This is unecessary.
Note: Comments are only used for Documenting your Code. They do not display in your actual Program/Website. The Computer will skip them and will move onto the next Line after the Comment.
Note2: There are different Types of Comments. One being '//' and another being '/**/'. These two are the common Types of Comments in Programming Languages. Some Languages do use a different type of Commenting Symbol though such as HTML and Lua.
Note3: If you happen to be away from your Project for awhile then use Comments before you leave it. Once you come back to the Project, you'll know where you left off from.
Now let's move onto the <meta> Tag. The <meta> Tag is used to display Information about your Webpage. These include things like setting a Description for your Site or what Character-Encoding it uses.
I suggest reading up more on <meta> after reading this Tutorial, here: https://www.w3schools.com/tags/tag_meta.asp
Let's look at two things the <meta> Tag can be used for. Write these two Lines of Code into your File:
[CODE lang="html" title="tutorial.html" highlight="6, 8"]<!DOCTYPE html>
<html>
<!--The Title of my Website which will be displayed in the Browser-Tab-->
<title>My HTML Webpage</title>
<!--Gives a Description to your Site when it's being ranked by Search-Engines.-->
<meta name="description" content="My Website.">
<!--Defines what Character-Encoding for the Site is being used.-->
<meta charset="UTF-8">
<head>
<body>
<!--The Heading for my Website-->
<h1>Beginner HTML</h1>
<!--The Text that tells the User that I'm a HTML Beginner.-->
<p>Hey there. I'm a Beginner in HTML. I'm learning the Basics just now but I will be moving on to
the more advanced stuff soon.</p>
</body>
</head>
</html>[/CODE]
So looking at the code above. We can see that we've set a Description for our Site that will be displayed when it's being Ranked by Search-Engines(E.g. Google, Bing, Yahoo!). We can also see that we've set UTF-8 as our Character-Encoding(This means that we're using Unicode for our Site. Unicode is a more widely recognised Format so it's best to use it).
Now that you've followed through this Tutorial, you should now know how to use Comments, the <title> Tag and <meta> Tag. Remember to use them in all of your Sites as they're there for a reason(Especially the <title> Tag).
So in this Tutorial, I'll be covering what Comments are, the Title that will be displayed in your Browser Tab and the <meta> Tag.
At the end of the last Tutorial, your Code should have looked like this:
[CODE lang="html" title="tutorial.html"]<!DOCTYPE html>
<html>
<head>
<body>
<!--This is your Heading. Just so you know. I'm a Comment. You'll learn about me later.-->
<h1>Beginner HTML</h1>
<!--This is your Paragraph. It displays Text. I'm just another Commnet which you'll learn about
soon.-->
<p>Hey there. I'm a Beginner in HTML. I'm learning the Basics just now but I will be moving on to
the more advanced stuff soon.</p>
</body>
</head>
</html>[/CODE]
If it doesn't then copy and paste the Code above into a File by the name of: 'tutorial.html' or 'tutorial.htm'
So we'll begin with the most simplest Tag, which is <title>
The <title> Tag is a Tag that will display the Name of your Site/Webpage in the User's Browser-Tab. If you don't have a <title> Tag then the Browser-Tab will just display the File Name of your .html/.htm File.
To add a <title> Tag, write the new Line of Code displayed in the following Block inside your <head> Tag:
[CODE lang="html" title="tutorial.html" highlight="3"]<!DOCTYPE html>
<html>
<title>My HTML Webpage</title>
<head>
<body>
<!--This is your Heading. Just so you know. I'm a Comment. You'll learn about me later.-->
<h1>Beginner HTML</h1>
<!--This is your Paragraph. It displays Text. I'm just another Commnet which you'll learn about
soon.-->
<p>Hey there. I'm a Beginner in HTML. I'm learning the Basics just now but I will be moving on to
the more advanced stuff soon.</p>
</body>
</head>
</html>[/CODE]
Your Browser-Tab should look like this now:
Now that wasn't so hard, was it? So if your Browser-Tab is displaying the File Name instead of just the Name of the Site/Webpage then make sure you've added a <title> Tag.
Now, let's move onto Comments. Comments are just lines of Code that document what your Code does. Say that there is a piece of Code that might be hard for others to understand. You document that Code by adding Comments to it.
Let's edit the current Comments in our Code to document what each part is:
[CODE lang="html" title="tutorial.html" highlight="3, 7, 9"]<!DOCTYPE html>
<html>
<!--The Title of my Website which will be displayed in the Browser-Tab-->
<title>My HTML Webpage</title>
<head>
<body>
<!--The Heading for my Website-->
<h1>Beginner HTML</h1>
<!--The Text that tells the User that I'm a HTML Beginner.-->
<p>Hey there. I'm a Beginner in HTML. I'm learning the Basics just now but I will be moving on to
the more advanced stuff soon.</p>
</body>
</head>
</html>[/CODE]
Remember that you should always Document your Code with Comments. But do not over-do it with the Comments by adding a Comment for every single Line. This is unecessary.
Note: Comments are only used for Documenting your Code. They do not display in your actual Program/Website. The Computer will skip them and will move onto the next Line after the Comment.
Note2: There are different Types of Comments. One being '//' and another being '/**/'. These two are the common Types of Comments in Programming Languages. Some Languages do use a different type of Commenting Symbol though such as HTML and Lua.
Note3: If you happen to be away from your Project for awhile then use Comments before you leave it. Once you come back to the Project, you'll know where you left off from.
Now let's move onto the <meta> Tag. The <meta> Tag is used to display Information about your Webpage. These include things like setting a Description for your Site or what Character-Encoding it uses.
I suggest reading up more on <meta> after reading this Tutorial, here: https://www.w3schools.com/tags/tag_meta.asp
Let's look at two things the <meta> Tag can be used for. Write these two Lines of Code into your File:
[CODE lang="html" title="tutorial.html" highlight="6, 8"]<!DOCTYPE html>
<html>
<!--The Title of my Website which will be displayed in the Browser-Tab-->
<title>My HTML Webpage</title>
<!--Gives a Description to your Site when it's being ranked by Search-Engines.-->
<meta name="description" content="My Website.">
<!--Defines what Character-Encoding for the Site is being used.-->
<meta charset="UTF-8">
<head>
<body>
<!--The Heading for my Website-->
<h1>Beginner HTML</h1>
<!--The Text that tells the User that I'm a HTML Beginner.-->
<p>Hey there. I'm a Beginner in HTML. I'm learning the Basics just now but I will be moving on to
the more advanced stuff soon.</p>
</body>
</head>
</html>[/CODE]
So looking at the code above. We can see that we've set a Description for our Site that will be displayed when it's being Ranked by Search-Engines(E.g. Google, Bing, Yahoo!). We can also see that we've set UTF-8 as our Character-Encoding(This means that we're using Unicode for our Site. Unicode is a more widely recognised Format so it's best to use it).
Now that you've followed through this Tutorial, you should now know how to use Comments, the <title> Tag and <meta> Tag. Remember to use them in all of your Sites as they're there for a reason(Especially the <title> Tag).
