belarusweb.net
© Петр Романовский Минск, 2016-2017.



belarusweb.net

Основы создания сайтов...
HTML >>>

§1. Введение в HTML

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

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

	<body>
		Всем привет от HTML!
	</body>
</html>

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

1.2. Создайте веб-страницу, содержащую два коротких предложения, принадлежащих одному абзацу, но расположенных на разных строках. Используйте элемент 'br'. Не забывайте про 'title'. Показать решение.

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

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

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

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

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

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Задача №4</title>
	</head>
<body>
	<p style="color: red" title="Я первый абзац">
		Я первое предложение.<br>
		Я второе предложение.
	</p>
	
	<p style="color: blue" title="Я второй абзац">
		Я третье предложение.<br>
		Я четвертое предложение.
	</p>
</body>
</html>

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

1.5. Создайте веб-страницу, содержащую предложение: "Я открывающий тег <span>.". Используйте атрибут style и синий цвет шрифта. Не забывайте про мнемоники и коды символов. Показать решение.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Задача №5</title>
	</head>
<body>
	<!-- Не забываем про использование мнемоник и кодов символов -->
	Я открывающий тег <span style="color: blue">&lt;span&gt;</span>.
</body>
</html>

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

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

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

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


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

2.1. Воссоздайте код представленной на рис. 2.1a html-страницы. Используйте элементы 'pre', 'em', 'address', 'hr' и значения цветов: orange и green. Показать решение.

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Про любовь</title>
</head>
<body>
<hr>	
<pre style="color: orange">
Осень наступила,
Падают листы.
Мне никто не нужен,
Только <em>Ты</em>.
</pre>
<address style="color: green">&nbsp; Васюткин А.А.</address>
<hr>		
</body>
</html>

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

2.2. Воссоздайте код представленной на рис. 2.2a html-страницы. Используйте элементы 'dfn', 'em', 'strong', 'br'. Вспомните про мнемоники символов '<' и '>'. Показать решение.

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

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

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

2.3. Воссоздайте код представленной на рис. 2.3a html-страницы. Используйте маркированный список и цвета green, red и orange. Показать решение.

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Поры года</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>

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

2.4. Усложните список задачи №3, создав вложенные списки и перечислив в них месяцы, как показано на рис. 2.4a. Используйте для внешнего списка атрибут style="background-color: yellow". Показать решение.

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Месяцы года</title>
</head>
<body>
	<!-- Используем нумерованный список -->
	<ol style="background-color: yellow">
		<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>

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

2.5. Воссоздайте код таблицы, представленной на рис. 2.5a. Чтобы границы у таблицы были слитные, используйте в элементе 'table' атрибут style="border-collapse: collapse". Для объединения ячеек используйте атрибут colspan. Все 'жирные' ячейки являются заголовочными. Показать решение.

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Месяцы года</title>
</head>
<body>
	<table border="1" style="border-collapse: collapse">
	<caption>Таблица №3</caption>
		<thead style="background-color: grey">
			<tr>
				<th colspan="4">Поры года</th>
			</tr>
		</thead>
		
		<tbody>
			<tr>
				<th>Зима</th>
				<td>Декабрь</td><td>Январь</td><td>Февраль</td>
			</tr>
		</tbody>	
		
		<tbody style="background-color: green">
			<tr>
				<th>Весна</th>
				<td>Март</td><td>Апрель</td><td>Май</td>
			</tr>
		</tbody>	
			
		<tbody style="background-color: red">
			<tr>
				<th>Лето</th>
				<td>Июнь</td><td>Июль</td><td>Август</td>
			</tr>
		</tbody>
		
		<tbody style="background-color: yellow">
			<tr>
				<th>Осень</th>
				<td>Сентябрь</td><td>Октябрь</td><td>Декабрь</td>
			</tr>
		</tbody>
		
		<tfoot style="background-color: grey">
			<tr>
				<td colspan="2">Всего в году:</td>
				<td colspan="2">12 месяцев</td>
			</tr>
		</tfoot>
	</table>
</body>
</html>

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

2.6. Создайте на локальном сервере 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. На каждой из страниц создайте относительные ссылки, ведущие на другие страницы. В результате вы должны спокойно перемещаться между страницами. Затем замените все ссылки на абсолютные. В результате вы по прежнему должны свободно перемещаться между страницами. Для абсолютных ссылок не забудьте правильно указывать адресацию, начиная ее с http://localhost/. Показать решение.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Создание ссылок</title>
</head>
<body>
	<!-- Всего должно получиться 5 страниц -->
	<!-- Код для страницы index.html напишите сами -->
	<!-- Код для страницы 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>

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


