HTML Lesson 1: Let's get started

Lesson 1: Let's get started

In this first lesson, you will get a brief presentation of the tools you need to make a website.

What is needed?

Most likely you already have everything you need.
You have a "browser". A browser is the program that makes it possible to browse and open websites. Right now you are looking at this page in your browser.
It is not important which browser you use. The most common is Microsoft Internet Explorer. But there are others such as Opera and Mozilla Firefox and they can all be used.
You might have heard about, or even used, programs such as Microsoft FrontPage, Macromedia Dreamweaver or even Microsoft Word, which can - or claim that they can - create websites for you. Forget these programs for now! They are not of any help to you when learning how to code your own website.
Instead, you need a simple text editor. If you are using Windows you can use Notepad, which is usually found in the start menu under Programs in Accessories:

If you are not using Windows, you can use a similar simple text editor. For example, Pico (Linux) or TextEdit (Mac).
Notepad is a very basic text editing program which is excellent for coding because it does not interfere with what you are typing. It gives you complete control. The problem with many of the programs that claim they can create websites is that they have a lot of standard functions, which you can choose from. The downside is that, everything needs to fit into these standard functions. Thus, this type of programs often cannot create a website exactly as you want it. Or - even more annoyingly - they make changes to your hand-written code. With Notepad or other simple text editors, you only have yourself to thank for your successes and errors.
A browser and Notepad (or a similar simple text editor) are all you need to go through this tutorial and make your own websites.

Do I need to be online?

You do not need to be connected to the Internet - neither while reading this tutorial, nor while making your websites.
If you want to avoid being online while reading this tutorial, you can either print it out or simply disconnect from the Internet while reading on screen. You can make the website on your computer's hard disk and upload it to the Internet when it is finished.

What's next?

Go to the next lesson and read about HTML before the fun really starts in Lesson 3.

HTML Lesson 2: What is HTML

Lesson 2: What is HTML

This lesson will give you a brief presentation of your new friend, HTML.

What is HTML

HTML is the "mother tongue" of your browser.
To make a long story short, HTML was invented in 1990 by a scientist called Tim Berners-Lee. The purpose was to make it easier for scientists at different universities to gain access to each other's research documents. The project became a bigger success than Tim Berners-Lee had ever imagined. By inventing HTML he laid the foundation for the web as we know it today.
HTML is a language, which makes it possible to present information (e.g. scientific research) on the Internet. What you see when you view a page on the Internet is your browser's interpretation of HTML. To see the HTML code of a page on the Internet, simply click "View" in the top menu of your browser and choose "Source".

For the untrained eye, HTML code looks complicated but this tutorial will help you make sense of it all.

What can I use HTML for?

If you want to make websites, there is no way around HTML. Even if you're using a program to create websites, such as Dreamweaver, a basic knowledge of HTML can make life a lot simpler and your website a lot better. The good news is that HTML is easy to learn and use. In just two lessons from now you will have learned how to make your first website.
HTML is used to make websites. It is as simple as that!

Okay, but what does H-T-M-L stand for?

HTML is an abbreviation of "HyperText Mark-up Language" - which is already more than you need to know at this stage. However, for the sake of good order, let us explain in greater detail.

• Hyper is the opposite of linear. In the good old days - when a mouse was something the cat chased - computer programs ran linearly: when the program had executed one action it went to the next line and after that, the next line and so on. But HTML is different - you can go wherever you want and whenever you want. For example, it is not necessary to visit MSN.com before you visit HTML.net.
• Text is self-explanatory.
• Mark-up is what you do with the text. You are marking up the text the same way you do in a text editing program with headings, bullets and bold text and so on.
• Language is what HTML is. It uses many English words.

In this tutorial you will learn so-called XHTML (Extensible HyperText Mark-up Language) which, in short, is a new and more well-structured way of writing HTML.
Now you know what HTML (and XHTML) stands for let's get started with what it is all about: making websites.

HTML Lesson 3: Elements and tags

Lesson 3: Elements and tags

You are now ready to learn the essence of HTML: elements.
Elements give structure to a HTML document and tells the browser how you want your website to be presented. Generally elements consists of a start tag, some content, and an end tag.

"Tags"?

Tags are labels you use to mark up the begining and end of an element.
All tags have the same format: they begin with a less-than sign "<" and end with a greater-than sign ">".
Generally speaking, there are two kinds of tags - opening tags: <html> and closing tags: </html>. The only difference between an opening tag and a closing tag is the forward slash "/". You label content by putting it between an opening tag and a closing tag.
HTML is all about elements. To learn HTML is to learn and use different tags.

Can you show me some examples?

Okay, the element em emphasis text. All text between the opening tag <em> and the closing tag </em> is emphasised in the browser. ("em" is short for "emphasis".)
Example 1:

 
 <em>Emphasised text.</em>
 
 

Will look like this in the browser:

Emphasised text.

The elements h1, h2, h3, h4, h5 and h6 is used to make headings (h stands for "heading"), where h1 is the first level and normally the largest text, h2 is the second level and normally slightly smaller text, and h6 is the sixth and last in the hierarchy of headings and normally the smallest text.
Example 2:

 
 <h1>This is a heading</h1>
 <h2>This is a subheading</h2>
 
 

Will look like this in the browser:

This is a heading

This is a subheading

So, I always need an opening tag and a closing tag?

As they say, there's an exception to every rule and in HTML the exception is that there are a few elements which both open and close in the same tag. These so-called empty elements are not connected to a specific passage in the text but rather are isolated labels, for example, a line break which looks like this: <br />.

Should tags be typed in uppercase or lowercase?

Most browsers might not care if you type your tags in upper, lower or mixed cases. <HTML>, <html> or <HtMl> will normally give the same result. However, the correct way is to type tags in lowercase. So get into the habit of writing your tags in lowercase.

Where do I put all these tags?

You type your tags in an HTML document. A website contains one or more HTML documents. When you surf the Web, you merely open different HTML documents.
If you continue to the next lesson in 10 minutes you will have made your first website.

HTML Lesson 4: Create your first website

Lesson 4: Create your first website

With what you learned in the previous lessons, you are now only minutes away from making your first website.

How?

In Lesson 1 we looked at what is needed to make a website: a browser and Notepad (or similar text editor). Since you are reading this, you most likely already have your browser open. The only thing you need to do is to open an extra browser window (open the browser one more time) so you can read this tutorial and see your new website at the same time.
Also, open Notepad (in Accessories under Programs in the Start menu):

