CSC 170 Fall 2019 - Lab 10: Web Page Creation
Assigned M 11/18, Due M 12/2/2019

DIRECTIONS
  • In this lab, you will create your own web page, by going through a series of versions.
  • After each version, check that your web page displays correctly in your web browser, BEFORE starting the next version.
  • Use the class notes (PowerPoints), Computer Concepts textbook, and the HTML Tutorial by w3schools.com as references to assist you.

    VERSIONS
    November 18 class
    1. [10 pts.] Version 1: Log on to your panther account through Putty and type goweb to create an empty web page. [Give Prof. Wittenstein the 7 character name of your webpage - first two letters of last name, followed by 5 digits.]

    2. [10 pts.] Version 2: Type cd public_html to change the directory, then type pico index.html to edit the (empty) index.html file.
    Make the title "My Web Page" and include a heading (H1) that says "I'm on the web!".


    November 18 or 20 class
    3. [10 pts.] Version 3: Make sure you are in the public_html folder. Open the file you created in Version 2:
    a) Add the DOCTYPE declaration. Add the html, head, and body tags along with the 3 corresponding closing tags correctly placed.
    b) Move the code for the title so that it is in between the head tag & closing head tag.
    c) Move the code for the H1 text so that it is in between the body tag & closing body tag.
    d) Change the "My" in "My Web Page" to the possessive form of your name. For example, I would change "My Web Page" to "Adam's Web Page".


    November 20 class
    4. [10 pts.] Version 4: Make sure you are in the public_html folder. Open the file you created in Version 3:
    a) Change the font of the word "the" in "I'm on the web!" to italics.
    b) Just before the closing body tag, type the following:
    < p > Quiz 3 will cover the following topics:
    < ul > < li > Module 3: Networks < /li >
    < li > Information Literacy < /li > < /ul > < /p >

    5. [10 pts.] Version 5: In the public_html directory, type pico template.html to create another html file (called template.html). Then:
    a) Add the DOCTYPE declaration. Create html, head, and body tags along with the appropriate closing tags.
    b) Just after the head tag, create a title tag along with its closing tag.
    c) Just before the closing tag for body, type "Last Modified: 11/20/19" and place tags so this shows up in bold font. (Change 11/20/19 to whatever date you actually do this step.)
    ****Make sure when you add to this page in Version 6 & beyond that the Last Modified line always remains the last line in the body.****
    d) Check that the template.html file displays correctly on the web. (It should only have the text "Last Modified: 11/20/19") **To view a page not called index.html on the web, you must add the name of the page after the last slash in your web address.**

    6. [10 pts.] Version 6: In the public_html directory, type cp template.html aboutme.html. (Nothing will happen on the screen, but this will create a file called aboutme.html that is identical to your template.html file.)
    Then, edit the file aboutme.html (type pico aboutme.html):
    a) Make the title "About Me". After the body tag, make the heading (H1) "About NAME" where NAME is replaced by your first name. (For example, my heading would be "About Adam".)
    b) Type at least 2 sentences about yourself. Mention that you are an Adelphi student somewhere in those sentences. Place them into an H3 tag and its corresponding closing tag.


    November 25 class
    7. [10 pts.] Version 7 (Adding Links): Make sure you are in the public_html folder:
    a) In the aboutme.html file, right before the body closing tag, type "Back to my main page" in an H4 tag with an appropriate closing tag.
    b) In the aboutme.html file, have only the words "main page" from the "Back to my main page" line link to your index.html file.
    c) In the index.html file, add a link to your aboutme.html file.
    d) In the index.html file, find the words "Quiz 3" and link them to the webpage http://home.adelphi.edu/~wi16133/csc170/f19/quiz3info.html

    8. [10 pts.] Version 8 (Images): Log on to Filezilla and place this picture of the AU logo into the public_html directory. Then:
    a) Back on putty, right after the body (opening) tag, type < img src="auLogo.jpg" > so that the AU logo appears on your webpage.
    b) Back on putty, in the aboutme.html file, link the word Adelphi to the image of the AU logo (using "a href=").

    9. [20 pts.] Version 9: On your About Me page, add a table with at least 3 rows and 3 columns. The first row should be labels for the columns in bold font and the first column should be labels (headings) for the rows in bold font. The table can be about anything (i.e. a monthly calendar, your schedule this semester, a chart converting binary to decimal, inventory of a store or your pantry, people in your family and their ages, etc.)


    There is nothing to submit on Moodle for this assignment. I will access your web page through a web browser, where I will grade your page and your HTML code.


    Last Modified: 11/21/19