Задачи по html и css - ПК журнал
Polytech-soft.com

ПК журнал
486 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

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

а не реальные рабочие условия, которые сложнее, во много раз сложнее

чем ближе к реальности, тем больше «закалка» и быстрее научитесь

невозможно научиться водить машиной, если первый раз в жизни её видишь после лошади, и не знаешь про существование педалей, коробки передач, ручника который надо снять перед движением

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

ведь технологии на месте не стоят

Вы наверное про 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
  • Картинки в таблице
  • Объединение колонок
  • Объединение строк
  • Ячейка заголовка
  • Тело таблицы
  • Подвал таблицы
  • Ширина таблицы
  • Выравнивание заголовка таблицы
  • Выравнивание таблицы
  • Цвет фона таблицы
  • Зебра в таблице
  • Поля в ячейках
  • Расстояние между ячеек
  • Рамка вокруг таблицы
  • Рамка вокруг ячеек
  • Линии в таблице
  • Горизонтальное выравнивание в ячейках
Читать еще:  Римские цифры html

Текст

  • Элемент
  • Переносы строк
  • Абзацы
  • Заголовок первого уровня
  • Заголовки
  • TEX
  • Площадь круга
  • Озон
  • Важный текст
  • Элемент
  • Рыжая лиса
  • Шрифт на веб-странице
  • Шрифт иллюстрации
  • Шрифт заголовка
  • Свой шрифт
  • Размер текста в пикселях
  • Размер заголовка в em
  • Размер заголовка в rem
  • Цвет основного текста
  • Цвет заголовка
  • Выворотка заголовка
  • Курсивный текст
  • Жирный текст
  • Нормальная жирность заголовка
  • Выступающий инициал
  • Трансформация

    • Поворот на 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. Вот что нужно узнать о каскадных таблицах стилей:

    1. Основы синтаксиса: основные селекторы, их свойства и значения. На словах кажется сложно, но на деле – просто. Например, в CSS вы можете задать оформление заголовка, указав, какой у него должен быть шрифт, размер шрифта, отступы от других элементов на странице, цвет и другие параметры. Чтобы знать CSS, вам нужно изучить, какие параметры вы можете задавать у разных элементов на страницах.
    2. Изучить, как при помощи CSS задавать позиционирование разных элементов на странице.
    3. Узнать, что такое псевдоклассы и комбинаторы.

    Изучить адаптивную верстку, когда макет страницы подстраивается под размеры экрана пользователя.

    Дополнительно рекомендуется выучить:

    1. Препроцессоры.
    2. Фреймворки, особенно Bootstrap. Фреймворк – это готовое решение, на базе которого можно быстро создать верстку нового сайта.
    3. Управление преобразованием, переходами и анимацией.

    Как правильно создавать структуру кода, чтобы его можно было поддерживать.

    На каких сайтах можно освоить HTML и CSS?

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

    Позиционируется, как самый современный справочник по HTML и CSS. На сайте собрано описание всех тегов и атрибутов, свойств таблиц стилей, а также примеров кода и результатов их выполнения (что будет выводиться в браузере).

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

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

    На сайте находятся бесплатные уроки по HTML5 и CSS, а также справочник CSS. Уроки хорошо структурированы и сопровождаются множеством примеров.

    На сайте есть справочник тегов, а также бесплатные уроки по верстке страниц. Имеется демо-редактор, в котором можно добавлять различные команды и смотреть, как браузер их воспринимает и что поменяется на странице пользователя.

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

    Здесь собрана коллекция статей, уроков и примеров по верстке. Также есть уроки по Bootstrap.

    Простой и понятный самоучитель, который подойдет для самостоятельного изучения HTML 5 и CSS с нуля.

    Бесплатный онлайн-справочник. Будет полезен новичкам, которые хотят изучить основы верстки.

    Онлайн-учебник по HTML и CSS. Много примеров. Подходит новичкам.

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

    На сайте собрано множество материалов для сайтостроителей и верстальщиков. Можно найти интересные решения для создания разных эффектов, готовые скрипты и многое другое.

    Сайт консорциума W3C, на котором можно посмотреть актуальные стандарты языка разметки, а также проверить валидность своего кода в специальном Валидаторе.

    Как быстро выучить HTML и CSS с нуля?

    1. Больше практики. Изучили новые теги – сразу попробуйте сверстать текст с ними. Это поможет вам освоить материал быстрее. Для верстки страниц не нужно скачивать специальные программы или редакторы. Достаточно сохранить страницу из браузера на компьютере и менять у нее код, просматривая, что вы получили после добавления новых тегов.
    2. Быстро выучить язык HTML и CSS самостоятельно помогают бесплатные онлайн-задачники. В них собраны различные задачи по верстке разного уровня сложности. Выполняйте практику и быстрее осваивайте новые теги. Примеры задачников: Практика на WebReference (позволяет решать задачи онлайн и сразу проверять результаты), Практикум на Htmlbook.
    3. Пройти бесплатный курс по основам HTML в Нетологии. Курс состоит из нескольких онлайн-уроков, которые ведет преподаватель. На них вы освоите базовые теги и сможете дальше двигаться самостоятельно. Это особенно актуально для людей, которые раньше не сталкивались с версткой и сайтами.
    4. Не сдавайтесь, если что-то кажется вам сложным. Ищите информацию в разных источниках. Бывает, что на одном сайте что-то написано непонятно, а на другом – все ясно и просто.

    Не переживайте, если что-то не получается. Главное – не бросать начатое, тогда все обязательно получится.

    Что делать дальше, освоив HTML и CSS?

    Когда вы изучите язык разметки и таблицы стилей, советую учить JavaScript. Это язык программирования, который позволяет создавать различные интерактивные элементы на странице, а также использовать технологию AJAX. С ее помощью можно обновлять части страниц без перезагрузки, что значительно ускоряет взаимодействие с сайтом. Пример реализации AJAX – бесконечная загрузка новой информации в ленте новостей.

    Зная разметку и JavaScript, вы сможете стать начинающим Frontend-разработчиком и получить высокооплачиваемую работу в веб-студии или выполнять заказы на фрилансе.

    Как быстро освоить JavaScript, мы постараемся рассказать в следующих статьях.

    Ссылка на основную публикацию
    ВсеИнструменты 220 Вольт
    Adblock
    detector