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