Interactive Design - Lecture Notes and In-Class Exercise
TAN YING YI / 0362425 / BACHELOR OF DESIGN (HONS) IN CREATIVE MEDIA
INTERACTIVE DESIGN
INSTRUCTIONS
Week 2 - 5/9/2023
In-Class Exercise
Week 3 - 12/9/2023
The three key elements of websites
- Header
It usually contains the website's logo, navigation menu, and contact information. The logo should placed on the left. Navigation menus should be clear.
- Body
It contains text, images, videos, and other multimedia elements. - Footer
It includes copyright information, links to important pages, and contact details. Copyright information shows the audience its credibility.
In-Class Prototype Exercise
Week 4 - 19/9/2023
Lecture Notes
HTML DESCRIBES THE STRUCTURE OF PAGES
Elements are usually made up of two tags: an opening tag and a closing tag.
<element>Information</element>
Each element tells the browser something about the information that sits between its opening and closing tags.
ATTRIBUTES TELL US MORE ABOUT THE ELEMENTS
Attributes provide additional information about the contents of an element. They appear on the opening tag of the element and are made up of two parts: a name and a value, separated by an equals sign.
ATTRIBUTE NAME
<p lang=“eng-us”>Paragraph in English</p>
ATTRIBUTE VALUE
HEADINGS
• HTML has six levels of headings (Just until h6):
• <h1> main headings
• <h2> subheadings
• If there are further sections under the subheadings then the <h3> element is used and so on ...
PARAGRAPH
To create a paragraph, surround the words that make up the paragraph with an opening <p> tag
and closing </p> tag
BOLD & ITALIC
By enclosing words in the tags <b> and </b> we can make characters appear bold.
By enclosing words in the tags <i> and </i> we can make characters appear italic.
ADDING IMAGE
<img src=“image/foto.jpg” alt=“alternative text” title=“title of the image”/>
⬆ ⬆ ⬆
This is the path to your image
src - This attribute specifies the path to the image.
alt - This attribute provides alternative text for the image, which is essential for accessibility
Title - This attribute provides tool tip of the image in the browser
LISTS
<ol>
The ordered list is created with the <ol> element
<li>
Each item in the list is placed between and opening <li> tag and a closing </li> tag (the li stands for list
item.)
Browser indent list by default
<ul>
The unordered list is created with the <ul> element
<li>
Each item in the list is placed between and opening <li> tag and a closing </li> tag (the li stands for list
item.)
Browser indent list by default
WRITING LINKS
Links are created using the <a> element
Users can click on anything between the opening<a> tag and the closing </a> tag
Specify which page to link using the href attribute
Key in target="_blank" to open the page in a new tab.
Every attribute should be added with a space.
ABOUT OUR WORK
When we save our work at Netlify
Make a main file using the exercise name and put all images and HTML file inside.
Save EVERY HTML file as index.html
Week 5 - 26/9/2023
Lecture Notes
ID attribute
• Every HTML element can carry one ID attribute
• It is used to uniquely identify the element from other elements on the page
• It is important that no two elements have the same value for their ID attributes (otherwise the value is no longer unique)
Class attribute
• Every HTML element can also carry a class attribute.
• Sometimes you will want a way to identify several elements as being different from the
other elements on the page
Block elements
• Some elements will always appear to start on a new line in the browser window
• Example: <h1>, <p>, <ul> and <li>
Inline elements
• Some elements will always appear to continue on the same line as their neighbouring elements
• Example: <b>, <i>, <em>, <a> and <img>
CSS Properties Affect How Elements are Displayed
{property;value}
⬆
colour/font size/background image...
li a {
text-decoration:none;
font-size:12em;
color:blue;
}
Orange - Value
Purple - Value
White - Bracket...
Copy the link of the selected fonts and paste it under <head> to use it.
Copy the CSS rules and paste it
Week 6 - 3/10/2023
Lecture Notes
Universal Selector: Selects all elements on the page. It's represented by an asterisk (*). Use it with caution, as it can affect all elements and lead to inefficient CSS.
* {
/* CSS styles go here */
}
Element Selector: The simplest type of selector, it targets HTML elements by their tag name.
p {
/* CSS styles go here */
}
ID Selector: Targets an element with a specific id attribute. IDs must be unique within an HTML document. To select an element with a specific ID, use a # symbol followed by the ID name.
#my-element {
/* CSS styles go here */
}
Class Selector: Targets elements with a specific class attribute. Multiple elements can share the same class. To select elements with a specific class, use a . symbol followed by the class name.
.my-class {
/* CSS styles go here */
}
Descendant Selector: Selects an element that is a descendant of another element. You can specify a
hierarchy of elements to target. For example, to style all <a> elements inside a <div> with class "container,"
.container a {
/* CSS styles go here */
}
Child Selector: Selects elements that are direct children of another element. To select only the immediate <li> children of an <ul>, you can use:
ul > li {
/* CSS styles go here */
}
Pseudo-class Selector: Selects elements based on their state or position in relation to other elements.
Common pseudo-classes include :hover, :active, :active, :focus, and :nth- child(n)
a:hover {
/* CSS styles go here */
}
Week 7 - 10/10/2023
Lecture Notes
The Display Property
Other display properties
- Inline-block
- Flex
- Grid
Box Model in CSS
- Each box has three layers that surround its content. The layers are, in order from inside to outside: Padding, Border, Margin
- The size of each of the layers in the box model can be specified using the usual CSS units of measure (em, %, and px).
- For example, consider the following <p>, which is wrapped inside a <div>:
Comments