HTML задачи
http://belarusweb.net
Основы создания сайтов

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

Наш задачник по HTML содержит стандартные упражнения и задачи с решениями на закрепление теоретических основ излагаемых в учебнике.

Если в ходе освоения учебного материала у вас возникнут трудности, пишите мне в индивидуальный 'Чат с автором' (по возможности стараюсь отвечать всем).

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

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

Синтаксис HTML

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

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

Условие задачи №1.1

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

Решение задачи №1.1

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

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

Решение задачи №1.2

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

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

Условие задачи №1.3

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

Решение задачи №1.3

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

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

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

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

</body>
</html>

Условие задачи №1.4

HTML Результат BwCodes
<!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>. Показать решение.

HTML Результат BwCodes
<!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. Показать решение.

HTML Результат BwCodes
<!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, не путая его с аналогичным элементом. Показать решение.

HTML Результат BwCodes
<!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. Показать решение.

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

	<style>
		
		.redText{
		color: red;
		}
		
		.blueText{
		color: blue;
		}		

	</style>

</head>
<body>
	<p title="Я первый абзац">
		Я текст первого абзаца.
		Мой цвет должен стать красным, для 
		этого используйте класс redText из 
		таблицы стилей выше.
	</p>
	
	<p title="Я второй абзац">
		Я текст второго абзаца.
		Мой цвет должен стать синим, для 
		этого используйте класс blueText из 
		таблицы стилей выше.
	</p>
</body>
</html>

Условие задачи №2.3

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

	<style>
		
		.redText{
		color: red;
		}
		
		.blueText{
		color: blue;
		}		

	</style>

</head>
<body>
	<p class="redText" title="Я первый абзац">
		Я текст первого абзаца.
		Мой цвет должен стать красным, для 
		этого используйте класс redText из 
		таблицы стилей выше.
	</p>
	
	<p class="blueText" title="Я второй абзац">
		Я текст второго абзаца.
		Мой цвет должен стать синим, для 
		этого используйте класс blueText из 
		таблицы стилей выше.
	</p>
</body>
</html>

Решение задачи №2.3

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

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

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

Условие задачи №2.4

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

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

Решение задачи №2.4

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

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

</head>
<body>
	<p title="Я нередактируемый абзац">
		Я текст первого абзаца.
	</p>
	
	<p title="Я редактируемый абзац">
		Я тиксст втарого абзаца.
	</p>
	
</body>
</html>

Условие задачи №2.5

HTML Результат BwCodes
<!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. Исправьте ошибки в исходном коде примера, после чего запустите его в своем браузере. Показать решение.

Условие BwCodes
<!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

HTML Результат BwCodes
<!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". Для дробей используйте мнемоники и коды Юникода (результат должен быть одинаков), которые можно найти в наших таблицах мнемоник здесь. Показать решение.

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

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

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

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

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

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

Условие BwCodes
<!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>

Условие задачи №3.4

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

Решение задачи №3.4

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

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

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


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


.....

Условие задачи №4.1

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

<pre style="color: orange">
Осень наступила,
Падают листы.
Мне никто не нужен,
Только Ты.
</pre>

<address style="color: green">&nbsp; Васюткин А.А.</address>

<hr>
	
</body>
</html>

Решение задачи №4.1

4.2. Воссоздайте код представленной html-страницы. Используйте теги <p>, <dfn>, <em>, <strong>, <br>. Вспомните про мнемоники символов '<' и '>' (таблицы мнемоник и кодов Юникода можно посмотреть здесь). Показать решение.

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


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


.....

Условие задачи №4.2

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

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

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


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


.....
 

Условие задачи №4.3

HTML Результат BwCodes
<!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>. Обратите внимание на то, что зеленые слова, выделенные жирным шрифтом, имеют важное значение в текущем контексте (это и нужно донести поисковым роботам). Также не забывайте про мнемоники символов '<' и '>' (таблицы мнемоник и кодов Юникода можно посмотреть здесь). Показать решение.

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

	<style>
		.greenLetter{
		color: green;
		}
		
		.lightBlueLetter{
		color: #5555CC;
		}		
		
		.orangeLetter{
		color: orange;
		}			
		
		.paragraph{
		width: 500px;
		text-align: justify;
		line-height: 1.2em;
		margin: 1em;
		margin-bottom: 1.5em;
		}
		
		.captionH1{
		font-size: 1.1em;
		margin: 1em;
		}
		
		.captionH2{
		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>

Условие задачи №4.4

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

	<style>
		.greenLetter{
		color: green;
		}
		
		.lightBlueLetter{
		color: #5555CC;
		}		
		
		.orangeLetter{
		color: orange;
		}			
		
		.paragraph{
		width: 500px;
		text-align: justify;
		line-height: 1.2em;
		margin: 1em;
		margin-bottom: 1.5em;
		}
		
		.captionH1{
		font-size: 1.1em;
		margin: 1em;
		}
		
		.captionH2{
		font-size: 1em;
		margin: 1em;
		}
		
	</style>
	
</head>
<body>
 
<h1 class="captionH1">Абзац, заголовки и преформатированный текст в HTML</h1>

<h2 class="captionH2">Абзац и формирующий его тег &lt;p&gt;</h2>

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


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

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


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

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

Решение задачи №4.4

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

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

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


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


.....
 

Условие задачи №5.1

HTML Результат BwCodes
<!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>. Показать решение.

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

    
  
......

 
  

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

 


.....

 

Условие задачи №5.2

HTML Результат BwCodes
<!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. Отформатируйте исходный код списка в условии. Показать решение.

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

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

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

HTML Результат BwCodes
<!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>). В качестве изображений в списке используйте соответствующие мнемоники, которые можно посмотреть в нашей таблице мнемоник 'Природные явления'. Показать решение.

