What is HTML? - Creating a Basic Webpage

Wednesday, April 13, 2011

What is HTML? - Creating a Basic Webpage

Posted on 4:00 AM by Ram Sidh

This article is the second part of a potential series of articles known as: "What is HTML?" and if you haven't read the first part, this article will be of no use to you. If you wish to proceed to the First Part of this website designing series, go to this link: http://somniumtuts.blogspot.com/2011/04/what-is-html-basics-guide.html

We left from the First Part about how to mentally structure your page and creating a few elements of the HTML coding. Now, in this article, we shall proceed with much more information on how to code and write HTML for your developing websites. In the first part of this series, I discussed about how to get good and FREE source code editors for writing and editing HTML codes, and a few elements of the HTML code, and how to write them, plus a few normal examples.

Now here, in this article, we will discuss about a few more elements and special attributes assigned to them, and also, how to add an icon to your developing website.

We left behind the First Part of this series with a few tags, namely: <html>, <head> & <title> tags. Now, we shall discuss about the <body></body> tags, that contain all the other content, text, graphics, videos, images etc. within it! You can also change the background color of the website by adding a simple attribute to the <body> tag element. Attributes are simply extra codes assigned to special parts of an element, or tags, that change the appearance, function etc.

In order to change the background color of the website, we shall use a little bit of CSS or Cascading Style Sheets to do this, and is the preferred way of changing the background color. It is simple to set the BG color, and here is an example of the code on how to do it, updating the code we began with from the First Part of this continuing series:

<html>

<head>

FXDepot Productions|The best place to learn computer stuff...

</head>

</body>

</html>

Here is how the above mentioned code will look in a web browser:

The above code in a web browser.

As you can see in the above code, we have added the attribute to the <body> opening tag, telling the web browser to apply the specific background color command to the entire body of the website. The "style" is the attribute attached to the element, followed by an equal sign, the command of "background-color:#1BCCE0;" I will explain the syntax of this code later on, and how to write it. The alphanumeric code you see followed by the hash sign is the hexidecimal code of the particular color I have chosen. You can also write the name of the colors, like: red, green, black, white, but more intense colors, including shades or lighter colors, cannot be done, so the hexidecimal number of the color must be inserted. It is impossible to remember all the alphanumeric codes of all the colors, so you can go to http://www.colorpicker.com/, where you can just select the color and its code will appear immediately above!

Now we will talk about how to insert icons for your website. First, you must create an icon for yourself. Doing it isn't that hard, and you can use Photoshop or any other good image editor to create an icon. But there are certain restrictions as to how you create your image, and the image can either be only of the dimensions 16x16 or 32x32. The color mode should be in RGB, and the color bit should be 16 bit or 32 bit, respectively. If you are making your image in the dimensions of 16x16, then you must use 16 bit colors. Likewise if you're making it in the dimensions of 32x32.

So after you have created you're image, save it with the extension of ".png". Then you have to host it online in any FREE image hosting service. I would recommend using Image Shack for hosting your images online. Here is the link to it: http://imageshack.us/

Once you've uploaded your image in your account, you'll be given a few links to images, you must copy and paste the specific "Direct Link" to any Word document and keep it safe. Once you've done this, you must begin writing the code. An explanation of this code will be below it, but a more specific and intense explanation will only be in the following article of this series.

<html>
<head>
<title>
FXDepot Productions|The best place to learn computer stuff...
</title>
<link rel="icon"
 type="image/png"
 href="The Direct Link You Got!">
</head>
<body style="background-color:#1BCCE0;">
</body>
</html>

As you can see in the code above, the icon code is inserted in the <head> tags, like I discussed in the First Part of this series, and is inserted using the <link> tag. If you notice the code carefully, you can see that the <link> tag doesn't have any closing tags like: </link>. This is one of the exceptions of from the rule, and many other elements follow this same style. For example the <hr> tag, is used to create a horizontal line across the page to divide two sections of text, graphics, images etc. The <hr> tag doesn't have any closing tags. The tag is used to create link breaks, here is a simple code of involving all the items discussed above:

<html>
<head>
<title>
FXDepot Productions|The best place to learn computer stuff...
</title>
<link rel="icon"
 type="image/png"
 href="The Direct Link you Got">
</head>
<body style="background-color:#1BCCE0;">
I love eating pizzas because they are so tasty and are healthy!
<hr>
 I hate eating pizzas because they are disgusting and are not healthy!
</body>
</html>

As you can see, the tag is for the starting of a new paragraph, and has a closing tag: . As you can see I've inserted the tag which creates line breaks for sentences and also the <hr> tag, which creates a dividing horizontal line across the webpage.

The <link> tag is used to insert the icon. Within the <link> element, we have assigned three attributes, namely: rel, type & href. I will not explain the "ref" attribute now. The "type" attribute specifies the type of extension the image carries, for instance ".jpg", or ".png" or ".gif". In this case we have an image of the particular extension: ".png".

The "href" attribute is the URL or the link to the image that you wish to be inserted as an icon. In this attribute, you have to replace "The Direct Link you Got!" with the direct link you received from your image hosting service for the picture you wish to be inserted as an icon in your website.

So, I hope this article gave you a lot of information on HTML coding, and keep visiting this blog for the other parts of this continuing series: "What is HTML?"

Please give us some feedback by submitting comments from below, so we can alter our way of writing these articles to suit the common audience. Thank you!