4. HTML Activity

Lab Quiz

The quiz will be available during the first few minutes of lab, which you will complete individually. Your lab TA will open the quiz and tell you the password you will need to get into the quiz for your section. For convenience, please click on your lab section below to access your quiz:

Section 10 am - https://forms.gle/Db5QhEKYV3naHKhK7
Section 11 am - https://forms.gle/i3QG45mURB3yDsWg8

Lab Activity

In a previous lab, you made a website using Google Sites, which provides the framework for interactive webpage building. That is, as you move elements around, the platform writes HTML (CSS, and even basic JavaScript) code for you and updates the page in real-time. Even though this saves time and hides away lots of bothersome details, this imposes limitations over the structures and formats of your page.

In this lab, we will see how hard it can be building a webpage using a scripting language! This is much more useful knowledge as opposed to using Google Sites because you will have power to design webpages with only your imagination as the limits!

Use HTML tags to format text so that it is similar to the image below.

The information at http://w3schools.com/html may be useful to determine what tags to use for various components. See the following topics in particular: Basic, Elements, Attributes, Headings, Paragraphs, Styles, Formatting, Quotations, Comments and Colors.

I suggest you use the w3schools.com Online Editor to develop and test your solution.

[ Alternatively you can use a text editor (Notepad on Windows, TextEdit on Mac), save it as a file with the html extension, and then open it within your browser (e.g. Chrome). If using TextEdit on a Mac, be sure to select Format / Make Plain Text. ]

Find a partner, or if needed a group of 3 may be formed.

You should each create your own page, but check in with each other as you work on the web page, ask questions, or share interesting things you find along the way. Share what your website looks like and offer feedback. The TAs will be available for any assistance needed, so please feel free to ask them any questions as well.

Once you are done, create a PDF with your name and your registered lab time at the top. The PDF should also contain a screenshot of the final page and, as text, the HTML used to create it. Turn this PDF into Gradescope, under "Lab 4: HTML Activity." (An easy way to do this may be to create a Google Doc or Word file with your name at the top, paste in a screenshot and your HTML code, then download this as a PDF to turn into Gradescope.)

This lab must be completed by 11:59pm on Tuesday, September 17, 2024. No late submissions will be accepted.

Grading Rubric:

0.25 points: Submission contains screenshots of the resulting web page created, and as text, the HTML code used to create it.

0.25 points: Header of "HTML Activity" has been created, along with the line "Created by [your name]." These have been formatted to match the image above.

0.5 points: Numbered list of 5 favorite books, with heading, has been created. At least one book has a link to a description, and books belonging to one genre have been italicized.

0.5 points: List of jokes has been created. The link where the jokes were taken from has been added. Each line in this section is indented, with the jokes listed as an unordered list.

0.5 points: Picture of favorite city, with heading, has been added. (In order for us to view the image and grade it properly, be sure to use a link that is openly accessible such as this: https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQwlD-FQMXemI-f0-AFJiujmoJNr0Dku937qA&usqp=CAU instead of a local link such as "dog.jpg".)

Up to 1 point of extra credit: Use HTML CSS to:

change the background color of the page,
change the color of all paragraph tags,
change the font of all headings tags (h1 - h6), and/or
add a border to the image.

(Each of these 4 bullet points is worth 0.25 extra credit points.)

Page updated

Report abuse