Polytech-soft.com

ПК журнал
3 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Задания html css

Сборник упражнений и задач по основам HTML

Пару слов о задачнике

Наш задачник по основам HTML содержит стандартные упражнения и задачи с решениями на закрепление теоретических основ излагаемых в учебнике.

Если в ходе освоения учебного материала у вас возникнут трудности, пишите мне в индивидуальный ‘Чат с автором’ (по возможности стараюсь отвечать всем).

Чтобы посмотреть результат выполнения исходного кода решения задачи во фрейме кодового блока, используйте кнопку ‘Результат’ .

Оглавление задачника

Синтаксис HTML

1.1. Скопируйте исходный код нашей первой веб-страницы в свой редактор и для удобства восприятия отформатируйте его. Показать решение.

Условие задачи №1.1

1.2. Попробуйте написать по памяти код нашей первой веб-страницы. Показать решение.

1.3. Скопируйте исходный код нашей первой веб-страницы в свой редактор, после чего исправьте в нем все ошибки. Показать решение.

Условие задачи №1.3

1.4. Выполните инструкции, содержащиеся в исходном коде примера в теле документа. Для создания абзацев используйте парный тег

Условие задачи №1.4

1.5. Создайте веб-страницу, содержащую два коротких предложения, принадлежащих одному абзацу, но расположенных на разных строках. Используйте одиночный тег
(принудительный разрыв строки). Не забывайте про служебный тег . Показать решение.

Универсальные атрибуты html-элементов

2.1. Создайте веб-страницу, содержащую два коротких предложения, принадлежащих одному абзацу, но расположенных на разных строках. Сделайте так, чтобы второе предложение не отображалось в окне браузера. Используйте для этого парный тег и универсальный атрибут hidden. Показать решение.

2.2. Создайте веб-страницу, состоящую из двух абзацев, в которых будет по два коротких предложения, расположенных на разных строках. Цвет текста первого абзаца должен быть красным, а второго – синим. При наведении курсора на первый абзац, должна появляться подсказка «Я первый абзац», а при наведении на второй – «Я второй абзац». Используйте атрибут style, а в качестве его значения свойства CSS : «color: red» и «color: blue» . Также воспользуйтесь атрибутом title, не путая его с аналогичным элементом. Показать решение.

2.3. Выполните инструкции, содержащиеся в исходном коде примера в теле документа. Для подключения к абзацам требуемого класса используйте универсальный атрибут class. Показать решение.

Условие задачи №2.3

2.4. Скрипт в исходном коде примера позволяет найти в документе элемент с требуемым id и сделать цвет его шрифта красным. Зная это, сделайте текст второго абзаца красным. Показать решение.

Условие задачи №2.4

2.5. Преобразуйте второй абзац в исходном коде примера в редактируемый элемент с проверкой орфографии. Используйте для этого универсальные атрибуты contenteditable и spellcheck. Запустите код в своем браузере и устраните ошибки в тексте. Обратите внимание, что после получения абзацем фокуса, браузер автоматически будет подсвечивать слова с ошибками до тех пор, пока все ошибки не будут исправлены. Показать решение.

Условие задачи №2.5

2.6. Исправьте ошибки в исходном коде примера, после чего запустите его в своем браузере. Показать решение.

Условие задачи №2.6

Мнемоники и коды Юникод в HTML

3.1. Создайте веб-страницу, содержащую абзац с предложением «Сколько будет ½+⅓ ?». Чтобы задать красный цвет шрифта для суммы, используйте тег , а также универсальный атрибут style со значением «color: red» . Для дробей используйте мнемоники и коды Юникода (результат должен быть одинаков), которые можно найти в наших таблицах мнемоник здесь. Показать решение.

Читать еще:  Rdp через vpn настройка

3.2. Создайте веб-страницу, содержащую предложение: «Я открывающий тег «. Для знаков ‘ и ‘>’ используйте мнемоники, а чтобы задать зеленый цвет шрифта, используйте тег и универсальный атрибут style со значением «color: green» . Показать решение.

3.3. Создайте веб-страницу, содержащую предложение: «Чтобы вывести мнемонику ‘&’ на экран, необходимо в коде знак амперсанда заменить на его мнемонику!». При наведении курсора на мнемонику, должна появляться подсказка «Мнемоника». Используйте универсальный атрибут style и значение цвета green , а также универсальный атрибут title. Не забудьте использовать в заголовке документа служебный тег . Показать решение.

3.4. Исправьте ошибки в исходном коде примера, после чего запустите его в своем браузере. Показать решение.

Практика

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

Аудио и видео

  • Добавление аудио
  • Автовоспроизведение аудио
  • Зацикливание аудио
  • Элемент
  • Добавление видео
  • Размеры видеоплеера
  • Автовоспроизведение видео
  • Обложка видео
  • Зацикливание видео

Изображения

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

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

  • Две колонки
  • Три колонки
  • Заголовок в колонках
  • Ширина колонок
  • Расстояние между колонок
  • Линия между колонок
  • Пунктир между колонок
  • Блоки в колонках
  • Изображения в колонках
  • Запрет переноса в колонках

Основы CSS

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

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

  • Плавное изменение цвета
  • Масштабирование кнопки
  • Поворот на 360° при наведении
  • Сдвиг при наведении
  • Масштабирование картинки при наведении
  • Масштабирование картинки при наведении 2
  • Прозрачность при наведении
  • Мигающий текст
  • Сердце

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

  • Шапка веб-страницы
  • Подвал веб-страницы
  • Копирайт
  • Элемент
  • Навигация
  • Элемент
  • Шапка раздела
  • Дата публикации
  • Элемент
  • Создание статьи
  • Комментарии

