INTERACTIVE DESIGN / EXERCISES - HTML DOCUMENT DEVELOPMENT & HTML, CSS DOCUMENT DEVELOPMENT, CSS LAYOUT MODEL

03/04/2023 - 01/05/2023 / Week 1- Week 5

Chew Zhi Ern / 0358995

Interactive Design / Bachelor of Design (Honours) in Creative Media / Taylor's University

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

INSTRUCTIONS

LECTURES

Week 1: Introduction to the Module

Mr. Shamsul introduced us to the module material during the first lecture. For this module, we were requested to join the class in Google Classroom where all material and announcements will be posted here. Then, we conducted a group exercise. We have to browse the web from https://www.mwa.my/2021/ or https://www.awwwards.com/ and choose THREE websites that are good and THREE that are bad. Comment on the site's design and content. After completing the research and data collection, each group is given about 10 minutes to present in class.

The following is the relevant information that we have collected:

Figure 1 Excel Sheet in PDF Format

Week 2: Evaluating Websites

What is Usability?

Refers to how effectively, efficiently, and successfully a particular user can utilise a product or design in a certain situation.
It is a part of User Experience (UX) Design and is considered the second level of UX Design.
A design's usability depends on how well its features accommodate users' needs and contexts.
When users first encounter an interface, they should be able to find their way about easily enough to achieve objectives without relying on expert knowledge.
An interface with high usability guides users through its easiest route to achieve its goal.

Key Principle of Usability:

Consistency

Consistency is a key factor in web design for both visual elements and functionality.
Consistency ensures that your website looks coherent and works harmoniously across all its different elements, such as headers, footers, sidebars and navigation bars.
Consistent design is intuitive design.
It includes the consistent navigation system, page layout and menu structure, fonts and typography and branding in web design
Consistency is key for these patterns to be recognized and learned by users. If similar-looking things do not produce a similar output, the user is bound to become frustrated.

Simplicity

The principle is that user interfaces should be “simple” for users.
Simplicity is used loosely to refer to the need to minimize the number of steps involved in a process, to use symbols and terminology that make the interface as obvious as possible, and to make it difficult to make mistakes.
Incorporating simplicity in a design will help design better user interfaces by helping the users achieve their goals faster and more efficiently, all while enjoying a great user experience.

Visibility

Visibility is the basic principle that the more visible an element is, the more likely users will know about them and how to use them. Equally important is the opposite: when something is out of sight, it’s difficult to know about and use.
Users should know, just by looking at an interface, what their options are and how to access them.

Feedback

Feedback communicates the results of any interaction, making it both visible and understandable. Its job is to give the user a signal that they (or the product) have succeeded or failed at performing a task.

Error Prevention

It involves alerting a user when they’re making an error, with the intention to make it easy for them to do whatever it is they are doing without making a mistake. The main reason this principle of error prevention is important is that we humans are prone to- and will always make mistakes.

Common Usability Pitfalls and How to Avoid Them:

Complex Interfaces
Confusing Navigation
Poor Feedback
Inadequate Error Handling

In this class, we were divided into groups to carry out group activities and complete the tasks assigned by the lecturer. Each group was assigned to a scenario in which they need to design a new interface to solve a particular problem or meet a particular user need. We are asked to sketch out our design ideas and create a basic prototype using A4 paper. After finishing, each group will be paired with another group to act as "users" and attempt to complete a task using the product or interface. This activity allows us to identify potential usability issues and gather feedback on the user experience from real users. Usability testing is a critical component of the design process, as it helps us to create products and interfaces that are user-friendly, efficient, and effective.

Scenario:

Our group is tasked with designing a new e-commerce website for a local clothing store.

User need:

Users want to be able to easily browse and purchase clothing items online, with clear product descriptions and images, and a simple checkout process.

Usability principles to consider:

Consistency
Simplicity
Visibility
Error Prevention

Here's the outcome of our group's work:

Group works

Week 3: User Interface

Colours for Web

Why color matters in Web Design?

The most apparent advantage of using the right color combinations in web design is that they help users understand and navigate the site.
Improve visitors’ online experiences.
Enabling to find the information that needs and respond to the Call to Action (CTA).
Plays a significant role in branding and product messaging.
Plays a huge role in customers’ decisions about purchasing a product.
Increase overall brand recognition.

The Colour Wheel

Colour Relationship

Monochrome: Consisting of various tints, shades and saturation of the same color.
Complementary: Based on two colors from opposite sides of the color wheel.
Analogous: Featuring three colors that are next to each other on the color wheel.
Triadic: Using three colors that are at the points of a triangle drawn within the color wheel.

