HTML - THE BASICS Session TWO with Codehead - archive - Virtual Assistant Forums

Tess · #1 (**permalink**) 03-25-2008

NOTE: These archives, as well as ALL posted material on Virtual Assistant Forums, is copyrighted and may NOT be copied to another site under ANY circumstances unless otherwise noted. Please respect this free community feature!

Codehead: We're going to move into Session Two with the assumption that you were either with us live for the last session or have studied the first session (which was archived just over a week ago). Today we are going to see some more HTML concepts that build on the material that was presented in the fist session. Here is the link to the archived version of the first session: HTML - THE BASICS Session ONE with Codehead - archive

We'll be using Notepad again today - as we did last time, so please get yours open and ready

Today we will start with the concept of hyperlinks.

Hyperlinks are references to other pieces of content or pages on the web, either on the same site which we call it an 'internal link' or to another site which is called an 'external link'.

These are one of the most important elements on any web page because without them, there would be no navigation from page to page.

Now, open a new Notepad and copy and paste ALL of the following code into it (remember our TEMPLATE from last session?)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Links</title>
</head>
<body>
<a href="http://www.virtualassistantforums.com/">Virtual Assistant Forums</a>
</body>
</html>

Save it as link.html on your desktop and double click on the new file icon.
When your browser displays the page, click on your link! View my own example online and compare to your own page: http://www.virtualassistantforums.co..._css_link.html . Please take a moment to do this now and let me know if you have any questions. How does your own page look? Any problems? Does the link work?

Up to this point, we have only learned about a few basic HTML tags, such as <strong></strong> or <em></em>.

Hyperlink tags are different from basic HTML tags in that hyperlink tags introduce another concept: ATTRIBUTES.

In a hyperlink, 'href' is the attribute:
<a href="http://www.virtualassistantforums.com/">Virtual Assistant Forums</a>

Attributes have this general form: attribute name="attribute value" - They have a name followed by an equal sign followed by a value inside double quotes, for example: href="http://www.virtualassistantforums.com/"

Don't feel overwhelmed by these, you will learn more and memorize all of them as you use them more.

So here, href is the NAME of the attribute and http://www.virtualassistantforums.com/ is the VALUE of it.

Note that it is very important that you place the attribute value inside a pair of double quotes like this "http://www.virtualassistantforums.com/"

So, a hyperlink has this general form: <a href="THE URL GOES HERE">LINK TITLE GOES HERE</a>

From now on the tags we are going to learn will have ATTRIBUTES.

Please note that if you want to link to a page that is on *another* website, you need to include http:// at the beginning of the link like this:
<a href="http://www.virtualassistantforums.com/">Virtual Assistant Forums</a> . If you don't include http:// this link will be considered an internal link, that is - a link to a page on the same site or domain, and it will not open correctly.

Now, let's see what we can do with hyperlinks. Open a new Notepad file and copy and paste ALL of the following code into it:

As you'll recall from last session - I will use dashes to denote when a section of code starts and when it ends - when I tell you to copy/paste DON'T include the dashes. They're just placeholders

-------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Contact Us</title>
</head>
<body>
<h1>Contact Us</h1>
This is our contact page, to read about us please click <a href="about_us.html">here</a>.
</body>
</html>
-------------------------------------------------------

Save it as contact_us.html on your desktop.
Now, open another text editor and copy and paste ALL of the following code into it:

-------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>About Us</title>
</head>
<body>
<h1>About Us</h1>
This is our about us page, to contact us please click <a href="contact_us.html">here</a>.
</body>
</html>
----------------------------------------------------------

Save this one as about_us.html on your desktop and double click on the new file icon. View my own example online and compare to your own page: http://www.virtualassistantforums.co..._about_us.html

There are a few very important notes that I want to mention here:
1 - Notice the PAGE TITLE, it should reflect what the page is about exactly. A very big and common mistake is to have titles like "page 1", "home" etc.
2 - Notice the FILE NAME of the pages, they also should reflect what the page is about. DO NOT call your About Us page: page_1.html, *never*. This is good coding practice and also helps you find your pages more easily later from among the numerous page files that will make up your website.

