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!