Now we are ready!

What can I do?

Let us start with something simple. How about a page that says: "Hurrah! This is my first website." Read on and you'll find out how simple it is.
HTML is simple and logical. The browser reads HTML like you read English: from the top down and from left to right. Thus, an simple HTML document begins with what should come first and ends with what should come last.
The first thing you need to do is to tell the browser that you will "talk" to it in the language HTML. This is done with the tag <html> (no surprises there). So before you do anything else type "<html>" in the first line of your document in Notepad.
As you may recall from the previous lessons, <html> is an opening tag and must be closed with a closing tag when you are finished typing HTML. So to make sure you don't forget the HTML close tag now type "</html>" a couple of lines down and write the rest of the document between <html> and </html>.
The next thing your document needs is a "head", which provides information about your document, and a "body", which is the content of the document. Since HTML is nothing if not logical, the head (<head> and </head>) is on top of the body (<body> and </body>).
Your document should now look like this:

 
 <html>

   <head>
   </head>

   <body>
   </body>

 </html>
 
 

Note how we structured the tags with new lines (using the Enter key) as well as indents (using the Tab key). In principle, it does not matter how you structure your HTML document. But to help you, and others reading your coding, to keep an overview, it is strongly recommended that you structure your HTML in a neat way with line breaks and indents, like the above example.
If your document looks like the above example, you have made your first website - a particularly boring website and probably not what you dreamt of when you started this tutorial but still some sort of a website. What you have made will be the basic template for all your future HTML documents.

So far so good, but how do I add content to my website?

As you learnt earlier, your HTML document has two parts: a head and a body. In the head section you write information about the page, while the body contains the information that constitutes the page.
For example, if you want to give the page a title which will appear in the top bar of the browser, it should be done in the "head" section. The element used for a title is title. I.e. write the title of the page between the opening tag <title> and the closing tag </title>:

 
 <title>My first website</title>
 
 

Note that this title will not appear on the page itself. Anything you want to appear on the page is content and must therefore be added between the "body" tags.
As promised, we want the page to say "Hurrah! This is my first website." This is the text that we want to communicate and it therefore belongs in the body section. So in the body section, type the following:

 
 <p>Hurrah! This is my first website.</p>
 
 

The p in <p> is short for "paragraph" which is exactly what it is - a text paragraph.
Your HTML document should now look like this:

 
 <html>

   <head>
   <title>My first website </title>
   </head>

   <body>
   <p>Hurrah! This is my website.</p>
   </body>

 </html>
 
 

Done! You have now made your first real website!
Next all you have to do is to save it to your hard drive and then open it in your browser:

• In Notepad choose "Save as..." under "File" in the top menu.
• Choose "All Files" in the "Save as type" box. This is very important - otherwise, you save it as a text document and not as an HTML document.
• Now save your document as "page1.htm" (the ending ".htm" indicates that it is an HTML document. ".html" gives the same result. I always use ".htm", but you can choose whichever of the two extensions you prefer). It doesn't matter where you save the document on your hard drive - as long as you remember where you saved it so you can find it again.

Now go to the browser:

• In the top menu choose "Open" under "File" (or press CTRL+O).
• Click "Browse" in the box that appears.
• Now find your HTML document and click "Open".

It now should say "Hurrah! This is my first website." in your browser. Congratulations!
If you absolutely want the whole world to see your masterpiece right away, you can jump to Lesson 13 and learn how to upload your page to the Internet. Otherwise, be patient and read on. The fun has just begun.

HTML Lesson 5: What have you learned so far?

Lesson 5: What have you learned so far?

Always start with the basic template we made in the previous lesson:

 
 <html>
   <head>
   <title></title>
   </head>

   <body>
   </body>

 </html>
 
 

In the head section, always write a title: <title>The title of your page</title>. Notice how the title will be shown in the upper left corner of your browser:

The title is especially important because it is used by search engines (such as Google) to index your website and is shown in the search results.

In the body section, you write the actual content of the page. You already know some of the most important elements:

 
 <p>Is used for paragraphs.</p>
 <em>Emphasis text.</em>
 <h1>Heading</h1>
 <h2>Subhead</h2>
 <h3>Sub-subhead</h3> 
 
 

Remember, the only way to learn HTML is by trial and error. But don't worry, there is no way you can destroy your computer or the Internet. So keep experimenting - that is the best way to gain experience.

What is that supposed to mean?

Nobody becomes a good website creator by learning the examples in this tutorial. What you get in this tutorial is simply a basic understanding of the building blocks - to become good you must use the building blocks in new and creative ways.
So, get out in the deep water and stand on your own two feet... Okay, maybe not. But give it a go and experiment with what you have learned.

So what's next?

Try to create a few pages yourself. For instance, make a page with a title, a heading, some text, a subhead and some more text. It is perfectly okay to look in the tutorial while you make your first pages. But later, see if you can do it on your own - without looking.

HTML Lesson 6: A few more elements

Lesson 6: A few more elements

Did you manage to make a few pages on your own? If not, here is an example:

 
 <html>

   <head>
   <title>My website</title>
   </head>

   <body>
   <h1>A Heading</h1>
   <p>text, text text, text</p>
   <h2>Subhead</h2>
   <p>text, text text, text</p>
   </body>
   
 </html>
 
 

Now what?

Now it is time to learn seven new elements.
In the same way you emphasise the text by putting it between the openning tag <em> and the closing tag </em>, you can give stronger emphasis by using the openning tag <strong> and the closing tag </strong>.
Example 1:

 
 <strong>Stronger emphasis.</strong>
 
 

Will look like this in the browser:

Stronger emphasis.

Likewise, you can make your text smaller using small:
Example 2:

 
 <small>This should be in small.</small>
 
 

Will look like this in the browser:

This should be in small.

Can I use several elements at the same time?

You can easily use several elements at the same time as long as you avoid overlapping elements. This is best illustrated by an example:
Example 3:
If you want to emphasise small text, it must be done like this:

 
 <em><small>Emphasised small text</small></em>
 
 

And NOT like this:

 
 <em><small>Emphasise small text</em></small>
 
 

The difference is that in the first example, we closed the tag we first opened last. This way we avoid confusing both ourselves and the browser.

More elements!

