Polytech-soft.com

ПК журнал
5 просмотров
Рейтинг статьи
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» . Для дробей используйте мнемоники и коды Юникода (результат должен быть одинаков), которые можно найти в наших таблицах мнемоник здесь. Показать решение.

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

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

Читать еще:  Объединение ячеек по вертикали html

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

Практические задания по теме «Web-дизайн и программирование»

Язык гипретекстовой разметки HTML 4.0

Практическая работа № 1 – «Разметка страницы тегами HTML»

  • Задание № 1.1 – «Разметка и эскиз первой HTML-страницы»

Практическая работа № 2 – «Создание простого web-сайта»

  • Задание № 2.1 – «Создание первого web-сайта с тремя html-страницами» (+ пример: стр. 1, стр. 2, стр. 3)

Практическая работа № 3 – «Разметка web-страниц с использованием таблиц»

  • Задание № 3.1 – «Размещение таблиц на html-странице. Форматирование текста в таблице»
  • Задание № 3.2 – «Размещение таблиц на html-странице. Форматирование ячеек таблицы»
  • Задание № 3.3 – «Размещение таблиц на html-странице. Объединение ячеек таблицы»
  • Задание № 3.4 – «Создание web-страницы с использованием таблиц» (+ пример 3.4)

Практическая работа № 4 – «Дополнительные элементы языка HTML для форматирования web-страниц»

  • Задание № 4.1 – «Горизонтальные линии (тег )»
  • Задание № 4.2 – «Escape-поcледовательности»
  • Задание № 4.3 – «Физические и логические стили»

Практическая работа № 5 – «Форматирование web-страниц с использованием фреймов»

  • Задание № 5.1 – «Создание простых фреймовых структур»
  • Задание № 5.2 – «Создание сложных фреймовых структур»
  • Задание № 5.3 – «Форматирование элементов фреймовых структур»
  • Задание № 5.4 – «Создание сайта содержащего фреймовую структуру» (+ пример 5.4: стр. 1, стр. 2, стр. 3, стр. 4, стр. 5)

Практическая работа № 6 – «Отправка данных на web-сайт с использованием форм»

  • Задание № 6.1 – «Создание формы с использованием тега
    »
  • Задание № 6.2 – «Создание формы с использованием тега »
  • Задание № 6.3 – «Создание формы с использованием тега

»

  • Задание № 6.4 – «Создание формы с использованием таблиц»
  • Задание № 6.5 – «Создание формы с использованием тега

    »

  • Задание № 6.6 – «Создание формы с использованием cписка определений»
  • Задание № 6.7 – «Создание формы с использованием нумерованного списка»
  • Задание № 6.8 – «Создание формы с использованием с размещением флажков/переключателей по горизонтали»
  • Задание № 6.9 – «Создание формы с использованием с размещением флажков/переключателей в списке»
  • Задание № 6.10 – «Создание формы с использованием сетки переключателей»
  • Задание № 6.11 – «Создание html-документа с несколькими формами»
  • Практическая работа № 7 – «Размещение на web-странице мультимедийных объектов»

    • Задание № 7.1 – «Встаивание в web-странницу модулей, содержащих flash-графику» (+ пример 7.1)
    • Задание № 7.2 – «Встаивание в web-странницу модулей, содержащих avi-изображение» (+ пример 7.2)
    • Задание № 7.3 – «Создание web-страниц с элементами ActiveX» (+ пример 7.3)
    • Задание № 7.4 – «Создание сайта с внедрением мультимедийных модулей» (+ пример 7.4 и страница page1.php)

    Практическая работа № 8 – «Форматирование web-страниц с использованием таблиц стилей. Создание каскадных листов стилей (css)»

    • Задание № 8.1 – «Форматирование HTML-страницы с помощью листа стилей – тег (+ пример 8.1)
    • Задание № 8.2 – «Cоздание внешнего листа стилей для форматирования HTML-страниц (+ пример 8.2)
    • Задание № 8.3 – «Создание web-сайта с использованием листов стилей» (+ пример 8.3: стр. 1, стр. 2, стр. 3, стр. 4, стр. 5)
    • Задание № 8.4 – «Применение визуальных фильтров для Internet Explorer» (+ пример 8.4)
    • Задание № 8.5 – «Форматирование страниц с использованием CSS»

    Динамический HTML (DHTML)

    Практическая работа № 9 – «Объектная модель DHTML. События»

    • Задание № 9.1 – События onMouseOver , onMouseOut . Объекты self и status (+ пример 9.1)
    • Задание № 9.2 – Событие onDblClick (двойной щелчок). Метод alert (+ пример 9.2)
    • Задание № 9.3 – Событие onHelp (+ пример 9.3)
    • Задание № 9.4 – Событие onMouseMove (+ пример 9.4)
    • Задание № 9.5 – События onClick , onMouseOut , onMouseOver и onMouseUp (+ пример 9.5)
    • Задание № 9.6 – Использование форм и JavaScript (+ пример 9.6)
    • Задание № 9.7 – Событие onChange (+ пример 9.7)

    Практическая работа № 10 – «Объектная модель DHTML. Методы»

    • Задание № 10.1 – Методы click и alert . Свойство returnValue ( + пример 10.1)
    • Задание № 10.2 – Метод insertAdjacentHTML ( + пример 10.2)
    • Задание № 10.3 – Метод insertAdjacentText ( + пример 10.3)

    Практическая работа № 12 – «Объектная модель DHTML. Визуальные фильтроы в DHTML для Internet Explorer»

    • Задание № 12.1 – Фильтр переходов RevealTrans . Методы Apply , Play , Stop ( + пример 12.1)

    Практическая работа № 13 – «Объектная модель DHTML. Примеры программ на JavaScript. Управление окнами»

    • Задание № 13.1 – Объект Window . Метод open . Событие onClick ( + пример 13.1)
    • Задание № 13.2 – Объект Window . Методы open , clоse . Событие onClick ( + пример 13.2)
    • Задание № 13.3 – Объект navigator . Метод appName ( + пример 13.3)
    • Задание № 13.4 – Методы alert , confirm , promt ( + пример 13.4)
    • Задание № 13.5 – Метод scroll ( + пример 13.5)

    Практическая работа № 14 – «Объектная модель DHTML. Примеры программ на JavaScript. Создание слайд-шоу»

    • Задание № 14.1 – Коллекция тегов image . Атрибут src ( + пример 14.1)
    • Задание № 14.2 – Событие onChange . Массив Array . Свойство selectedIndex ( + пример 14.2)

    Практическая работа № 15 – «Объектная модель DHTML. Примеры программ на JavaScript. Работа с датой и временем»

    Практическая работа № 16 – «Объектная модель DHTML. Примеры программ на JavaScript. Абсолютное и относительное позиционирование элементов»

    Практическая работа № 17 – «Объектная модель DHTML. Примеры программ на JavaScript. Создание раскрывающихся меню с иерархической структурой»

    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-позиционированию.

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

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

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

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

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

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

    Практика

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

    Аудио и видео

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

    Изображения

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

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

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

    Основы CSS

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

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

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

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

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

    Списки

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

    Ссылки

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

    Таблицы

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

    Текст

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

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

    Формы

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