Sunday, January 23, 2011

HTML

In Business technology the Internet has become the main source of communication and advertising. Therefore at some point of your business career you might have to develop a website/web page for your company. So I took the initiative to give you seven easy lessons in developing a website/web page using HTML codes.

Why Don't you try it out (Peggy Higginson said you can) and Let me know if my lessons were helpful. (DON'T FORGET TO COMMENT) Thank you.



What is HTML:
  • HTML is short for Hypertext Markup Language, which is a computer language used to develop websites. This Blog will teach you how to read, use and implement these codes to develop a small business websites for your company.

Why is HTML Important?
  • HTML coding has become the central language of building websites, if you are developing a website you need to have at least some sort of knowledge to be able to tell how the website is structured or put together. Without knowing the language it is impossible to understand each code and its functions and if there happens to be an error if you know the language its very easy to reverse it or see where the code error.
For example every site is constructed from some sort of coding and most likely HTML codes, If you don't believe me then try this....

Open any site that you'd like to see the HTML code"

    * TIP: If the picture is to small for you to view just simply click on the picture for a bigger view.*

Go to Tools and click on and then click on Developer's Tools

Then This sceen will pop up



This Screen will Pop up once you've clicked on Developer's Tools



Then click on Script as indicated in the picture below and you will be able to View all the HTML codes needed to make that page






What HTML codes can do on a Website?
  • Add font
  • change the colour of the font
  • Add bullet points
  • Add background
  • Add line breaks
  • Add images
  • Add links
  • Add Banner's
  • Add Tables
  • Add music
So here was a little background on HTML codes, what they are and why are  the important, Now that that's out of the way, lets get started on learning the basics!



Lesson #1- How to start a command

Html codes are actually commands that you tell your computer or website builder of how you want things to be. All commands are typed within triangular brackets < >. These are called tags. When you type something between these tags, it means you want to start a command. When you want to end a command you need to end the tags. To end a tag you type </command> . 

For Example if you want to Bold something you type <b> to bold it and </b> to end the bold command



Lesson#2 - How to insert text

Inserting text is easy but you have to remember tags that formats the font to how you please. Some important tags are
  • Bold                                                                        <b>TEXT HERE</b>
  • Italics                                                                      <i> TEXT HERE</i>
  • To underline                                                            <u>TEXT HERE</u>
  • Break the Line (it's like pressing Enter)                     <br> (no need to end it)
  • Start a new paragraph                                              <p>  (no need to end it)
  • Center Alignment                                                     <center>
You can change the size of your font by inserting this code

                                 <font size="1">type your text here</font>

In HTML the sizes range from 1 (very small) to 7 (very big). If you want that text bold as well and a size 3 your code should look like

                           <b><font size="3">type your text here</font></b>



Lesson# 3-  How to change font colour

  • For the most frequently used colours, you can use the name of the colour, e.g red, black, green, blue, gray, white. HTML uses American English spellings, so if you want to change the colour of you text, you need to type "color." If you want to colour the text grey, you need to type "grey." If you want to make a word red, you would type:

<font color="red"> text here </font>, which would appear as text here.

For more colours, you may need to use a hexadecimal code. This is the unique code given to each shade of colour. All colours have a combination of 6 numbers and letters that represents an exact shade. Some common codes are:
Bright red = FF0000
Purple = CC00CC
Pink = FF66FF
Light Blue = CCCCFF
Lime Green = 99FF99

To use the hexadecimal code, simply type: <font color="FF66FF">text here</font> This would make the text pink, like so text here




Lesson # 4- how to add bullets to your text

There are two types of bullets you can add, the traditional bullet points also known as "unordered lists" or 'ul' for short or number points also known as "ordered list" also known as 'ol'. Here is how you add them:

Bullet Points:
Bullet points are slightly more complicated. To start bullet points, you need to type <ul>.
If you want each bullet point to appear on a new line, you should type <li> before each one.
When you have finished all your bullet points, type </ul>

The code should look like this:

<ul>
<li>bullet one
<li>bullet two
<li>bullet three
</ul>
This is what would actually be displayed on your web page:
  • bullet one
  • bullet two
  • bullet three
Numbered Lists:
The code for number points or ordered list would look like this:

<ol>
<li>point one
<li>point two
<li>point three
</ol>
This is what would actually be displayed on your web page:
  1. point one
  2. point two
  3. point three



Lesson# 5- How to insert horizontal lines

If you want to divide the page, a useful command is the horizontal rule <hr>. The default rule goes all the way along the page and looks like this:






You can change several things to make it look different, such as its width, height, and the amount of shading it has.

Width can either be measured in pixels (a web page is normally about 600 pixels wide) or by typing the percentage of the screen you want the line to cover. To change the width you simply type <hr width="300"> or <hr width="50%">. A horizontal rule that is 300 pixels in length looks like this:


Size refers to how large the horizontal rule is. You change it in the same way as you alter the width. If you wanted to make a ten-pixel-wide line, you would type
<hr size=10> and it would look like this:

By default, horizontal rules have shading. You can create a line without any shading by typing <hr noshade> and it would look like a line similar to this:

You can combine as many variables as you'd like within the same tag. If you wanted to create a ten-pixel-wide rule that was 300 pixels long and had no shading, you would type <hr noshade width="300" size="10">. It would appear similar to the line below:




Lesson#6  - How to Add pictures

Once you know where your images are saved, you are ready to write the code. The code to insert a picture is made up of three things:
  1. <img src = " (This command tells the computer to look for an image.)
  2. http://www.abcdefg.com/mypicture.gif (This tells the computer where to find your picture.)
  3. "> closes the tag
When you put the code together it looks like this:
<img src="http://www.abcdefg.com/mypicture.gif">

*TIPS*

If there is an image you want to take from a website this is how you can take it and put it on your website

You right click on the Image like this

Then click properities and copy paste this Address and add it in

Then its as simple as adding that address to the code.Therefore the code for the dice picture is::

<img src = "http://www.zwani.com/graphics/funny_pictures/images/88funny-pictures128.jpg">

You can also improve the look of the image you added to your web page by adding in a border tag. Using this tag, you can choose what thickness of border (if any) you'd like around your image. Some basic borders are:
  • Border="0" no border
  • Border="1" thin border
  • Border="2" thicker border

You simply type in border="2" inside the tag after you have typed the location of your image, like so:
<img src="http://www.abcdefg.com/mypicture.gif" border="2">

Positioning the image:If you want your image to be positioned on the page. The most frequently used positions for images are left, right and center. To make an image centered, type this before the image tag:
<div align="center">




  
Lesson#7- how to change the background colour

You can change the background of the page much like the way  font colour, except it affects the whole page. To change your background colour, simply type this near the top of your page:

<body bgcolor="#FFFFFF"> or <body bgcolor="white">

You do not need to end this tag, since it affects the whole page. It is good practice to put </body> at the bottom of your page to keep things tidy, though.

Background Images:You can also make an image display as a background image instead of just having a solid color. This works well with simple, light-colored images. It livens up the page, yet you can still read the text clearly. To display an image as the background, you need to type:

<body background="http://www.abcdefg.com/mypicture.gif">



Just using these seven lessons you can easily setup a website based on HTML codes.
Once you praticed and applied these techniques you can advance your skills by looking at more tutorials and lessons posted online a few good ones are.







Posted by at 10 comments:
Subscribe to: Comments (Atom)