html.okpython.net
HTML и CSS для начинающих

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

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

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

Синтаксис HTML

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

Условие htmlCodes 
<!DOCTYPE html><html><head><!--  Задаем кодировку текста.  -->
<meta charset="utf-8"><title>Первая html-страница</title></head>
<body>Всем привет от HTML!</body></html>
HTML Результат htmlCodes 
<!DOCTYPE html>
<html>
	<head>
		<!--  Задаем кодировку текста.  -->
		<meta charset="utf-8">
		<title>Первая html-страница</title>
	</head>
<body>
		Всем привет от HTML!
</body>
</html>

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

HTML Результат htmlCodes 
<!DOCTYPE html>
<html>
	<head>
		<!-- Задаем кодировку текста. -->
		<meta charset="utf-8">	
		<title>Первая html-страница</title>
	</head>
	<body>
		Всем привет от HTML!
	</body>
</html>

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

Условие htmlCodes 
<DOCTYPE html>
<html>
	<head>
		<!- Задаем кодировку текста. -->
		<meta charset="utf-8">
		<tittle>Первая html-страница</title>
	</head>>
</body>
		Всем привет от HTML!
<body>
</html>
HTML Результат htmlCodes 
<!DOCTYPE html>
<html>
	<head>
		<!--  Задаем кодировку текста.  -->
		<meta charset="utf-8">
		<title>Первая html-страница</title>
	</head>
<body>
		Всем привет от HTML!
</body>
</html>

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

Условие htmlCodes 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №1.4</title>
</head>
<body>

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

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

</body>
</html>
HTML Результат htmlCodes 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №1.4</title>
</head>
<body>

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

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

HTML Результат htmlCodes 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">	
		<title>Задача №1.5</title>
	</head>
<body>
	<p>
		Я первое предложение.<br>
		Я второе предложение.
	</p>
</body>
</html>

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

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

HTML Результат htmlCodes 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Задача №2.1</title>
	</head>
<body>
	<p>
		Я первое предложение.<br>
		<!-- Не отобразится -->
		<span hidden>Я второе предложение.</span>
	</p>
</body>
</html>

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

HTML Результат htmlCodes 
<!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.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>
HTML Результат 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 class="red_text" title="Я первый абзац">
		Я текст первого абзаца.
		Мой цвет должен стать красным, для 
		этого используйте класс red_text из 
		таблицы стилей выше.
	</p>
	
	<p class="blue_text" title="Я второй абзац">
		Я текст второго абзаца.
		Мой цвет должен стать синим, для 
		этого используйте класс blue_text из 
		таблицы стилей выше.
	</p>
</body>
</html>

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>
HTML Результат htmlCodes 
<!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.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>
HTML Результат htmlCodes 
<!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.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>
HTML Результат htmlCodes 
<!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>

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

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

HTML Результат htmlCodes 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №3.1</title>
</head>
<body>
	<p>
		Сколько будет <span style="color: red">&frac12;+&frac13;</span>?
	</p>
</body>
</html>

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

HTML Результат htmlCodes 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Задача №3.2</title>
	</head>
<body>
	Я открывающий тег <span style="color: green">&lt;span&gt;</span>.
</body>
</html>

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

HTML Результат htmlCodes 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Задача №3.3</title>
</head>
<body>
	"Чтобы вывести мнемонику 
	<span style="color: green" title="Мнемоника">'&amp;amp;'</span> 
	на экран, необходимо в коде знак амперсанда заменить на его мнемонику!".
</body>
</html>

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

Условие htmlCodes 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №3.4</title>
</head>
<body>
	<p>
		&radic;, &#221A;, &#8730; - это корень 2-й степени,<br>
		&#plusmn, &#x00B1;, &#177; - это знак плюс-минус,<br>
		&sect;,	&00A7;, &167; - это знак параграфа. 
	</p>
</body>
</html>
HTML Результат htmlCodes 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №3.4</title>
</head>
<body>
	<p>
		&radic;,	&#x221A;, &#8730; - это корень 2-й степени,<br>
		&plusmn;, &#x00B1;, &#177; - это знак плюс-минус,<br>
		&sect;,	&#x00A7;, &#167; - это знак параграфа. 
	</p>
</body>
</html>

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

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

Условие htmlCodes 


 Осень наступила,
 Падают листы.
 Мне никто не нужен,
 Только Ты.

  Васюткин А.А.


