Newcomposers.ru

IT Мир
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Задания по 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. Запустите код в своем браузере и устраните ошибки в тексте. Обратите внимание, что после получения абзацем фокуса, браузер автоматически будет подсвечивать слова с ошибками до тех пор, пока все ошибки не будут исправлены. Показать решение.

Читать еще:  Нумерация страниц html

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

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

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

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

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

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

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

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

Тесты на знание Web-технологий

Теперь на сайте доступно тестирование на знание следующих тем: HTML, CSS, JavaScript, PHP, SQL.

Каждый тест состоит из 10-ти вопросов по определённой теме. Я старался в каждом вопросе затрагивать самые разнообразные области применения конкретного языка, чтобы максимально тщательно проверить Ваш уровень знаний.

Безусловно, все тесты бесплатные и пройти их может любой желающий.

Порядок прохождения теста:

  1. Переходите по ссылке «Начать тестирование» у соответствующего теста.
  2. Отвечаете на поставленные вопросы, выбрав единственный правильный вариант.
  3. По завершению тестирования Вы увидите свой балл, количество ошибок, а также разбор каждого вопроса из теста.

Внимание! Вернуться к предыдущему вопросу не получится, поэтому прежде, чем отвечать, думайте.

Доступные на данный момент тесты

  • Всего тест прошло: 77134 человека
  • Средний балл: 2.83 из 5 баллов.

Тест на знание основ HTML. От Вас потребуется знание основных HTML-тегов, а также грамотное их использование. Так же необходимо понимание особенностей стандарта XHTML 1.1.

  • Всего тест прошло: 33619 человек
  • Средний балл: 3.36 из 5 баллов.

Тест проверяет знания по основам CSS. Для успешного прохождения теста Вы должны знать основные виды селекторов (их синтаксис), знать основные свойства и их возможные значения, а также знать назначение самых популярных псевдоэлементов.

JavaScript

  • Всего тест прошло: 25187 человек
  • Средний балл: 3.3 из 5 баллов.

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

  • Всего тест прошло: 33484 человека
  • Средний балл: 3.03 из 5 баллов.

Данный тест проверяет Ваши знания по языку PHP. От Вас требуется знание основных конструкций PHP, работы с переменными, сессий, реализации редиректа и прочих стандартных вещей.
Убедительная просьба: В тесте содержится много вопросов по типу: «Что выведет скрипт?». Большая просьба, не надо копировать его и проверять. Будьте честны перед самими собой.

  • Всего тест прошло: 18132 человека
  • Средний балл: 3.28 из 5 баллов.

Данный тест проверяет Ваши знания по языку запросов SQL. Вопросы затрагивают только самые базовые знания этого языка, без какого-либо углубления. От Вас потребуется знание самых основных SQL-запросов, а также грамотное их использование.

Copyright © 2010-2020 Русаков Михаил Юрьевич. Все права защищены.

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

Читать еще:  Изменить порт vpn

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

Выберите книгу со скидкой:

История России. С древнейших времен до XVI века. 6 класс. Контурные карты

350 руб. 55.00 руб.

Контурные карты История России конец XVII-XVIII век. 8 класс. (Новые)

350 руб. 55.00 руб.

История России. 7 класс. Рабочая тетрадь.

350 руб. 137.00 руб.

История России. 6 класс. Рабочая тетрадь.

350 руб. 137.00 руб.

История России XX-начало XXI в. Атлас с контурными картами.

350 руб. 106.00 руб.

История России. XVI-конец XVII века. 7 класс. Контурные карты

350 руб. 55.00 руб.

История России. 8 класс. Рабочая тетрадь. История России. 8 класс. Рабочая тетрадь.

350 руб. 137.00 руб.

История России XIX – начало XX века. 9 класс. Контурные карты (Историко-культурный стандарт)

350 руб. 55.00 руб.

История России. 9 класс. Рабочая тетрадь.

350 руб. 137.00 руб.

ЕГЭ. История России в таблицах и схемах для подготовки к ЕГЭ. 10-11 классы

350 руб. 80.00 руб.

ЕГЭ. История России в таблицах и схемах. 10-11 классы

350 руб. 80.00 руб.

История России в рассказах для детей. ХV — ХVII века

350 руб. 137.00 руб.

БОЛЕЕ 58 000 КНИГ И ШИРОКИЙ ВЫБОР КАНЦТОВАРОВ! ИНФОЛАВКА

Инфолавка — книжный магазин для педагогов и родителей от проекта «Инфоурок»

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

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

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

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

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

  • 28.10.2016
  • 631
  • 27.10.2016
  • 833
  • 27.10.2016
  • 611
  • 27.10.2016
  • 580
  • 27.10.2016
  • 698
  • 27.10.2016
  • 5360
  • 27.10.2016
  • 674

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

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

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

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

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

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

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

  • Задание № 1.1 – «Разметка и эскиз первой HTML-страницы»
Читать еще:  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. Создание раскрывающихся меню с иерархической структурой»

    Все представленные материалы являются интеллектуальной собственностью.
    При цитировании материалов ссылка на сайт обязательна!

    Ссылка на основную публикацию
    Adblock
    detector