corner filler corner
 
Description Mascot

Text/Note Pad Page Building Tutorial

We are now going to discuss and demonstrate the uses of simple hex color commands to inform the browser what color specifications you want the following areas listed below.

  
corner

filler

 corner

We are now going to discuss and demonstrate the alignment of text and images.

We will start off by focusing on text first.

<p> = paragraph in short term (or as we will call as "place")

Whenever <p> is used, default alignment would automatically be "left" of viewers screen.

We want to tell the browser where to place our following demonstration object. We will use the place attribute of "center" for this demonstration.

We do this by adding an align="where to place" attribute.

<p align="center"> will make any image or word following this appear in center of viewers page or, in a table. You may substitute this with "left" or "right".

Cut & Paste Code Below:

If you experience any alignment problems; try the following code:
<center> something here </center> (may substitute with "left" or "right")

Cut & Paste Code Below:

If this is a text word do you want it bold? If so, use following code: <b=bold>
<b> then word text </b> then the close tag.

Cut & Paste Code Below:

You may also use the following code:
<strong> Your Words </strong> will produce following visually on page:
Your Words

Cut & Paste Code Below:

Then </p> closing the tag will end this particular object placement.

This is what should your code should look like now:
<p align="center"><b>any word or sentence here </b></p>

Cut & Paste Code Below:

You may want to create dividers on your page separating one section from another. You can either install an image, or you can install a simple tag that will create a divider line.

<hr></hr> will create the following divider line: (gray color is default color)

Cut & Paste Code Below:

Do you want divider colored? Add a Hex color.
Simply add a hex color specified to your preference.
We used color : "#ffffff" (white)
Code to install: <hr color="#ffffff">
This produced this divider with color choice specified below.
Our page demonstration seen below we used color #103060

Cut & Paste Code Below:

Now we will discuss how to make a clickable hyperlink from either a text word, or an image. We must first know the complete URL to make a link complete it's task to send viewer to a specific page.

<a href= active hyperlink reference point for short.

This is a very easy tag to remember; To make this a link we do the following:

We will use our URL: http://www.DesignerWiz.com

--> <a href="http://www.DesignerWiz.com"> any word here as visible text link.
Cut & Paste Code Below:

We would close tag now with </a>
This hyperlink code would look like this:
<a href="http://www.DesignerWiz.com"> visible text to be clicked on </a> Now this is a link!

Cut & Paste Code Below:

If this was an image to link; We would do following:
<a href="http://www.DesignerWiz.com"> URL for image link to go to; We would then give the image source <img src> document address tag as follows:
--> <img src="http://www.your domain/image name.gif">

We will use an image we have for viewers to link our services as an example:
<a href="http://www.DesignerWiz.com"><img src="http://www.DesignerWiz.com/images/pic17.gif"> then we would add the active link attribute closing tag as </a>.

Cut & Paste Code Below:

We must now tell the browser how to read size of the image to speed up load time. We do this by installing a simple addition to current tag:
--> <a href="http://www.DesignerWiz.com"><img src="http://www.DesignerWiz.com/images/pic17.gif"></a>

We will add a width of image as 100 pixels, and height as 100 pixels (you can get the size of your images by right clicking on image and selecting properties). You should also include factor of border around your image, this would create a colored border surrounding your image in the color of link specifications you determined earlier. (you can regulate border="0" with numerals as high as needed. Use our HTML code test bed generator in examples to view different sizes)

Code would be as follows:
--> <a href="http://www.DesignerWiz.com"><img src="http://www.DesignerWiz.com/images/pic17.gif" border="0" width="100" height="100"></a>

Cut & Paste Code Below:

It is recommended to install an <alt tag> = alternate option for short) for description of your image in event of image load failure, or viewer has images turned off on browser. This enables viewer to see text wording in place of an X broken image view, or viewer gets an explanation of link when cursor rolls over image.

Code would be as follows:
--> <a href="http://www.DesignerWiz.com"><img src="http://www.DesignerWiz.com/images/pic17.gif" border="0" width="100" height="100" alt="Your Free Complete Web Development Resource Center"></a>

Cut & Paste Code Below:

Your Pad Editor should look something like this now depending on colors you choose to use.

We will move onto installation of content and font commands in body of HTML document on next tutorial page.