Labels

Interactive Design | Project 1 - Proposal

|| Tee Zi Tong, 0366165

|| Interactive Design

|| Project 1 - Proposal 

LECTURER NOTES
Lecture 3: Introduction to the Web & HTML

Web Standards

  • Websites are built using a core set of rules known as web standards.
  • These standards help ensure that your site works well across all browsers and devices.
  • The main priority of any website is its content — and it should be accessible to all users.

HTML & CSS Overview

  • We’ll use two key languages: HTML (for structure) and CSS (for style).
  • HTML (HyperText Markup Language) is used to define the structure of web pages.

How HTML Works

  • HTML is written using elements, which are wrapped in angle brackets < >.
  • Most elements consist of an opening tag and a closing tag.
    Example:

<element>Content goes here</element>

  • Each element tells the browser how to handle the content inside it.

Common HTML Elements
Headings:

  • <h1> – Main heading
  • <h2> – Subheading
  • <h3> – Smaller subheading
  • ...up to <h6>
Paragraph:
  • <p> – Used for body text and general paragraphs
Text Formatting:
  • <b> – Makes text bold
  • <i> – Makes text italic
Lists:
  • Ordered list (numbered):
<ol>
  <li>First item</li>
  <li>Second item</li>
</ol>
  • Unordered list (bulleted):
<ul>
  <li>Item one</li>
  <li>Item two</li>
</ul>
Links:
  • Use the <a> tag to create clickable hyperlinks:
<a href="https://www.oreo.com">Visit Oreo</a>
Images:
  • Use the <img> tag to display images with an alt text (for accessibility):
<img src="image.jpg" alt="Description of image">


Lecture 4: Introduction to CSS 

We are currently using the latest standards in web development: HTML5 and CSS3.

Understanding HTML Structure

  • In HTML, a closing tag marks the end of an element. This ensures that any content after it is not affected by the same formatting.

 

What is CSS?

  • CSS (Cascading Style Sheets) is used to control how HTML elements appear on the page—such as colors, spacing, fonts, and layout.
  • With CSS, you can create rules that define how specific parts of your content should be styled.

 

CSS Rule Structure

A CSS rule has two main components:

  1. Selector – identifies the HTML element to style.
  2. Declaration Block – enclosed in {} and includes:
    • Property – the style feature you want to change (e.g., color, font-size).
    • Value – the setting for that property (e.g., blue, 16px).

Fonts in CSS

  • Many default fonts are available on most devices and can be used instantly in CSS.
  • You can also expand your font choices by importing Google Fonts, allowing you to apply custom typography to your webpage.

 Lecture 5: HTML & CSS

CSS (Cascading Style Sheets) is essential for controlling the look and layout of a webpage. It uses selectors to target specific HTML elements and apply styles like colors, fonts, spacing, and layout adjustments.

 

What Are CSS Selectors?

Selectors are the part of a CSS rule that tells the browser which HTML element(s) to style. They're powerful tools that let you define styling rules for specific parts of a webpage.

 

Types of CSS Selectors:

  • Universal Selector (*)
    Targets all elements on the page. Use it carefully, as it can affect every single element and reduce efficiency.
  • Element Selector
    Selects elements by their HTML tag name (e.g., h1, p, ul).
  • ID Selector (#id)
    Targets an element with a specific id attribute.
  • Class Selector (.class)
    Targets all elements with a specific class name.
  • Descendant Selector
    Selects elements that are nested within another element.
  • Child Selector
    Targets direct children of an element only.
  • Pseudo-Classes (:hover, :focus, etc.)
    Apply styles based on element states or user interactions.
  • Pseudo-Elements (::before, ::after, etc.)
    Style specific parts of elements or add content dynamically.

Why Are There So Many Selectors?

  • Specificity: You might need to be more precise when styling certain parts of your page.
  • Complex Page Structures: Nested elements require more detailed targeting.
  • Attribute-Based Styling: Some styles depend on an element's attributes or values.
  • User States & Interactions: Selectors like :active, :checked, or :focus respond to user behavior.
  • Responsive Design: Media queries help adapt styles to different devices and screen sizes.
  • Browser Compatibility: Different browsers may interpret rules differently, so flexible selectors help ensure consistency.
  • Accessibility: Using selectors effectively can enhance the usability of your site for people with disabilities.
  • Maintainability: Well-structured CSS with clear selectors is easier to update and manage.

INSTRUCTIONS

CLASS EXERCISES

Week 4
In Week 4, Sir asked us to create a simple HTML webpage. It included a page title, a main heading with our name, and a subheading with a nickname or fun fact. We wrote two short paragraphs—one about ourselves and one about our family—using bold and italic text. A horizontal line <hr> was added to separate sections. We also created lists of our hobbies, favorite movies, foods, and goals using <ul> and <ol>, with some <br> tags to improve spacing.


Week 5

In Week 5, we used Dreamweaver to style our website. We learned how to add a background color, change the font style, and adjust the font size. It was our first experience applying design to make the webpage look better.




LINK TO CHOSEN WEBSITE 

PROJECT 1 - PROPOSAL 
Project 1 - Web Redesign Proposal by Tee Zi Tong 0366165


LINK TO CANVA SLIDES 


PDF Version



Labels:

Comments

Post a Comment