Условие Результат BwCodes
	/* Внутренняя таблица стилей */
	table{
	border-collapse: collapse;
	}
	
	caption{
	text-align: left;
	margin-bottom: 0.2em;
	}

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

	dd{
	padding: 0.1em;
	margin-left: 1em;
	margin-bottom: 0.5em;
	}

Условие задачи №5.5

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

	<style>
		
		/* Внутренняя таблица стилей */
		table{
		border-collapse: collapse;
		}
		
		caption{
		text-align: left;
		margin-bottom: 0.2em;
		}

		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>

Решение задачи №5.5

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

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

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



	/* Внутренняя таблица стилей */
	table{
	border-collapse: collapse;
	}
	
	caption{
	text-align: left;
	margin-bottom: 0.2em;
	}

	th,td{
	padding: 0.4em;
	border: 1px solid;
	}

	#firstLine{
	background-color: #DDD;
	}

Условие задачи №6.1

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

		#firstLine{
		background-color: #DDD;
		}
		
	</style>

</head>
<body>
	
	<table>
		
		<caption>Таблица №1</caption>
				
		<tr id="firstLine">
			<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. Отформатируйте исходный код таблицы в условии. Показать решение.

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

		#firstLine{
		background-color: #DDD;
		}
		
	</style>

</head>
<body>
	
	<table><caption>Таблица №1</caption>
	<tr id="firstLine"><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

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

		#firstLine{
		background-color: #DDD;
		}
		
	</style>

</head>
<body>
	
	<table>
		
		<caption>Таблица №1</caption>
				
		<tr id="firstLine">
			<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. Исправьте ошибки в исходном коде таблицы в условии. Показать решение.

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

		#firstLine{
		background-color: #DDD;
		}
		
	</style>

</head>
<body>
	
	<tablle>
			
		<tr>
			<td>Ячейка №1.1<td>
			<td>Ячейка №1.2<td>
			<td>Ячейка №1.3<tr>
		</td>
					
		<tr id="firstLine">
			<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

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

		#firstLine{
		background-color: #DDD;
		}
		
	</style>

</head>
<body>
	
	<table>
		
		<caption>Таблица №1</caption>
				
		<tr id="firstLine">
			<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>. Показать решение.

Условие Результат BwCodes
	/* Внутренняя таблица стилей */
	table{
	border-collapse: collapse;
	}
	
	caption{
	text-align: left;
	margin-bottom: 0.2em;
	}

	th,td{
	padding: 0.4em;
	border: 1px solid;
	}

	.greyBackground{
	background-color: grey;
	}

	.greenBackground{
	background-color: green;
	}

	.greyBackground{
	background-color: grey;
	}

	.redBackground{
	background-color: red;
	}

	.yellowBackground{
	background-color: yellow;
	}

Условие задачи №6.4

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

		.greyBackground{
		background-color: grey;
		}

		.greenBackground{
		background-color: green;
		}

		.greyBackground{
		background-color: grey;
		}

		.redBackground{
		background-color: red;
		}

		.yellowBackground{
		background-color: yellow;
		}
		
	</style>

</head>
<body>

	<table>
		
		<caption>Таблица №1</caption>
		
		<thead class="greyBackground">
			<tr>
				<th colspan="4">Поры года</th>
			</tr>
		</thead>
		
		<tbody>
			<tr>
				<th>Зима</th>
				<td>Декабрь</td><td>Январь</td><td>Февраль</td>
			</tr>
		</tbody>	
		
		<tbody class="greenBackground">
			<tr>
				<th>Весна</th>
				<td>Март</td><td>Апрель</td><td>Май</td>
			</tr>
		</tbody>	
			
		<tbody class="redBackground">
			<tr>
				<th>Лето</th>
				<td>Июнь</td><td>Июль</td><td>Август</td>
			</tr>
		</tbody>
		
		<tbody class="yellowBackground">
			<tr>
				<th>Осень</th>
				<td>Сентябрь</td><td>Октябрь</td><td>Декабрь</td>
			</tr>
		</tbody>
		
		<tfoot class="greyBackground">
			<tr>
				<td colspan="2">Всего в году:</td>
				<td colspan="2">12 месяцев</td>
			</tr>
		</tfoot>
		
	</table>
	
