Professional Documents
Culture Documents
SS1 HTML&CSS PDF
SS1 HTML&CSS PDF
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.
Contents
BASIC TAGS
The Table below shows the list of tags which are required for writing the basic HTML codes
1
Semester 1, 2020
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.
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
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>.
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
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
6
Semester 1, 2020
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.
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.
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.
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
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’
10
Semester 1, 2020
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.
CSS Specificity: a rule used by browsers to apply different priorities to different CSS selectors.
1. ID (Highest priority)
2. Class
3. Element
!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.
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.
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
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.
https://tomkenny.design/articles/the-principles-of-good-web-design-part-2-navigation/
CONTENT
Paying attention to how your messaging interacts with the design.
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.
<Bad Example>
Source: https://webdesignledger.com/worst-websites-ever/
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
13
Semester 1, 2020
14