IT 111: Introduction to Computing

Module 9:

HTML and CSS

Leading Innovations, Transforming Lives, Building Nation

2

HTML
IT 111: Introduction to Computing
3
Hypertext Markup Language

▸ HTML
-one of the three main components of modern web pages,
along with Cascading Style Sheets(CSS) and JavaScript.
-indicates to the browser what elements should be
included in the webpage
-is a language for specifying how text and graphics appear
on a web page
“
Sample HTML Document

A simple text editor is all you need to learn HTML.

5

Hypertext Markup Language

▸ HTML
▸ is a textual language that includes special markup tags
such as:
<title> Bob’s Diner </title>
▸ The <title>..</title> tag specifies a title for the web page.
▸ HTML code is stored in a simple text file that has either a
.htm or a .html filename extension (e.g., restaurant.html)
 6

Hypertext Markup Language

HTML Basic

▸ <!DOCTYPE> Declaration
▸ represents the document type, and helps
▸ browsers to display web pages correctly.
▸ It must only appear once, at the top of
▸ the page (before any HTML tags).
▸ The <!DOCTYPE> declaration is not case
sensitive.
 7

Hypertext Markup Language

HTML Basic

▸ HTML Title
▸ A title is usually displayed on the top bar of a web browser’s
window when you visit a web site
▸ The title will now be displayed in the main web browser window,
just on the top bar
▸ <title> is the start tag
▸ </title> is the end tag
 8

Hypertext Markup Language

HTML Basic

▸ HTML Headings
▸ HTML headings are titles or subtitles that you want to display
on a webpage.
▸ HTML allows you to create sections in a document using
headings, there are six levels of headings
▸ HTML headings are defined with the <h1> to <h6> tags.
▸ <h1> defines the most important heading. <h6> defines the
least important heading.
 9

Hypertext Markup Language

HTML Basic

▸ HTML Headings
10

Hypertext Markup Language

HTML Basic

▸ HTML Paragraphs
▸ The HTML <p> element defines a
paragraph.
▸ A paragraph always starts on a new
line, and browsers automatically add
some white space (a margin) before
and after a paragraph.
11

Hypertext Markup Language

HTML Attributes
HTML attributes provide additional information about HTML elements.

▸ The href Attribute

▸ The src Attribute
▸ The width and height Attributes
▸ The alt Attribute
▸ The style Attribute
▸ The title Attribute
▸ The lang Attribute
12

Hypertext Markup Language

HTML Attributes > The href Attribute

▸ The <a> tag defines a hyperlink. The href attribute specifies the URL of the page
the link goes to:
13

Hypertext Markup Language

HTML Attributes > The src Attribute

▸ The <img> tag is used to embed an image in an HTML page. The src attribute specifies
the path to the image to be displayed:

HTML Attributes > The width and height Attributes

➢ The <img> tag should also contain the width and height attributes, which specifies the
width and height of the image (in pixels):
14

Hypertext Markup Language

HTML Attributes > The alt Attribute

▸ The required alt attribute for the <img> tag specifies an alternate text for an
image, if the image for some reason cannot be displayed. This can be due to slow
connection, or an error in the src attribute, or if the user uses a screen reader.
15

Hypertext Markup Language

HTML Attributes > The style Attribute

▸ The style attribute is used to add styles to an element, such as

color, font, size, and more.
16

Hypertext Markup Language

HTML Attributes > The title Attribute

▸ The title attribute defines some extra information about an element.

▸ The value of the title attribute will be displayed as a tooltip when you mouse over
the element:
17

Hypertext Markup Language

HTML Attributes > The lang Attribute

▸ declare the language of the Web page.

▸ The following example specifies English as the language:
18

Hypertext Markup Language

HTML Formatting Elements

Formatting elements were designed to display special types of text:

● <b> - Bold text

● <strong> - Important text
● <i> - Italic text
● <em> - Emphasized text
● <mark> - Marked text
● <small> - Smaller text
● <del> - Deleted text
● <ins> - Inserted text
● <sub> - Subscript text
● <sup> - Superscript text
19

