|
This guide was created to help my clients who wanted to be able to make minor changes to their sites on their own. Clients who
were using
content management systems wanted to be able to add hyperlinks and paragraphs in the content they added. This guide is now, obviously
freely available to anyone who doesn't know the first thing about HTML and wants to get started somewhere.
I tried to make this as simple as possible, unfortunately this has the result of leaving a lot out and often only telling part
of the story. This was never intended to be "the last word on HTML", rather a very simple starting place for those new to HTML.
All the spaces (or lack of spaces) are usually a deal breaker; make sure you place the spaces as I've shown.
For a better explanation of nearly any html go to Sizzling HTML Jalfrezi.
That is where I go when I need to look something up, it is truly a great resource for HTML. It is kind of old (the HTML language
is constantly evolving) but it is still very helpful.
Here we go:
- To end a paragraph, use
<p> (the "p" stands for "paragraph"). This will have the effect of putting a space between
paragraphs.
Example: This will put a space between these lines.<p>See what I mean? This would produce:
This will put a space between these lines. See what I mean?
- To end a line, but not put a space before the next line starts use
<br> (the "br" stands for "break").
Example: There will be no space between these lines.<br>See, no space. This would produce:
There will be no space between these lines.
See, no space.
- To make something bold, use
<b> before the word or phrase you want in bold, then </b> where you want
the bold to end.
Example: Look, this word is <b>bold</b>. This would produce:
Look, this word is bold.
Italics works the same way, except you would use <i> instead of <b> and </i> after the
part you want in italics instead of </b>.
- To center something, an image, a table, text, or nearly anything else, use
<center> before what you want centered
and </center> after.
Example: <center>This is centered</center> This would produce:
This is centered
- To make a link (also called a "hyperlink") you would use
<a href="http://www.example.net">Link Text</a> (the
"a" stands for anchor, and "href" stands for "Hypertext REFrence").
Example: <a href="http://www.divergentlines.com">My Site</a> This would produce:
My Site
If you are going to link to a page that is not on your site, I suggest having it open in a new window. This is just a trick to
keep people on your site. You would add "target="_blank""" to the code. Make sure you literally use "_blank"
where I did.
Example: <a href="http://www.divergentlines.com" target="_blank">My Site</a> This would produce:
My Site
- To make an email link you would use
<a href=mailto:email@address.com>Visible Text</a>. You can put whatever
you want where you see "Visible Text". You will often see the email address placed there so that people can copy and paste it
if they use Yahoo or some other web-based email.
Example: <a href=mailto:dsmith@divergentlines.com>Contact Me</a> This would produce:
Contact Me
- Adding an image can get really tricky really fast. Having it put where you want, the size you want, with other things doing
what you want around the picture involves code that I won't get into here.
To add an image, it first needs to be uploaded to the internet somewhere. For the most part, it doesn't have to be uploaded
to your server, just somewhere on the net. First you would make an image the size you want using PhotoShop, PaintShop Pro,
or whatever image editor you are using. Then you would ftp (file transfer protocol, or "upload") it to the server. In most
cases there will be an "images" folder, put it in there to keep things organized. Then you would use
<img src="http://www.example.net/images/image.jpg"> in your HTML using the path to the image you just uploaded.
If you try this and when you're done there is no image or there is a box with a red x or other symbol indicating a "broken" image,
you did something wrong. Make sure you uploaded the image, you have the path to the image correct, and that your syntax in the
code is correct.
Example: <img src="http://www.divergentlines.com/images/html.jpg"> This would produce:
I think this will give most people new to HTML someplace to start. If you ever get stuck or confused, try going to google and
searching for what you are stuck on. There are plenty of other tutorials and examples on how to use HTML. And, of course,
if you ever find you need a professional, you can always contact us. Good luck and have fun!
|
