Html

Материал из СисадминВики (SysadminWiki.ru)
Перейти к: навигация, поиск

Примеры

Интерактивное изображение по середине экрана

  • Интерактивное изображение (изображение карта), помещается в таблицу, заполняющую всё свободное место.
  • Для изображения определяются интерактивные области, щёлкая по которым переходим по гиперссылке.
  • Фоном ставим изображение, увеличивая без искажения по размеру окна.
<html>
	<head>
  		<meta content="text/html; charset=utf-8" http-equiv="content-type">
		<title>Заголовок страницы</title> 
		<style> 
		   body {
			background: url(background.jpg); 
			background-size: cover; 
		   } 
		 </style> 		
  	</head>
	<body LANG="ru-RU">
		<table width=100% height=100%>
			<tr>
				<td width=100% height=100% valign=center>
					<div align="center">
					<p><IMG SRC="interactive_pic.png" NAME="Название изображения" usemap="#pic map" WIDTH=627 HEIGHT=501 BORDER=0></p>
					</div>						
				</td>
			</tr>
		</table>

		<map name="pic map">
			<area shape="rect" title="Сайт СисадминВики" coords="64, 105, 235, 283" href="http://sysadminwiki.ru">
			<area shape="rect" title="Всплывающая подсказкa: Посмотреть PDF файл" coords="260, 176, 430, 453" href="http://domain.ru/file.pdf">
		</map> 
	</body>
</html>
  • Примечания:
    • в тэге <IMG> свойство ALIGN=center может не работать, поэтому оборачиваем изображение в тэг <DIV>.


Перенаправление

Автоматическое перенаправление через 3 секунды на index.php (можно указать полный URL):

<HTML>
  <HEAD>
    <META HTTP-EQUIV="REFRESH" CONTENT="3; URL=index.php">
  </HEAD>
  <BODY>
  </BODY>
</HTML>


Полезные ссылки

  • On-line валидатор (проверка документа на соответствие стандарту) языков разметки HTML, XHTML, SMIL, MathML, и др.

Онлайн редакторы:

  • https://htmled.it/redaktor/ -- две панели: искходный код и результат, редактировать можно и то и другое с моментальным отображением
  • https://daruse.ru/html-online -- CKEditor онлайн с богатой панелью инструментов
  • https://liveweave.com -- экран разделён на 4 сектора: html, css, javascript и результат + CSS Explorer + Color Explorer + Vector Editor
  • https://jsfiddle.net -- экран разделён на 4 сектора: html, css, javascript и результат