HTML Результат htmlCodes 
<!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.2. Воссоздайте код представленной html-страницы. Используйте теги <p>, <dfn>, <em>, <strong>, <br>. Вспомните про мнемоники символов «<» и «>» (таблицы мнемоник и кодов Юникода можно посмотреть здесь). Показать решение.

Условие htmlCodes

Маркированный список формируется парным тегом <ul> (от англ. unordered list).
Сам элемент «ul» используется, как контейнер для пунктов списка,
которые формируются, как и в случае с нумерованными списками,
парными тегами <li> и располагаются друг за другом.

HTML Результат htmlCodes 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №4.2</title>
</head>
<body>
	
	<p>
		<dfn>Маркированный список</dfn> формируется парным тегом 
		<strong>&lt;ul&gt;</strong> (от англ. <em>unordered list</em>).<br>
		Сам элемент «ul» используется, как контейнер для пунктов списка,<br>
		которые формируются, как и в случае с нумерованными списками,<br>
		парными тегами <strong>&lt;li&gt;</strong> и располагаются друг 
		за другом.
	</p>
	
</body>
</html>

4.3. Воссоздайте код представленной html-страницы. Используйте тег <pre>, пробелы и обычные точки или звездочки. Показать решение.

Условие htmlCodes 
 
 ..      ..   ..........   ...          ...   ..          
 ..      ..   ..........   ....        ....   ..          
 ..      ..       ..       .. ..      .. ..   ..                      
 ..........       ..       ..  ..    ..  ..   ..         
 ..........       ..       ..   ......   ..   ..                   
 ..      ..       ..       ..    ....    ..   ..          
 ..      ..       ..       ..     ..     ..   ..          
 ..      ..       ..       ..            ..   .........       
 ..      ..       ..       ..            ..   .........
HTML Результат htmlCodes 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №4.3</title>
</head>
<body>
 
<pre>
 
    ..      ..   ..........   ...          ...   ..                             
    ..      ..   ..........   ....        ....   ..                     
    ..      ..       ..       .. ..      .. ..   ..                      
    ..........       ..       ..  ..    ..  ..   ..         
    ..........       ..       ..   ......   ..   ..                   
    ..      ..       ..       ..    ....    ..   ..                     
    ..      ..       ..       ..     ..     ..   ..                
    ..      ..       ..       ..            ..   .........       
    ..      ..       ..       ..            ..   .........   
                               
</pre>  
   
</body>
</html>

4.4. Отформатируйте текст, представленный в условии. При этом считайте, что у вас уже имеется готовая таблица стилей, которую вы использовали ранее для верстки других страниц своего сайта. Так что вам нужно просто привязать стили к требуемым элементам при помощи универсального атрибута class. Для форматирования используйте теги <span>, <p>, <h1>-<h6>, <em>, <strong>. Обратите внимание на то, что зеленые слова, выделенные жирным шрифтом, имеют важное значение в текущем контексте (это и нужно донести поисковым роботам). Также не забывайте про мнемоники символов «<» и «>» (таблицы мнемоник и кодов Юникода можно посмотреть здесь). Показать решение.

Условие Результат htmlCodes 
<!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 &ndash; 
абзац). И хотя в некоторых случаях спецификация допускает 
отсутствие закрывающего тега, мы будем применять его всегда, явно 
формируя элемент «Абзац». Добавим, что абзац относится к блочным 
элементам, поэтому по умолчанию начинается с новой строки и 
отделяется от остального содержимого вертикальными отступами. 


Создание заголовков. Теги <h1>-<h6>

Если возникает необходимость как-то назвать часть текста (например, параграф 
или раздел) и выделить его относительную важность, можно воспользоваться 
одним из шести заголовков разного уровня, которые формируются парными тегами 
от <h1> до <h6> (от англ. heading &ndash; заголовок) и также относятся к 
блочным элементам. Заголовок первого уровня отображается самым крупным шрифтом 
жирного начертания, остальные &ndash; поменьше, по мере убывания своей важности. 


Преформатированный текст. Тег <pre>

А что если нам нужно вывести исходный текст на экран без форматирования? Такая 
ситуация случается, например, когда нужно сохранить подряд идущие пробелы и 
переносы строк или просто сохранить исходное форматирование при отображении тех 
же примеров кода. В таких случаях можно применить элемент 
«преформатированный текст», который формируется парным тегом <pre> 
(от англ. preformatted text &ndash; предварительно форматированный текст). 
Браузеры отображают его как блочный элемент.
</body>
</html>
HTML Результат htmlCodes 
<!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">Абзац и формирующий его тег &lt;p&gt;</h2>

