Interactive Design Exercise 2: HTML & CSS Development
Interactive Design Exercise 2: HTML & CSS
-
8.10.2025 - 15.10.2025 / Week 3 - Week 4
Dave Christian Moniaga / 0385630
Interactive Design / Bachelor of Design (Hons) in Creative Media
Exercises 2: HTML & CSS Development
Table of Contents
- Lecture
- Instructions
- Exercise
- Feedback
- Reflection
Lecture
Week 3 Lecture: The Web
The web was invented by Tim Berners Lee in 1989 for scientists to share information globally. Web standards have changed since the early days. People access the web through their phones, tablets; using audible interfaces too (i.e. for the disabled).
With varieties in browsers, operating systems, and resolutions, there is a high probability that your website will look different. a way to ensure a website works across all devices is to have a web standard.
Responsive website: website that works with all devices
W3C defined dozens of standard markup language; HTML and CSS are the one used in this course
The structure for a web page is important in helping readers understand information that we are trying to convey & how to navigate it.
HTML Describes the Structure of Pages
To describe the structure of a webpage, we add code to words that appear on a page.
HTML code is made of characters that live inside angled brackets <>, called elements. They are made up of two tags; opening and closing tags.
Attributes
Inside elements lie something called attributes that provide additional information about the contents. They are put on the opening tab and have two parts: a name & a value.
Body, Head, and Title
<head> : placed before the <body> element, this contains information about the page
<title>: usually found in <head> element, it is shown in the top of the browser (tab bar)
<body> : everything in this element is shown in the main browser window
There are other elements in a webpage in the form of tags / markup:
Headings
In HTML, there are six levels of headings,
<h1> main heading
<h2> subheadings
<h3> for further sections and so on..
Paragraph
To make paragraphs, the text / words need to be surrounded with an opening <p> tag and closing </p> tag
Bold & Italic
Words placed inside tags <b> and </b> will appear bold. This tag can also be used in paragraph tags.
Similarly, words inside tags <i> and </i> will make characters appear italicized.
Lists
There are two types of lists in HTML:
You can also put a second list inside <li> elements to create sublist/nested list.
Links
Links allow you to move you from one webpage to another, there are multiple type of links. There are a few common types of links,
href: hyperlink reference
Images
The <img> tag is used when putting images into a webpage. In web design, images are not inserted in the webpage itself, they are instead linked to it. The <img> tag is also void of content and comprised of attributes only, meaning no need for closing tag.
Two essential attributes must also be included:
src - path to the image
alt - alternative text for the image
title - tool tip of the image in browser
HTML Exercise
This week our task is to create single HTML file that contains an "about me" or personal profile page. During class, we were given basic instructions to help us start with our exercise.
Since I am using a Windows operating system, I am using Notepad for this exercise.
As instructed I made the file name as "index.html". With research I found out that although it is not currently necessary, it will be important later on as this file name is what web servers will look for when loading the homepage.
I utilized the HTML elements and tags such as that were mentioned in the lecture as I put in basic info about myself.
For closer inspection I have attached the basic HTML code in notepad:
The web was invented by Tim Berners Lee in 1989 for scientists to share information globally. Web standards have changed since the early days. People access the web through their phones, tablets; using audible interfaces too (i.e. for the disabled).
With varieties in browsers, operating systems, and resolutions, there is a high probability that your website will look different. a way to ensure a website works across all devices is to have a web standard.
Responsive website: website that works with all devices
W3C defined dozens of standard markup language; HTML and CSS are the one used in this course
The structure for a web page is important in helping readers understand information that we are trying to convey & how to navigate it.
|
| Fig 1.1 Structure of web |
|
| Fig 1.2 Structure of web |
HTML Describes the Structure of Pages
To describe the structure of a webpage, we add code to words that appear on a page.
HTML code is made of characters that live inside angled brackets <>, called elements. They are made up of two tags; opening and closing tags.
|
| Fig 1.3 HTML code format |
|
| Fig 1.4 An opening tag |
|
| Fig 1.5 A closing tag |
Attributes
Inside elements lie something called attributes that provide additional information about the contents. They are put on the opening tab and have two parts: a name & a value.
|
| Fig 1.6 Attribute name & value |
Body, Head, and Title
<head> : placed before the <body> element, this contains information about the page
<title>: usually found in <head> element, it is shown in the top of the browser (tab bar)
<body> : everything in this element is shown in the main browser window
There are other elements in a webpage in the form of tags / markup:
Headings
In HTML, there are six levels of headings,
<h1> main heading
<h2> subheadings
<h3> for further sections and so on..
|
| Fig 1.7 Heading in HTML and their result |
Paragraph
To make paragraphs, the text / words need to be surrounded with an opening <p> tag and closing </p> tag
|
| Fig 1.8 Paragraphs in HTML and their result |
Bold & Italic
Words placed inside tags <b> and </b> will appear bold. This tag can also be used in paragraph tags.
Similarly, words inside tags <i> and </i> will make characters appear italicized.
|
| Fig 1.9 Bold in HTML and result |
|
| Fig 1.10 Italic in HTML and result |
Lists
There are two types of lists in HTML:
- Ordered lists are used if each item needs to be numbered
- created using <ol> element
- Unordered lists will start with a bullet point
- created using <ul> element
|
|
Fig 1.11 Ordered list example |
|
| Fig 1.12 Unordered list example |
You can also put a second list inside <li> elements to create sublist/nested list.
|
| Fig 1.13 Nested list example |
Links
Links allow you to move you from one webpage to another, there are multiple type of links. There are a few common types of links,
- Links from one website to another
- Links from
- Links from a web page to another part in the same page
- Links that open in a new browser window/tab
href: hyperlink reference
|
| Fig 1.14 Link element & attribute |
Images
The <img> tag is used when putting images into a webpage. In web design, images are not inserted in the webpage itself, they are instead linked to it. The <img> tag is also void of content and comprised of attributes only, meaning no need for closing tag.
Two essential attributes must also be included:
src - path to the image
alt - alternative text for the image
title - tool tip of the image in browser
|
| Fig 1.15 Image tag and attributes |
Instructions
HTML Exercise
This week our task is to create single HTML file that contains an "about me" or personal profile page. During class, we were given basic instructions to help us start with our exercise.
Since I am using a Windows operating system, I am using Notepad for this exercise.
As instructed I made the file name as "index.html". With research I found out that although it is not currently necessary, it will be important later on as this file name is what web servers will look for when loading the homepage.
|
| Fig 2.1 HTML file name & icon |
I utilized the HTML elements and tags such as that were mentioned in the lecture as I put in basic info about myself.
|
| Fig 2.2 Preview of HTML code and webpage |
For closer inspection I have attached the basic HTML code in notepad:
Finally, I uploaded the html file into netlify for the perusal of the
lecturer & others.
Click this link for viewing: https://exercise01-davemoniaga.netlify.app/
When viewed through the browser, this is the current webpage that can be
seen from the code. I downloaded it into a PDF for ease of viewing.
Comments
Post a Comment