Lesson 10: Learn Tables tag tutorial

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 (See lesson 9)

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.

Read More

Lesson 9: Learn Images tag tutorial

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.

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.

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>
 
 

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" />
 
 

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" />
 
 

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" />
 
 

Read More

Lesson 8: Learn Links tag in html tutorial

In this lesson, you will learn how to make links between pages.

What do I need to make a link?

To make links, you use what you always use when coding HTML: an element. A simple element with one attribute and you will be able to link to anything and everything. Here is an example of what a link to HTML.net could look like:

Example 1:

 
 <a href="http://www.outclassweb.blogspot.com/">Here is a link to HTML.net</a>
 
 

The element a stands for "anchor". And the attribute href is short for "hypertext reference", which specifies where the link leads to - typically an address on the internet or a file name.

In the above example the attribute href has the value "http://www.html.net", which is the full address of HTML.net and is called a URL (Uniform Resource Locator). Note that "http://" must always be included in URLs. The sentence "Here is a link to HTML.net" is the text that is shown in the browser as the link. Remember to close the element with an </a>.

What about links between my own pages?

If you want to make a link between pages on the same website, you do not need to spell out the entire address (URL) for the document. For example, if you have made two pages (let us call them page1.htm and page2.htm) and saved them in the same folder you can make a link from one page to the other by only typing the name of the file in the link. Under such circumstances a link from page1.htm to page2.htm could look like this:

Example 2:

 
 <a href="page2.htm">Click here to go to page 2</a>
 
 

If page 2 were placed in a subfolder (named "subfolder"), the link could look like this:

Example 3:

 
 <a href="subfolder/page2.htm">Click here to go to page 2</a>
 
 

The other way around, a link from page 2 (in the subfolder) to page 1 would look like this:

Example 4:

 
 <a href="../page1.htm">A link to page 1</a>
 
 

"../" points to the folder one level up from position of the file from which the link is made. Following the same system, you can also point two (or more) folders up by writing "../../".

Did you understand the system? Alternatively, you can always type the complete address for the file (URL).

What about internal links within a page?

You can also create internal links within a page - for example a table of contents at the top with links to each chapter below. All you need to use is a very useful attribute called id (identification) and the symbol "#".

Use the id attribute to mark the element to which you want to link. For example:

 
 <h1 id="heading1">heading 1</h1>
 
 

You can now create a link to that element by using "#" in the link attribute. The "#" must be followed by the id of the tag you want to link to. For example:

 
 <a href="#heading1">Link to heading 1</a>
 
 

All will become clear with an example:

Example 5:

 
 <html>
   
   <head>
   </head>

   <body>

  <p><a href="#heading1">Link to heading 1</a></p>
  <p><a href="#heading2">Link to heading 2</a></p>

  <h1 id="heading1">heading 1</h1>
  <p>Text text text text</p>

  <h1 id="heading2">heading 2</h1>
  <p>Text text text text</p>
   
   </body>

 </html>
 
 

Can I link to anything else?

You can also make a link to an e-mail address. It is done in almost the same way as when you link to a document:

Example 6:

 
 <a href="mailto:nobody@html.net">Send an e-mail to nobody at HTML.net</a>
 
 

The only difference between a link to an e-mail and a link to a file is that instead of typing the address of a document, you type mailto: followed by an e-mail address. When the link is clicked, the default e-mail program opens with a new blank message addressed to the specified e-mail address. Please note that this function will only work if there is an e-mail program installed on your computer. Give it a try!

Are there any other attributes I should know of?

To create a link, you always have to use the href attribute. In addition, you can also put a title on your link:

Example 7:

 
 <a href="http://www.html.net/" title="Visit HTML.net and learn HTML">HTML.net</a>
 
 

Read More

Lesson 7: Lern html Attributes tutorial

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. To make it easier we have made a chart of the 216 most commonly used colours: 216 Web Safe Colour Chart.

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.

Read More

Lesson 6: A few more elements in html tutorial

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>
 
 

Read More

Lesson 5: What have you learned in template?

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.

Read More

Lesson 4: How to Create your first website? tutorial

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!

Read More

Lesson 3: Learn Elements and tags tutorial

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.

Read More

Lesson 2: What is HTML? HTML is the "mother tongue" of your browser? tutorial

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.

Read More

Lesson 1: Let's get started with tools you need to make a website? tutorial

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.

Read More

How to Upgrade from 32-bit Windows Vista/XP to 64-bit Windows 7?

While there were once valid reasons for skipping 64-bit versions of Windows, those reasons have disappeared over the past year or so. As a result, it should come as no surprise that many Windows users are now interested in upgrading their 32-bit version of Windows XP or Vista to a 64-bit version of Windows 7. And because all retail versions of Windows 7 Upgrade come with both 32-bit and 64-bit Setup discs, it would seem that doing so is both supported and straightforward.

Well, it's neither: Microsoft does not support a traditional, in-place upgrade of any 32-bit version of Windows to any 64-bit version of Windows. (Well, I guess that statement is technically straightforward. So maybe they're 1 for 2.)

Here's what you'll see if you try to use your Upgrade version of Windows 7 Setup media to go from a 32-bit version of Windows Vista/XP to a 64-bit version of Windows 7.

But don't despair. If you are the owner of a valid, activated copy of Windows XP or Vista (32-bit), you can still migrate to a 64-bit version of Windows 7. As with other Windows migrations, this process involves four steps:

1. Backup your valuable data, settings, and other information. You can use the Windows Easy Transfer utility, included on the Windows 7 Setup disc, to accomplish this.

2. Boot the PC with the 64-bit Windows 7 Upgrade media and perform a "Custom" install type, wiping out your old Windows install in the process and replacing it with a new Windows 7 install.

3. Reapply your data, settings, and other information to the new Windows 7 install by using the Windows Easy Transfer utility, which is included with Windows 7.

4. Manually reinstall all of the applications you were previously using.

The big difference between this type of migration and the one we discussed in Scenario 1 is that, this time, you'll launch Setup by booting the PC with the Windows 7 Upgrade media. In the previous scenario, we started Setup from within the previous OS.

Triggering Setup this way changes a few things. When you reach the "Where do you want to install Windows?" phase, where you choose between Upgrade and Custom, you will still need to choose Custom. But, unlike with Scenario 1, you get the advanced options (delete, format, and so on) in the disk partitioning phase. What you choose here is important. If you simply choose the system disk (e.g. the disk on which your previous OS is currently installed), you'll get the familiar warning message noting that Setup will backup your old install in the Windows.old folder structure. However, if you wipe out the disk by formatting and/or deleting it, no Windows.old folder structure will be created. And there are worries that Windows 7 won't activate if you do wipe out the old install.

Fortunately, I've tried it both ways. And both ways have worked for me. That is, Windows 7 activates in both cases, which is what you're looking for. However, I recommend not wiping out the previous install by formatting or deleting the partition with the current Windows version. Instead, simply choose the existing partition and let Setup create windows.old. Once Windows 7 is up, running, and activated, you can choose to delete windows.old to regain the disk space (which could be many, many gigabytes.) It's better to be safe than sorry. (Imagine how awful it would be if you wiped out the old install and then Windows 7 wouldn't activate. Well. I actually do have two workarounds for that too.

Read More