МИНИСТЕРСТВО НАУКИ И ВЫСШЕГО ОБРАЗОВАНИЯ
РОССИЙСКОЙ ФЕДЕРАЦИИ
ФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ БЮДЖЕТНОЕ
ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ ВЫСШЕГО ОБРАЗОВАНИЯ
«САХАЛИНСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ»

Институт естественных наук и техносферной безопасности
Кафедра информатики
Гусев Владислав Михайлович

Лабораторная работа №3.«HTML»
01.03.02 Прикладная математика и информатика

Научный руководитель
Соболев Евгений Игоревич

г. Южно-Сахалинск
2024 г.

Введение

HTML — стандартизированный язык гипертекстовой разметки документов для просмотра веб-страниц в браузере. Веб-браузеры получают HTML документ от сервера по протоколам HTTP/HTTPS или открывают с локального диска, далее интерпретируют код в интерфейс, который будет отображаться на экране монитора.

CSS — формальный язык описания внешнего вида документа, написанного с использованием языка разметки. Также может применяться к любым XML-документам, например, к SVG или XUL.

Задачи

Создать все виды заголовков с текстом "Hello world" c классом "heading".
Каждому заголовку также дать id (к прим. heading-1, heading-2...)
Задать всем заголовкам цвет текста на красный
Второму заголовку синий
Третьему заголовку поменять задний фон на чёрный
Четвертому заголовку сделать border и округлить углы
Пятому заголовку создать :hover эффект (любой)
Создайте 6 input с разными типами.
Создать нумерованный список из 4 элементов с текстом “Нумерованный”
Создать маркированный список из 4 элементов с текстом “Маркированный” и квадратным маркером.
Создайте веб-страницу с зеленым фоном и белым текстом из 30 слов.
Создать 6 блоков с нумерацией и такими параметрами (ширина 100px и высота 100px, зеленого цвета , внешним отступом 10px). Их родительским элементом должен быть container.
Поставить все блоки по центру страницы.
Добавьте тэг iframe на вашу страницу.
Сделайте простую форму регистрации на сайте (Только верстка).
Сделайте таблицу на странице.
Создайте стиль для заголовка h1 с красным цветом текста.
Установите шрифт Arial для всех параграфов на странице.
Добавьте тень на блок div с помощью свойства box-shadow.
Установите фоновый цвет #f0f0f0 для всего документа.
Создайте анимацию, которая будет мигать красным цветом.
Установите отступы внутри блока div с помощью свойства padding.
Создайте стиль для ссылок, которые будут менять цвет при наведении на них курсора.
Добавьте границу вокруг изображения с помощью свойства border.
Создайте стиль для списка ul с маркерами в виде квадратов.
Установите ширину и высоту блока div с помощью свойств width и height.
Создайте стиль для таблицы, который будет делать каждую вторую строку серой.
Добавьте эффект перехода при наведении на кнопку с помощью свойства transition.
Установите фоновое изображение для элемента с помощью свойства background-image.
Создайте стиль для формы с полями для ввода текста и кнопкой отправки.
Добавьте рамку вокруг текстового поля с помощью свойства outline.
Установите выравнивание текста по центру в блоке div с помощью свойства text-align.
Создайте стиль для выпадающего меню с помощью псевдоэлемента :hover.
Добавьте тень на текст с помощью свойства text-shadow.
Создайте стиль для анимации появления элемента на странице с помощью свойства opacity.
Установите шрифт размером 18 пикселей для всех заголовков на странице.

Решения

Файл 1.html

Файл 2.html

Файл 3.html

Файл 4.html

Файл 5.html

Файл 6.html

Файл 7.html

Файл 8.html

Файл 9.html

Файл 10.html

Файл 11.html

Файл 12.html

Файл 13.html

Файл 14.html

Файл 15.html

Файл 16.html

Файл 17.html

Файл 18.html

Файл 19.html

Файл 20.html

Файл 21.html

Файл 22.html

Файл 23.html

Файл 24.html

Файл 25.html

Файл 26.html

Файл 27.html

Файл 28.html

Файл 29.html

Файл 30.html

Файл 31.html

Файл 32.html

Файл 33.html

Файл 34.html

Файл 35.html

Файл 36.html

Результат

Создать все виды заголовков с текстом "Hello world" c классом "heading"
Каждому заголовку также дать id (к прим. heading-1, heading-2...)
Задать всем заголовкам цвет текста на красный
Второму заголовку синий
Третьему заголовку поменять задний фон на чёрный
Четвертому заголовку сделать border и округлить углы
Пятому заголовку создать :hover эффект (любой)
Создайте 6 input с разными типами.
Создать нумерованный список из 4 элементов с текстом “Нумерованный”.
Создать маркированный список из 4 элементов с текстом “Маркированный” и квадратным маркером.
Создайте веб-страницу с зеленым фоном и белым текстом из 30 слов.
Создать 6 блоков с нумерацией и такими параметрами (ширина 100px и высота 100px, зеленого цвета , внешним отступом 10px). Их родительским элементом должен быть container.
Поставить все блоки по центру страницы.
Добавьте тэг iframe на вашу страницу.
Сделайте простую форму регистрации на сайте (Только верстка).
Сделайте таблицу на странице.
Создайте стиль для заголовка h1 с красным цветом текста
Установите шрифт Arial для всех параграфов на странице.
Добавьте тень на блок div с помощью свойства box-shadow.
Установите фоновый цвет #f0f0f0 для всего документа.
Создайте анимацию, которая будет мигать красным цветом.
Установите отступы внутри блока div с помощью свойства padding.
Создайте стиль для ссылок, которые будут менять цвет при наведении на них курсора.
Добавьте границу вокруг изображения с помощью свойства border.
Создайте стиль для списка ul с маркерами в виде квадратов.
Установите ширину и высоту блока div с помощью свойств width и height.
Создайте стиль для таблицы, который будет делать каждую вторую строку серой.
Добавьте эффект перехода при наведении на кнопку с помощью свойства transition.
Установите фоновое изображение для элемента с помощью свойства background-image.
Создайте стиль для формы с полями для ввода текста и кнопкой отправки.
Добавьте рамку вокруг текстового поля с помощью свойства outline.
Установите выравнивание текста по центру в блоке div с помощью свойства text-align.
Создайте стиль для выпадающего меню с помощью псевдоэлемента :hover.
Добавьте тень на текст с помощью свойства text-shadow.
Создайте стиль для анимации появления элемента на странице с помощью свойства opacity.
Установите шрифт размером 18 пикселей для всех заголовков на странице.