PROJECT 1
Week 1-Week 6 (23/04/2025-21/05/2025)
Jennifer Michelle Hiendrawan/0374682
Interactive Design/Bachelor of Design (Honours) in Creative Media
Project 1
TABLE OF CONTENTS
1.Lecture
2.Instructions
3.Task
4.Reflection
LECTURE
Week 4
INTERACTIVE DESIGN WEB STANDARDS
Hardware and Software Issues:
-Growing variety of browser, operating system, and screen resolution create a
high probability that the website will look different with many versions
-Even though there are a lot of variety, the most important is the content
which everyone should access that
-Web standards ensure that website work across all devices that is created and
mantained by Worl Wide Web Consortium (W3C)
-Standard markup languages: HTML, CSS
Why web standards?
-Make internet a better place for both developers and visitors
-Simplified, since it is easier for a developer to understand another's coding
-Ensure that all browsers will display the website properly
How the web works
-To find the location of the web, we must connect to a domain named system
(DNS) server
-Type a domain name or web address into your browser to visit a site
-Your computer will tell you your IP address and each device has the unique
one
-The unique number allows your browser to contact the web server that hosts
the website you requested
-The web server then sends the page you requested back to your web browser
Structure of a web page
1.Home Pages use structure
-The use of headings and subheadings in any document often reflect a hierarchy
of information
-The document will start with a large heading, followed by an introduction or
the most important information
.png)
Fig 1.1 Headings and Subheadings
HTML describe the structure of pages
-To decsribe the structure of a web page, we add code to the words we want
to appear on the next page
-The HTML code is made up of characters that lives inside angled brackets
<>
Opening tag:<p>
Closing tag:</p>
Language:<p lang=“eng-us”>Paragraph in English</p>
Body, head, and title: <body>, <head>, <title>
Headings: <h1> for main heading, <h2> for subheadings, <h3>
and so on
.png)
Fig 2.2 Heading Examples
Paragraph: opening <p> and closing </p>
Bold and Italic: opening <b> closing </b>, opening <i> and
closing <i>
Lists:
1.Ordered list: Each item on the list is numbered. Code:<ol>. Each
item in the list is placed between and opening <li> tag and a closing
</li>
2.Unordered list: begins with a bullet point. Code:<ul>. Each
item in the list is placed between and opening <li> tag and a closing
</li>
3.Nested List: You can put a second list inside an <li> element
to create a sub-list or nested list
4.Writing links: Links are created using the <a> element, user
can click on anything between the opening<a> tag and the closing
</a> tag, Specify which page to link using the here attribute
.png)
Fig 2.3 Adding Image
.png)
Fig 2.4 Writing links
Week 5
Extra markup (ID attribute)
-Used to uniquely identify the element from others on the page
-Important that no two elements have the same value for their ID attributes
because it is no longer unique
Extra markup (Class attribute)
-To identify several elements as being different from the other elements on
the page
-Example: you might have some paragraph that contain information that is more
important than others and want to distinguish between these elements
-Class attributes on any elements can share the same value or name
Extra markup (ID and class attribute)
-By default, using these attributes does not affect the presentation of an
element and will only change their appearance if there is a CSS rule that
indicates it should be displayed differently
Extra markup (Block elements)
-Some elements will always appear to start on a new line in the browser
window
-Example: <h1>, <p>, <ul> and <li>
Extra markup (inline elements)
-Some elements will always appear to continue on the same line as their
neighbouring elements
-Example: <b>, <i>, <em>, <a> and <img>
Introduction to CSS
-CSS allows you to create rules that specify how the content of an element
should appear
-You can set the background of the page, the paragraph color, and the
typefaces used
-CSS works by associating rules with HTML elements
-A CSS rule contains two parts: a selector and a declaration
.png)
Fig 2.5 Selectors and Declaration
.png)
Fig 2.6 Property and Values
Method to employ CSS
-The <link> element can be used in an HTML document to tell the browser
where to find the CSS file used to style the page
-It is an empty element and it lives inside the <head> element
-It should use three attributes:
• href; To specify the path to the CSS file
• type; This attribute specifies the type of document being linked to. The
value should be text/css
• rel; Specifies the relationship between the HTML page and the file linked
to. The value should be stylesheet when linking to a CSS file
-An HTML page can use more than one CSS style sheet.
-You can also include CSS rules within an HTML page by placing them inside a
<style> element, which usually sits inside the <head> element of
the page •
-The <style> element should use the type attribute to indicate that the
styles are specified in CSS
-The value should be text/css
-When building a site with more than one page, you should use an external CSS
style sheet.
Week 6
CSS SELECTOR
- Fundamental part of CSS that allow you to target and style HTML elements on a web page.
-Used to define which elements should receive specific styles, such as colors, fonts, spacing, and more.
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.
.png)
Fig 2.7 Universal selector
Element Selector: Targets HTML elements by their tag name.
.png)
Fig 2.8 Element selector
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.
.png)
Fig 2.9 ID selector
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.
.png)
Fig 2.10 Class selector
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,"
.png)
Fig 2.11 Descendent selector
Child Selector: Selects elements that are direct children of another element. To select only the immediate <li> children of an <ul>, you can use:
.png)
Fig 2.12 Child selector
Pseudo-class Selector: Selects elements based on their state or position in relation to other elements. Common pseudo-classes include :hover, :active, :visited, :link, :focus, and :nth-child(n)
Fig 2.13 Pseudo-class selector
Pseudo-element Selector: Selects parts of an element rather than the element itself. Common pseudo-elements include ::before and ::after, which are used to add content before or after an element.
Fig 2.14 Pseudo-element selector
-To give web developers the ability to precisely target and style specific elements or groups of elements based on their structure, attributes, state, or position within the document.
Specificity:
-Different situations may require different levels of specificity w
-You may want to style a specific element with an ID differently from other elements with the same class.
Structure:
-Web pages often have complex structures with nested elements.
-Selectors like descendant selectors (parent element > child element) and sibling selectors (element + adjacent element) enable to target elements within specific structural contexts.
Attribute-Based Selection:
-Attribute selectors:[attribute="value"]
Pseudo-Classes and Pseudo-Elements:
-Styleelements based on their state or position within the document.
-You can style links differently when they are hovered over (:hover) or style the first letter of a paragraph (::first-letter) differently.
Responsive Design:
-Media queries, a type of selector, enable to apply different styles to elements based on the user's device characteristics, such as screen size, orientation, or resolution.
-Essential for creating responsive web designs.
Stateful Interactions:
-Selectors like :focus, :active, and :checked allow you to style elements based on user interactions.
-Can style a button differently when it's clicked (:active) or style form elements when they are in focus (:focus).
Cross-Browser Compatibility:
-Different web browsers may interpret and apply CSS rules differently.
-Having a variety of selectors allows developers to use techniques that work consistently across different browsers.
Ease of Maintenance:
- Using class selectors can make it simpler to update styles consistently for multiple elements.
2.INSTRUCTIONS
3.TASK
REFLECTION
Experience
I gained a lot of new experiences, especially in creating a wireframe and thinking about how to make the website design that I will create look good, interesting, and of course, consistent. I learned this through the lectures given by Mr. Shamsul during class.
Observation
I observed that actually making a proposal is not difficult, but it takes a long time to think repeatedly about whether the design being submitted is appropriate, and so on.
Findings
In my opinion, creating a proposal for website redesign is very exciting because I can look for many references while observing other great websites to learn from them and gain a lot of new knowledge.
.png)
Comments
Post a Comment