Week 1 - Week 7 : 28 Mar 2022 - 15 May 2022
Tan Yi Yun 0345559
Bachelor of Design (Hons) in Creative Media
Exercises
Attributes tell us more about the elements
Separate the attributes and names using spacebar.
CSS declaration sit inside curly brackets and each is made up of 2 parts : a property and a value, separated by a colon. You can specify several properties in one declarations each separated by a semi-colon.
External CSS
Internal CSS
Submission link :
Tan Yi Yun 0345559
Bachelor of Design (Hons) in Creative Media
Exercises
LECTURE
Week 1
In the first class we were briefed about the module outline and what to
expect in the following weeks. This module introduces us the concepts and
practice of web design and new media with digital tools for the Internet.
Mr. Shamsul said it will be a very technical module that requires practical
experience.
Landing page
Sometimes known as "lead capture page", is a single web page that appears
in response to clicking on a search result. (Home page = landing page)
We were asked to go to any website, then right click and choose
Inspect.
|
| Figure 1.1, Inspect web element in Chrome, Week 1 (29/3/2022) |
The file name should be named accordingly before uploading into Netlify.
For example, the first page should be named as "index.html". The application
we are going to use is Adobe Dreamweaver (or Visual Studio Code).
Most of the websites don't use "home" in the navigation bar, instead, they
use their logo.
What is a website
- Web document in the Internet
- One page or more
- With intended purpose (socialise, showcase artwork, informative)
Different types of websites
There are many different types of websites in the Internet
- Informational website
Informative websites online are utilized to let people know about a place,
product, object, thought, or person.
e.g. Wikipedia, TED
- Corporate website
A website that is used to officially represent a brand on the Internet, and
which is often used as the landing page for advertising content.
e.g. Pixar's website :
https://www.pixar.com/
- Portfolio website
A portfolio website provides professional information about an individual
or a company and presents a showcase of their work.
e.g. Behance
- Brochure website
The brochure website is an online site of your business that contains only
a few pages and the main information people need to know.
e.g. Warefence
- Entertainment website
An entertainment website is a website that focuses on creating high quality
content that is entertaining for the target audience.
e.g. YouTube. Netflix
There are many different types of websites in the Internet :
- Personal website
- Educational website
- E-commerce website
- Non-profit website
Week 2
Web Design and New Media
Web standards
We accessed the Web using
- early days of the Web : keyboard, mouse, monitor
- today : phones, pocket mobile devices, tablet computers with touch screen
interfaces, audible interfaces
Hardware and software issue
- growing
variety of browsers that
people can choose from (Microsoft Internet Explorer, Mozilla Firefox, Google
Chrome, Opera, Safari and others)
-
variety of operating systems
(Windows, Mac OS and Linux)
-
variety of screen resolutions
(640 x 480 pixels to 1680 x 1050 pixels and beyond)
Why Web Standards?
- when developers follow the Web standards, the development is simplified
and easier to understand
- ensure all browsers display your Web site properly
How the Web works
- When you visit a website, the web server hosting that site could be
anywhere in the world
- In order for you to find the location of the web server, your browser
will first connect to a Domain Name System (DNS) server.
|
| Figure 1.2, How the Web works, Week 2 (5/4/2022) |
Structure of a Web Page
- Understanding structure
- Learning about markup
- Tags and elements
HTML describes the structure of pages
In the browser window you can see a Web page that features exactly the same
content as the Word document. To describe the structure of a Web page, we
add code to the words we want to appear on the page.
The HTML code is made up of characters that live inside angled brackets
<>
These are called HTML elements. Elements are usually made up of 2 tags : an
opening tag and a closing tag.
<element>Information</element>
|
| Figure 1.3, Closer look of an opening tag, Week 3 (5/4/2022) |
|
|
Figure 1.4, Closer look of a closing tag, Week 3 (5/4/2022) |
Attributes provide additional information about the contents of an element.
They appear on the opening tag of the element and are made up of two parts :
a name and a
value, separated by an equals sign.
|
|
Figure 1.5, Attributes, Week 3 (5/4/2022) |
|
| Figure 1.6, Body, head & title, Week 3 (5/4/2022) |
Week 3
Adding image in HTML
<img src="url">
src attributes specify the location of the image. (can link to the file
name in your computer or online image)
<img src="img_flower.jpeg" alt="Flowers in Denmark">
alt attribute is added to describe the image.
In Dreamweaver,
Window/File -> Manage sites and choose the folder you are working
on
choose Insert/HTML/Image.
ID attribute
- Giving an element a unique identity allows you to style it differently
from any other instance of the same element of the page
<a href="#name">
<h2 id="name">NAME</h2>
Week 4
UI vs UX
Introduction to CSS
CSS allows you to create rules that specify how the content of an element should appear. CSS works by associating rules with HTML elements.
CSS rule contains 2 parts : a selector and a declaration
 | |
