Сборник упражнений и задач по основам HTML

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

Чтобы посмотреть результат выполнения исходного кода решения задачи во фрейме кодового блока, используйте кнопку «Результат» .

Возможно вам будет полезен и наш сборник задач с решениями по языку программирования Python . Посетить его можно на нашем сайте https://okpython.net здесь.

Оглавление задачника

Синтаксис HTML

1.1. Скопируйте исходный код нашей первой веб-страницы в свой редактор и для удобства восприятия отформатируйте его. Показать решение.

  Всем привет от HTML! 

       Всем привет от HTML!  

1.2. Попробуйте написать по памяти код нашей первой веб-страницы. Показать решение.

       Всем привет от HTML!  

1.3. Скопируйте исходный код нашей первой веб-страницы в свой редактор, после чего исправьте в нем все ошибки. Показать решение.

     Первая html-страница > Всем привет от HTML!

       Всем привет от HTML!  

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

      Меня нужно закомментировать! Меня нужно сделать содержимым 1-го абзаца! Меня нужно сделать содержимым 2-го абзаца!  

        
Меня нужно сделать содержимым 1-го абзаца!
 
Меня нужно сделать содержимым 2-го абзаца!
   

1.5. Создайте веб-страницу, содержащую два коротких предложения, принадлежащих одному абзацу, но расположенных на разных строках. Используйте одиночный тег (принудительный разрыв строки). Не забывайте про служебный тег . Показать решение.

       
Я первое предложение. 
Я второе предложение.
   

Универсальные атрибуты html-элементов

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

       
Я первое предложение. 
  
   

2.2. Создайте веб-страницу, состоящую из двух абзацев, в которых будет по два коротких предложения, расположенных на разных строках. Цвет текста первого абзаца должен быть красным, а второго – синим. При наведении курсора на первый абзац, должна появляться подсказка «Я первый абзац», а при наведении на второй – «Я второй абзац». Используйте атрибут style, а в качестве его значения свойства CSS : «color: red» и «color: blue» . Также воспользуйтесь атрибутом title, не путая его с аналогичным элементом. Показать решение.

       
Я первое предложение. 
Я второе предложение.
 
Я третье предложение. 
Я четвертое предложение.
   

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

     .red_text < color: red; >.blue_text  
Я текст первого абзаца. Мой цвет должен стать красным, для этого используйте класс red_text из таблицы стилей выше.
 
Я текст второго абзаца. Мой цвет должен стать синим, для этого используйте класс blue_text из таблицы стилей выше.
   

     .red_text < color: red; >.blue_text  
Я текст первого абзаца. Мой цвет должен стать красным, для этого используйте класс red_text из таблицы стилей выше.
 
Я текст второго абзаца. Мой цвет должен стать синим, для этого используйте класс blue_text из таблицы стилей выше.
   

2.4. Скрипт в исходном коде примера позволяет найти в документе элемент с требуемым id и сделать цвет его шрифта красным. Зная это, сделайте текст второго абзаца красным. Показать решение.

       
Я текст первого абзаца.
 
Я текст второго абзаца.
    

       
Я текст первого абзаца.
 
//Находим элемент с указанным атрибутом id var elem=document.getElementById('red_text'); //Изменяем цвет текста на красный elem.style.color='red';   

2.5. Преобразуйте второй абзац в исходном коде примера в редактируемый элемент с проверкой орфографии. Используйте для этого универсальные атрибуты contenteditable и spellcheck. Запустите код в своем браузере и устраните ошибки в тексте. Обратите внимание, что после получения абзацем фокуса, браузер автоматически будет подсвечивать слова с ошибками до тех пор, пока все ошибки не будут исправлены. Показать решение.

       
Я текст первого абзаца.
 
Я тиксст втарого абзаца.
   

       
Я текст первого абзаца.
 
Я тиксст втарого абзаца.
   

2.6. Исправьте ошибки в исходном коде примера, после чего запустите его в своем браузере. Показать решение.

       
Я текст первого абзаца.
 
Я текст второго абзаца.
 
Я текст третьего абзаца.
 
Я текст четвертого абзаца.
   

       
Я текст первого абзаца.
 
