Learning how to write Html codes should not be difficult if you approach it using the right learning strategy.
In this post, we are going to use the easiest approach possible to help you become html ninja in a short possible time.
Learning Html code can be narrowed down to mean learning html tags(elements) and attributes.
If you followed my first post on Web development, you should be able to identify html tags or elements by now.
Whenever you see something like this <p> or <body> , it is called html tag or element. Tags are used to give html contents its meaning or structure.
What you should focus on while learning about a tag is the meaning it gives to the content it surrounds.
When you surround a word or sentence with <p> tag like this <p> my paragraph </p>, you should know that it is a paragraph.
Html Tags or Elements
Let us take a little more look at tags. We have two types of tags container tags and empty tags.
1. Container tags
These are tags that have an opening and closing tag. An example is the body tag (<body>). The opening tag is <body> and the closing tag is </body>.
The majority of the tags you will be using are mostly container tags. Take note of the forward-slash (/) in the closing tag </body>.
2. Empty tags
These tags have no closing tags. They stand alone and uses attributes to change the default functionality of the tag. Examples are the line breaking tag <br>, the meta tag <meta> and the image tag <img>.
Html Attributes
Html attributes are used inside an opening tag or an empty tag to change the default behavior of the tag.
Attributes are in value/pairs. Example class =”myclassname”.
Example
<p class=”paragraph” > my paragraph </p>
<img src=”dog.jpg” alt = “image of dog” >
In the example above; the class, src, and alt you see inside the tags are called attributes and they all have a role they play for the tag they are used on.
We will be discussing more about attributes and their uses as we progress.
Having explained what a tag and attribute mean. We will now look into creating your first Web page .
Steps to Creating Your First Website
1. Create a Prototype
Before you start writing html code for your new website, the first thing you should do is to brainstorm on how you want your website to look. You can even draw it out as a prototype if you can.
This will help you to know where each items on your website will be placed at any time. Remember to make your design simple and user friendly.
2. Create a Project Folder
Once you have created the mental picture or prototype of your new website or Web App, the next step is to create a folder or directory for your new website.
You can create the new folder anywhere convenient and secure for you on your computer and give it your preferred name.
3. Create the index.html file
After you might have created the folder. Then you need to load the Notepad on your computer or any IDE you have and create a new empty Html file “index.html” and save it inside the folder you created. Still leaving your text editor open.
If you find any of the steps difficult, indicate on the comment box.
The index.html file is very important. This is because it is what your website will load when your website domain name is called online.
We will talk more about this when we will be discussing hosting of our website.
4. Write Your Code
It is time to write your basic html code. They are those tags that determine the basic structure of your html page.
Inside the empty index.html file you created earlier you will start typing your basic html code.
The first thing to type in is your <! DOCTYPE html > tag, this shows that you are writing html5 which is the latest version of html. Remember, it has no closing tag, meaning it is an empty tag.
After that, you will have to open and close your html tag like this <html></html>. This tag shows that every thing you type inside it or in-between it are all html codes. So whatever we will be adding into this page now must be inside the html tag.
Now, in-between the open and closing html tag, add the open and close <head> tag. So you will now have something like this :
<!DOCTYPE html>
<html>
<head>
</head>
</html>
Note, inside the head tag is where you add codes which are for browser or search engine consumption. We will discuss that later.
Immediately after the head tag follows the body tag. The body tag has an opening and closing tag like this <body></body>. So, we now have:
<! DOCTYPE html>
<html>
<head>
<! – – things typed in here are for browser consumption – – >
</head>
<body>
<! – – things typed in here are for users consumption – – >
</body>
</html>
Note, in-between the body tag is where you type things that are for the user consumption. Things typed here will appear on your browser viewport.
The html tags we just wrote are the building blocks of every html file.
Html Comments
You will notice I used this tag <! — – – > above to write some explanations inside the head and body tags.
The above tag is the Html comment tag. Anything written inside it will not be used by the browser, it is for developers consumption.
Text in between this tag will not be seen on the browser, but will be available when you open the file in your notepad.
Html Head tags
Remember that tags added in between the head tag are used to talk to the browser and the search engines. Examples of such tags are the meta tags, title tags, link tags, etc.
We will discuss the title tag and the meta tags.
Html title tag
The title tag is used to specify the title of the document. This normal appears on your browser tab. So we will now have..
<! DOCTYPE html>
<html>
<head>
<title> the page title </title>
</head>
<body>
<! – – things typed in here are for users consumption – – >
</body>
</html>
Meta tag
Meta tags are used to pass metadata information to the document. The data is passed into the tag in value/pair method. Examples
<meta name=”description” content=”first Web page tutorials”>
The description value of the above metadata is used to tell search engines the excerpt to display when your page is index in a search list.
<meta name=”keywords” content=”HTML,CSS,XML,JavaScript”>
While the keyword data is used to tell the browser the page keywords.
<meta name=”author” content=”Obinna Jude “>
Also, the author value is used to specify the name of the document author.
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
Then the viewport value makes your content responsive to the browser viewport.
As I have earlier said, html is all about tags and attributes. In our next post, we will see more tags we can use in-between our body and head tag.
What we now have after adding the meta tag is..
<! DOCTYPE html>
<html>
<head>
<title> the page title </title>
<meta name=”description” content=”first Web page tutorials”>
<meta name=”keywords” content=”HTML,CSS,XML,JavaScript”>
<meta name=”author” content=”Obinna Jude “>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
</head>
<body>
<! – – things typed in here are for users consumption – – >
</body>
</html>
Remember, to ask your questions on the comment box.
[…] following my post series on web development, you will understand that we made mention in our last post that content placed in-between the body tag are the ones that are displayed on the browser […]
[…] shown below inside the text editor. If the HTML tags you see below are confusing to you, check our post on HTML tags. You can also see that we introduced the lang attribute to the html opening tag <html lang = […]