Académique Documents
Professionnel Documents
Culture Documents
Created By www.ebooktutorials.blogspot.in
Created By www.ebooktutorials.blogspot.in
Created By www.ebooktutorials.blogspot.in
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:
Created By www.ebooktutorials.blogspot.in
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.
Content Downloaded from www.html.net 4
Created By www.ebooktutorials.blogspot.in
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.
Created By www.ebooktutorials.blogspot.in
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.
Created By www.ebooktutorials.blogspot.in
"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.
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>
Content Downloaded from www.html.net 7
Created By www.ebooktutorials.blogspot.in
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 /> .
Created By www.ebooktutorials.blogspot.in
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):
Created By www.ebooktutorials.blogspot.in
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.
Created By www.ebooktutorials.blogspot.in
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>
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.
11
Created By www.ebooktutorials.blogspot.in
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.
12
Created By www.ebooktutorials.blogspot.in
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>
13
Created By www.ebooktutorials.blogspot.in
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.
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.
14
Created By www.ebooktutorials.blogspot.in
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 Example 2:
<small>This should be in small.</small> small :
Created By www.ebooktutorials.blogspot.in
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>
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 draw a horizontal line ("hr" stands for "horizontal rule"): Example 5:
<hr /> <hr />
which is used to
16
Created By www.ebooktutorials.blogspot.in
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. 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:
ul
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
17
Created By www.ebooktutorials.blogspot.in
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.
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.
18
Created By www.ebooktutorials.blogspot.in
Created By www.ebooktutorials.blogspot.in
20
Created By www.ebooktutorials.blogspot.in
Lesson 8: Links
In this lesson, you will learn how to make links between pages.
Example 1:
<a href="http://www.html.net/">Here is a link to HTML.net</a>
Would look like this in the browser: Here is a link to HTML.net 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> .
Example 2:
<a href="page2.htm">Click here to go to page 2</a>
21
Created By www.ebooktutorials.blogspot.in
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).
attribute to mark the element to which you want to link. For example:
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>
Example 5:
<html>
Content Downloaded from www.html.net 22
<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>
will look like this in the browser (click on the two links): Link to heading 1 Link to heading 2
Heading 1
Text text text text
Heading 2
Text text text text (Note: An id attribute must start with a letter)
Example 6:
<a href="mailto:nobody@html.net">Send an e-mail to nobody at HTML.net</a>
will look like this in the browser: Send an e-mail to nobody at HTML.net
Content Downloaded from www.html.net 23
Created By www.ebooktutorials.blogspot.in
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!
Example 7:
<a href="http://www.html.net/" title="Visit HTML.net and learn HTML">HTML.net</a>
Would look like this in the browser: HTML.net The title attribute is used to type a short description of the link. If you - without clicking - place the cursor over the link, you will see the text "Visit HTML.net and learn HTML" appears.
24
Created By www.ebooktutorials.blogspot.in
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?
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 tag, it is not tied to a piece of text.
<br />
"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,
Content Downloaded from www.html.net 25
Created By www.ebooktutorials.blogspot.in
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.
Now you can insert the image into one of your own pages. Try it yourself.
Created By www.ebooktutorials.blogspot.in
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" />
will look like this in the browser (try clicking on the image):
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
Content Downloaded from www.html.net 27
Created By www.ebooktutorials.blogspot.in
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
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 Example 7:
<img src="logo.png" width="141px" height="32px" /> width
and
height :
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" />
Created By www.ebooktutorials.blogspot.in
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.
29
Created By www.ebooktutorials.blogspot.in
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>
Created By www.ebooktutorials.blogspot.in
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 <td>Cell <td>Cell <td>Cell </tr> <tr> <td>Cell <td>Cell <td>Cell <td>Cell </tr> <tr> <td>Cell <td>Cell <td>Cell <td>Cell </tr> </table> 9</td> 10</td> 11</td> 12</td> 5</td> 6</td> 7</td> 8</td> 1</td> 2</td> 3</td> 4</td>
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>
Created By www.ebooktutorials.blogspot.in
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.
33
Created By www.ebooktutorials.blogspot.in
and
rowspan
is short for "column span". Colspan is used in the 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>
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>
34
Created By www.ebooktutorials.blogspot.in
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 rowspan on your own.
colspan
and
35
Created By www.ebooktutorials.blogspot.in
Created By www.ebooktutorials.blogspot.in
<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>
Show example 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.
Try inserting the examples in some of your pages - both as shown above and also as CSS inserted in the head section.
Created By www.ebooktutorials.blogspot.in
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 page: Example 5:
<img src="bill.jpg" alt="Bill Gates" style="position:absolute;bottom:50px;right:10px;" /> position ,
Show example
Content Downloaded from www.html.net 38
Created By www.ebooktutorials.blogspot.in
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?
39
Created By www.ebooktutorials.blogspot.in
Created By www.ebooktutorials.blogspot.in
(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.
41
Created By www.ebooktutorials.blogspot.in
Created By www.ebooktutorials.blogspot.in
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 . 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.
xmlns
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.
Created By www.ebooktutorials.blogspot.in
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.
44
Created By www.ebooktutorials.blogspot.in
45
Created By www.ebooktutorials.blogspot.in
Search the Internet for examples and articles on HTML. There are lots of websites with great contents on HTML. Read and ask questions in the Forums. This is where you meet the real experts from whom you can learn a lot. Last, but not least, you should - whenever you feel ready - continue learning CSS in our CSS Tutorial. The only thing left is to wish you hours of fun with your new friend, HTML. See you on the Internet :-)
46