Interactive Design / Exercises

23/08/2021 - 13/09/2021 / Week 1 - Week 4

Ngu Kah Shin / 0347666

Interactive Design / B' in Creative Media / Taylor's Design School

Exercises- HTML Document Development & HTML, CSS Document Development, CSS Layout Model

LECTURES

Week 1:

Our class started off with Mr Mike going through a list of our names, taking his time to ask each of us what we preferred to be called. This shows how attentive and conscientious he is as a lecturer! However, he did mention that he is only taking over for a few weeks due to the absence of our actual lecturer... really hoping Mr Mike can be one of the lecturers of my electives in the next 2 years.

The class was rather intriguing. I was totally absorbed by the topics and fancy terms like HTML, TLD, frontend development, landing pages, etc. Attached below are my notes, handwritten during the class session but can only be understood by myself due to my messy scrawls. I like to scribble down during the session itself, and then later go through it again, transcribing them out. This really helps me with surely absorbing and digesting all the knowledge taught.

Fig 1.1 Handwritten notes 27/08/2021

Fig 1.2 Slides by Mr Mike (27/08/2021)

Webpage- a document with text, images, sound and video, accessible on the web by using a web browser

Single webpage sites- landing page and parallax website. Parallax websites are sites where users scroll down a webpage, different layers of content or backgrounds move at different speeds, and this creates an optical illusion.

Some of my personal favourite parallax websites:

Web browsers- a programme that gets you to websites on the internet. Information is transferred to us using Hypertext Transfer Protocol (HTTP). Some examples of web browsers are Chrome, Firefox and Safari

Website- a set of webpages that are stored or hosted on web servers. Websites are designed for specific purposes such as e-commerce, portfolio, branding etc. and have domain names to identify them.

Differences of HTML, CSS and Javascript is explained well here.

Fig 1.3 Differences of HTML, CSS & Javascript (27/08/2021)

Differences between a website and a landing page are websites generally have navigation bars, detailed descriptions of all tools and give out thorough information for the user whereas a landing page is built to drive traffic for a specific marketing campaign goal sign-up process. There are no distractions, minimal options. Simply to inform and get the user to take the single action noted.

Fig 1.4 Websites vs landing page (27/08/2021)

Static Websites VS Dynamic Websites

Static Website	Dynamic Website
Consists of fixed number of pre-rendered webpages	Content is generated quickly and changes regularly.
The content is only changed when a web developer publishes and updates the file by sending it to the webserver.	The page contains "server-side" code which allows the server to generate unique content when the page is loaded.
HTML code is used to develop website	Server-side languages such as PHP, ASP etc. are used to develop website.
Sends exactly the same response for every request.	May generate different HTML for each request.
Flexibility is the main advantage of static website.	Content Management System (CMS) is the main advantage of dynamic website.
Examples: Portfolios, informational websites static VS dynamic explanation	Examples: writing blogs, e-commerce sites, calendar, to-do sites Facebook, Lazada, Quora

Domain and web hosting- the internet address and landlord!

Fig 1.5 Parts of URL (27/08/2021)

Fig 1.6 Video on web hosting by Ray DelVecchio (27/08/2021)

Frontend VS Backend VS Fullstack development- the presenter, operator and all-rounder!

Frontend development of a website or application is the part that is built to interact with users directly. Frontend creation involves CSS, HTML and JavaScript.

Backend development addresses server-side web application logic and integration. Backend developers write code to help a database and application communicate. Essentially, a backend developer handles what we don't see which includes servers, databases, and applications.

Fullstack development includes both (client-side) and backend (server-side) development.

Week 2:

Mr Mike covered a bunch of new topics like Web Standards and HTML Scripting.

Fig 2.1 Slides by Mr Mike (03/09/2021)

World Wide Web- An information ecosystem, a way of accessing information through the medium of the internet.

The internet- A networking infrastructure that connects devices together. (connects 1 server to another)

Web Standards were introduced to stick to a standardized way of doing things, where cross-compatibility is obtainable for Web Developers without the need to build multiple versions of the same website.

• Keeping the web free and accessible to all

• Helping make source code simpler; reducing development

and maintenance time

• Allowing for backward compatibility

• Helping maintain better Search Engine Optimization

• Creating a pool of common knowledge

Standards are decided by “Standards Development Organisations” or SDOs:

• Internet Engineering Task Force (IETF)

• World Wide Web Consortium (W3C)

• WHATWG

• ECMA TC39

• Web Standards Project (WaSP)

HTML SCRIPTING

<DOCTYPE! html>: This is the document type declaration (not technically a tag). It declares a document as being an HTML document. The doctype declaration is not case-sensitive.

<html>: The html element is the base container for everything else on your webpage. Every other element you add will go inside of this one.

<head>: The head tag contains the “behind the scenes” elements for a webpage. Elements within the head aren’t visible on the front-end of a webpage. HTML elements used inside the <head> element include:

<style>

<title>

<base>

<meta>

<link>

<body>: The body element is where you will put all of the actual content of your website.

<p>: Only the <p> element will actually show up as something you can see on the page. The others are

what is often referred to as boilerplate code, meaning that they appear unchanged in just about every

HTML document because your browser requires them.

The heading elements

Like the paragraph element, heading elements are also used to display text on the screen. Heading elements come in six default levels: <h1> up to <h6>

Nesting HTML Tags

