Выбор занятия

Выберите текущее занятие

Все материалы предоставлены в образовательных целях. Для пополнения базы материалов или цитат присылайте свои тексты на эл. почту (внизу страницы).

HTML

Встраивание графики

Для встраивания изображения в документ используется тег img, имеющий единственный обязательный параметр src, который позволяет задать имя файла с картинкой.

<!doctype html>
<html>
	<head>
		<title>HTML структура документа</title>
	</head>
	<body>
		<p>
			<center>
				<img src="img/tigr.jpg" alt="Это изображение тигра">
			</center>
		</p>
	</body>
</html>

Элементы форм

Зачастую на Web – сайтах можно встретить страницы с размещенными на них HTML - формами. Веб-формы – удобный способ получения информации от посетителей вашего сайта.

Флажок (checkbox)

<!doctype html>
<html>
	<head>
		<title>HTML структура документа</title>
	</head>
	<body>
		<input name="mycolor" type="checkbox" value="red" checked>Красный(выбран по умолчанию)
		<input name="mycolor" type="checkbox" value="blue">Синий
		<input name="mycolor" type="checkbox" value="black">Черный
		<input name="mycolor" type="checkbox" value="white">Белый
	</body>
</html>

Переключатель (radio)

<!doctype html>
<html>
	<head>
		<title>HTML структура документа</title>
	</head>
	<body>
		<input name="mycolor" type="radio" value="white"> Белый
		<input name="mycolor " type="radio" value="green" checked> Зеленый (выбран по умолчанию)
		<input name="mycolor " type="radio" value="blue"> Синий
		<input name="mycolor " type="radio" value="red"> Красный
		<input name="mycolor " type="radio" value="black"> Черный
	</body>
</html>

Кнопка сброса формы (Reset)

<!doctype html>
<html>
	<head>
		<title>HTML структура документа</title>
	</head>
	<body>
		<input type="reset" name="Reset" value="Очистить форму">
	</body>
</html>

Выпадающий список (select)

<!doctype html>
<html>
	<head>
		<title>HTML структура документа</title>
	</head>
	<body>
		<select name="Имя списка" size = “Размер” multiple>
			<option value=”Значение”>Отображаемый текст в списке</option>
		</select>
	</body>
</html>

Текстовое поле (text)

<!doctype html>
<html>
	<head>
		<title>HTML структура документа</title>
	</head>
	<body>
		<input type="text" name="txtName" size="10" maxlength="5" value="Текст по умолчанию">
	</body>
</html>

Поле для ввода пароля (password)

<!doctype html>
<html>
	<head>
		<title>HTML структура документа</title>
	</head>
	<body>
		<input type="password" name="txtName" size="10" maxlength="5">
	</body>
</html>

Многострочное поле ввода текста (textarea)

<!doctype html>
<html>
	<head>
		<title>HTML структура документа</title>
	</head>
	<body>
		<textarea name="txtArea" cols="15" rows="10" readonly> Текст, который
			изначально будет отображен в многострочном поле ввода и который
			нельзя изменять, т.к. указан атрибут readonly
		</textarea>
	</body>
</html>

Скрытое текстовое поле

<!doctype html>
<html>
	<head>
		<title>HTML структура документа</title>
	</head>
	<body>
		<input name="email" type="hidden" value="rtatata">
	</body>
</html>

Кнопка отправки формы (submit)

<!doctype html>
<html>
	<head>
		<title>HTML структура документа</title>
	</head>
	<body>
		<input type="submit">
	</body>
</html>

Кнопка для загрузки файлов (browse)

<!doctype html>
<html>
	<head>
		<title>HTML структура документа</title>
	</head>
	<body>
		Загрузить файл: <input name="my_file" type="file">
		<input type="submit" value="Отправить">
	</body>
</html>

Рамка (fieldset)

<!doctype html>
<html>
	<head>
		<title>HTML структура документа</title>
	</head>
	<body>
		<fieldset>
			<legend>Программное обеспечение(заголовок рамки)</legend>
			Текст, который будет помещен внутри рамки.
		</fieldset>
	</body>
</html>

Используя псевдокласс hover в сочетании с различными элементами и их возможными CSS свойствами можно добиться весьма интересных эффектов.