As mentioned in Lesson 3 there are elements which are opened and closed in the same tag. These so-called empty elements are not connected to a specific passage in the text but rather are isolated labels. An example of such a tag is <br /> which creates a forced line break:
Example 4:

 
 Some text<br /> and some more text in a new line 
 
 

Will look like this in the browser:

Some text
and some more text in a new line

Notice that the tag is written as a contraction of an opening and closing tag with an empty space and a forward slash at the end: <br />.
Another element that is opened and closed in the same tag is <hr /> which is used to draw a horizontal line ("hr" stands for "horizontal rule"):
Example 5:

 
 <hr />
 
 

Will look like this in the browser:

---

Examples of elements that needs both an opening tag and a closing tag - as most elements do - is ul, ol and li. These elements are used when you want to make lists.
ul is short for "unordered list" and inserts bullets for each list item. ol is short for "ordered list" and numbers each list item. To make items in the list use the li tag ("list item"). Confused? See the examples:
Example 7:

 
 <ul>
   <li>A list item</li>
   <li>Another list item</li>
 </ul>
 
 

will look like this in the browser:

• A list item
• Another list item

Example 8:

 
 <ol>
   <li>First list item</li>
   <li>Second list item</li>
 </ol>
 
 

will look like this in the browser:

1. First list item
2. Second list item

Phew! Is that all?

That is all for now. Again, experiment and make your own pages using some of the seven new elements you learned in this lesson:

 
 <strong>Stronger emphasis</strong>
 <small>Small text</small>
 <br /> Line shift
 <hr /> Horizontal line
 <ul>List</ul>
 <ol>Ordered list</ol>
 <li>List item</li>
 
 

HTML Lesson 7: Attributes

Lesson 7: Attributes

You can add attributes to a number of elements.

What is an attribute?

As you probably remember, elements give structure to a HTML document and tells the browser how you want your website to be presented (for example, <br /> informs the browser to make a line break). In some elements you can add more information. Such additional information is called an attribute.
Example 1:

 
 <h2 style="background-color:#ff0000;">My friendship with HTML</h2>
 
 

Attributes are always written within a start tag and are followed by an equals sign and the attribute details written between inverted commas. The semicolon after the attribute is for separating different style commands. We will get back to that later.

What is the catch?

There are many different attributes. The first one you will learn is style. With the style attribute you can add layout to your website. For instance a background colour:
Example 2:

 
 <html>
   
   <head>
   </head>

   <body style="background-color:#ff0000;">
   </body>

 </html>
 
 

will show a completely red page in the browser - go ahead and see for yourself. We will explain in greater detail how the colour system works in a few moments.
Note that some tags and attributes use US spelling i.e. color instead of colour. It is important that you are careful to use the same spelling as we use in the examples in this tutorial - otherwise, browsers will not be able to understand your codes. Also, don't forget to always close the inverted commas (quotation marks) after an attribute.

How did the page become red?

In the above example, we asked for the background colour with the code "#ff0000". This is the colour code for red using so called hexadecimal numbers (HEX). Each colour has its own hexadecimal number. Here are some examples:
White: #ffffff
Black: #000000 (zeros)
Red: #ff0000
Blue: #0000ff
Green: #00ff00
Yellow: #ffff00
A hexadecimal colour code consists of # and six digits or letters. There are more than 1000 HEX codes and it is not easy to figure out which HEX code is tied to a specific colour.

You can also use the English name for the most common colours (white, black, red, blue, green and yellow).
Example 3:

 
 <body style="background-color: red;">
 
 

Enough about colours. Let's get back to the attributes.

Which elements can use attributes?

Different attributes can be applied to most elements.
You will often use attributes in tags such as the body tag while you will rarely use attributes in, for example, a br tag since a line break normally is a line break without any parameters to adjust.
Just as there are many different elements, so there are many different attributes. Some attributes are tailor made for one particular element while others can be used for many different element. And vice versa: some elements can only contain one kind of attribute while others can contain many.
It may sound a bit confusing but once you get acquainted with the different attributes it is actually very logical and you will soon see how easy they are to use and how many possibilities they provide.
This tutorial will introduce you to the most important attributes.

Exactly what parts does an element consist of?

Generally an elements consist of a start tag with or without one or more attributes, some content and an end tag. Simple as that. See the illustration below.

HTML Lesson 9: Images

Lesson 9: Images

Wouldn't it be great if you could have an image of actor and music legend David Hasselhoff right in the centre of your page?

That sounds like a bit of a challenge...

Maybe, but in fact it is pretty easy to do. All you need is an element:
Example 1:

 
 <img src="david.jpg" alt="David" />
 
 

would look like this in the browser:

All you need do is first tell the browser that you want to insert an image (img) and then where it is located (src, short for "source"). Do you get the picture?
Notice how the img element is opened and closed using the same tag. Like the <br /> tag, it is not tied to a piece of text.
"david.jpg" is the name of the image file you want to insert in your page. ".jpg" is the file type of the image. Just like the extension ".htm" shows that a file is an HTML document, ".jpg" tells the browser that a file is a picture. There are three different types of image file types you can insert into your pages:

• GIF (Graphics Interchange Format)
• JPG / JPEG (Joint Photographic Experts Group)
• PNG (Portable Network Graphics)

GIF images are usually best for graphics and drawings, while JPEG images are usually better for photographs. This is for two reasons: first, GIF images only consist of 256 colours, while JPEG images comprise of millions of colours and second, the GIF format is better at compressing simple images, than the JPEG format which is optimized for more complex images. The better the compression, the smaller the size of the image file, the faster your page will load. As you probably know from your own experience, unnecessarily 'heavy' pages can be extremely annoying for the user.
Traditionally, the GIF and JPEG formats have been the two dominant image types, but lately, the PNG format has become more and more popular (primarily at the expense of the GIF format). The PNG format contains in many ways the best of both the JPEG and GIF format: millions of colours and effective compressing.

Where do I get my images from?

To make your own images, you need an image editing program. An image editing program is one of the most essential tools you need to create beautiful websites.
Unfortunately, no good image editing programs comes with Windows or other operating systems. Thus, you might consider investing in either Paint Shop Pro, PhotoShop or Macromedia Fireworks, which are three of the best image editing programs currently on the market.
However, as we said before, it will not be necessary to buy expensive programs to complete this tutorial. For now, you can download the excellent image editing program IrfanView which is so-called freeware and therefore costs nothing.
Or you can just borrow images from other sites by downloading them. But please be careful not to violate copyrights when downloading pictures. Still, it's useful to know how to download pictures, so here's how you do it:

1. Right-click on an image on any image on the Internet.
2. Choose "Save picture as..." in the menu that appears.
3. Choose a location for the image on your computer and press "Save".

Do this with the image below and save it on your computer at the same location as your HTML documents. (Notice that the logo is saved as a PNG file: logo.png):

Now you can insert the image into one of your own pages. Try it yourself.

Is that all I need to know about images?

There are a few more things you should know about images.
First, you can easily insert pictures located in other folders, or even pictures that are located on other websites:
Example 2:

 
 <img src="images/logo.png" />
 
 

Example 3:

 
 <img src="http://www.html.net/logo.png" />
 
 

Second, images can be links:
Example 4:

 
 <a href="http://www.html.net">
 <img src="logo.png" /></a>
 
 

will look like this in the browser (try clicking on the image):

Are there any other attributes I should know about?

You always need to use the attribute src, which tells the browser where the image is located. Besides that, there are a number of other attributes which can be useful when inserting images.
The alt attribute is used to give an alternate description of an image if, for some reason, the image is not shown for the user. This is especially important for users with impaired vision, or if the page is loaded very slowly. Therefore, always use the alt attribute:
Example 5:

 
 <img src="logo.gif" alt="HTML.net logo" />
 
 

Some browsers let the text of the alt attribute appear as a small pop-up box when the user places their cursor over the picture. Please note that when using the alt attribute, the aim is to provide an alternative description of the picture. The alt attribute should not be used to create special pop-up messages for the user since then visually impaired users will hear the message without knowing what the picture is.
The title attribute can be used to add information to the image:
Example 6:

 
 <img src="logo.gif" title="Learn HTML from HTML.net" />
 
 

Will look like this in the browser:

If you, without clicking, place the cursor over the image, you will see the text "Learn HTML from HTML.net" appear as a pop-up box.
Two other important attributes are width and height:
Example 7:

 
 <img src="logo.png" width="141px" height="32px" />
 
 

will look like this in the browser:

The width and height attributes can be used to set the height and width of an image. The value that is used to set the width and height is pixels. Pixels are the units of measurement used to measure the resolution of screens. (The most common screen resolution is 1024x768 pixels). Unlike centimetres, pixels are relative units of measurement which depend on the resolution of the screen. To a user with a high screen resolution, 25 pixels may correspond to 1 centimetre, while the same 25 pixel in a low screen resolution may correspond to 1.5 centimetres on the screen.
If you do not set the width and height, the image will be inserted in its actual size. But with width and height you can manipulate the size:
Example 8:

 
 <img src="logo.gif" width="32px" height="32px" />
 
 

will look like this in the browser:

However, it is worth keeping in mind that the actual size in kilobytes of the image file will remain the same so it will take the same time to load the image as it did before, even though it appears smaller on the screen. Therefore, you should never decrease the image size by using the width and height attributes. Instead, you should always resize your images in an image editing program to make your pages lighter and faster.
That said, it is still a good idea to use the width and height attributes because the browser will then be able to detect how much space the image will need in the final page layout before the image is fully downloaded. This allows your browser to set up the page nicely in a quicker way.
That's enough about David Hasselhoff and images for now.

HTML Lesson 10: Tables

Lesson 10: Tables

Tables are used when you need to show "tabular data" i.e. information that is logically presented in rows and columns.

Is it difficult?

Building tables in HTML may at first seem complicated but if you keep cool and watch your step, it is actually strictly logical - just like everything else in HTML.
Example 1:

	
	<table>
	  <tr>
		<td>Cell 1</td>
		<td>Cell 2</td>
	  </tr>
	  <tr>
		<td>Cell 3</td>
		<td>Cell 4</td>
	  </tr>
	</table>
	
	

Will look like this in the browser:

Cell 1	Cell 2
Cell 3	Cell 4

What's the difference between <tr> and <td>?

As you will see from the above example, this is probably the most complicated HTML example we have given you so far. Let's break it down and explain the different tags:
3 different elements are used to insert tables:

• The opening tag <table> and the closing tag </table> starts and ends the table. Logical.
• <tr> stands for "table row" and starts and ends horizontal rows. Still logical.
• <td> is short for "table data". This tag starts and ends each cell in the rows of your table. All simple and logical.

Here is what happens in Example 1: the table starts with a <table>, followed by a <tr>, which indicates the beginning of a new row. Two cells are inserted in this row: <td>Cell 1</td> and <td>Cell 2</td>. The row is hereafter closed with a </tr> and a new row <tr> begins immediately after. The new row also contains two cells. The table is closed with </table>.
Just to make it clear: rows are horizontal lines of cells and columns are vertical lines of cells:

Cell 1	Cell 2
Cell 3	Cell 4

Cell 1 and Cell 2 form a row. Cell 1 and Cell 3 form a column.
In the above example, the table has two rows and two columns. However, a table can have an unlimited number of rows and columns.
Example 2:

	
	<table>
	  <tr>
		<td>Cell 1</td>
		<td>Cell 2</td>
		<td>Cell 3</td>
		<td>Cell 4</td>
	  </tr>
	  <tr>
		<td>Cell 5</td>
		<td>Cell 6</td>
		<td>Cell 7</td>
		<td>Cell 8</td>
	  </tr>
	  <tr>
		<td>Cell 9</td>
		<td>Cell 10</td>
		<td>Cell 11</td>
		<td>Cell 12</td>
	  </tr>
	</table>
	
	

Will look like this in the browser:

Cell 1	Cell 2	Cell 3	Cell 4
Cell 5	Cell 6	Cell 7	Cell 8
Cell 9	Cell 10	Cell 11	Cell 12

Are there any attributes?

Of course there are attributes. For example, the border attribute is used to specify the thickness of the border around your table:
Example 3:

	
	<table border="1">
	  <tr>
		<td>Cell 1</td>
		<td>Cell 2</td>
	  </tr>
	  <tr>
		<td>Cell 3</td>
		<td>Cell 4</td>
	  </tr>
	</table>
	
	

Will look like this in the browser:

Cell 1	Cell 2
Cell 3	Cell 4

The thickness of the border is specified in pixels.
As with images, you can also set the width of a table in pixels - or alternatively in percentage of the screen:
Example 4:

	
	<table border="1" width="30%">
	
	

This example will be displayed in the browser as a table with the width of 30% of the screen. Try it yourself.

