Scribd
Upload
208 views14 pages

SS1 HTML&CSS PDF

The document provides an overview of HTML and CSS for creating webpages. It describes: 1) The basic structure of an HTML document including common tags like <h1>, <p>, <img>, <a>, and <table>. 2) How to add attributes and styles to HTML elements using inline, internal, and external CSS. 3) The syntax and basic selectors of CSS including element, class, and ID selectors.

Uploaded by

Sandip
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
208 views14 pages

SS1 HTML&CSS PDF

The document provides an overview of HTML and CSS for creating webpages. It describes: 1) The basic structure of an HTML document including common tags like <h1>, <p>, <img>, <a>, and <table>. 2) How to add attributes and styles to HTML elements using inline, internal, and external CSS. 3) The syntax and basic selectors of CSS including element, class, and ID selectors.

Uploaded by

Sandip
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 14

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

You might also like