eBay PowerSellers guide to creating HTML
You can either create your pages by writing HTML or using an HTML editor like
Microsoft FrontPage. Are you a beginner? If so, you may not care to learn HTML
to create your pages. There are web hosters out there that provide user-friendly
web site creation software so all you have to do is point and click your mouse to
create your web pages. If this interests you, I highly recommend using
webhosting.yahoo.com.
On the other hand, if you're feeling a bit adventurous and want to dive right into
HTML, good for you! Read below to learn more about HTML.
Basic Text & Font Tags
Before I get started, you should know that HTML code almost always uses
beginning and ending tags. These tags surround the text that will be affected by
the code. A beginning tag is generally a word surrounded by brackets. The
closure tag is surrounded by the same brackets but with a forward slash right
after the opening bracket.
For example, if you want to bold a portion of a sentence, then you would use <b>
for the opening tag and </b> for the closing.
Let’s say you want to bold the word "Hello!" in the sentence below. Then your
HTML code would look like this:
<b>Hello!</b> My name is Carla.
The output would be:
Hello! My name is Carla.
Only the word "Hello!" is bolded because the tags surround that word. If you
wanted to bold the entire sentence, then you would have put the closure tag,
</b>, after the word "Carla". Be sure to always include your closing tag because
if you forget, your entire page will be affected by the tag.
You can apply this same concept to many other HTML codes. Here are several
of the basics...
Basic Text & Font Tags
New Paragraph: <p> Starts a new paragraph and creates a blank line between
your new paragraph and the one above it.
The closing tag is </p> but is not mandatory.
Line Break: <br> This will break your text to the next line. Two <br> tags is
equivalent to one <p> tag. There's no closing tag needed for this one.
Bold: <b> Closing tag is </b>
Underline: <u> Closing tag is </u>
Italics: <i> Closing tag is </i>
Centering text: <center> Closing tag is </center>
Left aligning text: <p align="left"> Just use </p> for the closing tag
Right aligning text: <p align="right"> Just use </p> for the closing tag
Change text color: <font color="red">
The ending for any font tag is </font>
Changing font face: <font face="Arial">
Change font size: <font size="3"> (choose between 1 and 7)
Blinking Text: <blink> </blink> (only works in Netscape)
Scrolling Text: <marquee> </marquee> (only works in Internet Explorer)
Here is an example of web page written in HTML:
<html>
<head>
<title>Title that is displayed at the top of your web browser and also used
as the title by many search engines</title>
<meta name="description" content="10-15 word description of your site
read by some search engines">
<meta name="keywords" content="main keywords of your site
separated by commas. Read by some search engines">
</head>
<body>
<p align="left">
This is my new web page. I hope you like it. Please come back and visit
again. If you need help creating your web site visit <a href="http://www.
webmediaexpert.com">2 webmediaexpert.com</a>.
</p>
</body>
</html>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
The <html> tag just tells the browser where the HTML starts. It is not necessary to
include this tag to get your page to show.
The <title> tells your browser the title of the page and you’ll see this text at the
very top of your web browser. This is also used by most search engines when
indexing your page. Whatever text you have here will be title of your site when
displayed in the search engines.
The <meta name> information is also somewhat useful for some search
engines. They may use whatever is in your "description" tag to describe your
site. Others may randomly take an excerpt of the <body> of your page for a
description of your site. The keyword tag may also be helpful with your ranking in
some engines. Insert 3 or 4 of your main keywords or keyword phrases
separated by commas here.
A few years ago, the <meta name> information was quite crucial in getting a top
listing with the search engines. However, things have changed drastically with
the explosion of so many new sites and the fact that many people abused it. I
would still recommend using these tags but don’t expect to get a top ranking
because of them.
The body of your site should be included inside the <body> tags.
Inserting Hyperlinks
Hyperlinks are links that take you to another page or web site. You create them
by using the code below:
<a href="http://www.thepage.com">Name of link</a>
The link would appear as, Name of link
Open Links in a New Browser Window
If you don’t want people to leave your site completely when they click on links to
other sites, you can set the link to open up a new window. The "target" attribute
allows you to do this:
<a href="http://www…… "target="_blank">
Absolute vs Relative URLs
--------------------------------------------------------------------------------
URL is another name for a web site address and stands for Uniform Resource
Locator.
--------------------------------------------------------------------------------
There are two different types of URLs you can use to link to various pages,
absolute and relative.
Absolute URLs
Absolute URLs include the complete path to the file’s location, including the
names of all the directories and subdirectories.
Let’s say you have a folder inside your web site's root directory called "music"
and you want to link to a page inside the "music" folder called brahms.html.
The absolute URL is:
<a href="http://www.yoursite.com/music/brahms.html">Brahms</a>
Relative URLs
If you don’t want to ever have to worry about going back and editing your
hyperlinks if your site structure changes then relative URLs are the way to go.
Relative URLs are more or less like shorthand that tells the browser to go
backward one or more directories to find the file.
Let's say you're on the page we referenced above, brahms.html (located in the
"music" folder) and you want to link back to the home page: (http://www.yoursite.
com/index.html)
Using a relative URL, you would tell the browser to go back 1 directory by using
the dot-slash method.
<a href="../index.html">Home</a>
The two dots followed by a slash instructs the browser to go up 1 more level to
get to the main (root) directory.
Creating Email Links
Creating email links are just as simple. All you need is the "mailto" function to get
this to work properly:
<a href="mailto:youraddress@email.com">Email Me</a>
So now you have the tools to create a very simplistic HTML page. Next, you’ll
discover how to do a few more advanced techniques to spice up your page.
Anchor Links
If you want to create a link that will take the visitor to another section of the page
rather than a new page or site, then you need to create an anchor link. There are
two steps to this process:
1) First, go to the place in your HTML code where you want the anchor to go.
This is the spot on the page that the browser will move to when a person clicks
on the anchor link.
Insert the code <a name="name1">Title</a> "name1" is just the name of the
anchor I chose. You can all it anything you want. Let's say you were setting up a
glossary and the A section starts here. You could name the anchor <a name="A"
>Title</a>. Remember this part is not visible to the visitor.
2) Now to link to that section of the page, use the hyperlink code:
<a href="#name1">click here</a>
Now when your visitors click on that link, they will be taken to that section of the
page.
Inserting Images
Once you have the image you want to use you can insert it into your web page.
Next you’ll need to do is upload the graphic to your web server. Your web hoster
will either provide the environment for you to upload your images or you'll have to
use an FTP program.
If you need help with FTP, click here.
When you upload the graphic, make sure you pay attention to what folder you’re
putting it into because that will affect how you write the HTML.
Let’s say you upload the graphic called "apple.gif" to your "images" folder on
your web server. The image folder is located inside your "root" directory.
Your HTML code will look like this:
<img src="images/apple.gif">
Now let’s say you have uploaded the graphic to the "fruit" folder/directory that is
located inside of the images folder then the code would appear as:
<img src="images/fruit/apple.gif">
The Alt Tag
If you want text to pop up when you run the mouse over the graphic, then you
need to add the alt tag.
<img src="images/apple.gif" alt="This is my apple">
Specify Height and Width
If you want to adjust the height and width of the image then you need to use the
height and width tags:
<img src="images/apple.gif" alt="This is my apple" height="100" width="150">
It is recommended that you always include the height and width of your images
because it makes your pages load faster.
Creating a Clickable Image
Linking images is helpful if you have buttons or banners on your site and you
want the visitor to be taken to another web page or site when they click on the
image. To accomplish this, use the following code:
<a href="http://www.the_linked_site.com"><img src="images/apple.gif" border="
0"></a>
The first part of the code tells the browser which site to go to and the second
part, of course, tells it where the image is located.
Indenting Text
To indent your text about an inch to the right, simply use the open and closing
<blockquote> tag around the text you want to indent.
<blockquote> This text will be indented indented </blockquote>
See how the code makes the text in the paragraph below behave:
sample text sample text sample text sample text sample text sample text sample
text sample text sample text sample text sample text sample text sample text
sample text sample text sample text sample text sample text sample text sample
text sample text
This text will be indented indented
Return to Index | Download this tutorial to your PC!
Special Characters
Code Symbol Description
™ ™ Trademark
& & Ampersand
® ® Registered trademark
© © Copyright
† † Dagger
» » Right pointing double angle quotation mark
« « Left pointing double angle quotation mark
— — Em-dash
° 30° Degree
¼ ¼ Quarter
½ ½ Half
¾ ¾ Three quarters
· · Middle dot
¡ ¡ Inverted exclamation mark
You can either create your pages by writing HTML or using an HTML editor like
Microsoft FrontPage. Are you a beginner? If so, you may not care to learn HTML
to create your pages. There are web hosters out there that provide user-friendly
web site creation software so all you have to do is point and click your mouse to
create your web pages. If this interests you, I highly recommend using
webhosting.yahoo.com.
On the other hand, if you're feeling a bit adventurous and want to dive right into
HTML, good for you! Read below to learn more about HTML.
Basic Text & Font Tags
Before I get started, you should know that HTML code almost always uses
beginning and ending tags. These tags surround the text that will be affected by
the code. A beginning tag is generally a word surrounded by brackets. The
closure tag is surrounded by the same brackets but with a forward slash right
after the opening bracket.
For example, if you want to bold a portion of a sentence, then you would use <b>
for the opening tag and </b> for the closing.
Let’s say you want to bold the word "Hello!" in the sentence below. Then your
HTML code would look like this:
<b>Hello!</b> My name is Carla.
The output would be:
Hello! My name is Carla.
Only the word "Hello!" is bolded because the tags surround that word. If you
wanted to bold the entire sentence, then you would have put the closure tag,
</b>, after the word "Carla". Be sure to always include your closing tag because
if you forget, your entire page will be affected by the tag.
You can apply this same concept to many other HTML codes. Here are several
of the basics...
Basic Text & Font Tags
New Paragraph: <p> Starts a new paragraph and creates a blank line between
your new paragraph and the one above it.
The closing tag is </p> but is not mandatory.
Line Break: <br> This will break your text to the next line. Two <br> tags is
equivalent to one <p> tag. There's no closing tag needed for this one.
Bold: <b> Closing tag is </b>
Underline: <u> Closing tag is </u>
Italics: <i> Closing tag is </i>
Centering text: <center> Closing tag is </center>
Left aligning text: <p align="left"> Just use </p> for the closing tag
Right aligning text: <p align="right"> Just use </p> for the closing tag
Change text color: <font color="red">
The ending for any font tag is </font>
Changing font face: <font face="Arial">
Change font size: <font size="3"> (choose between 1 and 7)
Blinking Text: <blink> </blink> (only works in Netscape)
Scrolling Text: <marquee> </marquee> (only works in Internet Explorer)
Here is an example of web page written in HTML:
<html>
<head>
<title>Title that is displayed at the top of your web browser and also used
as the title by many search engines</title>
<meta name="description" content="10-15 word description of your site
read by some search engines">
<meta name="keywords" content="main keywords of your site
separated by commas. Read by some search engines">
</head>
<body>
<p align="left">
This is my new web page. I hope you like it. Please come back and visit
again. If you need help creating your web site visit <a href="http://www.
webmediaexpert.com">2 webmediaexpert.com</a>.
</p>
</body>
</html>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
The <html> tag just tells the browser where the HTML starts. It is not necessary to
include this tag to get your page to show.
The <title> tells your browser the title of the page and you’ll see this text at the
very top of your web browser. This is also used by most search engines when
indexing your page. Whatever text you have here will be title of your site when
displayed in the search engines.
The <meta name> information is also somewhat useful for some search
engines. They may use whatever is in your "description" tag to describe your
site. Others may randomly take an excerpt of the <body> of your page for a
description of your site. The keyword tag may also be helpful with your ranking in
some engines. Insert 3 or 4 of your main keywords or keyword phrases
separated by commas here.
A few years ago, the <meta name> information was quite crucial in getting a top
listing with the search engines. However, things have changed drastically with
the explosion of so many new sites and the fact that many people abused it. I
would still recommend using these tags but don’t expect to get a top ranking
because of them.
The body of your site should be included inside the <body> tags.
Inserting Hyperlinks
Hyperlinks are links that take you to another page or web site. You create them
by using the code below:
<a href="http://www.thepage.com">Name of link</a>
The link would appear as, Name of link
Open Links in a New Browser Window
If you don’t want people to leave your site completely when they click on links to
other sites, you can set the link to open up a new window. The "target" attribute
allows you to do this:
<a href="http://www…… "target="_blank">
Absolute vs Relative URLs
--------------------------------------------------------------------------------
URL is another name for a web site address and stands for Uniform Resource
Locator.
--------------------------------------------------------------------------------
There are two different types of URLs you can use to link to various pages,
absolute and relative.
Absolute URLs
Absolute URLs include the complete path to the file’s location, including the
names of all the directories and subdirectories.
Let’s say you have a folder inside your web site's root directory called "music"
and you want to link to a page inside the "music" folder called brahms.html.
The absolute URL is:
<a href="http://www.yoursite.com/music/brahms.html">Brahms</a>
Relative URLs
If you don’t want to ever have to worry about going back and editing your
hyperlinks if your site structure changes then relative URLs are the way to go.
Relative URLs are more or less like shorthand that tells the browser to go
backward one or more directories to find the file.
Let's say you're on the page we referenced above, brahms.html (located in the
"music" folder) and you want to link back to the home page: (http://www.yoursite.
com/index.html)
Using a relative URL, you would tell the browser to go back 1 directory by using
the dot-slash method.
<a href="../index.html">Home</a>
The two dots followed by a slash instructs the browser to go up 1 more level to
get to the main (root) directory.
Creating Email Links
Creating email links are just as simple. All you need is the "mailto" function to get
this to work properly:
<a href="mailto:youraddress@email.com">Email Me</a>
So now you have the tools to create a very simplistic HTML page. Next, you’ll
discover how to do a few more advanced techniques to spice up your page.
Anchor Links
If you want to create a link that will take the visitor to another section of the page
rather than a new page or site, then you need to create an anchor link. There are
two steps to this process:
1) First, go to the place in your HTML code where you want the anchor to go.
This is the spot on the page that the browser will move to when a person clicks
on the anchor link.
Insert the code <a name="name1">Title</a> "name1" is just the name of the
anchor I chose. You can all it anything you want. Let's say you were setting up a
glossary and the A section starts here. You could name the anchor <a name="A"
>Title</a>. Remember this part is not visible to the visitor.
2) Now to link to that section of the page, use the hyperlink code:
<a href="#name1">click here</a>
Now when your visitors click on that link, they will be taken to that section of the
page.
Inserting Images
Once you have the image you want to use you can insert it into your web page.
Next you’ll need to do is upload the graphic to your web server. Your web hoster
will either provide the environment for you to upload your images or you'll have to
use an FTP program.
If you need help with FTP, click here.
When you upload the graphic, make sure you pay attention to what folder you’re
putting it into because that will affect how you write the HTML.
Let’s say you upload the graphic called "apple.gif" to your "images" folder on
your web server. The image folder is located inside your "root" directory.
Your HTML code will look like this:
<img src="images/apple.gif">
Now let’s say you have uploaded the graphic to the "fruit" folder/directory that is
located inside of the images folder then the code would appear as:
<img src="images/fruit/apple.gif">
The Alt Tag
If you want text to pop up when you run the mouse over the graphic, then you
need to add the alt tag.
<img src="images/apple.gif" alt="This is my apple">
Specify Height and Width
If you want to adjust the height and width of the image then you need to use the
height and width tags:
<img src="images/apple.gif" alt="This is my apple" height="100" width="150">
It is recommended that you always include the height and width of your images
because it makes your pages load faster.
Creating a Clickable Image
Linking images is helpful if you have buttons or banners on your site and you
want the visitor to be taken to another web page or site when they click on the
image. To accomplish this, use the following code:
<a href="http://www.the_linked_site.com"><img src="images/apple.gif" border="
0"></a>
The first part of the code tells the browser which site to go to and the second
part, of course, tells it where the image is located.
Indenting Text
To indent your text about an inch to the right, simply use the open and closing
<blockquote> tag around the text you want to indent.
<blockquote> This text will be indented indented </blockquote>
See how the code makes the text in the paragraph below behave:
sample text sample text sample text sample text sample text sample text sample
text sample text sample text sample text sample text sample text sample text
sample text sample text sample text sample text sample text sample text sample
text sample text
This text will be indented indented
Return to Index | Download this tutorial to your PC!
Special Characters
Code Symbol Description
™ ™ Trademark
& & Ampersand
® ® Registered trademark
© © Copyright
† † Dagger
» » Right pointing double angle quotation mark
« « Left pointing double angle quotation mark
— — Em-dash
° 30° Degree
¼ ¼ Quarter
½ ½ Half
¾ ¾ Three quarters
· · Middle dot
¡ ¡ Inverted exclamation mark
 | |  | |  | |  | |  | |  |
 |
| |
 |
| |
 |
| |
 |
| |
 |
| |
 |
Web Media Expert
Powerful Internet Marketing Solutions for your business!
Powerful Internet Marketing Solutions for your business!