Hypertext Markup Language

HTML Quotation and Citation Elements

20

Hypertext Markup Language

HTML Comments
HTML comments are not displayed in the browser, but they can help
document your HTML source code.

You can also hide more than one line, everything between the <!-- and the -->
will be hidden from the display.
21

Hypertext Markup Language

HTML Colors
Color Names
In HTML, a color can be specified by using a color name:

HTML supports 140 standard color names

22

Hypertext Markup Language

HTML Colors
Background Color
You can set the background color for HTML elements:

Text Color
23

Hypertext Markup Language

HTML Colors
Border Color
24

Hypertext Markup Language

HTML Colors
RGB Color Values
In HTML, a color can be specified as an RGB value, using this formula:

rgb(red, green, blue)

● Each parameter (red, green, and blue) defines the intensity of the color with a value
between 0 and 255.
● This means that there are 256 x 256 x 256 = 16777216 possible colors!
25

Hypertext Markup Language

HTML Links
HTML Links - Hyperlinks
● HTML links are hyperlinks.
● You can click on a link and jump to another document.
● When you move the mouse over a link, the mouse arrow will turn into a little hand.

● The most important attribute of the <a> element is the href attribute,
which indicates the link's destination.
26

Hypertext Markup Language

HTML Links
HTML Links - Use an Image as a Link

Button as a Link
27

Hypertext Markup Language

HTML Links
Link Titles
The title attribute specifies extra information about an element. The information is
most often shown as a tooltip text when the mouse moves over the element.
28

Hypertext Markup Language

HTML Links - Different Colors

HTML Link Colors
You can change the link state colors, by using CSS:
29

Hypertext Markup Language

HTML Links - Different Colors

Link Buttons
A link can also be styled as a button, by using CSS:
30

Hypertext Markup Language

HTML Links - Different Colors

HTML Links - Create Bookmarks
Bookmarks can be useful if a web page is very long.

To create a bookmark - first create the bookmark, then add a link to it.
31

Hypertext Markup Language

HTML Images
The <img> tag has two required attributes:

● src - Specifies the path to the image

● alt - Specifies an alternate text for the image
32

Hypertext Markup Language

HTML Images
Background Image on a HTML element
To add a background image on an HTML element, use the HTML style attribute and the CSS
background-image property:
33

Hypertext Markup Language

HTML Images
Background Cover
● If you want the background image to cover the entire
element, you can set the background-size property
to cover.
● Also, to make sure the entire element is always
covered, set the background-attachment property to
fixed:
● This way, the background image will cover the entire
element, with no stretching (the image will keep its
original proportions):
34

Hypertext Markup Language

HTML Tables
HTML tables allow web developers to arrange data into rows and columns.
35

Hypertext Markup Language

HTML Tables
HTML tables allow web developers to arrange
data into rows and columns.
36

Hypertext Markup Language

HTML Table Tags

37

Hypertext Markup Language

HTML Table Borders

● HTML tables can have borders of different
styles and shapes.

Collapsed Table Borders

To avoid having double borders like in the example above,
set the CSS border-collapse property to collapse.
38

Hypertext Markup Language

HTML Lists

● Unordered HTML List

● An unordered list starts with the <ul> tag. Each list item
starts with the <li> tag.
● The list items will be marked with bullets (small black
circles) by default:
39

Hypertext Markup Language

HTML Lists

Ordered HTML List

● An ordered list starts with the <ol> tag. Each list item
starts with the <li> tag.
● The list items will be marked with numbers by default:
40

Hypertext Markup Language

HTML Lists

HTML Description Lists

● HTML also supports description lists.
● A description list is a list of terms, with a description of
each term.
● The <dl> tag defines the description list, the <dt> tag
defines the term (name), and the <dd> tag describes each
term:
41

Hypertext Markup Language

HTML Lists
42

Hypertext Markup Language

The HTML <head> Element