Think of HTML tags as boxes that hold your content. Your content can include text, images, and related media. HTML tags are the boxes around the content. Sometimes, you need to places boxes inside of other boxes. Those "inner" boxes are nested inside of others. HTML elements can be nested (this means that elements can contain other elements). Explained well here.

Bold :<b> element makes its contents bold.

Italics: <i> element italicizes its contents.

Underline: <u> element underlines its contents.

Unordered lists- the browser to display each list item with a bullet point by default.

<ul>

<li>This is a second list item.</li>

<li>Three list items right here.</li>

</ul>

Ordered lists- your browser counts the list items inside and automatically adds numbers next to them.

<ol>

<li>This is a second list item.</li>

<li>Three list items right here.</li>

</ol>

Links

<a href="https://university.taylors.edu.my/en.html">Click me</a>

<a href=" https://university.taylors.edu.my/en.html "target="_blank">TU Website</a>

Image

Week 3:

This week we had Mr Ahmad Tarmizi come in and recapped what Mr Mike has taught us in the last 2 weeks. He covered the topics like HTML Tips, Website Layouts. Mr Ahmad asked us if we had any questions several times but I did not have any as everything was still new to me. I needed time to digest and do more readings by myself before I can come up with any sensible questions. He also told us to have Dreamweaver ready for next week's class when we start CSS.

Fig 3.1 Slides by Mr Ahmad Tarmizi (10/09/2021)

HTML TIPS

Proper Page Structure

• Only one pair of <head></head> and <body></body> for every web page.

• All contents must reside within <body></body> section.

Folder Structure

• First web page must be rename as index.html

• Recommended to have no space in filename.

• Each supported files (images, css and javascript files) in its own folder.

Code Structure

• If image folder name is images, then the filename in HTML code must put folder name first, slash, then the actual filename.

HTTPS is HTTP with encryption. HTTPS is more secure than HTTP.

IMAGE FORMATS

Explained well here.

Image formats	JPG/ JPEG (Joint Photographic Experts Group)	GIF (Graphics Interchange Format)	PNG (Portable Network Graphics)	SVG (Scalable Vector Graphics)
Created in	1986	1987	1995	2001
Perks	- Quick to upload or download - support up to 16 million colours	Able to upload or download over slow connections	- support up to 16 million colours -ideal for detailed graphics, or when you’re working with files that are still being edited	-image remains crisp and clear at any resolution or size because VG is drawn from mathematically
Lossy or Lossless	Yes (When the data is compressed, unnecessary information is deleted from the file permanently)	Lossless. Retains all the data contained in the file, but they are small because they only accommodate up to 256 indexed colours.	Lossless. Do not lose any data during compression.	Lossless but tends to be fairly large in size
Transparency	No	No	Yes	Yes
Animated	No	Yes	Yes	Yes

WEBSITE LAYOUTS

Multiple columns are created by using <div> or <table> elements.
CSS is used to position elements, or to create backgrounds or a colourful look for the pages.

Fig 3.2 Website layouts

<header> - Defines a header for a document or a section

<nav> - Defines a set of navigation links

<section> - Defines a section in a document

<article> - Defines an independent, self-contained content

<aside> - Defines content aside from the content (like a sidebar)

<footer> - Defines a footer for a document or a section

<details> - Defines additional details that the user can open and close on demand

<summary> - Defines a heading for the <details> element

<div> defines a division or a section in an HTML document.

used as a container for HTML elements - which is then styled with CSS or manipulated with JavaScript.
easily styled by using the class or id attribute.
Any sort of content can be put inside the <div> tag!
By default, browsers always place a line break before and after the <div> element.

Week 4:

INSTRUCTIONS

HTML Link:

EXERCISES:

Week 1:

Our task for this week was to choose any 5 of:

1. Business Websites
2. Blogs
3. eCommerce Websites
4. Portfolios
5. Event Websites
6. Online Forums
7. Personal Websites
8. Membership Websites
9. Nonprofit Websites
10. Informational Websites

explain why do you think they are such websites
what are their unique features that tell you what kind of website they are
explain what are their functions
what kind of content do they hold
show a popular example for each

Fig 4.1 Type of slides PDF (28/08/2021)

Week 2:

This week were required to create a website after Mr Mike ran through the basics of HTML. We were also instructed to go on w3schools to expand our knowledge after class hours. For the first exercise, we used Notepad to craft our HTML script.

As this was a non-serious exercise, I decided to use the Bee Movie's script as my website content. We were told to use the codes below:

<DOCTYPE! HTML>
<HTML>
<head>
<body>
<p>
<h1>, <h2> ... <h6>
<ul>, <ol>

Fig 5.1 HTML Scripting Exercise 1 - .txt format, Week 2 (3/9/2021)

HTML Link:

Fig 5.2 HTML Scripting Exercise 1 - .pdf format Week 2 (3/9/2021)

HTML Link:

As for Exercise 2, Mr Mike provided an article on Among Us, in which we were to follow the format and create a simple HTML website.

Fig 5.3 HTML Scripting Exercise 2 - .txt format Week 2 (3/9/2021)

HTML Link:

Fig 5.4 HTML Scripting Exercise 2 - .pdf format Week 2 (3/9/2021)

HTML Link:

Week 3:

Add <div> tags to our Among Us HTML script, which helps to group block-elements to format them with CSS

Fig 6.1 HTML Scripting Exercise3 - .txt format Week 3 (12/9/2021)

HTML Link:

Looking for something?

Ellis Ngu Kah Shin [0347666]

Interactive Design / Exercises

Comments

Post a Comment