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

Задачи на основные CSS свойства

Перед решением задач изучите теорию к данному уроку.

На цвета

Для решения задач данного блока вам понадобятся следующие CSS свойства: color.

Сделайте все абзацы <p> красного цвета.

Сделайте все <h2> зеленого цвета.

Сделайте все <h3> голубого цвета.

Сделайте все <h4> оранжевого цвета.

На style

Для решения задач данного блока вам понадобятся следующие HTML атрибуты: style.

Сделайте первый на странице абзац <p> зеленого цвета.

Сделайте второй на странице абзац <p> красного цвета.

На ширину и высоту

Для решения задач данного блока вам понадобятся следующие CSS свойства: width, height.

Сделайте все абзацы <h3> шириной 300px.

Сделайте все таблицы <table> шириной 400px, высотой 200px.

На выравнивание

Для решения задач данного блока вам понадобятся следующие CSS свойства: text-align.

Поставьте все <h2> по центру.

Поставьте все <h3> по правому краю.

Сделайте так, чтобы текст в абзацах <p> был выровнен одновременно и по правому и по левому краю.

Сделайте так, чтобы во втором абзаце <p> текст был выровнен по центру.

Поставьте все <th> по левому краю.

Поставьте все <td> по центру.

На жирность

Для решения задач данного блока вам понадобятся следующие CSS свойства: font-weight.

Сделайте все <td> жирным.

Сделайте <h2> нежирным.

Сделайте одновременно <th>, <h2> и <h3> нежирным.

На курсив

Для решения задач данного блока вам понадобятся следующие CSS свойства: font-style.

Сделайте все <h3> курсивом.

Сделайте все абзацы <p> курсивом, а первый абзац – нет.

На размер шрифта

Для решения задач данного блока вам понадобятся следующие CSS свойства: font-size.

Сделайте все <h3> 20px.

Сделайте все абзацы <p> 15px.

На семейство

Для решения задач данного блока вам понадобятся следующие CSS свойства: font-family.

Сделайте для абзацев <p> шрифт Arial.

Сделайте для <h3> шрифт Times New Roman.

Сделайте для <h4> любой шрифт без засечек.

На межстрочный интервал

Для решения задач данного блока вам понадобятся следующие CSS свойства: line-height.

Сделайте межстрочный интервал для абзацев <p> в 30px.

На свойство-сокращение font

Для решения задач данного блока вам понадобятся следующие CSS свойства: font.

Закомментируйте все стили для абзацев.

Для <p> сделайте шрифт Arial, 16 пикселей, курсив, жирный, межстрочный интервал в 30px.

Для <h2> сделайте следующий шрифт: нежирный, 20 пикселей, Verdana.

На красную строку

Для решения задач данного блока вам понадобятся следующие CSS свойства: text-indent.

Сделайте красную строку в абзацах 30px.

Для второго абзаца <p> уберите красную строку.

На вертикальное выравнивание

Для решения задач данного блока вам понадобятся следующие CSS свойства: vertical-align.

Поставьте текст в таблице <table> по верхнему краю по вертикали.

Поставьте текст в <th> по центру по вертикали.

Повторите страницы по образцу

Повторите страницу по данному по образцу:

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

Повторите страницу по данному по образцу:

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

← Предыдущая страница Следующая страница →

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

10 лучших проектов для начинающих, чтобы практиковать навыки HTML и CSS

Обучение кодированию всегда увлекательно и весело для всех, и когда дело доходит до входа в мир программирования, большинство людей начинают с самого простого HTML и CSS . Путешествие каждого новичка в области программирования начинается с этих двух основных строительных блоков, и вам нужно проявить творческий подход, когда дело доходит до разработки красивого приложения.

 

