Примеры задания по html. Комплекс лабораторно-практических заданий "Язык HTML". Используйте правильный тэг Doctype

Задачи по основам HTML призваны закрепить работу с набором следующих тем: структура HTML , комментарии в HTML, основные теги , основные атрибуты HTML . .

Задачи по изображениям в HTML: вставка изображения в HTML (HTML код изображения), размер HTML изображения , выравнивание изображения … в HTML.

Задания по углубленной работе с HTML и CSS

Задания по HTML с Emmet. Быстрая верстка , команды Emmet (так называемая шпаргалка Emmet ). После выполнения задач с плагином Emmet скорость вашей верстки/разработки вырастет в разы. .

Задания по CSS-селекторам. Селекторы CSS : css селекторы классов , css селекторы атрибутов , соседние селекторы css , контекстные селекторы css, дочерние селекторы +в css , приоритет селекторов . .

Работа CSS-позиционирования важна для понимания сложной верстки. Здесь приводятся задачи на понимание и работу с: position absolute , position relative , position fixed и position static , CSS-свойств top left bottom right . .

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

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

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

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

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

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

Методические разработки практических работ по информатике по темам "Язык разметки HTML" и "Современные web-технологии" (для учащихся средних классов).

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

Например, для Windows подойдет Notepad++ (notepad-plus-plus.org). В текстовом редакторе Notepad++ для того, чтобы выполнялся перенос длинных строк, надо в меню выбрать командуВид -> Перенос строк. Также очень хорошим текстовым редактором является Notepad2 (flos-freeware.ch/notepad2.html). Однако он не поддерживает многостраничный режим работы. Установка переноса строк в нем выполняется с помощью командыView -> Word Wrap.

1. Html–документ. Абзацы, разрывы строк, выравнивание

1 Структура html-документа

Исходный код HTML-документа состоит из тегов и содержания.

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

Любой HTML документ всегда включает контейнеры html, headиbody, которые вложены друг в друга следующим образом:

Задание 1. Создайте файл и задайте ему структуру, которая приведена выше. Сохраните его.

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

Задание 2. Добавьте в документ контейнер title:

Сохраните файл и откройте в браузере. Найдите введенное вами содержание title.

Содержимое body отображается в окне браузера.

С помощью тега-контейнера pразмечают абзацы. Одиночный тегbrпозволяет перейти на новую строку без создания нового абзаца, т.е. создает разрыв строки.

Задание 3. Добавьте в контейнер bodyследующее содержимое:

Появление персональных компьютеров в начале семидесятых годов(параллельно с постепенной эволюцией крупных ЭВМ)сейчас расценивают как революционный переворот. Масштабы его влияния на человеческое общество сравнивают с последствиями от изобретения книгопечатания.

В мире уже сейчас имеются миллионы и миллиарды ЭВМ.
Их число продолжает неуклонно расти!

Сохраните. Обновите документ в браузере. Отметьте, сколько абзацев вы видите, где находится разрыв строки.

2 Выравнивание абзацев. Старый стиль

Выравнивание абзацев определяется значениями left(по левому краю),right(по правому),center(по центру) иjustify(по ширине). Эти значения могут быть присвоены свойствуalign(выравнивание), которое допустимо для многих тегов.

Так, например, выравнивание абзаца по центру можно задать так:

Задание 4. Для созданных ранее абзацев задайте выравнивание по ширине (для первого абзаца) и по правому краю (для второго).