INTERACTIVE DESIGN - Exercise 2: Simple Personal Profile Page (HTML)

6.10.2025 - 12.10.2025（Week 3)

Lee Xiang Ling / 0384095

Interactive Design / Bachelor of Design (Honours) in Creative Media

Exercise 2 / Simple Personal Profile Page (HTML)

LIST / JUMPLINK

LECTURES

Week 3 _ The Web and Language

Internet & Web

Internet is a fundamental infrastructure composed of communication lines, network devices (such as routers), and the TCP/IP protocol, enabling the interconnection of devices worldwide.

Web is an information-based service system that transmits hypertext via the HTTP protocol. Users can access platforms developed with Web technologies, such as Facebook and Instagram, through web browsers.

It was invented in 1989 by Tim Berners-Lee and his team, and it was initially used only in military and educational fields. As time progressed, it became publicly accessible in the 1990s. In the early days, limited internet speed meant that most web pages consisted mainly of text with few visual elements. However, with advancements in speed and innovations such as fiber-optic technology, the Web gradually began to support videos, images, and JavaScript-based interactivity.

HTML

HTML code is made up of angle brackets “< >”, known as HTML elements, which usually consist of opening tag and closing tag.

Fig. 0.1 - HTML Opening Tag & Closing Tag

Attributes provide additional information about an element’s content. They appear in the start tag and consist of a “name” and a “value” separated by an equals sign.

Fig. 0.2 - The Example of Attributes

<body>
Everything inside the <body> element is displayed in the main browser window.

<head>
The <head> element appears before <body> and contains information about the page.

<title>
The <title> element, usually inside <head>, defines the page title shown in the browser tab.

Fig. 0.3 - The Example of Elements

HEADINGS
HTML provides six levels of headings, with <h1> as the main heading, <h2> as the subheading, and continuing down to <h6> as the smallest heading.

PARAGRAPH
Paragraphs are created using the <p> tag, starting with <p> and ending with </p>, enclosing the text inside.

BOLD & ITALIC
<b> make text bold, while <i> make text italic.

ORDERED LIST
Use <ol> to creates a numbered list, and use <li> to defines each item in the list.

UNORDERED LIST
Use <ul> to creates a bulleted list, and use <li> to defines each item in the list.

NESTED LIST
By nesting a list inside an <li> and using the Tab key, you can create a hierarchical structure. The browser will automatically indent and adjust the bullet style.

Fig. 0.4 - Writing Link

Links are the defining feature of the Web, allowing users to navigate between pages.

Commonly type of links:

Links from one website to another
Links to one page to another on the same website
Links from part of a web page to another part of the same page
Links that open in a new browser window (tab)

Links are created using the <a> element. The clickable content is placed between <a> and </a>, and the href attribute specifies the destination.

The href attribute defines the target page. External links use absolute URLs, and browsers display links in blue with underlines by default.

-- Back To Top --

INSTRUCTIONS

EXERCISES

This exercise was a basic HTML coding practice conducted in class under the teacher’s guidance, applying the knowledge we learned.

Fig. 1.1 - HTML page coding

After finishing the coding, move the entire HTML project folder into Netlify to deploy the site (important: move the folder — not individual files — and do not change the file names).

Fig. 1.2 - Example of Netify

My Final Outcome (PDF)

Link of my work: https://exercise1-xianglinglee.netlify.app/

-- Back To Top --

REFLECTIONS

Although I had some basic knowledge of HTML before, I realized that writing HTML code is much more challenging than I imagined. However, this assignment was both interesting and full of challenges, and I will keep working hard!

XiangLingLee (0384095)

Search This Blog