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.