|
 | |
|
<link>
- an HTML page can use more than one CSS style sheet
- to do this it could have a <link> element for every CSS file it uses
Internal CSS
<style>
- can include CSS rules within an HTML page by placing them inside a <style> element, which usually sits inside the <head> element of the page.
- The <style> element should use the type attribute to indicate that the styles are specified in CSS
- Value should be text/css
Week 5
<head>
<link rel="preconnect"
href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com"
crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Concert+One&family=Roboto:wght@500&display=swap"
rel="stylesheet">
<style type="text/css">
h2 {
text-align: centre;
color: #colourcode;
font-family:'Alfa Slab One', cursive;
}
</style>
</head>
*everything you put in your <head> will NOT appear in the
website, while <body> the text MUST appear in the website
INSTRUCTIONS
CLASS ACTIVITY
Week 1
Basic Site Evaluation
We are to begin considering what makes a high-quality website and
explore questions such as these :
- Why do you feel that some websites are good?
- Why do you feel that some websites are not so good?
- Who is the target audience for a particular site?
- How might website quality be judged differently across different
audiences?
- Are there some qualities of websites that all audiences would agree
are good? What are these qualities?
Visit these websites :
Browse the web and choose 3 websites that are good and 3 websites
that are bad. Comment on the site's design and content. What is the
eye drawn to immediately? What seems to be the main purpose of the
site? Is the purpose clear?
Basic site evaluation, Week 1 (29/3/2022)
Week 2
We use TextEdit (Mac users) or Notepad (Windows users) to play with the
basic HTML.
<h1>Heading 1</h1>
<h2>sub-headings</h2>
<title>Title to show in the tab bar</title>
<head></head> (usually find <title> element inside the
<head> element
<i>Itallic</i>
<b>Bold</b>
<u>Underline</u>
<p>paragraph</p>
<ol>
<li>no.1</li>
<li>no.2</li>
<li>no.3</li>
</ol>
<ul>
<li>bullet point 1</li>
<li>bullet point 2</li>
<li>bullet point 3</li>
<ul>
<li>nested list</li>
</ul>
</ul>
Hyperlink
<a> is anchor
href is hyperlink reference
target="_blank" means open website in new tab
title="tooltip" means the tooltip when hovering
<a href="link" target="_blank"> THE TEXT</a>
alt is alternate word, for keyword search in search engine
Example :
<a href="https://en.wikipedia.org/wiki/Nasi_lemak" target="_blank"
title="What is Nasi Lemak" alt="Nasi Lemak">Nasi
Lemak</a>
|
| Figure 3.1, Links, Week 2 (5/4/2022) |
|
| Figure 3.2, Notepad Week 2 (5/4/2022) |
EXERCISE 1 / HTML and CSS Document Development
We are required to create a web document based on the content given. For
a start, we need to create the document using Text Edit or Notepad as
shown in class. Remember to name the file as index.html and save the file
in a folder name Exercise One. After we have completed the task, we are required to upload the web
document to a web hosting (Netlify).
Content
The given content, Week 2 (7/4/2022)
Notepad
|
| Figure 3.3, Transporting the content from word document to Notepad, Week 2 (10/4/2022) |
Netlify
Firstly register a free account. Then create a new site, choose deploy
manually and upload the entire folder in. Remember the file name must be
index.html.
|
|
Figure 3.4, Uploaded on Netlify, Week 3 (12/4/2022) |
Submission link :
We also learned to add images into the same site, but we didn't upload onto Netlify.
|
|
Figure 3.5, Inserted image, Week 3 (12/4/2022) |
EXERCISE 2 / CSS Layout
We are required to create a single html page that contains the content given. Images are provided to be inserted into the required sections. In each main sections, id attribute is included that will be later used as an anchor to be linked from the navigation (in the first part of the content). After completing the task, upload it to Netlify and submit the link in Google Classroom.
 |
| Figure 3.6, Images, Week 3 (17/4/2022) |
I used Dreamweaver to complete the task.
 |
| Figure 3.7, Code in Dreamweaver, Week 3 (17/4/2022) |
After the submission, we learned how to change background colour and typeface.
 | |
|
 |
| Figure 3.9, Added border and changed typeface, Week 4 (19/4/2022) |
FEEDBACK
Feedback was given during class and problems were fixed immediately.
REFLECTION
This is a very new experience for me because I never learn coding before. I think HTML and CSS are easier than I thought. Although I do faced some issues during the process, Mr. Shamsul has helped a lot in fixing my errors. The biggest issue I face is there are a lot of terms like "id attribute" "style" to memorise/familiar with.