SS1 HTML&CSS PDF

Semester 1, 2020
SELF-STUDY 1 HTML
The learning activities in this self-study (a.k.a PRIOR to Tutorial) are designed to consolidate and extend your
understanding of the topics covered in lectures in week 1.
You should complete all activities and questions until the tutorial in week 2.
HTML
HTML stands for Hyper-Text Markup Language which describes the structure and content of web pages using
markup. HTML elements are represented by tags. These tags enable browser to determine the formatting,
layout and other specifications of the HTML webpage.
HTML DOCUMENT STRUCTURE

Defines the document to be HTML5
The root element of an HTML page
Contains the title, metadata or link

to external JavaScript and CSS
Contains the visible page content –

anything within the tags will be
displayed by the browsers main
window
HTML ELEMENTS AND TAGS

The HTML web page is made up of elements which is usually made up of two tags: start tag and end tag and
content. Most of HTML elements have two-sided tags. The end tag always ends with a forward slash (/). HTML
tags are not case sensitive, but lowercase is recommended.
Contents
<p> Hello </p>
Opening tag Closing tag
BASIC TAGS
The Table below shows the list of tags which are required for writing the basic HTML codes
1
Semester 1, 2020
Tag Description Example

h1, …., h6 Heading tag h1 to h6 <h1> Hi </h1>
p Paragraphs (ling changes at the end) <p> Hi </p>
span No line change after span <span> Hi </span> Bye
div Make division between contents <div>….<div>
a Hyperlink <a href = “ link” ></a>
center Move content to centre <center> Hi </center>
br Line break (no closing tag) <br /> or <br>
hr Horizontal line (no closing tag) <hr /> or <hr>
pre Preserve formatting <pre>…<pre>
table Insert table <table><tr><td></td></tr></table>
img Insert image <img src = “ “>
HTML HEADINGS
HTML has six level of headings <h1> to <h6>, each progressively smaller in font size.
<Example>
Output
HTML PARAGRAPHS
HTML paragraphs are defined with the <p> tag.
<Example>
HTML LINKS
<a> is used to create a clickable link to other web documents or resources. The link’s destination is specified in
href attribute.
2
Semester 1, 2020
<example>
HTML IMAGES
HTML images are defined with the <img> tag. The source attribute (src) contains the name, location and
extension of the image file.
HTML ATTRIBUTES
HTML attributes provide additional information about the content. It comes in the form of name and value pairs
such as name = “value” (eg. href = “URL”).
The attributes must be added only to the start tag of the element.
<Example>
Below example specifies the path and size of image file. The image size is specified in pixel: width = “104” means
104 pixels wide.
The alt attribute specifies an alternative text to be used, when an image cannot be displayed.
HTML GLOBAL ATTRIBUTES

HTML global attributes can be used in most of HTML elements. The commonly used global attributes are as
below:
Attribute Description
id A Unique identifier for the element.
class A name of classification, or the names of classifications, to which the element
belongs.
hidden Specifies that the element represents an element that is not yet, or is no longer,
relevant.
lang Specifies the primary language for the contents of the element.
3
Semester 1, 2020
style Specifies CSS decorations that apply to the element – in line CSS
title Determine the title of the element
For more details:
https://www.w3.org/TR/2010/WD-html-markup-20101019/global-attributes.html
HTML METATAGS
HTML lets you specify metadata which is additional important information about a document in a variety of
ways. Metadata will not be displayed on the page but will be machine parsable. It usually specifies page
description, keywords, author of the document, last modified and other meta data that cannot be represented
by other HTML meta-related elements such as <base>, <link>, <script>, <style> or <title>.
<meta> tags always place inside the <head> element.
For more details about metatags : https://www.w3schools.com/tags/tag_meta.asp or

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
HTML TABLES
An HTML table is defined with the <table> tag.
Tag Description
table Beginning and end of table
tr Row of table
th Header of cell
td Data cell
<Example>
4
Semester 1, 2020
FIGURE 1. TABLE WITH BORDER AND COLOR
FIGURE 2. TABLE GENERATED
HTML FORMS
Form can have different types of controls to collect the input-data from users, which are listed below.
• Text input
• Text area
• Radio button
• Checkbox
• Select box
• File selects
• Buttons
• Submit and reset buttons
• Hidden input
5
Semester 1, 2020
FIGURE 3. CODE FOR FORM.HTML
6
Semester 1, 2020
FIGURE 4. OUTPUT OF FORM.HTML
If you are new in the HTML, visit https://www.w3schools.com/html/default.asp
7
Semester 1, 2020
CSS
CSS stands for Cascading Style Sheet. It is a method for applying styles to website. That is, CSS specifies how
HTML elements look and how they are presented. Therefore, you can write HTML code without being concerned
with the presentation. You use CSS to specify how it will be presented within any given context.
THE WAY TO INSERT CSS

