CSCI 107 - Introduction To Web Programming
Spring 2024

• Part 1: Create a web page and name it "index.html". This is the main page of your website. You will build on it throughout this course.
• The topic for the page is entirely up to you as long as it's appropriate for class (keep it clean). Common themes students choose include their hobby, favorite sports team, favorite band, etc, just to name a few of the many possibilities.
• To create the page, start with a blank document in whichever code editor you decide to use.
• Once the file is saved then check if it works by double clicking on the html page. If your file name does not properly end with .html, the browser may show the HTML source code instead of the rendered Web page, which is not what you want. Each time you edit/save the file, simply hit refresh/reload in the browser to see your changes. This is your "Local" web page saved on your hard drive.
• You must use at least 3 paragraph elements, and 2 of any heading level elements.
• Part 2: Now create another file and name it "lab1.html". In this page you will add a few paragraphs that define and explain the following: HTML, Web Server, ARPANET, WWW, Domain name, http, W3C and URL. This is the test of your reading and note taking.
• You must use a paragraph element for each definition and there should be a heading level for each paragraph. (use level 3 heading for this!)

• Your HTML code should have the basic HTML5 Example structure for both web pages.
• Your code should be properly formatted (tabbed elements when needed, lowercase element names)
• You must supply a custom page title for each page and the page body content should follow the instructions already stated.
• When I surf to your public address/URL (http://csci.lakeforest.edu/~username) I must be able to find your page.
• Upload the following file on Moodle under Lab#1:
  • Create a word document and name it your_first_name_lab1.doc
  • In this word document, do the following:
    1. At the top of this document write your full name and section number.
    2. Then write the 2 links as follows:
    • One link to your main page.
    • One link to your lab1.html as http://csci.lakeforest.edu/~username/lab1.html
    3. Then take the screenshot of code from text editor of both index.html and lab1.html and paste in your word document below the link.
    4. Then upload this word doc on Moodle under Lab#1.

• In order to use the HTML elements introduced in this lesson, you will likely need to expand the content.

• For the purposes of easier grading and readability, add a comment line before a paragraph which will be using the following elements required for this lab. For example: If your paragraph uses a break element (br) and/or inline elements, you will write a comment before this paragraph saying something like "The following paragraph uses br and other elements..." This way I will be able to see your use of the element and how it's displayed.
• At a minimum, use all of the following HTML elements in your page. But feel free to also use any introduced in this lesson.
  Breaks - br, hr
  Inline - b, i, small, mark, code
  Blocks - p, pre, two different header levels (h1, h2, ..., h6)
• Give a heading to this page that says something like "Lesson 3 - Lab#2". This way you will know which lab belongs to which lesson
• Use at least two different Character Entities to create special characters in your page. Use at least one character entity for a non-breaking space (nbsp) since those are very useful in practice since browsers ignore normal whitespace.
• There is one comment at the top of this page -- the kind that are only for humans and Web browsers totally ignore when they read the HTML code. In this comment explain what this page or the lab#2 is about.
• When I surf to your public url (csci.lakeforest.edu/~username/lab2.html), your lab2.html should load rather than a directory listing of what's in your public folder.
• Your page should have the proper skeletal format (doctype,html,head,body) as directed in Lesson 2, as should all future pages. Also, all page content goes into the body section. Only title should be added to the head section for this assignment.
• Upload the following file on Moodle under Lab#2:
  • Create a word document and name it your_first_name_lab2.doc
  • In this word document, do the following:
    1. At the top of this document write your full name and section number, e.g. Jane Doe - Section 1 or 2
    2. Then write the link to your lab2.html as http://csci.lakeforest.edu/~username/lab2.html
    3. Then take the screenshot of code from text editor of lab2.html and paste in your word document below the link.
    4. Then upload this word doc on Moodle under Lab#2.

• Create a new file and name it "lab3.html"
• In this lab, create a page of your interest. Make sure you have at least 5 paragraphs in this page.

• Make sure there is a heading of "Lab#3 - Lesson 4" at the top of this page.
• Add at least 5 links to external Web sites for each of the 5 paragraphs to support the theme of your page. For example, if your page is about Tennis, then link to 5 Web pages that have something to do with Tennis. Make sure there is separation between each link (You can use a horizontal rule or new lines to separate them).
• New Addition: Add a title attribute to the first paragraph such that when the cursor hovers on that paragraph a 'Tooltip' - the little box- that pops up when you hover over something.
• Add a mailto link at the bottom of your page content near the end of the body section.
• Proper syntax - all attribute values in your page should be in quotations. All elements should be properly indented.
• Your page should have the proper skeletal format (doctype,html,head,body).
• Submission follows the same structure as previous labs.

• Create a new file and name it lab4.html. Name the file EXACTLY as mentioned in the labs! Most of the times it's not your code rather file names that you don't reference correctly!
• lab4.html should have at least 3 paragraphs about the topic you choose.
• Find 5 images online for the following: one for a mailbox, at least 3 images that are placed at the end of each paragraph, and one image of Facebook that takes you to Facebook's main/home page. Make sure the images relate to your topic. When you find a graphic on the Web, in most cases, you can right click on it to download it to your computer. You may even be able to drag it straight from a Web page onto your computer. If it has a long, crazy file name, rename it to something simple and descriptive. I recommend using all lowercase with no spaces in the file names (see troubleshooting tip on case sensitivity).
• Place a link at the top of the page that will take the user to your main/home page (relative URL).
• Place a clickable Mailbox image at the bottom of the page that will take the user to the mail interface (relative path)
• Place a clickable Facebook image after the mailbox that will take the user to Facebook's home page (Absolute URL & relative path)

• Meet the image requirements listed above and make sure the images all show up in your lab4.html page. There are some troubleshooting tips below in case they don't.
• The Home link should be on the top left of the page, The clickable Facebook image and the clickable Email image is at the bottom left of the page.
• The src values that locate the graphics for your page must be relative path name, not absolute URLs.
• Your page should still maintain the proper format and proper indentation.
• Make sure the images are properly sized relative to your page. Remember to use the width and height attribute to re-size your images if needed.

• Make sure all the images are inside the Images folder and all the labs are inside the Labs folder.
• Make sure you copied the images and the images folder onto the server, in addition to your updated HTML file. For example, if your image is named 'mypic.gif' locally on your computer, then all of your src attributes will be like src="mypic.gif". That still has to be accurate on the server, so you have to copy the images to the server. You are building the site locally, and the exact structure has to be preserved when copying to the server.
• The Linux server is Case Sensitive. That means, src="pics/mypic.gif" WILL NOT match pics/Mypic.gif on the server. However, both Mac and Windows are not case sensitive. That means if you are not careful about matching the file names exactly, images might show up in your page locally, but not once your site is copied to the server. That is why I recommend using all lower case with no spaces in file names.
• If you are positive that you transfered your images to the server, the relative URLs are correct, and the file name exactly matches your img src, then it could be a permissions issue.

• The index file is your Main Home page.
• The Images folder should already exist from the last lab.
• The folder Labs and default.html and lab5.html are new for this assignment.
  Folder name should be exactly Labs and the files names should be exactly as mentioned above

• Create the new folder as described above and move your old labs inside it including lab5.html you created.
• Instructions to what goes inside default.html page:
  • Change the information in the head section (title) to something appropriate for this new default.html page.
  • Display as a heading something like "CSCI 107 Labs Page" as page content so it's apparent what the page is.
  • Near the top of the new default.html page, add a back home clickable image link that will go back to your home page when clicked.
  • Below the back home clickable image, add links to each of your lab pages you have done so far including lab5.html
  • At the top of your Home Page(index.html), add a link to your new page (inside your Labs folder): default.html. Put it near the top so I can find it easily. Text is ok for this link.
  • The result of this is that I can surf to your home page and click on a link to go to your Labs page. In your Labs' main page, I can find links to find all your labs(lab1.html,lab2.html,lab3.html,lab4.html, lab5.html). Finally, I can click on the small house icon at the top of the Labs page to get back home. Thus, your site now has structure and internal linking.
• Instructions for each lab (lab1.html, lab2.html,lab3.html,lab4.html,lab5.html)
  Each of these labs should have a "Back To Home" link that takes you to index.html
• Instructions to what goes inside lab5.html:
• Make this lab a "Contact Us" page in which you should have a Clickable home image, clickable mail image, and a fieldset that displays the address and the phone number of your company.
• There must be anchor links within this page. Create a "Go to bottom" link at the top of this page that takes you to the bottom of the page. This means you must have a lot of content about contact info in this page. > Create a similar link at the bottom of the page something like "Contact Info" that takes you to the top of the page.

• Meet the structure/content requirements listed above
• You must use Relative URLs for all the internal links within your site, and all the links should work (obviously).
• The back home link shoud be a small House graphic, rather than text.
• In default.html: Make sure there is a link in the beginning of the page that takes you to the bottom of the page and a link at the bottom of the page that takes you to the top of the page. (Anchor links within a page)
• There is proper formatting.
• Each page (labs.html,lab1.html,lab2.html,lab3.html,lab4.html,lab5.html)has a clickable image back to index.html
• In addition to index.html link in each lab page, all the labs(lab1.html,lab2.html,lab3.html,lab4.html,lab5.html) should also have a link back to the main lab page.
• Submission: Place a screenshot of default.html and lab5.html in the word document. Make sure this document has the following links:
  • http://csci.lakeforest.edu/~username (this should take you to your website's main page)
  • http://csci.lakeforest.edu/~username/Labs (this should take you to your Lab's main page)
  • http://csci.lakeforest.edu/~username/Labs/lab5.html

1. Part 1: Create a new web page and name it "lab6.html" and place it inside "Labs" folder. In this page do the following as described in class:
   1. Create an HTML table that has 4 rows with 4 table headers. The 4 table headers should have the values as 'Street Number', 'Street Name', City, & State. Make up appropriate address values.
   2. Create an HTML fieldset that has at least 2 images of your choice.
2.  
3. Part 2: In your default.html do the following:
   1. Add a link to lab6.html as you did for other labs. This you will be doing it for every lab from now on so i won't be mentioning it every time.
   2. All your 6 labs should have a home button and a link to labs page

• Meet all the requirements as mentioned in class lecture.
• Make sure there is proper formatting.
• Make sure there are links to all 6 labs you have done in a list format in "default.html"
• Make sure every lab page has a link to "default.html" at the top of its page and a home button that takes you back to index.html
• Submit the document with a screenshot of default.html and lab6.html. Again, this should be the standard submission format moving forward. Point deductions will occur for non-compliance.
• For submission, make sure you have the following working links in your word document:
  • http://csci.lakeforest.edu/~username
  • http://csci.lakeforest.edu/~username/Labs

1. Part 1: Create a new web page and name it "lab7.html" and place it inside "Labs" folder. In this page do the following as described in class:
   1. A Simple List with at least 5 list items
   2. A Nested List with at least 5 list items and within each of these list items there should be at least 2 sub-items.
   3. An Out of order list that starts with roman numeral 'ix' and has 5 list items. -
2. Part 2: In your default.html do the following:
   1. Create a list of links in this page. All you have to do is to add the links as content to your list items.
   2. Add a link to lab7.html as you did for other labs. You will be doing this for every lab from now and it should be given that you will do this own your own for every new lab you do.
   3. All your 7 labs should have a home button and a link to labs page. Again, you will do this for every page moving forward.

• Meet all the requirements as mentioned in the lecture.
• Make sure there is proper formatting.
• Make sure there are links to all 7 labs you have done in a list format in "default.html".
• Submit the document with a screenshot of default.html and lab7.html. Again, this should be the standard submission format moving forward. Point deductions will occur for non-compliance.
• For submission, make sure you have the following working links in your word document:
  • http://csci.lakeforest.edu/~username
  • http://csci.lakeforest.edu/~username/Labs

Objective: Styling lab8.html with CSS

• Create a web page and name it "lab8.html" in Labs folder and style the content as follows:
  • Divide your page into 3 sections as follows (hint: use div element around the elements for each section):
    1. One top most section which has:
       • A centered clickable home image that takes you to your main page (index.html)
       • There is one centered heading (h1) after the home page image, give a color to this heading
    2. One middle section which has:
       • At least 4 paragraphs, each with a level 2 heading that is centered and colored other than black and color of h1, and paragraph's text also has a color of your choice. Make sure the the text color is legible which is easy and bright enough to read.
    3. One bottom section which has:
       • A copyright sign with 2023 next to it (look at other websites to get some idea)

Technical Requirements:

• This page is styled using internal style sheet.
• There's a background color and a border given to the div sections.
• There's a background color to this entire page.
• Make sure to add lab8.html to your links in labs.html page.
• All pages are visually appealing such that visitors want to visit your website.
• Submission: Place a screenshot of lab8.html and a link to this lab in the word document to upload on Moodle.

Lab#9 - Objective: Using External Style Sheet to Style "lab9.html"

• Create an html file and name it "lab9.html" file.
• Create a new text file and name it "lab9.css". Place this file in Labs Folder. All the styles for lab9.html will go into this external css file you just created.
• Style this page as follows:
  1. There is one left aligned clickable image at the top of your page that takes you to your main page (index.html) and a centered clickable image to (default.html) page that appears below the homepage link.
  2. This page must be divided into at least 3 sections using div element and inline styling is done using span.
  3. There are at least 4 paragraphs(text color for each paragraph should be different) each with an image to their left, and with a heading that is left-aligned (text color for each heading is different)
  4. There's a border of different style for each div section, and each div section has a different color for background.
  5. There is a blue border and a background color of lightgrey to this entire page.
• Upload both lab9.html and lab9.css on the server.

Technical Requirements:

1. lab9.html is styled with external style sheet only.
2. All styles show up, there are no missing images, and no broken links.
3. There is proper indentation in both files (html and css).
4. Submission is same as before. Make sure to put a link to lab9.html, a screenshot of both lab9.html and lab9.css file, and follow the rest of submission requirements for the word document.