<p class="paragraph">
	Для разбиения текста на абзацы в <span class="green_letter">HTML</span> 
	используется элемент <strong class="green_letter">«Абзац»</strong>, 
	который формируется парным тегом 
	<strong class="green_letter">&lt;p&gt;</strong> 
	(от <span class="orange_letter">англ.</span> 
	<em class="light_blue_letter">paragraph</em> &ndash; <em>абзац</em>). И хотя 
	в некоторых случаях спецификация допускает отсутствие закрывающего тега, 
	мы будем применять его всегда, явно формируя элемент 
	<span class="green_letter">«Абзац»</span>. Добавим, что абзац относится к 
	блочным элементам, поэтому по умолчанию начинается с новой строки и 
	отделяется от остального содержимого вертикальными отступами. 
</p>


<h2 class="caption_h_2">Создание заголовков. Теги &lt;h1&gt;-&lt;h6&gt;</h2>

<p class="paragraph">
	Если возникает необходимость как-то назвать часть текста (например, параграф 
	или раздел) и выделить его относительную важность, можно воспользоваться 
	одним из шести заголовков разного уровня, которые формируются парными тегами 
	от <strong class="green_letter">&lt;h1&gt;</strong> до 
	<strong class="green_letter">&lt;h6&gt;</strong> (от 
	<span class="orange_letter">англ.</span>	<em class="light_blue_letter">heading</em> 
	&ndash; <em>заголовок</em>) и также относятся к блочным элементам. Заголовок 
	первого уровня отображается самым крупным шрифтом жирного начертания, остальные 
	- поменьше, по мере убывания своей важности. 
</p>


<h2 class="caption_h_2">Преформатированный текст. Тег &lt;pre&gt;</h2>

<p class="paragraph">
	А что если нам нужно вывести исходный текст на экран без форматирования? Такая 
	ситуация случается, например, когда нужно сохранить подряд идущие пробелы и 
	переносы строк или просто сохранить исходное форматирование при отображении тех 
	же примеров кода. В таких случаях можно применить элемент 
	<strong class="green_letter">'преформатированный текст'</strong>, который 
	формируется парным тегом <strong class="green_letter">&lt;pre&gt;</strong> 
	(от <span class="orange_letter">англ.</span> 
	<em class="light_blue_letter">preformatted text</em> &ndash; 
	<em>предварительно форматированный текст</em>). 
	Браузеры отображают его как блочный элемент.
</p>
   
</body>
</html>

Создание списков

5.1. Воссоздайте код представленной html-страницы. Используйте маркированный список <ul> и универсальный атрибут style, передав ему значения цвета "color: green", "color: red" и "color: orange". Показать решение.

Условие htmlCodes
  • Зима
  • Весна
  • Лето
  • Осень
HTML Результат htmlCodes 
<!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.2. Усложните список задачи №5.1, создав вложенные списки и перечислив в них месяцы, как показано в условии. Используйте в решении задачи нумерованный список <ol> и маркированные списки <ul>. Показать решение.

Условие htmlCodes
  1. Зима
    • Декабрь
    • Январь
    • Февраль
  2. Весна
    • Март
    • Апрель
    • Май
  3. Лето
    • Июнь
    • Июль
    • Август
  4. Осень
    • Сентябрь
    • Октябрь
    • Декабрь
HTML Результат htmlCodes 
<!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.3. Отформатируйте исходный код списка в условии. Показать решение.

Условие Результат htmlCodes 
<!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>
HTML Результат htmlCodes 
<!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.4. Исправьте ошибки в исходном коде списка в условии. Для просмотра результата отображения страницы в браузере выберите пункт «Результат». Показать решение.

Условие Результат htmlCodes 
<!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>
HTML Результат htmlCodes 
<!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.5. Создайте при помощи тегов <dl>, <dt> и <dd> простейший список определений. Для просмотра конечного результата отображения списка в браузере выберите пункт «Результат». Для оформления таблицы используйте готовую внутреннюю таблицу стилей, представленную в условии (используйте для этого тег <style>). В качестве изображений в списке используйте соответствующие мнемоники, которые можно посмотреть в нашей таблице мнемоник «Природные явления». Показать решение.

