Interactive Design / Exercises
23.8.2021 - 24.11.2021 (Week 1 - Week 14)
Lew Se Win / 0347637 /
Bachelor of Design (Hons) in Creative Media
Interactive Design
Exercises
LECTURES
Week 1
Mr. Mike brief us about this module using the MIB provided.
After that, we are introduced to web pages, browsers, and websites.
- Single web page site = parallax sites/ landing page
Web site: a set of webpages
- Stored on a webserver
- Have a specific purpose
- Have domain names
-
3 web technologies
- HTML - structure & meaning to the content
- CSS - to style the website with layout, colours & fonts etc.
- JavaScript - create dynamic & highly Interactive Websites (programming language) - 1st page = landing page/ home page
A website is different from a landing page. The landing page has no distraction, no other option, and the messages are direct and focused. Mr. Mike describes the landing page as a "pushy" salesman and the website as "receptionist".
There are 2 types of websites, which are static and dynamics.
- Fixed number of pre-rendered webpage
- Fixed content & structure
- Same content regardless of who/ where/ browser used
- Written entirely using HTML
- Generates pages in real-time
- Customize what a user experiences based on request/ browser
- Controlled by Content Management System (CMS)
- Unique set of character
- Used in URL
- Access a Domain Name Server (DNS)
- Store/host our site's data (media, formatting, backups, etc.)
- Web hosting company = "landlord" (leasing out server)
- Built to interact with user directly
- UI/UX
- Server side
- Web application logic & integration code to help database
- Servers, database, application
- All-rounder
- Know both Frontend & Backend design and programming
Web Standard
- The world wide web
- Information ecosystem
- Content created
- Passes through a browser
- Initially: text-based (a website block would fit through the majority of the holes)
- Newer browsers developed, new features (more and more difficult to make a block that would pass through each of the browser holes)
- Keeping the web free accessible to all
- Helping make source code simpler (reduce development and maintain time)
- Making the web a more accessible place
- Allowing for backward compatibility and validation
- Helping maintain better SEO
- Create a pool of common knowledge
- HyperText Markup Language
- Combination of Hypertext & Markup Language
- Hypertext = link between the web page
- Markup language =define the text document within tag which defines the structure of web pages
- Make notes for the computer
-
Human-readable
Figure 2.0 HTML element, 3.9.2021
- Internet: networking infrastructure (connects devices together)
- World wide web: way of accessing information through medium of internet
- Contains the essential building-block elements
-
Uses predefined tags
Figure 2.0.1 Elements and tags, 3.9.2021 -
<DOCTYPE!html>: document type declaration
-
<html>: base container
-
<head>: contain the "behind the scenes" elements
-
HTML elements:
- <style>
- <title>
- <base>
- <noscript>
- <script>
- <meta>
- <link> -
<body>: actual content
-
<p>: actually show up as something you can see on page (boiler plate code)
- <h1> through <h6>
- <h1>: the biggest one
- <h6>: pretty small
- <html> & </html> tags contain <body> element
- <body> & </body> tags contain <p> element
- <p> & </p> tags contain some text
- Bold: <b>
- Italics: <i>
- Underline: <u>
-
Unordered lists
- <ul></ul> need to be nested with <li></li> - Ordered lists
- <ol></ol>
- Navigate to new page on a website
- Name & value
- Anchor tag <a></a>
- Attribute name: href
- <img>
- Can be organized in multiple columns using <div> or <table> elements
- <div> layouts and CSS can create flexible layout
-
Division
Figure 3.0 Example of division, 7.9.2021
Figure 3.0.1 Example of division, 7.9.2021
We are required to choose any of the 5 types of websites above and explain why do you think they are such websites. What are their unique features that tells you what kind of website they are. Explain what are their functions, what kind of contents do they hold and show a popular example for each.
Mr. Mike provided us some content that allows us to explore more about HTML page structure in this exercise.
We are assigned to add division into the exercise.
Week 4 - Among Us (CSS)
We are assigned to add style into the html file in previous exercise.
I decided to add the title of 'Among Us' to it.
The colour of the embedded pdf varies. Hence, I decided to include a link to download the HTML and CSS files below.
FEEDBACK
Week 4:
REFLECTION
The exercises provided helped me to have a better understanding of HTML and CSS.
Comments
Post a Comment