The colour relationship

Hues that contain higher amounts of yellow and red are considered warm colours.

Cool colors contain higher amounts of blue and purple.

Color Warmth

Colour System

CMYK is used in Print Design.
RGB is used for Web & Digital Design.
HEX color system uses a six-digit, three-byte, hexadecimal description of each color.

Colour System

Tints are created by adding white to a color. (increases lightness)
Shades are a mixture of black. (increases darkness)

Tints and Shades

Hue describes the degree of similarity between colors.
Saturation refers to color intensity.
Lightness defines how bright a color is compared to pure white.

Hue, Saturation and Lightness

Contrast is a crucial element of any website, especially when it comes to background color and text.

If the contrast is too low, users are more likely to have trouble differentiating between elements.
Is vital not only for readability but for content hierarchy as well

Color Psychology

Red is a strong, energetic colour. (symbolize many emotions and ideas, both positive and negative.)

Orange is a warm and happy colour. (reminds users of friendliness, enthusiasm, and motivation.)

Yellow is another warm colour. (symbolizes joy, happiness and sunlight.)

Green is a positive and calm colour. (associated with nature, ecology, and renewing energy.)

Blue is a calm and soothing colour. (symbolizes trust and reliability.)

Purple is a relaxing colour. (associated with royalty, luxury, and wealth.)

Pink is a youthful and romantic colour. (reminding users of everlasting love.)

Black has many meanings and can evoke different feelings. (Western cultures: associate it with evil and death; East, symbolizes strength and wisdom.)

White is readability and pairs well with any colour. (creates a feeling of cleanliness and light.)

What are the three basic colors that the monitor transmits?

Red, Green, Blue

How many colors could be referenced by name (e.g., "red") in HTML 4.01?

147

How many different colors are there in the "web-safe" palette?

216

Are the majority of people we refer to as color blind unable to see any color at all? Explain.

No, the majority of people referred to as "color blind" are not completely unable to see any color at all. The human eye has three types of photoreceptors, each of which is responsible for detecting different color wavelengths. Color blindness is a condition that affects a person's ability to distinguish certain colors, typically red and green, or less commonly blue and yellow.

Most people with color blindness can still see some colors, but they have difficulty distinguishing between certain colors, or they may perceive colors differently than people with normal color vision. For example, a person with red-green color blindness may have difficulty distinguishing between shades of red and green and may see some colors as shades of yellow or gray.

Color blindness is a genetic condition that is caused by a defect in the genes that control color vision. It affects about 1 in 12 men and 1 in 200 women of Northern European descent. While there is no cure for color blindness, most people with the condition can still live normal lives with some adjustments, such as using color-coded labels or relying on patterns instead of color to distinguish objects.

According to the WebAIM page on color blindness, what is the key to designing sites that are accessible to people who are color blind?

According to the WebAIM page on color blindness, the key to designing sites that are accessible to people who are color blind is to ensure that color is not the only means of conveying information. This means that important information should also be communicated through text, patterns, or other visual cues, in addition to color.

Web developers can also use high contrast between foreground and background colors to help ensure that text is readable for people with color blindness. In addition, they can avoid using color combinations that are known to be difficult for people with color blindness to distinguish, such as red and green or blue and yellow.

It is also important to note that while designing for color blindness is important, it is just one aspect of creating an accessible website. Web developers should also consider other factors, such as keyboard accessibility, screen reader compatibility, and ensuring that content is structured in a logical and meaningful way.

Week 4: Type For Screen Design

Public Holiday. No Class! (Recorded Lecture in Google Classroom)

Organizing a Website