INLINE STYLE
We saw the attribute ‘style’, which is used for changing the border of the table (See Figure 1). It is the way to
use style attribute of any HTML element to define style rules.
Below code is an example of ‘inline CSS’, where the styles are defined inside the individual tags.
In the above code, we have one ‘heading’ with font-color as ‘blue’ and text-decoration as underline. Suppose
we want to change the color to red, then we must go to individual ‘h1’ tag and then change the color. This is
easy in this case, but if we have 100 headings in different ‘html’ files, then this process is not very handy.
INTERNAL STYLE SHEET:

It is the way to put your CSS rules into an HTML document using the <style> element. It is placed inside the
<head> tags.
Below code is an example of ‘internal CSS’, where the styles are defined inside the <style> tag and placed
inside the <head> tags.
8
Semester 1, 2020
In the above code, the background color of the web page is white smoke and the all text with <h1> tag in the
web page will be aligned in the center and have a dark green color.
EXTERNAL STYLE SHEET

You define all the style rules within a separate text file and then you can include the file in any HTML
document using <link> element. In this way, we can manage multiple files easily.
The CSS code is saved in the file ‘style.css’. Next we need to import the CSS file into the ‘html’ file a shown in
orange box below.
style.css
9
Semester 1, 2020
CSS SYNTAX
- Selector: an HTML tag at which a style will be applied
- Property: a type of attribute of HTML tag such as color, border, etc
- Value: assigned to properties. For example, color property can have either red or #F1F1F1 etc.
Selector
Declaration
p { font-size: 20px; color: green; }
Property Value Property Value
BASIC CSS SELECTORS

There are three types of selectors in CSS
1) Element: can be selected using it’s name. e.g. ‘p’, ‘div’, and ‘h1’ etc
2) Class: can be selected using ‘.className’ operator. e.g. ‘.myHeading’.
3) ID: can be selected using ‘#idName’. e.g ‘#myPara’
FIGURE 5. CODE OF CSS.HTML
FIGURE 6. CODE OF STYLE.CSS FIGURE 7. OUTPUT OF CSS.HTML
10
Semester 1, 2020
For more about selectors: https://www.w3schools.com/css/css_syntax.asp
HIERARCHY
We will understand the hierarchy of the CSS style. If there are two or more conflicting CSS rules that point to the
same element, the browser follows some rules to determine which one is most specific and therefore wins out.
Cascading order priority
1. Inline style (inside an HTML element) – highest priority

