Interactive Design / HTML Exercise 2: Simple Personal Profile Page
Interactive Design / Exercise2: Simple Personal Profile Page
8/10/2025
24.09.2025 - 2025 / Week 3
GeXianjing / 0377636
Interactive Media /Bachelor of Interactive Spatial Design (Honours)
Learning module
 |
| Homework Requirements |
Week’s Topic: Understanding the Structure of a Web Page and the Meaning Behind Each Tag
🧭 1. The Internet and the World Wide Web
Before learning to design a web page, it’s essential to understand the difference between the Internet and the World Wide Web (WWW).
-
The Internet is a global infrastructure that connects computers and transfers data through cables, Wi-Fi, and servers.
-
The World Wide Web is built on top of the Internet. It uses browsers to display web pages written in languages like HTML, CSS, and JavaScript.
💡 The web was invented in 1989 by Tim Berners-Lee at CERN, originally for scientists to share research information easily.
In the early days, web pages contained only text and very low-quality images because the Internet speed was extremely slow—around 56 KB per second.
🏗️ 2. The Basic Structure of a Web Page
Every web page follows the same fundamental structure based on HTML (HyperText Markup Language) — the foundation of all websites.
🧩 Structure Breakdown
| Section | Purpose | Example |
|---|---|---|
<html> |
The root element that contains everything | Whole document |
<head> |
Contains metadata like the page title and links | <title>My Page</title> |
<body> |
Visible page content | Texts, images, buttons, links |
💬 3. Common HTML Tags and Their Meanings
| Tag | Meaning | Description |
|---|---|---|
<h1> ~ <h6> |
Heading | Defines title levels from large to small |
<p> |
Paragraph | Adds text paragraphs |
<b> |
Bold | Emphasizes bold text |
<i> |
Italic | Displays italicized text |
<ul> |
Unordered List | Creates bullet lists |
<ol> |
Ordered List | Creates numbered lists |
<li> |
List Item | Defines each list item |
<a> |
Anchor | Creates hyperlinks |
<img> |
Image | Inserts pictures |
<br> |
Line Break | Creates a new line |
<footer> |
Footer | Adds bottom information (e.g., copyright) |
⚙️ 4. HTML Attributes
Attributes provide extra information about an element and are always written in the opening tag.
Example:
<a href="https://www.google.com" target="_blank" title="Go to Google">Visit Google</a>
| Attribute | Function |
|---|---|
href |
The link’s destination |
src |
Image source path |
alt |
Text shown if image cannot load (important for accessibility) |
title |
Tooltip text on hover |
target="_blank" |
Opens link in a new tab |
🧱 5. Standard Web Page Layout
A well-structured webpage contains four main parts:
-
Header — Website name or logo + navigation bar
-
Hero Section — The main visual area with title or image
-
Content Section — Articles, text, and images
-
Footer — Contact info, copyright, and social media links
🧠 6. Semantic Structure and Accessibility
Modern web design emphasizes semantic HTML — using meaningful tags to describe content roles:
-
<header>→ top navigation -
<section>→ main content area -
<article>→ independent article -
<footer>→ bottom information
Accessibility ensures that all users — including those using screen readers — can understand web content.
If the user is visually impaired, their device will read the alt text aloud.
🎨 7. The Logic of Web Design
Building a good website means combining three layers:
-
HTML → Structure (the skeleton)
-
CSS → Style (the skin and colors)
-
JavaScript → Interaction (the movement)
📝 8. Reflection
Through this lesson, I learned how HTML shapes the foundation of every website.
Understanding tags, structure, and accessibility helps me create clear, organized, and user-friendly web pages.
It also makes me realize how the Internet and the Web have evolved — from slow dial-up speeds to today’s responsive, interactive designs.
Homework
 |
| Note book 1.1 |
 |
| Note book1.2 |
 |
| Web display 2.1 |
 |
| Web display 2.2 |
 |
| link to jump to the blog page |
HTLM File Import
Beginner’s Perspective: My Experience as a Newcomer to Interactive Design
When I first started learning interactive design, I truly felt like a complete beginner.
Everything — from UI terminology to UX research methods — was new to me.
Unlike traditional art or design that focuses on visuals, interactive design required me to think about systems, logic, flow, and user behavior.
At the beginning, this felt overwhelming. I often struggled to understand which part of the design was “right,” and why certain layouts worked while others didn’t.
As a beginner, I also made many mistakes — messy layouts, confusing flows, inconsistent spacing, and unclear hierarchy.
But each mistake helped me grow a little more.
The more I practiced, the more I started to notice patterns:
what makes a page readable, what makes a user comfortable, and what makes a digital experience feel “right.”
Now, even though I am still learning, I can confidently say that this project has given me a foundation.
It showed me that interactive design is not about perfection, but about continuous refinement, observation, and empathy.
I feel more motivated to keep improving, and I’m excited to explore how far I can develop in this field as I gain more experience and technical skill.
This beginner journey has taught me one crucial thing:
design is not just a skill — it is a way of seeing the world, paying attention to details, and caring about the people who use what we create.
Comments
Post a Comment