Royaume du Maroc

Ministère de l’Education Nationale, de la Formation Professionnelle

de l'Enseignement Supérieur et de la Recherche Scientifique

Université Chouaib Doukkali,

Ecole Nationale des Sciences Appliquées d’El Jadida (ENSA)
2017-2018

An Introduction To Web Design

Semester 2
2ITE/Grade 1/Class 3

Dr.-Ing. Fouad KHARROUBI

 HTML Tables ☺

Dr.-Ing.Fouad KHARROUBI UCD-ENSAJ

2/22/2018
02/21/2018 2
2017-2018
HTML Tables

Dr.-Ing.Fouad Dr-Ing
KHARROUBI
Fouad KHARROUBI UCD-ENSAJ
2/22/2018
02/21/2018 3
2017-2018
Central South University of Forestry and Technology
HTML Tables

Dr.-Ing.Fouad KHARROUBI UCD-ENSAJ

2/22/2018
02/21/2018 4
2017-2018
 Lets learn from Examples ☺

Dr.-Ing.Fouad KHARROUBI UCD-ENSAJ

2/22/2018
02/21/2018 5
2017-2018
HTML Tables ( Structure) <table> tag,

What will be the

output?

Dr.-Ing.Fouad KHARROUBI UCD-ENSAJ

2/22/2018
02/21/2018 6
2017-2018
HTML Tables ( Structure) <table> tag,

2/22/2018
02/21/2018 7
HTML Tables ( Structure) <table> tag, border attribute

What will be the

output?

Dr.-Ing.Fouad KHARROUBI UCD-ENSAJ

2/22/2018
02/21/2018 8
2017-2018
HTML Tables ( Structure) <table> tag, border attribute

Dr.-Ing.Fouad KHARROUBI UCD-ENSAJ

2/22/2018
02/21/2018 9
2017-2018
HTML Tables ( Structure) <table> tag, border attribute

What will be the

output?

Dr.-Ing.Fouad KHARROUBI UCD-ENSAJ

2/22/2018
02/21/2018 10
2017-2018
HTML Tables ( Structure) <table> tag, border attribute

Dr.-Ing.Fouad KHARROUBI UCD-ENSAJ

2/22/2018
02/21/2018 11
2017-2018
HTML Tables ( Structure) <table> tag, bgcolor attribute

What will be the

output?

Dr.-Ing.Fouad KHARROUBI UCD-ENSAJ

2/22/2018
02/21/2018 12
2017-2018
HTML Tables ( Structure) <table> tag, bgcolor attribute

Dr.-Ing.Fouad KHARROUBI UCD-ENSAJ

2/22/2018
02/21/2018 13
2017-2018
HTML Tables ( Structure) <table> tag, border color style

What will be the

output?

Dr.-Ing.Fouad KHARROUBI UCD-ENSAJ

2/22/2018
02/21/2018 14
2017-2018
HTML Tables ( Structure) <table> tag, border color style

Dr.-Ing.Fouad KHARROUBI UCD-ENSAJ

2/22/2018
02/21/2018 15
2017-2018
HTML Tables ( Structure) <tr> tag, the align attribute

What will be the

output?

Dr.-Ing.Fouad KHARROUBI UCD-ENSAJ

2/22/2018
02/21/2018 16
2017-2018
HTML Tables ( Structure) <tr> tag, the align attribute

Dr.-Ing.Fouad KHARROUBI UCD-ENSAJ

2/22/2018
02/21/2018 17
2017-2018
HTML Tables ( Structure) <tr> tag, the align attribute

What will be the

output?

Dr.-Ing.Fouad KHARROUBI UCD-ENSAJ

2/22/2018
02/21/2018 18
2017-2018
HTML Tables ( Structure) <tr> tag, the align attribute

Dr.-Ing.Fouad KHARROUBI UCD-ENSAJ

2/22/2018
02/21/2018 19
2017-2018
HTML Tables ( Structure)

How to get this HTML table?

Dr.-Ing.Fouad KHARROUBI UCD-ENSAJ

2/22/2018
02/21/2018 20
2017-2018
HTML Tables ( Structure) <th> tag, the "rowspan" and "colspan" attributes.

Dr.-Ing.Fouad KHARROUBI UCD-ENSAJ

2/22/2018
02/21/2018 21
2017-2018
HTML Tables ( Structure)

How to get this HTML table?

