Html практические задания: Практикум | htmlbook.ru

Задания по 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 макета.

Практические задания по теме «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 – «Горизонтальные линии (тег <HR>)»
• Задание № 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 – «Создание формы с использованием тега <BR> »
• Задание № 6.2 – «Создание формы с использованием тега <HR> »
• Задание № 6.3 – «Создание формы с использованием тега <PRE> »
• Задание № 6.4 – «Создание формы с использованием таблиц»
• Задание № 6.5 – «Создание формы с использованием тега <P> »
• Задание № 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-страницы с помощью листа стилей – тег <style>. ..</style> (+ пример 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)

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

• Задание № 11.1 – Свойство className ( + пример 11.1)
• Задание № 11.2 – Свойство id. Метод innerHTML ( + пример 11.2)
• Задание № 11. 3 – Свойство style ( + пример 11.3)
• Задание № 11.4 – Свойство title ( + пример 11.4)

Практическая работа № 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. Создание раскрывающихся меню с иерархической структурой»

HTML-упражнений 1. Это базовые HTML-упражнения для начала… | Вишну Сандхи | Nerd For Tech

HTML-упражнения 1. Это основные HTML-упражнения для начала… | Вишну Сандхи | ботаник для техники | Medium

Это базовые упражнения HTML, с которых можно начать кодирование. Вы можете использовать веб-сайт https://codepen.io, чтобы попрактиковаться в этих примерах. Используйте Google для поиска, если вас ударили.

• Создайте два блока, как показано ниже, один за другим
• Создайте два элемента div в html
• Добавьте класс к каждому элементу div
• Классы можно использовать для стилизации элемента div

Визуальное представление блоков

Блок 1 имеет следующие свойства стиля.

1. Высота 200px
2. Ширина 300px
3. Фоновый цвет Красный
4. Ширина границы 5px
5. ГРЕЗОН по центру с обеих сторон

Коробка 2 имеет аналогичные свойства коробки 1 с некоторыми изменениями

1. цвет фона синий
2. цвет границы желтый

Создайте два блока div и поместите их внутрь другого div. Вложенные элементы div помогают организовать элементы и сгруппировать их.

Вложенные блоки

Блок 3

1. ширина: 358 пикселей;
2. высота: 620 пикселей;
3. фон: #B49999;
4. граница: 1px сплошная #000000;

Коробка 1

1. ширина: 278 пикселей;
2. высота: 243px;
3. фон: #ADB499;
4. граница: 1px сплошная #000000;

Коробка 2

1. ширина: 278 пикселей;
2. высота: 243px;
3. фон: #ADB499;
4. граница: 1px сплошная #000000;

Создайте адаптивные 8 блоков со следующими правилами. Для этого можно использовать CSS flex и grid. Отзывчивые блоки автоматически подстраивают свою ширину и высоту в зависимости от ширины и высоты экрана.

Рабочий стол

1. Ширина устройства более 1024 пикселей
2. 4 boxes per row
3. Margin between each box
4. Total 8 boxes

Desktop Size

Tablet

• 2 boxes in a row
• Device width 768px — 1024px
• Поле между блоками

Планшет

Мобильный

• 1 блок в строке
• Диапазон ширины устройства 360 пикселей — 600 пикселей
• Поле между блоками

Мобильный

Использовать мобильные симуляторы, доступные в браузерах, для тестирования на разных устройствах

Макет должен заполнять всю высоту страницы. Есть заголовок, боковая панель, основной контент и нижний колонтитул.

Это шаблон понятия для этого упражнения.

https://quill-walk-152.notion.site/HTML-Exercises-53bf3a8f242a46919b59bdc530601103.

Это поможет создать список задач.

1. Создание таблицы

Создайте таблицу со следующими стилями. Используйте тег таблицы.

пример таблицы

2. Создать ссылку

Создать ссылку на google.com и
1. При нажатии на ссылку она на той же странице
2. При нажатии на ссылку она должна открываться на новой странице

3. Создать список

• Создайте список элементов, используя теги ul и li.
• Альтернативные цвета фона.
• Между элементами есть пробел.

Список альтернативных цветов

4. Вложенный список

• Созданный вложенный список
• Использование UL и LI TAGS
• Place UL LIG Новичок

  NFT — образовательный медиацентр. Наша миссия – донести до новичка бесценные знания и опыт экспертов со всего мира. Чтобы узнать больше о нас, посетите https://www.nerdfortech.org/.

  Узнать больше от Nerd For Tech

  ---

  Получить приложение Medium

  Получить неограниченный доступ

  Вишну Сандхи

  58 Последователи

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

  Статус

  Карьера

  Преобразование текста в речь

  Проверьте свои навыки: Продвинутый текст HTML — Изучите веб-разработку семантические особенности.

  Примечание: Вы можете опробовать решения в интерактивных редакторах ниже. Однако может оказаться полезным загрузить код и использовать онлайн-инструмент, такой как CodePen, jsFiddle или Glitch, для работы над задачами.

  Если вы застряли, обратитесь к нам за помощью — см. раздел «Оценка или дополнительная помощь» внизу этой страницы.

  В этом задании мы хотим, чтобы вы превратили предоставленных животных и их определения в список описаний.

  Готовый пример должен выглядеть так:

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

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

  В этой задаче мы хотим, чтобы вы добавили некоторую семантику к предоставленному HTML следующим образом:

  • Превратите второй абзац в цитату на уровне блока и семантически укажите, что цитата взята из специальных возможностей.
  • Семантически размечайте «HTML» и «CSS» как аббревиатуры, предоставляя расширения в виде всплывающих подсказок.
  • Используйте нижний и верхний индексы, чтобы обеспечить правильную семантику для химических формул и дат и обеспечить их правильное отображение.
  • Семантически связывать машиночитаемые даты с датами в тексте.

  Готовый пример должен выглядеть следующим образом:

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

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

  Вы можете попрактиковаться в этих примерах в упомянутых выше интерактивных редакторах.

  Если вы хотите оценить свою работу или застряли и хотите обратиться за помощью:

  1. Поместите свою работу в общедоступный онлайн-редактор, такой как CodePen, jsFiddle или Glitch. Вы можете написать код самостоятельно или использовать исходные файлы, ссылки на которые приведены в приведенных выше разделах.
  2. Напишите сообщение с просьбой об оценке и/или помощи в разделе «Обучение» форума MDN Discourse. Ваш пост должен включать:
     • Описательный заголовок, такой как «Требуется оценка для расширенного теста навыков работы с текстом HTML 1».
     • Подробная информация о том, что вы уже пробовали и что вы хотели бы, чтобы мы сделали; например, сообщите нам, если вы застряли и нуждаетесь в помощи или хотите получить оценку.
     • Ссылка на пример, который вы хотите оценить или с которым вам нужна помощь, в общедоступном онлайн-редакторе (как указано в шаге 1 выше).