Interactive Design Exercise 3: HTML and CSS Development
17 October 2024 -
CHONG CHENG TAO (0371072)
Interactive Design | Bachelor of Design in Creative Media | Taylor's
University
Exercises 3/ HTML and CSS Development
List
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.
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.
Because of this issues, there's a very high probability that the website
will look different in different users' view. Thus, World Wide Web
COnsortium (W3C) is created and include the standard markup langauge
(HTML and CSS).
- HTML: Formating the document
- CSS: The decoration of HTML file
- JavaScript: Control and add dynamic to the document.
Web standards is to ensure that all browsers will display the website
properly.
How the Web works ?
For every website, it need to have a domain name to connect to a Domain Name
System (DNS) server.
Structure of a Web Page
- Understanding structure
- Learning about markup
- Tags and elements
Fig 1.4.1 Web page structure
Fig 1.4.2 Web page structure
HTML Describes the Structure of Pages
The HTML code need to be inside angled brackets <>. These are called
HTML elements. Elements made up of two tags, opening tag and a closing tag.
Fig 1.4.4 Opening tag
Fig 1.4.5 Closing tag
Attributes
Attributes provide additional information about the contents. Sometimes, one
name can include more than one value (seperate by SPACE).
They appear on opening tag and made up of two parts:
- Name
- Value
Fig 1.4.6 Attribute name and value
Body, Head and Title
<body>
- Everything inside this element is shown inside the main browser window
<title>
- Shown in the top of the bbrowser (tab bar)
<head>
- Before the <body> element, there is often a <head> element.
- <title> element usually is inside the <head> element.
Headings
HTML has 6 levels of headings:
- <h1> main headings
- <h2> subheadings
- <h3>, <h4> so on...
Fig 1.4.7 Headings
Paragraph
Opening <p> tag and closing </p> tag make up a paragraph.
Fig 1.4.8 Paragraph
Bold & Italic
Tags <b> and </b> make the character
appear bold.
Fig 1.4.9 Bold and Italic
Tags <i> and </i> make the character
appear italic.
Lists
Ordered list are lists where each item in the list is numbered. List is
for set of steps for a recipe that must be performed in order.
Unordered list are list that begin with a bullet point.
- The ordered list is created with <ol> element.
- The unordered list is created with the <ul> element
- Each item is placed between <li> and </li tag>.
Fig 1.4.10 Ordered list
Fig 1.4.11 Underscored list
A second list can be put inside an <li> element to create a sub-list
or nested list.
Fig 1.4.12 Sub-list & Nested List
Links
Commonly type of links:
- Links from one website to another
- Links to 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)
Link are created using <a> element. Attribute href used to specify the
link.
Fig 1.4.13 Writing Link
Images
The <img> tag is used to incorporating images into a web page. In
web design, the image is not physically inserted within a web page;
instead, they are linked to it.
<img> tag is a voif and solely comprised of attributes, no closing
tag needed.
There are some essential attributes for this tag
- src: Specifies the path to the image
- alt: Provide alternative text for the image, it is essential for accessibbility
- title: Provide tool tip of the image in the browser.
Fig 1.4.14 Adding Image
ID attribute
- Every HTML element can carry the ID attribute to uniquely identify the element.
- No two elements should hav ethe same value for their ID attribute.
- We can style it differently by giving unique identity.
Class attribute
- Every HTML element can carry a class attribute.
- Elements can share the same value or name of class attribute.
- It is used to identify several elements as being different from the other elements on the page.
Both of these attributes does not affect the presentation of an element.
It will change the appearance if there is a CSS rule that indicates.
Block elements
- Block level elements is the element taht will always appear to start on a new line in the browser window.
- Example: <h1>, <p>, <ul> and <li>
Inline elements
- Inline elements always appear to continue on the same line as their neighbouring elements
- Example: <b>, <i>, <em>, <a> and <img>
Horizontal Line
- <hr> to add line across the page.
- <br> to add line break.
*Both of these tags has no closing tag.
Table
- <tr> to add table rolls.
- <td> to add table cells.
Week 5:
Introducing to CSS (Cascading Style Sheet)
In this class, we are instructed to use Dreamweaver of Visual Studio Code
to edit our codes.
Everytime we start a new projet, we need to manage the site.
- Manage Site > New Site > Locate the file > Save
Create a sub folder (images) in the main folder.
Add "height" attribute to addjust the image size.
*Each attribute need to be sepearted by space.
Fig 1.5.1 Adjust height of the images
Alternative to insert image
- In Dreamweaver, click insert to directly insert the image.
Fig 1.5.2 Insert image in Dreamweaver
- In design mode, image can be dragged into the design.
Attributes
- border: Add border to the table.
- colspan: Allow the text to span through different number of coloum.
- "&#" to add special character.
Fig 1.5.3 CSS code format
Font
To use different font in the website, we will need to get embed code of
the font.
Embed code > Place in the <heading> tag in HTML page.
Fig 1.5.4 Embed code from Google Font
External CSS
An external style sheet is used to define the style for many HTML
pages. To use an external style sheet, add a link to it in the
<head> section of each HTML page:
Fig 1.5.5 Tag to link external CSS in HTML
Week 6: *Public Holiday
Week 7
CSS Selectors
Selectors are used to define which elements should receive specific
styles, such as colors, fonts, spacing, and more.
Universal Selectors
-
Select all elements on the page
-
Represented by an asterisk (*).
Element Selectors
- It targets HTML elements by their tag name.
ID Selector
- Targets an element with a specific id attribute.
- IDs must be unique within an HTML document.
- To select an element with a specific ID, use a # symbol followed by the ID name.
Class Selector
- Targets elements with a specific class attribute.
- Multiple elements can share the same class.
- To select elements with a specific class, use a . symbol followed by the class name.
Descendant Selector
- Selects an element that is a descendant of another element.
- Allow to specify a hierarchy of elements to target.
- For example, to style all <a> elements inside a <div> with class "container".
Fig 1.7.1
Attribute Selector
- Selects elements with a specific attribute value.
- It is used to styling elements based on their attributes, such as form inputs.
- Syntax: [attribute=value]
Fig 1.7.2
Child Selector
- Selects elements that are direct children of another element.
- Example: To select only the immediate <li> children of an <ul>:
Fig 1.7.3
Pseudo-class Selector
- Selects elements based on their state or position in relation to other elements.
- Common pseudo-classes includes :hover, :active, :visited, :link, :focus, :nth-child(n).
- ":active" when link is clicked.
Fig 1.7.4
Pseudo-element Selector
- Selects parts of an element rather than the element itself.
- Common pseudo-elements includes ::before and ::after, which are used to add content before or after an element.
Fig 1.7.5
Adjacent Sibling Selector
- Selects an element that is immediately preceded by a specified element.
- Styling an element that directly follows another specific element.
- Syntax: element + adjacent.
Fig 1.7.6
General Sibling Selector
- Selects all elements that are siblings of a specified element.
- Styling all sibling elements that follow a specified element.
- Syntax: element ~ siblings.
Fig 1.7.7
Complex Selector
- (n): Selects the nth child element.
Fig 1.7.8
- (n): Selects the nth child of a specific type among its siblings.
Fig 1.7.9
*float & clear
Netlify
*Naming the html file as index.html
Fig 1.7.10 Netlify
Preview to check the website
Fig 1.7.11 Netlify_Preview
Change site name to rename the website
Week 9
Display in CSS is used to controlling layout. Element has a default display which is usually block or inline.
Block-level Element
- <div> is a standard block-level elements.
- It starts on a new line.
- It stretches out to the left and right as far as it can.
Inline Element
- <span> is the standard inline element.
- It can wrap some text inside a paragraphy withouy dirupting the flow of the paragraph.
*Other display properties: Inline-block, Flex and Grid.
Box Model
- A container or box has theree layers, in order from inside to outside.
- Padding > border > margin.
Fig 1.9.1 Margin, Border and Padding
Flexbox
- Flexbox is used to create responsive and efficient web layouts.
- Flex Containier: The parent element with display: flex.
- display: flex
- flex-direction
- justify-content
- align-items
- Flex Items: The children of the flex container.
Week 10
Position: Static
- Default bahvior of msot HTML elements.
- Not affected by the top, right, bottom, or left properties.
Position: Relative
- Top, right, bottom and left properties are moved to move the element relatives to its normal position in the document.
- Other elements on the page can still occupy the original space of the element.
Position: Abosolute
- Elements are positioned relative to the nearest ancestor with a position value other than static (usually relative, absolute or fixed)
- If there is no ancestor, element is positioned to the initial containing block.
Position: Fixed
- Elements are positioned relative to the viewport.
- Do not move when the page is scrolled.
Position: Sticky
- Eleemnts are initially positioned according to the normal flow of a document.
- However, when element reaches a specified scroll position, it stick and remains fixed on that position.
Additional
- The things we see in screen is called viewport.
- Position property in CSS control the positioning of an element within its containing element.
- Add padding with box-sizing: border-box will maintain the size of block.
- x, y, and z-index. z-index specifics the stack order of the elements.
INSTRUCTIONS
This is the Module Information Booklet for this module:
HTML and CSS Development:
-
HTML & CSS Exercise
- Personal CV Page
HTML & CSS Exercise
In this week, we were instructed to do HTML exercise. We are using
notepad for the first exercise. We are using the tags teached in the
lecture session.
*target"_blank" , it will open a new tab when click on the link.
Fig 2.1 target_blank
Later, we are instructed to use CSS langauge to add font, background
colors and decoration to the exercise websites.
Following are my tryout in this exercises:
Fig 2.2 Profile
Fig 2.3 Table
Fig 2.4 "My Fav Foods"
Fig 2.5 "My Fav Movie"
Fig 2.6 Form Section
Personal CV Page
We will need design and build a personal CV page using basic HTML and CSS.
The aim of this exercise is to learn how to organize information into
sections, practice styling text, and create a clean, professional-looking
page layout.
Following is the instruction and the required content:
Fig 2.7 Instruction for Personal CV Page
1. Wireframe Design
Fig 2.8 Wireframe
2. HTML Development
I organized the HTML to different section:
a) Navigation bar
b) Profile
- Logo
- Occupation / Field of expertise
- Phone number / Email
- Profile Picture
c) About
- (Brief introduction about myself)
d) Education (left column)
- School
- Education details
- Years
e) Skills (right column)
- (Five skills)
f) Software stacks
g) Works
- (Images)
h) Contact
- Forms & buttons
- Social media
Following is the HTML code in PDF
Fig 2.9 HTML code (PDF)
2. CSS Development
Two typefaces are used in this page:
- Inter
- Source Code Pro
Two main colors are used, light color for background color, dark color for text and heading.
- Color: #060606
- Background color: #E7E7DF
Following is the CSS code in PDF
Fig 2.10 CSS code (PDF)
Final Submission
* Problem solving:
Following is some notes for same problem I face during this exercise:
1. Move element using pixel unit (CSS)
- position: relative or absolute;
- top/ button/ left/ right
- margin top/ button/ left/ right
2. Cliakble area of the button is too small (CSS)
- z-index:1; (in button div)
3. Edit image (CSS)
- filter: graysacle (xx%);
- filter: blur (xx%);
4. Change image size while hover (CSS)
- img: { tarnsform: 0.8; }
- img:hover { transform:1; }
- transition: 0.3s ease;
5. Disable horizontal scrolling (CSS)
- Overflow-x: hidden;
6. Image in box (CSS)
- max-width: 100%;
FEEDBACK
Week 7
- Try to use display flex attributes while placing the images.
- Use float: clear; to clear the elements from floating
Comments
Post a Comment