Full Online HTML Tutorial – Part 1

Full Online HTML Tutorial – Part 1
(Last Updated On: August 9, 2017)

Full Online HTML Tutorial – Part 1 Also has a part 2 which is the continuation of this part.

Continue Reading From Part 2

Introducing to HTML

HTML was developed by Tim Berners-Lee back in 1990. The HTML is initial of HyperText Markup Language.

It is use for creating electronic documents which are called pages, that are displayed on the Web. Each of the page contains a series of connections to other pages called hyperlinks. Each web-page you see on the Internet is written using a particular version of HTML code or another.

Intro to HTML Tutorial

On this post we’re going to look at how we can use various HTML tags to publish different content or different appearance of data on our web pages. All our practices in this post will not be focused on designing professional and contemporary web pages but to use different HTML tags the old-fashion way. This is what I call leveraging on old-school, the simpler or dummy approach to the Web as a prelude to the big picture – designing world standard websites.

The reason being that if you start small and you can see your accomplishments, it is easier to convinced that you can design the great websites than to start at the top where everything is most likely to be discouraging, things may just fall apart or your new career may just fall by the wayside due to its teething troubles.

The Prerequisite!

There are few tools you need to get started on your new found career (creating websites) and most of them are not far fetch, here are they in the list below:

  1. Directory: (a directory is what a layman call folder) you need a directory so as to be able to store your web pages and all other auxiliary files that you’ll be using in the course of designing websites i.e. images.
  2. Text Editor: is a program that allows you to write and edit plain markup language. You’ll use this to write markup content for web pages. A typical example is Notepad, which is freely bonded along with Windows operating system.
  3. Browser:  Once you’ve written markup language to create web page in the text editor, you can see how it looks in a web browser—that’s the application you use to view web sites.
  4. Knowledge: all the tools above are the external tools you need to get started, here come the last thing which has to be taught, understood and implemented over the time. I don’t expect you to have this at the moment, come along with me as I will be taking you step by step into how you do it.

The Practices: Step-by-Step

Step 1

Create a directory on your desktop and give it a desired name, I will call mine Web-Academy, like image below

Step 2

Fire open your Notepad, I believe you know how, if you don’t ask your instructor. It will look like image below

Step 3

I will be taking you through it from here; we are going to be seeing how to use different markup tags to publish different data or content on our web pages to communicate different information on the page. Firstly, let us see the hierarchy of a web page

The diagram above communicates the hierarchy of your web markup in the Notepad, it is the format you will always follow whenever you need to use Notepad to create a web page from ground up, though when we advanced into using CSS along with it we’ll be adding some markup stuffs to it in order to align with the web standard, but here is how I want to keep it simple now the old-fashion way.

As you can see the markup is made up of pairs of tag, meaning that for every open tag, there is a close tag though with very few exceptions, you can also see that the markup above has two sections; the head and the body and the two of them were enclosed within the html pair “<html> & </html>”, that is the way you will always write the hierarchy whenever you want to create a new page, then all the contents will now be interpreted with the different tags within the body tags. As you follow along you will be able to see how to define the different content within the web page, but let us save this one first and also preview on the browser to see how it will look like.

To save this, select File > Save As you will see in the image below

To save, type index.html in the File name input area at the lower part of the dialogue box you’re seeing above and don’t forget to select the directory (Folder) that you created earlier, mine was saved as WebAcademy, I don’t know what you called yours, it means that you’re saving into that directory as your root directory.

You might ask why we use index.html, why not omoba.html or about-us.html better still home.html. The reason being that as part of W3C regulations, there must always be one page saved as index.html, this will be the landing page for anyone who tries to access the website, among many web pages in the websites one web need will appear first from where others can be seen with the use of hyperlinks, it’s the first one people will always see whenever they log on to the website like this www.naijatechzone.com … the first web page you will see was saved as index.html – it’s the home page.

Like what you’re seeing above, once you hit Save, It will be saved inside your root directory and that is it… you will see stuff like an Internet Explorer icon in that folder if your default browser is IE or other ones depending on which is your default browse, and when you double-click on the icon you’re seeing in the directory the little markup you have in your Notepad will appear like this…

The title of the web page document is all you can see now on the browser, why? Because the entire body section of the web page is empty and that is where we are going to be declaring all the data we want to see on the web page… I also want you to know that we have a number of different tags, we shall be using different tags to interpret data… and the tag we use is what will determine how the data will appear and where it will appear.

The next thing is that I want to start writing some content on the body section so that we can see some stuff within the blank white area on the browser. I will start by changing the web page background color from its default color- white to another color say cyan,  to do that I will go back to the Notepad do this in the body tag <body bgcolor=cyan>, notice that I added bgcolor=cyan to the body tag. What I added is a property not a tag; I will discuss properties relationship with tags later. Like this…

You need to save it by simultaneously clicking Crtl + S on the keyboard; it means that you update the Notepad with the new markup added to it. When you refresh your browser by clicking on the refresh button on the browser… you will see this.

You can actually use any color you prefer i.e. red, blue, green, silver, and maroon, you can add those colors the way I added one because browsers have been developed to interpret colors that way but it is not standard, we are just trying it as I said earlier from ground up… there is a better way we add color to markup perhaps the semantically right way. Firstly, those colors are represented with Hexadecimal codes, they look like this #000000 – this one is black, #FF0000 – this is red, and so on. You will still get to know more of them later.

That is cyan as the page background. Next let us add heading to it…

