HTML Lesson 2

HTML Lesson 2

Click here for Formatting Images

Cick here for Linking

Formatting Text

Formatting text allows you to change the text on your page to your preference. When you are formatting the text you are formatting the words or letters rather than formatting the paragraph. The most commonly used text formatting tags are:

 Bold which would be coded as This will produce a bold type print

This will produce a bold type print

 Italic which would be coded as This will produce a italic type print

This will produce a italic type print

 Underline which would be coded as This will produce a underlined text

This will produce a underlined text

Other less common tags are as follows. Some of them have been deprecated by HTML 4.01 standard.

<BLINK> produces blinking text and is considered highly unprofessional
<CITE> is used to display program code
 usually appears as an italicized text
<STRIKE> will add a strikethrough to the text
 this will usually display as bold print
 subscript text
 superscript text
<TT> fixed width font
<VAR> for displaying variables and arguments

Font Styles and Sizes

The tag for your font styles and sizes is start and end . This tag allows you to determine the color, style and size of your text. The attributes for the Font tag are as follows:

SIZE Text size ranges from 1 to 7, with 1 being the smallest and 7 being the largest. The size of the font on a page can be determined in two ways.
You can add the <BASEFONT> tag to the header of the document, which is between the <HEAD> and </HEAD> tags. This will produce a default font size for the entire document. The <BASEFONT> tag is not a required tag and if you don't use it the page will default to the web browser's default font size. The tag would be written as follows <BASEFONT SIZE=3> any number from 1 to 7 can replace the 3. The most common default size is 3 for most web browsers.

Or you can use the tag which can be coded in two different ways. The tag determines an area of the page to be a specified size. Anything between the start tag and the end tag will be displayed according to the attributes in the tag. There are two ways to code the size attribute with the tag. The first way would be to add the SIZE=3 where 3 would be the number or size you want your text to be displayed between 1 and 7. And this is coded with the as . The second way to code the tag is to use the plus or minus sign. would tell the browser that the font size is 1 step larger than the basefont.

COLOR
In my opinion the color of the text is the most important part of creating a well designed web page. The combination of your background and your text needs to be well balanced and very easy to read. If that is not the case you will probably lose visitors to your site. My personal opinion is that in most cases a dark background does not do a page justice. There are exceptions but most I have viewed with dark background and light text are not impressive. Also a white background in my opinion for some people is extremely hard to read. I recommend in most cases to use a very light, soothing background with colored text that compliments the background. Another thing to remember is that quite often people think that using a different shade of the same color as your background makes good web design, in truth it makes poor web design and the text becomes hard to read for many people. My opinions come from studying colors in relation to disabilities, the two colors that are in my opinion friend colors are blue and green. They are often called calming colors and a clear sheet of plastic with one of these colors helps the dyslexic person to concentrate on the pages and learn to read. They are also known to help other disabilities. It is wise to plan your background and text to compliment each other.

R G B

00 00 00

33 33 33

66 66 66

99 99 99

CC CC CC

FF FF FF

The table on the left is a list of the safe recommended RGB values for adding color to your web page. You are not limited to having to use these numbers, they are just the numbers deemed as safe. To create a color from the list you would combine one value from each column on the list. Using 000000 will produce black while using FFFFFF will produce white.

The color attribute will be coded as and the end tag would be 
If you wanted the entire document to have the same color you could would add the attribute to the <BODY> tag. The tag would look as follows:

<BODY TEXT="000000">

FACE Although you might find a font that you would like to use on your page, you have to realize that unless it is a font that exists on the viewers computer they are not going to see the font and their computer will most likely convert it to a font supplied on that computer. The face attribute would be added to the tag as follows:

 and would end with 

This attribute can also be added to the <BASEFONT> tag.

Putting all three attributes together in one tag would be done as follows:



Images

Images are used to enhance your page. Adding color and scenery to a page can make it more appealing to the viewers. But you don't want to overdo the images because they can also take away from your page and chase people away. Images are displayed on a page using the <IMG> tag and SRC attribute. Below are samples of how to use the <IMG> tag and SRC attribute.

To display an image that is present within the same folder as your document.

<IMG SRC="backgrnd.jpg">

To display an image that is in a sub folder from the document you are coding.

<IMG SRC="images/backgrnd.jpg">

To display an image that is in another site. Please do note that in order to do this you must get the permission of the website owner to hotlink to an image within their site. If you do not get the permission to hotlink from their site you will be stealing bandwidth and this makes you a thief. Please ALWAYS get permission of the owner to hotlink from their site.

<IMG SRC="http://www.anothersite.com/folder/image.jpg">

The best way to explain the other attributes for the <IMG> tag is to display them with a graphic. Below you will find samples of the other attributes, the flags default height is 50 and width is 68.

With this I adjusted the width to 100 the code for the above display is <IMG SRC="images/cf2.gif" width="100" height="50">

The above image has the height enlarged to 75 the code for this display is <IMG SRC="images/cf2.gif" width="68" height="75">

The above image has been given a border thickness of 10 the code for this display will be <IMG border="10" SRC="images/cf2.gif">