</body>
</html>

Решение задачи №6.4

6.5. Отформатируйте исходный код таблицы в условии, после чего исправьте имеющиеся ошибки. Показать решение.

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

		.greyBackground{
		background-color: grey;
		}

		.greenBackground{
		background-color: green;
		}

		.greyBackground{
		background-color: grey;
		}

		.redBackground{
		background-color: red;
		}

		.yellowBackground{
		background-color: yellow;
		}
		
	</style>

</head>
<body>

	<table><caption>Таблица №1<caption>
	<thead class="greyBackground"><tr>
	<th colspan="4">Поры года</th><tr><thead>
	</tbody></tr><td>Зима</td>
	<td>Декабрь<td></td>Январь</td><td>Февраль</td>
	</tr></tbody><tbody class="greenBackground">
	<tr><th>Весна</th>
	<td>Март</td><td>Апрель<td></td>Май</td>
	</tr></tbody><tbody class="redBackground"><tr>
	<th>Лето</th><td>Июнь</td><td>Июль
	</td><td>Август
	</td></tr></tbody><tbody class="yellowBackground">
	<tr><th>
	Осень</th><td>Сентябрь</td><td>
	Октябрь</td><td>Декабрь</td></tr></tbody>
	<tfoot class="greyBackground"><tr>
	<td colspan="2">Всего в году:</td>
	<td colspan="2">12 месяцев</td></tr></ffoot>
	</table>
	
</body>
</html>

Условие задачи №6.5

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

		.greyBackground{
		background-color: grey;
		}

		.greenBackground{
		background-color: green;
		}

		.greyBackground{
		background-color: grey;
		}

		.redBackground{
		background-color: red;
		}

		.yellowBackground{
		background-color: yellow;
		}
		
	</style>

</head>
<body>

	<table>
		
		<caption>Таблица №1</caption>
		
		<thead class="greyBackground">
			<tr>
				<th colspan="4">Поры года</th>
			</tr>
		</thead>
		
		<tbody>
			<tr>
				<th>Зима</th>
				<td>Декабрь</td><td>Январь</td><td>Февраль</td>
			</tr>
		</tbody>	
		
		<tbody class="greenBackground">
			<tr>
				<th>Весна</th>
				<td>Март</td><td>Апрель</td><td>Май</td>
			</tr>
		</tbody>	
			
		<tbody class="redBackground">
			<tr>
				<th>Лето</th>
				<td>Июнь</td><td>Июль</td><td>Август</td>
			</tr>
		</tbody>
		
		<tbody class="yellowBackground">
			<tr>
				<th>Осень</th>
				<td>Сентябрь</td><td>Октябрь</td><td>Декабрь</td>
			</tr>
		</tbody>
		
		<tfoot class="greyBackground">
			<tr>
				<td colspan="2">Всего в году:</td>
				<td colspan="2">12 месяцев</td>
			</tr>
		</tfoot>
		
	</table>
	
</body>
</html>

Решение задачи №6.5

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

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

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №7.1</title>
</head>
<body>
   
	<p>
		Совершить переход на главную страницу сайта belarusweb.net 
		можно <a href="http://localhost/belarusweb">здесь</a>.
	</p>
 
	<!-- Весь путь смотрите в условии -->
	<p title="Загрузка начнется автоматически!">
		Загрузить учебный минисайт, построенный на относительной 
		адресации, можно по адресу 
		http://belarusweb.net/.../relative_path.7z
		<a href="http://belarusweb.net/.../relative_path.7z" download>
		здесь</a>.
	</p>
	
</body>
</html>

Решение задачи №7.1

7.2. Воссоздайте код представленной в условии веб-страницы. Для просмотра конечного результата отображения страницы в браузере выберите пункт 'Результат'. Изображение и текст страницы должны стать одной большой гиперссылкой, которая должна открывать страницу помощи проекту в новой вкладке по адресу http://belarusweb.net/payments_modul/help_payments.html. Для этого используйте тег <a> с атрибутом target и соответствующим значением атрибута. Для выравнивания текста по центру подключите к абзацу класс alignText из внутренней таблицы стилей. Показать решение.

Условие Результат BwCodes
<!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;
		}
		
		.alignText{
		text-align: center;
		}		
		
	</style>

</head>
<body>
 		
	<img src="donate.png">
 
	<p>Помочь проекту belarusweb.net</p>
	
</body>
</html>

Условие задачи №7.2

HTML Результат BwCodes
<!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;
		}
		
		.alignText{
		text-align: center;
		}		
		
	</style>

</head>
<body>
 
	<a
	href="http://belarusweb.net/payments_modul/help_payments.html" 
	target="_blank"
	>
		
		<img src="donate.png">
	 
		<p class="alignText">Помочь проекту belarusweb.net</p>
		
 	</a>
	
</body>
</html>