● The <head> element is a container for
metadata (data about data) and is placed
between the <html> tag and the <body>
tag.
● HTML metadata is data about the HTML
document. Metadata is not displayed.
● Metadata typically define the document title,
character set, styles, scripts, and other meta
information.
43

Hypertext Markup Language

● The HTML <title> Element

● The <title> element defines the title of the
document. The title must be text-only, and it is
shown in the browser's title bar or in the page's
tab.

The <title> element:

● defines a title in the browser toolbar

● provides a title for the page when it is added to
favorites
● displays a title for the page in search engine-
results
44

Hypertext Markup Language

The HTML <style> Element

The <style> element is used to define style information
for a single HTML page:
45

CSS
IT 111: Introduction to Computing
46

Cascading Style Sheet

CSS
● describes how HTML elements are to be displayed on screen, paper,
or in other media

● saves a lot of work. It can control the layout of multiple web pages all
at once

● External stylesheets are stored in CSS files

47

Cascading Style Sheet

CSS
CSS is used to define styles for your web pages, including the design,
layout and variations in display for different devices and screen sizes.
48

Cascading Style Sheet

CSS Syntax
The selector points to the HTML element you want to style.

The declaration block contains one or more declarations separated by semicolons.

Each declaration includes a CSS property name and a value, separated by a colon.

Multiple CSS declarations are separated with semicolons, and declaration blocks
are surrounded by curly braces.
49

Cascading Style Sheet

The CSS id Selector

