INTERACTIVE DESIGN - EXERCISE 2: HTML - PERSONAL PROFILE PAGE

-
09.10.25 - 16.10.25 (Week 3)
Michelle (0373843)
Interactive Design / Bachelor of Design (Honours) in Creative Media / Taylor's University
Exercise 2: HTML - Simple Personal Profile Page
TABLE OF CONTENTS

Lectures

Week 3 (09/10/25)
The Web & Language
Internet = infrastructure.
Web = get information, share files - through the internet.

History
  • Invented in 1980s by Mr. Tim Berners Lee. Initially not for public (restricted).
    • Full text, no graphic
    • Speed: 56kbps
    • Formerly, website design need to be adjusted to different web browsers/platforms.
The Web
  • Governed by World Wide Web Consortium (W3C).
  • Use standard languages, codes.
  • Domain name = url 
    • To have url - needs to subscribe (pay regularly), needs a server (works 24/7, 365 days).
  • Every device have IP number (like an identity number).
    • TCP/IP: Transmission Control Protocol/Internet Protocol.
HTML - mark up language that describe how web looks like in browser.
  1. Tags < > (usually comes in pair: opening & closing, but some stand alone).
  2. Element - inside tags.
    • <h1>Headings</h1>  - until smallest <h6> 
    • <p>Paragraph</p>
    • Text formatting: <b>bold</b> and <i>italic</i>
    • Lists - <ul>unordered (bullets)</ul> or <ol>ordered (numbers)</ol>
      <li>List</li> - inside (have indentation)
    • Links - to different sections in a page, different pages, different websites.
  3. Attribute - within opening tag.
    • Second attributes are separated by space.
Document structure/flow - information hierarchy:
  1. Head - include title, CSS & Javalink links, icons
  2. Body > Elements & contents

Process Work

1. Live Code Session
Create a website using primitive software: TextEdit, Notepad (windows)
Set Up Steps:
  1. Create new folder in file.
  2. Open Notepad - new file.
  3. Format to text (for TextEdit)
  4. Save as index.html (all lowercase) in the folder created.
  5. Write code & content.
  6. Sign up Netlify (working folder = place to save everything > upload entire folder to server).

Figure 2.1.1 Webpage Appearance

Figure 2.1.2 Webpage Code 1

Figure 2.1.3 Webpage Code 2


2. Exercise 2: HTML - Simple Personal Profile Page

Personal Profile Page Result: https://michelle-interactivedesign-exercise2.netlify.app/

Figure 2.2.1 Personal Profile Webpage Appearance

Figure 2.2.2 Personal Profile Webpage Code 1

Figure 2.2.3 Personal Profile Webpage Code 2

Figure 2.2.4 Personal Profile Webpage Code 3

Feedbacks

Week 3 (09/10/25
  • Take advantage of technologies available today. Reduce time doing things manually.
  • Learn how to format texts correctly. Format headings using default settings available first, then customize if needed.
  • Every time coding updated, save (ctrl s/command s).
  • Be creative & fun HTML exercise.
  • Adobe Dreamweaver tend to crash, so to avoid can use Visual Studio Code.

Reflection

Experience
Studying web languages could easily feel overwhelming, as there is so many layers, types, and rules. It's daunting, especially for an entry-level learner like me, it's easy to feel confused on where to start, where to go. I feel like this HTML exercise is a simple yet fun way to retrace what we've learnt in class for brain retention. It's small and easy enough that it prevents the brain from over-worrying, and it leaves room for modest independent exploration.

Observation
Lectures & tutorials could be quite fast & sped up, notably because we lose one class on week 2. Full attention & focus is needed in class. 

Findings
I realized that the world of web languages is super big, HUGE! There's so many things can be learnt that it's impossible for it all to be taught and covered in a once-a-week lecture classes. Therefore curiosity and independent initiative to find, learn, and apply new knowledge is essential.

Comments

Post a Comment

Popular posts from this blog

DESIGN PRINCIPLES - TASK 1: EXPLORATION

-
Image
10.02.25 - 16.02.25 (Week 2 - Week 3) Michelle (0373843) Design Principles / Bachelor of Design (Honours) in Creative Media / Taylor's University Task 1: Exploration TABLE OF CONTENTS 1. Instructions 2. Lectures 3. Selected Design & Explanation 4. Feedbacks INSTRUCTIONS LECTURES Elements of Design Fig 1.1 Design Elements (inspiration: https://www.onlinedesignteacher.com/2015/11/design-elements_91.html ) 1. Point (the simplest element of design) - Its movement in space creates other two- and three-dimensional figures. 2. Line - Indicates directions, define shapes and space boundaries, suggest motions, form patterns and textures. 3. Shape  (2D area) - Visible when a line creates an enclosed area or an apparent change in color, texture, or value (light/dark), could be geometric or organic. 4. Form (3D area) - Creates volume when it encloses space, in 2D media it must be ...
Read more

INTERCULTURAL DESIGN - CONTINUOS ASSESSMENT

-
Image
07.02.25 - 21.03.25 (Week 1 - Week 7) Michelle (0373843) Intercultural Design / Bachelor of Design (Honours) in Creative Media / Taylor's University TABLE OF CONTENTS  1. Instructions 2. Lectures 3. Project 1: Proposal 4. Project 2: Field Study 5. Final Project 6. Feedbacks 7. Reflection INSTRUCTIONS LECTURES Week 1 (07/02/25) - Intercultural Design  In our first week, we are introduced to the module which consists of: information on the coordinators along with their contacts, learning platform, MIB, also physical and online meeting schedule. Then, we were given a lecture on Culture & Design , the summary are below. Visuals are: 1. Everything that can be seen (nature is not culture unless there's representation attached to it). 2. Everything produced/created by humans that can be seen which serves a purpose (e.g. has functions,...
Read more

DESIGN PRINCIPLES - TASK 2: VISUAL ANALYSIS & IDEATION

-
Image
17.02.25 - 9.03.25 (Week 3 - Week 5) Michelle (0373843) Design Principles / Bachelor of Design (Honours) in Creative Media / Taylor's University Task 2: Visual Analysis & Ideation TABLE OF CONTENTS 1. Instructions 2. Lectures 3. Visual Analysis of Selected Work 4. Ideation 5. Feedbacks INSTRUCTIONS LECTURES Visual Analysis Definition : A method to understand how formal design properties communicate ideas, content, and meaning trough its visual elements and principles. Practicing visual analysis improves critical judgement skills in interpreting designs/artworks. 3 Phases of Visual Analysis Observation : The process of closely looking and thinking, and finding the visual elements of a design on our own, without any research beforehand. Analysis : Reevaluate our observations on the ...
Read more