Решение задачи №7.2

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

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

	<style>
		
		/* Внутренняя таблица стилей */

		.captionH1{            							
		margin-top: 1.5em;
		margin-bottom: 1.1em;
		font-family: Arial;
		text-align: center;
		font-size: 14px !important;
		color: #173147;
		}

		.captionH2{      		  						
		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;	
		}

		.definitionParagraph{            				
		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;	
		}

		.noteParagraph{      		  					
		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;	
		}
				
		.definitionWord{            					
		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;
		}

		.contentDiv{									
		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;
		}

		.greenLetter{
		color: #008800;
		}

		.lightBlueLetter{           					
		color: #5555CC;
		}

		.orangeLetter{
		color: #FE8C00;
		}
		
	</style>

</head>
<body>
 
<h1 class="captionH1">Создание гиперссылок в HTML. Тег &lt;a&gt;</h1>
	
<div class="contentDiv">			
	
	<ul class="list_1">
						
		<li>Определение гиперссылки в HTML</li>
		
		<li>Атрибут href гиперссылки</li>
		
		<li>Атрибут target гиперссылки</li>		
		
		<li>Атрибут download гиперссылки</li>		
	
	</ul>
	
</div>

		
<h2 class="captionH2">Определение гиперссылки в HTML</h2>

<div class="contentDiv">
	
<p class="paragraph">	
	Для создания гиперссылок в <span class="greenLetter">HTML</span> 
	используется элемент <span class="greenLetter">'a'</span>, который 
	формируется парным тегом 
	<span class="greenLetter">&lt;a&gt;</span>  
	(от <span class="orangeLetter">англ.</span> 
	<span class="lightBlueLetter">anchor</span> &ndash; якорь). Все, 
	что находится внутри элемента <span class="greenLetter">'a'</span> 
	является гиперссылкой.	
</p>
		
<p class="definitionParagraph">
	<dfn class="definitionWord">Гиперссылка</dfn> 
	(от <span class="orangeLetter">англ.</span> 
	<span class="lightBlueLetter">hyperlink</span> &ndash; гиперссылка) 
	&ndash; это часть гипертекстового документа, которая ссылается на 
	другие элементы в самом документе (текст, изображение и т.д.) или 
	другие объекты вне данного документа (другой документ, видеофайл и т.д.).	
</p>

</div>


<h2 class="captionH2">Атрибут href гиперссылки</h2>

<div class="contentDiv">

<p class="paragraph">
	Чтобы указать адрес объекта, на который будет совершен переход по ссылке, 
	используется атрибут <span class="greenLetter">href</span>. В качестве 
	значения он принимает абсолютный или относительный адрес документа. 
	Примером абсолютного адреса может служить 
	<span class="greenLetter">http://www.yandex.ru</span>. Абсолютные адреса 
	действительны в любом месте, независимо от сайта, на котором расположена 
	ссылка. А вот относительные адреса формируются относительно текущей папки 
	документа, в котором прописана данная ссылка, или корня сайта. 	
</p>

<p class="noteParagraph">	
	Напомним, что в случае использования сборки 
	<span class="greenLetter">Xampp</span> для размещения создаваемых в ходе 
	изучения веб-страниц на локальном сервере, их нужно помещать в папку 
	<span class="greenLetter">/xampp/htdocs</span>. А еще лучше создать в  
	<span class="greenLetter">htdocs</span> отдельную рабочую папку, например, 
	<span class="greenLetter">test</span>, и уже в ней сохранять тестируемые 
	страницы. Тогда абсолютный адрес, например, для страницы 
	<span class="greenLetter">page_1.html</span> будет иметь вид 
	<span class="greenLetter">http://localhost/test/page_1.html</span>. 
	Указывать нужно именно <span class="greenLetter">http://localhost/...</span>, 
	а не фактическое расположение файла на компьютере, иначе могут возникнуть 
	проблемы с отображением страницы. 
</p>

</div>


<h2 class="captionH2">Атрибут target гиперссылки</h2>

<div class="contentDiv">

<p class="paragraph">
	По умолчанию, при переходе по ссылке браузер открывает документ в текущем 
	окне или фрейме. Чтобы изменить такое поведение браузера, используется 
	атрибут <span class="greenLetter">target</span>, который в качестве значения 
	принимает одно из зарезервированных значений 
	<span class="greenLetter">"_self | _blank | _parent | _top"</span> или имя 
	целевого окна или фрейма, которое устанавливается их атрибутом 
	<span class="greenLetter">name</span>. Если указать несуществующее имя окна 
	или фрейма, то браузер откроет документ в новом окне. Значение 
	<span class="greenLetter">"_self"</span> установлено по умолчанию. Если 
	использовать значение <span class="greenLetter">"_blank"</span>, то браузер 
	откроет документ в новом окне или фрейме; если 
	<span class="greenLetter">"_parent"</span> &ndash; в родительском фрейме, а 
	в случае отсутствия такового, в текущем окне; если 
	<span class="greenLetter">"_top"</span> &ndash; в главном (текущем) окне, в 
	котором находится данный фрейм, содержащий ссылку, а в случае отсутствия 
	фреймов в окне, данное значение сработает, как 
	<span class="greenLetter">"_self"</span>.
