Interactive Design - Exercise 2
INTERACTIVE DESIGN - Exercise 2
|| Yang Shumeng 0378848
|| Interactive Design / Bachelor of Design (Honours) in Creative Media
|| Interactive Design / Exercise 2
Lecture 1: Web Fundamentals
1. Web Standards
Today, people access the internet through a wide range of devices—computers, smartphones, tablets, and even voice-activated systems.
To ensure that websites display correctly and remain accessible across all browsers and operating systems, developers follow web standards.
These standards are defined by the World Wide Web Consortium (W3C) and include:
-
HTML (HyperText Markup Language): defines the structure of a web page.
-
CSS (Cascading Style Sheets): controls the visual presentation and layout.
Following these standards helps achieve consistency, accessibility, and simplified development.
2. How the Web Works
When you type a web address (URL) into your browser:
-
The browser connects to the Domain Name System (DNS) to find the website’s IP address.
-
It then connects to the web server that hosts the site.
-
The server sends the requested web page back to your browser, which displays it for you.
This process happens in seconds and allows users to access websites anywhere in the world.
3. Web Page Structure
A web page is similar to a digital document — it has headings, sections, and paragraphs.
HTML uses tags (enclosed in < >) to define this structure.
Key components include:
-
<head>– contains information about the page (metadata). -
<title>– specifies the page title shown on the browser tab. -
<body>– holds the visible content that users see.
4. Common HTML Elements
Headings:
<h1> to <h6> — used for titles and subtitles, from largest to smallest.
Paragraphs:
<p> — defines a block of text.
Text Formatting:
<b> — bold text.
<i> — italic text.
Lists:
-
Ordered list (numbered):
<ol> -
Unordered list (bulleted):
<ul> -
List item:
<li>
Links:
<a href="URL">Text</a> — creates a clickable hyperlink to another page or section.
Images:
<img src="..." alt="..." title="..."> — displays an image.
-
src: image file path
-
alt: alternative text (for accessibility)
-
title: tooltip description
5. Summary
-
Web standards ensure consistency and accessibility across devices.
-
HTML structures the content, while CSS enhances its appearance.
-
Understanding basic HTML elements helps create clear, user-friendly web pages.
2. Instructions：
3. Process Work：
Assignment Instructions
Objective: Create a single HTML file that serves as a basic "About Me" or personal profile page. This exercise is designed to test your understanding of core HTML document structure and fundamental elements.
Theme: Create one file named index.html. When opened in a web browser, this file must display a simple page about you correctly.
Your index.html file must include the following elements:- Basic Document Structure:Correctly use the <!DOCTYPE html>, <html>, <head>, and <body> tags.
- Page Title:Add a descriptive title inside the <head> using the <title> tag (e.g., "My Awesome Profile").
- Main Heading:Use an <h1> tag for your name or the page's main topic.
- Sub-Heading:Use an <h2> tag to create a section heading (e.g., "My Hobbies" or "Favorites").
- Paragraph Text:Write at least two descriptive paragraphs using the <p> tag.
- Ordered List:Create a numbered list (using <ol> and <li>) with at least three items (e.g., your top 3 favorite books, movies, or foods).
- Unordered List:Create a bulleted list (using <ul> and <li>) with at least three items (e.g., your skills, goals, or contact methods).
Submission Requirement:Submit your e-portfolio link. Attach the HTML file to your e-portfolio.
HTML：Your index.html file must include the following elements:
- Basic Document Structure:Correctly use the <!DOCTYPE html>, <html>, <head>, and <body> tags.
- Page Title:Add a descriptive title inside the <head> using the <title> tag (e.g., "My Awesome Profile").
- Main Heading:Use an <h1> tag for your name or the page's main topic.
- Sub-Heading:Use an <h2> tag to create a section heading (e.g., "My Hobbies" or "Favorites").
- Paragraph Text:Write at least two descriptive paragraphs using the <p> tag.
- Ordered List:Create a numbered list (using <ol> and <li>) with at least three items (e.g., your top 3 favorite books, movies, or foods).
- Unordered List:Create a bulleted list (using <ul> and <li>) with at least three items (e.g., your skills, goals, or contact methods).
Reflection
My first experience with web development proved more intricate than I had expected. I soon realized that true proficiency depends on developing an intuitive grasp of how each segment of code functions and interacts within a page. This project offered me a strong foundational understanding of website construction, sparking my curiosity to explore the field further and refine my skills through continued learning and practice.
评论
发表评论