Поначалу новичкам нравится создавать кнопки, добавлять ссылки, добавлять изображения, работать с макетом и делать множество интересных вещей в веб-дизайне, но когда дело доходит до создания проекта с использованием только HTML и CSS, они застревают и путаются. о том, что они должны сделать, чтобы практиковать все эти вещи. В конце концов, их знания ограничиваются только HTML и CSS. В любом случае, изучив все, в какой-то момент вы поймете, что создание проекта важно для практики навыков HTML и CSS. Вам нужно проверить, как HTML и CSS работают вместе, чтобы создать красивое внешнее приложение. Итак, вопрос в том, какие проекты для начинающих вы можете создать, чтобы практиковать все, что вы узнали… Давайте обсудим это.

1. Страница памяти

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

  • Страница My Tribute

2. Веб-страница с формой

Формы всегда являются неотъемлемой частью любого проекта, и вы будете работать с большим количеством форм в большинстве приложений, так почему бы не попрактиковаться раньше и не проверить свои знания . Как только вы познакомитесь с полем ввода или основными тегами в HTML для создания формы, создайте проект, используя все эти теги. Как использовать текстовое поле, флажок, переключатель, дату и другие важные элементы в одной форме. Вы узнаете, как придать правильную структуру веб-странице при создании формы. Знаний HTML/HTML5 достаточно, но вы можете использовать немного CSS, чтобы проект выглядел лучше. Воспользуйтесь помощью по ссылкам, приведенным ниже.

  • Форма опроса

3. Веб-сайт параллакса

Веб-сайт параллакса содержит фиксированные фоновые изображения, которые вы можете оставить на месте, и вы можете прокручивать страницу вниз, чтобы увидеть различные части изображения. Обладая базовыми знаниями HTML и CSS, вы можете придать веб-сайту эффект параллакса. Использование эффекта параллакса в веб-дизайне очень популярно и придает веб-странице красивый внешний вид. Попробуйте и разделите всю страницу на три-четыре разных раздела. Установите 3-4 фоновых изображения, выровняйте текст для разных разделов, установите поля и отступы, добавьте background-position и другие элементы и свойства CSS для создания эффекта параллакса. Вы можете получить помощь по ссылке, указанной ниже.

  • Веб-сайт Parallax

4. Целевая страница

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

5. Веб-сайт ресторана

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

  • Веб-сайт ресторана

6. Веб-страница мероприятия или конференции

Вы можете создать статическую страницу, содержащую мероприятие или конференцию. Люди, которые заинтересованы в посещении конференции, создают для них кнопку регистрации. Упомяните различные ссылки на спикера, место проведения и расписание вверху в разделе заголовка. Опишите цель конференции или категорию людей, которые могут получить пользу от этой конференции. Добавьте на свою веб-страницу введение и изображения спикера, информацию о месте проведения и основной цели конференции. Разделите страницу на разделы, добавьте верхний и нижний колонтитулы, демонстрирующие меню. Используйте правильный цвет фона, который может хорошо сочетаться друг с другом для различных разделов. Выберите стиль шрифта спуска и цвет шрифта, которые соответствуют теме вашей веб-страницы. Это требует глубоких знаний HTML/HTML5 и CSS. Вы можете получить помощь по ссылке, указанной ниже.

  • Веб-страница мероприятия

7.

Страница музыкального магазина

Если вы любитель музыки, вы можете создать для нее веб-страницу. Требуется знание HTML5/CSS3. Добавьте подходящее фоновое изображение, описывающее цель или содержание страницы. В разделе шапки добавить различные меню. Добавьте кнопки, ссылки, изображения и описание коллекции доступных песен. Внизу укажите ссылки для покупок, магазина, карьеры или контактной информации. Вы также можете добавить на свои веб-страницы другие функции, такие как пробная версия, подарочные карты или подписка. Сделайте его адаптивным, настроив окно просмотра или используя медиа-запросы и сетку. Вы можете получить помощь по ссылке, указанной ниже.

  • Веб-страница мероприятия

8. Сайт фотографии

