The SourceCode

HTML

The Basics

HTML stands for Hyper Text Mark-up Language and is the code that nearly all web pages are written in. Despite having a complicated name the actual code is very simple. Before you can start learning HTML there is one main thing that you need to know.

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> . That is you add a / after the first <.

To begin a web page, you must use the tag that states that it is the beginning of a web page:

<HTML>

To end a web page, you must close this tag with </HTML>.

Web pages have two parts, the head and the body. In the head there are various tags that can be used to get better search engine rankings and tell the world who made the page, and other more complicated things that we will discuss in later lessons. To create the head of your web page, we type in this:

<HEAD>

This tag has to be closed with this at the end of the head portion of your page:

</HEAD>

Giving your page a title.

This is done with the <title> tag. This is used to place whatever text you want to appear in the title bar of your web page. Without it, your web page will be called "untitled", which isn't a very good title for your page. To change that, we type this between the <HEAD> and </HEAD> tags:

The body of your web page.

To begin the body of your page, where all your text and graphic will go, you use this tag:

<BODY>

That is followed by all your content that you want your visitors to see.

We close it at the end of the page with </BODY>

Web page content.

<b>a word</b> would make a word display in bold on your page. As the tags are ended then everything after a word will not be in bold.

There are a few exceptions that do not need to be ended but we will come to these later. The concept of tags is the hardest thing to grasp in HTML. Once you understand that every command needs to be inside

< these tags > then you are well on your way to mastering web pages.

The majority of web pages are made up of text. If you have ever used a keyboard then you know how to type text in HTML. To type something into your web page simply type what you want to show up. You only need to use tags if you want the text to do something special.

Some commonly used tags are:

<b> this bolds text </b> (you need to end this)

<br> inserts a line break (like pressing enter on a keyboard)

<p> This starts a new paragraph this is very useful for splitting up your text (you need to end this)

<i> This makes text in italics </i> (you need to end this)

<u> underlines text </u> (you need to end this)

Font Size:

You can also change the size of your font. In HTML the sizes range from 1 (very small) to 7 (very big).

To change the size of your font you need to type:

You must end your font tag or all text typed afterwards will be that size.

Now you know how to change text sizes and add special effects you are ready to progress onto more complicated HTML.

Once you are comfortable with using the simple tags such as bold and underline, you can move onto other things that can make your text more interesting. Here you will learn how to add bullet points, make numbered lists and insert a horizontal line.

Bullet Points

Bullet points are slightly more complicated. In HTML bullet points are called unordered lists or ul for short.

To start bullet points you need to type <ul>.

You want each bullet point to appear on a new line so you type <li> before it. This stands for list item. This tag must be closed at the end of each item in your list.

When you have finished all your bullet points type </ul>

The code would look like this:

<ul>

<li>bullet one</li>

<li>bullet two</li>

<li>bullet three</li>

</ul>

This is what would actually be displayed on your web page:

• bullet one

• bullet two

• bullet three

Numbered Lists

Creating a numbered list uses the same principle as creating bullet points except you use ordered list <ol> instead of <ul>. The code for an ordered list would look like this.

<ol>

<li>point one</li>

<li>point two</li>

<li>point three</li>

</ol>

This is what would actually be displayed on your web page:

1. point one

2. point two

3. point three

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.

Wherever you want to add a line to divide a page simply type <hr>. 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 to 800 pixels wide) or by typing the percentage of the screen you want it to cover.

To change the width you simply type <hr width=300> or <hr width=50%>.

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 10 pixel wide line you would type <hr size=10>

By default horizontal rules have shading. You can create a line without any shading by typing <hr noshade>.

You can combine as may variables as possible within the same tag. If you wanted to create a 300 pixel wide rule that was 10 pixels wide and had no shading you would type

It doesn't matter what order they are in as long as they are all within the < and > tags.

Changing font colors

You can change the color of your font very easily. For the most frequently used colors you can use their name. e.g red, black, green, blue, gray, white. HTML uses American English spellings, if you want to change the colour of something, you need to type color. If you want a Grey color you need to type Gray.

If you want to make a word red you would type:

For more specific colors you may need to use a hexadecimal code. This is the unique code given to each shade of color. All colors have a combination of 6 numbers and letters that represent 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.)

If you want to change the font color and size you can do this in the same tag eg:

This would make the text small and red.

Keep in mind that not all colors look good on all computers. People using a Mac may see a color you did not intend. The best thing to do is to restrict your color use to the approved websafe color list.

Background color

If you want to make your page more interesting you can change the background of the page. Background color works in much the same way as font color except it affects the whole page. Normally backgrounds are white (FFFFFF) but you can use any color you wish. To change your background color, simply type this near the top of your page. This is part of your <BODY> tag.

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

Images as backgrounds

Placing this code as your <BODY> tag will tile an image as the background of your entire page:

Alternatively, if you want a solid color and the image background only in a certain area, you need to use a table. The simplest table would be to type this:

followed by

<tr>

<td>Type your text here as normal and then finish your table by typing the two lines below.</td>

</tr>

</table>