</p>

</div>


<h2 class="captionH2">Атрибут download гиперссылки</h2>

<div class="contentDiv">

<p class="paragraph">
	В <span class="greenLetter">HTML 5</span> был введен еще один полезный 
	атрибут <span class="greenLetter">download</span>, который не принимает 
	значений, а служит индикатором того, что браузер не совершит переход по 
	ссылке, а предложит закачать файл, указанный в атрибуте 
	<span class="greenLetter">href</span> в качестве значения. 
</p>

</div>
	
</body>
</html>

Условие задачи №7.3

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

	<style>
		
		/* Внутренняя таблица стилей */

		.captionH1{            							
		margin-top: 1.5em;
		margin-bottom: 1.1em;
		font-family: Arial;
		text-align: center;
		font-size: 14px !important;
		color: #173147;
		}

		.captionH2{      		  						
		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;	
		}

		.definitionParagraph{            				
		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;	
		}

		.noteParagraph{      		  					
		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;	
		}
				
		.definitionWord{            					
		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;
		}

		.contentDiv{									
		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;
		}

		.greenLetter{
		color: #008800;
		}

		.lightBlueLetter{           					
		color: #5555CC;
		}

		.orangeLetter{
		color: #FE8C00;
		}
		
	</style>

</head>
<body>
 
<h1 class="captionH1">Создание гиперссылок в HTML. Тег &lt;a&gt;</h1>
	
<div class="contentDiv">			
	
	<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="captionH2" id="point_1">Определение гиперссылки в HTML</h2>

<div class="contentDiv">
	
<p class="paragraph">	
	Для создания гиперссылок в <span class="greenLetter">HTML</span> 
	используется элемент <span class="greenLetter">'a'</span>, который 
	формируется парным тегом 
	<span class="greenLetter">&lt;a&gt;</span> 
	(от <span class="orangeLetter">англ.</span> 
	<span class="lightBlueLetter">anchor</span> &ndash; якорь). Все, 
	что находится внутри элемента <span class="greenLetter">'a'</span> 
	является гиперссылкой.	
</p>
		
<p class="definitionParagraph">
	<dfn class="definitionWord">Гиперссылка</dfn> 
	(от <span class="orangeLetter">англ.</span> 
	<span class="lightBlueLetter">hyperlink</span> &ndash; гиперссылка) 
	&ndash; это часть гипертекстового документа, которая ссылается на 
	другие элементы в самом документе (текст, изображение и т.д.) или 
	другие объекты вне данного документа (другой документ, видеофайл и т.д.).	
</p>

</div>


<h2 class="captionH2" id="point_2">Атрибут href гиперссылки</h2>

<div class="contentDiv">

<p class="paragraph">
	Чтобы указать адрес объекта, на который будет совершен переход по ссылке, 
	используется атрибут <span class="greenLetter">href</span>. В качестве 
	значения он принимает абсолютный или относительный адрес документа. 
	Примером абсолютного адреса может служить 
	<span class="greenLetter">http://www.yandex.ru</span>. Абсолютные адреса 
	действительны в любом месте, независимо от сайта, на котором расположена 
	ссылка. А вот относительные адреса формируются относительно текущей папки 
	документа, в котором прописана данная ссылка, или корня сайта. 	
</p>

<p class="noteParagraph">	
	Напомним, что в случае использования сборки 
	<span class="greenLetter">Xampp</span> для размещения создаваемых в ходе 
	изучения веб-страниц на локальном сервере, их нужно помещать в папку 
	<span class="greenLetter">/xampp/htdocs</span>. А еще лучше создать в  
	<span class="greenLetter">htdocs</span> отдельную рабочую папку, например, 
	<span class="greenLetter">test</span>, и уже в ней сохранять тестируемые 
	страницы. Тогда абсолютный адрес, например, для страницы 
	<span class="greenLetter">page_1.html</span> будет иметь вид 
	<span class="greenLetter">http://localhost/test/page_1.html</span>. 
	Указывать нужно именно <span class="greenLetter">http://localhost/...</span>, 
	а не фактическое расположение файла на компьютере, иначе могут возникнуть 
	проблемы с отображением страницы. 
</p>

</div>


<h2 class="captionH2" id="point_3">Атрибут target гиперссылки</h2>

<div class="contentDiv">