Если у вас есть глубокие знания HTML5 и CSS3, вы можете создать одностраничный адаптивный сайт фотографии. Используйте flexbox и медиа-запросы для оперативности. Добавьте название компании с изображением (связанным с фотографией) вверху (целевая страница). Ниже продемонстрируйте свою работу, добавив несколько изображений. Упомяните контактную информацию фотографа внизу (нижний колонтитул). Добавьте кнопку для просмотра вашей работы. Эта кнопка приведет вас прямо в раздел изображений. Вам нужно позаботиться о полях, отступах, сочетании цветов, размере шрифта, стиле шрифта, размере изображения и стилей кнопки. Вы можете получить помощь по ссылке, указанной ниже.

  • Галерея изображений

9. Личное портфолио

Зная HTML5 и CSS3, вы также можете создать свое портфолио. Продемонстрируйте образцы своей работы и навыки в своем портфолио с вашим именем и фотографиями. Вы также можете добавить туда свое резюме и разместить полное портфолио в учетной записи GitHub. В разделе заголовка упомяните некоторые меню, такие как о, контакты, работа или услуги. Вверху добавьте одно из своих изображений и представьтесь там. Ниже добавьте несколько образцов работ и, наконец (нижний колонтитул), добавьте контактную информацию или учетную запись в социальной сети. Вы можете получить помощь по ссылкам, приведенным ниже.

  • Простое портфолио
  • Галерея портфолио

10. Техническая документация

Если вы немного знакомы с Javascript, вы можете создать веб-страницу с технической документацией. Это требует знания HTML, CSS и базового javascript. Разделите всю веб-страницу на две части. В левой части создается меню со всеми темами, перечисленными сверху вниз. С правой стороны необходимо указать документацию или описание тем. Идея состоит в том, что когда вы нажимаете на одну из тем в левой части, она должна загружать содержимое справа. Для щелчка вы можете использовать опцию закладки javascript или CSS. Вам не нужно делать его слишком замысловатым, просто придайте ему простой и снисходительный вид, который хорошо подходит для технической документации. Вы можете получить помощь по ссылкам, приведенным ниже.

  • Техническая документация

 

Полезная ссылка: 10 советов по эффективному веб-дизайну в 2019 

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

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


7 проектов для отработки навыков HTML и CSS для начинающих | by Avic Ndugu

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

Однако, если у вас нет практики, вы забываете большую часть того, чему научились. Поэтому в какой-то момент вы понимаете, что вам нужно практиковать то, что вы узнали. Иначе вы все забудете.

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

Женщина работает над проектом с помощью компьютера

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

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

1. Страница посвящения

Скриншот страницы посвящения

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

2. Форма опроса

Формы полезны при сборе данных в Интернете. Этот проект в основном будет проверять ваши навыки на всех видах входных данных. Это проверит ваше знание форм и структурирование вашей веб-страницы. Форма не требует отправки каких-либо данных.

Это сборка со страницы трибьюта. Для создания этого проекта потребуются знания html/html5.

3. Создание целевой страницы продукта

Целевая страница продукта — авторский проект

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

4. Создайте страницу технической документации

Страница проектной документации

Для этого потребуются некоторые знания HTML CSS и начальной загрузки или JavaScript. Основная идея такова: когда вы нажимаете на любую тему слева, она загружает этот контент справа.

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

5. Создайте веб-страницу личного портфолио

Портфолио, демонстрирующее проекты, над которыми вы работали.

Вы будете практиковать все навыки, которые вы изучили в HTML и CSS. Вам также необходимо знать, как обрезать изображения и изменять их размер. Если у вас нет вариантов, используйте Gimp. Он бесплатный, с открытым исходным кодом и доступен для Windows и Linux.

Если вы спешите сделать портфолио, вы можете прочитать статью Брайана о создании онлайн-портфолио с использованием готовой темы/шаблона.

6. Страница Google.com

Скриншот страницы google.com

Да, вы видели это много раз. Но сможете ли вы повторить это. Простая страница google.com со значками, логотипом Google, текстовым полем и двумя кнопками. Вы можете сделать двойник страницы google.com. В этом проекте вы делаете его похожим на google.com, а не на google.com.

Вам необходимо знать как HTML, так и CSS.

7. google.com Страница результатов поиска

Скриншот страницы результатов поиска Google

Вы создадите страницу в формате результатов поиска Google.

Оставить комментарий