§3. Служебные теги.

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<base href="http://belarusweb.net/">
	<title>Задача №3_1</title>
</head>
<body>
	<!-- Нужно использовать относительный адрес -->
	Ссылка на требуемую страницу находится
	<a href="doc_5/page_5.html">здесь</a>.<br>
</body>
</html>

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

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<base href="http://belarusweb.net/">
	<link rel="stylesheet" href="css/style_3.css">
	<link rel="stylesheet" href="css/style_4.css">
	<title>Задача №3_2</title>
</head>
<body>
	Ссылка на требуемую страницу находится
	<a href="doc_5/doc_6/page_6.html">здесь</a>.
</body>
</html>

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

3.3. Создайте веб-страницу, указав базовый адрес http://belarusweb.net/, и пропишите в теле документа ссылку на файл page_7.html, который находится в корневой папке. Также подключите к странице внешнюю таблицу стилей CSS style_3.css. Будем считать, что она находится по адресу http://belarusweb.net/css/. В заголовке документа создайте элемент 'script', который выполнится после полной загрузки страницы, а в теле документа создайте элемент 'script', который будет выполняться параллельно загрузке страницы (асинхронно). Будем считать, что элементы ссылаются, соответственно, на скрипты http://localhost/belarusweb/js/code_3.js и http://localhost/belarusweb/js/code_4.js. Показать решение.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<base href="http://belarusweb.net/">
	<link rel="stylesheet" href="css/style_3.css">
	<title>Задача №3_3</title>
	
	<!-- Выполнится после загрузки страницы -->
	<script src="js/code_3.js" defer></script>
</head>
<body>
	<!-- Выполнится после загрузки страницы -->
	<script src="js/code_4.js" async></script>

	Ссылка на требуемую страницу находится
	<a href="page_7.html">здесь</a>.
</body>
</html>

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


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

4.1. Создайте на локальном сервере Xampp в папке htdocs тестовую папку test. Если вы ее уже создавали и не удалили, то и не нужно. Мы будем ее еще не раз использовать. В папке создайте пустой 'html'-документ page_1.html. Скопируйте какое-нибудь изображение в папку test. Вставьте изображение в документ. Не забудьте указать атрибут alt. Используйте также атрибут title. Показать решение.

<!DOCTYPE html>
<html>
<head>
	<!-- Незабываем задавать служебные элементы -->
	<meta charset="utf-8">	
	<base href="http://localhost/test/">
	<title>Вставка изображения в html-документ</title>
</head>
<body>
	
	<img src="Шары-2015.jpg" alt="Воздушные шары в Минске." 
	title="Воздушные шары в Минске.">
	<p>
		&nbsp; &nbsp; &nbsp; Воздушные шары в Минске.
	</p>
</body>
</html>

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

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

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

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

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


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

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

<!DOCTYPE html>
<html>
<head>
	<!-- Незабываем задавать служебные элементы -->
	<meta charset="utf-8">	
	<base href="http://localhost/test/">
	<title>Аудиозаписи</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>

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

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

<!DOCTYPE html>
<html>
<head>
	<!-- Незабываем задавать служебные элементы -->
	<meta charset="utf-8">	
	<base href="http://localhost/test/">
	<title>Видеоролики</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>

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

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

<!DOCTYPE html>
<html>
<head>
	<!-- Незабываем задавать служебные элементы -->
	<meta charset="utf-8">	
	<base href="http://localhost/test/">
	<title>Фреймы</title>
</head>
<body>
	
	<p>Реклама</p>
	
	<!-- Во фрейм будет загружена страница advertising_1.html -->
	<iframe src="advertising/advertising_1.html" sandbox name="fr_1">
		Альтернативный текст указывается внутри контейнера.
	</iframe>
	
	<!-- Страница advertising_2.html будет загружена во фрейм -->
	<p><a href="advertising/advertising_2.html" target="fr_1">Узнать</a></p>
	
</body>
</html>

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


§6. Формы