Условие Результат htmlCodes 
	/* Внутренняя таблица стилей */

	dt{
	padding: 0.1em;
	margin-left: 1em;
	color: green;
	}

	dd{
	padding: 0.1em;
	margin-left: 1em;
	margin-bottom: 0.5em;
	}
HTML Результат htmlCodes 
<!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>&#x263C; Солнечно</dt>
			
		<dd>
			Кругом тепло и солнечно, тучки почти отсутствуют.
		</dd>
		
		
		<dt>&#x2601; Облачно</dt>
			
		<dd>
			Небо покрыто тучками, солнышко почти не видно.
		</dd>
		
		
		<dt>&#x2602 Дождь</dt>
			
		<dd>
			Серые тучи покрывают все небо и обильно поливают нас жождем.
		</dd>
		
	</dl>
	
</body>
</html>

Создание таблиц

6.1. Создайте простейшую таблицу, состоящую из заголовка, трех колонок и трех строк. Используйте для этого теги <table>, <caption>, <tr>, <th> и <td>. Для оформления таблицы используйте готовую внутреннюю таблицу стилей, представленную в условии (используйте для этого тег <style>). Именованный класс в таблице задает серый фон элемента с соответствующим id, подключите его к первой строке таблицы. Для просмотра результата отображения страницы в браузере выберите пункт «Результат». Показать решение.

Условие Результат htmlCodes 



	/* Внутренняя таблица стилей */
	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;
	}
HTML Результат htmlCodes 
<!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.2. Отформатируйте исходный код таблицы в условии. Показать решение.

Условие Результат htmlCodes 
<!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>
HTML Результат htmlCodes 
<!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.3. Исправьте ошибки в исходном коде таблицы в условии. Показать решение.

Условие Результат htmlCodes 
<!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>
HTML Результат htmlCodes 
<!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.4. Воссоздайте код таблицы, представленной в условии. Для оформления таблицы используйте готовую внутреннюю таблицу стилей, а для объединения ячеек используйте атрибут colspan. Все «жирные» ячейки являются заголовочными. Также используйте для разметки таблицы теги <tbody>, <thead> и <tfoot>. Показать решение.

Условие Результат htmlCodes 
	/* Внутренняя таблица стилей */
	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;
	}
HTML Результат htmlCodes 
<!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.5. Отформатируйте исходный код таблицы в условии, после чего исправьте имеющиеся ошибки. Показать решение.

Условие Результат htmlCodes 
<!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>
HTML Результат htmlCodes 
<!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>

Использование гиперссылок в HTML

7.1. Создайте простейшую веб-страничку, которая будет содержать два параграфа с предложениями: «Совершить переход на главную страницу сайта html.okpython.net можно здесь» и «Загрузить учебный минисайт, построенный на относительной адресации, можно по адресу https://html.okpython.net/codes/html/html_uchebnik/html_uchebnik_examples_2/relative_path.7z здесь». По­след­ние сло­ва в предложениях должны быть текстовыми гиперссылками. Во втором случае используйте подсказку «Загрузка начнется автоматически!» и атрибут download (ссылка реальная, при клике по ней должен загружаться наш учебный минисайт). Показать решение.

HTML Результат htmlCodes 
<!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.2. Воссоздайте код представленной в условии веб-страницы. Для просмотра конечного результата отображения страницы в браузере выберите пункт «Результат». Изображение и текст страницы должны стать одной большой гиперссылкой, которая должна открывать страницу помощи проекту в новой вкладке по адресу https://html.okpython.net/moduls/payments_modul/payments.html. Для этого используйте тег <a> с атрибутом target и соответствующим значением атрибута. Для выравнивания текста по центру подключите к абзацу класс align_text из внутренней таблицы стилей. Показать решение.

Условие Результат htmlCodes 
<!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>
HTML Результат htmlCodes 
<!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/payments.html" 
	target="_blank"
	>
		
		<img src="donate.png">
	 
		<p class="align_text">Помочь проекту html.okpython.net</p>
		
 	</a>
	
</body>
</html>

7.3. Скопируйте исходный код условия в свой текстовый редактор. Превратите пункты оглавления представленной веб-страницы во внутренние ссылки на соответствующие разделы страницы. Для просмотра конечного результата отображения страницы в браузере выберите пункт «Результат». В качестве якорей используйте заголовки разделов, задав для них универсальный атрибут id. Чтобы проверить работоспособность полученного оглавления, откройте результат в новой вкладке браузера. Показать решение.

