Name: Liong Xenyi (0383125)
Module: Interactive Design GCD60904
Date: 9/10/2025 - 16/10/2025 (Week 3 - Week 4)
Degree: Bachelor of Design (Honors) in Creative Media
University: Taylor's University
Module: Interactive Design GCD60904
Date: 9/10/2025 - 16/10/2025 (Week 3 - Week 4)
Degree: Bachelor of Design (Honors) in Creative Media
University: Taylor's University
HTML Exercise: Simple Personal Profile Page
Instructions
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).
Progress
With the previous lesson on HTML tags and the exercise, this is my person profile page as a HTML exercise. With the freedom and creativity and fun, I just let whatever ideas run through as I made this page.
Fig 1.1 First part of the Code
I added the list of important criteria from the above. I added up to four headers, as I had different parts of the information. I added as many elements so that I could further practice the codes I learned, while making it engaging in my style.
Some extra bits I added were colours for the headers, hyperlinks, and line dividers. Only recently did I learned how to insert images and background colour, so I included them in too for fun. Other smaller elements I added were the bold, italic, and line break codes. I added an unordered list in an ordered list. I ended the webpage with the biggest heading, as a sort of big ending.
Fig 1.2 Middle part of the Code
After I finished the code and tested that it worked, I placed the folder the index.html file was in and made a link.
Fig 1.3 Making a Link
This is how the website should look like.
Fig 1.4 My Profile Page Beginning
Fig 1.5 My Profile Page Middle page
This is the Website's Page:
<!DOCTYPE html>
<html>
<head>
<title>My Profile... though I'm not a Criminal</title>
</head>
<body style="background-color: rgb(236, 222, 205);">
<img src="Images/img-profile-4.jpeg" alt="Profile Picture" title="My Profile Picture" width="15%"/>
<img src="Images/img-profile-2.jpg" alt="Second Profile Picture" title="Patrick!" width="15%"/>
<h1 style="color: rgb(11, 126, 130);">XenXenXen's Profile Page!</h1>
<h4>Warning: this is dramatised and satirical, as to present my exuberant self. Please do not take it so seriously, thank you.</h4>
<h2 style="color: rgb(59, 151, 156);">Welcome to my domain :)</h2>
<p>If you had involuntarily stumbled upon this page... sorry to say, you're stuck with me now. Don't worry, I'll try to make this short
journey at least a little entertaining (even if you aren't interested to willingly know more about me). Thinking of it, doesn't it
seem stalkerish to want to know more about someone you never talked to? But does it even apply when the 'victim' party is willingly
giving out the information, which, come to think of it, applies to all social media users...?</p>
<p>Sorry, that went off track. Well, without further ado, let's start the show!</p>
<br>
<hr></hr>
<br>
<h2 style="color: rgb(59, 151, 156);">Basics</h2>
<ul>
<li><b>Name:</b> Liong Xenyi, Xen for short</li>
<li><b>Birthdate:</b> 30<sup>th</sup> April (Age shall be a modest secret) (Because <i>no one needs to know</i>)</li>
<li><b>Nationality:</b> Malaysian Chinese (but uh... <s>white-washed</s>, I know, I'm disappointed in myself too)</li>
<li><b>Occupation:</b> Student (I do feel sad I do not have a job, but still relieved from avoiding my future grievance)</li>
<li><b>Relationship Status:</b> Not relevant (and I'm proud) (I.D.K. why I added this)</li>
<li><b>Workplace/School:</b> Taylor's University (cool place, cool clubs, but traffic? uh... about that-) </li>
</ul>
<p>With that said, let's take another look into what I have to say for myself.</p>
<br>
<hr></hr>
<br>
<h2 style="color: rgb(59, 151, 156);">A Deeper Dive</h2>
<h3 style="color: rgb(19, 112, 117);">As a Student</h3>
<p>I, for one, cannot make up my mind. It took me centuries before I finally decided to choose what I wanted to study (even my mom cheered with her "Okay, la, just do it."). I still ponder about my decision, but I always tell myself I could do that in the future! Or, well, study it on my own.</p>
<p>And finally, I shall reveal, for which a person such as I, am currently studying...<br>Which is..<br>Is...<br>...<br>...<br>Um,
<a href="https://university.taylors.edu.my/en/study/explore-all-programmes/design/undergraduate/bachelor-of-design-in-creative-media.html?ef_id=CjwKCAjwr8LHBhBKEiwAy47uUp9tTxrAHqtjkmKB-zit28LjSLKlsrkXVYMR_-8v0gIu4oLPovp7GxoC8skQAvD_BwE:G:s&s_kwcid=AL!995!3!!!!x!!&gclsrc=aw.ds&&kw=&match=&serp=&gad_source=1&gad_campaignid=22932054231&gbraid=0AAAAAC1NWxzpUTI8EQC7gVYbwEQRlWRpj&gclid=CjwKCAjwr8LHBhBKEiwAy47uUp9tTxrAHqtjkmKB-zit28LjSLKlsrkXVYMR_-8v0gIu4oLPovp7GxoC8skQAvD_BwE" target="_blank"><i>Design in Creative Media</i></a>?
Which I'm going to be <i>specialising in UI/UX</i>.<br>Yipee.</p>
<p>Now people, hold yer' horses! I have graced the many faces of confusion, and a reply of a "Oh, like drawing? Graphic Design?" or even a "what." response. I understand it is not that well-known to the masses, but it should be! Since we all see it everyday! Or use it. Especially in using it! I am literally doing it right now, programming this HTML exercise, for my Interactive Design module. So, I will do a short breakdown. I promise, it'll be short and sweet. No more prolonged speech. Unecessary speech. Yup. I will stop typing.</p>
<h3 style="color: rgb(19, 112, 117);">UI/UX Design</h3>
<h4>Design</h4>
<p>Let's get straight to the point. Design <b>ISN'T</b> just about drawing. It's everything and anything to do with what people use and how they perceive it. Kind of like mixing and balance functionality and attractibility. Of course, I ain't studying physics or engerineering, so making something workable is out of the equation (heh, get it, I made a pu-). But it is the making of a product that works the best for the user, where UX will come in!. No, but, seriously, design? Could be packing, advertising, film, posters, products, websites, games, it's kind of everywhere. </p>
<p>Pretty cool right? Even I had a limited perspective in the past, but my eyes shone bright and wide open!</p>
<h4>UI/UX</h4>
<p>Now some may think, oh this word is so fancy! Whatever could this weird, computery, language mean? I learned this in I.C.T. class in, like, Year 6 (totally not flexing) (okay I remembered I <i>had</i> to remember for an exam in high school). I thought it's basic knowledge... which I am not trying to offend anyone, it was just a thought.</p>
<p>Basically, UI means User Interface and UX means User Experience. UX is simple, it is everyone's experience with any product or system. UI is the space when people are in contact with a machine, in how they control the device or program. Examples like how people interact with a screen or navigate a website with its buttons and icons are all part of UI.</p>
<h4>Mixture</h4>
<p>A combination of those two means a design for UI and UX! <s>That totally did not add to anything.</s> The focused area of design is what people see on their digital devices, such as smartphones, laptops, and even gaming sets. It's about desiging a functionable and attractive design for digital devices, be it a website, app, or game. So, it is pretty important if you ask me, having to sew the design and program together for it to work successfully.</p>
<p>Okay! That wasn't about me, but it's still good information! However vague it might seem to be. I am still a student with not enough knowledge yet, so pardon me. <br>Anyway, moving on to the fun part now! (<b>*Groans*</b> There's more?!) Buckle up!
<br><br>
<hr></hr>
<br>
<h2 style="color: rgb(59, 151, 156);">An Even Deeper Dive</h2>
<h3 style="color: rgb(19, 112, 117);">Personal Interests</h3>
<p>With the earlier context clues, I have a lot of interests. All scattered around and wherever. But the core of it all is always revolved around a <i>story</i>. Usually drifting to fiction, I love anything that has to do with an interesting story, usually if I can connect with it through characters, plot, art, or, importantly, emotion. All of which is said, these are my top 3 things I love to do, with some examples (my obession changes every few months):<br>
<ol>
<li><b>Reading Stories</b>
<ul>
<li>Archive of Our Own (I am not ashamed)</li>
<li><a href="https://omniscient-readers-viewpoint.fandom.com/wiki/Omniscient_Reader%27s_Viewpoint" target="-blank">Omniscient Reader's Viewpoint</a></li>
<li><a href="https://rainbowrowell.fandom.com/wiki/Carry_On" target="_blank">Carry On (Rainbow Rowell)</a></li>
</ul>
</li>
<li><b>Watching a Series/Movie</b>
<ul>
<li><a href="https://supernatural.fandom.com/wiki/Supernatural" target="_blank">Supernatural</a></li>
<li><a href="https://jojo.fandom.com/wiki/JoJo%27s_Bizarre_Adventure" target="_blank">Jojo's Bizarre Adventure</a></li>
<li><a href="https://www.imdb.com/title/tt1199099/" target="_blank">Merlin</a></li>
</ul>
</li>
<li><b>Playing Video Games</b>
<ul>
<li><a href="https://kingdomhearts.fandom.com/wiki/Kingdom_Hearts_(game)" target="_blank">Kingdom Hearts</a></li>
<li><a href="https://baldursgate3.game/" target="_blank">Baldur's Gate</a></li>
<li><a href="https://devilmaycry.fandom.com/wiki/Devil_May_Cry_Wiki" target="_blank">Devil May Cry</a></li>
<li><a href="https://residentevil.fandom.com/wiki/Resident_Evil_Wiki" target="_blank">Resident Evil</a></li>
</ul></li>
</ol>
<p>Once again! These are my current obessesions and is in no way going to be my "favourites of all time". It changes, depending on, well circumstances. I love fantasy and action, especially when characters and storylines are written well. As you can see, I love fiction stories a whole lot, and my love to learn how those stories are being made. </p>
<br>
<h3 style="color: rgb(19, 112, 117);">My Skills and Quests!</h3>
<p>With all the above, I want to go on adventure quests and make my own story! Which is really inspired by things like DnD and
medieval fantasies, I would like to gain skills that interest me, encounter different people with their own stories, and just
generally enjoy life to the best of my abilities. No matter where I am at my timeline, I want to create and live a story of my
own. Which all leads us to what I can currently do and what I'm looking towards the future for!</p>
<p>Even if I'm not as talented as others, or faithfully continuing to hone my skills, I'm still glad of the ones I have!
Even with all my weird, sarcastic humor (<i>leaving rant free in my head because I'm too socially anxious to say them out
loud</i>), I want to acknowledge and share my small skillset:</p>
<ul>
<li>Being able to analyse storytelling and cinematography easily</li>
<li>Liking the heavy deed of editing (mostly enjoying video editing)</li>
<li>Having a creative mind that sometimes go way off tangent (killer example now, innit?)</li>
<li><s>I think I'm funny.</s></li>
<li>Learning? Nah, I really much prefer the word, <i>exploring</i>, where I really love the chance of experiencing, well, anything!</li>
<li>I love to <i>dream</i> and I still like holding on to that feeling</li>
<li>My mind is open to many things, bad or good, unless I've been hearing the same thing over and over- (I can never be mundane)</li>
</ul>
<p>Okay, okay, I'm sorry I've been holding you hostage for this long. By this point, you're begging to be released, right? Well,
to wrap it up with a bang (honestly, it's like an awkward "yup, I'll just leave right now...bye" situation), I want to finally
share my goals, or rather, I like the term "<i>quests</i>" instead, of what I want to see in my story. Here it is!</p>
<ol>
<li>To create good memories that I'll enjoy and fondly look back to</li>
<li>To make important connections with others that won't ever leave me in regret</li>
<li>To explore this world and learn of its diversity in nature and future</li>
</ol>
<br>
<hr></hr>
<br>
<h2 style="color: rgb(59, 151, 156);">To Conclude!</h2>
<p>I do not like the term "not like others" (it's cringe-worthy and attention-seeking, perhaps?) but sometimes
I do not know how else to describe myself. I do not answer how others expect me to, and I live in this weird "idealisitc" world
of mine, of which many can never understand. But no matter how different I may be, or how different others are, we are still
people, and I really love the good ol' harmony we can share. I did not expect this webpage to be this long, and I really am sorry
if you read up till now (<i>I should hand you a congratulatory prize, because you are <b>awesome</b></i>). However, at the same, conflicting,
time, I really appreciate you for getting to know me. I'm not getting sappy or anything (trees are weirdly fascinating), but it
does leave a big warmth in my heart that someone is willing to understand and know me. Like, even tolerating my <i>very</i> funny jokes.</p>
<h4>Wow, that was, uh, <i>really heavy</i>. Huuuuge thanks! Now, I shall finally take my leave.</h4>
<h1 style="color: rgb(11, 126, 130);">Toodles! :D</h1>
</body>
</html>
Comments
Post a Comment