MCCC CIS 177 - Markup Languages

Lab 1.2: Create a Web Page

1.10 Creating an HTML Document

HTML syntax1.11 HTML Syntax

Tags are used to indicate the document is a Web document, to specify the document structure and layout and to format content. Your browser interprets how to display your document based on tags you’ve used. There are two types of tags: container and empty.

Container tags come in pairs, in the form of opening and closing tags, while empty tags stand alone. You always begin your Web page with the opening container tag <html> and end your document with its companion closing tag </html>.

Notice that the closing tag is preceded by a forward slash. This tag tells the browser to interpret everything between it as HTML code, which it renders appropriately. You type all other code between the opening and closing HTML tag.

A tag can consist of the three items inside the angle brackets: 1) the tag itself, which specifies the element to display; 2) attributes, which allows you to specify how the element is displayed, such as in color; and 3) a value for the attribute that defines the attribute, such as which color to use (see Figure 1). Different tags can accept only certain attributes. It's helpful as you become familiar with the various tags to think of them in terms of how they are used to format your page. Three levels of granularity include document structure tags, block-level elements and text-level elements:

Document Structure Tags
Document structure tags define the document and include <html>, <head>, <title>, and <body> tags. Each of these is a container tag requiring closing. The first tag in your HTML document is <html>. This tag tells your browser that this is the start of an HTML document. It's closing counterpart </html> is the last tag in your document telling your browser that it has reached the end of the page.

The text within the <head> tags is information used by the browser regarding other document specifications. Header information is not displayed in the browser window. The <head> tag supports sub-elements that define, among other things, the page title, search terms, scripts (JavaScript or VBScript), and styles (CSS).

The page title is indicated between the <TITLE> tags. The page title is displayed in your browser's title bar at the top of the window. It's also used in "Favorites" (Internet Explorer) and "Bookmarks" (Netscape Navigator). Search engines will also use the page title for indexing purposes. For these reasons, your page title should be as descriptive as possible.
Block-Level Elements

Block-level elements affect an entire paragraph or multiple paragraphs. The most basic block-level element is the <p> tag, which defines the start of a new paragraph. The <p> tag can be either a container or empty tag. The <br> tag specifies that a line break be inserted wherever the tag occurs and is always an empty tag. The <h1> through <h6> tags allow you to specify a default heading format to your text. Heading tags will automatically create a double-spaced paragraph break. Throughout the course you'll learn more sophisticated ways to control page layout and content using block-level elements.

Text-Level Elements

Text-level elements affect characters and words. Some tags produce identical formatting as other tags. For example <b> and <strong> will both display the related text as bold. These redundancies are a result of revisions to the HTML specifications. Older tags continue to be part of these specifications for backward-compatibility reasons. Tags can also be used together. This is referred to as "nesting." To properly code nested tags, the first tag opened should be the last tag closed. Later, you'll learn additional ways to format your text, including using various fonts, color and sizes.


Use document structure tags1.12 Creating Basic Tags

Using Notepad, create the document structure for Mr. Dubes's Chemistry class home page by typing the following code and content. Name the file chem.htm.

<html>
<head>
<title>Mr. Dube's Chemistry Classes</title>
</head>

<body>
</body>

</html>

File naming rulesImportant Info on File Naming

Since You will ultimately upload, or publish your Web files to a Web server, it's important to understand how NOT to name your files, including image files. Many servers are UNIX based platforms, which are case-sensitive and sensitive to using non-alphanumeric characters. To avoid problems, use a naming scheme that is consistent throughout your site. For example, use all lower-case letters and do NOT use any non-alphanumeric characters with the exception of the underscore and hyphen. The name of this page you are viewing is lab01-02.html. You must specify either .htm or .html as your extension so your server knows to serve the page when it receives an http:// request. Http:// is the hypertext transfer protocol, which is the communication standard for sending and receiving Web pages.


View HTML in browser1.13 Displaying Your HTML Files

Once you've created an HTML document, it's time to view it in the browser. You can open the page you created by navigating to it using Windows Explorer or My Computer and double-clicking the file. Alternatively, you can open it via the browser's File > Open menu.

Open chem.htm in the browser and examine the Web page. Compare the output with your code.

Work offlineImportant Info About Working Offline

At this stage, since you are working offline, you will not be able to detect file naming problems. Don't let the fact that Windows allows you to name your files pretty much anything fool you. To save yourself headaches later, verify you followed the file naming rules described previously.