Don't forget to include the last two lines, or your table will be broken.

If you wish to position the table in the center of your page, simply add the words align=center after <table , for example

<table align=center bgcolor="red">.

Now you should be able to put a background color or image on your page :)

Adding Pictures

Pictures can brighten up a web page and they are a great way to show others your work. If you have created a picture that you want to use on your site you need to save it somewhere on the web. Once you know where you image is stored it is very easy to add an image to your web site. You can use any images already somewhere else on the web or located in your site's directory. Keep in mind that linking to pictures on someone else's site is considered theft of bandwidth and some sites will not take too kindly to it and may even choose to track you down and prosecute you for monetary damages. Also, some hosting companies like Tripod, Angelfire, and Geocities have taken steps to try to prevent people from linking to images they host and these images may not show up if you try to link to them.

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:

<img src=" (this command tells the computer to look for an image)

http://www.site.com/images/image.gif (this tells the computer where to find your picture)

"> closes the tag

When you put the code together it looks like this:

The image tag is special as you don't have to end it. That is all you need to type to display an image. Now when you look at your web page you should see your picture. If you do not see your image, check to make sure the address you are using is correct and that you have placed quotes around it.

There are several other things you can add into the code to make the image look better including the border tag. Using this you can choose what thickness of border, if any you want 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:

This will now display your picture with a thick border around it.

Positioning the image

You can also change where you want your image to be positioned on the page. The most frequently used ones are left, right, and center. To make an image centered type this before the image tag:

Everything typed after this will be centered, even your tables and text. So now you need to type your image tags. When you have finished your image tag and no longer want everything centered you simply end the center tag like so:

</div>

To make something aligned to the left or right, you use the same code. Just replace the word center with left or right.

Background Images

You can also make an image display as a background image instead of just having a solid color. This works well with light colored, simple 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:

This will now display your image in the background.

Links

You can turn anything on your site into a link to something else. If your favorite site on the web is Google, you can make a text or image link to the Google page. You already know how to insert images or text into your web page. Turning that into a link is very simple. First you need to have a URL to link to, in this example I have used the Google URL. I wanted to make the text "click here" link to www.google.com so I typed:

<a href="http://www.google.com"><b>click here</b></a>

The only thing that will be displayed on the web page is the text click here. This would now be clickable. When you click on it with your mouse it will take you to the Google URL. You can make the text a different size, different color, bold, italic whatever but you need to start and finish the tags either side of the text.

To make an image clickable you use the same idea but instead of typing the text you put the image tag. E.g:

If you don't want to have a border around your image, you simply type border="0" inside the tag after you have typed the image tag, like so:

Adding your email address

If you have your own email address you may want other people be able to contact you. A great way to do this is to post your email address on your web site.

***Beware*** - If you post your email address on your web page that means that absolutely anybody can contact you via email. Only do this if you are sure this is something that you want to do. They can send you absolutely anything, including a virus or trojan. They can also sell your email address to a spammer or two, or more; who can flood your inbox with tons of crap you really don’t want.

The code is much the same as creating a link only instead of typing in the URL of the page you want to link to you type in the email address you want to pop up. For example if I wanted to post my email address as info@site.com I would type:

This would display the text info@site.com and when you click on it, it will open up a blank email addressed to info@site.com.

You may want to make the font a different size, make it bold or change the color. To do this just type the relevant tag either side of the linking text.

Tables

Tables are a great way to divide a page and organize how your page looks. A table is basically a grid made up of columns and rows. Each little box is called a cell. Your text, pictures, whatever goes inside the cells.

To create a table you need to start and end it.

To start a table you need to type <table>

and to end the table type </table>

What goes between the start and end table depends on what type of table you want. Every table has at least one row. A table row is one horizontal row made up of x number of table data cells. It is completely up to you what you put into each cell, it can be text, images, links, anything. If you want to create a table with two columns and one row, You need to type:

<table>

<tr> (starts table row)

<td> (starts table data cell)

type your text or image tags here

</td> (ends table data cell)

<td> (starts the second table data cell)

type your text or image here

</td> (ends the second table data cell)

</tr> (ends the table row)

</table>

This will now look like this:

This is the first data cell | and this is the second.

Woo hoo I have created my first table!

You can have any number of table rows and data cells as long as you remember to end each tag. The main thing to remember is to start with a <tr>. Adding extra <tr>'s will add extra rows and adding extra <td>'s will create an extra cell. If you want to add an extra cell or row make sure you end the one before it before starting a new one.

It will automatically put a thin border around your table. To make this thicker or remove it you need to use the border tag (see lesson-inserting pictures). Using this you can choose what thickness border of any you want to have around your table.

Some basic borders are:

Border="0" no border

Border="1" thin border

Border="2" thicker border

Changing the look of your table

You can change the appearance of your table by making each cell a different color or changing the border size and color.

If you just type <table> then by default the table will have no border. If you want to make your table stand out you can add a border by typing <table border=1>. This will make a thin border appear around your table.

To change the color of the border you use a similar code to changing background color.

Simply type <table border=1 bordercolor=red>

to make a table with a thin red border.