It is highly recommended to engage in careful planning when embarking on website creation, particularly when determining the specific pages that will be included on the website.
To successfully design a large website: Organize the information logically (users can easily locate the information that's looking for)

Chunking

Dividing the site's content into manageable chunks of information, with all chunks related conceptually to one another.
Content within each chunk can then be arranged hierarchically

The most important topics within a chunk will appear first in a navigational system.

* Before beginning the process of developing a website, some organizations or companies conduct user research to learn how to create an effective website.

Information architecture describes the overall conceptual models and general designs used to plan, structure and assemble a site.
Every website has an information architecture, but information architecture techniques are particularly important to large and complex websites.

Site Structure

When confronted with a new and complex information system, users build mental models.
They use these models to assess relations among topics and to guess where to find things they haven't seen before.
The success of the organization of the website will be determined largely by how well the site's information architecture matches the users' expectations.
A logical, consistently named site organization allows users to make successful predictions about where to find things.
Consistent methods of organizing and displaying information permit users to extend their knowledge from familiar pages to unfamiliar ones.
If mislead users with a structure that is neither logical nor predictable, or constantly uses different or ambiguous terms to describe site features, users will be frustrated by the difficulties of getting around and understanding what have to offer.

The browse functionality of the site

Efficient website design is largely a matter of balancing the relation of the major menu or home page with individual content pages.
The goal is to build a hierarchy of menus and content pages that feels natural to users and doesn't mislead them or interface with their use of the site.
Websites with too shallow an information hierarchy depend on massive menu pages that can degenerate into a confusing laundry list of unrelated information.
Menu schemes can also be too deep, burying information beneath too many layers of menus.

Too shallow a structure forces menus to become too long.
Too deep a structure makes users get frustrated as they dig down through many layers of menus.

If the website is actively growing, the proper balance of menus and content pages is a moving target.
Feedback from users (and analyzing own use of the site) can help to decide if the menu scheme has outlived its usefulness or has weak areas.
Complex document structures require deeper menu hierarchies, but users should never be forced into page after page of menus if direct access is possible.
With a well-balanced, functional hierarchy can offer users menus that provide quick access to information and reflect the organization of the site.

Site structural themes

Websites are built around basic structural themes that both form and reinforce a user's mental model of how ones have organized the content.
These fundamental architectures govern the navigational interface of the website and mold the user's mental models of how the information is organized.
Three essential structures can be used to build a website:

Sequences

The simplest and most familiar way to organize information is to place it in a sequence.
The structure of books, magazines and all other print matter.
Sequential ordering may be chronological, a logical series of topics progressing from the general to the specific, or alphabetical, as in indexes, encyclopedias, and glossaries.
Straight sequences are the most appropriate organization for training or education sites, for example, in which the user is expected to progress through a fixed set of material and the only links are those that support the linear navigation path

Hierarchies

Information hierarchies are the best way to organize the most complex bodies of information.
Websites are usually organized around a single home page, which then links to subtopic menu pages, hierarchical architectures are particularly suited to website organization.
Hierarchical diagrams are very familiar in corporate and institutional life, so most users find this structure easy to understand.
A hierarchical organization also imposes a useful discipline on the own analytical approach to the content, because hierarchies are practical only with well-organized material.
The simplest form of hierarchical site structure is a star or hub-and-spoke, set of pages arrayed off a central home page. The site is essentially a single-tier hierarchy. Navigation tends to be a simple list of subpages, plus a link for the home page.
Most websites adopt some form of multitiered hierarchical or tree architecture. This arrangement of major categories and subcategories has a powerful advantage for complex site organization in that most people are familiar with hierarchical organizations and can readily form mental models of the site structure.
Although hierarchical sites organize their content and pages in a tree of site menus and submenus of the home page, this hierarchy of content subdivisions should not become a navigational straitjacket for the user who wants to jump from one area of the site to another.
Most site navigation interfaces provide global navigation links that allow users to jump from one major site area to another without being forced to back up to a central home page or submenu.
Hierarchies are simple and inevitable in web design. Most content works well in hierarchical structures and users find them easy to understand.

Webs

Site files and directory structure

Site diagrams are also useful when the project moves from planning to web page production.
As the new site is built up in a directory on the web server, the site diagram is often the first place programmers look to gain an understanding of how the site files should be subdivided into directories (folders) on the server.
The pattern of directories and subdirectories of the site files should mirror the major content divisions and structures as shown on the site diagram.
As the site directories and subdirectories are organized on the server, information on the exact names used for major directories and files should be added to the site diagram, so that everyone on the team has a ready current reference to the naming conventions and file locations in the site.
Ideally, the information architecture will be consistently reflected in the actual organization of files and directions in the site structure.

Wireframes

At various points in this conceptual phase, stakeholders, clients and even members of the design team may find it irresistible to launch into specific proposals for the visual design of pages.
In particular, concern about the possible look and feel of the home page is notorious for throwing planning processes off the rails and into detailed discussions of what colors, graphics, or general character the home page should have, long before anyone has given serious thought to the strategic goals, functions, and structure of the site.
Wireframes force teams to stay focused on information architecture and structural design without getting sidetracked by the distraction of the visual layer.
Wireframes are the "rough map" that will eventually be used by graphic and interface designers to create preliminary and final page designs for the site.
Wireframes are rough two-dimensional guides to where the major navigation and content elements of the site might appear on the page.
They bring a consistent modular structure to the various page forms of the site and provide the fundamental layout and navigation structure for the finished templates to come.

A typical page wireframe diagram

Week 5: Imaging for Web Design - Styling The Web
Public Holiday. No Class!

Week 6: Language of The Web Part 1

Web Standards

In the early days of the web, everyone accessed the web using a keyboard, mouse, and monitor.
Today, there is much more variety in the ways people access the Web.
Many people do so on their phones or other pocket mobile devices.
Many people do so on tablet computers with touch screen interfaces instead of keyboards and mice.
Some people access the web through audible interfaces (they talk to the computer, or they listen to the computer talk to them, or both).
Many people who are blind depend on speech output, and people who are unable to use their hands depend on speech input.

Hardware and Software Issue:

Growing variety of browsers that people can choose from, including Microsoft Internet Explorer, Mozilla Firefox, Google Chrome, Opera, Safari and others.
People use a variety of operating systems, including Windows, Mac OS and Linux.
People have their computers set to a wide variety of screen resolutions, from 640 x 480 pixels to 1680 x 1050 pixels and beyond.
With the diversity in the way people access the web, there's a very high probability that the website will look different to many of the visitors than it does to ones.
Despite these differences, the most important part of the website is its content, and all users should be able to access that.
The only way to ensure that websites work across all devices and configurations is to develop in accordance with web standards.
Web standards are the core set of rules for developing websites. It might be possible to develop sites that do not comply with standards, but doing so increases the likelihood that many people will be unable to access the site.
The central organization who is responsible for creating and maintaining web standards is the World Wide Web Consortium (W3C).
The W3C has defined dozens of standards, including the standard markup languages we use to build websites. The standard markup languages we'll be using in this course are:

HTML
CSS

Why web Standards?

To make the internet a better place, for both developers and visitors, it is important that both browsers and web developers follow the web standards.
When developers follow the web standards, the development is simplified, since it is easier for a developer to understand another's coding.
Using web standards will ensure that all browsers will display the website properly, without time-consuming rewrites.

How the web works?

When visiting a website, the web server hosting that site could be anywhere in the world.
In order for one to find the location of the web server, the browser will first connect to a Domain Name System (DNS) server.

When connecting to the web, do so via an ISP. Type a domain name or web address into the browser to visit a site.

eg: www.google.com, www.bbc.co.uk

The computer contacts a network of servers called DNS servers. These act like phone books; they tell the computer the IP address associated with the requested domain name. Every device on the web has a unique IP address; it’s like the telephone number for that computer.
The unique number that the DNS server returns to the computer allows the browser to contact the web server that hosts the website requested. A web server is a computer that is constantly connected to the web and is set up especially to send web pages to users.
The web server then sends the page that is requested back to the web browser.

Structure of a web page

Understanding structure
Learning about markup
Tags and elements

We come across all kinds of documents every day; newspapers, insurance forms, catalogues, etc.
Many web pages act like electronic versions of these documents.
In all kinds of documents, the structure is very important in helping readers to understand the messages we are trying to convey and navigate around the document.

How pages use structure?

The stories read in a newspaper. Each story will have a headline, body copy and images. If the article is a long piece, there may be subheadings that split the story.

Structure helps readers to understand the stories in the articles.
The structure is very similar when a news story is viewed online.

A very different type of document like an insurance form. It has headings for different sections and each section contains a list of questions with areas for the purpose to fill in details or checkboxes to tick.

The structure is very similar online.

The use of headings and subheadings in any document often reflects a hierarchy of information.
Any document will start with a large heading, followed by an introduction or the most important information.
This might be expanded upon under subheadings lower down on the page.
When using a word processor to create a document, we separate out the text to give it structure.
Each topic might have a new paragraph and each section can have a heading to describe what it covers.

HTML describes the structure of pages

In the browser window, 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 and are usually made up of two tags: an opening tag and a closing tag).

