Завдання

Використовуючи базові теги мови HTML, створити web-сторінку за зразком (див. нижче).

Порядок виконання завдання

1. На локальному диску свого ПК створіть папку pr3_html.
2. Розархівуйте в дану папку Додаткові матеріали_ПЗ3, що містить текст і зображення, які необхідно буде розмістити на web-сторінці.
3. Відкрийте редактор коду Visual Studio Code, а в ньому — папку pr3_html.
4. У папці pr3_html створіть новий html-документ. Назвіть його index.html. Створіть у ньому структуру тегів, прописавши Doctype, html, head, meta charset, meta viewport, title, body.
5. Усередині тегу body створіть h1 і розмістіть у ньому текст Сім чудес України: історико-культурні пам’ятки, якими ми пишаємос так, як показано на рисунку (див. нижче).
6. Після h1 створіть h2 і розмістіть у ньому текст Кам’янець-Подільська фортеця, як показано на рисунку (див. нижче).
7. Створіть після заголовка параграф із текстом. Текст курсив. Текст візьміть із шаблону (див. рисунок нижче).
8. Додайте тег img із покликанням на малюнок. Малюнок знаходиться в папці  images. Розмір зображення встановіть через атрибут width= “450px”
9. Після зображення додайте параграф із текстом (див. рисунок нижче).
10. Після параграфа розмістіть маркований список, використовуючи тег ul з елементами. 
11. Для кожного елементу списку своріть гіперпокликання на web-сторінку з Вікіпедії про відповідну пам’ятку. Наприклад, при натиснені на елемент списку парк «Софіївка» у новій вкладці відкривається сторінка з Вікіпедії, де йде мова про парк «Софіївка».

1. Перевірте роботу, відкривши створену web-сторінку в браузері. Запакуйте папку pr3_html в архів з ім’ям pr3_html-Прізвище й завантажте в область під умовою завдання (позначену написом Для додавання файлів, ви можете просто перетягнути їх сюди).

Укажіть, до якого із тегів застосовується атрибути colspan і rowspan

Укажіть, що означає тег <а> мови HTML 

Укажіть, що означає тег <br > мови HTML 

Укажіть, що означає тег <b> мови HTML 

Завдання

Cтворити й оформити web-сторінку за зразком рис. 4.4, використовуючи можливості HTML і CSS.

Рис. 4.4. Вигляд web-сторінки після застосування стилів

Порядок виконання завдання

1. На локальному диску свого ПК створіть папку pr4_css.

2. Розархівуйте в дану папку Додаткові матеріали_ПЗ4, яка містить текст і зображення, що необхідно буде розмістити на web-сторінці.

3. Відкрийте редактор коду Visual Studio Code, а в ньому —  папку pr4_css.

4. У папці pr4_css створіть новий html-документ з ім’ям index.html і файл style.css, де будемо прописувати css-правила.

5. У файлі index.html cтворіть структуру коду, вказану на зображенні, і підключіть відразу зовнішню таблицю стилів, файл style.css.

6. Додайте мета-теги charset і viewport. Заповніть title (назва статті).

7. Заповніть текстом і зображеннями на основі рис. 4.4. Текст візьміть із файлу text.txt. Вивчіть, як виглядає сторінка сайту без застосування css.

8. Додайте в CSS файл наступні стилі:

• Для всіх елементів(*{}) margin установіть — рівний нулю.
• Для класу .container задайте максимальну ширину 1000px, і відступи( margin) зверху і знизу — 20px, по боках — автоматично.
• Для всіх заголовків задайте розмір шрифту 24px, жирний, сімейство — Impact, вирівнювання по центру, margin зверху і знизу — по 30px.
• Для заголовка h1 задайте розмір шрифту 32px.
• Для параграфів задайте Arial, sans-serif. Розмір шрифту — 18px, висота рядка —150 %.
• Для зображень задайте максимальну ширину 80 %. Відображення(display) — block, margin зверху і знизу — 20px, справа і зліва — auto.
• Параграф із класом img-description вирівнювання тексту — по центру, курсив, відступ зверху — 20px, знизу — 40px.
• Для ul списку шрифти Arial, sans-serif, 18px, висота рядка —  150 %.

9. Стилі для .text-green і .text-bold додати самостійно.

10. Перевірте роботу, відкривши створену web-сторінку в браузері. Запакуйте папку pr4_css в архів з ім’ям pr4_css -Прізвище і завантажте в область під умовою завдання (позначену написом Для додавання файлів ви можете просто перетягнути їх сюди).

Псевдоклас стану :focus призначений для...

CSS-вастивість text-decoration: дає можливість для елемента задати...

Укажіть, за допомогою якого тегу можна підключити до HTML документа зовнішню таблицю стилів

Укажіть, як називається атрибут HTML-тегу,  за допомогою якого можна задавати стиль безпосередньо для конкретного елемента web-сторінки