The works of Heading on a web page is similar to what Headlines does to print Medias like Magazines or Daily Newspapers. We use heading on webpage to draw special attention of people to the content under it or on the page, when your website visitors landed on your webpage the heading they find on it will simply tell them what they are expected to find on the web page or the entire website. Beyond the attraction and brief interpretation of the content on the page, the use of heading also have some SEO advantages, it’s one of those things search engines want to see on your website before they can index your pages in their search engine database.

Let us open the same Notepad we’ve been using to add a heading on this web page…

Yes, that is what I added in red circle, you now need to save it by simultaneously clicking on the Ctrl + S on your keyboard which means you have updated the web page with the recent markup added to it… Open your browser and click on the Refresh button and you will see this. . .

That is exact way it will appear on the browser, it will appear in a bold, thick way like this, as I said it draws special attention of anybody who landed on this page. You may also want to know why we use h1, why not h2 or h22 and stuff like that… though we have other options like h2, h3, h4, h5 and h6. h1 is the biggest while h6 is the smallest, you can’t use any other size outside the 6 options we have above. When we advanced into using CSS alongside XHTML we’ll learn more about all these heading stuffs, this is what I want you to know now in the quest of keeping it simple and hassle free…

The header we added is somehow located on the left side of our web page, what if we want it on the right side or in the center, what we shall do in that case is add a property, so what is a property?

Property is two words markup with an equal sign in-between them that you insert in front of a tag name to further interpret how or where the content on the browser should appear and is comprises of an attribute and a value, the attribute can have as many values as possible but you can only use one at a time.

We have added one to the body tag before, now Let us add a property to the heading…

Yeah! That is how we add a property, now that you can see it, you have learned how to add property so that whenever I mention it again you will understand what I’m talking about… And this is what you will see if you have saved it and click on the Refresh button on the browser…

That is it, but center is not the only option as we have seen left align being the default we also have another option which is right… The options are Left, Right and Center. You can try those options on your own.

Let us take a look at another tag called Marquee, it makes it possible for you to scroll text or even images across the web page shown in the browser. Marquee as a tag has its own properties which I am going to show you later. We are going to add our marquee tag immediately after the heading tag this way…

Now that you have added marquee, you will see that the statement (your reliable website training school) will be scrolling across the web page like this… Though the next screen shot below is still but that statement will be scrolling across the web page if you don’t make mistake, just see this.

It works right?

Yes that is the marquee, unlike heading, the marquee has its own properties too, and the attributes are behavior, scrollamount and direction. The attributes and their values are behavior (values: scroll, slide and alternate), scrollamount (values: this can contain any value between 1 and 100, the smaller the number the slower and vice versa) and direction (values: up, down, right and left).

In the diagram below I have added all the three properties just to show you how to add the three, though most times you may just want to add only one or two, but if you can add three you will be able to add two or one. Look at this…

Mind you there is now standard order in which they must appear direction can come first and scrollamount too can come first or even last and you can even add just two properties if you like, good. Now let us see how it looks on the browser…

Observe all the changes yourself on the browser to see how it looks… That is what marquee looks like, the next tag we’re looking at now is Font, though font rarely have a place in our semantic world today, but let us see it still… The tag is font and it is not complete until we include its properties which are what tells the size, the colour and the type of font, here we go…

As you can see, I added the font tag with the properties. Take a look at it on the browser…

As you can see, you can achieve this on your own with little or no guide… Next we are looking at how we can create Bold, Italic and Underline text, they are pretty simple, I will add them all at once to save time… Here we go…

Let us take a look at how it is on the browser, don’t forget to save on the Notepad and Refresh it on the Browser…

That is it, Bold, Italics and Underline… Before we look at the next tag, you not like the way the three words appear side by side, the way out is to use a common tag called Line Break, it helps you to command the next tag after the application to the next line. I am going to use it to place Maiduguri, Ogbomoso and Nzukka on different lines, watch this…

As you can see with red line under each one of the break rule that tag will place Maiduguri, Ogbomoso and Nzukka on separate lines… Save it and preview on the Browser yourself, I can’t afford to show you so much to save time and energy, thank you for your understanding…

Next thing is to see how Paragraph works, it’s quite simple, and you only need enough content in your paragraph to see the effect especially if you are adding properties, let see it…

That is the Paragraph in action; I think you will love it if you apply property to make it align the way you want it especially using everybody’s delight on Microsoft word – Justify, but let us see the four common styles which are Left (Default), Right, Center and Justify

You can see that I used three paragraphs with three different styles; I decided not to use Left Align because that is the default and when you check it out on the Browser, this is what you see…

The three paragraphs in three different styles have been label, the first one is Center aligned, the second one is Right aligned while the third one is Justified, practice these different styles of paragraph to get yourself acquainted of what it is. Now let us look at List, list is used for itemizing, you can put items on a list, it is the tag you use anytime you need to put items on a list.

List can be in two major types namely Ordered List and Unordered List, Ordered List uses numbering, roman figures and alphabet to itemize its list items while Unordered List make use of bullets, let us see how ordered list is applied…

That is it, a list of cities in Nigeria, when you look at it in the browser, those cities will now be automatically arranged in numbering, that is Lagos will be number 1, Kano number 2 and so on… Let us see it on the browser…

Full Online HTML Tutorial – Part 1 Also has a part 2 which is the continuation of this part.

Continue Reading From Part 2

Related posts

Leave a Reply

Your email address will not be published. Required fields are marked *

error: Naijatechzone.com !!