Writing Your First Page
In writing this i am aiming at people who have never had any experience what so ever in creating web pages and therefore starting from the beginning. If you are looking for a reference to other HTML and XHTML techniques then please see the drop down navigation bar at the top, for other tutorials.
If you have never before seen any HTML or XHTML markup then this can look a little daunting but we will go through the basic page layout step by step and you will see its really very simple. In writing your first page you can use any number of text editors, a more advanced program such as dreamweaver or even just plain old notepad, just be sure to save your file with the .html extension.
We are going to be creating an XHTML transitional page which i prefer over the strict document type, there are a few difference's between the two including some tags that are not allowed in the strict document type such as the align, and the target attributes, the exact differences are beyond the scope of your first lesson so for now we will just use transitional.
Document type Declaration (DTD)
First of all we need to declare the document so the browser rendering our web page understands what version of markup where using, in this case Xhtml transitional, if we did not declare the document type then the browser may not render the site as we wanted.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
We can see here that we have declared the document type as XHTML 1.0 Transitional and the language English (EN). Then there is a link back to the W3 site which is the World Wide Web Consortium who lay down the rules on the different markup languages at that link you will find the full DTD. This is all you really need to know about DTD just make sure you place it in all your pages.
We then start our HTML document as below...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>My First Page</title>
</head>
<body>
</body>
<html>
As you can see here each tag is opened and closed (a closing tag is the same as the opening tag just with an added / before the tag name), the <html> and </html> tags are the main container tags for the whole page. The <head> tags contain the the page header information such as the title and meta tags which i talk about below. And as you have probably already guessed the <body> tags contain the main content of your page.
Meta Tags
Meta tags are not visible on the web page but are there to pass commands to the client browser about the document, not the document's contents. The meta tag <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> defines the content of the document as HTML with the latin character set. There are other meta tags you can use like:
<meta name="description" content="This would be a description of your site">
<meta name="keywords" content="These would be keywords in your site">
These give information to search engines such as google who will use the description and keywords to help them index your site.
Links.
Web Hosting
Security
Spyware & Adware
Pop-up Blockers!