THE IMAGES

T H E P R E PA R AT I O N
P R E PA R E T H E F I L E S
AND FOLDERS

1. Create folder
Exer5Lastname9Section

2. Open Visual Studio Code

P R E PA R E T H E F I L E S
AND FOLDERS
3. SAVE at once your file
in your folder.

Filename: exer5Lastname9Section.html

Exer5Lastname9Section
THE TITLES
 TITLE CSS SETUP
FOOD

ADOBO KAREKARE HALOHALO BULALO SISIG

table td
{ {
width: 80%; color: red;
border-collapse: collapse; border:2px solid black;
} text-align:center;
}
THE FIXED SETUP
T H E S PA N
FOOD

ADOBO KAREKARE HALOHALO BULALO SISIG

<td colspan=“NUMBER”> FOOD </td>

THE CENTER
FOOD
ADOBO KAREKARE HALOHALO BULALO SISIG
THE CENTER
FOOD
ADOBO KAREKARE HALOHALO BULALO SISIG

<table align=“center”>
THE IMAGES
S AV E T H E I M A G E S I N
THE SAME FOLDER
Filenames of the images should be 1 word only
Ex: adobo, karekare, halohalo, bulalo, sisig

Exer5Lastname9Section
THE IMAGE SOURCE

FOOD

ADOBO KAREKARE HALOHALO BULALO SISIG

IMAGE IMAGE IMAGE IMAGE IMAGE

<td><img src="adobo.jpg"></td>

IMAGE SOURCE FILENAME

THE IMAGE SOURCE
ERROR
Check the filename(one word)
Spelling
File type (.jpg,.jpeg,.png)
Check the file location
HTML and image in the
same folder
Subfolder(if needed)
Check syntax/code
<img src=“filename.jpg">
 THE IMAGE SIZE
FOOD

ADOBO KAREKARE HALOHALO BULALO SISIG

<img src="adobo.jpg" width="130px" height="130px">

T H E F I N A L L AY O U T
FOOD

ADOBO KAREKARE HALOHALO BULALO SISIG

C U LT U R E

C U LT U R E 1 C U LT U R E 2 C U LT U R E 3 C U LT U R E 4 C U LT U R E 5

C U LT U R E C U LT U R E C U LT U R E C U LT U R E C U LT U R E
IMAGE1 IMAGE2 IMAGE3 IMAGE4 IMAGE5
 FOOD

ADOBO KAREKARE HALOHALO BULALO SISIG

C U LT U R E

C U LT U R E 1 C U LT U R E 2 C U LT U R E 3 C U LT U R E 4 C U LT U R E 5

C U LT U R E C U LT U R E C U LT U R E C U LT U R E C U LT U R E
IMAGE1 IMAGE2 IMAGE3 IMAGE4 IMAGE5

BEST PLACES

NAME1 NAME2 NAME3 NAME4 NAME5

NAME NAME NAME NAME NAME

IMAGE1 IMAGE2 IMAGE3 IMAGE4 IMAGE5
T H E F I N A L L AY O U T
BEST PLACES

NAME1 NAME2 NAME3 NAME4 NAME5

NAME NAME NAME NAME NAME

IMAGE1 IMAGE2 IMAGE3 IMAGE4 IMAGE5
REMEMBER: All images and html
file should be in the same folder.