You will not be using a text for the web page projects. Project instructions, self-checks, online resources and lecture notes will be provided as reference. (There is information about creating web pages in the text for this course, but some of it is outdated. Refer to project instructions; NOT the text.)
When reading tutorials and online resources about creating web pages, there are several terms that you will encounter. To enable you to more easily understand different descriptions of how to create web pages, review the information given below while you are learning to write web page codes.
Sample web page with basic codes (tags):
<html>
<head>
<title>Learning About Web Pages</title>
</head>
<body>
<h1>Headings should be short!</h1>
<p>Paragraphs of text will automatically use word wrap to fill the window according to the screen resolution and monitor size of the user's machine.</p>
</body>
</html>
Tags:
To place elements on a web page (paragraphs, pictures, links...), code is used to identify different items. This code is typically referred to as a "tag." (Other terms that may be used that mean the same thing as "tag," are: elements, commands or flags.) In the example above, the <p> </p> tag is used to place a paragraph of text on the web page. The <p> shows where the paragraph starts. The </p> shows where the paragraph ends. Tag names are always enclosed in brackets. These brackets are the "shift" of the comma and period keys on a standard keyboard. < >
Container tags:
There are two types of tags: container tags and empty tags. (Empty tags will be discussed in the next project.) Most HTML tags are container tags. These require that you use a set of tags to surround the item on the page that you are displaying.
The start tag shows where the element begins.
The end tag shows where the element ends.
XHTML requires all codes to be all lowercase as shown.
| Tag Name | Purpose of Tag |
| <html> </html> |
To start and end the document. You can only have one set of html tags per document. They are used to surround all of the code for your page. |
| <head> </head> |
To enclose meta and title tags to be used by the browser. We will not use meta tags this week. You can only have one set of head tags per document. |
| <title> </title> |
To provide a short description of the page contents. It does not display on the page itself. It only displays in the top blue bar of the browser window when you see the page in the browser. You can only have one set of title tags per document. The title tags must be "nested" inside the head tags. <head> <title>Text for Title goes here</title> </head> |
| <body> </body> |
To surround all of the content on the page that will display. You can only have one set of body tags per document. The starting body tag <body> should be after the ending head tag </head>. The ending body tag </body> should be before the ending html tag </html>. |
| <p> </p> |
To surround text for paragraphs. When you start a new paragraph, the browser automatically leaves a blank line above the paragraph. Text contained inside paragraph tags will automatically word wrap when viewed in the browser. |
For those of you who would like even more information about the code in the sample web page, here is a line-by-line description of the web page code.
<html>
The starting html tag indicates where the code for the page begins. You can only have one starting html tag per document. (The ending html tag will be at the end of the code.)
<head>
A web page has two major sections: the "head" section and the "body" section. The head section is first. It is used to provide information to the browser. It can contain various codes that will determine how the page is loaded into the browser. Items in the head section do NOT display as part of the web page when the page views in the browser. There can only be one starting head tag in a document. It should be placed AFTER the starting html tag. (The ending head tag is used after all of the code used for the head section of the page. In the sample page, the title tag is the only tag in the head section of the page.)
<title>Learning About Web Pages</title>
The title tag is one of the most important elements for a web page. The text for the title tag should be in "title case" (important words have the first letter capitalized). The text contained in the title tag does NOT display in the document window for the web page. It displays in the title bar of the browser. (When viewing a web page, look at the blue bar at the top of the browser window to see what text is provided with the title tag.) If someone saves your page into their Favorites list, the text in the title tag will display in the Favorites list. Search engines also use the text of the title tag to help place the page in their database and to display in search results. Give careful thought to the text you use for a title. Words should be descriptive of the content of the page. Avoid general terms. Example: "Facts about Canadian Geese" would be better to use than "My Geese Page." The text for the title must be between the starting title tag and the ending title tag. The title tag MUST be in the "head" section of the code. It should be between the starting head tag and the ending head tag. There can only be one title per document.
</head>
The ending head tag shows where the head section of the document ends. The head section of the code must end before the body section begins. There can only be one ending head tag per document.
<body>
The starting body tag should be right after the ending head tag. It begins the section of code for all of the elements that you want to display in the document window of your web page when it displays in the browser. There can only be one starting body tag per document.
<h1>Headings should be short!</h1>
Headings are often used in documents to break up sections of the text. Headings should always be in the body section of the code. Headings will be large and bold. They should be short lines that introduce different parts of your page. There are 6 different levels of headings. The level 1 heading is the largest. The level 6 heading is the smallest. Change the level number for your headings based on the hierarchy of your document. Major headings should be larger than minor headings. Heading size should be consistent throughout a long document. Headings should include descriptive words similar to using headlines in a newspaper or chapter titles in books. When you use a heading, a blank line will be placed above the heading. Headings should only be used in the body section of the coding. You can use an unlimited number of headings.
Headings should stand alone. They should NOT be placed inside paragraphs and paragraphs should NOT be inside heading tags.
Example of INVALID use of headings and paragraph code:
<p>Paragraph with <h4>a heading inside it.</h4> THIS IS WRONG!</p>
<h4>Heading with <p>a paragraph inside it.</p> THIS IS WRONG!</h4>
Example of VALID use of heading followed by a paragraph.
<h4>Heading to Introduce Section of Text</h4>
<p>Paragraph of text to follow heading. THIS IS CORRECT!</p>
<p>Paragraphs of text will automatically use word wrap to fill the window according to the
screen resolution and monitor size of the user's machine.</p>
Paragraphs should always be in the body section of the code.
Paragraphs always display with a blank line before them.
You can use an unlimited number of paragraphs.
Each paragraph must have its own set of <p></p> tags.
When you press the ENTER key to leave blank space vertically in Notepad,
it has no effect on the text when it displays in the browser.
The only way you can create "white space" vertically or horizontally in a web page is with code. So, each time you start a new paragraph, you need to have a <p> tag. As soon as you end the text of the paragraph, you add the </p> tag.
</html>
The ending html tag indicates the end of the code for the page. It is typically the last tag on the page. There can only be one ending html tag per document.
The directions for these projects assume that you will be using a machine with Windows, Notepad and Internet Explorer.
Tools that you will be using for the next few projects:
(If you are reading these instructions offline from a printed copy, go to the class web page and view the instructions in the browser. This will allow you to copy and paste the code.)
Keep the Internet Explorer window open that is displaying the instructions for the project.
Open a second window of Internet Explorer. This window will be used to view the practice web page in "browser view."
Open Notepad. It is important to note that this is NOT Word, WordPefect, WordPad, Works…or any other program. What you REALLY want is NOTEPAD.
If you have never used NOTEPAD before:
This window will be used to create, edit, view and save the CODE for your web page.
If you are not used to using more than one program at a time, practice using the status bar at the bottom of the screen that displays "buttons" for each of the "windows" or programs that you have open. At this point, you should see two buttons for Internet Explorer and one for Notepad. You can click on the buttons at the bottom of the screen to change which window is the "current" window.
The "current" window should be the Internet Explorer window that is displaying the project instructions. Highlight all of the code shown at the top of these instructions for a sample web page. With the code highlighted, use the COPY command. (You can activate the copy command by using the Edit menu >> Copy or by using the keyboard combination of Ctrl + C. This means to hold down the CTRL [Control] key on the keyboard while you tap the C key.) When you use the copy command, the highlighted text will be stored in memory waiting for you to choose where to "paste" it. The codes shown at the beginning of these project instructions are basic codes found in nearly all web pages. (Title text, a heading and one paragraph have been included just to have some text to display.)
After "copying" the code, click on the "button" in the status bar to make Notepad the "current" window." If necessary, click inside the Notepad window to see the cursor blinking in the upper left corner of the blank document. Use the PASTE command to paste the code into the Notepad window. (You can activate the paste command by using the Edit menu >> Paste or by using the keyboard combination of Ctrl + V. This means to hold down the CTRL [Control] key on the keyboard while you tap the V key.) When you do this you should see the code for the web page appear in the Notepad window. If it doesn't, go back to the Internet Explorer window, repeat the steps given to copy the code and paste it into Notepad.
Several important things must be considered when you SAVE the file in Notepad so that it will display as a web page in a browser.
File Menu / SAVE AS command / Type practice.html as the filename being sure to include the .html extension.
Reminder of rules to follow when naming files for this course:
Now that you have created the code for your file in Notepad, you need to view the page in the browser. You do not need to “publish” a page to see what it will look like on the Internet. You can view it in Internet Explorer from your storage device. No one else can see it unless they are at your machine, but you should view your file in the browser to check the display BEFORE you publish it to the Internet to share it with others.
KEEP NOTEPAD OPEN. You may want to return to your code to make editing changes. It is more efficient to keep it open so that you can go back and forth between the browser view and your Notepad code view easily.
To view your web page in the browser:
This page does not have much text on it. The only text that will display is content that has been typed within the <body></body> section of the code. You should see the line: "Headings should be short!" This text will be large and bold because it is enclosed in tags <h1></h1> to make it a level 1 heading. You will also see a sentence that says: "Paragraphs of text will automatically use word wrap to fill the window according to the screen resolution and monitor size of the user's machine." This displays as a paragraph because it is between the <p></p> tags on the page. The title bar of the browser window should be displaying the text "Learning About Web Pages." This displays in the browser's title bar because it is contained within the <title></title> tags in the head section of the code for the page.
If you see any changes that need to be made, toggle back to the Notepad window, make changes in the code, SAVE the changes.
To see the result of any changes you made in your Notepad code, toggle back to the Internet Explorer window and use the REFRESH toolbar button so it will re-read your coded page. (Changes made in your file in Notepad do not automatically update in the Internet Explorer window. The refresh button allows the browser to re-read your code.)
Continue this procedure until you have your file like you want it.
Close both Internet Explorer and Notepad to simulate what it will be like when you leave your machine and come back at a later time.
The BEST WAY to edit an existing file is to OPEN NOTEPAD FIRST.
Then . . . use the File / Open command in Notepad. When you do this, Notepad will only display files that have been saved with a .txt extension. To see web pages that you have created and saved properly with the .html extension, in the Open dialog box, you will have to drop down the list arrow for “Files of Type” and choose “All files.” Pages that you have saved as web pages should then display also.
Troubleshooting:
While observing students who are new to creating code for web pages, I have seen that many people are used to using Windows Explorer or My Computer to find files they want to open. If you use Windows Explorer or My Computer to locate a file you have created and you double-click on the name of the file to open the file, it will automatically open in browser view rather than code view in Internet Explorer.
It is possible to make a web page file open in code view from Windows Explorer or My Computer. Instead of double-clicking on the filename, RIGHT-click. From the pop-up menu, choose: Open With / Notepad. This should open the code view of the file in Notepad for editing.
Even more information about viewing and editing the source code of web pages . . .
When you are viewing a page in browser view in Internet Explorer, you can use the View menu / Source command to see a COPY of the code for the page. If you make editing changes to this copy of your code, it is IMPORTANT to be very careful when you are ready to save the file. By default, Internet Explorer may save the file to a new storage location and with a different name than your original file. (This will create a NEW file instead of just editing an existing file.) If you edit a copy of your code in the browser be sure to use the FILE menu / SAVE AS command. DO NOT use the SAVE toolbar button or the SAVE command. Using SAVE AS takes you to the dialog box to be sure the storage location and the name of the file is what you want it to be. When you save an edited copy of a file by using the same file name and storage location as the original code, the original code will be overwritten by the new edited version of the code.
Go to http://www.geocities.com
As part of having a Yahoo account, you are given Geocities webspace. You also used Geocities when you completed Project 4 and uploaded your bookmark file. If you can't remember your UserID and password (it should be the same as for your Yahoo email account), you will have to re-register at Geocities.
Uploading directions if you already have your webspace at Geocities:
After you have uploaded your file to the File Manager at Geocities, you can
also see your page in the browser by typing in the URL for your page in the address
bar of the browser. Your URL should be something like:
http://www.geocities.com/login/practice.html
(replace the login with your user name that you use to log in at Yahoo/Geocities.)
When you are testing your pages by viewing them in the browser, you may get
pop-up windows with Error messages asking if you want to
"debug." Always answer NO to these pop-up boxes. Ignore these
messages.
It is possible to edit your code in the File Manager at Geocities but you SHOULD NOT DO THAT! Always make your editing changes in Notepad and upload the file again. When you upload a file to Geocities that is an edited version of an existing file, it will replace the old version for you.
Some things to consider if you have already published your web pages to a server at Parkland or to Geocities for this course and you want to make editing changes to the page:
When making editing changes to pages that have been published, it is always best to open your original files stored on your storage device IN NOTEPAD to make the changes. Making changes to the original files on your storage device has no effect on the copy of your pages stored on the server. To see the editing changes you make to the original files, you will need to re-upload the files to the server. The new code will overwrite the code of the original file on the server.
You should always have an up-to-date, accurate copy of your web pages on your own storage device. The web pages that you store on the server should be COPIES of your web pages that you have on your own permanent storage device like a floppy disk, hard drive or pin drive.
Note: When you view your pages in the browser, you can view the code for the page by clicking on the View menu and choosing the Source command. The code you see is NOT the code that is on your storage device. It is displaying a COPY of your code for the page that is stored on the server. (If you have published your pages to Geocities, there will also be extra code that has been added for the advertising Geocities puts on your page.) Do NOT save the code of your page from browser view after you have uploaded the file to Geocities. ALWAYS edit code from the permanent copy of your code in NOTEPAD on your storage device.
Learning to create web pages requires a lot of practice and very careful attention to detail. One wrong character can make the entire page invalid. Take time to practice making simple web pages to learn how to troubleshoot your code. The ability to proofread to make your code accurate is extremely important. You will be required to use VALID coding. Internet Explorer will allow you to create pages with sloppy coding, but for this course your code will need to be completed according to the rules for VALID XHTML code. Valid code is more reliable to be viewed in different browsers across different versions and is also important to make code easier for others to edit and read. If you use sloppy coding, it will cause problems when you learn to add formatting styles and more advanced elements to the page.
Answers to the self-check questions can be found in the project instructions and at the website for W3Schools. W3Schools is an excellent online resource that you should become familiar with. Take time to visit the W3Schools website and learn how to navigate through it to find helpful information.
It can be found at: http://www.w3schools.com/
On the W3Schools home page, look in the middle column. Scroll down the page to a section labeled: "Where to Start." In this section, click on the link that says, "For the beginner: Click on Go to our Web Building Primer." When you get there you will see links on the left side of the page. Click on "Web WWW."
Web pages are files stored on computers called _______________.
Using the information in the project instructions, answer the following:
Create a web page. Be sure to include the following container tags:
View your web page in the browser. Carefully proofread your code. Points will be deducted for INVALID coding even if the content of the page views correctly in the browser. For example: If you are viewing the page in Internet Explorer and you forget to include ending paragraph tags where they are needed, IE will still display your page correctly. However, this WILL cause problems later when we add style rules for formatting text. Study the rules for VALID coding and proofread carefully to achieve maximum points. Seeing your content display in the browser is a good indication that you have done things correctly, but you still need to check over your code to be sure everything is accurate.
Send me your URL.
Make sure the URL is on a line by itself.
The URL should be similar to:
http://www.geocities.com/login/hometown.html
In the above URL you will need to replace "login" with your login username at Geocities.
The easiest way to be sure that you send an accurate URL for me to view your page is to view your page in the browser. With your page viewing, RIGHT-click in the address bar that displays the URL for your page. This should highlight the URL and open a pop-up menu. Choose Copy. [If the menu does not show up, select the URL in the address bar and with the URL highlighted, use the copy command (Ctrl + C)]. Open your email and use Compose. In the email window to send me a message, RIGHT-click in the window and choose Paste from the pop-up menu. [If the menu does not appear, click in the message area of your email and use the paste command (Ctrl + V)]. Your URL should appear in the compose window.
Send a cc: of the email to yourself so you can check the validity of the URL you send me. If I have to ask you to resend your URL, you will lose points.
Reminder: Send answers to both of these email addresses: