Задачи по html и css
Сборник упражнений и задач по основам 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. Запустите код в своем браузере и устраните ошибки в тексте. Обратите внимание, что после получения абзацем фокуса, браузер автоматически будет подсвечивать слова с ошибками до тех пор, пока все ошибки не будут исправлены. Показать решение.
Условие задачи №2.5
2.6. Исправьте ошибки в исходном коде примера, после чего запустите его в своем браузере. Показать решение.
Условие задачи №2.6
Мнемоники и коды Юникод в HTML
3.1. Создайте веб-страницу, содержащую абзац с предложением «Сколько будет ½+⅓ ?». Чтобы задать красный цвет шрифта для суммы, используйте тег , а также универсальный атрибут style со значением «color: red» . Для дробей используйте мнемоники и коды Юникода (результат должен быть одинаков), которые можно найти в наших таблицах мнемоник здесь. Показать решение.
3.2. Создайте веб-страницу, содержащую предложение: «Я открывающий тег «. Для знаков ‘ и ‘>’ используйте мнемоники, а чтобы задать зеленый цвет шрифта, используйте тег и универсальный атрибут style со значением «color: green» . Показать решение.
3.3. Создайте веб-страницу, содержащую предложение: «Чтобы вывести мнемонику ‘&’ на экран, необходимо в коде знак амперсанда заменить на его мнемонику!». При наведении курсора на мнемонику, должна появляться подсказка «Мнемоника». Используйте универсальный атрибут style и значение цвета green , а также универсальный атрибут title. Не забудьте использовать в заголовке документа служебный тег . Показать решение.
3.4. Исправьте ошибки в исходном коде примера, после чего запустите его в своем браузере. Показать решение.
Практика CSS онлайн?
Подскажите хороший ресурс, на котором даются задания по CSS где нужно в «вэб IDE» выполнить задачу и нажать на кнопку «Проверить», чтобы попрактиковать навыки.
p.s. как html academy и w3schools
- Вопрос задан более года назад
- 2267 просмотров
Pavel Karinin, т.е. вы предлагаете готовый скачать шаблон и не глядя в код верстать его, и смотреть в код если чтото не получается?
p.s. по большей части интересует тренажёр с самыми типовыми задачами на CSS а не реальные рабочие условия, которые сложнее, во много раз сложнее.
а не реальные рабочие условия, которые сложнее, во много раз сложнее
чем ближе к реальности, тем больше «закалка» и быстрее научитесь
невозможно научиться водить машиной, если первый раз в жизни её видишь после лошади, и не знаешь про существование педалей, коробки передач, ручника который надо снять перед движением
ведь технологии на месте не стоят
Вы наверное про CSS4, что там нового будет? )
Ostin1, нет я не только про CSS4, ведь кроме типичных css и html (если мы про front) многое чего используется, а в back и подавно.
Почитайте например HTML & CSS: Design and Build Web Sites
о есть, вы считаете, что прочитать книгу 2011 года по HTML&CSS, в которой используется устаревший уже в HTML4.01 атрибут align=». «, в которой за всю книгу перечислено 68 CSS свойств
Вёрстка это не про чтение, это про практику. Прочитали раздел по таблицам, нашли в гугле картинку со сложной таблицей и сидите верстаете ее 3 часа. Прошли раздел по списками, нашли в гугле картинку с десятиуровневым списком и сидите верстаете его 3 часа. Прошли главу по формам, нашли в гугле картинку с формой-опросником и сидите верстаете ее 3 часа. Вот при такой практике у вас будет откладываться в голове все что нужно. При простом чтении — нет.
Знать о них нужно на случай если придется работать с проектом где они есть, но не более.
к сожалению «и более», не просто знать о них, но и уметь их использовать, поэтому позвольте с вами не согласиться в этой части.
Прочитав любую книгу вы пропустите очень многое, придется доучивать через статьи.
тут я с вами согласен, но Ostin1 выше намекал, что каждый по-разному умеет учиться — для кого-то достаточно книжку прочитать и для него это станет отрывной точкой, кому-то нужно сразу на практике — так он быстрее осваивает, а кому-то нужен наставник (я с этим сталкивался тоже). Кто бы и что бы не говорил про обучение верстке — вы прекрасно понимаете, что это нескончаемый (в некотором роде процесс) и для того чтобы начать этот процесс вовсе не обязательно сломя голову хвать все самое новое.
У новичков на тостере, чаще всего возникают проблемы с фильтрами и с тем как сделать блок не прямоугольной формы а с каким-нибудь вырезом или под углом
никого не хочу обидеть, но в 60% случаев новички используют ctrl+c и ctrl+v и даже не вникают в показанные им ответы, проходит время они забывают о том, как сделать этот скошенный угол в CSS и все повторяется. знаете почему? — потому что все ищут легкой жизни (наверное это правильно искать такую жизнь), но я о другом, я о том, что полное отсутствие фундаментальных навыков зачастую приводит новичков сюда с такими вопросами, в том числе тех навыков, которые на ваш взгляд кажутся устаревшими. Но доля истины в ваших словах, безусловно, есть.
UPD: Свежий пример и еще один, если не удалят с формулировкой «Ответ легко ищется в интернете»
Практика
Здесь приведены задачи по HTML и CSS, которые выполняются прямо в браузере, с автоматической проверкой результатов.
Аудио и видео
- Добавление аудио
- Автовоспроизведение аудио
- Зацикливание аудио
- Элемент
- Добавление видео
- Размеры видеоплеера
- Автовоспроизведение видео
- Обложка видео
- Зацикливание видео
Изображения
- Абсолютный адрес
- Относительный адрес
- Альтернативный текст
- Размеры картинки
- Ширина картинок
- Элемент
- Подпись под картинкой
- Подпись перед картинкой
- Картинки друг под другом
- Ширина картинки
- Плавающая ширина картинки
- Круглое изображение
- Выравнивание картинки
- Рамка вокруг картинок
Многоколоночная вёрстка
- Две колонки
- Три колонки
- Заголовок в колонках
- Ширина колонок
- Расстояние между колонок
- Линия между колонок
- Пунктир между колонок
- Блоки в колонках
- Изображения в колонках
- Запрет переноса в колонках
Основы CSS
- Подключение CSS-файла
- Ошибка в
- Добавление стиля
- Атрибут style
- Импорт шрифта
- Комментарии в CSS
- Селектор элемента
- Класс
- Добавление класса
- Идентификатор
- Добавление идентификатора
- Селектор атрибута
Переходы и анимация
- Плавное изменение цвета
- Масштабирование кнопки
- Поворот на 360° при наведении
- Сдвиг при наведении
- Масштабирование картинки при наведении
- Масштабирование картинки при наведении 2
- Прозрачность при наведении
- Мигающий текст
- Сердце
Разделы веб-страницы
- Подвал веб-страницы
- Шапка веб-страницы
- Копирайт
- Элемент
- Навигация
- Элемент
- Шапка раздела
- Дата публикации
- Элемент
- Создание статьи
- Комментарии
Списки
- Нумерованный список
- Маркированный список
- Римские числа
- Буквенная нумерация
- Обратный список
- Список описаний
- Список с 11
- Вложенный список
- Атрибут value
- Квадратные маркеры
- Прячем маркеры
- Символ в качестве маркера
- Рисунок в качестве маркера
- Горизонтальный список
- Римская нумерация
- Греческая нумерация
- Расстояние от маркера до текста
- Цвет списка
- Цвет маркеров
- Отступы в списке
Ссылки
- Создание ссылки
- Ссылка на Google
- Ссылка для скачивания
- Атрибут target
- Ссылка на email
- Ссылка на телефон
- Создание якоря
- Ссылка на якорь
- Картинка как ссылка
- Убираем подчёркивание
- Цвет ссылок
- Цвет фона у ссылок
- Активная ссылка
- Посещённая ссылка
- Стиль ссылки при наведении
- Ссылки без подчёркивания
- Пунктирное подчёркивание ссылок
- Двойное подчёркивание ссылок
- Рамка вокруг ссылки
Таблицы
- Создание таблицы
- Строки таблицы
- Заголовок таблицы
- Таблица 2х2
- Картинки в таблице
- Объединение колонок
- Объединение строк
- Ячейка заголовка
- Тело таблицы
- Подвал таблицы
- Ширина таблицы
- Выравнивание заголовка таблицы
- Выравнивание таблицы
- Цвет фона таблицы
- Зебра в таблице
- Поля в ячейках
- Расстояние между ячеек
- Рамка вокруг таблицы
- Рамка вокруг ячеек
- Линии в таблице
- Горизонтальное выравнивание в ячейках
Текст
- Элемент
Трансформация
- Поворот на 90°
- Отражение по горизонтали
- Поворот на -90°
- Отражение по вертикали
- Отражение картинки
- Сдвигаем вниз
- Сдвигаем вверх
- Наклон картинки
- Точка трансформации
- Перспектива
- Масштабирование кнопки
- Поворот на 360° при наведении
- Сдвиг при наведении
- Масштабирование картинки при наведении
- Масштабирование картинки при наведении 2
- Цвет по названию
- Шестнадцатеричный цвет
- Сокращённое значение цвета
- Цвет в RGB
- Фоновая картинка
- Полупрозрачный фон
- Повторение фона по горизонтали
- Повторение фона по вертикали
- Запрет повторения фона
- Положение фона
- Фиксация фона
- Масштабирование фона
- Масштабирование фона 2
- Масштабирование фона 3
Формы
- Создание формы
- Атрибут method
- Атрибут action
- Текстовое поле
- Ширина поля
- Длина текста
- Подсказка
- Блокировка поля
- Обязательное поле
- Элемент
- Вывод текста
- Поле для пароля
- Элемент
- Многострочный текст
- Размеры
Как быстро выучить HTML и CSS с нуля?
Изучение HTML и CSS – это первый шаг, который необходимо сделать, если вы хотите научиться верстать сайты или работать контент-менеджером. Это относительно простые технологии, которые можно выучить самостоятельно, после чего начать зарабатывать в интернете.
В этой статье мы расскажем, с чего лучше начать изучение HTML и CSS, что необходимо освоить в первую очередь, на каких сайтах можно найти бесплатные самоучители и справочную информацию, практические задания и тесты для проверки знаний.
Что такое HTML и CSS и зачем нужно их знать?
HTML – это язык разметки, который указывает браузерам (Google Chrome, Яндекс.Браузер и другим подобным программам), где и какие элементы выводить на странице сайта. Например, где находится заголовок, основной текст, ссылки на другие страницы, меню, списки, таблицы и так далее.
CSS – это каскадные таблицы стилей. С их помощью задают оформление различных элементов. Например, при помощи CSS можно менять цвет шрифта у текста, задавать фон страницы или отдельных элементов, красиво оформлять списки и таблицы и даже создавать интерактивные элементы (анимацию).
С чего начать самостоятельное изучение HTML?
Язык разметки HTML состоит из тегов. Условно теги – это элементы, которые указывают браузеру, что должно выводиться на странице. Например, есть теги, которые обозначают вставку картинки или фотографии, видео, таблицы. Есть теги, которые обозначают начало и завершение абзаца.
Внутри тегов могут прописываться атрибуты, в которых указываются различные характеристики. Например, внутри тега, обозначающего ссылку, указывается атрибут с адресом страницы или сайта, куда эта ссылка ведет.
Чтобы самостоятельно выучить язык HTML, необходимо:
- Изучить основные теги, которые размечают заголовки (h1-h6), текст и его деление на абзацы, формируют нумерованные и ненумерованные списки (p, br, ul, ol, li), выставляют ссылки (a), изображения и другие объекты (img, object), выделяют фрагменты жирным или курсивом (strong, b, i), размечают таблицы (table, tr, td), вставляют формы (form, input, textarea, select, option), структурные теги (div, span), а также – основные теги (html, head, title, body). Кажется, что команд очень много, но на самом деле их можно выучить самостоятельно за 2-3 дня.
- Выучить атрибуты для популярных тегов. Не обязательно знать все атрибуты наизусть. Есть бесплатные справочники, в которых можно искать эту информацию во время работы.
- Изучить структуру HTML-кода, чтобы понять, как создаются страницы сайтов.
- Прочитать о табличной верстке – это устаревший вид верстки, который на современных сайтах не используется. Однако вам нужно знать, что это такое, чтобы не теряться, если придется работать с версткой старого сайта.
- Научиться блочной верстке при помощи дивов (div). Это современный тип верстки, который нужно хорошо знать.
- Прочитать про валидную верстку. Есть организация, которая определяет стандарты HTML. Она называется W3C. Валидной называется верстка, которая полностью отвечает стандартам W3C. На практике их часто нарушают и не каждая верстка может быть валидной. Но в любом случае про этот стандарт нужно знать.
Разные браузеры по-разному обрабатывают некоторые теги и иные команды. Если вы решили самостоятельно изучать HTML, обязательно прочитайте, что такое кроссбраузерная верстка и как ее делать.
Как видите, выучить HTML с нуля можно и самостоятельно. Примерно за неделю вы сможете изучить азы языка разметки и научиться им пользоваться на уровне, достаточном для добавления текстов на сайты, разметки таблиц, списков, вставке изображений.
Как выучить CSS с нуля?
Осваивать CSS рекомендуется после того, как вы изучили основы языка HTML. Вот что нужно узнать о каскадных таблицах стилей:
- Основы синтаксиса: основные селекторы, их свойства и значения. На словах кажется сложно, но на деле – просто. Например, в CSS вы можете задать оформление заголовка, указав, какой у него должен быть шрифт, размер шрифта, отступы от других элементов на странице, цвет и другие параметры. Чтобы знать CSS, вам нужно изучить, какие параметры вы можете задавать у разных элементов на страницах.
- Изучить, как при помощи CSS задавать позиционирование разных элементов на странице.
- Узнать, что такое псевдоклассы и комбинаторы.
Изучить адаптивную верстку, когда макет страницы подстраивается под размеры экрана пользователя.
Дополнительно рекомендуется выучить:
- Препроцессоры.
- Фреймворки, особенно Bootstrap. Фреймворк – это готовое решение, на базе которого можно быстро создать верстку нового сайта.
- Управление преобразованием, переходами и анимацией.
Как правильно создавать структуру кода, чтобы его можно было поддерживать.
На каких сайтах можно освоить HTML и CSS?
Ниже представлены бесплатные сайты и справочники, которыми можно пользоваться при самостоятельном изучении HTML и CSS с нуля.
Позиционируется, как самый современный справочник по HTML и CSS. На сайте собрано описание всех тегов и атрибутов, свойств таблиц стилей, а также примеров кода и результатов их выполнения (что будет выводиться в браузере).
На сайте собрана теория и практика по использованию CSS, трюки, хитрости и готовые решения. Сайт можно рекомендовать как новичкам, так и верстальщикам с опытом.
На курсе изучаются основные теги. Помогает получить представление о верстке и значительно упрощает обучение HTML на старте. Проходит онлайн, можно записываться из любого города.
На сайте находятся бесплатные уроки по HTML5 и CSS, а также справочник CSS. Уроки хорошо структурированы и сопровождаются множеством примеров.
На сайте есть справочник тегов, а также бесплатные уроки по верстке страниц. Имеется демо-редактор, в котором можно добавлять различные команды и смотреть, как браузер их воспринимает и что поменяется на странице пользователя.
Один из самых популярных справочников по HTML и CSS. На сайте есть Самоучитель, а также Практикум, которые помогают ускорить обучение и сделать его проще.
Здесь собрана коллекция статей, уроков и примеров по верстке. Также есть уроки по Bootstrap.
Простой и понятный самоучитель, который подойдет для самостоятельного изучения HTML 5 и CSS с нуля.
Бесплатный онлайн-справочник. Будет полезен новичкам, которые хотят изучить основы верстки.
Онлайн-учебник по HTML и CSS. Много примеров. Подходит новичкам.
Помогают проверить свои знания по верстке и выявить пробелы. На сайте есть руководства и справочники по HTML и CSS для самостоятельного изучения.
На сайте собрано множество материалов для сайтостроителей и верстальщиков. Можно найти интересные решения для создания разных эффектов, готовые скрипты и многое другое.
Сайт консорциума W3C, на котором можно посмотреть актуальные стандарты языка разметки, а также проверить валидность своего кода в специальном Валидаторе.
Как быстро выучить HTML и CSS с нуля?
- Больше практики. Изучили новые теги – сразу попробуйте сверстать текст с ними. Это поможет вам освоить материал быстрее. Для верстки страниц не нужно скачивать специальные программы или редакторы. Достаточно сохранить страницу из браузера на компьютере и менять у нее код, просматривая, что вы получили после добавления новых тегов.
- Быстро выучить язык HTML и CSS самостоятельно помогают бесплатные онлайн-задачники. В них собраны различные задачи по верстке разного уровня сложности. Выполняйте практику и быстрее осваивайте новые теги. Примеры задачников: Практика на WebReference (позволяет решать задачи онлайн и сразу проверять результаты), Практикум на Htmlbook.
- Пройти бесплатный курс по основам HTML в Нетологии. Курс состоит из нескольких онлайн-уроков, которые ведет преподаватель. На них вы освоите базовые теги и сможете дальше двигаться самостоятельно. Это особенно актуально для людей, которые раньше не сталкивались с версткой и сайтами.
- Не сдавайтесь, если что-то кажется вам сложным. Ищите информацию в разных источниках. Бывает, что на одном сайте что-то написано непонятно, а на другом – все ясно и просто.
Не переживайте, если что-то не получается. Главное – не бросать начатое, тогда все обязательно получится.
Что делать дальше, освоив HTML и CSS?
Когда вы изучите язык разметки и таблицы стилей, советую учить JavaScript. Это язык программирования, который позволяет создавать различные интерактивные элементы на странице, а также использовать технологию AJAX. С ее помощью можно обновлять части страниц без перезагрузки, что значительно ускоряет взаимодействие с сайтом. Пример реализации AJAX – бесконечная загрузка новой информации в ленте новостей.
Зная разметку и JavaScript, вы сможете стать начинающим Frontend-разработчиком и получить высокооплачиваемую работу в веб-студии или выполнять заказы на фрилансе.
Как быстро освоить JavaScript, мы постараемся рассказать в следующих статьях.