Description

Objectives
● Create a HTML page with different HTML elements
● Understand Bootstrap Grid System
● Use Bootstrap to create a simple and beautiful form
Part 1 HTML Document
Step 1:
Create a simple HTML document by placing the below content in a file and name it mypage.html:

My First Heading

My first paragraph.

Step 2:
Complete the following:
● Rename title in the HTML document to My Interests
● Rename header1in the HTML document to your (Last Name, First Name – “Rec3308”)
● Between the paragraph tags, write three interesting facts about yourself and explain why you are studying Computer Science
Step 3:
Create the following in order:
1. Create header2and name it My Page
2. Underneath header2, create a link tag that points to your Github account (Create one if you do not have an existing account!). When you hover over the link, the color of link should change to gray.
3. Insert an image of yourself, or any picture that can be found online (Keep in mind that any image urls has to be public else it cannot be seen.)
4. Limit the size of your image using width and height, it should be between 400 and 600
5. Give the image a value, this is especially useful when the image cannot be displayed
6. Create header3 and name it My Favorite Sitcom/Movie Characters
7. Create a table with 4 columns and 3 rows: Name(Original),Name(Sitcom/Movie), Gender, Reason I like this character. Make sure to use table header to give the header columns and give table border to separate row and columns.
8. Create header3 and name it My Hobbies.
9. Create an ordered list and list 3 of your hobbies/favorite activities.
10. Create header3 and name it My Favorite Cities
11. Create an unordered list and list 3 of your favorite cities in order
12. Insert appropriate spacing using
between content
NOTE: Make sure to use internal style sheet if needed in mypage.html
Your final output:
Things to be submitted:
● mypage.html
NOTE: Make sure to use internal style sheet if needed in mypage.html.
Part 2 Bootstrap Grid System
Step 0:
Create a txt file and name it solutions.txt. Put your answers of this section in the document using the following format:
Q: What have we learn so far from this class?
A: We have learned useful things such as RegEx, Agile and Waterfall methodologies, Git and
HTML/CSS!
Create a css file and name it style.css. Put your css for grid.html in this document.
Step 1:
Open up grid.html, inspect the code and answer the following question:
● What are the things needed for Bootstrap to be loaded?
Step 2:
Read up on Bootstrap’s Grid system and answer the following question:
● How does Bootstrap’s Grid system work? (Please do not copy and paste the answer from the official website, you are required to explain it in your own words. Feel free to use analogies if it makes things easier!)
Step 3:
Produce the following:
Things to be submitted:
● grid.html (updated with your code)
● style.css
● solutions.txt
Part 3 Bootstrap & HTML
Step 0:
Create a HTML file and name it form.html. Include your HTML code in it.
Step 1:
Combine what you have learned from Bootstrap and HTML and produce the following:
Note the dropdown:
Things to be submitted:
● form.html
Requirements
Submit the following files and zip them in a folder:
● mypage.html
● grid.html
● style.css
● solutions.txt
● form.html
Write your name and your partner’s (if any) on the first line of each file. Everyone must submit the zip of the files on the Moodle.