<element>Information</element>

Each element tells the browser something about the information that sits between its opening and closing tags.

The Opening Tag

The Closing Tag

Attributes tell us more about the elements

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.

Name

Indicates what kind of extra information is supplied about the element’s content. It should be written lowercase.

Value

The information or setting for the attribute. It should be placed in double quotes. Different attributes can have different values.

Here an attribute called lang is used to indicate the language used in this element. The value of this attribute on this page specifies it is in US English.

Example

Body, Head and Title

Body

We met the <body> element in the first example created.
Everything inside this element is shown inside the main browser window.

Head

Before the <body> element will often see a <head> element.
This contains information about the page. Will usually find a <title> element inside the <head> element.

Title

The contents of the <title> element are either shown at the top of the browser (tab bar).

Other Elements

When creating a web page, we add tags (known as markup) to the contents of the page.
These tags provide extra meaning and allow browsers to show users the appropriate structure for the page.

Headings

HTML has six levels of headings:

<h1> main headings
<h2> subheadings
If there are further sections under the subheadings then the <h3> element is used and so on.

Heading

Paragraph

To create a paragraph, surround the words that make up the paragraph with an opening <p> tag and a closing </p> tag.

Paragraph

Bold & Italic

By enclosing words in the tags <b> and </b> we can make characters appear bold.
The <b> element also represents a section of text that would be presented in a visually different way (for example keyword in a paragraph) although the use of <b> element does not imply any additional meaning.