More attributes?

There are lots of attributes for tables. Here are two more:

• align: specifies the horizontal alignment of the content in the entire table, in a row or in a single cell. For example, left, center or right.
• valign: specifies the vertical alignment of the content in a cell. For example, top, middle or bottom.

Example 5:

	
	<td align="right" valign="top">Cell 1</td>
	
	

What can I insert in my tables?

Theoretically, you can insert anything in tables: text, links and images... BUT tables are meant for presenting tabular data (i.e. data which can be meaningfully presented in columns and rows) so refrain from putting things into tables simply because you want them to be placed next to each other.
In the old days on the Internet - i.e. a few years ago - tables were often used as a layout tool. But if you want to control the presentation of texts and images there is a much cooler way to do it (hint: CSS). But more about that later.
Now, put what you just learned to practice and design a number of tables in different sizes, with different attributes and content. This should keep you busy for hours.

HTML Lesson 11: More about tables

Lesson 11: More about tables

The title "More about tables" may sound a bit boring. But look at the positive side, when you master tables, there is absolutely nothing about HTML that will knock you out.

What is left then?

The two attributes colspan and rowspan are used when you want to create fancy tables.
Colspan is short for "column span". Colspan is used in the <td> tag to specify how many columns the cell should span:
Example 1:

	
	<table border="1">
	  <tr>
		<td colspan="3">Cell 1</td>
	  </tr>
	  <tr>
		<td>Cell 2</td>
		<td>Cell 3</td>
		<td>Cell 4</td>
	  </tr>
	</table>
	
	

Will look like this in the browser:

Cell 1
Cell 2	Cell 3	Cell 4

By setting colspan to "3", the cell in the first row spans three columns. If we instead had set colspan to "2", the cell would only have spanned two columns and it would have been necessary to insert an additional cell in the first row so that the number of columns will fit in the two rows.
Example 2:

	
	<table border="1">
	  <tr>
		<td colspan="2">Cell 1</td>
		<td>Cell 2</td>
	  </tr>
	  <tr>
		<td>Cell 3</td>
		<td>Cell 4</td>
		<td>Cell 5</td>
	  </tr>
	</table>
	
	

Will look like this in the browser:

Cell 1		Cell 2
Cell 3	Cell 4	Cell 5

What about rowspan?

As you might already have guessed, rowspan specifies how many rows a cell should span over:
Example 3:

	
	<table border="1">
	  <tr>
		<td rowspan="3">Cell 1</td>
		<td>Cell 2</td>
	  </tr>
	  <tr>
		<td>Cell 3</td>
	  </tr>
	  <tr>
		<td>Cell 4</td>
	  </tr>
	</table>
	
	

Will look like this in the browser:

Cell 1	Cell 2
	Cell 3
	Cell 4

In the example above rowspan is set to "3" in Cell 1. This specifies that the cell must span over 3 rows (its own row plus an additional two). Cell 1 and Cell 2 are thereby in the same row, while Cell 3 and Cell 4 form two independent rows.
Confused? Well, it is not uncomplicated and it is easy to lose track. Therefore, it might be a good idea to draw the table on a piece of paper before you begin with the HTML.
Not confused? Then go ahead and create a couple of tables with both colspan and rowspan on your own.

HTML Lesson 12: Layout (CSS)

Lesson 12: Layout (CSS)

Wouldn't be great if you could give your pages the layout they deserve?

Sure, but how?

To give your website layout use Cascading Style Sheets (CSS). In this lesson you will get a short introduction to CSS. But later you can learn all about CSS from scratch in our CSS Tutorial.. So please consider this lesson only as an appetizer.
CSS is the better half of HTML. And in coding, there is no equality of status: HTML takes care of the rough stuff (the structure), while CSS gives it a nice touch (layout).
As shown in Lesson 7, CSS can be added with the style attribute. For example, you can set the font type and size on a paragraph:
Example 1:

	
	<p style="font-size:20px;">This is typed in size 20px</p>
	<p style="font-family:courier;">This is typed in Courier</p>
	<p style="font-size:20px; font-family:courier;">This is typed

 in Courier size 20px</p>
	
	

Will look like this in the browser:

This is typed in size 20px

This is typed in Courier

This is typed in Courier size 20px

In the example above we use the style attribute to specify the type of font to be used (with the command font-family) and the font size (with the command font-size). Notice how in the last paragraph we set both the font type and size with a separating semicolon.

It seems like a lot of work?

One of the smart features of CSS is the possibility to manage your layout centrally. Instead of using the style attribute in each tag, you can tell the browser once how it must layout all the text on the page:
Example 2:

	
	<html>

	  <head>
	  <title>My first CSS page</title>	

	  <style type="text/css">
		  h1 {font-size: 30px; font-family: arial;}
		  h2 {font-size: 15px; font-family: courier;}
		  p {font-size: 8px; font-family: "times new roman";}
	  </style>

	  </head>

	  <body>
	  <h1>My first CSS page</h1>
	  <h2>Welcome to my first CSS page</h2>
	  <p>Here you can see how CSS works </p>
	  </body>

	</html>
	
	

In the example above CSS has been inserted in the head section and therefore applies to the entire page. To do this, just use the tag <style type="text/css"> which tells the browser that you are typing CSS.
In the example all headings on the page will be in Arial in size 30px. All subheads will in Courier size 15. And all text in normal paragraphs will be in Times New Roman size 8.
Another option is to type the CSS in a separate document. With a separate CSS document you can manage the layout of many pages all at once. Pretty smart if you want to change the font type or size on a large website with hundreds or thousands of pages. We won't go into that now but you can learn it later in our CSS tutorial.

What else can I do with CSS?

CSS can be used for much more than specifying font types and sizes. For example, you can add colours and backgrounds. Here are some examples for you to experiment with:

	
	<p style="color:green;">Green text</p>

	<h1 style="background-color: blue;">Heading on blue

 background</h1>

	<body style="background-image: 

url('http://www.html.net/logo.png');">
	
	

Try inserting the examples in some of your pages - both as shown above and also as CSS inserted in the head section.

Is CSS nothing but colours and font types?

Besides adding layout such as colors, font types etc., CSS can also be used to control the page setup and presentation (margins, float, alignment, width, height etc.). By regulating the different elements with CSS you are able to layout your pages elegantly and precisely.
Example 3:

	
	<p style="padding:25px;border:1px solid red;">I love CSS</p>
	
	

