task1_2.html

<!DOCTYPE html>
<html>
<body>

<h1>Ïîñòðîèòü ôëàã ÐÔ èç ñèìâîëà “Î” ðàçìåðîì 60õ80 ñèìâîëîâ</h1>

<script>
const size = 10;
const div = document.createElement('div');
div.style.cssText = `width: ${8*size + 10}px; height:${6*size + 10}px; border:1px solid #CCC;
  font-family:Tahoma,Arial,sans-serif;font-size:8px;font-weight:400;position:relative;color:white;
  background-color:#CCC;`;
document.body.appendChild(div);
const styleEl = document.createElement('style');
document.head.appendChild(styleEl);
const sheet = styleEl.sheet;
let styles = `span {position:absolute;display:block;}`;
sheet.insertRule(styles, 0);
styles = `.b{color: #0039A6}`;
sheet.insertRule(styles, 1);
styles = `.r{color: #D52B1E}`;
sheet.insertRule(styles, 2);

var n1 = 60;
var n2 = 80;
var y = 0;
for (let i = 0; i < n1; i++){
	var x = 0;
	for (let j = 0; j < n2; j++){   
	x = j;
	y = i;
  	const el = document.createElement('span');
  	el.innerText = 'O';
  	if (y > 4 * size) el.className = 'r';
  	else if (y > 2 * size) el.className = 'b';
  	el.style.left = `${x+2}px`;
  	el.style.top = `${y}px`;
  	div.appendChild(el);
  	}
}
</script>

</body>
</html>