Some people don't pay attention to these issues when building a website or maybe they just aren't aware, but the end result of ignoring best practices such as these is ending up with a low quality website and a possible mess later on. Again this is very, very important - make note of it now and utilize it to your advantage.

Now, lets see some more attributes a hyperlink can have, the next one is TARGET.

To see an example of TARGET open a new Notepad file and copy and paste ALL of the following code into it:

-------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Target Attribute</title>
</head>
<body>
<a href="http://www.virtualassistantforums.com/" target="_blank">Virtual Assistant Forums</a>
</body>
</html>
-------------------------------------------------------

Save it as target.html on your desktop and double click on the new file icon. When your browser displays the page, click on your link! View my own example online and compare to your own page: http://www.virtualassistantforums.co...nk_target.html
Please take a moment to do this now and let me know if you have any questions. What happens when you click the link in this example that is different from the previous link example you created?

Member: The link opens in a separate page.

Codehead: Good!

So to make a link open in a new window, add this to it: target="_blank"
A link like this: <a href="LINK URL" target="_blank">LINK TITLE</a> will always open in a new window!

I know these elements can all feel a bit piecemeal right now - but bear in mind these early sessions give you a set of tools that ultimately will come together to help you form a proper web page. We'll continue to build on each session and will ulitmately help you meld what you've learned to be confident and skilled enough to code an entire web page. For now, you're working with the individual pieces of the puzzle

As with all HTML code, you will learn to remember these various items through practice and use - like anything, working to become familiar with the terms, tags, attributes etc. will help speed up your work over time. Keep practicing and you WILL retain the info.

Now let's see how we can add images to web pages.

These days, images are a VERY important element of all web pages. You won't find a web page that doesn't have some sort of an image on it. Logos, icons, graphics, photos, and banner ads are all different ways that web developers and designers use images to make a web page look nicer or add clarity to it - images can also make a website easier to navigate.

We'll need an image to start, here is an image I prepared for us to use today: http://www.virtualassistantforums.co...ses/mooshy.jpg

Please open the link and then right click on the image and click "Save Picture As..." or "Save Image As..." (Depending on your browser) and save it **on your desktop***.

Rename the file - mooshy

(For those of you who don't know him, this is Mooshy, our dog, we found him in the streets while we were living in India when he was four weeks old and very sick and have raised him to good health and kept him with us ever since!

)