Will look like this in the browser:

I love CSS

With the property float an element can either be floated to the right or to the left. The following example illustrates the principle:
Example 4:

	
	<img src="bill.jpg" alt="Bill Gates" style= "float:left;" />

	<p>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...</p>
	
	

Will look like this in the browser:

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...

In the example, one element (the image) floats to the left and the other element (the text) fills the hole.

With the property position, you can place an element exactly where you want it in your page:
Example 5:

	<img src="bill.jpg" alt="Bill 

Gates" style="position:absolute;bottom:50px;right:10px;" />
	

In the example the image is placed 50 pixels from the bottom and 10 pixels from the right in the browser. But you can place it exactly where you want it. Give it a try. Pretty easy and pretty cool, eh?

Cool, sure. But easy?

You do not learn CSS in 10 minutes. And as mentioned above, this lesson is only meant as a brief introduction. Later you will learn much more in our CSS Tutorials.
For now, concentrate on HTML, and move on to the next lesson where you will learn how to get your website out on the Internet so the whole world can see it!

HTML Lesson 13: Uploading pages

Lesson 13: Uploading pages

Until now, only you have had the satisfaction of viewing your pages. Now it is time for the rest of the world to see your masterpieces.

Is the world ready for that?

The world is ready - you soon will be too. To get your website on the internet, you just need some server space and a free FTP program.
If you have Internet access, you might already have some free server space for your website. Your server space will then probably be called something like http://home.provider.com/~usernumber. But you might need to activate it first. Read more about this in the papers from your Internet provider or on their support pages.
Another option is to get some free server space on the Internet. In the same way that you set up an e-mail account (at for example Hotmail), you can register for free server space on the Internet. Several companies offer such a service - among them 000webhost.com (click "Order Now" under "Free Hosting") - it will only take a couple of minutes to register.
To have access to the server, you need to know the "Host Name" (For example, ftp.htmlnet.site50.net) and have your username and password ready.

Is that all I need?

To access the server and upload your pages, you also need an FTP program. FTP is short for File Transfer Protocol. A FTP program is used to connect two computers over the Internet so that you can transfer files from your computer to another computer (the server). You might not have such a program yet, but fortunately, this can be downloaded for free.
There are many different FTP programs. One of the better is FileZilla, which is entirely free. So now you can download FileZilla at filezilla.sourceforge.net.

And how do I upload the pages?

