HTML Code Tags & Tips
By Morgan from Alternate Image


HINT: You can always undo any action with CTRL + Z (Command + Z on a MAC). You must hold down the control key while holding down the 'Z' key.

How to align a paragraph differently than another paragraph or sentence above/below it

If you want the bottom paragraph text to appear centered and the top to be left aligned, like this:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.


You will need to use a Div Tag. The Div Tag will be placed before the sentence with a closing Div tag following it. If there are font tags you will want to place this around those as well so that the styling is included in the Div Tag.
You can align the text to be 'center', 'left', or 'right' using the tags below:
(Note: this is an image as entering in any HTML code is automatically hidden from the user)


How to add a specific font color that is not in the color swatch If you want to add a new font swatch color that is not in the color swatch, or if you have a specific logo color that you need to use to match a logo or branding, you will first need the 6 character color code (ex: #66CC00).

You can find a complete list of colors and their color codes at www.visibone.com/colorlab.Here you can place colors next to each other and see how they look or complement each other. These colors are web safe colors that will be consistent through all browsers and on a MAC and PC. Only use these web safe colors for your website. Simply click on a color on the palette and the color code will appear on the right.

Go to your CMS and type in your text. Highlight it and add a color from the color swatch. It does not matter which color you select, as we will be changing it in the next step.

Go to your source code and search for that text. The color code will appear within the font tag that surrounds your text. Replace the 6 character color code with your new color code. The code should look like this:

How to add spacing around an image
If you want to add space between the text and image, like this:
To add space first float the image either right or left. (You can do this by inserting the image from your photo library and selecting float to left or right, selecting none will not make any text wrap around the image.) In the code, look for the image tag and insert your margin style tag within the Div Tag surrounding the image.

These are the tags you can add:
margin: 15px - adds 15 pixels of space around the entire image
margin-left: 15px - adds 15 pixels of space to the left of the image
margin-right: 15px - adds 15 pixels of space to the right of the image
margin-top: 15 px - adds 15 pixels of space to the top of the image
margin-bottom: 15px - adds 15 pixels of space to the bottom of the image

The code should look like this:



You can add more or less space by increasing the pixel size. A good amount is about 10-25 pixels, depending on your website layout and images. Be consistent with your margins throughout the website. You can add more or less space by increasing the pixel size.A good amount is about 10-25 pixels, depending on your website layout and images.Be consistent with your margins throughout the website.

How to add 'Alt text' to images to enhance SEO for your website
Alt tags are used to identify the image to search engines and the user. When your mouse hovers over an image the alt text will appear. Your alt text should include your website keywords and not be a complete sentence. Here are some great examples of effective Alt Tags:
Daytona Beach Hotels
Bike Week events 2010
Daytona Beach restaurants
Daytona Beach Homes for Sale

After you have inserted your image, find the image source code and type your keywords into the quotation marks for the Alt Tag:



Add a border around your image
To add a border around your image go to your source code and find the image source. Within the image tags there will be a 'border=0' code. Change the '0' to the amount of pixels you would like your border to be. One pixel in width is usually sufficient but you can add more. Your image will appear as such:


Here is the source code:

Always remember that your website will display differently in Internet Explorer, FireFox, and Safari and that it is recommended that you preview your website in all three. If you need to revert back to previous content in your content management system you can do so from the Activity Log on the Security Dashboard of your website. The activity log will display the content before and after each save from user sessions. You can copy and paste the previous content from the activity log back into your content management box should you need to revert back to your previous content.

Categories: Website Design and Programming