1.14 Creating Headings, Paragraphs and Lists

Use <h#>tags1.15 Creating Heading Tags

Heading tags are commonly used to provide emphasis and separate the page topcially. Continue with chem.htm and add the following headings in the <body> section. Save the file and view it in the browser.

<body>
<h1 align="center">Mr. Dube's Chemistry Classes</h1>
<h2 align="center">At Robert Service High School</h2>
<h2>Chemistry Classes</h2>
<h2>Class Policies</h2>
<h3>Grading</h3>
<h3>Appointments</h3>
<h3>Safety</h3>
</body>

Browser cache & refreshImportant Info About the Browser Cache

When you request a Web page, your browser makes a copy of the page on your hard drive. This is known as "caching." Think of a cache like a temporary storage area or buffer. The idea is that people generally are creatures of habit and will want to visit the same pages frequently. By storing a copy on your local system, the browser can retrieve the copy more quickly than the original, thereby speeding up your surfing experience.

The problem to the designer is obvious. When you edit your page and request to view it in the browser, the unedited version of the page appears from the cache (if it was previously requested). Thus, your changes won't appear unless you request to "refresh" (Explorer) or "reload" (Netscape) from the View menu, or by selecting the applicable option from the right-click popup menu. In addition, although users can opt to change the frequency that the browser checks for page updates and can optionally "clear" the cache of outdated pages, manu users are unaware of these features or simply don't bother with them.


Use the <p> tag1.17 Entering Paragraph Text

Another common block-level element is the <p> tag that defines paragraphs. Even if your paragraph text needs no further formatting, for consistency reasons, it's a good idea to get into the habit of inserting <p> tags wherever you have a paragraph. Continue with chem.htm and add the following paragraph under heading 1. Save and refresh the file in the browser.

<h1 align="center">Mr. Dube's Chemistry Classes</h1>
<p>Welcome to Mr. Dube's Web site. I hope you will use this site to learn more about your class, my expectations, and chemistry in the world around you.</p>

Text wrap & line breaksImportant Info About Text Wrapping and Line Breaks

In Notepad, you may need to choose Edit > Word Wrap for your text to automatically wrap to the next line. Do NOT press ENTER when you are composing a paragraph, only after you've finished a paragraph. It's important to know that even when you press ENTER, the browser ignores it. You can format new lines only by inserting the appropriate block-level elements. The <p> and <h#> tags double-space while the <br> tag single spaces to a new line.

Add the remaining paragraphs to chem.htm. Save and refresh the file in the browser.

<h3>Grading</h3>
<p>Homework will be given daily, is due at the beginning of the period of the school day after it was assigned, and will be worth 5 to 10 points. A periodic quiz consisting of 1 or 2 homework problems from the past week may be given in lieu of collecting homework.</p>

<p>Tests and quizzes will be used to check your understanding of concepts, procedures, and information. Quizzes will be worth 10 - 25 points and will be given at least once a month. Tests will be worth up to 100 points and will be given 2 or 3 times a quarter.</p>

<p>Labs will be worth 10 to 30 points and will be graded on safety, participation, and write-up. I expect neat handwritten or typed reports. I'll also assign small research projects throughout the semester.</p>

<p>You must make up missed tests and quizzes the day you return, and you must submit missed homework assignments and labs within two days for every one day you missed. Failure to make up work within these time frames will result in a 0 for that test or assignment.</p>

<h3>Appointments</h3>
<p>I can meet with you before or after school. I will also be in my room (H113) during most lunch hours. Please do not hesitate to stop in if you need extra help -- do not wait! Chemistry is a building subject, and it is very hard to catch up once you fall behind.</p>

<h3>Safety</h3>
<p>We will be doing lab work nearly every week. Because of the potential danger of any lab exercise, I will hold you to the highest standards of behavior, and will remove you from the class if you pose a threat to yourself or other students.</p>

Use list tagsList tag syntax1.22 Creating Lists

Common block-level formats include ordered (numbered) and unordered (bulleted) lists, which use the <ol> and <ul> tags respectively. Whichever list style you use, the individual list items are contained in <li> tags. The definition list <dl> is an alternative list style that uses the <dt> (defined term) and <dd> (definition) for individual listings. The following are examples of each type of list and how they appear in the browser. You'll learn more about list tag syntax and options later in the course.

