INTERACTIVE DESIGN - HTML EXERCISE: 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
HTML Exercise: Simple Personal Profile Page
TABLE OF CONTENTS
1. Lectures
2. Process Work
3. Feedbacks
4. Reflection

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

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


Exercise 1: Simple Personal Profile Page



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
!

Observation
!

Findings
!


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