Web Editing Help Page

BASICS:

When editing your web page you will be looking for certain commands or "tags". Tags always appear between two symbols, the first being the start of the tag "<" and the next being the end of the tag ">" .

For images and pictures you will be looking for the tags that begin with "<img....."

For Text you will be looking for a tag starting with "<p class....."

A good website to visit for a listing of the tags used in your web page is W3 Schools website. You will find a comprehensive list of tags used in html, xhtml and css, all of which are used to design your website. They will tell you what the tag names are and what they do. Here I am only showing the two most common items that I would expect you to edit to insert your own content into your web page template.

How do I change the pictures which are already on the template for my own?

Open the HTML file that you wish to edit. The website is displayed by codes called "html" that tell the page which images to display. The information is contained inside a "tag" as explained above. In order to put your own content in place of the display content you simply edit certain items inside the tag. For example in code, this is how you get a picture is to be displayed:

<img border="0" src="DD.jpg" width="236" height="167" alt="Dove Image" />

You will notice two underlined portions. Those are the areas you will edit. You will delete everything in the first underline and insert the name of your picture, for example, "myimage.jpg" This information tells the web page the name and the type of image you wish to display, "myimage.jpg" You will need to make sure you upload that image to the main directory of your website. If the image is contained within another folder you will need to put that information in the tag as well. Example: "myfolder/myimage.jpg". Basically you have to tell the web page what it's looking for and where it is. The second underline is the alternate display. You will see a small text box with that information displayed if you roll over the image on your web page. Normally it's a short description of what the image is. For example; "My Image".

How do I edit the text and also change the color, size or style of the text?

Open the HTML file that you wish to edit The website is displayed by codes called "html". The text on the web page is listed between two tags. For example:

<p class="two">This is my text which I want displayed on my web page.</p>

The portion that is underlined is the actual text you see on the web page and this is what you would edit to make it your own.
To change the color, size or font (style) of the text, you will know the "class" number listed in the tag right before your text. You will then need to open the .css file which lists all of the attributes for your web page.

For example, to edit the color of the text listed above you will be looking for <p class="two">. You will open your .css file and locate "p.two". The listing will be followed by all the attributes including color, font, margins etc.... Any attribute that is applied to that text will be located here. Each attribute first tells you what it is, followed by a colon. After the colon is the part you will need to edit. Also, each attribute must be separated by a semi-colon. It will appear as follows:

p.two {color: #A2DEFC; font-family: Albemarle Demo; font-size: 100%; margin-top: 0cm; margin-bottom: 0cm}

Once you have located the proper listing, you simply replace the information after the colon with your preferences. So if you wanted the text color to be black instead of light blue you would locate p.two in the .css file and change the color section to read color: #000000 or color: black. For basic colors such as black, white, blue, yellow, red, green etc... you can simply input the color name instead of numbers. For different shades of those colors, it's best to locate the color # on the HTML color chart and input the number.

To change the size you would increase or decrease the percentage accordingly. So if you wanted the text to be larger you would change the percentage to font-size: 120%. To decrease you could change it to 80% or 60% etc. There is no limit to the size of increase so you can input 200% of 150% etc...

To change the font type you would go to the font-family attribute and change the name of the font to your preference. For example, if you do not like the font Albemarle Demo, you could change it to font-family: Book Antiqua, or Times New Roman etc...