Full Online HTML Tutorial – Part 2

Full Online HTML Tutorial – Part 2
Namecheap.com
(Last Updated On: August 9, 2017)

Full Online HTML Tutorial – Part 2 is the continuation of the part 1

Start reading from Part 1 

The Ordered List uses numbering by default, what happens if somebody prefer it in alphabet or in roman figure, he just needs to change the type and that is what I will show you next, see it this way…

If you look closely at the diagram above you will see that there are two notepad merged together to appear as one, the one on the left side is an ordered list with a property added to it which is make will make the list appear in alphabet on the right side is the same list but with roman figure ordered type, when you try these two other types of ordered list the result will be different, let see…

The two results were displayed side by side above, you might also use Block letters instead of the small letters used, like this type=A and type=I, these will give you Block letter result in the order of list. There are so many other thing ways you can achieve the same result with ordered list, I implore you to try and read more about ordered list.

Let us flip the subject to the other side; I am referring to Unordered List, unordered list is the other type of List, it arrange its items with bullet, unlike ordered list that uses numbering, alphabet and roman figure… Unordered list use bullets, it has its own varieties of bullet to like disc, circle, square … It is very similar to the one we’ve seen above, let us explore it.

That is it, a list of cities in United States, when you see it on the browser; those cities will not appear in order like we did above but in bullet… Let us see it onthe browser…

The Unordered List uses disc bullet by default, you can also change the bullet style to square or circle, all you need do is to change the type and that is what I will show you next screenshot…

Looking closely at the diagram above you will see that there are two Notepad merged together to appear as one, the one on the left side displays an unordered list with a circle property added to it which is make will make the list style appear in circle on the right side is the same list but with a square unordered list style, when you try these two styles of unordered list the result will be different, let see them on browser…

The two results appear side by side above, without being told, you already know that disc is the default bullet style… Let us explore it see the next topic which is the use of Images, graphic in HTML…

Yeah, here we are.

The use of images on our web pages is of paramount importance, it is vulnerable to visitor’s acceptance of what we are trying to portray online. It also dominate our branding online like it’s what the logo is all about, staff pictures, management team and so on…

In this section of the training we will first of all examine the different format of images that are valid for our web pages, they are:

JPEG: Joint Photographic Expert Group .jpg

PNG: Portable Network Graphic .png

GIF: Graphical Interchange Format .gif

These are the different format of images with their extension file names opposite them, there are more about them I task you to read more if you care to know, now I want to make a demonstration of the way we can display an image on our web page this way…

You can see the tag that gets the image on the browser, below is the image appearing on the browser. Let but us see the making of that tag… the img means image, while src means source, the images in quote is the sub directory where we save the image while the forward slash makes it a directory then the name of the image leader dot the extension file name .jpg See it below…

At this junction, we ought to have known that <img src=” “> is constant, we only need to specify the sub directory where the image is, the name of the image and finally the extension file name of the image which could be .jpg, .png or .gif – Finally, let us see how we can shrink the appearance of the image on the browser. There would be time when you may just feel like reduce the width and height of the image on the browser maybe when the size seems to consume a bigger size on the browser, this is what we do…

That is it; I added two properties, one to reduce the width and the other to reduce the height. One thing that you’ve to keep at the back of your mind is that you must reduce the two of them at the same proportion. Let see how it looks on the browser.

That is the result…

 

Let us look at Hyperlinks. Great topic, you will never be able to navigate from one web page to the other if you don’t have hyperlinks on your website, the good thing about it is that it can come in different look, you can use text, anchor, images, graphics in form of buttons etc… there are some other form of it like hot spot and so on.

We don’t intend to go far here with hyperlinks, we just want to keep it at text, you will get to learn more about it in some of our extended training or come across them yourself in books and manuals. Another prominent feature of hyperlink is that once you place your cursor/mouse on any of them, it will change to a hand icon which tells you that it is a hyperlink, to create a hyperlink now we need at least two web pages and since we have just one, we need to create another one, I’ll create another one and save it as about-us.html here we go…

This is the Notepad of a new web page that we save as about-us.html, though many of the tags we have in the other page index.html are also in this one about-us.html but they are not still the same, like the background has changed and so many other tags, I don’t want to go deeply into it, find out for yourself what has changed. Now I am going to add hyperlinks to the two pages, but there is a method to achieving that, firstly we are going to identify the pages involved, though it’s two in this case, in so many cases it will be more than two.

All I want you to know from here is once you’re able to use hyperlink in two web pages scenario, you are not far from it in more than two web pages scenario… I will put a link from about-us.html to index.html and another one from index.html to about-us.html, it could a little complex for you than you expect, but if you’re smart you will get it as fast as possible and the reverse is the case, ask the instructor for direction, here are the two Notepads demonstrating the navigation.

The upper one is the index.html Notepad while the lower one is the about-us.html if you do this in the two Notepads you will get this on the two browsers…

You can learn more about links from your instructor or from books, that is where we’re stopping on hyperlinks.

Let us look at Table next, many an author must have preached to you how never to use table in website design, I was on that wrong path too for many years before I repented and never will do it that way anymore, I don’t mean the use of table in website design is now redundant, all I’m saying is that it has its own area of calling.

Table for the best part was meant to be for data grid not page grid but most people that has used it until now used it for page grid, you may not understand this grid thing but I can’t help either in this manual until you attend the training or ask from any of our instructors, better still someone who has gone through it… in this course I want to show you some of the tags that are responsible for creating table in our quest to keep it simple and you will be able to use it for data grid and not page grid.

We will continue with our about-us.html page, lets fire it up from its slumber, here is mine…

I have decided to place the table tag under the image on the about-us.html page. Now you can see the tags responsible for creating table, first is the <table> that opens a table and it’s close tag </table>, I choose to create two rows which were initiated with the <tr> tags, tr means table row and inside each table row pair are two cells defined with <td> tags, td means table data, it’s the tag that holds data in the whole table framework.  With all these tags embedded within the table open and close tags, a table has been created. But let us first of all look at what we have created…

Now you can see the result, it is so funny that your expectation was beyond this, or maybe you will begin to feel like something is missing, No – what you wrote is what you get. The truth is that most of the table we’ve seen are far larger than this and it is not as if ours too can’t be bigger we just need to add some properties so that we can achieve what we wanna achieve.

Firstly, the table has no size at all, if not for the data a, b, c and d inside it, it would have been relatively invisible, but what I’m going to be doing from now is to add all sorts of properties to enhance its look. As I’ll fire up my Notepad now, I will add sizes to the table and break the size down into the rows (<tr>) and the cells (<td>). Beyond the size, I’ll also like to add some properties like valign, align, bgcolor, colspan and I will explain all these properties later… Let us see the Notepad.

As you can see, a lot has been added to the table to enlarge as well as to demonstrate some properties in it, from the width and height that changes its size, the align that position the entire table in the center, valign that vertically align the content in the entire row to the top instead of its default middle, also is the background color that uses hexadecimal codes and lastly is this powerful property that merge two cells together into one – colspan, that just two cells were merged does not mean it can only merge two cells together, it just depends on what you want for instance, without being told you can see that we can also merge 4 cells together, we only need to understand how it’s being done. Now let us see the result…

You can see the different now, there are more to table than we’ve seen but you need to learn more on your own so this is where we’re stopping on table.

 

There are no common ways you can engage users on your website than the use of forms, forms pose a great advantage for website visitors to interact with the websites, and it makes it possible for the website owners to collect data with the website from visitors easily and faster. Here is the aspect of our tutorial that deals with forms; I am going to take you through the process so that you can do it.

Before your mouth started watering, I want you to know that our form with mere HTML cannot achieve anything beyond the visuals so that you don’t mount your expectation so high to the point that you begin to expect feedback after having the form on your website. You would be able to do that and even beyond if you can integrate a middleware service.

Form is made up of a number of elements; those elements enables you to accept different forms of data they are text field, password field, radio button, checkbox, drop down menu, file field, text area and buttons.

Let us see how we can go about it… I want us to open a new Notepad and arrange the basic tags in its hierarchy like this…

Yeah! That is the entire HTML format with the form tag integrated into the larger red box, in the box are the form tag and some elements in it, those element serve one purpose or the order, I’ve decided not to explain their purposes because they are not going to be relevant until you need to undergo training on Middleware or server-side scripting.

Let’s cover the one that concerns HTML, in the larger box is also a closed form tag, all the tag must be within the open and closed tag. In the smaller tag is a tag which represents a form element call Text Field, It looks like a rectangular box that can be used in collecting txt related data like names, addresses, phone numbers, emails etc. so whenever we need to accept data of any of those ones, we use text field. Let us see it on the browser…

You can see it on the browser, its good in look. As I said whenever you need to accept other data like email, phone, surname etc, you will use the same tag, the only thing that will be different is the label like first name and the name value in the tag, and every other thing is constant.

Let us see another tag; this is a password field, like many of those login systems where you need to produce your password before you can access the members area, the field where you type your password always have its data encrypted. That is what we are doing right now a password field, watch it…

That is the password field, let us see some other ones like the radio button and the checkbox button, the two different buttons performs similar functions except that one was built with the capacity to accept more than one options while the other one accept only one option out of many, let’s see them…

The radio button is a selfish button that does not allow its others to be selected once you’ve selected it, the checkbox on the other hand is allows as many selection as possible.

Another kind of option element is a drop down menu, drop down or menu list is one interesting element that uses two tags to achieve its purpose, and it is mostly used to create options for Country and State. I will create this element to list some states in Nigeria, like this…

After adding the set of tags in the red box above, save it and refresh your browser, you can also add more options it’s all left o you and this is what you will see…

That is it, I love it the way it is now

Let us now look at text area, it is the form element that you can use to accept comment from visitors, it is usually small with height unlike the text field. I am going to use the text area to create a comment box for this web page, like this…

You can see the new element in a red rectangular box above; let us see the result on the browser…

That is text area with some words inside it, now let us add the final element which is the submit button to the form, it is the button with which one can submit the data in the form at a click, here we go…

That is the code view and the tag for the button in a red box, see the browser…

We’ve come to the end of the form creation for our web page, there is one more thing that I feel like adding to it, you can observe from the screen shots that those form element are not properly aligned the way they should be, what I want to do now is to use table to align them properly so that they can make a professional sense… here is it in table format..

That is the table in the form tag; if you look closely you will see other table tags like tr, td

This is where am going to stop on HTML,

Full Online HTML Tutorial – Part 2 is the continuation of the part 1

Start reading from Part 1 

Namecheap.com

Related posts

Leave a Reply

error: Naijatechzone.com !!