Cmpe 3 | Computer Science homework help

Assignment 2

You will create a personal web page using HTML. HTML (HyperText Markup Language) is a standard markup language used to format web pages (it is not a programming language). You will upload your HTML code to your UCSC server, and then anyone can view your web page on the internet.

This assignment will be out of 1000 possible points.

Before You Start:

• We highly recommend using a specialized text editor, such as Notepad++ for Windows (download here) （https://notepad-plus-plus.org/download/v7.5.6.html）or BBEdit for Mac (download here)（https://www.barebones.com/products/bbedit/）. Do not use a standard word processor, like Microsoft Word. It will mangle your code in unforeseen ways. And do not use a web page generator (it is easy to tell the difference).
• Open your text editor and start writing your HTML code in a blank document. Be sure to save your file as “index.html” (all lowercase). There is probably a drop-down menu in the save window that will let you choose HTML. Do not save your file as “index.txt”.
• To edit your index.html file later, do not double-click on the file on your computer. Instead, either right click on index.html and choose your text editor, or open the text editor first and open index.html from there.
• To preview your index.html file, double-click on you index.html file to open it in your default browser (i.e. Firefox, Chrome, Safari, Internet Explorer, etc.). This is a preview of what your HTML website will look like when you upload it to your UCSC server.
• You may use the professor’s example web page （https://people.ucsc.edu/~gmoulds/）as a starting point. Simply go to the website and view the page’s source code (sometimes achieved by pressing Control-U on your keyboard). The website has only some of your required items. Be sure to use different content and values than the professor.
• Do not copy-and-paste the professor’s source code into your file. This sometimes leads to unseen errors in the code (this becomes very important in the Javascript assignment). Instead, type all your code by hand. This is an important practice for all programmers.
• You can find a list of many HTML tags here（https://www.w3schools.com/tags/）. In general, if you do not know the HTML tag for something, a Google search will help (ex. search “centered text html”).
• For full credit, you must close all your HTML tags. For example, <B> must eventually close with </B>, <LI> must eventually close with </LI>, etc.

Required Items:

1. Title (this is different than a heading) (100 points)
2. Headings of two different sizes (ex. h1, h2, h3, etc.) (50 points each)
3. Colored background (other than white) (100 points)
4. “Mailto” link to your email address (100 points)
5. Hyperlink to another website (must use a URL, not a file path) (100 points)
6. Bold text and italic text (50 points each)
7. Centered text (100 points)
8. Horizontal line (aka “horizontal rule”) (100 points)
9. Ordered list (numbered list) and unordered list (bulleted list) (50 points each)
10. A working picture. Must use http for the link rather than a local reference. (I’ll explain this part in class, or you can look at the example page.) (100 points)

• Note: Your web page must be uploaded to your public_html folder and the index.html must be submitted to Canvas.

Uploading:

1. Download and install a Secure File Transfer Protocol (SFTP) program, such as Cyberduck, which you can download from the Files section of the class portal.
2. To install Cyberduck for Mac, open the Cyberduck zip file to create Cyberduck.app
3. To install Cyberduck for Windows, run the Cyberduck installer
4. Click “Open Connection” in the top left corner
5. Change “FTP (File Transfer Protocol)” to “SFTP (SSH File Transfer Protocol)” and then enter:
   • Server: unix.ic.ucsc.edu
   • Username: your UCSC username
   • Password: your UCSC blue password
6. Click “Connect.” If an “Unknown Fingerprint” warning comes up, click “Allow”
7. Select the “public_html” folder. Note: Do not delete, rename, or move the public_html folder. It is a special folder created by the UCSC IT department.
8. To upload your website to the internet, simply drag and drop your index.html file from your computer into the public_html window. Remember, anything you upload is publicly available online for anybody. Also, whatever file is named “index.html” becomes your homepage (hence the importance of naming your file index.html).
9. If you want to upload any other files (ex. a picture to include on your website), drag that file to public_html as well. That file can be accessed/referenced at the URL http://people.ucsc.edu/~username/filename (replace “username” with your UCSC username and replace “filename” with the name of your uploaded file, like “cat.jpg”)
10. Now visit your website live on the internet by going to http://people.ucsc.edu/~username (replace “username” with your UCSC username).
11. If you want to update your website, just change your HTML code in your index.html file and drag it into public_html again (overwrite the previous index.html).

Extra Credit: Add your website listing to the UCSC directory of individual websites (click on “add, update, or remove your entry” and follow the steps). (100 points)

Final Step: Upload your index.html file to Canvas and paste a link to your webpage in the comments field. Your index.html file should be available both at people.ucsc.edu and on Canvas for full credit. (Only upload the index.html file – you do not need to upload any associated picture files.)