List Tags Results
<ol>

<li>Bread</li>
<li>Milk</li>
<li>Eggs</li>

</ol>

  1. Breads
  2. Milk
  3. Eggs
<ul>

<li>Bread</li>
<li>Milk</li>
<li>Eggs</li>

</ul>

  • Bread
  • Milk
  • Eggs
<dl>

<dt>Bread
<dd>
The outer part of a sandwich.</dd></dt>
<dt>Milk
<dd>
A beverage not suitable for lactose intolerant people.</dd></dt>
<dt>Eggs
<dd>
A food commonly eaten for breakfast.</dd></dt>

</dl>

Bread
The outer part of a sandwich
.
Milk
A beverage not suitable for lactose intolerant people.
Eggs
A food commonly eaten for breakfast.

Add a list to the chem.htm page as follows. Save and refresh the file in the browser.

<h2>Chemistry Classes</h2>
<ul>
<li>Conceptual Chemistry: An introductory course requiring basic math but no algebra</li>
<li>Chemistry I: An introductory course requiring solid algebra skills</li>
<li>Advanced Placement Chemistry: An advanced course requiring a grade of A or B in Chemistry I and designed for students who want to prepare for the AP Chemistry exam (which can count toward college credits)</li>
</ul>
Close list item tagsImportant Info About Closing List Items

You may notice the author of the text book does not close the <li> tag, where the examples in the online materials do. For the most basic HTML implementation, it generally is not a problem to omit the </li> (or </dd> and </dt>) tags. When working with DHTML, however, I've found many scripts do not function correctly when </li>, </dd> and </dt> tags are omitted. Since it doen't hurt to use them, and can hurt not to, I recommend getting into the habit of closing all list related tags.

1.26 Creating Character Tags

Use common text-level tagsCommon text-level tagsMore on Text-Level Elements

Text-level elements allow you to format individual characters or words. HTML 4.01 includes a variety of text-level tags you can choose from depending on if you want to use the text is a specific way or if you want the text displayed in a specific way. The difference between use and display is commonly referred to as logical tags and physical tags respectively, some of which produce identical formats. You can also nest tags, or use tags within tags to add multiple formats to the related text. Examine the following examples.

Text- Level Tags Results

Logical Tags

<em>Italic emphasis</em>
<strong>Bold emphasis</strong>
<code>Machine code</code>
<kbd>Keyboard</kbd>
<var>Variable</var>
<cite>Citing passages</cite>
<em><strong>Bold & italic</strong></em>

Logical Tags

Italic emphasis
Bold emphasis
Machine code
Keyboard
Variable
Citing passages
Bold & italic

Physical Tags

<b>Bold</b>
<i>Italicized</i>
<u>Underlined</u>
<tt>Typewritier text</tt>
<big>Big text</big>
<small>Small text</small>
<sup>Superscript</sup>
<sub>Subscript</sub>
<b><i>Bold & italic</i></b>

Physical Tags

Bold
Italicized
Underlined
Typewritier text
Big text
Small text
Superscript
Subscript
Bold & italic

Add the following character tags to chem.htm. Save and refresh the page.

<h3>Grading</h3>

<p><i><b>Homework</b></i> will be given daily, is due at the beginning of the period of the school day after it was assigned, and will be worth 5 to 10 points. A periodic quiz consisting of 1 or 2 homework problems from the past week may be given in lieu of collecting homework.</p>

<p><i><b>Tests and quizzes</b></i> will be used to check your understanding of concepts, procedures, and information. Quizzes will be worth 10 - 25 points and will be given at least once a month. Tests will be worth up to 100 points and will be given 2 or 3 times a quarter.</p>

<p><i><b>Labs</b></i> will be worth 10 to 30 points and will be graded on safety, participation, and write-up. I expect neat handwritten or typed reports. I'll also assign small research projects throughout the semester.</p>

<p>You must <i><b>make up</b></i> missed tests and quizzes the day you return, and you must submit missed homework assignments and labs within two days for every one day you missed. Failure to make up work within these time frames will result in a 0 for that test or assignment.</p>

Rules on nesting tagsImportant Info About Nesting Tags

Browsers may display nested tags correctly even if you close them in the wrong order. It is important to remember that when you add other languages to your document, closing tags in the wrong order may cripple the page. When you nest tags as in the above examples, always remember to close tags in the reverse order in which you opened them.