HTML Coding – 3

Now that we know how to create text and display it on the screen. Let us see how to create visual effects and colors to make sure that we have the perfect designed website.

You can click here to read the previous post about HTML, which was about adding, editing and text creation basics.

BG-COLOR FOR BODY

Tag: BODY Attribute: BGCOLOR

It means that BGCOLOR is not a tag, but a part of the tag used for further changes in it. It is called an attribute.

BGCOLOR allows to change background color of the html page.

Lets say we want background to be in blue color. So we can write:


This would allow HTML web page to understand that the user would like the background of the body to be replaced with BLUE color instead of the default, which is white.

After loading this page, it results to:

If you want the background to be in silver, you can type:

This coding results in  page with of course, grayish backdrop.

In this way, you can change it to any basic color as well as some additional tones like aqua, olive and maroon also work.

FONT TAG

These colors can also be applied to font also.

To do it:

Simply, put a font tag and the color attribute of it. After them, write the font name with proper coding characters.

But this, we also come along two news things:

TAG: FONT
ATTRIBUTE: COLOR

This font color tag would give us the following results:

We can change it to any other color, some examples of further results are shown below

Try creating your own patterns of background and font color.

  • Some suggested picks are:
    Aqua Text over Black Background.
  • Red Text over White Background.
  • Gold Text over Grey Background.
  • Blue Text over Yellow Background.

But, don’t care too much about these, you can really create your own type of customization.

I have my favorite page for HTML colors list, click here to read a list of colors that you can use in HTML.

In the text step, we’d look forward to make background more attractive and new tags for the FONT option.

Now we have learnt about BGCOLOR and FONT. Let us now try to do more customization with FONT by using several important attributes. We will also see how to place comments in you HTML file to make it easier for reader as well as for you in a way.

We can use several attributes together and you do no need to create a new tag for each attribute. Such as if you want font size to be 4 and its color to be white, then you do not write the tag separately for each attribute:

Instead you can apply both the attributes in a same font tag like:

This decreases time consumed and makes the file more easy to read and understand through.

SIZE ATTRIBUTE

Its value is a number and is used to determine a certain size for your font. This means that font size 1 is the largest and font size 7 is the smallest available fonts.

Let us try to do it practically in the following example.

I have coded and HTML web page and used font tag with the size attribute 2 to show how small the text looks like:

Notice how I wrote size together with the color attribute and they are changed to color red in order to make the user more comfortable by making it a permanent color for all tag attributes. If you also want this same coding and editing program, click here to visit the downloads page of my site and get it for free.

When you will run the above program it would result in a webpage with some small sized text like the following:

In the same way we can make the text larger in order to create headings. In order to do so, just replace that ‘2’ value of size with ‘6’ or ‘7’ so that the text is displayed in its largest form. I have used font size as 6 and coded the following program:

When you run the updated program, as the size for the font is increased for two to six, the result would be as follows:

FACE ATTRIBUTE

Now we know how to change the font color and size. But what if we can actually change the style of the font? it would certainly be great to do so.

If you are familiar with MS Word and other text editing programs, you might already know that Calibri and Times New Roman are some popular font styles. In fact, the default font style in a web page is Times New Roman only.
Make sure not to be confused with style and face. Both are the same. For now on, we will use the word FACE instead of style in order not to be messed up again.

In order to change it to a assigned font, do the following code:

As per the code above it will change the font face under the tag into CALIBRI, which will result in the following web page:

Let us try to make the font more different. Lets try ELEPHANT font. Code the face as:

And obviously, this will make the font in the style of ELEPHANT.

SEARCHING FOR FONTS

Now in case if you want some fonts for your webpage or want to view some commonly used font faces, you can view it really quickly. To do that, follow the steps below:

  1. Search for NOTEPAD. (Go to Start -> Search Box -> Type ‘notepad’ -> Click on the icon:)
  2. Click on format tab and then click on font option from the sub menu.
  3. You will see a dialog box with a list of fonts that you can use. All you need to focus on is to the font name, do not a wrong face name, else it would result in an error and you will see the default font.

ADDING COMMENTS

Comment is a piece of code which is ignored by any web browser and is written between your actual coding. It is good to add comments into your HTML code, especially in complex documents, to indicate sections of a document, and any other notes to anyone looking at the code. Hence we can say that comments help you and others understand your code and increases code readability.

HTML comments are placed in between <!– … –> tags. So any content placed with-in <!– … –> tags will be treated as comment and will be completely ignored by the browser.

For example:

<!DOCTYPE html>
<html>
<head>  <!--Header Starts -->
<title>This is document title</title>
</head> <!--Header Ends -->
<body>
Document content goes here.
</body>
</html>

This coding

In the above coding, every sentence like Header starts and Header ends will not be printed in the browser screen. Instead only, ‘Document content goes here will be be printed’.
You can try this on your own too!

BTW, the comment code in the editor appears in green color, so that it is differentiated from the rest of the code we type along.

You can also, in the same way, add multi line comment too. Just extent the comment start and closing tags. For example:

<!DOCTYPE html>
<html>
<head>  <!--
This is a multi line comment
 -->
<title>This is document title</title>
</head> <!-- THIS is a single line comment -->
<body>
Document content goes here.
</body>
</html>

But none of the above makes a great difference. All there is, it that we are making the comments in a more organised and efficient manner. Also, both of the comment sections will be hidden in the browser window and can also be viewed if the source file is opened.

MORE:

Now that you have learnt it, go ahead and try some of your own coding. For assignment you can create the following:

  • Create a colorful page about anything you like to do. (100 – 150 words)
  • Write a review on this post. (Change background colors, use <br> tags, font colors etc.)
  • Use comment to make it easier for the reader to go through the document
  • Change and use various font styles for heading and paragraphs. The same can be done for lists.

Note: With <br> this tag you can leave lines and go to the next one. To read more about it, click here.

If you created one of the above web pages, congrats! You can share them along with me – send me using email at – muditjhawar[at]gmail[dot]com and get featured in the next post.

Subscribe to the blog (use the widget in the sidebar) to make sure you don’t miss any post! Also, share along with your coding buddies!!

By best wishes are always with you! 🙂

Leave a Reply