Described below is how you upload your pages to a free account at 000webhost.com with FileZilla. But the procedure is, more or less, the same for all providers and FTP programs.
Open the FTP program while connected to the Internet. Insert "Host Name" ("ftp.htmlnet.site50.net" under "Address"), username (under "User") and password (under "Password") and click "Connect". You should now have access to the server. In one side of the program you can see the contents of your computer ("Local Site"), and in the other side, you can see the content of the server ("Remote Site"):
Find your HTML documents and images on your computer (on the "Local site") and transfer them to the server (the "Remote site") by double clicking on them. Now the whole world can see them! (For example, at the address http://htmlnet.site50.net/page1.htm).
Name one of the pages "index.htm" (or "index.html") and it will automatically become the start page. i.e. if you type http://htmlnet.site50.net (without any filename) you will actually open http://htmlnet.site50.net/index.htm.
In the long run, it might be a good idea to purchase your own domain (for example www.your-name.com or www.your-name.net) and avoid the long and complicated addresses you are being assigned by your Internet provider or from providers of free server space. You can find and purchase domains at for example Speednames or NetworkSolutions.

HTML Lesson 14: Web standards and validation

Lesson 14: Web standards and validation

In this lesson, you will get a little more theoretical knowledge on HTML.

What more is there to know about HTML?

HTML can be coded in many different ways. And browsers can read HTML in just as many ways. You could say that HTML has many dialects. That is why some websites look different in different browsers.
There have been attempts to make a common standard of HTML through the World Wide Web Consortium (W3C) founded by Tim Berners-Lee (yep! the great guy who invented HTML). But it has been a long and tough road.
In the old days - when browsers where something you had to pay for - Netscape was the dominate browser. Back then, the most supported HTML standard where called 2.0 and later 3.2. But with a market share of over 90% Netscape did not have to - and did not - care much about common standards. On the contrary, Netscape invented their own strange elements, which did not function in other browsers.
For many years Microsoft almost completely ignored the Internet. After a while they took up the competition with Netscape and introduced a browser. The first versions of Microsoft's browser, Internet Explorer, were not any better than Netscape at supporting the HTML standards. But Microsoft chose to give away their browser for free (always a popular thing to do) and Internet Explorer soon became the most popular browser.
From version 4 and 5 Microsoft aimed to support more and more of the HTML standards from W3C. Netscape did not manage to develop a new version of their browser and continued to distribute the outdated version 4.
The rest is history. Today the HTML standards are called 4.01 and XHTML. Now it is Internet Explorer that has a market share of over 90%. Internet Explorer still has its own strange elements but it also supports the W3C HTML standards. And so do all of the other browsers, such as Mozilla, Opera and Netscape.
So, when you code HTML following the W3C standards, you make websites that can be seen in all browsers - both now and in the future. And luckily, what you have learned in this tutorial is a new and stricter and cleaner version of HTML called XHTML.

How do I tell which version is used?

With all the different types of HTML you need to tell the browser which "dialect" your HTML is in, in your case XHTML. To do that, you use a Document Type Declaration. The Document Type Declaration is always written in the top of the document:
Example 1:

	
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

	<html xmlns="http://www.w3.org/1999/xhtml" lang="en">

	<head>
	<title>Title</title>
	</head>

	<body>
	<p>text text</p>
	</body>

	</html>
	
	

Besides the Document Type Declaration (the first line in the example above), which tells the browser that you want to write XHTML, you also need to insert some extra information in the html tag with the two attributes xmlns and lang.
xmlns is short for "XML-Name-Space" and should always have the value http://www.w3.org/1999/xhtml. That is all you need to know. But if you have a big hunger for complicated knowledge you can read more about namespaces on W3C's website.
In the lang attribute you state which language the document is written in. For this the ISO 639 standard is used, which lists codes for all the languages in the world. In the example above the language are set to English ("en").
With a DTD the browser knows exactly how it should read and show your HTML. Hence, use the example above as template for all your future HTML documents.
The DTD is also important when you want to validate your pages.

Validate? Why and how should I do that?

Insert a DTD in your pages and you can always check your HTML for errors by using W3C's free validator.
To test this out, make a page and upload it to the Internet. Now, go to validator.w3.org and type the address (the URL) of your page and validate it. If your HTML is correct you will get a congratulations message. Otherwise you will get an error report telling you exactly what and where you have done something wrong. Make some errors on purpose to see what happens.
The validator is not just helpful to locate an error. Some browsers try to compensate for lack of skills among web developers by trying to fix errors in the HTML and showing the page as they guess it should look. With such browsers, you might never see an error in your own browser. However, other browsers might guess differently or not show the page at all. The validator can help you find errors you did not even know existed.
Always validate your pages to be sure they will always be shown correctly.

HTML Lesson 15: The final tips

Lesson 15: The final tips

Congratulations, you have now reached the final lesson.

So now I know everything?

You have learned a lot and you are now capable of making your own websites! However, what you have learned are the basics and there is still a lot more to be mastered. But you now have a good foundation from which to build on.
In this last lesson, you will get some final tips:

• First, it is a good idea to maintain order and structure in your HTML documents. By posting well arranged documents you will not only show others your mastery of HTML but will also make it considerably easier for yourself to keep an overview.
• Stick to the standards and validate your pages. This cannot be stressed enough: Always write clean XHTML, use a DTD and validate your pages on validator.w3c.org.
• Give your page contents. Remember that HTML is a tool, which enables you to present information on the Internet, so make sure that there is information to present. Pretty pages may look nice but most people use the Internet to find information.
• Avoid overloading your pages with heavy images and other fancy stuff you have found on the Internet. It slows down the loading of the page and could be confusing for visitors. Pages that take more than 20 seconds to load can lose up to 50% of their visitors.
• Remember to add your website to search engines/directories so people other than your closest family can find and enjoy it. On the front page of all search engines, you will find a link to add new pages (The most important is Google, but there are also others like DMOZ, Yahoo, AltaVista, AlltheWeb and Lycos).
• In this tutorial, you have learned to use Notepad, which is a simple and very easy to use editor, but perhaps you will find it helpful to use a more advanced editor which gives a better overview and more possibilities. You can find a summary and reviews of different editors on Download.com.

How do I learn more?

First of all, it is important that you continue to work and experiment with the things you have learned in this tutorial. Study other people's websites and if you find something you like see how it was made with "View Source" (Click "View" in the menu in your browser and choose "Source").
Search the Internet for examples and articles on HTML. There are lots of websites with great contents on HTML.

MS Access Lesson 1: Getting Familiar with Microsoft Access Windows

Lesson 1: Getting Familiar with Microsoft Access 2007 for Windows

Microsoft Access is a database software package. A database is an organized collection of records. Telephone and address books are examples of paper databases. With Access, you can create a computerized database. For example, you can use Access to organize the students who attend a school, the courses they take, and the instructors who teach them. After you create an Access database, you can search it, manipulate it, and extract information from it. This lesson introduces you to Access windows and teaches you how to create a database.

Getting Started

You use windows to interact with Access. To begin, start Access 2007. You screen will look similar to the one shown here.

Northwind is a sample database you can download from the Microsoft website. I will use the Northwind database to introduce you to Access windows. If the Northwind database is already on your system, open it, otherwise download it and then open it.

To open Northwind:

1. Click the Microsoft Office button. A menu appears.
2. Click Open. The Open dialog box appears.
3. Locate the Northwind database.
4. Click the Open button. Access opens the Northwind database.

To download Northwind, connect to the Internet and then follow these steps:

1. Click Sample. The Northwind 2007 icon appears in the center of the window.
2. Click the Northwind icon.
3. Click the Browse button. The File New Database window appears.
4. Locate the folder in which you want to save the Northwind database.
5. Click OK. The File New Database window closes.
6. Click Create. Access creates the Northwind database and opens it.

Understanding Security

It is possible for an Access database to contain malicious code, such as a computer virus. Access has security settings that disable code and display a security warning when you open a database. If you know a database is trustworthy, you can perform the following steps to enable it. You may need to enable the Northwind database.

To enable a database:

1. Click the Options button. The Microsoft Office Security Options dialog box appears.
2. Click Enable This Content.
3. Click OK. Access enables the content. If you are enabling the Northwind database, the Login dialog box appears.

4. Click Login. Access opens the Northwind database.

If you know a database is safe, you can store it in a trusted location. Databases stored in trusted locations do not require you to enable security.

To create a trusted location:

1. Click the Microsoft Office button. A menu appears.
2. Click Access Options in the bottom-right corner. The Access Options pane appears.
3. Click Trust Center.
4. Click Trust Center Settings.
5. Click Trusted Locations.
6. Click Add New Locations. The Microsoft Office Trusted Location dialog box appears.
7. Enter the path to the location you want to trust, or click Browse to locate the folder.
8. If you want to trust subfolders, select The Subfolders Of This Location Are Also Trusted.
9. Click OK. The location is now a trusted location.
10. Click OK again.
11. Click OK. You have created a trusted location.

The Navigation Pane

The Access window used in this example has been set up to make it easier to explain. This section shows you how to set up your window so that it matches the example. If you are not already logged in to Northwind, click the Login button.
An Access database consists of the following objects: tables, queries, forms, reports, macros, and modules. The Navigation pane displays the objects in a database.

To manipulate the Navigation pane:

• Click the double right-arrows  to open it. The arrows change to double left-arrows .
• Click the double left-arrows  to close it. The arrows change to double right-arrows .

In this example, the objects are organized by type, which is not the default setting. You may want to organize the objects in your database by type also. You can use the down-arrow on the top of the Navigation pane to change the manner in which objects are organized.

To organize objects by type:

1. Click the All Access Objects button on the Navigation pane. A menu appears.
2. Click Object Type. Access displays the objects in the database by type.

The Access window with the Northwind database open is shown here.

 Note: Your window probably does not look exactly like the one shown. In Access 2007, the window display depends on the size of the window, the size of your monitor, and the resolution to which your monitor is set. Resolution determines how much information your computer monitor can display. If you use a low resolution, you can fit less information on your screen, but the size of your text and images are larger. If you use a high resolution, you can fit more information on your screen, but the size of the text and images are smaller. Also, you can use settings in Access 2007, Windows Vista, and Windows XP to change the color and style of your windows.

The Microsoft Office Button

In the upper-left corner of the Access window is the Microsoft Office button. When you click the button, a menu appears. You can use the menu to create a new file, open an existing file, save a file, and perform many other tasks.

The Quick Access Toolbar

Next to the Microsoft Office button is the Quick Access toolbar. The Quick Access toolbar provides you with access to commands you frequently use. By default, Save, Undo, and Redo appear on the Quick Access toolbar. You use Save to save an object, Undo to roll back an action you have taken, and Redo to reapply an action you have rolled back.

The Title Bar

The Title bar is located at the top in the center of the Access window. The Title bar displays the name of the database on which you are currently working.

The Ribbon

You use commands to tell Access what to do. In Access 2007, you use the Ribbon to issue commands. The Ribbon is located near the top of the Access window, below the Quick Access toolbar. At the top of the Ribbon are several tabs; clicking a tab displays related command groups. Within each group are related command buttons. You click buttons to issue commands or to access menus and dialog boxes. You may also find a dialog box launcher in the bottom-right corner of a group. When you click the dialog box launcher , a dialog box makes additional commands available.

Access Objects

To view or hide the objects on the Navigation pane:

• You click the double down-arrows  to view objects. The double down-arrows change to double up-arrows .
• You click the double up-arrows  to hide objects. The double up-arrows change to double down-arrows .

As stated earlier, the Navigation pane stores the objects in your database: tables, queries, forms, reports, macros, and modules. Objects always display with an icon to the right. The icon tells you the object type: table, query, form, report, macro, and module.

Objects
Tables	In Access, data is stored in tables. A table is a set of columns and rows, with each column referred to as a field. Each value in a field represents a single type of data. Each row of a table is referred to as a record.
Queries	You use queries to retrieve specific data from your database and to answer questions about your data. For example, you can use a query to find the names of the employees in your database who live in a particular state.
Forms	Forms give you the ability to choose the format and arrangement of fields. You can use a form to enter, edit, and display data.
Reports	Reports organize or summarize your data so you can print it or view it onscreen. You often use reports when you want to analyze your data or present your data to others.
Macros	Macros give you the ability to automate tasks. You can use a macro to add functionality to a form, report, or control.
Modules	Like macros, modules give you the ability to automate tasks and add functionality to a form, report, or control. Macros are created by choosing from a list of macro actions, whereas modules are written in Visual Basic for Applications.

You double-click an object to open the object. You right-click an object to view a menu of options. You can use the menu to do such things as open objects, rename objects, and delete objects.
Objects that are open appear on tabs. Right-click a tab to view a menu of options you can perform, such as save the object, close the object, or change the view.

Change Views

A view is a way of looking at an object. For example, in Access, data is stored in tables. Two of the possible ways you can view a table are Datasheet view and Design view. You can see the data contained in a table in Datasheet view. You can see the design of a table in Design view. When you open an object, buttons appear in the lower-right corner of the Access window. You can use the View button on the Home tab to change views, or you can click the proper button in the lower-right corner of the window.

Close a Database and Exit Access

This completes the introduction to Access using the Northwind database. The following describes how you close a database and exit Access.

To close a database:

1. Click the Microsoft Office button. A menu appears.
2. Click Close Database. Access closes the database.

To exit Access:

1. Click the Microsoft Office button. A menu appears.
2. Click Exit Access. You exit Access.

Create a Database

When you start Access, the Getting Started With Microsoft Office Access screen appears. You can use this screen to create a database. Within a database, you can do such things as enter data, create reports, and retrieve data. You can create a blank database or you can use one of the templates provided by Microsoft. When you use a template, Access creates forms you can use to enter data, reports you can use to retrieve data, and more. You can modify the forms, reports, and other objects to suit your needs. This tutorial will teach you how.
The following templates are included with Access: Assets, Contacts, Events, Faculty, Issues, Marketing Projects, Projects, Sales Pipeline, Students, and Tasks. Other templates are available online. Each template creates a database related to the title. For example, the Faculty template creates a faculty database that includes tables, queries, forms, and reports related to faculty. In Access, you use tables to store data, queries to retrieve data, forms to enter data, and reports to display data.

To use a template to create a database:

1. Start Access. The Getting Started With Microsoft Office Access screen appears.
2. Click Local Templates. Icons representing local templates appear in the center of the window.
3. Click the icon for the template you want to use.
4. Click the Browse button. The File New Database window appears.
5. Locate the folder in which you want to store your database.
6. Click OK.
7. Click Create. Access creates and opens your database.

8. Open the Navigation pane. Access displays the tables, queries, forms, reports and other objects related to the database you selected. You may wish to display the objects by type.

 How do I create a database based on the templates that are found online?

Online templates fall into the following categories: Business, Education, Personal, and Non-profit. To create a database based on one of these templates:

1. Start Access. The Getting Started With Microsoft Office Access screen appears.
2. Make sure you are connected to the Internet.
3. Click the category for the template you want to create. Icons representing Internet templates appear in the center of the window.
4. Click the icon for the template you want to use to create your database.
5. Click the Browse button .
6. Locate the folder in which you want to store your database.
7. Click Download. Access prompts you.
8. Click Continue. Access downloads and opens your database.
9. Open the Navigation pane. Access displays the tables, queries, forms, reports, and other objects related to your database.

 How do I open an existing database?

1. Click the Office button. A menu appears.
2. Click Open.
3. Locate the folder in which you stored your database.
4. Click the database name.
5. Click Open. Access opens the database.

 Tip: You can also open an existing database by pressing Ctrl-O and then following steps 3 through 5.

Create a Blank Database

A blank database is a database with nothing in it. You must create all the tables, forms, reports, queries, and so on. If you cannot find a template that suits your needs, create a blank database. After you create the database, Access opens to a datasheet and makes available the tools you need to create objects. Creating tables is the first step in building a database. You will learn more about creating tables in the next lesson.

To create a blank database:

1. Start Access.
2. Click Blank Database.
3. Type the name you want to give your database in the File Name field. Access will automatically append .accdb to the name.
4. Click the Browse button. The File New Database window appears.
5. Locate the folder in which you want to store your database. Note that the name of the file appears in the File Name field.
6. Click OK.
7. Click the Create button. Access creates the database and opens a datasheet with the Table Tools available to you.

Note the Table Tools in the upper-right portion of the Ribbon.

 What is a Datasheet?
In Access, data is stored in tables. A datasheet displays the information stored in a table in columns and rows. The columns are called fields and the rows are called records.