<p class="paragraph">
	По умолчанию, при переходе по ссылке браузер открывает документ в текущем 
	окне или фрейме. Чтобы изменить такое поведение браузера, используется 
	атрибут <span class="greenLetter">target</span>, который в качестве значения 
	принимает одно из зарезервированных значений 
	<span class="greenLetter">"_self | _blank | _parent | _top"</span> или имя 
	целевого окна или фрейма, которое устанавливается их атрибутом 
	<span class="greenLetter">name</span>. Если указать несуществующее имя окна 
	или фрейма, то браузер откроет документ в новом окне. Значение 
	<span class="greenLetter">"_self"</span> установлено по умолчанию. Если 
	использовать значение <span class="greenLetter">"_blank"</span>, то браузер 
	откроет документ в новом окне или фрейме; если 
	<span class="greenLetter">"_parent"</span> &ndash; в родительском фрейме, а 
	в случае отсутствия такового, в текущем окне; если 
	<span class="greenLetter">"_top"</span> &ndash; в главном (текущем) окне, в 
	котором находится данный фрейм, содержащий ссылку, а в случае отсутствия 
	фреймов в окне, данное значение сработает, как 
	<span class="greenLetter">"_self"</span>.
</p>

</div>


<h2 class="captionH2" id="point_4">Атрибут download гиперссылки</h2>

<div class="contentDiv">

<p class="paragraph">
	В <span class="greenLetter">HTML 5</span> был введен еще один полезный 
	атрибут <span class="greenLetter">download</span>, который не принимает 
	значений, а служит индикатором того, что браузер не совершит переход по 
	ссылке, а предложит закачать файл, указанный в атрибуте 
	<span class="greenLetter">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_3page_3.html, в папке doc_1page_1.html и в корневой папке testindex.html. На каждой из страниц создайте относительные ссылки, ведущие на другие страницы. В результате вы должны спокойно перемещаться между страницами. Показать решение.

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

Условие Результат BwCodes
<DOCTYPE html>
<html>
<head>
	<meta charset="utf-9">
	<title>Задача №7.5</title>
</head>
<body>
	
	<!- Работаем над исходным кодом всего документа! ->
	<p>Переход на сайт <span style="color: green">
	belarusweb.net</span> можно осуществить по ссылке 
	<a rhef="http//:belarusweb.net" tagert="blank">
	здесь</a>(сайт откроется в новом окне).<//p>
				
</body>
</html>

Условие задачи №7.5

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №7.5</title>
</head>
<body>
	
	<!-- Форматируем исходный код тела документа -->
	
	<p>
		Переход на сайт 
		<span style="color: green">belarusweb.net</span> 
		можно осуществить по ссылке 
		<a href="http://belarusweb.net" target="_blank">здесь</a> 
		(сайт откроется в новом окне).
	</p>
				
</body>
</html>

Решение задачи №7.5

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

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №8.1</title>

	<!-- Задаем базовый адрес для страницы -->	
	<base href="http://localhost/test/">
	
</head>
<body>
	<!-- Нужно использовать относительный адрес -->
	Ссылка на требуемую страницу находится
	<a href="doc_5/page_5.html">здесь</a>.
</body>
</html>

Решение задачи №8.1

8.2. Создайте веб-страницу, указав базовый адрес http://localhost/test/, и пропишите в теле документа ссылку на файл page_6.html, который находится в папке по адресу http://localhost/test/doc_5/doc_6/. Также подключите к странице две внешние таблицы стилей CSS: style_1.css и style_2.css. Будем считать, что они находятся по адресу http://localhost/test/css/. Показать решение.

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

Решение задачи №8.2

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

<!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="magicDiv". Далее, создайте в корневой папке каталоги css и js, а в них соответствующие пустые файлы styles.css и scripts.js. Скопируйте в первый файл таблицу стилей условия, а во второй - скрипт условия. Подключите получившуюся внешнюю таблицу стилей и файл со скриптом к нашей индексной странице. При этом элемент 'script' разместите в конце тела документа. Показать решение.

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

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

 Для просмотра конечного результата 
 выберите пункт 'Результат'.
 
 
 
 ---------- 
 
 
/* Внешняя таблица стилей */

#magicDiv{
width: 70%;
margin: auto;
margin-top: 3em;
padding: 0.5em;	
border: 1px solid green;	
}
 
  
    
	
	
	
//Внешний скрипт

//Находим наш элемент 'div' по его id
var elem=document.getElementById('magicDiv');

//Заполняем его содержимым
elem.innerHTML='Я был заполнен при помощи JavaScript!';
 
 
 
 
 
 
 
 

Условие задачи №8.4

HTML CSS JS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №8.4</title>
	
	<!-- Разрешаем переиндексировать раз в неделю -->
	<meta name="revisit" content="7">
	
	<!-- Подключаем требуемую внешнюю таблицу стилей -->	
	<link rel="stylesheet" href="css/styles.css">

</head>
<body>
		
	<!-- Создаем пустой универсальный контейнер -->
	<div id="magicDiv"></div>
	
	<!-- Подключаем скрипт -->
	<script src="js/scripts.js"></script>
	
</body>
</html>
 
/* Внешняя таблица стилей */

#magicDiv{
width: 70%;
margin: auto;
margin-top: 3em;
padding: 0.5em;	
border: 1px solid green;	
}
 
 
 
 
 
 
 
 
 
 
 
 
 
 
//Внешний скрипт

