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

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

Пару слов о задачнике

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

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

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

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

Синтаксис HTML

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

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

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

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

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

Условие BwCodes
<DOCTYPE html>
<html>
	<head>
		<!- Задаем кодировку текста. -->
		<meta charset="utf-8">
		<tittle>Первая 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

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

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

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

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

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

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

	<style>
		
		.red_text{
		color: red;
		}
		
		.blue_text{
		color: blue;
		}		

	</style>

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

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

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('red_text');
		//Изменяем цвет текста на красный 
		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

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

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

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

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

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

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

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

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


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


.....

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

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

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


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


.....

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

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

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


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


.....
 

Условие задачи №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>
		.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>

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

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

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

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


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


.....
 

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

5.2. Усложните список задачи №5.1, создав вложенные списки и перечислив в них месяцы, как показано в условии. Используйте в решении задачи нумерованный список <ol> и маркированные списки <ul>. Показать решение.

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

    
  
......

 
  

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

 


.....

 

Условие задачи №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

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

5.5. Создайте при помощи тегов <dl>, <dt> и <dd> простейший список определений. Для просмотра конечного результата отображения списка в браузере выберите пункт 'Результат'. Для оформления таблицы используйте готовую внутреннюю таблицу стилей, представленную в условии (используйте для этого тег <style>). В качестве изображений в списке используйте соответствующие мнемоники, которые можно посмотреть в нашей таблице мнемоник 'Природные явления'. Показать решение.

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

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

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

Условие задачи №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;
	}

	#first_line{
	background-color: #DDD;
	}

Условие задачи №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;
		}

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

</head>
<body>
	
	<table><caption>Таблица №1</caption>
	<tr id="first_line"><th>1-я колонка</th> 
	<th>2-я колонка</th><th>3-я колонка</th></tr>
	<tr><td>Ячейка №1.1</td><td>Ячейка №1.2</td>
	<td>Ячейка №1.3</td></tr><tr><td>Ячейка №2.1</td>
	<td>
	Ячейка №2.2</td><td>
	Ячейка №2.3</td></tr></table>
	
</body>
</html>

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

6.3. Исправьте ошибки в исходном коде таблицы в условии. Показать решение.

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

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

</head>
<body>
	
	<tablle>
			
		<tr>
			<td>Ячейка №1.1<td>
			<td>Ячейка №1.2<td>
			<td>Ячейка №1.3<tr>
		</td>
					
		<tr id="first_line">
			<th>1-я колонка</th> 
			<td>2-я колонка</td> 
			<th>3-я колонка</th>
		<tr>
		
		</tr>
			
			<td>Ячейка №2.1</dd>
			<td>Ячейка №2.2</td>
			<tt>Ячейка №2.3</td>
		</tr>
		
		<caption>Таблица №1</caption>
		
	</tablle>
	
</body>
</html>

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

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;
	}

	.green_background{
	background-color: green;
	}

	.red_background{
	background-color: red;
	}

	.yellow_background{
	background-color: yellow;
	}

	.grey_background{
	background-color: grey;
	}

Условие задачи №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;
		}

		.green_background{
		background-color: green;
		}

		.red_background{
		background-color: red;
		}

		.yellow_background{
		background-color: yellow;
		}

		.grey_background{
		background-color: grey;
		}
		
	</style>

</head>
<body>

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

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

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

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

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

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

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

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

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

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

Условие задачи №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. На каждой из страниц создайте относительные ссылки, ведущие на другие страницы. В результате вы должны спокойно перемещаться между страницами. Показать решение.

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

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

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

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

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

8.4. Создайте корневую папку test, а в ней индексную страницу index.html, разрешив поисковым роботам индексировать ее раз в неделю. В теле документа создайте пустой универсальный контейнер 'div' с атрибутом id="magic_div". Далее, создайте в корневой папке каталоги css и js, а в них соответствующие пустые файлы styles.css и scripts.js. Скопируйте в первый файл таблицу стилей условия, а во второй - скрипт условия. Подключите получившуюся внешнюю таблицу стилей и файл со скриптом к нашей индексной странице. При этом элемент 'script' разместите в конце тела документа. Показать решение.

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

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

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

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

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

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

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

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

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

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







  		

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

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

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

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

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

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

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

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-формы

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

11.2. Усложните код первой задачи. Добавьте поле выбора пола, использовав радиокнопки, а затем поле выбора владения языками, используя три тега <input> в виде флажков для русского, белорусского и английского языков. Не забудьте связать подписи к кнопкам с самими кнопками при помощи тега <label>. Добавьте кнопку сброса формы. Показать решение.

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

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

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

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

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

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


  
 ---------- 
 

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

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

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

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


  
 ---------- 
 
 
 
 

Условие задачи №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

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

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

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


  
 ---------- 
 
 
 
 

Условие задачи №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-документа

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

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="site_header">
	
	<!-- Имя сайта делаем заголовком верхнего уровня -->
	<h1 class="site_name">fruits.comm</h1>
	
	<!-- Другое содержимое шапки сайта  -->
	Логотип, поисковая панель и др. информация		
	
	<!--  Панель навигации по сайту  -->
	<nav class="site_nav"> 
		<!-- Ссылки на страницы сайта -->
		<a href="apples.html">Яблоки</a>
		<a href="oranges.html">Апельсины</a>
	</nav>
	
</header> 
		
<!-- -------- Боковая панель -------------------- -->
<aside class="site_aside">
	
	<div class="adv_block" id="adv1">
		Например, 1-й блок для сопутствующей рекламы.
	</div>
	
	<div class="adv_block" id="adv2">
		Например, 2-й блок для сопутствующей рекламы.
	</div>
	
</aside>

<!-- ----------- Уникальный контент страницы -------------- -->
<main>
	
	<!-- Делаем разметку для статьи о яблоках -->		
	<article>
		
		<!-- Собственная шапка -->
		<header>
			<!-- Задаем собственный заголовок 2-го уровня -->
			<h2>Красные или зеленые яблоки?</h2>
			
			<!-- Внутренняя навигация по статье -->
			<nav>
				<ul>
					<li><a href="#red_apples">О красных сортах яблок</a></li>
					<li><a href="#green_apples">О зеленых сортах яблок</a></li>
				</ul>
			</nav>
		</header>
		
		<!-- ----------- 1-й раздел статьи ---------- -->
		<section id="red_apples">
			<!-- Задаем собственный заголовок 3-го уровня -->
			<h3>О красных сортах яблок</h3>
			<p>
				Не для кого не секрет, что красные сорта яблок...
			</p>
		</section>
		
		<!-- ---------- 2-й раздел статьи ----------- -->
		<section id="green_apples">
			<!-- Задаем собственный заголовок 3-го уровня -->
			<h3>О зеленых сортах яблок</h3>
			<p>
				Зеленые сорта яблок...
			</p>
		</section>
				
		<!-- ---------- 'Подвал' всей статьи ----------------------- -->
		<footer class="site_footer">
			
			<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="site_footer">
	<!-- Информация о владельце -->
	<address>Петр Романовский, Минск, 2016-2099.</address> 
</footer>

</body>
</html>

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