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

Содержание

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

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

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

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

Современные возможности 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 Лучшие упражнения — программы, упражнения и задания

Веб-сайт — это просто набор веб-страниц. Веб-страница или веб-документы, написанные на языке HTML (язык гипертекстовой разметки) . Эти веб-страницы можно просматривать с помощью любого веб-браузера и Интернета.

Язык HTML используется для написания кода и программ для создания веб-страницы. Создать веб-страницу легко, и вы можете научиться этому, выполнив несколько основных шагов, указанных ниже:

HTML-программу или страницу можно создать с помощью многих HTML-редакторов или текстовых редакторов. Эти редакторы представляют собой программное обеспечение, которое помогает нам писать наш код с помощью простого пользовательского интерфейса. Сегодня мы увидим, как создать html или веб-страницу с помощью редактора Блокнота.

Блокнот — это встроенный текстовый редактор в Windows Computers. Вы также можете найти похожие редакторы в операционных системах Mac и Linux.

Есть много расширенных редакторов HTML или программного обеспечения, также доступны. Тем не менее, мы рекомендуем использовать стандартный и простой редактор, такой как блокнот, для начинающих. Это всегда хороший способ начать изучение HTML.

Создание простой HTML-страницы с помощью редактора Блокнота

Выполните следующие четыре шага, чтобы создать свою первую веб-страницу в Блокноте.

Шаг 1: Откройте блокнот (Windows)

Windows 8 или более поздней версии:
Откройте экран пуска и поиск (введите блокнот)

Windows 7 или предыдущие Windows:
Открыть старт> Программы> Конечные.

Шаг 2: Создайте новый документ

Перейдите в меню блокнота: Файл > Новый

Откроется новый пустой документ, и вы сможете начать писать здесь свою первую HTML-программу.

Шаг 3: Напишите код HTML или программу

Напишите код HTML. Если вы еще ничего не знаете об HTML, прочтите несколько глав в разделе «Учебники по HTML».

Напишите свой собственный код HTML или просто скопируйте следующую простую программу HTML в блокнот.

<тело>

Мой первый заголовок

Мой первый абзац.

Шаг 4. Сохраните HTML-страницу

Перейдите в меню Блокнота: Файл > Сохранить (или используйте сочетание клавиш CTRL + S)

Вас попросят сохранить файл на вашем компьютере. Дайте ему имя с расширением .html и сохраните его (например, program.html)

Примечание: HTML-страницу следует сохранять с расширением .html с осторожностью.

Шаг 5. Просмотр страницы HTML с помощью браузера

Веб-браузеры — это программы или программное обеспечение, которые используются для просмотра веб-страниц/веб-сайтов. Вы можете найти Internet Explorer по умолчанию, если используете компьютер с Windows. Вы также можете загрузить другие популярные веб-браузеры, такие как Google Chrome или Firefox. Используйте любой из них.

Теперь просто откройте сохраненный HTML-файл в любом браузере:
Дважды щелкните файл или щелкните его правой кнопкой мыши и выберите «Открыть с помощью», чтобы выбрать другой браузер.

Ваш HTML-файл будет открыт в веб-браузере, и он покажет вывод на основе вашей HTML-программы.

Поздравляем, если вы смогли запустить свою первую HTML-программу.

Теперь вы можете узнать больше о тегах HTML и создать больше веб-страниц в формате HTML. Используя эти HTML-страницы, вы также можете легко создать свой собственный веб-сайт.

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

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

Разница между абзацем HTML и обычным разрывом строки:

Использование , он добавляет только один разрыв строки. При использовании тега

создается абзац с дополнительным интервалом до и после абзаца.

<голова> Разница между абзацем HTML и обычным разрывом строки | TutorialsClass.com <тело> Это обычный текст.
Это еще одна строка после разрыва строки.

Это первый абзац. Сюда можно добавить любой текст.

Это второй абзац. Это примерный текст.

Это другой абзац. Вы можете добавить несколько строк текста в этот абзац.

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

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

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

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

В этом задании мы хотим, чтобы вы разметили предоставленный HTML-код, используя семантические элементы заголовка и абзаца.

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

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

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

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

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

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

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

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

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

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

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

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

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

Штирлиц — Сеть печатных салонов в Перми

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