Условие Результат htmlCodes 
<!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. Тег &lt;a&gt;</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">&lt;a&gt;</span>  
	(от <span class="orange_letter">англ.</span> 
	<span class="light_blue_letter">anchor</span> &ndash; якорь). Все, 
	что находится внутри элемента <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> &ndash; гиперссылка) 
	&ndash; это часть гипертекстового документа, которая ссылается на 
	другие элементы в самом документе (текст, изображение и т.д.) или 
	другие объекты вне данного документа (другой документ, видеофайл и т.д.).	
</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> &ndash; в родительском фрейме, а 
	в случае отсутствия такового, в текущем окне; если 
	<span class="green_letter">"_top"</span> &ndash; в главном (текущем) окне, в 
	котором находится данный фрейм, содержащий ссылку, а в случае отсутствия 
	фреймов в окне, данное значение сработает, как 
	<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>
HTML Результат htmlCodes 
<!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. Тег &lt;a&gt;</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">&lt;a&gt;</span> 
	(от <span class="orange_letter">англ.</span> 
	<span class="light_blue_letter">anchor</span> &ndash; якорь). Все, 
	что находится внутри элемента <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> &ndash; гиперссылка) 
	&ndash; это часть гипертекстового документа, которая ссылается на 
	другие элементы в самом документе (текст, изображение и т.д.) или 
	другие объекты вне данного документа (другой документ, видеофайл и т.д.).	
</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> &ndash; в родительском фрейме, а 
	в случае отсутствия такового, в текущем окне; если 
	<span class="green_letter">"_top"</span> &ndash; в главном (текущем) окне, в 
	котором находится данный фрейм, содержащий ссылку, а в случае отсутствия 
	фреймов в окне, данное значение сработает, как 
	<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.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. На каждой из страниц создайте относительные ссылки, ведущие на другие страницы. В результате вы должны спокойно перемещаться между страницами. Показать решение.

HTML Результат htmlCodes 
<!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.5. Отформатируйте исходный код условия, а затем исправьте в нем ошибки. В итоге в новой вкладке браузера должна открываться главная страница нашего сайта. Показать решение.

Условие Результат htmlCodes 
<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>
HTML Результат htmlCodes 
<!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>

Служебные теги

8.1. Создайте веб-страницу, указав базовый адрес http://localhost/test/, и пропишите в теле документа ссылку на файл page_5.html, который находится в папке по адресу http://localhost/test/doc_5/. Показать решение.

HTML 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.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/. Показать решение.

HTML 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.3. Создайте веб-страницу, указав базовый адрес http://localhost/test/, и пропишите в теле документа ссылку на файл page_7.html, который находится в корневой папке. Запретите поисковым роботам индексировать страницу. Также подключите к странице внешнюю таблицу стилей style_1.css. Будем считать, что она находится по адресу http://localhost/test/css/. Создайте три элемента «script»: первый скрипт должен располагаться в заголовке документа и выполняться перед выполнением второго; второй скрипт должен располагаться в начале тела документа и выполняться после загрузки и выполнения первого скрипта; третий скрипт должен располагаться в конце тела документа и выполняться асинхронно. Будем считать, что элементы «script» ссылаются, соответственно, на скрипты http://localhost/test/javascript/code_1.js, http://localhost/test/javascript/code_2.js и http://localhost/test/javascript/code_3.js. Показать решение.

HTML 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.4. Создайте корневую папку test, а в ней индексную страницу index.html, разрешив поисковым роботам индексировать ее раз в неделю. В теле документа создайте пустой универсальный контейнер «div» с атрибутом id="magic_div". Далее, создайте в корневой папке каталоги css и js, а в них соответствующие пустые файлы styles.css и scripts.js. Скопируйте в первый файл таблицу стилей условия, а во второй - скрипт условия. Подключите получившуюся внешнюю таблицу стилей и файл со скриптом к нашей индексной странице. При этом элемент «script» разместите в конце тела документа. Также не забудьте задать базовый адрес для страницы. Показать решение.

Условие CSS JS Результат htmlCodes 
   
    
 ---------- 
 
 

 Для просмотра кода таблицы стилей и файла скрипта 
 выберите соответствующий пункт меню.

 Для просмотра конечного результата 
 выберите пункт «Результат».
 
 
 
 ---------- 
 

 
/* Внешняя таблица стилей */

