Итоговое задание html/css

Урок 3: HTML

1. Создайте каталоги:
• img
• css
2. Создайте главную страницу index.html
• Расположите необходимые теги скелета страницы (сайт www.toptal.com → установить пункт для вывода meta и title).
• В тело страницы добавить таблицу (16 grid сетка(25%,50%,25%)). Установите атрибут border и width у таблицы и некоторых ячеек. Добавьте комментарий с номером ячейки перед каждой ячейкой:



3. Заполнение необходимых для всех страниц ячеек таблицы:

(1) Добавьте картинку с логотипом (logo.gif). Сделайте картинку гиперссылкой на текущую страницу index.html и расположите ее по центру ячейки.
(2) Добавьте название заголовком первого уровня («Название сайта» или «Сайт студента»). Под заголовком расположите кнопку с надписью Поиск.
(3) Создайте таблицу с тремя строками по одной ячейки в каждой. Сделайте меню сайта, используя маркированный список и вставьте его в ячейки таблицы :

• Пункт1
• Пункт2
• Пункт3

Сделайте пункты списка ссылками на страницы: page1.html, page2.html, page3.html.

4. Добавьте в область head мета-теги (или проверьте, что они есть и заполните значения):
• описание страницы:

<meta name="description" content="Сайт студента">

<meta name="description" content="Сайт студента">

• ключевые слова:

<meta name="keywords" content="помощь студенту, студент ЮФУ, шпаргалки">

<meta name="keywords" content="помощь студенту, студент ЮФУ, шпаргалки">

• запретить индексацию:

<meta name="robots" content="noindex, nofollow">

<meta name="robots" content="noindex, nofollow">

• кодировку:

<meta charset="utf-8">

<meta charset="utf-8">

• авторство:

<meta name="author" content="Светлана Майер" />

<meta name="author" content="Светлана Майер" />

<meta name="copyright" lang="ru" content="ЮФУ" />

<meta name="copyright" lang="ru" content="ЮФУ" />

• электронный адрес ответа:

<meta name="reply-to" content="sfmayer@sfedu.ru">

<meta name="reply-to" content="sfmayer@sfedu.ru">

• дату создания сайта:

<meta http-equiv="creation-date" content="Sun, 02, Oct 2023 12:00:00 GMT">

<meta http-equiv="creation-date" content="Sun, 02, Oct 2023 12:00:00 GMT">

• язык сайта:

<meta http-equiv="content-language" content="ru">

<meta http-equiv="content-language" content="ru">

• viewport — это область, которую видит пользователь на экране, когда заходит на страницу сайта с любого устройства:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

5. Для тега body добавьте атрибут для расположения изображения на фон страницы (файл fon.gif).
6. Добавьте favicon в область head:

<link rel="icon" href="img/favicon.ico">

<link rel="icon" href="img/favicon.ico">

7. Создайте страницы page1.html, page2.html, page3.html; и, скопировав весь код с index.html, добавьте код во все страницы. На каждой странице в ячейку (4) таблицы добавьте заголовок второго уровня с названием страницы (например, «Страница1» и т.п.)
8. Вернитесь в главный файл и проверьте работоспособность ссылок и логотипа (по щелчку).
9. Добавьте в главном файле под заголовком текст «Слоган». Оформите его в теге div.
10. Добавление видео с youtube: В главном файле в ячейке (4) таблицы вставьте любое видео с youtube: Открыть видео в браузере → Поделиться → Встроить → скопируйте код. Расположите видео по центру ячейки.
11. В страницы page1.html и page2.html в ячейку (4) после заголовка добавьте по два абзаца текста, сформировав его на сайте https://ru.lipsum.com/. Добавьте теги параграфов. В page2.html добавьте также пункты списка (4 пункта), оформив их маркированным списком.
12. На странице page3.html в ячейку (4) после заголовка добавьте видео-файл congratulations.mp4 из папки img и аудио-файл по ссылке: http://www.sovmusic.ru/m32/trusneig.mp3. Расположите их по центру друг под другом. Задайте ширину видеоплееру.

Пример вставки видео:

<video controls="controls" > <source src=" img/congratulations.mp4 " type="video/mp4"> </video>

<video controls="controls" > <source src=" img/congratulations.mp4 " type="video/mp4"> </video>

13. В страницы page1.html и page2.html в ячейку (5) расположите изображения, измените их размер, чтобы они вмещались в ячейки (атрибут width).

Урок 4: CSS

Метод встраивания (inline):

1. На страницах page1.html и page2.html добавьте стиль для заголовков в ячейках (4) (color, text-align) (свойства можно смотреть здесь: https://labs-org.ru/css-6/ или https://htmlbook.ru/css/cat/text)

Метод вложения (embedded):

2. На странице page2.html измените свойства заголовка h2 (text-align, border). Свойства для рамок здесь: https://labs-org.ru/css-10/ или https://htmlbook.ru/css/cat/border.
3. На странице page2.html установите шрифт для параграфа:

/* Обычный */
	@font-face {
		font-family: 'AmaticSC-Regular'; 
		src: url('css/AmaticSC-Regular.ttf'); 
	}