You can either use hexadecimal codes or type in the names of common colors.

Changing the color of the table

Changing the color of a table is very simple. When you start a table you just need to say what color you want the table to be. In this case I want a light blue (CCCCFF). Just type

If you want to change the color of just one row or cell you just type bgcolor=CCCCFF inside the start td or tr tag like so:

Now you can change the appearance of your table to look exactly as you want it.

The last thing you will need to know about tables is how to change its size. If you don't specify a height or width it will try to fit in your text or pictures automatically but this may not look exactly how you want it. To set the width of an entire table you just need to say how many pixels or what percentage of the page you want it to span. The average web page is about 600 to 800 pixels in width. It is completely up to you what size you set. You just need to type width=your value when you start your table. E.g

Then you just type the rest of your table as normal. Height works in the same way as width. It just isn't normally used. To set the height you just type height=your value. You can set the height and width at the same time by typing:

Any regular HTML tags can be used in filling in the contents of your cells. You can add images, text, and links. You can align them to the left or right, or even center them. You will have to add any type of text color, positioning, etc., tags to each cell, as they generally don't carry to the next cell in a table.

Adding sound

This is a very easy thing to do and can really brighten up your webpage. There are several ways you can add sound. It can play in the background, play once only, play continuously, or you can let the person viewing the web page decide what they want to do.

First you need to have your music file saved somewhere on the internet. Simply replace the text http://www.site.com/sound/beep.wav with the URL of your sound file. Keep in mind that sound can be very annoying to some people and can even get a person fired if they are viewing your page at work.

Creating a player

You can create a little music player on your page. This will allow the visitor to stop and start the music whenever they wish. What tags you use depends on if you want people to see it in Netscape or Internet Explorer. Netscape supports embed tags and IE supports bgsound tags. It is best to include both, that way it will always work. Also, some people that have upgraded Internet Explorer from version 5 to version 6, may have a problem with the sound working, if you choose to use the player method on your page.

</embed>

</noembed>

You can customize your player by changing the height and width tags. This will alter how large it is.

If you only want the 'Play' and 'Stop' buttons to be visible, you can use the smallconsole tag.

</embed>

</noembed>

Continuous Play

You can make your music play continually by adding the loop tag, these are slightly different in Netscape and IE. If you want your music to start playing as soon as someone loads the page, type autostart=true in the embed code. The following code would start your music automatically and play it constantly. Note: you many not wish to use this on your page, as it could annoy a lot of people.

</embed>

</noembed>

Background Music

If you want to give your webpage a more subtle appearance, you do not need to display the player. If you want to hide the player from your viewers, use the hidden=true tag like so:

</embed>

</noembed>

Create an image

If you can't find a logo or banner that you like, or simply want to have a unique design, it is really easy to create your own. If you are using a computer with Windows on it, you will already have a drawing program called Paint installed. You can open it by clicking on the Start button then going --> programs --> accessories --> Paint. Paint won't give you all the effects that a program such as Adobe Photoshop or Paintshop Pro will, but it is easy to use and most computers come with it.

Choose the size of your picture

Paint automatically starts with a HUGE work area, you should change the size of the canvas depending on what you wish to create. To change the canvas size click on IMAGE and then ATTRIBUTES. Next a window will pop up. Type the size you want the canvas to be. It is MUCH easier if you decide what size you want your picture to be before you start to draw, so choose carefully.

Begin to draw

The tools are pretty obvious, the pencil draws, the paint bucket fills in shapes, the circle tool draws a circle, etc. You can change colors by clicking on the colors at the bottom. If you make a mistake use the eraser or press the Control and Z buttons to undo a stroke. If you get stuck, click on 'HELP' in the paint program. You can then search the help files until you find the answer to your question.

Saving

Save your picture regularly. There is nothing worse than a power failure shutting off your computer and losing all your work after spending 2 hours creating an image. To save click on 'FILE' then 'SAVE' enter a file name for your picture and then press 'SAVE'.

Customizing with CSS

You can change the look of an entire page with just one simple CSS code.

Background color

To change the background color you need to use the following code. If you want more choice of colors, enter the HEX code rather than the color name.

Adding a picture for your background

It is slightly different if you wish to add a picture as your background. First the picture has to be uploaded onto the internet, and you need to know its URL. 'http://www.site.com/images/image.gif'. Then enter the following code into page. Replace the word ADDRESS with the address of the image you wish to use.

This will make the background of your page an image that doesn't scroll with the page.

Changing the font for the whole page

You can change what size, color and style the font is on your page. You only need to enter one code to change the background and fonts. Just type

font-family allows you to choose what font is displayed, e.g arial, comic sans, verdana

color lets you set the color of all text on your page

font-size alters the size of text on your page, choose small, medium or large

Your code should end up looking something like this:

or if you are changing your background color as well, like this

There is a lot more you can do to customize with CSS, you can add pictures, tables, links, etc.,

and add some pretty interesting special effects. This just covers the basics.

Ending your web page.

Don't forget to add the two closing tags that were discussed in the beginning of this tutorial:

</BODY>

</HTML>