#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!';
HTML CSS JS Результат htmlCodes 
<!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.5. Создайте адаптивную веб-страницу, которая будет одинаково хорошо смотреться и на экране компьютера, и на экране телефона. Для этого задайте соответствующие значения атрибуту viewport тега <meta> (размер страницы должен подстраиваться под размеры экрана устройства с возможностью масштабирования пользователем). Также подключите две внешние таблицы стилей: style.css и style_mob.css. Пусть они находятся по адресу http://localhost/test/site_files/css/. Первая таблица стилей должна срабатывать для устройств с разрешением экранов 900px и более (будем считать их экранами компьютеров и планшетов), а вторая - для устройств с разрешением экранов менее 900px (будем считать их экранами телефонов). Сделать это можно при помощи атрибута media тега <link>. Показать решение.

HTML 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>

Использование графики в html-документе

9.1. Создайте на диске (желательно на локальном сервере Xampp в папке htdocs) тестовую папку test. В папке создайте пустой html-документ index.html и папку для изображений images, в которую скопируйте изображение из условия (выберите пункт «Результат» и скопируйте изображение во фрейме). Вставьте изображение в документ. Не забудьте указать атрибут alt. После изображения вставьте абзац с предложением «Воздушные шары в Минске» и привяжите к нему класс format_text из внутренней таблицы стилей условия. Показать решение.

Условие Результат htmlCodes 
		
	/* Внутренняя таблица стилей */
			
	img, p{
	display: block;
	width: 70%;
	margin: auto;
	margin-top: 1em;
	}
	
	.format_text{
	text-align: center;
	font-weight: bold;
	}
HTML Результат htmlCodes 
<!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.2. Очистите папку test. Создайте в ней три пустые html-страницы: page_1.html, page_2.html, page_3.html. Также создайте папку для изображений images, в которую скопируйте изображение условия. Вставьте во вторую и третью страницы абзацы, содержащие строки, соответственно, "Был выбран красный прямоугольник." и "Был выбран синий прямоугольник.". Используйте скопированное изображение на первой странице в качестве клиентской карты изображения: клик по красному прямоугольнику должен загружать вторую страницу, а клик по синему – третью страницу. Исходите из того, что разрешение рисунка 401х144 пикселя и он разделен примерно пополам. Для примерного определения координат оси X, Y направьте из верхней левой вершины рисунка вправо и вниз. Это поможет примерно задать координаты для активных зон в виде прямоугольников. Добавьте на вторую и третью страницы ссылки возврата на первую страницу. Показать решение.

Условие Результат htmlCodes
HTML Результат htmlCodes 
<!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>
		&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
		&nbsp; &nbsp; &nbsp;  Выберите прямоугольник.
	</p>
	
</body>
</html>

Вставка в документ медиафайлов и других объектов

10.1. Создайте в корневой папке test (желательно на локальном сервере Xampp) папку music. Поместите туда два любых аудиофайла (песни). Создайте в корневой папке страницу page_music.html и разместите на ней данные аудиозаписи. Путь к первой аудиозаписи укажите в теге <audio>, а ко второй – в атрибуте src тега <source>. Поэкспериментируйте с атрибутами элемента «audio». Показать решение.

HTML Результат htmlCodes 
<!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> 
		&ndash; первая запись.
	</p>
	
	<p>
		<audio controls autoplay>
			<source src="music/track_2.mp3">
		</audio> &ndash; вторая запись.
	</p>
	
</body>
</html>

10.2. Очистите папку test, а затем создайте в ней папку video. Поместите туда два каких-нибудь видеофайла. Создайте в корневой папке страницу page_video.html и разместите на ней данные видеоролики. Путь к первому видеофайлу укажите в теге <video>, а ко второй – в атрибуте src тега <source>. Поэкспериментируйте с атрибутами элемента «video». Показать решение.

HTML Результат htmlCodes 
<!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> 
		&ndash; первый ролик.
	</p>
	
	<p>
		<video controls autoplay loop>
			<source src="video/track_2.mp4">
		</video> &ndash; второй ролик.
	</p>
	
</body>
</html>