Bold

By enclosing words in the tags <i> and </i> we can make characters appear in italic.
The <i> element also represents a section of text that would be said in a different way from surrounding content - such as technical terms, names of ships, foreign words, thoughts or other terms that would usually be italicized.

Italic

Lists

Browser indent list by default.
There are lots of occasions when we need to use lists. HTML provides us with two different types:

Ordered List

Created with the <ol> element.
The lists where each item in the list is numbered. The list is for the set of steps for a recipe that must be performed in order.
Each item in the lis is placed between and opening <li> tag and a closing </li> tag (the li stands for list item.)

Ordered Lists

Unordered List

Created with the <ul> element.
The list begins with a bullet point.
Each item in the lis is placed between and opening <li> tag and a closing </li> tag (the li stands for list item.)

Unordered Lists

Nested Lists

Can put a second list inside an <li> element to create a sub-list or nested list.
Browsers display nested lists indented further that the parent list.
In nested unordered lists, the browser will usually change the style of the bullet too.

Nested Lists

Links

Links are the defining features of the web because they allow to move from one web page to another.
Commonly type of links:

Links from one website to another.
Links from one page to another on the same website.
Links from part of a web page to another part of the same page.
Links that open in a new browser window (tab).

Created using the <a> element.
Users can click on anything between the opening<a> tag and the closing </a> tag.
Specify which page to link using the href attribute.

Links

Linking to other sites

Created using the <a> element which has an attribute called 'href'.
The value of the href attributes is the page that want users to go to when they click on the link.
When you link to a different website, the value of the href attribute will be the full web address for the site, also known as an absolute URL.
Browsers show links in blue with an underline by default.

Side Notes for creating the HTML Web Page:

Save the File (File > Save As > Create A Folder: Rename > File Name: index.html > Save)

Always save the first page as index.html

The links that want to be inserted: Must provide the full URL / absolute URL and have to include https:// and the Domain Name

To set the link to open in a new tab (Type after the URL link: target="_blank")
To set the title appears over the images when the mouse pointer point on it (Type after the target: title="Name")

To insert the image (Rename the file: img_NAME > Create a new folder in the original file and rename it: Images > Move the image file to the Images Folder > Refer to the recorded lecture / WEEK 7 notes)

Week 7: Styling the Web Part 1

Images

<img>

Img tag is a single-sided element which does not have a closing tag like other HTML elements.
The tag is considered empty until you add an attribute.

<img src=“URL”>

src attributes specify the location of the image.
eg: <img src=“img_flower.jpeg”>, <img src=“http://stockimages.anylink.com">

<img src=“URL” alt"description">

Alt attribute is added to describe the image.
eg: <img src=“img_flower.jpeg” alt=“Flowers in Denmark”>

<img src=“URL” alt"description" width=“xx” height=“xx”>

Alternatively, could also specify the width and height by adding those attributes.
<img src=“img_flower.jpeg” alt=“Flowers in Denmark” width=“500” height=“350”>

Image Format for Web

Three common image formats for the Web:

JPEG (Joint Photographic Expert Group)

The most common image format used on the Web.
Highly compatible and small size and very little loss of quality.
It is saved using lossy compression.
It is usually used for photos on the Web.

GIF (Graphics Interchange Format)

Uses lossless compression.
You save the image over and over again without losing any data.
It uses an 8-bit lossless format which supports a maximum of 265 colors.
The unique feature of this format is its ability to be animated.
This format is an excellent choice for logos with limited colour images that need to be in small sizes.
It is small in size but not suitable for photos.

PNG (Portable Network Graphics)