Dr.-Ing.Fouad KHARROUBI UCD-ENSAJ

2/22/2018
02/21/2018 22
2017-2018
HTML Tables ( Structure) <th> tag, the "rowspan" and "colspan" attributes.

Dr.-Ing.Fouad KHARROUBI UCD-ENSAJ

2/22/2018
02/21/2018 23
2017-2018
HTML Tables ( Structure)

How to get this HTML table?

Dr.-Ing.Fouad KHARROUBI UCD-ENSAJ

2/22/2018
02/21/2018 24
2017-2018
HTML Tables ( Structure) <th> tag, the "rowspan" and "colspan" attributes.

Dr.-Ing.Fouad KHARROUBI UCD-ENSAJ

2/22/2018
02/21/2018 25
2017-2018
HTML Tables ( Structure)

How to get this HTML table?

Dr.-Ing.Fouad KHARROUBI UCD-ENSAJ

2/22/2018
02/21/2018 26
2017-2018
HTML Tables ( Structure) <th> tag, the "rowspan" and "colspan" attributes.

Dr.-Ing.Fouad KHARROUBI UCD-ENSAJ

2/22/2018
02/21/2018 27
2017-2018
HTML Tables ( Structure)

How to get this HTML table?

Dr.-Ing.Fouad KHARROUBI UCD-ENSAJ

2/22/2018
02/21/2018 28
2017-2018
HTML Tables ( Structure)

Dr.-Ing.Fouad Dr-Ing
KHARROUBI
Fouad KHARROUBI UCD-ENSAJ
2/22/2018
02/21/2018 29
2017-2018
Central South University of Forestry and Technology
HTML Tables ( Structure) Table with thead and tfoot.

What will be the

output?

Dr.-Ing.Fouad KHARROUBI UCD-ENSAJ

2/22/2018
02/21/2018 30
2017-2018
HTML Tables ( Structure) Table with thead and tfoot.

Dr.-Ing.Fouad Dr-Ing
KHARROUBI
Fouad KHARROUBI UCD-ENSAJ
2/22/2018
02/21/2018 31
2017-2018
Central South University of Forestry and Technology
HTML Tables ( Structure) Table with thead and colgroup.

What will be the

output?

Dr.-Ing.Fouad KHARROUBI UCD-ENSAJ

2/22/2018
02/21/2018 32
2017-2018
HTML Tables ( Structure) Table with thead and colgroup.

Dr.-Ing.Fouad Dr-Ing
KHARROUBI
Fouad KHARROUBI UCD-ENSAJ
2/22/2018
02/21/2018 33
2017-2018
Central South University of Forestry and Technology
HTML Tables ( Structure) Table with caption, thead, and tbody

What will be the

output?

Dr.-Ing.Fouad KHARROUBI UCD-ENSAJ

2/22/2018
02/21/2018 34
2017-2018
HTML Tables ( Structure) Table with caption, thead, and tbody

Dr.-Ing.Fouad Dr-Ing
KHARROUBI
Fouad KHARROUBI UCD-ENSAJ
2/22/2018
02/21/2018 35
2017-2018
Central South University of Forestry and Technology
Summary

Dr.-Ing.Fouad
Dr-Ing KHARROUBI
Fouad KHARROUBI UCD-ENSAJ
Central South
2/22/2018
02/21/2018 36
2017-2018
University of Forestry and Technology
Summary

Dr.-Ing.Fouad
Dr-Ing KHARROUBI
Fouad KHARROUBI UCD-ENSAJ
Central South
2/22/2018
02/21/2018 37
2017-2018
University of Forestry and Technology
Summary

Dr.-Ing.Fouad
Dr-Ing KHARROUBI
Fouad KHARROUBI UCD-ENSAJ
Central South
2/22/2018
02/21/2018 38
2017-2018
University of Forestry and Technology
Summary

Dr.-Ing.Fouad KHARROUBI UCD-ENSAJ

2/22/2018
02/21/2018 39
2017-2018
 What is CSS?
☺

02/21/2018 Dr.-Ing.Fouad KHARROUBI UCD-ENSAJ 2017-2018 40

What is CSS?

Dr-Ing Fouad KHARROUBI Central South

02/21/2018 Dr.-Ing.Fouad KHARROUBI UCD-ENSAJ 2017-2018 41
University of Forestry and Technology
What is CSS?

Dr-Ing Fouad KHARROUBI Central South