This image has been aligned to the left. The code used for this is <IMG SRC="images/cf2.gif" align="left">. Do notice how each line of the text is being displayed beside the image. This is not always the case when displaying images on a page. With some coding only one line of text would be displayed beside the graphic.

This graphic has been aligned to the right. The code used for this is <IMG SRC="images/cf2.gif" align="right">. Again you will see that the lines of text are being displayed beside the image. This is another in which the alignment allows for the lines text to be displayed beside the image.

This image has been aligned to the top. The code used for this is <IMG SRC="images/cf2.gif" align="top">. Now what the alignment has done is the first line of text is aligned to the top of the image. Any other lines after that are below the image.

This image has been aligned to the middle. The code used for this is <IMG SRC="images/cf2.gif" align="middle">. The first line of text has been placed in the middle of the height of the image and all other lines of text are below the image.

This image has been aligned to the bottom. The code used for this is <IMG SRC="images/cf2.gif" align="bottom">. The first line of text has been placed at the bottom of the height of the image and all other lines of text are below the image.

This image has been aligned to the left and given horizontal spacing of 10. The code used for this is <IMG SRC="images/cf2.gif" align="left" hspace="10"> Notice the space between the image and the text, this is what the horizontal spacing does to the graphic. This would help with an image that is not transparent.

This image has been aligned to the left and given the vertical spacing of 10. The code used for this is <IMG SRC="images/cf2.gif" align="left" hspace="10"> Notice the space between the image and the vertical space from the text. The vertical spacing leaves a specific amount of space between the image and the text around the image. This would come in handy especially with a graphic that is not transparent. The text and the image would not look like they run into each other.

Another attribute that can be used with the <IMG> tag and SRC attribute is the ALT attribute. This is where you can place text onto the graphic. When your page is displayed on a website, if someone places their mouse on top of the image a message can be displayed. This is done with the following code. Notice I also added the hspace and vspace.

<IMG SRC="images/cf2.gif" align="left" hspace="10" vspace="10" alt="This is a message on an image">

Linking

A URL (Uniform Resource Locator) is simply an address of a document on the internet. It's structure is made up of four parts, protocols, host name, folder name and file name.

Protocol = http://

Host Name = www.askmaggymae.com

Folder Name - there is not always a folder name present in the URL. It would depend on if you sorted your files into folders. With AMM almost all pages are within the main web, then I created folders for the images, downloads and music for the site. Another thing to consider is there may be more than one folder name in the URL. Because AMM uses so many graphics due to screenshots, the folder holding the images has subfolders making it easier for me to find a graphic if I need it.

File Name = the name of the file you want to display with the link.

Putting these together you would get:

http://askmaggymae.com/images/AMMbanner.gif

That link would provide the path for the banner which is displayed on all of the pages in the AMM website. It consists of the protocol (http://), the host name (www.askmaggymae.com), the folder name (/images) and the file name (/AMMbanner.gif)

But when you are coding your page the above is not enough to tell the browser what it is supposed to do with that line. Linking also needs a tag and attribute. The tag for linking is the <A> tag and the attribute is HREF and finally the end tag is </A>.

There are several ways to create links, below will show you each of them.

If you are linking to another page within your own web, and the page you are linking to is within the same folder your link would appear as follows:

<A HREF="newpage.htm">Text to display the link</A>

If you are linking to another page within your web and it is in a subfolder of the folder your page you are working with is your link would appear as follows:

<A HREF="foldername/newpage.htm">Text to display the link</A>

If you are linking to another page within your web but the page you are working on is within a subfolder and the page you want to link to is in another subfolder (there is no direct link) then your link would appear as follows:

<A HREF="../foldername/filename.htm">Text to display the link</A>

The ../ is telling the browser to go up one level (or up one folder) then the folder name and filename. There could end up being more than one of these depending on the folders. Now with any of the above, you could just use the full path to the page that you wish to link to.

If you are linking to a page that is not within your web, but on the internet at another site your link would appear as follows:

<A HREF="http://www.websitename.com">Text to display the link</A>

You could also add a folder name and file name if it was necessary.

You can also link to a certain area within a page. This type of link would use the NAME attribute. <A NAME="MARK"> would create what is called an anchor that is named MARK. Placing this on your page just before the area you want to link to. If you are linking to this from another page your link would be coded as: <A HREF="URLtothepage#MARK">Text to display</A> and if the link you are creating is within the same page as the anchor then your link would be coded as" <A HREF="#MARK">Text to display</A>. This is a very handy tool if you have pages that are very long. You can place an anchor in several places of the document and then create a list of links like a table of contents where you can place each link that will take the user to each anchor.

You can use an image as a link instead of using text. To place an image instead of text you would use the following code:

<A HREF="http://askmaggymae.com"><IMG SRC="http://askmaggymae.com/images/AMMbanner.gif">

And finally you can create a link to an email address. To do this you would use the mailto: protocol instead of the http: protocol. Your link would look as follows:

<A HREF="mailto:maggy@shaw.ca">Email Maggy</A>

Site Map