HTML - Setting up your first webpage
From Global Programming Syntax
HTML template
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="En">
<head>
<title>Webpage Title</title>
<meta name="description" content="This is a description of the page.">
<meta name="keywords" content="many, keywords, and, short phrases">
<meta name="Author" content="Author/Company Name">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
This text will appear in the body of the page.
</body>
</html>
The above code is a simple template that can be used for when making html pages. It shows all of the basic concepts such as page titles and how code is layed out. In case you haven't noticed yet, all html codes are placed between the <> brackets. Also, immediately after the opening bracket is the name of the html tag which will be used until the closing bracket appears. Some examples of html tags used in the above script include html, head, title, meta and body.
Still don't get it?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="En">
The above code is just the standard stuff that says "hay I'm html lets do it". So it in otherwords is just the standard document opening. Next there is the following code:
<head>
This signals the opening of the html header. Particularly useful for guiding search engines (SEO) and setting what is in the title bar. Then the next line after that is as follows:
<title>Webpage Title</title>
This line sets the text in the title bar. If your wondering what the title bar is, take a look at the long blue bar at the top of your screen with a red X. The same bar you use to close a window. See how it has some text on the left hand side. You can decide what that text should be when your page is being shown by setting this title tag. IMPORTANT: setting this title tag also determines what the text on the google/yahoo link will be. So say you set the page title to "Test page", your link from google will be called "Test page" while blue and underlined. Just keep this in mind as whatever the title is will help determine your search engine ranking (SEO).
<meta name="description" content="This is a description of the page.">
<meta name="keywords" content="many, keywords, and, short phrases">
<meta name="Author" content="Author/Company Name">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
The above code box greatly determins your search engine ranking and by not having this section of code you will greatly reduce your chances of appearing on the first page of a search result. Next is obvious.
</head>
The above code will close the head tag. When tags are closed, they have a forward-slash immediately after the first bracket. So basically this line is saying close the head tag and that is all.
<body>
Above is the body opening tag. It tells the browser that the body has started and is ready to start displaying things to the screen using html. So next the following text will be displayed.
This text will appear in the body of the page.
The above line which is displayed is about the most basic you will get. It is possible to style the text to your liking and to add pictures and so on.
</body>
</html>
The first line of the above code closes the body then the line below that closes the document.
Setting up the page
Now that you have a rough idea on what each part of the template does, next part will be to place your contents into the page. First lets add a background to your page. So get a small picture, call it background.jpg and place it in the same folder/directory as the html page. Then make the following your body tag:
<body background="background.jpg">
That will set the background of your page to be your picture. You will also notice that your background tiles so it is useful if your background patterns/blends when each edge connects. Alternatively you can have a background color. For setting a background color, HTML has it's unique system using the RGB scale with numbers and letters. So below is a list of greyscale colors going from white to black:
#FFFFFF #EEEEEE #DDDDDD #CCCCCC #BBBBBB #AAAAAA #999999 #888888 #777777 #666666 #555555 #444444 #333333 #222222 #111111 #000000
And some basic colors
Red #FF0000 Green #00FF00 Blue #0000FF Aqua #00FFFF White #FFFFFF Black #000000
And more color codes can be found in the HTML: Color Chart article. So now that we have all of these color codes, how to use them. Well the following is an example of setting the page to have a red background:
<body bgcolor="#FF0000">
So if say you wanted the background black then you would use the following code:
<body bgcolor="#000000">
And as you would have guessed, you just replace the #FF0000 or #000000 in that code with what ever color you wish to use. Next comes the text. So you will probably want a title. To do this, the best method without a css template is to use a div field. Although you will to some degree use css, the font tag which once would have been used has been depreciated.
More will soon be appended to this article.
