
Сборник упражнений и задач по основам HTML
Пару слов о задачнике
Наш
задачник по основам HTML содержит стандартные
упражнения и задачи с решениями на закрепление теоретических основ
излагаемых в учебнике. Задачи довольно легкие и рутинные, тем не менее порешайте их. Далее приступайте к решению стандартных задач по
CSS и только потом приступайте к практической верстке элементов сайта и самих сайтов.
Чтобы посмотреть результат выполнения исходного кода решения задачи во фрейме кодового блока, используйте кнопку «Результат».
Возможно вам будет полезен и наш сборник задач с решениями по языку программирования Python. Посетить его можно на нашем сайте https://okpython.net здесь.
Оглавление задачника
Синтаксис HTML
1.1. Скопируйте исходный код нашей первой веб-страницы в свой редактор и для удобства восприятия отформатируйте его. Показать решение.

<!DOCTYPE html><html><head><!-- Задаем кодировку текста. --> <meta charset="utf-8"><title>Первая html-страница</title></head> <body>Всем привет от HTML!</body></html>
Условие задачи №1.1
<!DOCTYPE html> <html> <head> <!-- Задаем кодировку текста. --> <meta charset="utf-8"> <title>Первая html-страница</title> </head> <body> Всем привет от HTML! </body> </html>
Решение задачи №1.1
1.2. Попробуйте написать по памяти код нашей первой веб-страницы. Показать решение.
<!DOCTYPE html> <html> <head> <!-- Задаем кодировку текста. --> <meta charset="utf-8"> <title>Первая html-страница</title> </head> <body> Всем привет от HTML! </body> </html>
Решение задачи №1.2
1.3. Скопируйте исходный код нашей первой веб-страницы в свой редактор, после чего исправьте в нем все ошибки. Показать решение.