Я текст второго абзаца.
 
Я текст третьего абзаца.
    

Мнемоники и коды Юникод в HTML

3.1. Создайте веб-страницу, содержащую абзац с предложением «Сколько будет ½+⅓ ?». Чтобы задать красный цвет шрифта для суммы, используйте тег , а также универсальный атрибут style со значением «color: red» . Для дробей используйте мнемоники и коды Юникода (результат должен быть одинаков), которые можно найти в наших таблицах мнемоник здесь. Показать решение.

       
Сколько будет ½+⅓?
   

3.2. Создайте веб-страницу, содержащую предложение: «Я открывающий тег «. Для знаков «» используйте мнемоники, а чтобы задать зеленый цвет шрифта, используйте тег и универсальный атрибут style со значением «color: green» . Показать решение.

      Я открывающий тег <span>.  

3.3. Создайте веб-страницу, содержащую предложение: «Чтобы вывести мнемонику «&» на экран, необходимо в коде знак амперсанда заменить на его мнемонику!». При наведении курсора на мнемонику, должна появляться подсказка «Мнемоника». Используйте универсальный атрибут style и значение цвета green , а также универсальный атрибут title. Не забудьте использовать в заголовке документа служебный тег . Показать решение.

      "Чтобы вывести мнемонику '&' на экран, необходимо в коде знак амперсанда заменить на его мнемонику!".  

3.4. Исправьте ошибки в исходном коде примера, после чего запустите его в своем браузере. Показать решение.

       
√, ÝA;, √ - это корень 2-й степени, 
&#plusmn, ±, ± - это знак плюс-минус, 
§, &00A7;, &167; - это знак параграфа.
   

       
√, √, √ - это корень 2-й степени, 
±, ±, ± - это знак плюс-минус, 
§, §, § - это знак параграфа.
   

Форматирование текста

4.1. Воссоздайте код представленной html -страницы. Используйте теги , , , а также универсальный атрибут style и значения цветов: orange и green . Показать решение.

. Нажмите кнопку «Результат», чтобы увидеть страницу, код которой нужно восстановить. .

       
 
Осень наступила, Падают листы. Мне никто не нужен, Только Ты.
 
  Васюткин А.А.
 
  
 
. Нажмите кнопку «Результат», чтобы увидеть страницу, код которой нужно восстановить. .
 
       
Маркированный список формируется парным тегом <ul> (от англ. unordered list). 
Сам элемент «ul» используется, как контейнер для пунктов списка, 
которые формируются, как и в случае с нумерованными списками, 
парными тегами <li> и располагаются друг за другом.
   
 
4.3. Воссоздайте код представленной html -страницы. Используйте тег , пробелы и обычные точки или звездочки. Показать решение.
 
. Нажмите кнопку «Результат», чтобы увидеть страницу, код которой нужно восстановить. .
 
4.4. Отформатируйте текст, представленный в условии. При этом считайте, что у вас уже имеется готовая таблица стилей, которую вы использовали ранее для верстки других страниц своего сайта. Так что вам нужно просто привязать стили к требуемым элементам при помощи универсального атрибута class. Для форматирования используйте теги , , — , , . Обратите внимание на то, что зеленые слова, выделенные жирным шрифтом, имеют важное значение в текущем контексте (это и нужно донести поисковым роботам). Также не забывайте про мнемоники символов « и «>» (таблицы мнемоник и кодов Юникода можно посмотреть здесь). Показать решение.
 
     .green_letter < color: green; >.light_blue_letter < color: #5555CC; >.orange_letter < color: orange; >.paragraph < width: 500px; text-align: justify; line-height: 1.2em; margin: 1em; margin-bottom: 1.5em; >.caption_h_1 < font-size: 1.1em; margin: 1em; >.caption_h_2 Абзац, заголовки и преформатированный текст в HTML Абзац и формирующий его тег 
