Interactive Design - Exercise 2 : Simple Personal Profile Page
9/10/2025-16/10/2025 / Week3-Week4
Tan Tzu Yu / 0374460
Interactive Design / Bachelor of Design (Honors) in Creative Media / Taylor's University
Simple Personal Profile Page
LECTURE NOTES
Week 3
[Evolution of Web Access]
Originally: keyboard, mouse, monitor only
Now: includes mobile touch devices, voice or audio interfaces (important for accessibility)
[Diversity in Browsers, OS & Screen Sizes]
Browsers: IE, Firefox, Chrome, Opera, Safari
Operating Systems: Windows, macOS, Linux
Screen resolutions: e.g. 640×480 up to 1680×1050+
[Role & Importance of Web Standards]
Web pages may render differently across devices and browsers
Standards help ensure content is accessible and consistent
The W3C defines and maintains standards (HTML, CSS, etc.)
[Benefits]
Developers can read and maintain code easily
Less need for browser-specific hacks or rewrites
Better experience and reliability for users
[How the Web Works]
User connects via ISP
User types a domain name into browser
Browser queries DNS to find the server’s IP address
Browser contacts the web server using that IP
Web server sends back the web pages to the browser
Structure of a Web Page (via HTML)
[Why Structure Matters]
Helps users navigate and absorb content
Mirrors structure in printed media (headings, sections, etc.)
[Key HTML Concepts]
HTML (HyperText Markup Language) is used to define web page structure
Tags / Elements: enclosed in
< >, e.g.<p>Hello</p>Attributes: extra info inside opening tags, e.g.
<p lang="en">
[Main Sections of an HTML Document]
<head>: holds metadata, title, etc.<body>: contains the visible content
[Headings & Paragraphs]
Headings:
<h1>through<h6>Paragraphs:
<p>Some text here.</p>
[Text Styling]
Bold:
<b>bold text</b>Italic:
<i>italic text</i>
Lists
[Ordered list (<ol>)]
[Unordered list (<ul>)]
[Nested list]
[Links]
Use an anchor tag
<a>withhrefattributeExample:
<a href="http://www.example.com">Visit Example</a>Links can point externally, internally (same site), or to sections in the same page
EXERCISE 2 - SIMPLE PERSONAL PROFILE PAGE
text edit>format>make plain text>save>index.html
Fig 1.0: Exercise in class (step by step taught)
[What to do in Exercise 2 ?]
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.
Task
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).
[My Final Simple Profile Page]
 |
| Fig 1.0: Exercise in class (step by step taught) |
[What to do in Exercise 2 ?]
ObjectiveCreate 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.
Task
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).
 |
| Fig 1.1: Final Simple Profile Page |
Comments
Post a Comment