INTERACTIVE DESIGN EXERCISE 3: HTML AND CSS DEVELOPMENT
| 24/09/24-24/12/24
|| Sun Jia Yi / 0370449
|| Interactive Design / Bachelor of Design (Hons) in Creative Media
|| Exercise 3/ HTML and CSS Development
TABLE OF CONTENTS
1. Lectures
2. Instructions
3. Feedback
4. Reflection
LECTURES
Week 4:
- HTML: Formatting the document
- CSS: The decoration of HTML file
- JavaScript: Control and add dynamic to the document
Structure of a Web Page
- Understanding structure
- Learning about markup
- Tags and elements
.png)
Figure 1.1: Web page structure, Week 4
.png)
Figure 1.2: Web page structure, Week 4
HTML Explains How Pages Are Structured
We apply code to the text we wish to see on a web page to
describe its structure.
The angled brackets <> must include the HTML code.
We refer to these as HTML elements. Two tags—an opening
tag and a closing tag—make up the elements.
.png){kind=small}
.png)
Opening tag
.png)
Closing tag
Qualities
Extra details about the contents are provided via
attributes. Multiple values may occasionally be included
in a single name (separated by SPACE).
They are composed of two sections and show up on the
opening tag:
- Name
- Value
.png)
Qualities 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...
.png)
Headings
Paragraph
Opening <p> tag and closing </p> tag
make up a paragraph.
.png)
Paragraph
Bold & Italic
Tags <b> and </b> make the character appear
bold.
.png)
Bold/ Italic
Tags <i> and </i> make the character appear
italic.
Lists
Lists that have each item numbered are known as ordered
lists. A list is a series of instructions for a recipe
that must be followed exactly.
Lists that start with a bullet point are considered to
be out of order.
- The <ol> element is used to generate the ordered list.
- The <ul> element is used to generate the unordered list.
- Between <li> and </li tag> is where each item is located.
.png)
ordered list
.png)
Underscored List
A second list can be put inside an <li>
element to create a sub-list or nested list.
.png)
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.
.png)
Link
Images
For the image part, the<img>tag is used to
incorporating images into a web page. In web or app
design, the image is not physically interested
within a web page, Instead of, they usually linked
in.
<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 accessibilty.
- title: Provide tool tip of the image in the browser.
.png)
Images
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 that 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:
An Overview of Cascading Style Sheets (CSS)
We are told to edit our programs in this lesson
using Visual Studio Code's Dreamweaver.
Every time we begin a new project, site management
is required.
Find the file > Save under Manage Site > New
Site.
In the main folder, create a subfolder called
pictures.
To change the image's size, add the "height"
element.Space must be used to separate each
characteristic.
.png){kind=small}
Adjust the height of the images
border: Add border to the table.
colspan: Allow the text to span through different
number of coloum.
"&#" to add special character.
.png){kind=small}
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.
Embed code form 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:
.png){kind=small}
Tag to Link external CSS in HTML
CSS Selectors
Selectors are used to specify which elements—such as
fonts, colors, spacing, and more—should be given
certain styles.
All-purpose Selectors
Select every element on the page that has an asterisk
(*) next to it.
Selectors of Elements
It uses the tag name of HTML elements to target
them.
ID Selector
An element with a certain id property is targeted by
an ID selector.
IDs in an HTML document ought to be distinct.
Use a # symbol and the ID name to choose an element
with a certain ID.
Class Selector
Elements having a certain class attribute are
targeted by the class selector.
The same class might be shared by several
items.
Use the class name and a. symbol to select
components that belong to a certain class.
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".
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]
Child Selector
Selects elements that are direct children of
another element.
Example: To select only the immediate <li>
children of an <ul>:
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.
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.
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.
Complex Selector
(n): Selects the nth child element.
(n): Selects the nth child of a specific
type among its siblings.
INSTRUCTIONS
This is the Module Information
Booklet for this Module:
HTML & CSS Exercise
We were told to do an HTML exercise this
week. For the first exercise, notepad is
being used. The tags that were taught
during the presentation are what we are
utilizing.
target"_blank"; clicking the link will
open a new tab.
Personal CV Page
We must use basic HTML and CSS to develop
and construct a personal CV page. This
project aims to teach you how to divide
content into parts, practice text style,
and design a neat, polished page
layout.
Following is the instruction and the required content:
Instruction for Personal CV
Page
Wireframe Design
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
CSS Development
Two typefaces are used in this
page:
- Inter, sans-serif
Three main colors are used, dark
color for background color, light
color for text and heading.
- primary-color: #8dccff
- text-color: #8b8a8a
- blackground-color:Black
Following is the CSS code in 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. Clickble area of the button is too small (CSS)
3. Edit image (CSS)
4. Change image size while hover (CSS)
REFLECTION
This is my first experience utilizing the HTML and CSS languages to create a website or project, it has been an interesting and difficult exercise for me. I learned a lot about how a website is constructed and used with various types of decorating. In addition, the practice has improved my problem-solving abilities because I will have to conduct extensive web research in order to resolve a certain issue.
.png)
.png)
Comments
Post a Comment