HTML
Содержание
Примеры
Интерактивное изображение по середине экрана
- Интерактивное изображение (изображение карта), помещается в таблицу, заполняющую всё свободное место.
- Для изображения определяются интерактивные области, щёлкая по которым переходим по гиперссылке.
- Фоном ставим изображение, увеличивая без искажения по размеру окна.
<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, и др.
- http://htmlbook.ru/ - Всё о HTML формате на русском языке: описание тэгов, примеры, советы, полезные ссылки.
- Создание интерактивного изображения (карты-изображения) с отдельными областями, являющимися активными ссылками - пошаговая инструкция
Онлайн редакторы:
- 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 и результат