Для разбиения текста на абзацы в HTML используется элемент «Абзац», который формируется парным тегом 
от англ. paragraph – абзац). И хотя в некоторых случаях спецификация допускает отсутствие закрывающего тега, мы будем применять его всегда, явно формируя элемент «Абзац». Добавим, что абзац относится к блочным элементам, поэтому по умолчанию начинается с новой строки и отделяется от остального содержимого вертикальными отступами. Создание заголовков. Теги - Если возникает необходимость как-то назвать часть текста (например, параграф или раздел) и выделить его относительную важность, можно воспользоваться одним из шести заголовков разного уровня, которые формируются парными тегами от до (от англ. heading – заголовок) и также относятся к блочным элементам. Заголовок первого уровня отображается самым крупным шрифтом жирного начертания, остальные – поменьше, по мере убывания своей важности. Преформатированный текст. Тег 
А что если нам нужно вывести исходный текст на экран без форматирования? Такая ситуация случается, например, когда нужно сохранить подряд идущие пробелы и переносы строк или просто сохранить исходное форматирование при отображении тех же примеров кода. В таких случаях можно применить элемент «преформатированный текст», который формируется парным тегом 
(от англ. preformatted text – предварительно форматированный текст). Браузеры отображают его как блочный элемент.  
 
 
     .green_letter < color: green; >.light_blue_letter < color: #5555CC; >.orange_letter < color: orange; >.paragraph < width: 500px; text-align: justify; line-height: 1.2em; margin: 1em; margin-bottom: 1.5em; >.caption_h_1 < font-size: 1.1em; margin: 1em; >.caption_h_2  
 
абзац). И хотя в некоторых случаях спецификация допускает отсутствие закрывающего тега, мы будем применять его всегда, явно формируя элемент  
заголовок) и также относятся к блочным элементам. Заголовок первого уровня отображается самым крупным шрифтом жирного начертания, остальные - поменьше, по мере убывания своей важности.
 
, который формируется парным тегом – предварительно форматированный текст). Браузеры отображают его как блочный элемент.
   

Создание списков
5.1. Воссоздайте код представленной html -страницы. Используйте маркированный список и универсальный атрибут style, передав ему значения цвета "color: green" , "color: red" и "color: orange" . Показать решение.
. Нажмите кнопку «Результат», чтобы увидеть страницу, код которой нужно восстановить. .
Источник
Работа с текстом
Задача по HTML и CSS: работа с тегами для оформления текста и стилизация текста используя CSS.
Выполните все пункты задания и сравните с результатом. Для поиска неизвестных вам тегов и свойств используйте поиск справочника.

Создайте папку в удобном для вас месте на вашем компьютере
В этой папке создайте новый HTML документ - index.html
В index.html создайте HTML скелет документа
Создайте новый CSS файл - style.css
Подключите CSS файл к HTML файлу
Создайте заголовок первого уровня в теге body и напишите там текст "Оформление текста"
Добавьте данному заголовку класс title
В CSS файле в самом верху создайте селектор для тега body и напишите следующие стили - шрифт Arial, sans-serif, размер шрифта 16px, цвет текста #333, межстрочный отступ 1.5
В CSS файле создайте селектор для класса title, и напишите следующие стили - размер шрифта 40px, цвет текста #f03333, межстрочный отступ 1.2, все буквы заглавные
После заголовка создайте абзац и напишите там немного текста, можете использовать сайт-генератор случайного текста lipsum.com
После абзаца создайте заголовок второго уровня, напишите текст "Заголовок второго уровня" и придайте ему класс subtitle
В CSS файле создайте селектор для класса subtitle, и напишите следующие стили - размер шрифта 30px, цвет текста #12ac11, межстрочный отступ 1.2, подчеркивание текста снизу
После заголовка создайте абзац и напишите там немного текста, можете использовать сайт-генератор случайного текста lipsum.com
После абзаца создайте ненумерованный список с тремя пунктами
В каждом пункте напишите немного текста, на свой выбор
Задайте списку класс list
В CSS файле создайте селектор для класса list, и напишите следующие стили - размер шрифта 20px, цвет текста #444, все буквы наклонные, стиль маркеров списка - square

Результат
Если хотите поделиться своим решением, используйте сайты типа codepen.io и оставляйте ссылку в комментарии
Обсуждение ( 26 )
Войдите или зарегистрируйтесь для того чтобы оставлять комментарии
Источник
Читайте также:  Php exited on signal 11