Build a web page

Look at a web page

Click the link to see a very simple web page. It is very simple, but it contains the essential elements. In your Firefox browser, right click and select   -view page source   to see the source code I typed. (It might be a little different in another browser.) Close the source code window. Use the back arrow from the sample page, to return to this page.

The <!DOCTYPE html> says this is an HTML page.
The <html> tag starts the page.
The </html> tag is at the bottom.
All the other html tags are contained within this <html>   </html> container.
Often html tags are in pairs, like this, making a container.

Within the <html>   </html> container, we find the <head>   </head> container, followed by the <body>   </body> container.
Within the <head>   </head> container, we see the <title>   </title> container.

Other typing, that is not in a tag, is just text. The text within the <title>   </title> container shows up in the blue window bar at the top of the window.
The text within the <body>   </body> container shows up within the body of the window.
Everything that is to be within the window must be within the <body>   </body> container.

This <html lang="en"> tag specifies that the language is English.
The <meta charset="utf-8"> tag specifies a character set that works for almost all of the alphabetic characters used in the world.

The html, head, title, and body are required elements in all standard web pages.
The p and meta are not required elements, but are very commonly used.

Create a directory for your web pages

You need a directory to keep your web pages in while you work on them, before you put them up on the Internet. The links at the left lead to pages which tell you how to setup at home, and how to set up a windows account at school. You can work at home ( or other place where you have a computer ) or you can work at school. Many students work both at home and at school.

You can carry work between home and your windows account at school using a USB flash drive, or send it to yourself in an email. At the end of the quarter, you may wish to carry a copy of all of your work from school to home, because the student accounts are destroyed at the end of the quarter.

Build a web page

Now you are ready to build your own web page. Carefully note the following things:

  • The tags are typed in lower case. Sometimes it makes a difference if you type in lower case small letters or in upper case capital letters. Always type file names, tags and other html things in lower case. ( Of course your ordinary text may have some upper case letters. )
  • The contents of a container is indented two or three spaces. If you do not indent, it is hard to find the closing tag that matches the opening tag of the container.

Use notepad as your editor on Windows. If you are a Mac user, use the TextEdit editor. If your home computer is a Linux system use vi, Emacs, or pico.
DO NOT USE ANY OTHER EDITORS.
Most other html editors will put in html tags that you may not understand. I want you to type the html tags, so you learn them. After you complete this course, you may wish to use Dreamweaver, or some other html editor, to help you build pages faster. In this course you learn the html tags. You can use your knowledge of the html tags to be able to use an html editor better. Your knowledge of how html works will provide you with background you need to learn advanced web page technologies; they are based on html.

Look at the sample page. Type your own page. Make your page like the sample, except put your first name in the title, and type a couple of sentences in the body.

Save your page in your public_html directory with the name lab1.html.
Windows notepad users, when you save a web page in the notepad editor you must specify - save as - all files. If you do not, notepad will add .txt at the end of the file name. The .txt will be hidden by Windows so you do not see it. The .txt at the end will keep your file from working as an html page.
Mac TextEdit users, you must first convert to plain text using FORMAT-->Make Plain Text. Then use SAVE AS and choose html.

Get a good browser

You need a good browser. Mozilla Firefox is very good. I usually use Firefox to grade your pages. Opera is very good. Chrome is also very good, Safari has a good reputation in the Macintosh environment. Pick one of these four, download it, and install it on your own computer. Firefox and Chrome are already installed on the CIS computers at school, so you do not need to install a browser when you work on these computers.