html5 задания для практики
HTML Упражнения
Вы можете проверить свои навыки HTML с помощью упражнений SchoolsW3.
Упражнения
Мы собрали разные HTML упражнения с ответами для каждой HTML главы.
Попробуйте решить упражнения, отредактируя код. Посмотрите «подсказку», если вы забыли или незнаете ответ.
Подсчет баллов
Вы получите 1 балл за каждый правильный ответ. Общие баллы отображаются в левой панели.
HTML Упражнения
SchoolsW3 Сертификат
Идеальное решение для профессионалов, которым необходимо совмещать работу, семью, дом и карьеру.
Уже выдано более 10 000 сертификатов!
HTML Сертификат документы на ваши знания HTML.
CSS Сертификат документы на ваши знания CSS.
JavaScript Сертификат документы на ваши знания JavaScript и HTML DOM.
jQuery Сертификат документы на ваши знания jQuery.
PHP Сертификат документы на ваши знания PHP и SQL (MySQL).
XML Сертификат документы на ваши знания XML, XML DOM и XSLT.
Bootstrap Сертификат документы на ваши знания Bootstrap фреймворк.
Упражнения
Тесты
КАК СДЕЛАТЬ
ПОДЕЛИТЬСЯ
СЕРТИФИКАТЫ
Сообщить об ошибке
Если вы хотите сообщить об ошибке или сделать предложение, не стесняйтесь, присылайте нам электронное письмо:
Ваше предложение:
Спасибо, за вашу помощь!
Ваше сообщение было отправлено в SchoolsW3.
Топ Учебники
Топ Справочники
Топ Примеры
Веб Сертификаты
Знакомство с HTML и CSS
Тренажёр обновлён 21 мая 2021
Теория
Обязательный для прохождения материал, теория, задания и испытания.
Практика
Необязательные, но очень полезные задания. Доступны только по подписке.
16 заданий 1 испытание
Часть 1: Структура HTML-документа
Начинаем готовить разметку страницы блога, разбираемся из каких тегов она состоит и за что эти теги отвечают.
Часть 1: Структура HTML-документа
Как спроектировать сайт-портфолио
Из чего состоит сайт-портфолио и как правильно спроектировать структуру страницы.
19 заданий 1 испытание
Часть 2: Разметка текста
Продолжаем верстать страницу блога, изучаем, как правильно размечать текстовое содержание: абзацы, заголовки, подзаголовки, списки и многое другое.
Часть 2: Разметка текста
Как оформить сайт-портфолио
Подключаем базовые стили к сайту-портфолио, дорабатываем разметку.
Как опубликовать свой сайт на GitHub Pages
Разберёмся, как можно опубликовать сайт и привязать собственный домен на GitHub Pages.
15 заданий 1 испытание
Часть 3: Ссылки и изображения
Завершаем разметку страницы блога, добавляем навигационные ссылки, а также разбираемся с форматами изображений.
Часть 3: Ссылки и изображения
Навык: создание семантической разметки по макету
Это задача на проектирование информационной архитектуры страниц.
В качестве входных данных верстальщик получает от дизайнера графический макет и опираясь на него должен сделать разметку страницы. Разметка должна быть семантичной, выразительной, включать в себя все содержательные сущности, размеченные подходящими тегами, и не включать декоративные сущности.
Как добавить на сайт-портфолио ссылки и изображения
Скачиваем картинки для сайта, подключаем их и прописываем ссылки на странице.
15 заданий 1 испытание
Часть 4: Основы CSS
Начинаем оформление страниц блога и заодно разбираем базовые понятия CSS: правила, селекторы, свойства, значения, наследование и каскадирование.
Тренажёры
Начните проходить интерактивные задания прямо сейчас.
Если вы совсем новичок и хотите узнать, что такое HTML, CSS, JavaScript и PHP — этот тренажёр для вас.
Знакомство с веб-разработкой
На практике знакомимся с базовыми технологиями веб-разработки: HTML, CSS, JavaScript и PHP.
Тренажёр обновлён 23 июня 2021
Если вы хотите разобраться с основами HTML, CSS, JavaScript и PHP — вам сюда.
Знакомство с HTML и CSS
Изучаем основы HTML и CSS. На практике разбираемся с семантической разметкой и базовыми механизмами стилизации на примере небольшого сайта.
Тренажёр обновлён 21 мая 2021
Знакомство с JavaScript
Узнаем, как работает JavaScript в браузере. Научимся оживлять интерфейсы.
Тренажёр обновлён 3 февраля 2021
Знакомство с PHP
Добавляем PHP в разметку, работаем с веб-сценариями, данными и адресом.
Тренажёр обновлён 23 июня 2021
И ещё море крутых тренажёров для новичков и для опытных
Чтобы увидеть все тренажёры, нужно зарегистрироваться.
Практикум
Профессии
Информация
Услуги
Остальное
Регистрация
Нажимая кнопку «Зарегистрироваться», вы даёте своё согласие на обработку персональных данных в соответствии с «Политикой конфиденциальности» и соглашаетесь с «Условиями оказания услуг».
Восстановление доступа
Забыли пароль или потеряли доступ к профилю? Введите привязанную к профилю эл. почту, мы отправим вам письмо со ссылкой для восстановления.
Забыли привязать эл. почту к профилю? Напишите нам, мы поможем.
Практические работы по HTML
Ищем педагогов в команду «Инфоурок»
МЕТОДИЧЕСКИЕ УКАЗАНИЯ К ВЫПОЛНЕНИЮ ЛАБОРАТОРНЫХ РАБОТ
Введение
Web-дизайн- это разработка Web-узлов с учетом эстетических требований, вопросов навигации, доступа к данным и интерактивного взаимодействия. Web- дизайнер должен знать язык HTML и Internet-технологии, так как они оказывают влияние на процесс разработки сайта.
В настоящее время бытует мнение о том, что к разработке Web-узла можно приступать не имея специальных знаний и опыта, в результате появляются узлы неудачно разработанные. При этом они имеют большой объем и долго загружаются. Необходимо изучить основные принципы и соглашения, которым следуют большинство опытных Web-дизайнеров для создания Web-узлов, содержимое которых имеет красивый вид и несет функциональную нагрузку.
До появления специализированных инструментов разработки Web-страниц web-дизайнеры вынуждены были вручную создавать коды документов. Необходимость понимать структуру Web-документа и уметь использовать дескрипторы HTML и их атрибуты не исчезла и сейчас. Зная HTML, можно выбрать наилучший инструмент разработки и быстро решать возникающие проблемы.
Изучая НТМL, необходимо выяснить назначение и способы применения основных элементов языка. Web-дизайнеры, которые знают HTML, обычно добиваются больших успехов в создании Web-узлов, чем те, которые полагаются на программы, автоматически формирующие документы.
В настоящее время HTML является самым популярным языком World Wide Web. Документ, написанный на языке HTML представляет собой текстовый файл,содержащий данные и инструкции по форматированию. Средства, предназначенные для связывания документов и форматирования данных, называются дескрипторами (тегами).
В отличие от печатных изданий, Web-публикации способны реагировать на действие пользователя. Пользователь может заказывать по сети продукцию, запрашивать информацию, заполнять формы и т.д. Такое взаимодействие называются интерактивностью. Интерактивные элементы позволяют запрашивать и получать информацию от пользователя. Самыми распространенными интерактивными элементами являются HTML-формы, JavaScript-сценарии,PDF-формы, Java-аплеты, SWF-анимация и другие.
При разработке Web-документов полезно применять каскадные таблицы стилей (СSS). Использование СSS экономит время при создании Web-страниц особенно тогда, когда приходится изменять внешний вид элементов одного типа в составе готового Web-узла.
1. Лабораторная работа №1. Основы HTML
Цель: Научить студента применять основные теги HTML для создания webстраниц.
1.2. Общие теоретические сведения
1.2.1. Описание основных тегов для создания сайта
HTML имеет теговую структуру. Теги записываются в угловых скобках и могут содержать дополнительные параметры.
Не у всех тегов существуют соответствующие им закрывающие, такие теги иногда называют “пустыми”(empty) или одиночными.
BGCOLOR=»#FFFFFF” или в символьном значении: aqua black blue gray green lome maroon navy olive purple red silver
HTML различает шесть различных видов заголовков. Для их создания используются теги
— Базовый размер шрифта n= от 1 до 7
Списки в HTML бывают трех типов: ненумерованные, нумерованные и так называемые списки терминов. Ненумерованный список
Третьим видом списка является список терминов. Он очень удобен для оформления всевозможных глоссариев. Оформить такой список можно с помощью блока
1.3. Указания к выполнению
Перед тем как начать работать в блокноте необходимо создать папку и все созданные html-документы сохранять в этой папке.
1.Создайте при помощи блокнота текстовый файл, присвоим имя index или main, т.е. будет являться главной страницей. Затем сохранить с расширением html (htm).
2.Введите заглавные теги для создания страницы.
Это тело документа
рис.1
4. Затем добавить заголовок, используя один из тегов
5. Далее идет создание списка: нумерованного и маркированного.
6. Использование тегов для выделения текста и шрифта.
8.Откройте main.html c помощью программы Internet Explorer.
В Internet Explorer для отображения исходного кода используется пункт меню View ð Source
1.4. Задания для самостоятельной работы
1. В html-документе задать цвет для фона, шрифта и ссылок.
2. «Моя первая страница» расположить в центре.
3. Создать список ( маркированный и нумерованный): расписание дисциплин.
5. Добавить ссылки на текстовый файл и поисковые системы: Yahoo, Yandex, Rambler.
2. Лабораторная работа №2. Создание таблиц.
Цель: Научить студентов свободно создавать таблицы, применяя вручную теги для написания таблиц не используя html-редакторы.Добавлять графику, при этом изменяя размеры, расположение изображения..
2.1. Общие теоретические сведения
Таблица создается с помощью конструкции
BACKGROUND=»*.GIF|JPG»- определяет фоновое изображение таблицы
Он во всем совпадает с тегом
Для управления выводом изображения в состав могут включаться такие атрибуты: src – источник изображения, имя файла или путь к файлу, width –ширина рисунка, height – высота рисунка, border – толщина рамки, alt – альтернативный текст, который появляется при наведении мыши на рисунок.
2.2. Указания к выполнению
1. Необходимо создать таблицу, которая должна содержать все теги для создания таблиц. 2. Вставить любые изображения на Web-страницы.
Сборник практических работ по созданию сайта с помощью языка «HTML»
Ищем педагогов в команду «Инфоурок»
Первое знакомство с тэгами HTML
Сохранить в вашу папку.
Открыть заново этот файл с помощью блокнота (не закрывая этот файл в браузере) и внести в текст страницы после BODY > в пустую строку тэги заголовков различных уровней (размеров).
Заголовок первого уровня
Заголовок второго уровня
Заголовок третьего уровня
Заголовок четвертого уровня
Заголовок пятого уровня
Заголовок шестого уровня
В окне браузера отобразится обновленная Web-страница. Закончить работу с файлом.
Работа 2. Форматирование шрифта.
Внести в текст страницы тэги, определяющие начертание шрифта и горизонтальных разделительных линий. Отделить этот фрагмент от остального текста с помощью горизонтальных разделительных линий.
Открыть файл из вашей папки первое_знакомство.htm через блокнот.
Внести в текст страницы тэги, между тегами
Заголовок шестого уровня
(в блокнот необходимо внести только то, что написано полужирным шрифтом в работе.)
Выделение
Усиленное выделение
Внести в текст страницы тэги, задающие списки нумерованные и ненумерованные, а также списки определений.
Первый элемент списка
Второй элемент списка
Третий элемент списка
Первый элемент списка
Второй элемент списка
Третий элемент списка
ТЕРМИН 1
Пояснение к термину 1
ТЕРМИН 2
Пояснение к термину 2
ТЕРМИН 3
Пояснение к термину 3
Сохранить изменения в блокноте. Активизировать браузер. В окне браузера отобразится обновленная Web-страница.
В итоге в файле первое_знакомство. htm у вас должно получиться
Закончить работу с файлом
Работа 3. Цветовые схемы. Шрифты.
Атрибуты задания цветовой схемы (цвета фона, текста и гиперссылок). Цвет на Web-странице задают либо его названием, либо числовым шести разрядным шестнадцатеричным кодом # RRGGBB (первые два разряда задают интенсивность красного цвета, вторые – зеленого и третьи – синего). Значение яркости цвета может меняться от минимальной 00 до максимальной FF. В таблице приведены примеры некоторых цветов:
Цвет текста ссылки
Цвет текста активной ссылки
Цвет текста просмотренной ссылки
Открыть файл первое_знакомство. htm через блокнот.
Для оформления страницы можно использовать следующую цветовую схему:
(. )описание атрибутов цвета производится в открытом теге BODY >(. )
Сохранить файл и Обновить страничку (цвет текста и цвет фона должен поменяться).
Закончить работу с файлом.
Работа 4. Вставка изображений.
IMG SRC =» image _ name «>
Открыть файл первое_знакомство. htm в блокноте.
Вставить в начале страницы картинку (после тега BODY >) с помощью тега:
Форматирование текста. Для выделения фрагментов текста используется тэг FONT >. Атрибут FACE определяет гарнитуру шрифта, атрибут COLOR – цвет и атрибут
Сохранить файл и Обновить страничку.
Выделим часть текста более крупным шрифтом и цветом и определим выравнивание
P ALIGN =» left «> FONT SIZE =»6″ COLOR =»# FF 0066″ FACE =» Arial » > Давайте, просто напечатаем простой текст для создания нашей странички, выровненный по левому краю.
P ALIGN =» right «> FONT SIZE =»5″ COLOR =»# FF 0000″ FACE =» Times New Roman » > Давайте, просто напечатаем простой текст для создания нашей странички, выровненный по правому краю.
P ALIGN =» center «> FONT SIZE =»4″ COLOR =»# FF 0011″ FACE =» Arial «> Давайте, просто напечатаем простой текст для создания нашей странички, выровненный по центру. FONT > P >
Сохранить файл и Обновить страничку). Закончить работу с файлом.
Работа 5. Оформление гиперссылок.
Открыть файл первое_знакомство.htm
Указатель ссылки в окне браузера выделяется подчеркиванием и особым цветом. При указании на него мышью, ее курсор превращается в значок «рука». Щелчок мыши по указателю, вызывает переход на документ, указанный в гиперссылке. Используем различные значения атрибута HREF для реализации различных реакций браузера:
Сохранить файл и Обновить страничку
А теперь с оформлением выравнивания и шрифтов Исправляем предыдущую запись.
A HREF =»вторая страница. htm «> P ALIGN =» center «> FONT SIZE =»4″ COLOR =»# FFaa 11″ FACE =» Arial «> Моя вторая страничка FONT > P > A >
Сохранить файл и Обновить страничку
Создадим вторую страничку. Для этого откроем Блокнот еще раз. И наберем в нем следующий текст.
TITLE >Моя вторая страница TITLE >
Сохраним файл под именем вторая_страница. htm
Запустить первый файл первое_знакомство. htm . Запустим гиперссылку Моя вторая страница.
Сохранить файл и Обновить обе странички
Работа 6-8. Творческое задание.
HTML код первой страницы.
Первое знакомство с тэгами HTML
Моя вторая страничка
Выделим часть текста более крупным шрифтом и цветом и определим выравнивание
Давайте, просто напечатаем простой текст для создания нашей странички, выровненный по левому краю.
Давайте, просто напечатаем простой текст для создания нашей странички, выровненный по правому краю.
Давайте, просто напечатаем простой текст для создания нашей странички, выровненный по центру.
Заголовок первого уровня
Заголовок второго уровня
Заголовок третьего уровня
Заголовок четвертого уровня
Заголовок пятого уровня
Заголовок шестого уровня
Жирный подчеркнутый курсив
Усиленное выделение
Первый элемент списка
Второй элемент списка
Третий элемент списка
Первый элемент списка
Второй элемент списка
Третий элемент списка
Пояснение к термину 1
Пояснение к термину 2
Пояснение к термину 3
HTML код второй страницы.
Моя вторая страница
Курс повышения квалификации
Дистанционное обучение как современный формат преподавания
Курс повышения квалификации
Современные педтехнологии в деятельности учителя
Курс профессиональной переподготовки
Математика и информатика: теория и методика преподавания в образовательной организации
Номер материала: ДВ-524338
Международная дистанционная олимпиада Осень 2021
Не нашли то что искали?
Вам будут интересны эти курсы:
Оставьте свой комментарий
Авторизуйтесь, чтобы задавать вопросы.
Минтруд предложил проект по реабилитации детей-инвалидов
Время чтения: 1 минута
В школе в Пермском крае произошла стрельба
Время чтения: 1 минута
Минпросвещения планирует прекратить прием в колледжи по 43 профессиям
Время чтения: 1 минута
Фальков поручил проверить знания студентов после нерабочих дней
Время чтения: 1 минута
Новый ГОСТ на окна с защитой для детей вступает в силу 1 ноября
Время чтения: 1 минута
Минобрнауки работает над изменением подходов к защите диплома
Время чтения: 1 минута
Подарочные сертификаты
Ответственность за разрешение любых спорных моментов, касающихся самих материалов и их содержания, берут на себя пользователи, разместившие материал на сайте. Однако администрация сайта готова оказать всяческую поддержку в решении любых вопросов, связанных с работой и содержанием сайта. Если Вы заметили, что на данном сайте незаконно используются материалы, сообщите об этом администрации сайта через форму обратной связи.
Все материалы, размещенные на сайте, созданы авторами сайта либо размещены пользователями сайта и представлены на сайте исключительно для ознакомления. Авторские права на материалы принадлежат их законным авторам. Частичное или полное копирование материалов сайта без письменного разрешения администрации сайта запрещено! Мнение администрации может не совпадать с точкой зрения авторов.