It contained a bitmap of indexed colours and uses lossless compression.
It also allows a full range of colour and better compression.
The most used format on the Web.
Support image with transparency.

ID and Class Attribute

ID Attribute

Every HTML element can carry the ID attribute.
It is used to uniquely identify the element from other elements on the page.
It is important that no two elements have the same value for their ID attributes (otherwise the value is no longer unique).
Giving an element a unique identity allows you to style it differently from any other instance of the same element on the page.
Eg: Might want to assign one paragraph within the page a different style from all of the other paragraphs.

Class Attribute

Every HTML element can also carry a class attribute.
Sometimes will want a way to identify several elements as being different from the other elements on the page.
Eg: Might have some paragraphs that contain information that is more important than others and want to distinguish between these elements.
The class attribute on any element can share the same value or name.

* By default, using these attributes does not affect the presentation of an element.

* It will only change its appearance if there is a CSS rule that indicates it should be displayed differently.

Extra Markup

Block Elements

Some elements will always appear to start on a new line in the browser window.
It is known as block level elements.
Eg: <h1>, <p>, <ul> and <li>

Inline Elements

Some elements will always appear to continue on the same line as their neighbouring elements.
It is known as inline elements.
Eg: <b>, <i>, <em>, <a> and <img>

Introduction to CSS

CSS: Cascading Style Sheet

CSS allows to create rules that specify how the content of an element should appear.
Eg: Can set the background of the page as cream, all paragraphs should appear in gray using the Arial typeface, or all level headers should be in a blue, italic, Helvetica typeface.

CSS Style Rules with HTML Elements

CSS works by associating rules with HTML elements.
These rules govern how the content of specified elements should be displayed.
A CSS rule contains two parts:

Selector

Indicate which element the rule applies to.
The same rule can apply to more than one element if separate the element names with commas.

Declaration

Indicate how the elements referred to in the selector should be styled.
Declarations are split into two parts (a property and a value) and are separated by a colon.

CSS Style Rules with HTML Elements

* This rule indicates that all <p> elements should be shown in the Arial typeface.

CSS Properties affect how elements are displayed

CSS declaration sits inside curly brackets
Several properties can be specified in one declaration, each property separated by a semi-colon.
Each is made up of two parts, separated by a colon:

Property

Indicates the aspects of the element that want to change.
For Example: colour, font, width, height and border.

Value

Specify the settings that want to use for the chosen properties.
For example: if want to specify a colour property then the value is the color that want it to be for the elements.

Example

* This rule indicates that all <h1>, <h2> and <h3> elements should be shown in the Arial typeface, in yellow colour.

Method to Employ CSS

(Using External CSS)

<link>

The <link> element can be used in an HTML document to tell the browser where to find the CSS file used to style the page.
It is an empty element and it lives inside the <head> element.
It should use three attributes:

Href: To specify the path to the CSS file.
Type: Specifies the type of document being linked to. The value should be text/CSS.
Rel: Specifies the relationship between the HTML page and the file linked to it. The value should be a stylesheet when linking to a CSS file.

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.
For example, one author uses one CSS to control the presentation (fonts and colours) and a second to control the layout.

<style>

Can also 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.
The value should be text/CSS.
When building a site with more than one page, should use an external CSS stylesheet.

Allow all pages to use the same style rules (rather than repeating them in each page).
Keeps the content separate from how the page looks.
This means that can change the styles used across all pages by altering just one file (rather than each individual page).

* To link the ID Attributes below: Highlight the words in the link > Window > Properties > Link: #thetiltle

Include CSS in the Links Elements

Style attribute: style="the name of the property: the value of the property"

Week 8: Styling the Web Part 2

Independent Learning Week. No Class!

Display and Position in CSS

The Display Property

Display is CSS's most important property for controlling layout.
Every element has a default display value depending on what type of element it is.
The default for most elements is usually:

Block

<div> is the standard block-level element.
A block-level element starts on a new line and stretches out to the left and right as far as it can.
Other common block-level elements are 'p' and 'form'; New in HTML5 are 'header', 'footer', 'section' and more.

Block-Level Element

Inline

<span> is the standard inline element.
An inline element can wrap some text inside a paragraph (<span> text </span>) without disrupting the flow of that paragraph.
The 'a' element is the most common inline element.

Inline Element

Can always override all the displays according to the needs. Although it wouldn't make sense to make an inline div, can use this to customize the display of elements that have particular semantics.
A common example: Making inline 'li' elements for horizontal menus.
Other display properties:

