CHIAH CAI JUN 0365352
Bachelor of Interactive Spatial Design / Taylor's University
Interactive Design / Sept 2025
Week 02 - Week 14
---------------------------------------------------------------------------------------------------------------------------
LECTURE NOTES
Week 02
Week 03
Difference between internet and web:
Internet: infrastructure
web standard: html, css
w3c: standard markup languages
web server: on everyday, storage data
document structure
why to have this flow? easy to read
the thing that we want to include in the website, need to be in the middle of element:
<element>Information</element>
<body> = content
<h1> - <h6> = the higher the value, the smaller the header size
paragraph
<p>hello world</p>
dont need to bold heading (it is bold by default)
list
unordered: bullet <ul> + <li>
ordered: number (instruction) <ol> + <li>
href attribute separated by =
**Web Standards, Web Functionality, and HTML Structure**
**Web Standards and Accessibility**
- Web standards are a set of core rules for developing websites to ensure compatibility across diverse devices and browsers ().
- The primary organization responsible for creating and maintaining these standards is the World Wide Web Consortium (W3C), which defines languages like HTML and CSS ().
- Developing in accordance with web standards guarantees that websites are accessible to all users, regardless of device or interface, including mobile phones, tablets, and audible interfaces ().
- Following standards simplifies development, improves cross-browser consistency, and reduces the need for rewrites ().
**How the Web Works**
- When a user visits a website, the browser connects to a DNS (Domain Name System) server to resolve the domain name into an IP address, which locates the web server ().
- The browser then contacts the web server via the IP address, which is obtained from the DNS response ().
- The web server, which is always connected to the internet, sends the requested web page back to the browser ().
- This process involves the user’s ISP, DNS servers, the web server, and the transfer of data packets, enabling the webpage to load in the browser ().
**Structure of a Web Page**
- Web pages are structured using HTML tags that define the content and its hierarchy, similar to traditional documents like newspapers or forms ().
- The core structure includes:
- `<html>`: The root element that contains the entire webpage.
- `<head>`: Contains metadata, including the `<title>` which appears in the browser tab ().
- `<body>`: Contains the visible content of the webpage, such as headings, paragraphs, lists, images, and links ().
- The `<title>` element within `<head>` displays the page title in the browser tab, helping users identify the page ().
**HTML Elements and Tags**
- HTML uses elements made of tags, which are enclosed in angle brackets `< >`. Each element typically has an opening tag and a closing tag, e.g., `<p> ... </p>` ().
- The `<p>` element defines a paragraph, with content inside ().
- Tags can have attributes providing additional information, such as `lang="eng-us"` in `<p lang="eng-us">`, which specifies language details ().
- Attributes are part of the opening tag and include a name and value, separated by `=` and enclosed in quotes ().
**HTML Tag Syntax and Hierarchy**
- Opening tags like `<p>` start elements, and closing tags like `</p>` end them (<chunk>diQW0_c</chunk>).
- Tags can contain other tags, creating nested structures, for example, lists within list items ().
- HTML elements include headings (`<h1>` to `<h6>`), which define sections and hierarchy, with `<h1>` being the main heading and `<h2>` subheadings ().
- The structure of a webpage is often organized hierarchically with headings and subheadings to improve readability and navigation ().
**Content Structuring Elements**
- Paragraphs are created with `<p>` tags, encapsulating sentences into coherent units ().
- Text can be styled with `<b>` for bold and `<i>` for italics, which add emphasis or denote specific terms (, ).
- Lists are used to organize content:
- Ordered lists `<ol>` with `<li>` items for sequential steps ().
- Unordered lists `<ul>` with `<li>` items for bullet points ().
- Nested lists can be created by placing a list `<ul>` or `<ol>` inside an `<li>` (<chunk> B1bi_c8</chunk>).
**Links and Navigation**
- Links are created with the `<a>` element, which includes the `href` attribute specifying the destination URL ().
- The clickable text is placed between `<a>` and `</a>`, e.g., `<a href="http://www.imdb.com">IMDB</a>`.
- Links can point to external sites (absolute URLs) or internal sections of the same page (relative URLs) ().
- Links are styled by default in blue with underline but can be customized with CSS ().
**Summary**
- Web pages are built with HTML, which structures content hierarchically using tags, attributes, and nested elements ().
- Following web standards ensures accessibility, compatibility, and easier maintenance ().
- The process of web communication involves DNS resolution, server requests, and data transfer, enabling the webpage to load in the browser ().
- Proper use of headings, paragraphs, lists, and links creates well-organized, accessible web content ().
Week 04
decide problematic website designs (pick 2 and update in google sheets)
decide problematic website designs (pick 2 and update in google sheets)
analyse (refer google classroom)
at least 3 sets of wireframes (1 main, 2 content)
Week 05
ID attribute ()
- link diff sec in the website (use href and #)
- id value must be unique
-
class
- group html element
block element (h1, p, ul, li), start at new row
inline element (block in same line) (b, i, em, ......) having in the same line
Intro to CSS
2 part of css: selector,
cascading: carry forward
selector
curly bracket use in css
declaration is under selection, sit inside the curly bracket
<link>
external css and embedded css (internal)
1 property, 1 value for each attribute in css
Week 06
will be talking about css
universal selector (*): select all elements including id and class
css is nested (elements nested)
pseudo-class selector should follow a sequence: link (normal condition), visited (show changes in visited site), hover (cursor on it), active (press button)
pseudo-element selector
in-line element: not in a new line
block element: come in new line
pseudo-class selector: usually in link
Week 08
position property
position static is by default
position relative = can apply top right bottom left property, will not affect position
position absolute = element will position relative to the nearest ancestor
position fixed = will not follow the document flow, floating
- navigation bar = add scroll padding: top
Comments
Post a Comment