HTML&CSS Class work #1

file1.html

<!-- Це коментар, який не відображається на сторінці в браузері,
він потрібен лише для тих, хто має читати ваш код -->

<!-- Тег meta - непарний тег, поки що не буду пояснювати його, він досить важкий, і має декілька форм -->
<!-- В даному випадку я його застосував для того, щоб українські та російські букви відображались корректно-->
<meta charset="utf-8">

<!-- h1 - це парний тег, який призначений для створення заголовку першого рівня --> 
<h1>
  <!--Всього існує 6 рівнів різних заголовків: h1, h2, h3, ..., h6 ) -->
  
  <!-- center - парний тег, використовується для вирівнювання тексту по середині батьківського елемента-->
  <!-- в нашому выпадку, по середині екрана -->
  <center>HTML&CSS Sekta</center>
</h1>


<h2>Class work #1</h2><!-- Заголовок 2-го рівня -->

<!-- p - paragraph, тег використовується для виводу блоку(абзаца) з текстом -->
<p>
  <i>Домашнє завдання</i> є <b>обов'язковим</b> для виконання кожного з учасників студентського гуртка.<br>
  <b><i>&copy; Alexandr Melnik</i></b>
</p>
<!-- Бажано, щоб весь текст який ви пишете був в якомусь тегу, скоріш за все це буде параграф -->


<!-- img - непарний тег, який вставляє зображення, має 2 обов'язкових атрибута: -->
<!-- src - адреса за якою знаходиться зображення -->
<!-- alt - опис картинки, відображається при наведені курсора на зображення,
або виводиться на читалках для сліпих, замість зображення-->
<img src="https://pp.vk.me/c624128/v624128880/51ff7/y3kWP9Q2xsY.jpg" alt="HTML&CSS">

<!-- a - anchor(якорь) парний тег для створення гіперпосилань, має 1 обов'язковий атрибут: -->
<!-- href - адреса на яку веде ваше гіперпосилання -->
<p>
  <a href="https://yandex.ru/">Yandex</a>
</p>


<p>
  <a href="https://vk.com">
    <img src="http://droider.ru/wp-content/themes/eminent/images/vkontakte_icon2.png" alt="вконтакте">
  </a>
</p>

<!-- Якщо після того, як ви прочитали те що написано вище виникло багато запитань, це нормально,
можете задати їх в коментарях чуть нижче на цьому сайті, або в групі ВК -->

file1_without_comments.html

<meta charset="utf-8">

<h1>
  <center>HTML&CSS Sekta</center>
</h1>

<h2>Class work #1</h2>

<p>
  <i>Домашнє завдання</i> є <b>обов'язковим</b> для виконання кожного з учасників студентського гуртка.<br>
  <b><i>&copy; Alexandr Melnik</i></b>
</p>

<img src="https://pp.vk.me/c624128/v624128880/51ff7/y3kWP9Q2xsY.jpg" alt="HTML&CSS">

<p>
  <a href="https://yandex.ru/">Yandex</a>
</p>

<p>
  <a href="https://vk.com">
    <img src="http://droider.ru/wp-content/themes/eminent/images/vkontakte_icon2.png" alt="вконтакте">
  </a>
</p>

file2.html

<!-- Майже для всіх тегів, які ми вивчили можна задати атрибут: "style" -->
<!-- в якому потрібно писати код CSS , який необхідний для зміни зовнішнього вигляду тега, наприклад: -->

<meta charset="utf-8">

<meta charset="utf-8">

<p style="background: yellow;">
  Фоновий колір цього параграфу буде - жовтим.
</p>

<p style="background: #70fa77;">
  Фоновий колір цього параграфу буде - <b>#70fa77</b>.<br>
  #70fa77 - це колір в форматі <i>RGB</i>.<br>
  <a href="https://ru.wikipedia.org/wiki/RGB">Wiki RGB</a>, 
  <a href="https://ru.wikipedia.org/wiki/%D0%A6%D0%B2%D0%B5%D1%82%D0%B0_HTML">кольори HTML</a>
  
</p>

<h3 style="background: url(http://anido.3dn.ru/_nw/0/54068898.png);">
  Цей заголовок 3-го рівня має фонове зображення.<br><br><br><br>
  я вставив декілька break line(br), щоб розтягнути параграф
</h3>

<p style="color: #00aa99;">
	Колір цього тексту #00aa99
</p>

<p style="background: #aaaaaa; color: blue;">
	Фон сірий, текст синій!
</p><br>

<p style="font-size: 38pt;">
	Розмір цього тексту 38 <a href="https://uk.wikipedia.org/wiki/%D0%9A%D0%B5%D0%B3%D0%B5%D0%BB%D1%8C">кегля</a>
</p>


<p style="background: #eeeeee; color: blue;">
	<center>&copy; Power by <i>Alexandr Melnik</i></center>
</p>