MCC - CIS105
Lab - WebPage (HTML) - In Class Activity

  • In this activity students will be creating a simple web page with hyperlinks and an inline image.
  • Sample of the web page that will be created.

    CIS105 Webpage Solution

  • In order for a webpage to be viewable on the Internet, it must be stored on a web server. Loading this web page to a server is NOT required, but students could actually upload it to their personal space provided by google, yahoo, or Internet Service Provider (ISP).

  • Web pages are created using HyperText Markup Language (HTML).
  • HTML documents are text documents that are rendered by the web browser when they are loaded.
  • If a filename is not provided as part of a URL (Uniform Resource Locator) in the browser, the web server checks for the default file named index.html.
  • Students will be saving their web page as index.html. This file is also referred to as the home page of a website.
  1. Start Notepad (Do NOT use WordPad or Word, because they will add too many additional codes).
  2. Save the new empty document as index.html on your flash drive.
  3. Enter the HTML code as presented below in the next section.
    • URL's and filenames are case sensitive, so enter as presented.
    • Enter your name, major, username, and current date where indicated below in bold.
      In your final version of the webpage, only your name in the body section will appear in bold.
    • Note: If you decide to upload this web page on a web server, the document will be public.
          Students should NOT enter their real name if they don't want it published on the Internet. 
    <html>
  <head>
    <title>  Your Name  - MCC - CIS105 </title>
  </head>

  <body>
  
    <center>
      <strong>
          Your Name - MCC - CIS105  
      </strong>
    </center>

    <p />
    I am a student at <a href="http://www.mc.maricopa.edu">Mesa Community College</a>. <br />
    My major is  Your Major. 

    <p />

    <img src="http://www.mc.maricopa.edu/~marquez/cis105/lab_webpage.gif"  alt="MCC Logo">
    <a href="http://www.maricopa.edu/disclaimer.html">Legal Disclaimer</a>
 
    <hr />
    Revised: 09/15/2008 
  </body>

</html>
  4. After entering the HTML code, Save the file.
  5. Open index.html with Internet Explorer to make sure everything displays as planned.
    • Shortcut: Right-click on index.html and select Open With Internet Explorer.
    • If the page is not displayed as planned, make sure all of the tags were entered correctly. They must match exactly.
    • Make any required corrections in Notepad and save the file again, then use the refresh command in Interner Explorer to reload and display the latest version of the web page.
  6. HTML code is saved as a text file and the page it defines is rendered by the browser when it is loaded. Users may view the HTML code for just about any page. In Internet Explorer:
    • On the Tool bar, click on Page, and select View Source.
    • Source code is opened by the default application (usually Notepad).
    • After reviewing the code, close the application.
  7. To learn more about HTML consider enrolling in CIS133DA and CIS233DA and/or visit the following websites:
    WebMonkey: webmonkey.wired.com/webmonkey/
    Active Jump: www.activejump.com
    Maricopa Center for Learning and Instruction (MCLI) HTML Tutorial: www.mcli.dist.maricopa.edu/tut/

Revised: 12/15/2008 - www.mc.maricopa.edu/~marquez/cis105/lab_webpage.html