Interactive Design Exercise 3: HTML and CSS Document Development
27 April 2024- 3 July 2024
NABIL JULIUS DORN (037978)
(INTERACTIVE DESIGN) | Bachelor of Design in Creative Media | Taylor's
University
Exercise 3: HTML and CSS Document Development
Week 6 - 10
List
LECTURES
Week 4
Web standards
Everyone used a keyboard, mouse, and monitor to access the Web in its
early days. Today, people's methods of accessing the Internet are
far more varied. A lot of individuals use their phones or other portable
electronics for this. Instead of using keyboards and mice, a lot of people
use tablet computers with touch screen interfaces. Some people use
auditory interfaces to browse the internet; they may either speak to the
computer or listen to it speak to them.
Speech output is essential for many blind persons, while speech input is
essential for those who are unable to use their hands.
Hardware and software issues:
- Growing variety of browsers that people can choose from.
- People use a variety of operating systems
- People have their computers set to a wide variety of screen resolutions.
Web standards
- There is a high probability that your website will look different to many viewers compared to you.
- Despite these differences, the websites content is the most important part.
- You can ensure websites work across all devices and configurations by developing it according to web standards
- Web standards are the core set of rules for developing websites. Its possible to go against these standards, but in doing so, it increases the likelihood that many viewers wont be able to access your site.
- The central organization responsible for maintaining web standards is the World Wide Web Consortium (W3C)
- W3C has defined many standards including the standard markup languages.
- HTML
- CSS
Why Web Standards?
- To make the internet a better place for developers and visitors
- The development is simplified when following web standards. Its easier to understand another's coding.
- Ensures all browsers will display your website properly
How the web works
- The web server hosting can be done anywhere in the world.
- Your browser needs to first connect to a Domain Name System (DNS) server.
Structure of a webpage
- Understanding structure
- Learning about markup
- Tags and elements
How pages use structure
Using hierarchy of information. Any document will start with a heading,
followed by an introduction of the most important information.
This might be expanded upon under subheadings lower down on the page. Using
a word processor, we separate out the text to give it structure.
HTML describes the structure of pages
The HTML code is made up of characters that live inside angled brackets
< >
These are called HTML elements
Elements 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.
Attributes tell us more about the elements
Provides 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.
<p lang="eng-us">Paragraph in english</p>
Body, Head & Title
<body>
You meet the <body> element in the first example created. Everything
inside this element is shown inside the main browser window.
<head>
Before the <body> element, you will often see a <head> element.
This contain information about the page. You will usually find a
<title> element inside the <head> element.
<title>
The contents of the <title> element are either shown im the top of
the brower (tab bar)
Other elements
When creating a web page, you add tags to the contents of the page (known
as markup). These tags provide extra meaning to allow browsers to show users
the appropriate structure of the page.
Headings
<h1>
HTML has six levels of headings
- <h1> main headings
- <h2> subheadings
- If there are further sections under subheadings then the <h3> element is used and so on.
Paragraph
<p> open paragraph
</p> close paragraph
To created a paragraph, surround the words that make up the paragraph with
an opening <p> tag and a closing </p> tag.
Bold & Italic
<b> open bold
</b> close bold
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.
<i> open italic
</i> close italic
By enclosing words in the tags <i> and </i>, we can make
characters appear italic. The <i> element also represents a
section of text that would be said in a different way from surrounding
content.
There are a lot of occasions where we need to use lists. HTML provides us
with two different types:
Ordered list: Lists where each item in the list is numbered.
Unordered list: List that begins with a bullet point.
<ol>
The ordered list is created with the <ol> element
<li> open list
</li> close list
Each item in the list is placed between an opening <li> tag and a
closing </li> tag
Browser indent list by default.
<ul>
The unordered list is created with the <ul> element
<li> open list
</li> close list
Each item in the list is placed between an opening <li> tag and a
closing </li> tag. Li stands for list item
Browser indent list by default.
Nested lists
<li>
You can put a second list inside an <li> element to create a sub-list
or nested list.
Browsers display nested lists indented further than the parent list.
In nested unordered lists, the browser will usually change the style of the
bullet too.
Links
Links are the defining features of the web because they allow you to move
from one web page to another.
Common 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)
Writing links
<a> open link
</a> close link
Links are created using the <a> element
User can clink on anything between the opening <a> tag and the
closing </a> tag.
Specify which page to link using the href attribute.
Writing links
<a href="http://www.website domain name.com">TITLE</a>
Links to other sites
<a>
The value of the href attributes is the page that you want users to go to
when they clink 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 the URL.
Browsers show links in blue
with an underline by default.
Adding images
<img src="image.jpg" alt="alternative text" title="title of the image"/>
The <img> HTML tag serves the purpose of incorporating the images
into a web page.
In the context of web design, it is important to note that images are not
physically inserted within a web page; instead, they are linked to it. The
<img> tag essentially establishes a designated space for displaying
the referenced image.
It is worth mentioning that the <img> tag itself is void of
content.
When using <img> tag, two essential attributes must be
included.
SRC - This attribute specifies the path to the image
ALT - This attribute provides alternative text for the image, which is
essential for accessibility
TITLE - This attribute provides tool tips of the image in the
browser.
CSS
During this week we started learning CSS with HTML.
Week 7
A CSS selector is the first part of a CSS Rule. It is a pattern of
elements and other terms that tell the browser which HTML elements should
be selected to have the CSS property values inside the rule applied to
them.
{} is used as a style declaration. In this segment we can separate
it into property and value
: to separate style and declaration
; to terminates the style declaration
Week 10
Position
Position: Absolute
Elements with position: absolute; are positioned relative to the nearest ancestor with a position value other than static (usually relative, absolute, or fixed). If no such ancestor exists, the element is positioned relative to t he initial containing block.
.absolute-element {
position: absolute;
top: 50px;
left: 100px;
}
Display: flex - used to override the layout of the HTML outcome.
Block element creates document flow. It is shown vertically. This is the normal document flow
Position property
Used to control the positioning of an element.
Position: Static (default)
Elements with this are positioned in the normal default placement
Position: Relative
Can use the top, right, bottom, and left properties to move it relative to its normal position in the document flow. Other elements on the page will still occupy the original space of the element.
.relative-element {
position: relative;
top: 20px;
left: 10px;
}
INSTRUCTIONS
This is the Module Information Booklet for this module:
TASK
Mr. Shamsul began the class by teaching us the basics of HTML language
(shown in lecture section above). We were then required to make a HTML
page of our own using the web language.
Firstly, open a notepad file in windows.
Then save, the file at a location of choice.
Save the file as a '.html' and set the type as 'All files'.
Once this is done, we used the language taught to make a HTML
Here is an example I made as revision after class today
|
Week 7:
We were required to make our resume using HTML and CSS.
Here is the outcome:
Comments
Post a Comment