2. External and internal style sheets
3. Browser default
CSS Specificity: a rule used by browsers to apply different priorities to different CSS selectors.
1. ID (Highest priority)
2. Class
3. Element
0/1 0/1 0/1 0/1 0/1
!important
style = “”
id selector
Class, attribute,
pseudo class
selectors
type selector
and pseudo
element
If two CSS has same priority, then CSS rule at the last will be applicable.
For more information about CSS: https://www.w3schools.com/css/default.asp
DESIGN PRINCIPLE
OVERALL LAYOUT AND VISUAL APPEARANCE
Overall look is a crucial component of web design. The overall design should align with your business or your
purposes of building it. It should be simple, familiar, intuitive, clean and accessible to attract your audience
as soon as the page loads.
For more information about layout:
https://tomkenny.design/articles/the-principles-of-good-web-design-part-1-layout/
COLOUR
11
Semester 1, 2020
Colour is important in usability and delivering the overall mood of the website. Colour design is very
subjective and may have a negative effect on usability
For more information about colour:
https://tomkenny.design/articles/the-principles-of-good-web-design-part-3-colour/
NAVIGATION
Navigation simply serves to direct the visitors to the information they desire as quickly as possible.
For more information about navigation:
https://tomkenny.design/articles/the-principles-of-good-web-design-part-2-navigation/
CONTENT
Paying attention to how your messaging interacts with the design.
For more information about content
https://tomkenny.design/articles/the-principles-of-good-web-design-part-4-content/
MOBILE
A responsive template that adapts to various screen sizes or mobile should be activated when the users try
to access your site using non-desktop device such as tablet or phone.
The best examples of mobile website design: https://blog.hubspot.com/marketing/mobile-website-design-

examples
<Bad Example>
Source: https://webdesignledger.com/worst-websites-ever/
For more examples, visit:
12
Semester 1, 2020
https://www.mockplus.com/blog/post/bad-web-design
https://www.interaction-design.org/literature/article/bad-design-vs-good-design-5-examples-we-can-learn-
frombad-design-vs-good-design-5-examples-we-can-learn-from-130706
ACTIVITIES
CREATING YOUR FIRST HTML PAGE
Create HTML page and put some html content into the page
1. Put the title of the web page

2. Put a h1 level heading in the body “Hello World”
3. Put a small paragraph using p tag with style attribute: <p>
4. Put list using list tag
<example>
STUDY ELEMENTS, ATTRIBUTES, VALUE FOR HTML FORM

The table below is the list of control inputs and their attribute. Please complete the below table. Some attributes
and values for input:text are filled as an example. Do some research to find what attributes and values are
available for each control.
13
Semester 1, 2020
Control Attributes Values Description

Input: text type Text, password
Value User-defined Initial value in the area
Name User-defined Name send to server
id User-defined Name send to server
size Number value Width of the text area
pattern User-defined Specify a regular expression
Input: radio
Input: checkbox
Input: button
Text area
Selection box
Remember keep a copy of your work.
14

SS1 HTML&CSS PDF

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

SS1 HTML&CSS PDF

Uploaded by

Copyright:

Available Formats

Semester 1, 2020

HTML DOCUMENT STRUCTURE

Contains the title, metadata or link

Contains the visible page content –

HTML ELEMENTS AND TAGS

<p> Hello </p>

Opening tag Closing tag

Tag Description Example

HTML GLOBAL ATTRIBUTES

For more details:

<meta> tags always place inside the <head> element.

For more details about metatags : https://www.w3schools.com/tags/tag_meta.asp or

FIGURE 1. TABLE WITH BORDER AND COLOR

FIGURE 2. TABLE GENERATED

FIGURE 3. CODE FOR FORM.HTML

FIGURE 4. OUTPUT OF FORM.HTML

If you are new in the HTML, visit https://www.w3schools.com/html/default.asp

THE WAY TO INSERT CSS

INTERNAL STYLE SHEET:

EXTERNAL STYLE SHEET

p { font-size: 20px; color: green; }

Property Value Property Value

BASIC CSS SELECTORS

FIGURE 5. CODE OF CSS.HTML

FIGURE 6. CODE OF STYLE.CSS FIGURE 7. OUTPUT OF CSS.HTML

For more about selectors: https://www.w3schools.com/css/css_syntax.asp

Cascading order priority

1. Inline style (inside an HTML element) – highest priority

0/1 0/1 0/1 0/1 0/1

For more information about CSS: https://www.w3schools.com/css/default.asp

For more information about layout:

For more information about colour:

For more information about navigation:

For more information about content

The best examples of mobile website design: https://blog.hubspot.com/marketing/mobile-website-design-

For more examples, visit:

1. Put the title of the web page

STUDY ELEMENTS, ATTRIBUTES, VALUE FOR HTML FORM

Control Attributes Values Description

Remember keep a copy of your work.

You might also like