HTML Lab

In this lab you will explore how to create simple HTML pages and link them together. (These pages will be ugly but functional. Next week we start making them pretty.) Be sure to do the reading / viewing for this week before working through the lab.

Lab Objectives

By the end of this lab, students will be able to...

Directions to Build The Simplest Web Page Ever

  1. Create a new folder on your computer called HTML_lab. Save all files from this lab into this folder.
  2. Open a new document in your text editor, either Brackets (recommended), Dreamweaver, Notepad++ or Komodo Edit (ask me if you wish to use another particular editor)
  3. Type (or copy and paste from here to the text editor) 
    <!DOCTYPE html>
<html>
  <head><title>Simplest HTML page</title></head>
  <body>Hello Everybody</body>
</html>
  4. Save the file as simple.html
  5. View the file in a web browser

Using an HTML Template

The above example represents an extremely simple HTML page, but its not quite complete and its not up to current web standards (it won't validate) which will make your web pages compatible with future browsers.

  1. Open a new document in your editor, either Brackets (recommended), NotePad++ or Dreamweaver (all available on campus) or get one of the following for use at home:Brackets (recommended), Notepad++, Komodo Edit>, Sublime Text, Atom, or (ask me if you wish to use another text editor)
  2. Type (or copy and paste from here to the text editor)

    <!DOCTYPE html>

    <html lang="en">

    <head>

    <title>HTML Template</title>
    <meta charset="utf-8" />
    <meta name= "author" content="yourname" />

    </head>

    <body>

    <h1>Page Heading</h1>

    <p>Page Content </p>

    </body>

    </html>

    You can see this page has the <html>, <head>, <title> and <body> elements, but includes some additional information for the web browsers.

  3. Edit the text to include your name in the <meta> tag content showing as yourname above.
  4. Save this file as template.html
  5. View the file in a web browser.

Create several pages Using the Template, Link Them Together

  1. Open the template.html document in your text editor
  2. Use Save As to make a copy of the template file as a new file a called spring.html
  3. Edit the contents to so that its <title> tag reads <title>Spring</title> and its <body> tag reads 
    <body>
   <h1>Spring Here</h1>
   <p>Can't wait till <a href="summer.html">summer</a>!</p>
</body>
  4. View the file in a web browser
  5. Notice the link? If you click on the link you should get an error message, since you haven't made the summer.html page
  6. Create the summer.html page by repeating steps 1-3, using summer words in the <p> tag and for the title and h1 tag, and changing the <a> tag to link to href="spring.html" .
  7. View the file in a web browser.
  8. Click the links one each page to move from one to the other and back. If you still get an error message be sure the files are both saved in the same directory, double check your code, and the file names for correct spelling and punctuation (all lowercase). Details are important!

Link to pages in other directories

You may want to review the information about linking before completing this part of the lab.

  1. file structureCreate two folders one called blue and one called red
  2. Use the HTML template file to save six different documents with the given names, sunshine.html, rain.html, moon.html, stars.html, day.html, night.html into the folders as shown. Note that sunshine.html and rain.html are not in either folder.
  3. Edit each file with an appropriate Title (<title>) and header (<h1>) as done in part 3 above.
  4. Create five links in each document that connect it to each of the other documents. Use an unordered list <ul> and a link tag <a>. For example the body of the rain.html page you would look like 
    <body>
   <h1>Rain</h1>
   <ul>
   <li><a href="sunshine.html">sunshine</a></li>
   <li><a href="red/day.html">day</a></li>
   <li><a href="red/night.html">night</a></li>
   <li><a href="blue/moon.html">moon</a></li>
   <li><a href="blue/stars.html">stars</a></li>
   </ul>
</body>
  5. Test your pages links on your local system before uploading to the FTP site. Just open your any of your pages in a browser and systematically click through the links looking for errors. Your pages should look likeSample page

Upload the completed lab to your course portfolio

  1. Upload your spring.html and summer.html using sFTP to your folder on the web server
  2. View your pages at http://studentfolders.cascadia.edu/bit112/
  3. Validate each page after you upload it by copying and pasting the URL into http://validator.w3.org/
  4. Correct any issues on your local computer, then upload the files and validate again.
  5. Contact me by email me or visit the FTP lab this week if there is a problem that you do not know how to solve.