To Temple College Class logo R. Craig Collins > Web Page Design > Making chem.htm

Making chem.htm © R. Craig Collins, 2005/6

This covers the same steps as in the class text... but limited explanations;
details are provided in the text.

Design Starting Point, the chemistry class handout
Dubé handout

To create this HTML file, start Notepad, or some other text editor, and add the following 
<html>

<head>
<!-- Chemistry Classes Web Page
     Author  your name
     Date:   the date
-->
<title>Mr. Dube's Chemistry Classes</title>
</head>

<body>
</body>

</html>
Save the file as chem.htm in the lab1 folder.
Start your web browser, and open the web page. (File/Open... and browser to chem.htm)
You should see a blank window, but note the title in the blue title bar.
Switch back to notepad, and add the following between the <body> and </body>
(Items in red are in-line formatting, not really a part of HTML, and will be covered in this class later in the semester.
Items in gray are already in your code, used as a reference point)		 

<body>
<h1 style="text-align: center">Mr. Dube's Chemistry Classes</h1>
<h2 style="text-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>

Save your changes to chem.htm; switch to your browser, and refresh (F5 key),
You should now see the following in the main browser window.

Mr. Dube's Chemistry Classes
at Robert Service High School

Chemistry Classes

Class Policies

Grading

Appointments

Safety
Next we will add text. To allow formatting of this block of text later, we will place the text between paragraph tags.

Back in notepad, create a new line below ...at Roberts Service High School</h2>
and add the following: (note: again, gray text is already in place, for location reference)		 
<h2 style="text-align: center">at Robert Service High School</h2>
<p>Welcome to the Robert Service High School Chemistry Web page.
   Here you'll learn more about our chemistry classes and our
   policies.</p>
<h2>Chemistry Classes</h2>
Save, switch back to your browser and refresh, to verify the paragraph text was added.
Back in notepad, add the following paragraphs
<h3>Grading</h3>
<p>Homework: Homework is worth 5 to 10 points and will be given
daily. A quiz consisting of 1 or 2 homework problems from the
previous week may be given in place of homework.</p>

<p>Tests and Quizzes: Quizzes are worth 10 to 25 points and will be
given at least once a month. Tests are worth up to 100 points and
will be given three times each quarter.</p>

<p>Labs: Labs are worth 10 to 30 points and will be graded on safety,
participation, and write-up. Reports should be neatly written or
typed. <i><b>Research projects</b></i> will also be assigned throughout the
year.</p>

<h3>Appointments</h3>
<p>You can meet with Mr. Dub&#233; before or after school or during most
lunch hours in room H113. Do not hesitate to ask for help! It can be
very hard to catch up if you fall behind.</p>

<h3>Safety</h3>
<p>Labs are completed weekly. Because of the potential danger of any
lab exercise, you will follow the highest standards of conduct.
Misbehavior can result in dismissal from the lab.</p>

</body>
Save and switch to your browser; your text should look like the following after refreshing
Grading

Homework: Homework is worth 5 to 10 points and will be given daily. A quiz consisting of 1 or 2 homework problems from the previous week may be given in place of homework.

Tests and Quizzes: Quizzes are worth 10 to 25 points and will be given at least once a month. Tests are worth up to 100 points and will be given three times each quarter.

Labs: Labs are worth 10 to 30 points and will be graded on safety, participation, and write-up. Reports should be neatly written or typed. Research projects will also be assigned throughout the year.

Appointments
You can meet with Mr. Dubé before or after school or during most lunch hours in room H113. Do not hesitate to ask for help! It can be very hard to catch up if you fall behind.

Safety
Labs are completed weekly. Because of the potential danger of any lab exercise, you will follow the highest standards of conduct. Misbehavior can result in dismissal from the lab.
In notepad, add the following below <H2>Chemistry Classes </h2> to create a list, and list items
<h2>Chemistry Classes</h2>
<ul style="list-style-type: square">
<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</li>
</ul>

<h2>Class Policies</h2>
After saving, switch to your browser and refresh. You should see the following added:

Chemistry Classes

  • Conceptual Chemistry: An introductory course, requiring basic math but no algebra
  • Chemistry I: An introductory course, requiring solid algebra skills
  • Advanced Placement Chemistry: An advanced course requiring a grade of A or B in Chemistry I

