Простые задания html

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

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

Наш задачник по основам 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. Не забудьте использовать в заголовке документа служебный тег . Показать решение.

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

Практические работы по HTML

Как организовать дистанционное обучение во время карантина?

Помогает проект «Инфоурок»

Практические работы по HTML

Создание простейшего файла HTML

1. Создайте личную папку, куда вы будете сохранять все файлы своего сайта.

2. Нажмите правой кнопкой мыши и выберите «Создать» — «Пустой файл».

3. Введите имя файла rasp.html.

4. Нажмите правой кнопкой мыши «Открыть с помощью» — «Mousepad»

5. Наберите простейший html документ:

Учебный файл HTML

Расписание занятий на среду.

6. Сохраните документ, закройте редактор.

7. Откройте документ rasp.html двойным щелчком мыши, и проверьте результат.

Управление расположением текста на экране

1. Выполните шаг №4 из предыдущего задания, для файла rasp.html

2. Внести изменения в файл rasp.html, расположив слова Расписание, занятий, на среду на разных строках.

3. Сохраните текст с внесенными изменениями в файле rasp.html.

4. Откройте документ rasp.html двойным щелчком мыши, и проверьте результат.

Не удивляйтесь тому, что внешний вид вашей Web-страницы не изменился.

Управление расположением текста на экране 2

1. Выполните шаг №4 из первого задания, для файла rasp.html

2. Внести изменения в файл rasp.html:

3. Сохраните текст с внесенными изменениями в файле rasp.html.

4. Откройте документ rasp.html двойным щелчком мыши, и проверьте результат.

Внешний вид строк должен поменяться. Отчего зависит изменение текста?

Тег перевода строки
отделяет строку от последующего текста или графики.

тоже отделяет строку, но еще добавляет пустую строку, которая зрительно

1. Внесите изменения в файл RASP.HTML

Учебный файл HTML

3. Сохраните текст с внесенными изменениями в файле rasp.html.

4. Откройте документ rasp.html двойным щелчком мыши, и проверьте результат.

1. Внесите изменения в файл RASP.HTML

Учебный файл HTML

3. Сохраните текст с внесенными изменениями в файле rasp.html.

4. Откройте документ rasp.html двойным щелчком мыши, и проверьте результат.

5. Ответьте на вопрос, с помощью каких тегов задается подчеркнутый, курсив, полужирный шрифт?

Задание размеров символов Web-страницы

Существует два способа управления размером текста, отображаемого браузером:

использование стилей заголовка,

задание размера шрифта основного документа или размера текущего шрифта.

Используется шесть тегов заголовков: от

(тег двойной, т.е. требует закрытия).

Каждому тегу соответствует конкретный стиль, заданный параметрами настройки браузера.

1. Внесите изменения в файл RASP.HTML

Учебный файл HTML

Расписание занятий

3. Сохраните текст с внесенными изменениями в файле rasp.html.

4. Откройте документ rasp.html двойным щелчком мыши, и проверьте результат.

5. Замените тег h1 на h2-h6, и посмотрите как меняется размер загаловка.

Установка размера текущего шрифта

Тег шрифта позволяет задавать размер текущего шрифта в отдельных местах текста в

диапазоне от 1 до 7.

1. Внесите изменения в файл RASP.HTML

Учебный файл HTML

3. Сохраните текст с внесенными изменениями в файле rasp.html.

4. Откройте документ rasp.html двойным щелчком мыши, и проверьте результат.

5. Замените размер шрифта на другие, и посмотрите как меняется размер текста.

Установка цвета шрифта

Тег предоставляет возможности управления гарнитурой, цветом и размером текста.

Для изменения цвета шрифта можно использовать в теге атрибут COLOR=”X”. Вместо

“ X” надо подставить английское название цвета в кавычках (“ ”), либо его шестнадцатеричное

значение. При задании цвета шестнадцатеричным числом необходимо представить этот цвет

разложенным на три составляющие: красную (R – Red), зелѐную (G – Green), синюю (B – blue),

каждая из которых имеет значение от 00 до FF. В этом случае мы имеем дело с так называемым

Примеры записи текста в формате RGB приведены в Таблице 1:

1. Внесите изменения в файл RASP.HTML

Учебный файл HTML

занятий на среду.

3. Сохраните текст с внесенными изменениями в файле rasp.html.

4. Откройте документ rasp.html двойным щелчком мыши, и проверьте результат.

5. Поменяйте цвет на другой, и посмотрите результат работы тега font.

Выравнивание текста по горизонтали.

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

с атрибутом align, который определяет способ выравнивания. Атрибут align может принимать значения: left, right, center, justify выравнивание по левому краю, правому краю, по центру и ширине соответственно.

1. Внесите изменения в файл RASP.HTML

Учебный файл HTML

занятий на среду.

3. Сохраните текст с внесенными изменениями в файле rasp.html.

4. Откройте документ rasp.html двойным щелчком мыши, и проверьте результат.

Сделайте Web-страницу по следующему образцу.

В скобочках указан цвет текста. Обязательно должно присутствовать выравнивание текста.

Файлу дайте название biscuit.html

Бесплатный
Дистанционный конкурс «Стоп коронавирус»

• Добрынин Иван ЮрьевичНаписать 7536 28.10.2016

Номер материала: ДБ-295911

Добавляйте авторские материалы и получите призы от Инфоурок

Еженедельный призовой фонд 100 000 Р

28.10.2016 631

27.10.2016 832

27.10.2016 610

27.10.2016 580

27.10.2016 696

27.10.2016 5359

27.10.2016 674

Не нашли то что искали?

Вам будут интересны эти курсы:

Все материалы, размещенные на сайте, созданы авторами сайта либо размещены пользователями сайта и представлены на сайте исключительно для ознакомления. Авторские права на материалы принадлежат их законным авторам. Частичное или полное копирование материалов сайта без письменного разрешения администрации сайта запрещено! Мнение редакции может не совпадать с точкой зрения авторов.

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

Практика

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

Аудио и видео

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

Изображения

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

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

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

Основы CSS

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

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

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

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

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

Списки

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

Ссылки

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

Таблицы

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

Текст

• Элемент

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

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

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

Формы

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