Company History |
Contact Us |
Education |
Tech. Tips |
Home |
|---|
| Creating first web page |
Web pages are basically a series of instructions and information that are sent to your web browser. The instructions are in the form of tags. In most cases, there are start tags and end tags. If the tags are written correctly, the web browser (Internet Explorer or Communicator for instance) will display the information included with the tags. If the tags are written incorrectly, the display will almost certainly not be what you expected. Even if the tags are written correctly, each web browser may or may not support all tags. Beyond that, different web browsers may interpret the same tags differently, so your pages may look different simply depending on the software used to display them.
Before we start building your first page, keep in mind that a webpage is just a series of instructions in a text file. As long as your web browser can open the file, it can read the instructions. Because of this, you don't need a dedicated web server to have web pages. In an office, you can easily share web pages over the network simply by sharing the files. If you want to do anything beyond simple pages, like accessing database records, you will need to set up a web server.
A basic page:
The first and most critical tags define the text file as an HTML document.
|
<html>
</html> |
Your information will go between these two tags. The "/" in the second tag indicates it's an end tag. This tells the web browser the instruction that was started by the first tag is concluded. Information before and after these tags will be ignored. Some web browsers will allow you to skip these tags, but it is good practice to always use them. So far this isn't a very useful web page, so let's continue.
|
<html> <head> </head> <body> </body> </html> |
We've added four new tags. The <head></head> tags are placeholders for the document header. This is a place to store useful information you won't generally see in the web browser. The <body></body> tags are where you will see actual content. If you typed these tags into a file called "hello.html" and opened that file with your web browser, you would see an empty page. That's about to change.
|
<html> <head> <title>This is my first web page</title>
</head>
</body> |
If you added the line: <title>This is my first web page</title> to your hello.html file and re-opened it, you may have noticed the title bar of the web browser now says "This is my first web page"
You have just added a title line to the document header. These are useful for "naming" a page. Let's add more content:
|
<html> <head> <title>This is my first web page</title>
</head>
</body> |
Once you've edited hello.html to add the text in bold above, you should see both the title and the phrase "Hello World! This is my first web page." in your web browser. The <body> of a web page is where you put the main information for your viewers. Your test file is functional, but not very useful. Let's continue to add information. Try adding these lines exactly as shown below:
|
<html> <head> <title>This is my first web page</title>
</head>
Here's the fourth line of text. |
When you viewed the file in your web browser, all the text ran together. The reason is that there were no instructions to tell your web browser you had started new paragraphs. You can fix this by putting in the <p> tag. You can generally use the <p> tag without a closing </p> tag. Add the following tags to your file and view it again.
|
<html> <head> <title>This is my first web page</title>
</head>
Here's the fourth line of text. |
The page you've created is ok for plain text, but it's easy to incorporate different fonts to make it easier to read. There are three main ways to change the fonts in an HTML document. The first and most basic form is to use outline heading tags: <h1>, <h2>, etc. When web browsers were first created, the emphasis was on form, not style. The body of each document was assumed to have a hierarchical structure - a top level, followed by subtopics, which in turn included lower levels. To achieve this, six tags were defined: <h1> through <h6>. The following will show you the effects of using the tags.
| <html> <head> <title>This is my first web page</title>
</head>
</body> |
As you can see, each line uses a different font effect. The web browser also adds space around the line, and takes care of starting a new line for you, so you don't have to put a <p> or <br> tag after the line.
While these basic tags are good for simple pages, there are better ways to control the fonts. A new tag <font></font> was added to the web browsers as they evolved. This tag lets you tell the browser which font face, size, color and style you want to use. Keep in mind that even if you tell the browser to use a certain font face, the browser can only follow your directions if the font is available on the computer. Because of this, you will probably want to use commonly available fonts, like Times New Roman or Arial. Also keep in mind that fonts found on PC's running Windows may not be available on a Macintosh, or on a UNIX workstation (and vice versa).
| <html> <head> <title>This is my first web page</title>
</head>
</body> |
From this example you can see how the font tag allows you to mix and match effects. The last line also shows the use of the tag for bold. There is a similar tag <i></i> for italics. Note how the tags are "nested." Think of it as peeling an onion; each layer is within the previous layer. Although some browsers try their best to incorporate incorrectly nested tags, the results are unpredictable. In the above example, the line:
| <font face="Arial" size = "2"><b> This line is in bold, Arial font, size 2 color blue </b></font> |
was correctly nested. It would have been incorrect if it had been written as:
| <font face="Arial" size = "2"><b> This line is in bold, Arial font, size 2 color blue </font></b> |
The error is that the <b> tag should have been "closed" before the <font> tag.