● The id selector uses the id attribute of an HTML element to select a specific element.
● The id of an element is unique within a page, so the id selector is used to select one
unique element!
● To select an element with a specific id, write a hash (#) character, followed by the id
of the element.
50

Cascading Style Sheet

The CSS id Selector

51

Cascading Style Sheet

The CSS class Selector

● The class selector selects HTML elements with a specific class attribute.
● To select elements with a specific class, write a period (.) character, followed by the
class name.
52

Cascading Style Sheet

How To Add CSS

Three Ways to Insert CSS

There are three ways of inserting a style sheet:

● External CSS
● Internal CSS
● Inline CSS
53

Cascading Style Sheet

How To Add CSS

● External CSS
● With an external style sheet, you can change the look of an entire website by
changing just one file!
● Each HTML page must include a reference to the external style sheet file inside the
<link> element, inside the head section.
54

Cascading Style Sheet

How To Add CSS ● External CSS

55

Cascading Style Sheet

How To Add CSS

● Internal CSS
● An internal style sheet may be used if one single HTML page has a unique
style.
● The internal style is defined inside the <style> element, inside the head
section.
56

Cascading Style Sheet

How To Add CSS ● Internal CSS

57

Cascading Style Sheet

How To Add CSS

Inline CSS
● An inline style may be used to apply a unique style for a single element.
● To use inline styles, add the style attribute to the relevant element. The style attribute can
contain any CSS property.
58

Cascading Style Sheet

CSS Comments
● Comments are used to explain the code, and may help when you edit the source code at a
later date.
● Comments are ignored by browsers.
● A CSS comment is placed inside the <style> element, and starts with /* and ends with */:
59

Cascading Style Sheet

CSS Colors
CSS Background Color

CSS Text Color

60

Cascading Style Sheet

CSS Backgrounds
The background-color property
specifies the background color of an
CSS background-color element.
61

Cascading Style Sheet

CSS Backgrounds

Other Elements
You can set the background color for any HTML elements:
62

Cascading Style Sheet

CSS Backgrounds

Opacity / Transparency
The opacity property specifies the opacity/transparency of an element. It can take a value from 0.0 -
1.0. The lower value, the more transparent:
63

Cascading Style Sheet

CSS Backgrounds

CSS background-image
● The background-image property specifies an image to use as the background of
an element.
● By default, the image is repeated so it covers the entire element.
64

Cascading Style Sheet

CSS Borders
The border-style property specifies what kind of border to display.

The following values are allowed:

● dotted - Defines a dotted border

● dashed - Defines a dashed border
● solid - Defines a solid border
● double - Defines a double border
● groove - Defines a 3D grooved border. The effect depends on the border-color value
● ridge - Defines a 3D ridged border. The effect depends on the border-color value
● inset - Defines a 3D inset border. The effect depends on the border-color value
● outset - Defines a 3D outset border. The effect depends on the border-color value
● none - Defines no border
● hidden - Defines a hidden border
65

Cascading Style Sheet

CSS Margins
The CSS margin properties are used to create space around
elements, outside of any defined borders.

Margin - Individual Sides

CSS has properties for specifying the margin for each side of
an element:

● margin-top
● margin-right
● margin-bottom
● margin-left
66

Cascading Style Sheet

CSS Margins
67

Cascading Style Sheet

CSS Padding
● The CSS padding properties are used to generate space around an element's
content, inside of any defined borders.
● With CSS, you have full control over the padding. There are properties for
setting the padding for each side of an element (top, right, bottom, and left).

Padding - Individual Sides

CSS has properties for specifying the padding for each side of an element:

● padding-top
● padding-right
● padding-bottom
● padding-left
68

Cascading Style Sheet

CSS Height and Width

CSS Setting height and width

The height and width properties are used to set the height and width of an element.

The height and width properties do not include padding, borders, or margins. It sets the height/width of the
area inside the padding, border, and margin of the element.
69

Cascading Style Sheet

CSS Height and Width

CSS height and width Values

The height and width properties may have the following values:

● auto - This is default. The browser calculates the height and width
● length - Defines the height/width in px, cm etc.
● % - Defines the height/width in percent of the containing block
● initial - Sets the height/width to its default value
● inherit - The height/width will be inherited from its parent value
70

Cascading Style Sheet

The CSS Box Model

● Content - The content of the

box, where text and images
appear
● Padding - Clears an area
around the content. The
padding is transparent
● Border - A border that goes
around the padding and content
● Margin - Clears an area outside
the border. The margin is
transparent
71

Cascading Style Sheet

CSS Fonts
Generic Font Families
In CSS there are five generic font families:

1. Serif fonts have a small stroke at the edges of each letter. They create a
sense of formality and elegance.
2. Sans-serif fonts have clean lines (no small strokes attached). They create a
modern and minimalistic look.
3. Monospace fonts - here all the letters have the same fixed width. They
create a mechanical look.
4. Cursive fonts imitate human handwriting.
5. Fantasy fonts are decorative/playful fonts.
72

Cascading Style Sheet

CSS Fonts
73

Cascading Style Sheet

CSS Lists
Different List Item Markers
● The list-style-type property specifies the type of
list item marker.
● The following example shows some of the available
list item markers:
74

Cascading Style Sheet

CSS Tables
● Table Borders
● To specify table borders in CSS, use the border
property.
● The example below specifies a black border for
<table>, <th>, and <td> elements:
75

Cascading Style Sheet

CSS Tables
76

Cascading Style Sheet

CSS Table Size

Table Width and
Height
The width and height of a table are https://www.w3schools.com/css/tryit.asp
defined by the width and height ?filename=trycss_table_width
properties.
77

Cascading Style Sheet

CSS Table Alignment

Horizontal Alignment
The text-align property sets the horizontal
alignment (like left, right, or center) of the content
in <th> or <td>.

By default, the content of <th> elements are center-

aligned and the content of <td> elements are left- https://www.w3schools.com/css/tryit.asp
aligned. ?filename=trycss_table_align

To center-align the content of <td> elements as

well, use text-align: center:
78

Cascading Style Sheet

CSS Table Alignment

Vertical Alignment
The vertical-align property sets the vertical
alignment (like top, bottom, or middle) of the
content in <th> or <td>.

By default, the vertical alignment of the content in a

table is middle (for both <th> and <td> elements). https://www.w3schools.com/css/tryit.asp
?filename=trycss_table_vertical-align
The following example sets the vertical text
alignment to bottom for <td> elements:
79 IT 111: Introduction to Computing

Thank you!