10.3. Очистите (или создайте) папку test, а затем создайте в ней папку advertising. Создайте в ней две страницы advertising_1.html и advertising_2.html. Первая страница должна содержать абзац с текстом «Хотите узнать скидку на сосиски?», а вторая – абзац с текстом «Скидка составляет 30%». Далее, создайте в корневой папке страницу page_1.html, содержащей элементы: абзац с текстом "Реклама", затем фрейм с именем fr_1, в который будет загружаться страница advertising_1.html (используйте для этого атрибут src фрейма), и в конце создайте еще один абзац, содержащий гиперссылку на страницу advertising_2.html, которая будет загружаться при активации ссылки в окно фрейма (используйте для этого атрибут target гиперссылки). В качестве текста гиперссылки используйте слово «узнать». Показать решение.

HTML Результат htmlCodes 
<!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>

html-формы

11.1. Очистите (или создайте) папку test, а затем создайте в ней пустую html-страницу. Добавьте на страницу код простейшей формы для ввода имени и фамилии пользователя. Обязательно задайте имена полям ввода. Для связи полей формы с соответствующим текстом используйте тег <label>. В качестве обработчика формы укажите скрипт php/registration.php. Данные должны отправляться методом POST. Не забудьте также задать имя форме и отключите автозаполнение полей. Кнопку отправки данных формы на сервер создайте при помощи тега <input>. Показать решение.

Условие htmlCodes




HTML Результат htmlCodes 
<!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.2. Усложните код первой задачи. Добавьте поле выбора пола, использовав радиокнопки, а затем поле выбора владения языками, используя три тега <input> в виде флажков для русского, белорусского и английского языков. Не забудьте связать подписи к кнопкам с самими кнопками при помощи тега <label>. Добавьте кнопку сброса формы. Показать решение.

Условие htmlCodes




Укажите пол:  

Владение языками:    

 
HTML Результат htmlCodes 
<!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> &nbsp;
	<label>женский <input type="radio" name="sex" value="woman"></label>
	<br><br>
	
	Владение языками:
	<label>русский<input type="checkbox" name="ru" value="ru"></label> &nbsp;
	<label>белорусский<input type="checkbox" name="bel" value="bel"></label> &nbsp;
	<label>английский<input type="checkbox" name="en" value="en"></label>
	<br><br>
	
	<input type="reset" value="Сброс">  &nbsp;<input type="submit" value="Отправить">
	
</form>
	
</body>
</html>

11.3. Продолжим усложнять форму, код которой был написан в задачах №11.1 и №11.2. Добавьте в форму поля выбора страны проживания и загрузки фотографии для профиля. Используйте для этого, соответственно, теги <select> и <input>. Показать решение.

Условие htmlCodes




Укажите пол:    

 

Владение языками:      



 
HTML Результат htmlCodes 
<!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>
	
	Укажите пол:  &nbsp;
	<label>мужской <input type="radio" name="sex" value="man"></label> &nbsp;
	<label>женский <input type="radio" name="sex" value="woman"></label>
	<br><br>
	
	<label for="country">Страна проживания:</label> &nbsp;
	<select name="country" id="country">
		<option value="1">Беларусь</option>
		<option value="2">Российская Федерация</option>
		<option value="3">Другое государство</option>
	</select>
	<br><br>
	
	Владение языками: &nbsp;
	<label>русский<input type="checkbox" name="ru" value="ru"></label> &nbsp;
	<label>белорусский<input type="checkbox" name="bel" value="bel"></label> &nbsp;
	<label>английский<input type="checkbox" name="en" value="en"></label>
	<br><br>
	
	<label>Фото профиля:  &nbsp; <input type="file" name="ru" value="ru"></label>
	<br><br>
	
	<input type="reset" value="Сброс">  &nbsp;<input type="submit" value="Отправить">
	
</form>
	
</body>
</html>

11.4. Добавьте в код формы, написанный в задачах №11.1 - №11.3, автозаполнение в поле ввода имени, а также поля ввода логина и пароля. Используйте для этого, соответственно, теги <datalist> и <input>. Объедините все поля формы, кроме кнопок сброса и отправки, при помощи тега <fieldset> и укажите заголовок, как показано в условии. Поэкспериментируйте с атрибутами элементов формы. Показать решение.

Условие htmlCodes
Регистрационная форма пользователя




Укажите пол:    

 