Back in notepad, we will surround certain words with bold and italic tags, to format their appearance
<h3>Grading</h3>
<p><i><b>Homework</b></i>: Homework is worth 5 to 10 points and will be given
daily. A quiz consisting of 1 or 2 homework problems from the
previous week may be given in place of homework.</p>

<p><i><b>Tests and Quizzes</b></i>: Quizzes are worth 10 to 25 points and will be
given at least once a month. Tests are worth up to 100 points and
will be given three times each quarter.</p>

<p><i><b>Labs</b></i>: Labs are worth 10 to 30 points and will be graded on safety,
participation, and write-up. Reports should be neatly written or
typed. <i><b>Research projects</b></i> will also be assigned throughout the
year.</p>
After saving, switch to your browser, refresh, to see the following formatting applied
(How to check for HTML errors)

Grading

Homework: Homework is worth 5 to 10 points and will be given daily. A quiz consisting of 1 or 2 homework problems from the previous week may be given in place of homework.

Tests and Quizzes: Quizzes are worth 10 to 25 points and will be given at least once a month. Tests are worth up to 100 points and will be given three times each quarter.

Labs: Labs are worth 10 to 30 points and will be graded on safety, participation, and write-up. Reports should be neatly written or typed. Research projects will also be assigned throughout the year.

 

The first two lines of text will be replaced with a picture that includes that text.

So first, save dube.jpg to your lab1 folder... this file MUST be saved in the same folder as chem.htm, and the file needs to remain named dube.jpg.

Right click the image below, and save the picture to your lab1 folder.
dube.jpg

Back in notepad, delete the two lines between <body> and <p> Welcome to...

then, add the following code: (remember, red is in-line style formatting, to be discussed later.)
<body>
<p style="text-align: center">
<img src="dube.jpg"
alt="Mr. Dube's Chemistry Classes at Robert Service High School" />
</p>
<p>Welcome to the Robert Service High School Chemistry Web page.
Here you'll learn more about our chemistry classes and our
policies.</p>
Save your changes, switch to the browser, and refresh. You should see the image now. Point to the image with your mouse, you should see the alternative text display.
Back in notepad, we will add a horizontal rule, a straight line, under the picture.
<p style="text-align: center">
<img src="dube.jpg"
alt="Mr. Dube's Chemistry Classes at Robert Service High School" />
</p>
<hr style="color: red; background-color: red; height: 2; width: 100%" />
<p>Welcome to the Robert Service High School Chemistry Web page.
Here you'll learn more about our chemistry classes and our
policies.</p>
Save your changes, switch to the browser, and refresh. You should see the red line below the image now.
Back in notepad, the last tweak is to spell Dubé correctly, using a special character. Replace the
e at the end of Dube with &#233;
<h3>Appointments</h3>
<p>You can meet with Mr. Dub&#233; before or after school or during most
lunch hours in room H113. Do not hesitate to ask for help! It can be
very hard to catch up if you fall behind.</p>
The final product should look like this

 

Mr. Dubé's Chemistry Classes at Robert Service High School

Welcome to the Robert Service High School Chemistry Web page. Here you'll learn more about our chemistry classes and our policies.

Chemistry Classes

  • Conceptual Chemistry: An introductory course, requiring basic math but no algebra
  • Chemistry I: An introductory course, requiring solid algebra skills
  • Advanced Placement Chemistry: An advanced course requiring a grade of A or B in Chemistry I

Class Policies

Grading

Homework: Homework is worth 5 to 10 points and will be given daily. A quiz consisting of 1 or 2 homework problems from the previous week may be given in place of homework.

Tests and Quizzes: Quizzes are worth 10 to 25 points and will be given at least once a month. Tests are worth up to 100 points and will be given three times each quarter.

Labs: Labs are worth 10 to 30 points and will be graded on safety, participation, and write-up. Reports should be neatly written or typed. Research projects will also be assigned throughout the year.

Appointments

You can meet with Mr. Dubé before or after school or during most lunch hours in room H113. Do not hesitate to ask for help! It can be very hard to catch up if you fall behind.

Safety

Labs are completed weekly. Because of the potential danger of any lab exercise, you will follow the highest standards of conduct. Misbehavior can result in dismissal from the lab.