Profsr Home

Registration

Tutorials Area



CONTENTS

Lesson 1
Preparation



Lesson 2
The Stylesheet



Lesson 3
Basic Tags



Lesson 4
Tables



Lesson 5
Lists



Lesson 6
Java



Profsr.com
Simple HTML Tutorial


LESSON 3 - THE BASIC TAGS







In HTML, a tag is a formatting element. It is enclosed in <     > and it usually, but not always, has an accompanying ending tag like: </     >.

For example, to get a word to appear as bold to the browser, you would code it like this:
          to appear as <b>bold</b> to the browser,
where the <b> tag tells it to start bold and the </b> says to stop bold.

XML tags are written the same way. In addition, in XML you will create your own tags for all kinds of applications. In XML, tags are case-sensitive. Uppercase and lowercase matters. In XML <b> and <B> are not the same. So, get used to writing everything in lowercase from now on.



The page structure

A web page has a basic structure made up of one main tag and two sections, like this:

          <html>

               <head>

                    Everything in this section serves as
                    instructions for the browser.
                    It is not displayed to the reader.

               </head>

               <body>

                    This is the actual web page content.
                    This is what the reader sees
                    when he opens the page.

               </body>

          </html>





The <head> section

There are 3 tags that you should always have in this section.

The third one we've already talked about: that's the stylesheet tag. It has to be inside the <head> section.

The other two are: <title>       </title>and <description>     </description>

They are not absolutely necessary but, they are highly recommended. They identify your web page to the world. Think about it: if you're going to all this trouble to create a web page it's usually because you want people to see it. Otherwise, why bother? To get people to come look at your web page you will have to get it listed in search engines and directories - places like Yahoo and Google. There are a lot of search engines out there. When they list a page they show the title and the description. Some of them will refuse to list the page if it doesn't have a title and a description.

The title should be short, descriptive but not too flashy. When you add a page to your Bookmarks or Favorites it's the title that's recorded along with the URL. That's why it's important that it be descriptive. Look at the bookmarks that you've got stored. Can you tell, from the title, what each one of them refers to? You should be able to.

The description is a short paragraph (maximum 256 characters) that describes the content of the page. It normally appears in the result of a search and is meant to give the user an idea of the contents of the page to encourage him to want to find out more. It should contain the keywords that relate to the page: if it's a tutorial on HTML and XML, it should contain those words so that your page has a chance of appearing when someone does a search on one of those words.

Note that the preceding comments apply mostly to a home page, the one where you normally land when you go to the site. However, when a search engine indexes your site it may index several pages in addition to the home page. On a search, the user may be referred to one of the following pages and not necessarily to the home page. Basically, every page should have a title and a short description, which can be the same as the home page. That's also why it's important to have a link to the home page on every page of the site. We'll see later how to write links.

There are several other tags that you can put into this section. They deal mostly with making the page more visible to search engines. If you're building an e-commerce site it's important that your page appear as high as possible in a search. That is an art in itself. To find out more about this subject, go to Lesson 7 in the Web design tutorial.





The <body> section

This is where you write the actual web page text.

We're not going to go into all the details of the simple formatting tags like bold, italic, underline and center because your HTML editor probably does all that for you like a word processor. If you want to bold some text, select it then hit the Bold button on the toolbar and it's done.

If you're a real beginner at this there are a couple of annoying little details that you may be discovering: when you hit Return in HTML you get a line change but it does not appear in the browser when you display the page; and, all spaces after the first one are ignored by the browser.

To get a line change in the browser you must insert a <br> (break tag). If you insert multiple <br>'s you get blank lines. At the end of the previous paragraph in this text there are 2 <br> tags: the first one does a linefeed to the next line and the second one gives a blank line.

XML tip: in XML, every tag must have a closing tag. It's easy with <b> and </b> but it's not obvious with something like <br>. But it should be done. In theory you should write <br> and </br> together. But that's not very practical. The way to do it so that it's acceptable to XML is to include the slash in the tag as in: <br/>. The same technique will apply to other tags. For example, <hr> which displays a horizontal line and doesn't have a closing tag will now be written as: <hr/>.

To insert whitespace in your text you use the space character: &nbsp;. And it's not a very big space. To diplay a space of this size: <     > I have to use 5 spaces: <&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;>. There is no tab character in HTML. The only way to indent text is to use multiple space characters. That's why the next two lessons will be important: with Tables you can do anything. And with Lists you can indent any way you want.


Pictures

www.nancycarlson.com

What's a web page without pictures!

To insert a picture you use the image tag:
<img src="../pictures/capblm.gif" border="0" width="45" height="52" alt="Letter M" />

Letter M

src is the source; you give the path and filename of the picture to display. I find it easier to store all pictures in a separate directory rather than with the web page - often the same picture will be used in many pages in different directories and won't have to be copied to different places.

width and height give the size of the picture; if you use the HTML editor to insert the picture it probably put those values in automatically; if you don't have them don't worry about it; if they are included it may make the page load a bit faster for your user.

alt is a caption that pops up when the cursor goes over the picture or if the picture cannot be displayed for some reason; it is also used by search engines when indexing the page.

border specifies the size of the border around the picture; 0 means no border.

XML tip: all attribute values must be in quotes; in HTML, border=0 and width=45 are valid values; in XML there must be quotes around 0 and 45; they may be single quotes or double quotes, as long as they are consistent.
And note that <img> is a standalone tag: all the information is contained within the tag; there is no need for a closing tag; that's why we end the tag with /.






Creating LINKS

We're going to look at the 4 main types of link that you will probably use in your web page. There are several others, such as links to FTP sites that we won't look at now.

The 4 types of interest are:
  1. link inside the same page

  2. link to another page in the same site

  3. link to another web site

  4. email link



No. 1:
You've just seen an example of the first type although it may not be obvious. If you clicked on the link at no1, you jumped to this paragraph. The same happens when you click on the link "Top" above - you jump to the top of the page.

The way to do that is to create an anchor or paragraph title where you want the link to end.

At the top of this page, just after <body>, there is an anchor like this:
<a name="start"></a>

Whenever I want a link to the top of the page I write it like this:
<a href="#start">Top</a>

The # sign tells it it's an internal link.

At the top of this section there is an anchor:
<a name="no1"></a>

When you click on the link you do:
<a href="#no1">link to another page in the same site</a>
which brings you down to this section.
The other 3 links are written the same way.


No. 2:
To link to another page in the same site you do an anchor again, but you specify the path and the filename of the web page.

If it's in the same directory, only the filename is required:
<a href="nextpage.html">Next page</a>

If the page is in another directory, the path is required. For example, if the directory is on the same level, I have to go back one level and then down the other directory:
<a href="../direc2/nextpage.html">Next page</a>

Note that the stuff that's displayed, between the <a> and the </a>, can also be a picture.
Instead of "Next page" I could display an arrow:
<a href="../direc2/nextpage.html"><img src="../pictures/right_arrow.gif" /></a>


No. 3:
When you link to another web site you put a URL in the anchor:
<a href="http://www.freesite.com" target="top">Free stuff</a>

Note the addition of the attribute: target="top". When you link to another site without target that page opens in your current browser window. If you start to surf from there you may never come back here. But I want you to come back, because I like you! So, by adding target="top", the other site will open in a new browser window. When you're done surfing there and you close the window you'll be right back on my page.


No. 4:
To create a link that's an email address, use the mailto: attribute.

<a href="mailto:ml@profsr.com">Professor Mike</a>

When you click on that link the browser will automatically open your default email application in compose mode and will insert the email address in the To: field.