<h1>Главный заголовок страницы</h1>
<table border="1">
<tr>
<th>Продукт</th>
<th>Цена</th>
<th>Количество</th>
</tr>
<tr>
<td>Яблоки</td>
<td>100</td>
<td>5кг</td>
</tr>
<tr>
<td>Апельсины</td>
<td>200</td>
<td>6кг</td>
</tr>
<tr>
<td>Бананы</td>
<td>300</td>
<td>7кг</td>
</tr>
</table>
<h2>Второстепенный заголовок 1</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elitorire
aenean a dapibus magna, ac interdum nisl. Suspendisse egetil
fringilla nibh, eu commodo arcu. Donec lacinia tempor velite
sed tincidunt. Aliquam porttitor nulla purus, vel vulputater
ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehi
ante purus lacini dui, interdum fringilla massa eros ut duir.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elitorire
aenean a dapibus magna, ac interdum nisl. Suspendisse egetil
fringilla nibh, eu commodo arcu. Donec lacinia tempor velite
sed tincidunt. Aliquam porttitor nulla purus, vel vulputater
ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehi
ante purus lacini dui, interdum fringilla massa eros ut duir.
</p>
<h2>Второстепенный заголовок 2</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elitorire
aenean a dapibus magna, ac interdum nisl. Suspendisse egetil
fringilla nibh, eu commodo arcu. Donec lacinia tempor velite
sed tincidunt. Aliquam porttitor nulla purus, vel vulputater
ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehi
ante purus lacini dui, interdum fringilla massa eros ut duir.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elitorire
aenean a dapibus magna, ac interdum nisl. Suspendisse egetil
fringilla nibh, eu commodo arcu. Donec lacinia tempor velite
sed tincidunt. Aliquam porttitor nulla purus, vel vulputater
ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehi
ante purus lacini dui, interdum fringilla massa eros ut duir.
</p>
<h2>Второстепенный заголовок 3</h2>
<table border="1">
<tr>
<td>ячейка 1</td>
<td>ячейка 2</td>
<td>ячейка 3</td>
</tr>
<tr>
<td>ячейка 4</td>
<td>ячейка 5</td>
<td>ячейка 6</td>
</tr>
<tr>
<td>ячейка 7</td>
<td>ячейка 8</td>
<td>ячейка 9</td>
</tr>
</table>
<h1>Языки для сайтов</h1>
<h2>PHP и JavaScript</h2>
<p>
Языки программирования <b>PHP</b> и <b>JavaScript</b> позволяют
сделать сайт динамичным, то есть реагирующим на действия пользователя.
Например, можно сделать красивую выпадающую менюшку или слайдер.
</p>
<h2>Виды скриптов</h2>
<p>
Для этого пишутся скрипты (англ. <i>script</i> - "сценарий") -
программы, позволяющие реагировать на действия пользователя.
Скрипты бывают двух видов:
</p>
<ul>
<li>
те, которые выполняются на сервере,
а результат их выполнения приходит в браузер к
пользователю уже в готовом виде. Это скрипты,
написанные на языке <b>PHP</b>. На нем пишуться
<b>CMS-ки</b> – системы управления контентом.
</li>
<li>
те, которые выполняются прямо в браузере пользователя.
Это скрипты, написанные на языке <b>JavaScript</b>.
Они чаще всего используются для, того чтобы сделать страницу
более удобной и красивой.
</li>
</ul>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 class="text">Lorem, ipsum.</h1>
<h2>Lorem, ipsum.</h2>
<h3 class="text">Lorem, ipsum.</h3>
<h4>Lorem, ipsum.</h4>
<h5>Lorem, ipsum.</h5>
<h6 class="text">Lorem, ipsum.</h6>
<br><br><br><br><br>
<p class="zzz">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maxime cum voluptates saepe voluptatem tenetur quisquam nam earum pariatur soluta! Quisquam porro quia iste dolores distinctio ullam delectus expedita labore obcaecati.</p>
<p class="xxx">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maxime cum voluptates saepe voluptatem tenetur quisquam nam earum pariatur soluta! Quisquam porro quia iste dolores distinctio ullam delectus expedita labore obcaecati.</p>
<p class="ccc">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maxime cum voluptates saepe voluptatem tenetur quisquam nam earum pariatur soluta! Quisquam porro quia iste dolores distinctio ullam delectus expedita labore obcaecati.</p>
</body>
</html>
.zzz{
width: 500px;
text-align: justify;
color: brown;
}
.xxx{
font-family: "century gothic";
width: 200px;
font-style: italic;
text-align: right;
text-decoration: underline wavy;
color: maroon;
}
.ccc{
font-family: "comic sans ms";
width: 400px;
text-align: center;
font-style: italic;
text-decoration: line-through double;
color: cyan;
background-color: black;
}