<DOCTYPE html> <html> <head> <!- Задаем кодировку текста. --> <meta charset="utf-8"> <tittle>Первая html-страница</title> </head>> </body> Всем привет от HTML! <body> </html>
Условие задачи №1.3
<!DOCTYPE html> <html> <head> <!-- Задаем кодировку текста. --> <meta charset="utf-8"> <title>Первая html-страница</title> </head> <body> Всем привет от HTML! </body> </html>
Решение задачи №1.3
1.4. Выполните инструкции, содержащиеся в исходном коде примера в теле документа. Для создания абзацев используйте парный тег <p>. Показать решение.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Задача №1.4</title> </head> <body> Меня нужно закомментировать! Меня нужно сделать содержимым 1-го абзаца! Меня нужно сделать содержимым 2-го абзаца! </body> </html>
Условие задачи №1.4
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Задача №1.4</title> </head> <body> <!-- Меня нужно закомментировать! --> <p> Меня нужно сделать содержимым 1-го абзаца! </p> <p> Меня нужно сделать содержимым 2-го абзаца! </p> </body> </html>
Решение задачи №1.4
1.5. Создайте веб-страницу, содержащую два коротких предложения, принадлежащих одному абзацу, но расположенных на разных строках. Используйте одиночный тег <br> (принудительный разрыв строки). Не забывайте про служебный тег <title>. Показать решение.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Задача №1.5</title> </head> <body> <p> Я первое предложение.<br> Я второе предложение. </p> </body> </html>
Решение задачи №1.5
Универсальные атрибуты html-элементов
2.1. Создайте веб-страницу, содержащую два коротких предложения, принадлежащих одному абзацу, но расположенных на разных строках. Сделайте так, чтобы второе предложение не отображалось в окне браузера. Используйте для этого парный тег <span> и универсальный атрибут hidden. Показать решение.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Задача №2.1</title> </head> <body> <p> Я первое предложение.<br> <!-- Не отобразится --> <span hidden>Я второе предложение.</span> </p> </body> </html>
Решение задачи №2.1
2.2. Создайте веб-страницу, состоящую из двух абзацев, в которых будет по два коротких предложения, расположенных на разных строках. Цвет текста первого абзаца должен быть красным, а второго – синим. При наведении курсора на первый абзац, должна появляться подсказка "Я первый абзац", а при наведении на второй – "Я второй абзац". Используйте атрибут style, а в качестве его значения свойства CSS: "color: red" и "color: blue". Также воспользуйтесь атрибутом title, не путая его с аналогичным элементом. Показать решение.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Задача №2.2</title> </head> <body> <p style="color: red" title="Я первый абзац"> Я первое предложение.<br> Я второе предложение. </p> <p style="color: blue" title="Я второй абзац"> Я третье предложение.<br> Я четвертое предложение. </p> </body> </html>
Решение задачи №2.2
2.3. Выполните инструкции, содержащиеся в исходном коде примера в теле документа. Для подключения к абзацам требуемого класса используйте универсальный атрибут class. Показать решение.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Задача №2.3</title> <style> .red_text{ color: red; } .blue_text{ color: blue; } </style> </head> <body> <p title="Я первый абзац"> Я текст первого абзаца. Мой цвет должен стать красным, для этого используйте класс red_text из таблицы стилей выше. </p> <p title="Я второй абзац"> Я текст второго абзаца. Мой цвет должен стать синим, для этого используйте класс blue_text из таблицы стилей выше. </p> </body> </html>
Условие задачи №2.3
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Задача №2.3</title> <style> .red_text{ color: red; } .blue_text{ color: blue; } </style> </head> <body> <p class="red_text" title="Я первый абзац"> Я текст первого абзаца. Мой цвет должен стать красным, для этого используйте класс red_text из таблицы стилей выше. </p> <p class="blue_text" title="Я второй абзац"> Я текст второго абзаца. Мой цвет должен стать синим, для этого используйте класс blue_text из таблицы стилей выше. </p> </body> </html>
Решение задачи №2.3
2.4. Скрипт в исходном коде примера позволяет найти в документе элемент с требуемым id и сделать цвет его шрифта красным. Зная это, сделайте текст второго абзаца красным. Показать решение.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Задача №2.4</title> </head> <body> <p> Я текст первого абзаца. </p> <p> Я текст второго абзаца. </p> <script> //Находим элемент с указанным атрибутом id var elem=document.getElementById('red_text'); //Изменяем цвет текста на красный elem.style.color='red'; </script> </body> </html>
Условие задачи №2.4
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Задача №2.4</title> </head> <body> <p> Я текст первого абзаца. </p> <p id="red_text"> Я текст второго абзаца. </p> <script> //Находим элемент с указанным атрибутом id var elem=document.getElementById('red_text'); //Изменяем цвет текста на красный elem.style.color='red'; </script> </body> </html>
Решение задачи №2.4
2.5. Преобразуйте второй абзац в исходном коде примера в редактируемый элемент с проверкой орфографии. Используйте для этого универсальные атрибуты contenteditable и spellcheck. Запустите код в своем браузере и устраните ошибки в тексте. Обратите внимание, что после получения абзацем фокуса, браузер автоматически будет подсвечивать слова с ошибками до тех пор, пока все ошибки не будут исправлены. Показать решение.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Задача №2.5</title> </head> <body> <p title="Я нередактируемый абзац"> Я текст первого абзаца. </p> <p title="Я редактируемый абзац"> Я тиксст втарого абзаца. </p> </body> </html>
Условие задачи №2.5
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Задача №2.5</title> </head> <body> <p title="Я нередактируемый абзац"> Я текст первого абзаца. </p> <p title="Я редактируемый абзац" spellcheck="true" contenteditable="true"> Я тиксст втарого абзаца. </p> </body> </html>
Решение задачи №2.5
2.6. Исправьте ошибки в исходном коде примера, после чего запустите его в своем браузере. Показать решение.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Задача №2.6</title> </head> <body> <p titel="Я нередактируемый абзац"> Я текст первого абзаца. </p> <p spellchek="true" contentaditablle="true"> Я текст второго абзаца. </p> <p id="3d" tabindeks="3"> Я текст третьего абзаца. </p> <p hiden> Я текст четвертого абзаца. </p> </body> </html>
Условие задачи №2.6
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Задача №2.6</title> </head> <body> <p title="Я нередактируемый абзац"> Я текст первого абзаца. </p> <p spellcheck="true" contenteditable="true"> Я текст второго абзаца. </p> <p id="3d" tabindex="3"> Я текст третьего абзаца. </p> <p hidden> Я текст четвертого абзаца. </p> </body> </html>
Решение задачи №2.6
Мнемоники и коды Юникод в HTML
3.1. Создайте веб-страницу, содержащую абзац с предложением "Сколько будет ½+⅓?". Чтобы задать красный цвет шрифта для суммы, используйте тег <span>, а также универсальный атрибут style со значением "color: red". Для дробей используйте мнемоники и коды Юникода (результат должен быть одинаков), которые можно найти в наших таблицах мнемоник здесь. Показать решение.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Задача №3.1</title> </head> <body> <p> Сколько будет <span style="color: red">½+⅓</span>? </p> </body> </html>
Решение задачи №3.1
3.2. Создайте веб-страницу, содержащую предложение: "Я открывающий тег <span>". Для знаков «<» и «>» используйте мнемоники, а чтобы задать зеленый цвет шрифта, используйте тег <span> и универсальный атрибут style со значением "color: green". Показать решение.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Задача №3.2</title> </head> <body> Я открывающий тег <span style="color: green"><span></span>. </body> </html>
Решение задачи №3.2
3.3. Создайте веб-страницу, содержащую предложение: "Чтобы вывести мнемонику «&» на экран, необходимо в коде знак амперсанда заменить на его мнемонику!". При наведении курсора на мнемонику, должна появляться подсказка "Мнемоника". Используйте универсальный атрибут style и значение цвета green, а также универсальный атрибут title. Не забудьте использовать в заголовке документа служебный тег <title>. Показать решение.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Задача №3.3</title> </head> <body> "Чтобы вывести мнемонику <span style="color: green" title="Мнемоника">'&amp;'</span> на экран, необходимо в коде знак амперсанда заменить на его мнемонику!". </body> </html>
Решение задачи №3.3
3.4. Исправьте ошибки в исходном коде примера, после чего запустите его в своем браузере. Показать решение.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Задача №3.4</title> </head> <body> <p> √, ÝA;, √ - это корень 2-й степени,<br> &#plusmn, ±, ± - это знак плюс-минус,<br> §, &00A7;, &167; - это знак параграфа. </p> </body> </html>
Условие задачи №3.4
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Задача №3.4</title> </head> <body> <p> √, √, √ - это корень 2-й степени,<br> ±, ±, ± - это знак плюс-минус,<br> §, §, § - это знак параграфа. </p> </body> </html>
Решение задачи №3.4
Форматирование текста
4.1. Воссоздайте код представленной html-страницы. Используйте теги <pre>, <address>, <hr>, а также универсальный атрибут style и значения цветов: orange и green. Показать решение.
...... Нажмите кнопку «Результат», чтобы увидеть страницу, код которой нужно восстановить. .....
Условие задачи №4.1
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Задача №4.1</title> </head> <body> <hr> <pre style="color: orange"> Осень наступила, Падают листы. Мне никто не нужен, Только Ты. </pre> <address style="color: green"> Васюткин А.А.</address> <hr> </body> </html>
Решение задачи №4.1
4.2. Воссоздайте код представленной html-страницы. Используйте теги <p>, <dfn>, <em>, <strong>, <br>. Вспомните про мнемоники символов «<» и «>» (таблицы мнемоник и кодов Юникода можно посмотреть здесь). Показать решение.
...... Нажмите кнопку «Результат», чтобы увидеть страницу, код которой нужно восстановить. .....
Условие задачи №4.2
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Задача №4.2</title> </head> <body> <p> <dfn>Маркированный список</dfn> формируется парным тегом <strong><ul></strong> (от англ. <em>unordered list</em>).<br> Сам элемент «ul» используется, как контейнер для пунктов списка,<br> которые формируются, как и в случае с нумерованными списками,<br> парными тегами <strong><li></strong> и располагаются друг за другом. </p> </body> </html>
Решение задачи №4.2
4.3. Воссоздайте код представленной html-страницы. Используйте тег <pre>, пробелы и обычные точки или звездочки. Показать решение.
...... Нажмите кнопку «Результат», чтобы увидеть страницу, код которой нужно восстановить. .....
Условие задачи №4.3
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Задача №4.3</title> </head> <body> <pre> .. .. .......... ... ... .. .. .. .......... .... .... .. .. .. .. .. .. .. .. .. .......... .. .. .. .. .. .. .......... .. .. ...... .. .. .. .. .. .. .... .. .. .. .. .. .. .. .. .. .. .. .. .. .. ......... .. .. .. .. .. ......... </pre> </body> </html>
Решение задачи №4.3
4.4. Отформатируйте текст, представленный в условии. При этом считайте, что у вас уже имеется готовая таблица стилей, которую вы использовали ранее для верстки других страниц своего сайта. Так что вам нужно просто привязать стили к требуемым элементам при помощи универсального атрибута class. Для форматирования используйте теги <span>, <p>, <h1>-<h6>, <em>, <strong>. Обратите внимание на то, что зеленые слова, выделенные жирным шрифтом, имеют важное значение в текущем контексте (это и нужно донести поисковым роботам). Также не забывайте про мнемоники символов «<» и «>» (таблицы мнемоник и кодов Юникода можно посмотреть здесь). Показать решение.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Задача №4.4</title> <style> .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{ font-size: 1em; margin: 1em; } </style> </head> <body> Абзац, заголовки и преформатированный текст в HTML Абзац и формирующий его тег <p> Для разбиения текста на абзацы в HTML используется элемент «Абзац», который формируется парным тегом <p> от англ. paragraph – абзац). И хотя в некоторых случаях спецификация допускает отсутствие закрывающего тега, мы будем применять его всегда, явно формируя элемент «Абзац». Добавим, что абзац относится к блочным элементам, поэтому по умолчанию начинается с новой строки и отделяется от остального содержимого вертикальными отступами. Создание заголовков. Теги <h1>-<h6> Если возникает необходимость как-то назвать часть текста (например, параграф или раздел) и выделить его относительную важность, можно воспользоваться одним из шести заголовков разного уровня, которые формируются парными тегами от <h1> до <h6> (от англ. heading – заголовок) и также относятся к блочным элементам. Заголовок первого уровня отображается самым крупным шрифтом жирного начертания, остальные – поменьше, по мере убывания своей важности. Преформатированный текст. Тег <pre> А что если нам нужно вывести исходный текст на экран без форматирования? Такая ситуация случается, например, когда нужно сохранить подряд идущие пробелы и переносы строк или просто сохранить исходное форматирование при отображении тех же примеров кода. В таких случаях можно применить элемент «преформатированный текст», который формируется парным тегом <pre> (от англ. preformatted text – предварительно форматированный текст). Браузеры отображают его как блочный элемент. </body> </html>
Условие задачи №4.4
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Задача №4.4</title> <style> .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{ font-size: 1em; margin: 1em; } </style> </head> <body> <h1 class="caption_h_1">Абзац, заголовки и преформатированный текст в HTML</h1> <h2 class="caption_h_2">Абзац и формирующий его тег <p></h2> <p class="paragraph"> Для разбиения текста на абзацы в <span class="green_letter">HTML</span> используется элемент <strong class="green_letter">«Абзац»</strong>, который формируется парным тегом <strong class="green_letter"><p></strong> (от <span class="orange_letter">англ.</span> <em class="light_blue_letter">paragraph</em> – <em>абзац</em>). И хотя в некоторых случаях спецификация допускает отсутствие закрывающего тега, мы будем применять его всегда, явно формируя элемент <span class="green_letter">«Абзац»</span>. Добавим, что абзац относится к блочным элементам, поэтому по умолчанию начинается с новой строки и отделяется от остального содержимого вертикальными отступами. </p> <h2 class="caption_h_2">Создание заголовков. Теги <h1>-<h6></h2> <p class="paragraph"> Если возникает необходимость как-то назвать часть текста (например, параграф или раздел) и выделить его относительную важность, можно воспользоваться одним из шести заголовков разного уровня, которые формируются парными тегами от <strong class="green_letter"><h1></strong> до <strong class="green_letter"><h6></strong> (от <span class="orange_letter">англ.</span> <em class="light_blue_letter">heading</em> – <em>заголовок</em>) и также относятся к блочным элементам. Заголовок первого уровня отображается самым крупным шрифтом жирного начертания, остальные - поменьше, по мере убывания своей важности. </p> <h2 class="caption_h_2">Преформатированный текст. Тег <pre></h2> <p class="paragraph"> А что если нам нужно вывести исходный текст на экран без форматирования? Такая ситуация случается, например, когда нужно сохранить подряд идущие пробелы и переносы строк или просто сохранить исходное форматирование при отображении тех же примеров кода. В таких случаях можно применить элемент <strong class="green_letter">'преформатированный текст'</strong>, который формируется парным тегом <strong class="green_letter"><pre></strong> (от <span class="orange_letter">англ.</span> <em class="light_blue_letter">preformatted text</em> – <em>предварительно форматированный текст</em>). Браузеры отображают его как блочный элемент. </p> </body> </html>
Решение задачи №4.4
Создание списков
5.1. Воссоздайте код представленной html-страницы. Используйте маркированный список <ul> и универсальный атрибут style, передав ему значения цвета "color: green", "color: red" и "color: orange". Показать решение.
...... Нажмите кнопку «Результат», чтобы увидеть страницу, код которой нужно восстановить. .....
Условие задачи №5.1
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Задача №5.1</title> </head> <body> <!-- Используем марикрованный список --> <ul> <li title="Белым цветом не получится">Зима</li> <li style="color: green">Весна</li> <li style="color: red">Лето</li> <li style="color: orange">Осень</li> </ul> </body> </html>
Решение задачи №5.1
5.2. Усложните список задачи №5.1, создав вложенные списки и перечислив в них месяцы, как показано в условии. Используйте в решении задачи нумерованный список <ol> и маркированные списки <ul>. Показать решение.
...... Нажмите кнопку «Результат», чтобы увидеть страницу, код которой нужно восстановить. .....
Условие задачи №5.2
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Задача №5.2</title> </head> <body> <!-- Используем нумерованный список --> <ol> <li> Зима <!-- Используем маркерованный список --> <ul> <li>Декабрь</li> <li>Январь</li> <li>Февраль</li> </ul> </li> <li> Весна <ul> <li>Март</li> <li>Апрель</li> <li>Май</li> </ul> </li> <li> Лето <ul> <li>Июнь</li> <li>Июль</li> <li>Август</li> </ul> </li> <li> Осень <ul> <li>Сентябрь</li> <li>Октябрь</li> <li>Декабрь</li> </ul> </li> </ol> </body> </html>
Решение задачи №5.2
5.3. Отформатируйте исходный код списка в условии. Показать решение.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Задача №5.3</title> </head> <body> <!-- Используем нумерованный список --> <ol><li>Зима <!-- Используем маркерованный список --> <ul><li>Декабрь</li><li>Январь</li><li>Февраль</li></ul> </li><li>Весна <ul><li>Март</li><li>Апрель</li><li>Май </li></ul></li><li>Лето <ul><li>Июнь</li> <li>Июль</li> <li>Август</li> </ul></li><li> Осень<ul><li>Сентябрь</li><li>Октябрь</li> <li>Декабрь</li></ul> </li></ol> </body> </html>
Условие задачи №5.3
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Задача №5.3</title> </head> <body> <!-- Используем нумерованный список --> <ol> <li> Зима <!-- Используем маркерованный список --> <ul> <li>Декабрь</li> <li>Январь</li> <li>Февраль</li> </ul> </li> <li> Весна <ul> <li>Март</li> <li>Апрель</li> <li>Май</li> </ul> </li> <li> Лето <ul> <li>Июнь</li> <li>Июль</li> <li>Август</li> </ul> </li> <li> Осень <ul> <li>Сентябрь</li> <li>Октябрь</li> <li>Декабрь</li> </ul> </li> </ol> </body> </html>
Решение задачи №5.3
5.4. Исправьте ошибки в исходном коде списка в условии. Для просмотра результата отображения страницы в браузере выберите пункт «Результат». Показать решение.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Задача №5.4</title> </head> <body> <!-- Используем нумерованный список --> <ol> <li> Зима <!-- Используем маркерованный список --> </ul> <li>Декабрь</li> </li>Январь</li> <li>Февраль</li> </ul> </li> <ul> Весна <li> <li>Март</li> <li>Апрель</li> <li>Май</li> </ul> </ul> <li> Лето <ol> <li>Июнь</li> <li>Июль <li>Август</li> </ol> <li> <li> Осень <ul> <li>Сентябрь</li> Октябрь</li> <li>Декабрь</li> </ul> </li> </oll> </body> </html>
Условие задачи №5.4
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Задача №5.4</title> </head> <body> <!-- Используем нумерованный список --> <ol> <li> Зима <!-- Используем маркерованный список --> <ul> <li>Декабрь</li> <li>Январь</li> <li>Февраль</li> </ul> </li> <li> Весна <ul> <li>Март</li> <li>Апрель</li> <li>Май</li> </ul> </li> <li> Лето <ul> <li>Июнь</li> <li>Июль</li> <li>Август</li> </ul> </li> <li> Осень <ul> <li>Сентябрь</li> <li>Октябрь</li> <li>Декабрь</li> </ul> </li> </ol> </body> </html>
Решение задачи №5.4
5.5. Создайте при помощи тегов <dl>, <dt> и <dd> простейший список определений. Для просмотра конечного результата отображения списка в браузере выберите пункт «Результат». Для оформления таблицы используйте готовую внутреннюю таблицу стилей, представленную в условии (используйте для этого тег <style>). В качестве изображений в списке используйте соответствующие мнемоники, которые можно посмотреть в нашей таблице мнемоник «Природные явления». Показать решение.
/* Внутренняя таблица стилей */ dt{ padding: 0.1em; margin-left: 1em; color: green; } dd{ padding: 0.1em; margin-left: 1em; margin-bottom: 0.5em; }
Условие задачи №5.5
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Задача №5.5</title> <style> /* Внутренняя таблица стилей */ dt{ padding: 0.1em; margin-left: 1em; color: green; } dd{ padding: 0.1em; margin-left: 1em; margin-bottom: 0.5em; } </style> </head> <body> <!-- Используем список определений --> <dl> <dt>☼ Солнечно</dt> <dd> Кругом тепло и солнечно, тучки почти отсутствуют. </dd> <dt>☁ Облачно</dt> <dd> Небо покрыто тучками, солнышко почти не видно. </dd> <dt>☂ Дождь</dt> <dd> Серые тучи покрывают все небо и обильно поливают нас жождем. </dd> </dl> </body> </html>
Решение задачи №5.5
Создание таблиц
6.1. Создайте простейшую таблицу, состоящую из заголовка, трех колонок и трех строк. Используйте для этого теги <table>, <caption>, <tr>, <th> и <td>. Для оформления таблицы используйте готовую внутреннюю таблицу стилей, представленную в условии (используйте для этого тег <style>). Именованный класс в таблице задает серый фон элемента с соответствующим id, подключите его к первой строке таблицы. Для просмотра результата отображения страницы в браузере выберите пункт «Результат». Показать решение.
/* Внутренняя таблица стилей */ table{ border-collapse: collapse; } caption{ text-align: left; margin-bottom: 0.2em; } th,td{ padding: 0.4em; border: 1px solid; } #first_line{ background-color: #DDD; }
Условие задачи №6.1
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Задача №6.1</title> <style> /* Внутренняя таблица стилей */ table{ border-collapse: collapse; } caption{ text-align: left; margin-bottom: 0.2em; } th,td{ padding: 0.4em; border: 1px solid; } #first_line{ background-color: #DDD; } </style> </head> <body> <table> <caption>Таблица №1</caption> <tr id="first_line"> <th>1-я колонка</th> <th>2-я колонка</th> <th>3-я колонка</th> </tr> <tr> <td>Ячейка №1.1</td> <td>Ячейка №1.2</td> <td>Ячейка №1.3</td> </tr> <tr> <td>Ячейка №2.1</td> <td>Ячейка №2.2</td> <td>Ячейка №2.3</td> </tr> </table> </body> </html>
Решение задачи №6.1
6.2. Отформатируйте исходный код таблицы в условии. Показать решение.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Задача №6.2</title> <style> /* Внутренняя таблица стилей */ table{ border-collapse: collapse; } caption{ text-align: left; margin-bottom: 0.2em; } th,td{ padding: 0.4em; border: 1px solid; } #first_line{ background-color: #DDD; } </style> </head> <body> <table><caption>Таблица №1</caption> <tr id="first_line"><th>1-я колонка</th> <th>2-я колонка</th><th>3-я колонка</th></tr> <tr><td>Ячейка №1.1</td><td>Ячейка №1.2</td> <td>Ячейка №1.3</td></tr><tr><td>Ячейка №2.1</td> <td> Ячейка №2.2</td><td> Ячейка №2.3</td></tr></table> </body> </html>
Условие задачи №6.2
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Задача №6.2</title> <style> /* Внутренняя таблица стилей */ table{ border-collapse: collapse; } caption{ text-align: left; margin-bottom: 0.2em; } th,td{ padding: 0.4em; border: 1px solid; } #first_line{ background-color: #DDD; } </style> </head> <body> <table> <caption>Таблица №1</caption> <tr id="first_line"> <th>1-я колонка</th> <th>2-я колонка</th> <th>3-я колонка</th> </tr> <tr> <td>Ячейка №1.1</td> <td>Ячейка №1.2</td> <td>Ячейка №1.3</td> </tr> <tr> <td>Ячейка №2.1</td> <td>Ячейка №2.2</td> <td>Ячейка №2.3</td> </tr> </table> </body> </html>
Решение задачи №6.2
6.3. Исправьте ошибки в исходном коде таблицы в условии. Показать решение.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Задача №6.3</title> <style> /* Внутренняя таблица стилей */ table{ border-collapse: collapse; } caption{ text-align: left; margin-bottom: 0.2em; } th,td{ padding: 0.4em; border: 1px solid; } #first_line{ background-color: #DDD; } </style> </head> <body> <tablle> <tr> <td>Ячейка №1.1<td> <td>Ячейка №1.2<td> <td>Ячейка №1.3<tr> </td> <tr id="first_line"> <th>1-я колонка</th> <td>2-я колонка</td> <th>3-я колонка</th> <tr> </tr> <td>Ячейка №2.1</dd> <td>Ячейка №2.2</td> <tt>Ячейка №2.3</td> </tr> <caption>Таблица №1</caption> </tablle> </body> </html>
Условие задачи №6.3
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Задача №6.3</title> <style> /* Внутренняя таблица стилей */ table{ border-collapse: collapse; } caption{ text-align: left; margin-bottom: 0.2em; } th,td{ padding: 0.4em; border: 1px solid; } #first_line{ background-color: #DDD; } </style> </head> <body> <table> <caption>Таблица №1</caption> <tr id="first_line"> <th>1-я колонка</th> <th>2-я колонка</th> <th>3-я колонка</th> </tr> <tr> <td>Ячейка №1.1</td> <td>Ячейка №1.2</td> <td>Ячейка №1.3</td> </tr> <tr> <td>Ячейка №2.1</td> <td>Ячейка №2.2</td> <td>Ячейка №2.3</td> </tr> </table> </body> </html>
Решение задачи №6.3
6.4. Воссоздайте код таблицы, представленной в условии. Для оформления таблицы используйте готовую внутреннюю таблицу стилей, а для объединения ячеек используйте атрибут colspan. Все «жирные» ячейки являются заголовочными. Также используйте для разметки таблицы теги <tbody>, <thead> и <tfoot>. Показать решение.
/* Внутренняя таблица стилей */ table{ border-collapse: collapse; } caption{ text-align: left; margin-bottom: 0.2em; } th,td{ padding: 0.4em; border: 1px solid; } .green_background{ background-color: green; } .red_background{ background-color: red; } .yellow_background{ background-color: yellow; } .grey_background{ background-color: grey; }
Условие задачи №6.4
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Задача №6.4</title> <style> /* Внутренняя таблица стилей */ table{ border-collapse: collapse; } caption{ text-align: left; margin-bottom: 0.2em; } th,td{ padding: 0.4em; border: 1px solid; } .green_background{ background-color: green; } .red_background{ background-color: red; } .yellow_background{ background-color: yellow; } .grey_background{ background-color: grey; } </style> </head> <body> <table> <caption>Таблица №1</caption> <thead class="grey_background"> <tr> <th colspan="4">Поры года</th> </tr> </thead> <tbody> <tr> <th>Зима</th> <td>Декабрь</td><td>Январь</td><td>Февраль</td> </tr> </tbody> <tbody class="green_background"> <tr> <th>Весна</th> <td>Март</td><td>Апрель</td><td>Май</td> </tr> </tbody> <tbody class="red_background"> <tr> <th>Лето</th> <td>Июнь</td><td>Июль</td><td>Август</td> </tr> </tbody> <tbody class="yellow_background"> <tr> <th>Осень</th> <td>Сентябрь</td><td>Октябрь</td><td>Декабрь</td> </tr> </tbody> <tfoot class="grey_background"> <tr> <td colspan="2">Всего в году:</td> <td colspan="2">12 месяцев</td> </tr> </tfoot> </table> </body> </html>
Решение задачи №6.4
6.5. Отформатируйте исходный код таблицы в условии, после чего исправьте имеющиеся ошибки. Показать решение.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Задача №6.5</title> <style> /* Внутренняя таблица стилей */ table{ border-collapse: collapse; } caption{ text-align: left; margin-bottom: 0.2em; } th,td{ padding: 0.4em; border: 1px solid; } .green_background{ background-color: green; } .red_background{ background-color: red; } .yellow_background{ background-color: yellow; } .grey_background{ background-color: grey; } </style> </head> <body> <table><caption>Таблица №1<caption> <thead class="grey_background"><tr> <th colspan="4">Поры года</th><tr><thead> </tbody></tr><td>Зима</td> <td>Декабрь<td></td>Январь</td><td>Февраль</td> </tr></tbody><tbody class="green_background"> <tr><th>Весна</th> <td>Март</td><td>Апрель<td></td>Май</td> </tr></tbody><tbody class="red_background"><tr> <th>Лето</th><td>Июнь</td><td>Июль </td><td>Август </td></tr></tbody><tbody class="yellow_background"> <tr><th> Осень</th><td>Сентябрь</td><td> Октябрь</td><td>Декабрь</td></tr></tbody> <tfoot class="grey_background"><tr> <td colspan="2">Всего в году:</td> <td colspan="2">12 месяцев</td></tr></ffoot> </table> </body> </html>
Условие задачи №6.5
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Задача №6.5</title> <style> /* Внутренняя таблица стилей */ table{ border-collapse: collapse; } caption{ text-align: left; margin-bottom: 0.2em; } th,td{ padding: 0.4em; border: 1px solid; } .green_background{ background-color: green; } .red_background{ background-color: red; } .yellow_background{ background-color: yellow; } .grey_background{ background-color: grey; } </style> </head> <body> <table> <caption>Таблица №1</caption> <thead class="grey_background"> <tr> <th colspan="4">Поры года</th> </tr> </thead> <tbody> <tr> <th>Зима</th> <td>Декабрь</td><td>Январь</td><td>Февраль</td> </tr> </tbody> <tbody class="green_background"> <tr> <th>Весна</th> <td>Март</td><td>Апрель</td><td>Май</td> </tr> </tbody> <tbody class="red_background"> <tr> <th>Лето</th> <td>Июнь</td><td>Июль</td><td>Август</td> </tr> </tbody> <tbody class="yellow_background"> <tr> <th>Осень</th> <td>Сентябрь</td><td>Октябрь</td><td>Декабрь</td> </tr> </tbody> <tfoot class="grey_background"> <tr> <td colspan="2">Всего в году:</td> <td colspan="2">12 месяцев</td> </tr> </tfoot> </table> </body> </html>
Решение задачи №6.5
Использование гиперссылок в HTML
7.1. Создайте простейшую веб-страничку, которая будет содержать два параграфа с предложениями: «Совершить переход на главную страницу сайта html.okpython.net можно здесь» и «Загрузить учебный минисайт, построенный на относительной адресации, можно по адресу https://html.okpython.net/codes/html/html_uchebnik/html_uchebnik_examples_2/relative_path.7z здесь». Последние слова в предложениях должны быть текстовыми гиперссылками. Во втором случае используйте подсказку «Загрузка начнется автоматически!» и атрибут download (ссылка реальная, при клике по ней должен загружаться наш учебный минисайт). Показать решение.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Задача №7.1</title> </head> <body> <p> Совершить переход на главную страницу сайта html.okpython.net можно <a href="https://html.okpython.net/">здесь</a>. </p> <!-- Весь путь смотрите в условии --> <p title="Загрузка начнется автоматически!"> Загрузить учебный минисайт, построенный на относительной адресации, можно по адресу https://html.okpython.net/.../relative_path.7z <a href="https://html.okpython.net/.../relative_path.7z" download> здесь</a>. </p> </body> </html>
Решение задачи №7.1
7.2. Воссоздайте код представленной в условии веб-страницы. Для просмотра конечного результата
отображения страницы в браузере выберите пункт «Результат». Изображение и текст страницы должны стать одной большой
гиперссылкой, которая должна открывать страницу помощи проекту в новой вкладке по адресу
https://html.okpython.net/moduls/
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Задача №7.2</title> <style> /* Внутренняя таблица стилей */ a{ display: block; width: 70%; text-decoration: none; margin: auto; margin-top: 5em; } img, p{ display: block; width: 90%; margin: auto; } .align_text{ text-align: center; } </style> </head> <body> <img src="donate.png"> <p>Помочь проекту html.okpython.net</p> </body> </html>
Условие задачи №7.2
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Задача №7.2</title> <style> /* Внутренняя таблица стилей */ a{ display: block; width: 70%; text-decoration: none; margin: auto; margin-top: 5em; } img, p{ display: block; width: 90%; margin: auto; } .align_text{ text-align: center; } </style> </head> <body> <a href="https://html.okpython.net/moduls/payments_modul/help_payments.html" target="_blank" > <img src="donate.png"> <p class="align_text">Помочь проекту html.okpython.net</p> </a> </body> </html>
Решение задачи №7.2
7.3. Скопируйте исходный код условия в свой текстовый редактор. Превратите пункты оглавления представленной веб-страницы во внутренние ссылки на соответствующие разделы страницы. Для просмотра конечного результата отображения страницы в браузере выберите пункт «Результат». В качестве якорей используйте заголовки разделов, задав для них универсальный атрибут id. Чтобы проверить работоспособность полученного оглавления, откройте результат в новой вкладке браузера. Показать решение.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Задача №7.3</title> <style> /* Внутренняя таблица стилей */ .caption_h_1{ margin-top: 1.5em; margin-bottom: 1.1em; font-family: Arial; text-align: center; font-size: 14px !important; color: #173147; } .caption_h_2{ margin-top: 1.5em; margin-bottom: 1.1em; color: #000; font-weight: bold; text-align: center; font-size: 13px; font-family: Arial, sans-serif; color: #173147; } .paragraph{ margin-top: 7px; margin-bottom: 5px; line-height: 1.5; text-indent: 5px; } .definition_paragraph{ margin-top: 15px; margin-bottom:15px; padding-left: 5px; border: 0px; border-left: 5px; border-color: #CCCCFF; border-style: solid; line-height: 1.5; text-indent: 5px; } .note_paragraph{ margin-top: 15px; margin-bottom:15px; padding-left: 5px; border: 0px; border-left: 5px; border-style: solid; border-color: #FFAAAA; line-height: 1.5; text-indent: 5px; } .definition_word{ font-style: normal; font-weight: 600; font-size: 0.95em; color: #008800; } .list_1{ margin-top: 0px; padding-left: 20px; list-style-image: url(circle_green.png); list-style-position: inside; line-height: 1.8; } .list_1 a{ text-decoration: none; border-bottom: 0px; color: #1611A3; } .content_div{ width: 90%; margin: auto; margin-top: 10px; margin-bottom: 40px; padding: 20px; border-width: 1px; border-style: solid; border-color: #dddddd; box-shadow: 4px 3px 8px 3px #cccccc; } .green_letter{ color: #008800; } .light_blue_letter{ color: #5555CC; } .orange_letter{ color: #FE8C00; } </style> </head> <body> <h1 class="caption_h_1">Создание гиперссылок в HTML. Тег <a></h1> <div class="content_div"> <ul class="list_1"> <li>Определение гиперссылки в HTML</li> <li>Атрибут href гиперссылки</li> <li>Атрибут target гиперссылки</li> <li>Атрибут download гиперссылки</li> </ul> </div> <h2 class="caption_h_2">Определение гиперссылки в HTML</h2> <div class="content_div"> <p class="paragraph"> Для создания гиперссылок в <span class="green_letter">HTML</span> используется элемент <span class="green_letter">«a»</span>, который формируется парным тегом <span class="green_letter"><a></span> (от <span class="orange_letter">англ.</span> <span class="light_blue_letter">anchor</span> – якорь). Все, что находится внутри элемента <span class="green_letter">«a»</span> является гиперссылкой. </p> <p class="definition_paragraph"> <dfn class="definition_word">Гиперссылка</dfn> (от <span class="orange_letter">англ.</span> <span class="light_blue_letter">hyperlink</span> – гиперссылка) – это часть гипертекстового документа, которая ссылается на другие элементы в самом документе (текст, изображение и т.д.) или другие объекты вне данного документа (другой документ, видеофайл и т.д.). </p> </div> <h2 class="caption_h_2">Атрибут href гиперссылки</h2> <div class="content_div"> <p class="paragraph"> Чтобы указать адрес объекта, на который будет совершен переход по ссылке, используется атрибут <span class="green_letter">href</span>. В качестве значения он принимает абсолютный или относительный адрес документа. Примером абсолютного адреса может служить <span class="green_letter">http://www.yandex.ru</span>. Абсолютные адреса действительны в любом месте, независимо от сайта, на котором расположена ссылка. А вот относительные адреса формируются относительно текущей папки документа, в котором прописана данная ссылка, или корня сайта. </p> <p class="note_paragraph"> Напомним, что в случае использования сборки <span class="green_letter">Xampp</span> для размещения создаваемых в ходе изучения веб-страниц на локальном сервере, их нужно помещать в папку <span class="green_letter">/xampp/htdocs</span>. А еще лучше создать в <span class="green_letter">htdocs</span> отдельную рабочую папку, например, <span class="green_letter">test</span>, и уже в ней сохранять тестируемые страницы. Тогда абсолютный адрес, например, для страницы <span class="green_letter">page_1.html</span> будет иметь вид <span class="green_letter">http://localhost/test/page_1.html</span>. Указывать нужно именно <span class="green_letter">http://localhost/...</span>, а не фактическое расположение файла на компьютере, иначе могут возникнуть проблемы с отображением страницы. </p> </div> <h2 class="caption_h_2">Атрибут target гиперссылки</h2> <div class="content_div"> <p class="paragraph"> По умолчанию, при переходе по ссылке браузер открывает документ в текущем окне или фрейме. Чтобы изменить такое поведение браузера, используется атрибут <span class="green_letter">target</span>, который в качестве значения принимает одно из зарезервированных значений <span class="green_letter">"_self | _blank | _parent | _top"</span> или имя целевого окна или фрейма, которое устанавливается их атрибутом <span class="green_letter">name</span>. Если указать несуществующее имя окна или фрейма, то браузер откроет документ в новом окне. Значение <span class="green_letter">"_self"</span> установлено по умолчанию. Если использовать значение <span class="green_letter">"_blank"</span>, то браузер откроет документ в новом окне или фрейме; если <span class="green_letter">"_parent"</span> – в родительском фрейме, а в случае отсутствия такового, в текущем окне; если <span class="green_letter">"_top"</span> – в главном (текущем) окне, в котором находится данный фрейм, содержащий ссылку, а в случае отсутствия фреймов в окне, данное значение сработает, как <span class="green_letter">"_self"</span>. </p> </div> <h2 class="caption_h_2">Атрибут download гиперссылки</h2> <div class="content_div"> <p class="paragraph"> В <span class="green_letter">HTML 5</span> был введен еще один полезный атрибут <span class="green_letter">download</span>, который не принимает значений, а служит индикатором того, что браузер не совершит переход по ссылке, а предложит закачать файл, указанный в атрибуте <span class="green_letter">href</span> в качестве значения. </p> </div> </body> </html>
Условие задачи №7.3
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Задача №7.3</title> <style> /* Внутренняя таблица стилей */ .caption_h_1{ margin-top: 1.5em; margin-bottom: 1.1em; font-family: Arial; text-align: center; font-size: 14px !important; color: #173147; } .caption_h_2{ margin-top: 1.5em; margin-bottom: 1.1em; color: #000; font-weight: bold; text-align: center; font-size: 13px; font-family: Arial, sans-serif; color: #173147; } .paragraph{ margin-top: 7px; margin-bottom: 5px; line-height: 1.5; text-indent: 5px; } .definition_paragraph{ margin-top: 15px; margin-bottom:15px; padding-left: 5px; border: 0px; border-left: 5px; border-color: #CCCCFF; border-style: solid; line-height: 1.5; text-indent: 5px; } .note_paragraph{ margin-top: 15px; margin-bottom:15px; padding-left: 5px; border: 0px; border-left: 5px; border-style: solid; border-color: #FFAAAA; line-height: 1.5; text-indent: 5px; } .definition_word{ font-style: normal; font-weight: 600; font-size: 0.95em; color: #008800; } .list_1{ margin-top: 0px; padding-left: 20px; list-style-image: url(circle_green.png); list-style-position: inside; line-height: 1.8; } .list_1 a{ text-decoration: none; border-bottom: 0px; color: #1611A3; } .content_div{ width: 90%; margin: auto; margin-top: 10px; margin-bottom: 40px; padding: 20px; border-width: 1px; border-style: solid; border-color: #dddddd; box-shadow: 4px 3px 8px 3px #cccccc; } .green_letter{ color: #008800; } .light_blue_letter{ color: #5555CC; } .orange_letter{ color: #FE8C00; } </style> </head> <body> <h1 class="caption_h_1">Создание гиперссылок в HTML. Тег <a></h1> <div class="content_div"> <ul class="list_1"> <li><a href="#point_1">Определение гиперссылки в HTML</a></li> <li><a href="#point_2">Атрибут href гиперссылки</a></li> <li><a href="#point_3">Атрибут target гиперссылки</a></li> <li><a href="#point_4">Атрибут download гиперссылки</a></li> </ul> </div> <h2 class="caption_h_2" id="point_1">Определение гиперссылки в HTML</h2> <div class="content_div"> <p class="paragraph"> Для создания гиперссылок в <span class="green_letter">HTML</span> используется элемент <span class="green_letter">«a»</span>, который формируется парным тегом <span class="green_letter"><a></span> (от <span class="orange_letter">англ.</span> <span class="light_blue_letter">anchor</span> – якорь). Все, что находится внутри элемента <span class="green_letter">«a»</span> является гиперссылкой. </p> <p class="definition_paragraph"> <dfn class="definition_word">Гиперссылка</dfn> (от <span class="orange_letter">англ.</span> <span class="light_blue_letter">hyperlink</span> – гиперссылка) – это часть гипертекстового документа, которая ссылается на другие элементы в самом документе (текст, изображение и т.д.) или другие объекты вне данного документа (другой документ, видеофайл и т.д.). </p> </div> <h2 class="caption_h_2" id="point_2">Атрибут href гиперссылки</h2> <div class="content_div"> <p class="paragraph"> Чтобы указать адрес объекта, на который будет совершен переход по ссылке, используется атрибут <span class="green_letter">href</span>. В качестве значения он принимает абсолютный или относительный адрес документа. Примером абсолютного адреса может служить <span class="green_letter">http://www.yandex.ru</span>. Абсолютные адреса действительны в любом месте, независимо от сайта, на котором расположена ссылка. А вот относительные адреса формируются относительно текущей папки документа, в котором прописана данная ссылка, или корня сайта. </p> <p class="note_paragraph"> Напомним, что в случае использования сборки <span class="green_letter">Xampp</span> для размещения создаваемых в ходе изучения веб-страниц на локальном сервере, их нужно помещать в папку <span class="green_letter">/xampp/htdocs</span>. А еще лучше создать в <span class="green_letter">htdocs</span> отдельную рабочую папку, например, <span class="green_letter">test</span>, и уже в ней сохранять тестируемые страницы. Тогда абсолютный адрес, например, для страницы <span class="green_letter">page_1.html</span> будет иметь вид <span class="green_letter">http://localhost/test/page_1.html</span>. Указывать нужно именно <span class="green_letter">http://localhost/...</span>, а не фактическое расположение файла на компьютере, иначе могут возникнуть проблемы с отображением страницы. </p> </div> <h2 class="caption_h_2" id="point_3">Атрибут target гиперссылки</h2> <div class="content_div"> <p class="paragraph"> По умолчанию, при переходе по ссылке браузер открывает документ в текущем окне или фрейме. Чтобы изменить такое поведение браузера, используется атрибут <span class="green_letter">target</span>, который в качестве значения принимает одно из зарезервированных значений <span class="green_letter">"_self | _blank | _parent | _top"</span> или имя целевого окна или фрейма, которое устанавливается их атрибутом <span class="green_letter">name</span>. Если указать несуществующее имя окна или фрейма, то браузер откроет документ в новом окне. Значение <span class="green_letter">"_self"</span> установлено по умолчанию. Если использовать значение <span class="green_letter">"_blank"</span>, то браузер откроет документ в новом окне или фрейме; если <span class="green_letter">"_parent"</span> – в родительском фрейме, а в случае отсутствия такового, в текущем окне; если <span class="green_letter">"_top"</span> – в главном (текущем) окне, в котором находится данный фрейм, содержащий ссылку, а в случае отсутствия фреймов в окне, данное значение сработает, как <span class="green_letter">"_self"</span>. </p> </div> <h2 class="caption_h_2" id="point_4">Атрибут download гиперссылки</h2> <div class="content_div"> <p class="paragraph"> В <span class="green_letter">HTML 5</span> был введен еще один полезный атрибут <span class="green_letter">download</span>, который не принимает значений, а служит индикатором того, что браузер не совершит переход по ссылке, а предложит закачать файл, указанный в атрибуте <span class="green_letter">href</span> в качестве значения. </p> </div> </body> </html>
Решение задачи №7.3
7.4. Создайте на диске (желательно на локальном сервере Xampp в папке htdocs) тестовую папку test, в ней папку doc_1, в которой создайте папку doc_2 и в ней еще одну папку doc_3. Затем в папке doc_2 создайте пустые веб-документы page_2.html и page_2_1.html, в папке doc_3 – page_3.html, в папке doc_1 – page_1.html и в корневой папке test – index.html. На каждой из страниц создайте относительные ссылки, ведущие на другие страницы. В результате вы должны спокойно перемещаться между страницами. Показать решение.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Задача №7.4</title> </head> <body> <!-- Всего должно получиться 5 страниц --> <!-- Код для страницы index.html --> <a href="doc_1/page_1.html">Переход на page_1.html</a><br> <a href="doc_1/doc_2/page_2.html">Переход на page_2.html</a><br> <a href="doc_1/doc_2/page_2_1.html">Переход на page_2_1.html</a><br> <a href="doc_1/doc_2/doc_3/page_3.html">Переход на page_3.html</a><br> <!-- Код для страницы page_2.html --> <a href="page_2_1.html">Переход на page_2_1.html</a><br> <a href="doc_3/page_3.html">Переход на page_3.html</a><br> <a href="../page_1.html">Переход на page_1.html</a><br> <a href="../../index.html">Переход на index.html</a> <!-- Код для страницы page_2_1.html --> <a href="page_2.html">Переход на page_2.html</a><br> <a href="doc_3/page_3.html">Переход на page_3.html</a><br> <a href="../page_1.html">Переход на page_1.html</a><br> <a href="../../index.html">Переход на index.html</a> <!-- Код для страницы page_3.html --> <a href="../page_2_1.html">Переход на page_2_1.html</a><br> <a href="../page_2.html">Переход на page_2.html</a><br> <a href="../../page_1.html">Переход на page_1.html</a><br> <a href="../../../index.html">Переход на index.html</a> <!-- Код для страницы page_1.html --> <a href="doc_2/page_2_1.html">Переход на page_2_1.html</a><br> <a href="doc_2/page_2.html">Переход на page_2.html</a><br> <a href="doc_2/doc_3/page_3.html">Переход на page_3.html</a><br> <a href="../index.html">Переход на index.html</a> </body> </html>
Решение задачи №7.4
7.5. Отформатируйте исходный код условия, а затем исправьте в нем ошибки. В итоге в новой вкладке браузера должна открываться главная страница нашего сайта. Показать решение.
<DOCTYPE html> <html> <head> <meta charset="utf-9"> <title>Задача №7.5</title> </head> <body> <!- Работаем над исходным кодом всего документа! -> <p>Переход на сайт <span style="color: green"> html.okpython.net</span> можно осуществить по ссылке <a rhef="https//:html.okpython.net/" tagert="blank"> здесь</a>(сайт откроется в новом окне).<//p> </body> </html>
Условие задачи №7.5
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Задача №7.5</title> </head> <body> <!-- Форматируем исходный код тела документа --> <p> Переход на сайт <span style="color: green">html.okpython.net</span> можно осуществить по ссылке <a href="https://html.okpython.net/" target="_blank">здесь</a> (сайт откроется в новом окне). </p> </body> </html>
Решение задачи №7.5
Служебные теги
8.1. Создайте веб-страницу, указав базовый адрес http://localhost/test/, и пропишите в теле документа ссылку на файл page_5.html, который находится в папке по адресу http://localhost/test/doc_5/. Показать решение.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Задача №8.1</title> <!-- Задаем базовый адрес для страницы --> <base href="http://localhost/test/"> </head> <body> <!-- Нужно использовать относительный адрес --> Ссылка на требуемую страницу находится <a href="doc_5/page_5.html">здесь</a>. </body> </html>
Решение задачи №8.1
8.2. Создайте веб-страницу, указав базовый адрес http://localhost/test/, и пропишите в теле документа ссылку на файл page_6.html, который находится в папке по адресу http://localhost/test/doc_5/doc_6/. Также подключите к странице две внешние таблицы стилей CSS: style_1.css и style_2.css. Будем считать, что они находятся по адресу http://localhost/test/css/. Показать решение.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Задача №8.2</title> <!-- Задаем базовый адрес для страницы --> <base href="http://localhost/test/"> <!-- Подключаем требуемые внешние таблицы стилей --> <link rel="stylesheet" href="css/style_1.css"> <link rel="stylesheet" href="css/style_2.css"> </head> <body> Ссылка на требуемую страницу находится <a href="doc_5/doc_6/page_6.html">здесь</a>. </body> </html>
Решение задачи №8.2
8.3. Создайте веб-страницу, указав базовый адрес
http://localhost/test/, и пропишите в теле документа ссылку на файл page_7.html,
который находится в корневой папке. Запретите поисковым роботам индексировать страницу. Также подключите к странице внешнюю таблицу стилей
style_1.css. Будем считать, что она находится по адресу http://localhost/test/css/.
Создайте три элемента «script»: первый скрипт должен располагаться в заголовке документа и выполняться перед
выполнением второго; второй скрипт должен располагаться в начале тела документа и выполняться после загрузки и выполнения первого скрипта; третий скрипт
должен располагаться в конце тела документа и выполняться асинхронно. Будем считать, что элементы «script»
ссылаются, соответственно, на скрипты http://localhost/

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="robots" content="noindex"> <title>Задача №8.3</title> <!-- Задаем базовый адрес для страницы --> <base href="http://localhost/test/"> <!-- Подключаем требуемую внешнюю таблицу стилей --> <link rel="stylesheet" href="css/style_1.css"> <!-- Выполнится перед вторым скриптом --> <script src="javascript/code_1.js" defer></script> </head> <body> <!-- Выполнится после первого скрипта --> <script src="javascript/code_2.js" defer></script> Ссылка на требуемую страницу находится <a href="page_7.html">здесь</a>. <!-- Выполнится асинхронно --> <script src="javascript/code_3.js" async></script> </body> </html>
Решение задачи №8.3
8.4. Создайте корневую папку test, а в ней индексную страницу index.html, разрешив поисковым роботам индексировать ее раз в неделю. В теле документа создайте пустой универсальный контейнер «div» с атрибутом id="magic_div". Далее, создайте в корневой папке каталоги css и js, а в них соответствующие пустые файлы styles.css и scripts.js. Скопируйте в первый файл таблицу стилей условия, а во второй - скрипт условия. Подключите получившуюся внешнюю таблицу стилей и файл со скриптом к нашей индексной странице. При этом элемент «script» разместите в конце тела документа. Также не забудьте задать базовый адрес для страницы. Показать решение.
---------- Для просмотра кода таблицы стилей и файла скрипта выберите соответствующий пункт меню. Для просмотра конечного результата выберите пункт «Результат». ----------
/* Внешняя таблица стилей */ #magic_div{ width: 70%; margin: auto; margin-top: 3em; padding: 0.5em; border: 1px solid green; }
//Внешний скрипт //Находим наш элемент «div» по его id var elem=document.getElementById('magic_div'); //Заполняем его содержимым elem.innerHTML='Я был заполнен при помощи JavaScript!';
Условие задачи №8.4
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Задача №8.4</title> <!-- Задаем базовый адрес для страницы --> <base href="http://localhost/test/"> <!-- Разрешаем переиндексировать раз в неделю --> <meta name="revisit" content="7"> <!-- Подключаем требуемую внешнюю таблицу стилей --> <link rel="stylesheet" href="css/styles.css"> </head> <body> <!-- Создаем пустой универсальный контейнер --> <div id="magic_div"></div> <!-- Подключаем скрипт --> <script src="js/scripts.js"></script> </body> </html>
/* Внешняя таблица стилей */ #magic_div{ width: 70%; margin: auto; margin-top: 3em; padding: 0.5em; border: 1px solid green; }
//Внешний скрипт //Находим наш элемент «div» по его id var elem=document.getElementById('magic_div'); //Заполняем его содержимым elem.innerHTML='Я был заполнен при помощи JavaScript!';
Решение задачи №8.4
8.5. Создайте адаптивную веб-страницу, которая будет одинаково хорошо смотреться и на экране компьютера, и на экране телефона. Для этого задайте соответствующие значения атрибуту viewport тега <meta> (размер страницы должен подстраиваться под размеры экрана устройства с возможностью масштабирования пользователем). Также подключите две внешние таблицы стилей: style.css и style_mob.css. Пусть они находятся по адресу http://localhost/test/site_files/css/. Первая таблица стилей должна срабатывать для устройств с разрешением экранов 900px и более (будем считать их экранами компьютеров и планшетов), а вторая - для устройств с разрешением экранов менее 900px (будем считать их экранами телефонов). Сделать это можно при помощи атрибута media тега <link>. Показать решение.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Задача №8.5</title> <!-- Задаем базовый адрес для страницы --> <base href="http://localhost/test/"> <!-- Не забываем указать viewport --> <meta name="viewport" content="width=device-width, user-scalable=yes"> <!-- Это стили для компьютеров (располагаем их выше) --> <link type="text/css" rel="stylesheet" href="site_files/css/style.css?v01"> <!-- Это стили для телефонов (их расположили ниже в коде) --> <link type="text/css" rel="stylesheet" media="(max-width: 900px)" href="site_files/css/style_mob.css?v01"> </head> <body> А тут располагается содержимое нашей адаптивной странички. </body> </html>
Решение задачи №8.5
Использование графики в html-документе
9.1. Создайте на диске (желательно на локальном сервере Xampp в папке htdocs) тестовую папку test. В папке создайте пустой html-документ index.html и папку для изображений images, в которую скопируйте изображение из условия (выберите пункт «Результат» и скопируйте изображение во фрейме). Вставьте изображение в документ. Не забудьте указать атрибут alt. После изображения вставьте абзац с предложением «Воздушные шары в Минске» и привяжите к нему класс format_text из внутренней таблицы стилей условия. Показать решение.
/* Внутренняя таблица стилей */ img, p{ display: block; width: 70%; margin: auto; margin-top: 1em; } .format_text{ text-align: center; font-weight: bold; }
Условие задачи №9.1
<!DOCTYPE html> <html> <head> <!-- Незабываем задавать служебные элементы --> <meta charset="utf-8"> <title>Задача №9.1</title> <!-- Задаем базовый адрес для страницы --> <base href="http://localhost/test/"> <style> /* Внутренняя таблица стилей */ img, p{ display: block; width: 70%; margin: auto; margin-top: 1em; } .format_text{ text-align: center; font-weight: bold; } </style> </head> <body> <img src="images/balls_2015.jpg" alt="Воздушные шары в Минске."> <p class="format_text"> Воздушные шары в Минске. </p> </body> </html>
Решение задачи №9.1
9.2. Очистите папку test. Создайте в ней три пустые html-страницы: page_1.html, page_2.html, page_3.html. Также создайте папку для изображений images, в которую скопируйте изображение условия. Вставьте во вторую и третью страницы абзацы, содержащие строки, соответственно, "Был выбран красный прямоугольник." и "Был выбран синий прямоугольник.". Используйте скопированное изображение на первой странице в качестве клиентской карты изображения: клик по красному прямоугольнику должен загружать вторую страницу, а клик по синему – третью страницу. Исходите из того, что разрешение рисунка 401х144 пикселя и он разделен примерно пополам. Для примерного определения координат оси X, Y направьте из верхней левой вершины рисунка вправо и вниз. Это поможет примерно задать координаты для активных зон в виде прямоугольников. Добавьте на вторую и третью страницы ссылки возврата на первую страницу. Показать решение.

Условие задачи №9.2
<!DOCTYPE html> <html> <head> <!-- Незабываем задавать служебные элементы --> <meta charset="utf-8"> <title>Создаем клиентскую карту-изображение</title> <base href="http://localhost/test/"> </head> <body> <img src="images/example_9_2.png" alt="Прямоугольники" usemap="#map_1"> <map name="map_1" id="map_1"> <!-- Определяем область красного прямоугольника на изображении --> <area href="page_2.html" shape="rect" coords="0,0 200,143"> <!-- Определяем область синего прямоугольника на изображении --> <area href="page_3.html" shape="rect" coords="200,0 400,143"> </map> <p> Выберите прямоугольник. </p> </body> </html>
Решение задачи №9.2
Вставка в документ медиафайлов и других объектов
10.1. Создайте в корневой папке test (желательно на локальном сервере Xampp) папку music. Поместите туда два любых аудиофайла (песни). Создайте в корневой папке страницу page_music.html и разместите на ней данные аудиозаписи. Путь к первой аудиозаписи укажите в теге <audio>, а ко второй – в атрибуте src тега <source>. Поэкспериментируйте с атрибутами элемента «audio». Показать решение.
<!DOCTYPE html> <html> <head> <!-- Незабываем задавать служебные элементы --> <meta charset="utf-8"> <title>Задача №10.1</title> <base href="http://localhost/test/"> </head> <body> <p> <audio src="music/track_1.mp3" controls loop muted></audio> – первая запись. </p> <p> <audio controls autoplay> <source src="music/track_2.mp3"> </audio> – вторая запись. </p> </body> </html>
Решение задачи №10.1
10.2. Очистите папку test, а затем создайте в ней папку video. Поместите туда два каких-нибудь видеофайла. Создайте в корневой папке страницу page_video.html и разместите на ней данные видеоролики. Путь к первому видеофайлу укажите в теге <video>, а ко второй – в атрибуте src тега <source>. Поэкспериментируйте с атрибутами элемента «video». Показать решение.
<!DOCTYPE html> <html> <head> <!-- Незабываем задавать служебные элементы --> <meta charset="utf-8"> <title>Задача №10.2</title> <base href="http://localhost/test/"> </head> <body> <p> <video src="video/track_1.mp4" controls muted></video> – первый ролик. </p> <p> <video controls autoplay loop> <source src="video/track_2.mp4"> </video> – второй ролик. </p> </body> </html>
Решение задачи №10.2
10.3. Очистите (или создайте) папку test, а затем создайте в ней папку advertising. Создайте в ней две страницы advertising_1.html и advertising_2.html. Первая страница должна содержать абзац с текстом «Хотите узнать скидку на сосиски?», а вторая – абзац с текстом «Скидка составляет 30%». Далее, создайте в корневой папке страницу page_1.html, содержащей элементы: абзац с текстом "Реклама", затем фрейм с именем fr_1, в который будет загружаться страница advertising_1.html (используйте для этого атрибут src фрейма), и в конце создайте еще один абзац, содержащий гиперссылку на страницу advertising_2.html, которая будет загружаться при активации ссылки в окно фрейма (используйте для этого атрибут target гиперссылки). В качестве текста гиперссылки используйте слово «узнать». Показать решение.
<!DOCTYPE html> <html> <head> <!-- Незабываем задавать служебные элементы --> <meta charset="utf-8"> <title>Задача №10.3</title> <base href="http://localhost/test/"> </head> <body> <p>Реклама</p> <!-- Во фрейм будет загружена страница advertising_1.html --> <iframe src="advertising/advertising_1.html" sandbox name="fr_1"> Альтернативный текст указывается внутри контейнера. </iframe> <p> <!-- Страница advertising_2.html будет загружена во фрейм --> <a href="advertising/advertising_2.html" target="fr_1">Узнать</a> </p> </body> </html>
Решение задачи №10.3
html-формы
11.1. Очистите (или создайте) папку test, а затем создайте в ней пустую html-страницу. Добавьте на страницу код простейшей формы для ввода имени и фамилии пользователя. Обязательно задайте имена полям ввода. Для связи полей формы с соответствующим текстом используйте тег <label>. В качестве обработчика формы укажите скрипт php/registration.php. Данные должны отправляться методом POST. Не забудьте также задать имя форме и отключите автозаполнение полей. Кнопку отправки данных формы на сервер создайте при помощи тега <input>. Показать решение.
<!DOCTYPE html> <html> <head> <!-- Незабываем задавать служебные элементы --> <meta charset="utf-8"> <base href="http://localhost/test/"> <title>Задача №11.1</title> </head> <body> <form action="php/registration.php" method="POST" name="reg_form" autocomplete="off"> <!-- Создаем поле для ввода имени --> <label>Имя: <input type="text" name="first_name"></label> <br><br> <!-- Создаем поле для ввода фамилии --> <label>Фамилия: <input type="text" name="last_name"></label> <br><br> <!-- Создаем кнопку для отправки данных формы на сервер --> <input type="submit" value="Отправить"> </form> </body> </html>
Решение задачи №11.1
11.2. Усложните код первой задачи. Добавьте поле выбора пола, использовав радиокнопки, а затем поле выбора владения языками, используя три тега <input> в виде флажков для русского, белорусского и английского языков. Не забудьте связать подписи к кнопкам с самими кнопками при помощи тега <label>. Добавьте кнопку сброса формы. Показать решение.
---------- Для просмотра конечного результата выберите пункт «Результат». ----------
Условие задачи №11.2
<!DOCTYPE html> <html> <head> <!-- Незабываем задавать служебные элементы --> <meta charset="utf-8"> <base href="http://localhost/test/"> <title>Задача №11.2</title> </head> <body> <form action="php/registration.php" method="POST" name="reg_form" autocomplete="off"> <label>Имя: <input type="text" name="first_name"></label> <br><br> <label>Фамилия: <input type="text" name="last_name"></label> <br><br> Укажите пол: <label>мужской <input type="radio" name="sex" value="man"></label> <label>женский <input type="radio" name="sex" value="woman"></label> <br><br> Владение языками: <label>русский<input type="checkbox" name="ru" value="ru"></label> <label>белорусский<input type="checkbox" name="bel" value="bel"></label> <label>английский<input type="checkbox" name="en" value="en"></label> <br><br> <input type="reset" value="Сброс"> <input type="submit" value="Отправить"> </form> </body> </html>
Решение задачи №11.2
11.3. Продолжим усложнять форму, код которой был написан в задачах №11.1 и №11.2. Добавьте в форму поля выбора страны проживания и загрузки фотографии для профиля. Используйте для этого, соответственно, теги <select> и <input>. Показать решение.
---------- Для просмотра конечного результата выберите пункт «Результат». ----------
Условие задачи №11.3
<!DOCTYPE html> <html> <head> <!-- Незабываем задавать служебные элементы --> <meta charset="utf-8"> <base href="http://localhost/test/"> <title>Задача №11.3</title> </head> <body> <form action="php/registration.php" method="POST" name="reg_form" autocomplete="off"> <label>Имя: <input type="text" name="first_name"></label> <br><br> <label>Фамилия: <input type="text" name="last_name"></label> <br><br> Укажите пол: <label>мужской <input type="radio" name="sex" value="man"></label> <label>женский <input type="radio" name="sex" value="woman"></label> <br><br> <label for="country">Страна проживания:</label> <select name="country" id="country"> <option value="1">Беларусь</option> <option value="2">Российская Федерация</option> <option value="3">Другое государство</option> </select> <br><br> Владение языками: <label>русский<input type="checkbox" name="ru" value="ru"></label> <label>белорусский<input type="checkbox" name="bel" value="bel"></label> <label>английский<input type="checkbox" name="en" value="en"></label> <br><br> <label>Фото профиля: <input type="file" name="ru" value="ru"></label> <br><br> <input type="reset" value="Сброс"> <input type="submit" value="Отправить"> </form> </body> </html>
Решение задачи №11.3
11.4. Добавьте в код формы, написанный в задачах №11.1-№11.3, автозаполнение в поле ввода имени, а также поля ввода логина и пароля. Используйте для этого, соответственно, теги <datalist> и <input>. Объедините все поля формы, кроме кнопок сброса и отправки, при помощи тега <fieldset> и укажите заголовок, как показано в условии. Поэкспериментируйте с атрибутами элементов формы. Показать решение.
---------- Для просмотра конечного результата выберите пункт «Результат». ----------
Условие задачи №11.4
<!DOCTYPE html> <html> <head> <!-- Незабываем задавать служебные элементы --> <meta charset="utf-8"> <base href="http://localhost/test/"> <title>Задача №11.4</title> </head> <body> <form action="php/registration.php" method="POST" name="reg_form" autocomplete="off"> <fieldset> <legend>Регистрационная форма пользователя</legend><br> <label>Имя: <input type="text" name="first_name" list="n_1"></label> <br><br> <datalist id="n_1"> <option value="Вася"> <option value="Петя"> <option value="Катя"> <option value="Лена"> </datalist> <label>Фамилия: <input type="text" name="last_name"></label> <br><br> Укажите пол: <label>мужской <input type="radio" name="sex" value="man"></label> <label>женский <input type="radio" name="sex" value="woman"></label> <br><br> <label for="country">Страна проживания:</label> <select name="country" id="country"> <option value="1">Беларусь</option> <option value="2">Российская Федерация</option> <option value="3">Другое государство</option> </select> <br><br> Владение языками: <label>русский<input type="checkbox" name="ru" value="ru"></label> <label>белорусский<input type="checkbox" name="bel" value="bel"></label> <label>английский<input type="checkbox" name="en" value="en"></label> <br><br> <label>Фото профиля: <input type="file" name="profile_foto"></label> <br><br> <label>Введите логин: <input type="text" name="login"></label> <br><br> <label>Введите пароль: <input type="password" name="password"></label> <br><br> <label>Повторите пароль: <input type="password" name="repeat_pass"></label> <br> </fieldset> <br> <input type="reset" value="Сброс"> <input type="submit" value="Отправить" disabled> </form> </body> </html>
Решение задачи №11.4
11.5. Отформатируйте исходный код условия. Показать решение.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <base href="http://localhost/test/"> <title>Задача №11.5</title> </head> <body> <form action="php/registration.php" method="POST" name="reg_form" autocomplete="off"> <fieldset><legend> Регистрационная форма пользователя</legend><br> <label>Имя: <input type="text" name="first_name" list="n_1"> </label><br><br><datalist id="n_1"><option value="Вася"> <option value="Петя"><option value="Катя"> <option value="Лена"></datalist> <label>Фамилия: <input type="text" name="last_name"></label> <br><br> Укажите пол: <label>мужской <input type="radio" name="sex" value="man"></label> <label> женский <input type="radio" name="sex" value="woman"></label> <br><br><label for="country">Страна проживания:</label> <select name="country" id="country"> <option value="1">Беларусь</option><option value="2"> Российская Федерация</option> <option value="3">Другое государство</option></select><br><br> Владение языками: <label>русский <input type="checkbox" name="ru" value="ru"></label> <label>белорусский<input type="checkbox" name="bel" value="bel"> </label> <label>английский <input type="checkbox" name="en" value="en"></label><br><br> <label>Фото профиля: <input type="file" name="profile_foto"> </label><br><br> <label>Введите логин: <input type="text" name="login"></label> <br><br><label>Введите пароль: <input type="password" name="password"></label><br><br> <label>Повторите пароль: <input type="password" name="repeat_pass"></label> <br></fieldset> <br> <input type="reset" value="Сброс"> <input type="submit" value="Отправить" disabled></form> </body> </html>
Условие задачи №11.5
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <base href="http://localhost/test/"> <title>Задача №11.5</title> </head> <body> <form action="php/registration.php" method="POST" name="reg_form" autocomplete="off"> <fieldset> <legend>Регистрационная форма пользователя</legend><br> <label>Имя: <input type="text" name="first_name" list="n_1"></label> <br><br> <datalist id="n_1"> <option value="Вася"> <option value="Петя"> <option value="Катя"> <option value="Лена"> </datalist> <label>Фамилия: <input type="text" name="last_name"></label> <br><br> Укажите пол: <label>мужской <input type="radio" name="sex" value="man"></label> <label>женский <input type="radio" name="sex" value="woman"></label> <br><br> <label for="country">Страна проживания:</label> <select name="country" id="country"> <option value="1">Беларусь</option> <option value="2">Российская Федерация</option> <option value="3">Другое государство</option> </select> <br><br> Владение языками: <label>русский<input type="checkbox" name="ru" value="ru"></label> <label>белорусский<input type="checkbox" name="bel" value="bel"></label> <label>английский<input type="checkbox" name="en" value="en"></label> <br><br> <label>Фото профиля: <input type="file" name="profile_foto"></label> <br><br> <label>Введите логин: <input type="text" name="login"></label> <br><br> <label>Введите пароль: <input type="password" name="password"></label> <br><br> <label>Повторите пароль: <input type="password" name="repeat_pass"></label> <br> </fieldset> <br> <input type="reset" value="Сброс"> <input type="submit" value="Отправить" disabled> </form> </body> </html>
Решение задачи №11.5
11.6. Восстановите исходный код страницы условия. Используйте тег <textarea>, а также тег <button> для создания кнопки отправки данных на сервер. Кнопка должна быть неактивной. Показать решение.
---------- Для просмотра конечного результата выберите пункт «Результат». ----------
Условие задачи №11.6
<!DOCTYPE html> <html> <head> <!-- Незабываем задавать служебные элементы --> <meta charset="utf-8"> <base href="http://localhost/test/"> <title>Задача №11.6</title> </head> <body> <form action="php/registration.php" method="POST" name="reg_form"> <label for="comment"> Оставить сообщение: </label> <br><br> <textarea id="comment" cols="40" rows="7" wrap="hard"> Введите сообщение размером в 7 строк по 40 символов. </textarea> <br><br> <button type="submit" name="submit_button" disabled> Отправить </button> </form> </body> </html>
Решение задачи №11.6
11.7. В исходном коде страницы присутствуют три ошибки. Найдите их. Показать решение.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <base href="http://localhost/test/"> <title>Задача №11.7</title> </head> <body> <form action="php/registration.php" mehtod="POST" name="reg_form"> <label for="comment"> Оставить сообщение: </label> <br><br> <textarea id="comment" cols="40" rows="7" wrap="hard"> Введите сообщение размером в 7 строк по 40 символов. <textarea> <br><br> <button tipe="submit" name="submit_button" disabled> Отправить </button> </form> </body> </html>
Условие задачи №11.7
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <base href="http://localhost/test/"> <title>Задача №11.7</title> </head> <body> <form action="php/registration.php" method="POST" name="reg_form"> <label for="comment"> Оставить сообщение: </label> <br><br> <textarea id="comment" cols="40" rows="7" wrap="hard"> Введите сообщение размером в 7 строк по 40 символов. </textarea> <br><br> <button type="submit" name="submit_button" disabled> Отправить </button> </form> </body> </html>
Решение задачи №11.7
Структура html-документа
12.1. Создайте на диске (желательно на локальном сервере Xampp в папке
htdocs) тестовую папку test, в ней папку
site_files, в которой создайте папки css и js.
В первой папке создайте файлы site_styles.css и site_styles_mob.css для хранения
внешних таблиц стилей, а во второй – файл libruary.js для хранения необходимых скриптов. Теперь в корневой папке
создайте страницу index.html и сверстайте ее html-макет,
который позже мы будем использовать в ходе практической верстки элементов нашего учебного сайта.
1. В качестве основного языка страницы укажите русский язык.
2. Задайте кодировку «utf-8» для страницы.
3. Задайте требуемые параметры атрибута viewport: страница должна
масштабироваться по размеру экрана устройства с возможностью изменения масштаба пользователем.
4. Укажите автора и владельца сайта.
5. Разрешите роботам индексировать страницу раз в день и переходить по ссылкам на ней.
6. Подключите к странице иконку в формате ICO (какой-нибудь значок на ваше
усмотрение).
7. Подключите созданные таблицы стилей сайта: сперва site_styles.css, затем
site_styles_mob.css (здесь используйте в теге подключения атрибут media).
8. Подключите скрипты сайта libruary.js (правильно указывайте путь к файлу).
9. В качестве заголовка странички укажите «Пример верстки сайта на HTML и CSS», а в качестве описания
«Рассматривается порядок верстки сайта средствами HTML и CSS.».
10. В теле документа создайте блок-обертку «div id="main_wrapper"» и поместите в него элементы
«header id="site_header"», «aside id="aside_menu"», «main id="content_block"» и «footer id="footer_block"». Идентификаторы понадобятся нам для
привязки стилей к этим элементам.
Показать решение.

<!-- Страницу будем размечать при помощи HTML 5 --> <!DOCTYPE html> <!-- В качестве основного языка страницы указываем «русский» --> <html lang="ru"> <!-- Оформляем заголовок документа со служебной информацией --> <head> <!-- Сообщаем браузеру кодировку символов страницы --> <meta charset="utf-8"> <!-- Задаем параметры для мобильных устройств: --> <!-- масштабируем по размеру экрана устройства, --> <!-- разрешаем пользователям изменять масштаб --> <meta name="viewport" content="width=device-width, user-scalable=yes"> <!-- Указываем автора сайта --> <meta name="author" content="Peter Romanovsky"> <!-- Указываем владельца сайта --> <meta name="copyright" content="html.okpython.net"> <!-- Разрешаем роботам индексировать страницу --> <!-- и переходить по ссылкам на ней --> <meta name="robots" content="index, follow"> <!-- Устанавливаем интервал индексации страницы раз в 1 день --> <meta name="revisit" content="1"> <!-- Задаем для всех страниц базовый адрес --> <base href="http://localhost/test/"> <!-- Подключаем к странице иконку в формате ICO --> <link rel="icon" href="favicon.ico" type="image/x-icon"> <!-- Подключаем таблицы стилей сайта для создания макета --> <!-- Если изменить версию таблицы, браузер загрузит ее с сервера --> <link rel="stylesheet" href="site_files/css/site_styles.css?v01"> <!-- Сработает для устройств с разрешением экрана до 900px --> <link rel="stylesheet" media="(max-width: 900px)" href="site_files/css/site_styles_mob.css?v01"> <!-- Подключаем скрипты сайта --> <script src="site_files/js/libruary.js?v01"></script> <!-- Не забываем про заголовок странички --> <title>Пример верстки сайта на HTML и CSS</title> <!-- Описание странички --> <meta name="description" content="Рассматривается порядок верстки сайта средствами HTML и CSS."> </head> <body> <!-- Блок-обертка содержимого сайта --> <div id="main_wrapper"> <!-- Организуем шапку сайта: меню, логотип и т.д. --> <header id="site_header"> Здесь будет «шапка» сайта. </header> <!-- Меню навигации по сайту --> <aside id="aside_menu"> Здесь будет боковое меню сайта. </aside> <!-- Основное содержимое страницы --> <main id="content_block"> Здесь будем размещать информацию для вывода пользователю. </main> <!-- «Подвал» сайта --> <footer id="footer_block"> Информация об авторе и правах на материалы сайта, контакты и т.д. </footer> </div> </body> </html>
Решение задачи №12.1