//Находим наш элемент 'div' по его id
var elem=document.getElementById('magicDiv');

//Заполняем его содержимым
elem.innerHTML='Я был заполнен при помощи JavaScript!';
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  
 

Решение задачи №8.4

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

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

Условие Результат BwCodes
		
	/* Внутренняя таблица стилей */
			
	img, p{
	display: block;
	width: 70%;
	margin: auto;
	margin-top: 1em;
	}
	
	.formatText{
	text-align: center;
	font-weight: bold;
	}		







  		

Условие задачи №9.1

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<!--  Незабываем задавать служебные элементы  -->
	<meta charset="utf-8">
	<title>Задача №9.1</title>

	<style>
		
		/* Внутренняя таблица стилей */
				
		img, p{
		display: block;
		width: 70%;
		margin: auto;
		margin-top: 1em;
		}
		
		.formatText{
		text-align: center;
		font-weight: bold;
		}		
		
	</style>
	
</head>
<body>
	
	<img src="balls_2015.jpg" alt="Воздушные шары в Минске.">
	
	<p class="formatText">
		Воздушные шары в Минске.
	</p>
	
</body>
</html>

Решение задачи №9.1

9.2. Очистите папку test. Создайте в ней три пустые html-страницы: page_1.html, page_2.html, page_3.html. Скопируйте изображение условия в папку test. Вставьте во вторую и третью страницы абзацы, содержащие строки, соответственно, "Был выбран красный прямоугольник." и "Был выбран синий прямоугольник.". Используйте скопированное изображение на первой странице в качестве клиентской карты изображения: клик по красному прямоугольнику должен загружать вторую страницу, а клик по синему – третью страницу. Исходите из того, что разрешение рисунка 401х144 пикселя и он разделен примерно пополам. Для примерного определения координат оси X, Y направьте из верхней левой вершины рисунка вправо и вниз. Это поможет примерно задать координаты для активных зон в виде прямоугольников. Добавьте на вторую и третью страницы ссылки возврата на первую страницу. Показать решение.

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

Условие задачи №9.2

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<!-- Незабываем задавать служебные элементы -->
	<meta charset="utf-8">	
	<title>Создаем клиентскую карту-изображение</title>
</head>
<body>
	
	<img src="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>

Решение задачи №9.2

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

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

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<!-- Незабываем задавать служебные элементы -->
	<meta charset="utf-8">	
	<title>Задача №10.1</title>
</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.1

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

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<!-- Незабываем задавать служебные элементы -->
	<meta charset="utf-8">	
	<title>Задача №10.2</title>
</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.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 гиперссылки). В качестве текста гиперссылки используйте слово 'узнать'. Показать решение.

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<!-- Незабываем задавать служебные элементы -->
	<meta charset="utf-8">	
	<title>Задача №10.3</title>
</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>. Показать решение.

HTML Результат BwCodes
<!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>. Добавьте кнопку сброса формы. Показать решение.

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

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

Условие задачи №11.2

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

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

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

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


  
 ---------- 
 

Условие задачи №11.3

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

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

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

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


  
 ---------- 
 
 
 
 

Условие задачи №11.4

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

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

Условие Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<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.5

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<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.5

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

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

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


  
 ---------- 
 
 
 
 

Условие задачи №11.6

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

Условие Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<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

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<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. Замените безликие универсальные блоки элементами логической разметки документа. Показать решение.

Условие BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="robots" content="noindex">	
	<base href="http://localhost/test/">
	<title>Главная страница</title>
	<link href="css/style_1.css" rel="stylesheet">
	<script src="javascript/script_1.js"></script>
</head>
<body>
	
	<!--  Организуем шапку сайта: меню, логотип и т.д.  -->
	<div>
		
		<div>Имя сайта</div>
		
		Логотип, поисковая панель и др. информация
		
		<div> 
			Ссылки на разделы сайта (панель навигации по сайту).
		</div>
			
	</div> 

	
	<div>
		Небольшой блок для сопутствующей рекламы.
	</div>


	<!-- Основное содержимое страницы -->
	<div>
	
		<!-- Условно выделяем вводный раздел домашней страницы -->
		<div>
			<div>О сайте</div>
			Краткая информация по тематике сайта. 
		</div>
						
		<!-- Условно выделяем раздел новостей сайта -->
		<div>
			<div>Новости сайта</div>
			<!-- Отрывки из новостей, включающие ссылки -->
			<!-- на страницы с полным текстом новости -->
			<div>1-я статья</div>
			<div>2-я статья</div>
			<div>и так делее</div>
		</div>

	</div>

	
	<!-- 'Подвал' сайта -->
	<div>
		<div>Информация об авторе</div> 
		и другая информация 'подвала'.  
	</div>
	
</body>
</html>

Условие задачи №12.1

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="robots" content="noindex">	
	<base href="http://localhost/test/">
	<title>Главная страница</title>
	<link href="css/style_1.css" rel="stylesheet">
	<script src="javascript/script_1.js"></script>