6.1. Наберите код пустой html-страницы. В качестве базового адреса укажите http://localhost/test. Добавьте код простейшей формы для ввода имени и фамилии пользователя. Обязательно задайте имена полям ввода. Для связи полей формы с соответствующим текстом используйте элемент 'label'. В качестве обработчика формы укажите скрипт php/registration.php. Данные должны отправляться методом 'POST'. Не забудьте также задать имя форме и отключите автозаполнение полей. Кнопку отправки даных формы на сервер создайте при помощи элемента 'input'. Показать решение.

<!DOCTYPE html>
<html>
<head>
	<!-- Незабываем задавать служебные элементы -->
	<meta charset="utf-8">	
	<base href="http://localhost/test/">
	<title>Задача №6_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>

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

6.2. Усложните код первой задачи. Добавьте поле выбора пола, использовав радиокнопки, а затем поле выбора владения языками, используя три элемента 'input' в виде флажков для русского, белорусского и английского языков. Не забудьте связать подписи к кнопкам с самими кнопками при помощи элемента 'label'. Добавьте кнопку сброса формы. Внешний вид страницы показан на рис. 6.2a. Показать решение.

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

<!DOCTYPE html>
<html>
<head>
	<!-- Незабываем задавать служебные элементы -->
	<meta charset="utf-8">	
	<base href="http://localhost/test/">
	<title>Задача №6_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>

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

6.3. Продолжим усложнять форму, код которой был написан в задачах №1 и №2. Добавьте в форму поля выбора страны проживания и загрузки фотографии для профиля. Используйте для этого, соответственно, элементы 'select' и 'input'. Внешний вид страницы показан на рис. 6.3a. Показать решение.

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

<!DOCTYPE html>
<html>
<head>
	<!-- Незабываем задавать служебные элементы -->
	<meta charset="utf-8">	
	<base href="http://localhost/test/">
	<title>Задача №6_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>

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

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

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

<!DOCTYPE html>
<html>
<head>
	<!-- Незабываем задавать служебные элементы -->
	<meta charset="utf-8">	
	<base href="http://localhost/test/">
	<title>Задача №6_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="Отправить">
	</form>
</body>
</html>

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

6.5. Восстановите код страницы, представленной на рис. 6.5a. Используйте элемент 'form' из предыдущих задач, а также элемент 'button' для создания кнопки отправки данных на сервер. Кнопка должна быть неактивной. Показать решение.

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

<!DOCTYPE html>
<html>
<head>
	<!-- Незабываем задавать служебные элементы -->
	<meta charset="utf-8">	
	<base href="http://localhost/test/">
	<title>Задача №6_5</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>

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


§7. Подробнее о структуре html-документа

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

<!DOCTYPE html>
<html>
<head>
	<!-- Служебная информация -->
	<meta charset="utf-8">	
	<base href="http://localhost/test/">
	<title>Главная страница</title>
	<link href="css/style_1.css" rel="stylesheet">
	<script src="js/script_1.js"></script>
</head>
<body>
	<!---------------- Шапка ------------------------->
	
	<!-- Организуем шапку сайта: меню, логотип и т.д. -->
	<header class="header_1">
		<!-- Организуем шапку сайта: меню, логотип и т.д. -->
		<nav class="nav_1"> 
			Ссылки на разделы сайта (панель навигации по сайту).
		</nav>
		Логотип, поисковая панель и др. информация
	</header> 
		
	<!------------------ 1-я секция --------------------------->
	
	<!-- Условно выделяем вводный раздел домашней страницы  -->
	<section class="section_1">
		Краткая информация по тематике сайта. 
		
		<!-- Здесь расположим боковую панель  -->
		<aside class="aside_1">
			Небольшой блок для сопутствующей рекламы.
		</aside>
	</section>
		
	<!----------------- 2-я секция ------------------------->
	
	<!-- Условно выделяем раздел новостей сайта -->
	<section class="section_2">
		<!-- Отрывки из новостей, включающие ссылки -->
		<!-- на страницы с полным текстом новости -->
		<article class="articles_1">1-я статья</article>
		<article class="articles_1">2-я статья</article>
		<article class="articles_1">и так делее</article>
	</section>
	
	<!------------ 'Подвал' сайта ------------------------->
	
	<footer class="footer_1">
		<address>Информация об авторе</address> 
		и другая информация 'подвала'.  
	</footer>
</body>
</html>

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


     
belarusweb.net © Петр Романовский, Минск, 2016-2017.
Связаться с автором
Наверх