Списки

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

Ссылки

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

Таблицы

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

Текст

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

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

    Формы

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

    Задания по основам работы с HTML и CSS

    Задачи по основам HTML призваны закрепить работу с набором следующих тем: структура HTML, комментарии в HTML, основные теги, основные атрибуты HTML. Задачи по основам.

    Задачи по работе с гиперссылками освещают вопросы: понятия гиперссылки, внешние гиперссылки, внутренние гиперссылки. Задачи на гиперссылки.

    Задачи по изображениям в HTML: вставка изображения в HTML (HTML код изображения), размер HTML изображения, выравнивание изображения… Задачи по работе с изображениями в HTML.

    Задания по углубленной работе с HTML и CSS

    Задания по HTML с Emmet. Быстрая верстка, команды Emmet (так называемая шпаргалка Emmet). После выполнения задач с плагином Emmet скорость вашей верстки/разработки вырастет в разы. Задания по Emmet.

    Задания по CSS-селекторам. Селекторы CSS: css селекторы классов , css селекторы атрибутов , соседние селекторы css , контекстные селекторы css, дочерние селекторы +в css , приоритет селекторов. Задания на CSS-селекторы.

    Задания по float css. Обтекание в HTML и CSS — хорошая возможность разместить блоки на одном уровне или построить многоколоночную страницу. Владея свойством float, можно отчасти управлять блочностью элемента, а зная как решать проблемы с обтеканием — не тратить время на поиски «ошибок». Задания на CSS Float.

    Работа CSS-позиционирования важна для понимания сложной верстки. Здесь приводятся задачи на понимание и работу с: position absolute, position relative, position fixed и position static, CSS-свойств top left bottom right. Задания по CSS-позиционированию.

    Читать еще:  Задания по html 9 класс

    Задания по верстке форм

    1. Сверстайте форму аутентификации на сайте, такую же как в Twitter Bootstrap (не используя этот фреймворк). Например, как в панели навигации Bootstrap.
    2. Сверстайте форму диспетчера на сайте
    3. Подключить jQuery-плагин для выбора даты/месяца из поля
    4. Создайте чекбокс по аналогии с социальной сетью.
    5. Создайте форму регистрации посетителя сайта
    6. Создайте форму подобной той, что сортирует товары в Яндекс.Маркет

    Одна из задач верстальщика — писать кроссбраузерный код. Код, который позволит страницам выглядеть в наибольшем количестве браузеров одинаково или максимально похоже. Задания на кроссбраузерность.

    Современные возможности CSS позволяют создавать замечательные CSS-анимации и работать с фоном раскрашивая его градиентной заливкой. Небольшой набор задач на CSS-анимацию.

    Задания на медиа запросы (мобильные сайты). Создание мобильной версии сайта — важная часть умений веб-разработчиков. Задания посвящены темам: создание мобильного сайта, проверка мобильной версии сайта. Задания на media queries.

    Задания по верстке psd макета и CSS-фреймворкам. Верстка сайта на основе psd макета — важнейшая часть работы веб-верстальщика. На уроках HTML мы рассматриваем основные шаги верстки из psd в HTML. Задания по верстке psd макета.

    Знакомство с HTML и CSS

    Курс обновлён 20 марта 2020

    Теория

    Обязательный для прохождения материал, теория, задания и испытания.

    6 глав , 95 заданий , 5 испытаний

    Практика

    Необязательные, но очень полезные задания. Доступны только по подписке.

    Глава 1: Основы HTML и CSS

    В этой главе мы под руководством инструктора Кекса познакомимся с основами вёрстки на примере небольшого лендинга.

    Глава 1: Основы HTML и CSS

    Как работать с сайтом на своём компьютере

    Где взять сайт для экспериментов и как открыть его на своём компьютере. Как вносить в него правки, и проверять, что они применились.

    16 заданий 1 испытание

    Глава 2: Структура HTML-документа

    Начинаем готовить разметку страницы блога, разбираемся из каких тегов она состоит и за что эти теги отвечают.

    Глава 2: Структура HTML-документа

    Как выбрать доменное имя

    Как придумать для вашего будущего сайта-портфолио подходящее доменное имя и проверить, что оно доступно для регистрации.

    Как спроектировать сайт-портфолио

    Из чего состоит сайт-портфолио и как правильно спроектировать структуру страницы.

    19 заданий 1 испытание

    Глава 3: Разметка текста

    Продолжаем верстать страницу блога, изучаем, как правильно размечать текстовое содержание: абзацы, заголовки, подзаголовки, списки и многое другое.

    Глава 3: Разметка текста

    Навык: создание семантической разметки по макету

    Это задача на проектирование информационной архитектуры страниц.

    В качестве входных данных верстальщик получает от дизайнера графический макет и опираясь на него должен сделать разметку страницы. Разметка должна быть семантичной, выразительной, включать в себя все содержательные сущности, размеченные подходящими тегами, и не включать декоративные сущности.

    Как оформить сайт-портфолио

    Подключаем базовые стили к сайту-портфолио, дорабатываем разметку.

    Как опубликовать сайт в интернете

    Разберёмся, как можно опубликовать сайт в интернете, что такое хостинги и чем они отличаются.

    15 заданий 1 испытание

    Глава 4: Ссылки и изображения

    Завершаем разметку страницы блога, добавляем навигационные ссылки, а также разбираемся с форматами изображений.

    Ссылка на основную публикацию
    ВсеИнструменты 220 Вольт
    Adblock
    detector
    ×
    ×