</head>
<body>
	
	<!--  Организуем шапку сайта: меню, логотип и т.д.  -->
	<header>
		
		<h1>Имя сайта</h1>
		
		Логотип, поисковая панель и др. информация
		
		<nav> 
			Ссылки на разделы сайта (панель навигации по сайту).
		</nav>
			
	</header> 

	
	<aside>
		Небольшой блок для сопутствующей рекламы.
	</aside>


	<!-- Основное содержимое страницы -->
	<main>
	
		<!-- Условно выделяем вводный раздел домашней страницы -->
		<article>
			<h2>О сайте</h2>
			Краткая информация по тематике сайта. 
		</article>
						
		<!-- Условно выделяем раздел новостей сайта -->
		<article>
			<h2>Новости сайта</h2>
			<!-- Отрывки из новостей, включающие ссылки -->
			<!-- на страницы с полным текстом новости -->
			<article>1-я статья</article>
			<article>2-я статья</article>
			<article>и так делее</article>
		</article>

	</main>

	
	<!-- 'Подвал' сайта -->
	<footer>
		<address>Информация об авторе</address> 
		и другая информация 'подвала'.  
	</footer>
	
</body>
</html>

Решение задачи №12.1

12.2. Внимательно изучите код условия и попробуйте набрать его самостоятельно, включая текст и комментарии.

<!-- Указываем тип документа -->
<!DOCTYPE html>

<!-- Начало документа --> 
<html>

<!-- Раздел служебной информации -->
<head>
	<!--  Соощаем браузеру кодировку документа -->
	<meta charset="utf-8">	
	<!-- Задаем базовый адрес текущего документа -->
	<base href="http://fruits.comm/">
	<!-- Заголовок страницы -->
	<title>Все о яблоках</title>
	<!-- Подключаем таблицу стилей CSS -->
	<link href="css/styles.css" rel="stylesheet">
	<!-- Подключаем внешний js-скрипт -->
	<script src="javascript/scripts.js"></script>
</head>

<!-- Тело документа -->
<body>
		
<!-- -------------- Шапка сайта ----------------------- -->
<header class="siteHeader">
	
	<!-- Имя сайта делаем заголовком верхнего уровня -->
	<h1 class="siteName">fruits.comm</h1>
	
	<!-- Другое содержимое шапки сайта  -->
	Логотип, поисковая панель и др. информация		
	
	<!--  Панель навигации по сайту  -->
	<nav class="siteNav"> 
		<!-- Ссылки на страницы сайта -->
		<a href="apples.html">Яблоки</a>
		<a href="oranges.html">Апельсины</a>
	</nav>
	
</header> 
		
<!-- -------- Боковая панель -------------------- -->
<aside class="siteAside">
	
	<div class="advBlock" id="adv1">
		Например, 1-й блок для сопутствующей рекламы.
	</div>
	
	<div class="advBlock" id="adv2">
		Например, 2-й блок для сопутствующей рекламы.
	</div>
	
</aside>

<!-- ----------- Уникальный контент страницы -------------- -->
<main>
	
	<!-- Делаем разметку для статьи о яблоках -->		
	<article>
		
		<!-- Собственная шапка -->
		<header>
			<!-- Задаем собственный заголовок 2-го уровня -->
			<h2>Красные или зеленые яблоки?</h2>
			
			<!-- Внутренняя навигация по статье -->
			<nav>
				<ul>
					<li><a href="#redApples">О красных сортах яблок</a></li>
					<li><a href="#greenApples">О зеленых сортах яблок</a></li>
				</ul>
			</nav>
		</header>
		
		<!-- ----------- 1-й раздел статьи ---------- -->
		<section id="redApples">
			<!-- Задаем собственный заголовок 3-го уровня -->
			<h3>О красных сортах яблок</h3>
			<p>
				Не для кого не секрет, что красные сорта яблок...
			</p>
		</section>
		
		<!-- ---------- 2-й раздел статьи ----------- -->
		<section id="greenApples">
			<!-- Задаем собственный заголовок 3-го уровня -->
			<h3>О зеленых сортах яблок</h3>
			<p>
				Зеленые сорта яблок...
			</p>
		</section>
				
		<!-- ---------- 'Подвал' всей статьи ----------------------- -->
		<footer class="siteFooter">
			
			<p>
				Дата публикации: <time datetime="2015-05-15 19:00">15 мая</time>
     		</p>
			
			<!-- Информация об авторе -->
			<address>
				Автор: Иванов Иван Иванович<br>
				Тел. +375-444-44-44 (до 23-00)
			</address>
			
		</footer>
	</article>
	
	<!-- ... и другие статьи, например, о пирогах с яблоками -->
	
</main>

<!-- ---------- 'Подвал' сайта ----------------------- -->
<footer class="siteFooter">
	<!-- Информация о владельце -->
	<address>Петр Романовский, Минск, 2016-2099.</address> 
</footer>

</body>
</html>

Условие задачи №12.2