HTML Website Exercise/Quiz:
Create 2 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
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
Approve by Mrs. Leung
Post Storyboard on Storyboard page
Project 3:
Presentation: Power point
Present storyboard and timeline:
Explain the progress : Script, Storyboard, character drawing
The timeline and role and responsibility : your role
How many hour you spend on the drawing, coding
What you learned? Which part that you like most in the progress?
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. Social Sharing: Integration with social media platforms allows users to easily share their favorite comic strips with others.
7. Comments and Feedback: Providing a platform for users to leave comments and provide feedback encourages engagement and interaction.
8. Character Profiles: Including profiles or bios of the main characters helps users connect with the comic's storyline and personalities.
9. Merchandise and Store: If applicable, a section for merchandise or an online store allows fans to purchase related products.
10. About the Creator: Providing information about the comic's creator or team adds a personal touch and helps users connect with the creative process.
Base on the 10 review elements
· Get a piece of paper
· Review the presenter comic website and return the feedback to the presenter
· Write down
· Who is going to review? (Name, Date)
· Screen shot Feedback
· Post feedback on Feedback page