(Content cont'd in next post, scroll down to continue reading)

Tess · #2 (**permalink**) 03-25-2008

Now, let's make a page with Mooshy's image on it.

Open a new Notepad file and copy and paste ALL of the following code into it:

--------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Images</title>
</head>
<body>
<h1>Mooshy</h1>
<img src="mooshy.jpg">
</body>
</html>
--------------------------------------------------------

Save it as image.html on your desktop and double click on the new file icon. View my own example online and compare to your own page:
http://www.virtualassistantforums.co...css_image.html
Please take a moment to do this now and let me know if you have any questions.

Note that the image file (mooshy.jpg) must be in the same folder as the HTML file you made (image.html). For example they both have to be on your desktop!

As you can see, the IMAGE tag "img" doesn't have a closing tag. So is it's not like <strong></strong> tag which has to have an opening tag and a closing tag.

It also has an attribute called "src" (SOURCE) which we use to point to the image we want to display.

Here is the most basic form of an image tag: <img src="PATH OR URL TO IMAGE">

SOME SIDE NOTES:
When you are building your own website you will want to create a folder within your public_html file called images - this is where you will upload and store all images you use on your site. Name your image files in a way that will help you know easily what each one is. So, let's say you are building your own website and want to include your logo in your webpage design you would upload the image to your own website's images folder and use the following code: <img src="http://www.yourownwebsiteurl.com/ima...nimagefile.jpg">

Also note that, making a folder called images is very important and helps you organize your files and folders on your website, you can call it anything really it doesn't have to be called images, that is just your own personal preference.

Common image file types include JPG, GIF, PNG (a transparent image with no background)

You can also display an external image on your pages, that is, an image that is hosted on another site.

To do this you need to provide the **complete** URL to that image.
[Keep in mind - it's not polite to link to and use images from someone else's site - it's best practice to upload your own images to your own website files. Still, we offer the info because it's useful in many situations.]

To see an example of using an image from another site open a new text editor and copy and paste ALL of the following code into it:

-------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>External Images</title>
</head>
<body>
<img src="http://www.virtualassistantforums.com/images/logo/logo.gif">
</body>
</html>
-------------------------------------------------------

Save it as external_image.html on your desktop and double click on the new file icon. View my own example online and compare to your own page: http://www.virtualassistantforums.co...nal_image.html
Please take a moment to do this now and let me know if you have any questions. How does your own page look? Any problems?

Here's how to find the URL to any image on any webpage: There are two types of images on web pages, one is the type we have used in our example, and the other is a background image, which we will get to see later. If the image is placed on a page with an image tag, then it's easier to find it's URL, to do so, open this page: http://www.virtualassistantforums.com/

Now right click on the logo and click "Properties", you will see some information about the image and it's URL.

In FireFox, the URL is cut off but FireFox provides a nicer way of doing this. If you are on FireFox, right click on the image and click "Copy Image Location", then paste it in your code.

This is the path to the image where it is hosted - the code the designer used to display the image on the webpage you are viewing.
Now, let's see some more attributes of the image tag.

There is an attribute called "alt" (ALTERNATIVE TEXT), which is very important for a few reasons:
1 - Say for some reason, the image you are displaying on your page does not exist anymore, or the browser couldn't load it completely or the browser doesn't support images or the person who is using your site is blind and can't see the image,or the user has low bandwidth and decided not to see any graphics; in these cases an ALT attribute will be used instead of the image, so it is very important that you use an ALT attribute that describes the image.

To see an example of this this open a new Notepad file and copy and paste ALL of the following code into it:

-------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>ALT Attribue</title>
</head>
<body>
<img src="SOME IMAGE THAT DOESN'T EXIST" alt="Mooshy's picture">
</body>
</html>
-------------------------------------------------------

Save it as image_alt.html on your desktop and double click on the new file icon. View my own example online and compare to your own page:
http://www.virtualassistantforums.co...image_alt.html
Please take a moment to do this now and let me know if you have any questions. How does your own page look? Any problems?

As you can see, this image tag is pointing to an image that doesn't exist, and the browser displays the alternative text instead.

2 - For SEO; search engines like Google are also "blind", that is, they won't literally see your images, and the only way they can determine what the image is all about is from the alt attribute. Always having nice alternative text (alt attributes) for all of the images you place in your web pages and using appropriate keywords in them will help your search engine rankings too.

I'm NOT advising that you do something like this: <img src="SOME IMAGE" alt="Virtual Assistant, Virtual Assitant, Virtual Assitant, Virtual Assitant, Virtual Assitant, Virtual Assitant">

Modern search engines are *really* good at detecting what would be considered SEO-spam, and they *will* penalize you and put you in a black list; effectively kicking your site out of the search ranks indefinitely. So always use something very short and descriptive, something applicable to the image, something that would make sense to a user who cannot 'see' your image.

(Content cont'd in next post, please scroll down to continue reading)

Tess · #3 (**permalink**) 03-25-2008

Let's look at some more examples of how to use images on a web page.

Open a new Notepad and copy and paste ALL of the following code into it: (We will borrow some text from Virtual Assistant forums

)

-------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Image With Text</title>
</head>
<body>
<img src="mooshy.jpg" alt="Mooshy's picture"><br><br>
As a business owner your goal is to be able to participate in and manage as many processes of growth and expansion as possible, and HTML can be a very empowering skill to learn - but it intimidates many and is often avoided in favor of free templates and cheap assistance. But it doesn't have to be difficult to learn and practice some basic tips and tricks that will allow you to update and manage your website - or even build one from scratch on your own! This new series aims to help you do just that!
</body>
</html>
-------------------------------------------------------

Save it as image_with_text.html on your desktop and double click on the new file icon. View my own example online and compare to your own page:
http://www.virtualassistantforums.co...with_text.html
Please take a moment to do this now and let me know if you have any questions. How does your own page look? Any problems?

Now let's make the image appear on the left and wrap the text around it:

Open a new text editor and copy and paste ALL of the following code into it:

---------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Image on Left</title>
</head>
<body>
<img src="mooshy.jpg" alt="Mooshy's picture" align="left">
As a business owner your goal is to be able to participate in and manage as many processes of growth and expansion as possible, and HTML can be a very empowering skill to learn - but it intimidates many and is often avoided in favor of free templates and cheap assistance. But it doesn't have to be difficult to learn and practice some basic tips and tricks that will allow you to update and manage your website - or even build one from scratch on your own! This new series aims to help you do just that!
</body>
</html>
---------------------------------------------------------

Save it as image_on_left.html on your desktop and double click on the new file icon. View my own example online and compare to your own page: http://www.virtualassistantforums.co...e_on_left.html
Please take a moment to do this now and let me know if you have any questions. How does your own page look? Any problems?

So "align" is another attribute that tells the browser where you want the image to be, but the only problem here is that the text and the image don't have any space between them and it doesn't look very good, it's cramped!

To fix this we have to use 2 other attributes called "hspace" which defines the white space on the left and right side of the image.

The other attribute is "vspace" which defines the white apace on top and the bottom of the image.

These terms are are shorthand for "horizontal space" and "vertical space".

The measurement for the white space is pixels. A pixel is the tiniest point in a graphic image or your screen. The screen you are seeing on your monitor right now is made out of 1,000s of these tiny points (pixels).

Let's try an example of this now, open a new Notepad and copy and paste ALL of the following code into it:

---------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Left Aligned Image With Vspace and Hspace</title>
</head>
<body>
<img src="mooshy.jpg" alt="Mooshy's picture" align="left" hspace="5" vspace="5">
As a business owner your goal is to be able to participate in and manage as many processes of growth and expansion as possible, and HTML can be a very empowering skill to learn - but it intimidates many and is often avoided in favor of free templates and cheap assistance. But it doesn't have to be difficult to learn and practice some basic tips and tricks that will allow you to update and manage your website - or even build one from scratch on your own! This new series aims to help you do just that!
</body>
</html>
---------------------------------------------------------

Save it as left_aligned_image_with_hspace _vspace.html on your desktop and double click on the new file icon. View my own example online and compare to your own page:
http://www.virtualassistantforums.co...ce_vspace.html
How does your own page look? Any problems?

As you can see, this looks much nicer.

Now, open a new text editor and copy and paste ALL of the following code into it:

---------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Right Aligned Image With Vspace and Hspace</title>
</head>
<body>
<img src="mooshy.jpg" alt="Mooshy's picture" align="right" hspace="5" vspace="5">
As a business owner your goal is to be able to participate in and manage as many processes of growth and expansion as possible, and HTML can be a very empowering skill to learn - but it intimidates many and is often avoided in favor of free templates and cheap assistance. But it doesn't have to be difficult to learn and practice some basic tips and tricks that will allow you to update and manage your website - or even build one from scratch on your own! This new series aims to help you do just that!
</body>
</html>
---------------------------------------------------------

Save it as right_aligned_image_with_hspac e_vspace.html on your desktop and double click on the new file icon. View my own example online and compare to your own page:
http://www.virtualassistantforums.co...ce_vspace.html
How does your own page look? Any problems?

Here are all the examples from this session: http://www.virtualassistantforums.co...ml_css_s2.html

That's it for this session and please go ahead and ask your questions!

Member: When you did the 'href' coding, you started and ended it with an "a", does the next one start with a "b"?

Codehead: No <a href="THE URL">LINK TITLE</a> is the general form of the tag. All the links start and end with "a"

Member: One quick question...on Images. Images stored on your site - do use a full URL to point to the image?

Codehead: You can use the full URL or a relative path. A relative path is like this:
Imagine your page is in your public_html and your images are in your images folder in public_html so you have this:
public_html/your_page.html
public_html/images/logo.gif

So now a relative path will look like this:
<img src="images/logo.gif">

That is: it's relative to the folder your HTML page is in.

Member: ok ..... the puzzle pieces are starting to come together.

Codehead: Please let me know if this makes sense.

Member: it does - - I see where it is "pointing" to.

Codehead: Good, any other questions? You can also ask your questions later, at any time, on the forums in the Website Coding and Design section.

See you all for Session THREE!!