Владение языками:      









 
HTML Результат htmlCodes 
<!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>
		
		Укажите пол:  &nbsp;
		<label>мужской <input type="radio" name="sex" value="man"></label> &nbsp;
		<label>женский <input type="radio" name="sex" value="woman"></label>
		<br><br>
		
		<label for="country">Страна проживания:</label> &nbsp;
		
		<select name="country" id="country">
			
			<option value="1">Беларусь</option>
			<option value="2">Российская Федерация</option>
			<option value="3">Другое государство</option>
			
		</select>
		<br><br>
		
		Владение языками: &nbsp;
		<label>русский<input type="checkbox" name="ru" value="ru"></label> &nbsp;
		<label>белорусский<input type="checkbox" name="bel" value="bel"></label> &nbsp;
		<label>английский<input type="checkbox" name="en" value="en"></label>
		<br><br>
		
		<label>Фото профиля:  &nbsp; <input type="file" name="profile_foto"></label>
		<br><br>
		
		<label>Введите логин:  &nbsp; <input type="text" name="login"></label>
		<br><br>
		
		<label>Введите пароль:  &nbsp; <input type="password" name="password"></label>
		<br><br>
		
		<label>Повторите пароль:  &nbsp; <input type="password" name="repeat_pass"></label>
		<br>
		
	</fieldset>	<br>
	
	<input type="reset" value="Сброс">  &nbsp;<input type="submit" value="Отправить" disabled>
		
</form>
	
</body>
</html>

11.5. Отформатируйте исходный код условия. Показать решение.

Условие Результат htmlCodes 
<!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>
Укажите пол:  &nbsp;<label>мужской 
<input type="radio" name="sex" value="man"></label> &nbsp;<label>
женский <input type="radio" name="sex" value="woman"></label>
<br><br><label for="country">Страна проживания:</label> &nbsp;
<select name="country" id="country">
<option value="1">Беларусь</option><option value="2">
Российская Федерация</option>
<option value="3">Другое государство</option></select><br><br>
		
Владение языками: &nbsp;<label>русский
<input type="checkbox" name="ru" value="ru"></label> &nbsp;
<label>белорусский<input type="checkbox" name="bel" value="bel">
</label> &nbsp;<label>английский
<input type="checkbox" name="en" value="en"></label><br><br>
<label>Фото профиля:  &nbsp; <input type="file" name="profile_foto">
</label><br><br>
<label>Введите логин:  &nbsp; <input type="text" name="login"></label>
<br><br><label>Введите пароль:  
&nbsp; <input type="password" name="password"></label><br><br>
<label>Повторите пароль:  &nbsp; <input type="password" name="repeat_pass"></label>
<br></fieldset>	<br>
<input type="reset" value="Сброс">  
&nbsp;<input type="submit" value="Отправить" disabled></form>
</body>
</html>
HTML Результат htmlCodes 
<!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>
		
		Укажите пол:  &nbsp;
		<label>мужской <input type="radio" name="sex" value="man"></label> &nbsp;
		<label>женский <input type="radio" name="sex" value="woman"></label>
		<br><br>
		
		<label for="country">Страна проживания:</label> &nbsp;
		
		<select name="country" id="country">
			
			<option value="1">Беларусь</option>
			<option value="2">Российская Федерация</option>
			<option value="3">Другое государство</option>
			
		</select>
		<br><br>
		
		Владение языками: &nbsp;
		<label>русский<input type="checkbox" name="ru" value="ru"></label> &nbsp;
		<label>белорусский<input type="checkbox" name="bel" value="bel"></label> &nbsp;
		<label>английский<input type="checkbox" name="en" value="en"></label>
		<br><br>
		
		<label>Фото профиля:  &nbsp; <input type="file" name="profile_foto"></label>
		<br><br>
		
		<label>Введите логин:  &nbsp; <input type="text" name="login"></label>
		<br><br>
		
		<label>Введите пароль:  &nbsp; <input type="password" name="password"></label>
		<br><br>
		
		<label>Повторите пароль:  &nbsp; <input type="password" name="repeat_pass"></label>
		<br>
		
	</fieldset>	<br>
	
	<input type="reset" value="Сброс">  &nbsp;<input type="submit" value="Отправить" disabled>
		
</form>
	
</body>
</html>

11.6. Восстановите исходный код страницы условия. Используйте тег <textarea>, а также тег <button> для создания кнопки отправки данных на сервер. Кнопка должна быть неактивной. Показать решение.

Условие htmlCodes




HTML Результат htmlCodes 
<!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.7. В исходном коде страницы присутствуют три ошибки. Найдите их. Показать решение.

Условие Результат htmlCodes 
<!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>
HTML Результат htmlCodes 
<!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>

Структура 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 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>
▲
▼