lab_4_4

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

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

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

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

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

Введение

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

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

Задачи HTML

Используйте 3 способа подключения CSS.
Сделайте все абзацы <p> красного цвета.
Сделайте все <h1> зеленого цвета.
Сделайте все <h2> голубого цвета.
Сделайте все <h3> оранжевого цвета.
Сделайте первый на странице абзац <p> зеленого цвета.
Сделайте второй на странице абзац <p> красного цвета.
Сделайте все абзацы <h2> шириной 300px.
Сделайте все таблицы <table> шириной 400px, высотой 200px.
Поставьте все <h1> по центру.
Поставьте все <h2> по правому краю.
Сделайте так, чтобы текст в абзацах <p> был выровнен одновременно и по правому и по левому краю.
Сделайте так, чтобы во втором абзаце <p> текст был выровнен по центру.
Поставьте все <th> по левому краю.
Поставьте все <td> по центру.
Сделайте все <td> жирным.
Сделайте <h1> нежирным.
Сделайте одновременно <th>, <h1> и <h2> нежирным.
Сделайте все <h2> курсивом.
Сделайте все абзацы <p> курсивом, а первый абзац - нет.
Сделайте все <h2> 20px.
Сделайте все абзацы <p> 15px.
Сделайте для абзацев <p> шрифт Arial.
Сделайте для <h2> шрифт Times New Roman.
Сделайте для <h3> любой шрифт без засечек.
Сделайте межстрочный интервал для абзацев <p> в 30px.
Закомментируйте некоторые стили для абзацев.
Для <p> сделайте шрифт Arial, 16 пикселей, курсив, жирный, межстрочный интервал в 30px.
Для <h1> сделайте следующий шрифт: нежирный, 20 пикселей, Verdana.
Сделайте красную строку в абзацах 30px.
Для второго абзаца <p> уберите красную строку.
Поставьте текст в таблице <table> по верхнему краю по вертикали.
Поставьте текст в <th> по центру по вертикали.
Повторите страницу по данному по образцу.
Повторите страницу по данному по образцу.

Задачи CSS

Создать анимированный кнопку с использованием CSS
Создать адаптивный макет страницы с помощью CSS Grid
Стилизовать форму ввода данных с использованием CSS
Создать анимированное меню навигации с использованием CSS
Изучить и применить различные типы селекторов в CSS
Создать градиентный фон с использованием CSS
Изучить и применить различные свойства шрифтов в CSS
Создать анимированный слайдер изображений с использованием CSS
Изучить и применить различные методы позиционирования элементов в CSS
Создать адаптивный макет с использованием медиа-запросов в CSS
Изучить и применить различные техники создания анимаций с помощью CSS
Создать стилизованные карточки товаров с использованием CSS
Изучить и применить различные единицы измерения в CSS (px, em, rem, %)
Создать анимированную загрузку страницы с использованием CSS
Изучить и применить различные способы создания теней и эффектов в CSS

Решения HTML

Файл 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

CSS Файл 1.html

CSS Файл 2.html

CSS Файл 3.html

CSS Файл 4.html

CSS Файл 5.html

CSS Файл 6.html

CSS Файл 7.html

CSS Файл 8.html

CSS Файл 9.html

CSS Файл 10.html

CSS Файл 11.html

CSS Файл 12.html

CSS Файл 13.html

CSS Файл 14.html

CSS Файл 15.html

Результат HTML

Используйте 3 способа подключения CSS.
Сделайте все абзацы <p> красного цвета.
Сделайте все <h1> зеленого цвета.
Сделайте все <h2> голубого цвета.
Сделайте все <h3> оранжевого цвета.
Сделайте первый на странице абзац <p> зеленого цвета.
Сделайте второй на странице абзац <p> красного цвета.
Сделайте все абзацы <h2> шириной 300px.
Сделайте все таблицы <table> шириной 400px, высотой 200px.
Поставьте все <h1> по центру.
Поставьте все <h2> по правому краю.
Сделайте так, чтобы текст в абзацах <p> был выровнен одновременно и по правому и по левому краю.
Сделайте так, чтобы во втором абзаце <p> текст был выровнен по центру.
Поставьте все <th> по левому краю.
Поставьте все <td> по центру.
Сделайте все <td> жирным.
Сделайте <h1> нежирным.
Сделайте одновременно <th>, <h1> и <h2> нежирным.
Сделайте все <h2> курсивом.
Сделайте все абзацы <p> курсивом, а первый абзац - нет.
Сделайте все <h2> 20px.
Сделайте все абзацы <p> 15px.
Сделайте для абзацев <p> шрифт Arial.
Сделайте для <h2> шрифт Times New Roman.
Сделайте для <h3> любой шрифт без засечек.
Сделайте межстрочный интервал для абзацев <p> в 30px.
Закомментируйте некоторые стили для абзацев.
Для <p> сделайте шрифт Arial, 16 пикселей, курсив, жирный, межстрочный интервал в 30px.
Для <h1> сделайте следующий шрифт: нежирный, 20 пикселей, Verdana.
Сделайте красную строку в абзацах 30px..
Для второго абзаца <p> уберите красную строку.
Поставьте текст в таблице <table> по верхнему краю по вертикали.
Поставьте текст в <th> по центру по вертикали.
Повторите страницу по данному по образцу.
Повторите страницу по данному по образцу.