Сделать задание на html

Работа с текстом

Задача по HTML и CSS: работа с тегами для оформления текста и стилизация текста используя CSS.

Выполните все пункты задания и сравните с результатом. Для поиска неизвестных вам тегов и свойств используйте поиск справочника.

1. Создайте папку в удобном для вас месте на вашем компьютере
2. В этой папке создайте новый HTML документ — index.html
3. В index.html создайте HTML скелет документа
4. Создайте новый CSS файл — style.css
5. Подключите CSS файл к HTML файлу
6. Создайте заголовок первого уровня в теге body и напишите там текст «Оформление текста»
7. Добавьте данному заголовку класс title
8. В CSS файле в самом верху создайте селектор для тега body и напишите следующие стили — шрифт Arial, sans-serif, размер шрифта 16px, цвет текста #333, межстрочный отступ 1.5
9. В CSS файле создайте селектор для класса title, и напишите следующие стили — размер шрифта 40px, цвет текста #f03333, межстрочный отступ 1.2, все буквы заглавные
10. После заголовка создайте абзац и напишите там немного текста, можете использовать сайт-генератор случайного текста lipsum.com
11. После абзаца создайте заголовок второго уровня, напишите текст «Заголовок второго уровня» и придайте ему класс subtitle
12. В CSS файле создайте селектор для класса subtitle, и напишите следующие стили — размер шрифта 30px, цвет текста #12ac11, межстрочный отступ 1.2, подчеркивание текста снизу
13. После заголовка создайте абзац и напишите там немного текста, можете использовать сайт-генератор случайного текста lipsum.com
14. После абзаца создайте ненумерованный список с тремя пунктами
15. В каждом пункте напишите немного текста, на свой выбор
16. Задайте списку класс list
17. В CSS файле создайте селектор для класса list, и напишите следующие стили — размер шрифта 20px, цвет текста #444, все буквы наклонные, стиль маркеров списка — square

Результат

Если хотите поделиться своим решением, используйте сайты типа codepen.io и оставляйте ссылку в комментарии

Обсуждение ( 26 )

Войдите или зарегистрируйтесь для того чтобы оставлять комментарии

Источник

Практика по HTML и CSS

Здесь приведены задачи по HTML и CSS, которые выполняются прямо в браузере, с автоматической проверкой результатов.

Аудио и видео

Изображения

• Абсолютный адрес
• Относительный адрес
• Альтернативный текст
• Ширина картинок
• Размеры картинки
• Элемент
• Подпись под картинкой
• Подпись перед картинкой
• Картинки друг под другом
• Ширина картинки
• Плавающая ширина картинки
• Круглое изображение
• Выравнивание картинки
• Рамка вокруг картинок

Многоколоночная вёрстка

Основы CSS

• Подключение CSS-файла
• Ошибка в
• Добавление стиля
• Атрибут style
• Импорт шрифта
• Комментарии в CSS
• Селектор элемента
• Класс
• Добавление класса
• Идентификатор
• Добавление идентификатора
• Селектор атрибута

Переходы и анимация

Разделы веб-страницы

Списки

• Маркированный список
• Нумерованный список
• Буквенная нумерация
• Обратный список
• Римские числа
• Список с 11
• Список описаний
• Атрибут value
• Вложенный список
• Квадратные маркеры
• Прячем маркеры
• Символ в качестве маркера
• Рисунок в качестве маркера
• Горизонтальный список
• Римская нумерация
• Греческая нумерация
• Расстояние от маркера до текста
• Цвет списка
• Цвет маркеров
• Отступы в списке

Ссылки

• Создание ссылки
• Ссылка на Google
• Ссылка на email
• Ссылка для скачивания
• Атрибут target
• Ссылка на телефон
• Создание якоря
• Ссылка на якорь
• Картинка как ссылка
• Убираем подчёркивание
• Цвет ссылок
• Цвет фона у ссылок
• Активная ссылка
• Посещённая ссылка
• Стиль ссылки при наведении
• Ссылки без подчёркивания
• Пунктирное подчёркивание ссылок
• Двойное подчёркивание ссылок
• Рамка вокруг ссылки

Таблицы

• Создание таблицы
• Строки таблицы
• Таблица 2х2
• Картинки в таблице
• Заголовок таблицы
• Объединение колонок
• Объединение строк
• Тело таблицы
• Ячейка заголовка
• Подвал таблицы
• Ширина таблицы
• Выравнивание заголовка таблицы
• Выравнивание таблицы
• Цвет фона таблицы
• Зебра в таблице
• Поля в ячейках
• Расстояние между ячейками
• Рамка вокруг таблицы
• Рамка вокруг ячеек
• Линии в таблице
• Горизонтальное выравнивание в ячейках

Текст

• Элемент
• Абзацы
• Переносы строк
• Заголовок первого уровня
• Заголовки
• TEX
• Озон
• Площадь круга
• Важный текст
• Элемент
• Рыжая лиса
• Шрифт на веб-странице
• Шрифт иллюстрации
• Шрифт заголовка
• Свой шрифт
• Размер текста в пикселях
• Размер заголовка в em
• Размер заголовка в rem
• Цвет основного текста
• Цвет заголовка
• Выворотка заголовка
• Курсивный текст
• Жирный текст
• Нормальная жирность заголовка
• Выступающий инициал

Трансформация

• Поворот на 90°
• Отражение по горизонтали
• Поворот на -90°
• Отражение по вертикали
• Отражение картинки
• Сдвигаем вниз
• Сдвигаем вверх
• Наклон картинки
• Точка трансформации
• Перспектива
• Масштабирование кнопки
• Сдвиг при наведении
• Масштабирование картинки при наведении
• Масштабирование картинки при наведении 2

Фон

• Цвет по названию
• Шестнадцатеричный цвет
• Сокращённое значение цвета
• Цвет в RGB
• Фоновая картинка
• Полупрозрачный фон
• Повторение фона по горизонтали
• Повторение фона по вертикали
• Запрет повторения фона
• Положение фона
• Фиксация фона
• Масштабирование фона
• Масштабирование фона 2
• Масштабирование фона 3

Формы

• Создание формы
• Атрибут method
• Атрибут action
• Текстовое поле
• Ширина поля
• Длина текста
• Подсказка
• Блокировка поля
• Обязательное поле
• Элемент
• Вывод текста
• Поле для пароля
• Размеры
• Элемент
• Многострочный текст
• Отправка формы
• Картинка в
• Очистка формы
• Переключатели
• Выбор переключателя
• Флажки
• Поле со списком
• Выбор флажка
• Раскрывающийся список
• Блокировка списка
• Блокировка пункта списка
• Список множественного выбора
• Поиск по сайту
• Выбор пунктов списка

Фреймы

Элементы HTML

• Привет, мир!
• Открывающие и закрывающие теги
• Открывающие теги
• Закрывающие теги
• Вложение элементов
• Добавление комментария
• Доктайп
• Структура HTML-кода
• Кодировка документа
• Добавление элемента
• Содержимое элемента
• Атрибут lang
• Выделение текста
• Обязательный атрибут
• Порядок тегов
• Ошибки в абзацах
• Пересечение тегов
• Последовательность элементов
• Закрывающие теги списка
• Закрывающие теги таблицы
• Лишние атрибуты
• Обязательные элементы

Источник