HTML Website Exercise/Quiz:
Create 3 pages of HTML for the Vancouver Aquarium website
The first page's file name must be "index.html."
Require:
Plan your layout.
Design Home page
Create 2 pages (Ticket and membership page / Exhibit and Experience page).
Everything you learn
Example:
-
Basic HTML website structure (head and body)
-
Using all the tags
-
Link
-
Style (text style, bold or italic, underline, emphasize, horizontal line)
-
Images (with different sizes can use online images)
-
Order and unordered lists
-
Table with multiple rows and columns
-
Border
-
One week due
Final HTML Website Project
Project Instruction:
Build and design a Canadian History background story HTML website.
Example: Breaking Cat News
Project Instruction
· Group in 2
· Create a Canadian History background story
Movie Example:
32 Short Films About Gould (1993)
Battle of the Brave (2004)
Heritage Minutes (1991-)
Margaret's Museum (1995)
· Create 8 pages for the Canadian History online storybook
· Look for a storybook in the library
(It will be your reference to set up the web page.)
· Create your own story in a team
Page set up:
Pages: Home / About / Story 1 / Story 2 / Story 3 / Story 4 / Story 5 / Story 6/ Story 7/ Story 8 (ten pages altogether)
(Home page is your cover page, like your book cover.)
Basic HTML layout includes a main header, subheader, body, style, table and images
Steps of the Project:
Project 1:
Teamwork
1. Group in 2
2. Research - Look for a Canadian History background
3. Using the historical background to create a story
4. Write a 3-page script—post in Storyboard and Script page
5. Organize and create a timeline and Role and Responsibility for the team - post in Timeline and Role and Responsibility page (Title: Team Timeline and Role and Responsibility)
Individual work
-
Organize pages and layout
-
Create characters, backgrounds,
-
Create a storyboard digitally and post it in the Storyboard and Script page and present it in class
-
Organize and create a timeline for the individual - post in Timeline and Role and Responsibility page (Title: Individual Timeline and Role and Responsibility)
-
Write HTML/CSS code.
-
Post both graphics and code on the Final Project Page
Instruction:
-
Set up Team and Individual task
-
Plan the day
-
Modify all the time
-
Understand due date
-
Due date: 2 weeks before term end
Project 2:
(Post on Storyboard page)
Storyboard Due: Two Weeks
Approved by Mrs. Leung
Post the storyboard on the storyboard page
Project 3:
Presentation: PowerPoint
Present the storyboard and timeline:
Explain the progress: Script, Storyboard, character drawing
The timeline, role, and responsibility: your role
How many hours do you spend on drawing and coding
What did you learn? Which part do you like most in the process?
Project 4:
Review Feedback and Presentation
1. Comic Strips: The website should prominently feature comic strips, as they are the main attraction for visitors.
2. Navigation: A clear and user-friendly navigation menu is essential for easy browsing and accessing different comic strips or sections.
3. Archive: A well-organized archive allows visitors to easily access past comic strips and explore the website's content.
4. Search Functionality: A search bar enables users to find specific comic strips or characters quickly.
5. Responsive Design: The website should be optimized for different devices and screen sizes to ensure a seamless user experience.
6. Comments and Feedback: Providing a platform for users to leave comments and provide feedback encourages engagement and interaction.
7. Character Profiles: Including profiles or bios of the main characters helps users connect with the comic's storyline and personalities.
8. About the Creator: Providing information about the comic's creator or team adds a personal touch and helps users connect with the creative process.
Based on the 8 review elements
· Get a piece of paper
· Review the presenter's comic website and return the feedback to the presenter
· Write down
· Who is going to review? (Name, Date)
· Screenshot Feedback
· Post feedback on the Feedback page