Inline-block
Flex
Grid

Box Model in CSS

Most HTML elements are containers. Consider some of the HTML elements that have been used so far: 'body', 'p', 'h1', 'h2', 'div', 'ul', 'ol' and 'li'.
Each of these is a container or box.
Each box has three layers that surround its content. The layers are in order from inside to outside:

Padding
Border
Margin

The following illustration shows the various layers in the box model.
The size of each of the layers in the box model can be specified using the usual CSS units of measure ('em', '%' and 'px')
For Example, consider the following <p>, which is wrapped inside a <div>.

<div>

<p> This is a very short paragraph. </p>

<div>

Box Model

Can apply the following CSS to the paragraph tag in order to control the size of the padding, border and margin of the paragraph.

1. div{

background-color: red;

padding: 0;

border: 1px solid black;

margin: 0;

}

2. p{

background-color: white;

padding: 1em;

border-width: 10px;

border-style: solid;

border-color: blue;

margin: 10px !important;

}

The reason to include an element in the 'div' tag/element is to create the layout.
Another method to create the layout in CSS is using the position property.

What is the CSS position property?

The CSS position property defines the position of an element in a document. This property works with the left, right, top, bottom and z-index properties to determine the final position of an element on a page.

There are five values the position property can take, which are:

Static

The element is positioned according to the normal flow of the document.
The top, right, bottom, left and z-index properties have no effect. This is the default value.

Relative

The element is positioned according to the normal flow of the document, and then offset relative to itself based on the value of top, right, bottom and left.
The offset doesn't affect the position of any other elements. Thus, the space given for the element in the page layout is the same as if position were static.

Absolute

The element is removed from the normal document flow and no space is created for the element in the page layout.
It is positioned to its closet positioned ancestor, if any; Otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of the top, right, bottom and left.
This value creates a new stacking context when the value of the z-index is not auto. The margins of absolutely positioned boxes do not collapse with other margins.

Fixed

The element is removed from the normal document flow and no space is created for the element in the page layout.
It is positioned relative to the initial containing block established by the viewport, except when one of its ancestors has a transform, perspective, or filter property set to something other than none, or the will-change property is set to transform, in which case that ancestor behaves as the containing block.
(* Note that there are browser inconsistencies with perspective and filter contributing to containing block formation.)
Its final position is determined by the values of the top, right, bottom and left.

Sticky

The element is positioned according to the normal flow of the document and then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor), including table-related elements, based on the values of top, right, bottom and left. The offset does not affect the position of any other elements.

*Side Notes: When wanting to input a new element within an element, need to make sure that create a new line in between the opening and closing tag.

Week 9: Introduction to Bootstrap

This week, we were introduced to Bootstrap to help us with responsive design and quicker development for our final project.

Week 10: Final Project Consultation

We had our first consultation session for the final project. Mr. Shamsul provided feedback on our chosen industry, identified problems or needs, and initial research findings.

Week 11: Final Project Consultation

This week’s consultation focused on our website concepts and site maps. We shared our wireframes and received guidance on layout and functionality.

Week 12: Final Project Consultation

In this session, we discussed our progress on the website development. Mr. Shamsul reviewed our HTML and CSS implementations, offering advice on improving design and interactivity.

Week 13: Final Project Submission - Final Project

We submitted our final project websites. Each website was checked for completeness, responsiveness, and how well it addressed the identified problem or need.

Week 14: Final Project Submission - Portfolio / Eportfolio

We compiled and submitted our portfolios, including our final project and other works from the semester.

EXERCISES

Task 1: Web Analysis

Instructions:

Choose TWO (2) websites from the link given. Review the website that have selected carefully, taking note of its design, layout, content, and functionality. Identify the strengths and weaknesses of the website, and consider how they impact the user experience.

Write a brief report summarizing your findings and recommendations.

What To Have in The Analysis:

Consider the purpose and goals of the website, and evaluate whether they are effectively communicated to the user.
Evaluate the visual design and layout of the website, including its use of color, typography, and imagery.
Consider the functionality and usability of the website, including its navigation, forms, and interactive elements.
Evaluate the quality and relevance of the website's content, including its accuracy, clarity, and organization.
Consider the website's performance, including its load times, responsiveness, and compatibility with different devices and browsers.

Deliverables:

Write a brief report summarizing in not more than 500 words. You can include a screen capture of each section or page of the website to explain.

Web Analysis Report - PDF Format

Task 2: Replicate a Website

Instructions:

