Interactive Design - Exercise 2
INTERACTIVE DESIGN - Exercise 2
|| 8/10/2025 – 15/10/2025 (Week 3 – Week 4)
|| BAI ZHUO QING, 0370042
|| Interactive Design / Bachelor of Design (Honours) in Creative Media
|| Interactive Design / Exercise 2
|| BAI ZHUO QING, 0370042
|| Interactive Design / Bachelor of Design (Honours) in Creative Media
|| Interactive Design / Exercise 2
TABLE OF CONTENTS
1. Lecture：
1. Web Standards
People now access the web through various devices—computers, phones, tablets, and voice systems.
Websites must stay readable across browsers and operating systems.
W3C sets standards like HTML (structure) and CSS (style) to ensure consistency, accessibility, and easier development.
2. How the Web Works
You type a URL, browser connects to DNS, gets the website’s IP address, connects to the web server to page loads in your browser.
This process lets users access websites anywhere in the world.
3. Web Page Structure
A web page is like a document with headings, sections, and paragraphs.
HTML uses tags and elements to define this structure:
<head> (page information), <title> (page title), and <body> (main content).
4. Common HTML Elements
Headings:
<h1> – <h6>
Used for main and subheadings (from largest to smallest).
Paragraphs:
<p>
Defines a block of text.
Bold / Italic:
<b> – makes text bold
<i> – makes text italic
Lists:
Ordered list (numbered): <ol>
Unordered list (bulleted): <ul>
List item: <li>
Links:
<a href="URL">Text</a>
Creates a hyperlink to another page or section.
Images:
<img src="..." alt="..." title="...">
Displays an image;
src = file path
alt = alternative text
title = tooltip description
5. Summary
Web standards = consistency + accessibility.
HTML builds structure, CSS adds style.
Basic elements create clear, user-friendly web pages.
2. Instructions：
3. Process Work：
Assignment Instructions
Objective:
Create a single HTML file that serves as a basic "About Me" or personal
profile page. This exercise is designed to test your understanding of
core HTML document structure and fundamental elements.
Theme:
Create one file named index.html. When opened in a web browser, this file must display a simple page
about you correctly.
Your index.html file must include the following elements:
-
Basic Document Structure:Correctly use the <!DOCTYPE html>, <html>,
<head>, and <body> tags.
-
Page Title:Add a descriptive title inside the <head> using
the <title> tag (e.g., "My Awesome Profile").
-
Main Heading:Use an <h1> tag for your name or the page's main topic.
-
Sub-Heading:Use an <h2> tag to create a section heading (e.g., "My Hobbies" or
"Favorites").
-
Paragraph Text:Write at least two descriptive paragraphs using the <p> tag.
-
Ordered List:Create a numbered list (using <ol> and <li>) with at least three items (e.g., your top 3 favorite books,
movies, or foods).
-
Unordered List:Create a bulleted list (using <ul> and <li>) with at least three items (e.g., your skills, goals, or contact
methods).
Submission Requirement:
Submit your e-portfolio link. Attach the HTML file to your
e-portfolio.
HTML：
Your index.html file must include the following elements:
- Basic Document Structure:Correctly use the <!DOCTYPE html>, <html>, <head>, and <body> tags.
- Page Title:Add a descriptive title inside the <head> using the <title> tag (e.g., "My Awesome Profile").
- Main Heading:Use an <h1> tag for your name or the page's main topic.
- Sub-Heading:Use an <h2> tag to create a section heading (e.g., "My Hobbies" or "Favorites").
- Paragraph Text:Write at least two descriptive paragraphs using the <p> tag.
- Ordered List:Create a numbered list (using <ol> and <li>) with at least three items (e.g., your top 3 favorite books, movies, or foods).
- Unordered List:Create a bulleted list (using <ul> and <li>) with at least three items (e.g., your skills, goals, or contact methods).
评论
发表评论