02/21/2018 Dr.-Ing.Fouad KHARROUBI UCD-ENSAJ 2017-2018 42
University of Forestry and Technology
What is CSS?

Dr-Ing Fouad KHARROUBI Central South

02/21/2018 Dr.-Ing.Fouad KHARROUBI UCD-ENSAJ 2017-2018 43
University of Forestry and Technology
What is CSS?

Dr-Ing Fouad KHARROUBI Central South

02/21/2018 Dr.-Ing.Fouad KHARROUBI UCD-ENSAJ 2017-2018 44
University of Forestry and Technology
What is CSS?

Dr-Ing Fouad KHARROUBI Central South

02/21/2018 Dr.-Ing.Fouad KHARROUBI UCD-ENSAJ 2017-2018 45
University of Forestry and Technology
What is CSS?

Dr-Ing Fouad KHARROUBI Central South

02/21/2018 Dr.-Ing.Fouad KHARROUBI UCD-ENSAJ 2017-2018 46
University of Forestry and Technology
What is CSS?
•CSS stands for Cascading Style Sheets

•CSS describes how HTML elements are to be displayed on

screen, paper, or in other media

•CSS saves a lot of work. It can control the layout of multiple

web pages all at once

•External stylesheets are stored in CSS files

02/21/2018 Dr.-Ing.Fouad KHARROUBI UCD-ENSAJ 2017-2018 47

 Why use CSS?
☺

02/21/2018 Dr.-Ing.Fouad KHARROUBI UCD-ENSAJ 2017-2018 48

Why use 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.

02/21/2018 Dr.-Ing.Fouad KHARROUBI UCD-ENSAJ 2017-2018 49

Why use CSS?
CSS Solved a big Problem

HTML was NEVER intended to contain tags for formatting a web page!
HTML was created to describe the content of a web page, like:

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

When tags like <font>, and color attributes were added to the HTML 3.2 specification, it
started a nightmare for web developers. Development of large websites, where fonts and
color information were added to every single page, became a long and expensive process.
To solve this problem, the World Wide Web Consortium (W3C) created CSS.
CSS removed the style formatting from the HTML page!

02/21/2018 Dr.-Ing.Fouad KHARROUBI UCD-ENSAJ 2017-2018 50

 CSS Syntax
☺

02/21/2018 Dr.-Ing.Fouad KHARROUBI UCD-ENSAJ 2017-2018 51

CSS Syntax

Dr.-Ing.Fouad KHARROUBI UCD-ENSAJ 2017-2018

02/21/2018 Dr.-Ing.Fouad KHARROUBI UCD-ENSAJ 2017-2018 52

CSS Syntax

02/21/2018 Dr.-Ing.Fouad KHARROUBI UCD-ENSAJ 2017-2018 53

 CSS Selectors
☺

02/21/2018 Dr.-Ing.Fouad KHARROUBI UCD-ENSAJ 2017-2018 54

CSS Selectors

02/21/2018 Dr.-Ing.Fouad KHARROUBI UCD-ENSAJ 2017-2018 55

CSS Selectors: The element Selector

02/21/2018 Dr.-Ing.Fouad KHARROUBI UCD-ENSAJ 2017-2018 56

CSS Selectors: The id Selector

02/21/2018 Dr.-Ing.Fouad KHARROUBI UCD-ENSAJ 2017-2018 57

CSS Selectors: The id Selector

02/21/2018 Dr.-Ing.Fouad KHARROUBI UCD-ENSAJ 2017-2018 58

CSS Selectors: The Class Selector

02/21/2018 Dr.-Ing.Fouad KHARROUBI UCD-ENSAJ 2017-2018 59

CSS Selectors: The class Selector

02/21/2018 Dr.-Ing.Fouad KHARROUBI UCD-ENSAJ 2017-2018 60

CSS Selectors: The class Selector

02/21/2018 Dr.-Ing.Fouad KHARROUBI UCD-ENSAJ 2017-2018 61

CSS Selectors: The class Selector

02/21/2018 Dr.-Ing.Fouad KHARROUBI UCD-ENSAJ 2017-2018 62

CSS Selectors: The class Selector

02/21/2018 Dr.-Ing.Fouad KHARROUBI UCD-ENSAJ 2017-2018 63

CSS Selectors: The class Selector

Note: A class name cannot start with a number!

02/21/2018 Dr.-Ing.Fouad KHARROUBI UCD-ENSAJ 2017-2018 64