This task is to replicate TWO (2) existing websites given in the link below to gain a better understanding of their structure. Choose any two from the link given. Follow the dimension of the existing website from the width and height. This exercise will help you develop your design skills using software such as Photoshop or Adobe Illustrator, and gain insights into web design best practices. You can use any image from stock image or free stock icon. The image that you will be using does not have to be an exact image. You may replace it with a similar image. Focus on the layout, type style, and color style. To find similar typefaces/fonts, you can download fonts from Google Fonts.

Free Images:
https://www.pexels.com/

Google Fonts Link:

https://fonts.google.com/

How to Screenshot the whole page of the website?

Right Click > Inspect > Ctrl + Shift + P > Capture Full Size Screenshot
Adobe Illustrator > New File > Web > Common > Place the image

At first, I made the decision to use the 'Wozber' and the 'kinhr' websites for this activity based on the websites that were provided in Google Classroom by Mr. Shamsul. To begin, I imported a screenshot of the landing page into Adobe Illustrator. Then, I visited Google Fonts to look for typefaces that were similar to those used on the website and downloaded them to replace in my replication outcome.

Web 1: https://www.wozber.com/en-us

Alternative Font: Myriad Pro, Oxygen, Heebo, Source Sans Variable

Web 2: https://kinhr.com/

Alternative Font: Myriad Pro, Heebo, Merriweather, STIX Two Text, Inter

Both websites' screenshots are imported into Adobe Illustrator

Add the text and Import the Images

Trace the logo and elements using Pen Tool and Shapes Tool

Adjust the transparency of the image

The outcomes of the website replication exercise:

Web 1: https://www.wozber.com/en

Web 2: https://kinhr.com/

Task 3: HTML and CSS Document Development

In this exercise, the task is to create a personal profile page using HTML. The goal of this exercise is to help us practice our HTML skills and create a webpage that showcases our personal interests.

Instructions:

Think about what you want to include on your profile page. You should include your name, a photo, a brief bio, and some personal interests.

Use HTML tags to structure your content. You should use headings (h1, h2, etc.) and paragraphs (p) to make your content more readable.

Add lists (ul or ol) to showcase your personal interests. For example, you could create a list of your favorite books, movies, or hobbies.

Add links (a) to your profile page. You could link to your social media profiles or to other websites that you find interesting.

Include an image (img) on your profile page. This could be a picture of yourself or something that represents your interests.

Once you have completed your profile page, you can publish it online using a free hosting service like GitHub Pages or Netlify. This will give you a chance to see your webpage live on the web and share it with others.

Upon viewing the pre-recorded lecture, I commenced my creative journey. We were given the option to utilize either Visual Studio Code or Adobe Dreamweaver for the coding aspect of website creation. Opting for Adobe Dreamweaver, I successfully fulfilled my work.

Website Link

Headings, Paragraphs, Lists, Links and Images were added

The process of code editing

The final outcome of the website's appearance

Netify Link

The HTML Code for this exercise

Task 4: CSS Layout

Instructions:

Based on the content provided (text and images), your task is to create a responsive grid layout for a website. The design and alignment should be visually appealing and functional across different screen sizes, allowing for optimal viewing on both desktop and mobile devices. Upon completing the task, upload the exercise to Netlify and submit the link here. You may want to explore media queries for ensuring that your website is responsive and different link styles to improve the usability and aesthetic of the website.

Content Provided

To make the next step easier, I first create a draft of the layout using Adobe XD.

Layout Draft

After that, I begin the coding phase using Adobe Dreamweaver.

HTML

CSS

And this is the result of the web.

The outcome in Full Size

The Outcome of Minimize Size

Mr. Shamsul offers the following suggestions:

Keep all of the photos and columns at the same width so that everything appears consistent.
There are too many shadows and they are too dark; perhaps they should be less opaque or reduce the darkness.

Consequently, I made some adjustments based on the feedback.

The task's finalization is shown here.

HTML Code

CSS Code

The Final Outcome in Full Size

The Final Outcome of Minimize Size

Final Outcome - PDF Format

Search This Blog

Chew Zhi Ern (0358995)

INTERACTIVE DESIGN / EXERCISES - HTML DOCUMENT DEVELOPMENT & HTML, CSS DOCUMENT DEVELOPMENT, CSS LAYOUT MODEL

Comments

Post a Comment

Popular posts from this blog

MAJOR PROJECT / PROJECTS

SONIC DESIGN / FINAL PROJECT - GAME AUDIO

SONIC DESIGN / PROJECT 3 - AUDIO STORYTELLING