Recap
S o far we have a <TITLE>, a <META> tag, a <BODY> tag, a Header <H1> </H1> that is centered <div align="center"> and a paragraph <P> </P> of text that is positioned to the left <div align="left">.
<HTML>
<HEAD>
<TITLE>My First Web Page</TITLE>
<META NAME="TITLE" CONTENT="My First Web Page">
<META NAME="DESCRIPTION" CONTENT="This is my first attempt to build and design my own web site using pure HTML codes and no page builder">
<META NAME="KEYWORDS" CONTENT="All Your Key Words Go Here">
<META NAME="OWNER" CONTENT="Your Email Address">
<META NAME="AUTHOR" CONTENT="Your Name Here">
<META HTTP-EQUIV="EXPIRES" CONTENT="">
<META HTTP-EQUIV="CHARSET" CONTENT="ISO-8859-1">
<META HTTP-EQUIV="CONTENT-LANGUAGE" CONTENT="English">
<META HTTP-EQUIV="VW96.OBJECT TYPE" CONTENT="Howto">
<META NAME="RATING" CONTENT="General">
<META NAME="ROBOTS" CONTENT="index,follow">
<META NAME="REVISIT-AFTER" CONTENT="4 weeks">
</HEAD>
<BODY bgcolor="#000000" text="#ba55d3" link="#ff8c00" alink="#ffff00" vlink="#ff0000">
<H1>My First Web Page</H1></div></font>
<div align="left">
<P><font face="georgia,arial,helvetica"size="3"color="#ffffff">Your Text Goes Here. I am designing my first web page with pure HTML codes and am I proud of myself! Once I start to master this, I will not need to rely on page builders to do the work for me and I will have more latitude with designing the page the way I want.</font></P></div>
<div align="center">
<P><img src="Path To Your Uploaded Image"border=0 width="286" height="175"alt="Example Uploaded Graphic Using An Alt Tag!"></P>
<P><font face="georgia,arial,helvetica"size="3"color="#fff0f5">This Picture Is My Logo</P>
</BODY>
</HTML>
N ow lets add an image or a graphic into the page that will be centered under your paragraph <P> </P> of text. This is done by first uploading the desired image into your editor so it has a place to reside. Once you have selected and uploaded your image of choice, lets let people see it. You are proud of your image and want the world to see it. We also want the image to be centered under your <P> </P> paragraph of text.
T o center your image first you need to close the </div> tag after your closing </P> paragraph tag and open a new div tag positioning the image to the center <div align="center">. Reason being is that your paragraph was positioned to the left and now you want the image to be positioned to the center.
I
f you do not understand uploading an image into your editor, see the below link and it is explained step by step on howto.
[ How To Upload An Image Or File ]
T he above uploaded image code will look something like the below example. Notice that it is completely defined with height, width, 0 border and an alt tag.
<P><img src="Path To Your Uploaded Image"border=0 width="286" height="175"alt="Example Uploaded Graphic Using An Alt Tag!"></P>
T he border defined as 0 does not come into play with just an image. The only time it will come into play is when an image is associated to a hyperlink and you don't want the border around the graphic. This is why you define it as 0. If you delete that attribute completely or give it a value of 1 or higher, you will have the border around the graphic when associated with a hyperlink.
T he alt tag is a description of the graphic that will appear on mouseover* and also if the graphic does not load and you get in infamous little X and no picture. With an alt tag defined, even if the image does not load, you will see the text associated with the non loaded image. Alt tags can also give you a higher rating with search engines if properly defined.
* mouseover - when you place your cursor (Mouse Pointer) over something like an image or a text link with special attributes [ Put Cursor Here ] and you will receive the pop up message or description (alt tag).
Hence - mouseover
N otice the beginning of the image tag! All image tags will start with the prefix of <img src=. This tells the computer that it is an image and to read it as such. This tag does not come in pairs and does not need a closing image tag.
N otice we have also defined the image with <P> </P> (Paragraph tags). Reason being is if you don't the image is not defined as an entity on its own and can possibly have text or other material align with it on the same line.
N ow that we have added the image, lets put a short descriptive paragraph <P> </P> (Paragraph) of text underneath your image still positioned to the center. So you do not close your div tag. Reason being, the image is positioned to the center and so will the text underneath it.
<P><font face="georgia,arial,helvetica"size="3"color="#fff0f5">This Picture Is My Logo</font><</P>
I
f you would like to know all the attributes concerning images, follow the below link and you are there.
[ All About Images ]
L
ets see what we have done so far with our first web page.
[ Lets See What We Have Done So Far ]
N ow that we understand that and viewed what we have done so far, lets go to the next page.
[ Page 1 ] [ Page 2 ] [ You Are Here ] [ Page 4 Is Next ] [ Page 5 ]
[ HTML Tags & Codes ] [ Code Tester ] [ Error Messages ]
Copyright © Consigliere Ltd., All Rights Reserved. 2001-