Министерство здравоохранения и социального развития Российской Федерации
Государственное бюджетное образовательное учреждение высшего профессионального образования
ПЕРВЫЙ МОСКОВСКИЙ ГОСУДАРСТВЕННЫЙ МЕДИЦИНСКИЙ УНИВЕРСИТЕТ имени И.М.СЕЧЕНОВА
Медико-профилактический факультет
Кафедра медицинской информатики и статистики
Методическое пособие по созданию HTML-странички
(для факультета ВСО )
Москва
Оглавление
Начало работы с HTML.. 3
Структура HTML-документа. 5
Связь между документами <LINK>. 6
Раздел BODY.. 6
Изменение цвета и фона документа. 6
Фреймы.. 9
Нумерованные списки. 10
Создание простейших таблиц. 12
Таблица тэгов. 14
Lt;head> </head> - открывающий и закрывающий тэги голова документа
Раздел BODY
Раздел BODY является одним из самых важных компонентов любого HTML-документа, т. к. в нем располагается содержательная часть, которая выводится браузером на экран монитора пользователя.
Раздел описывается парным тегом <BODY></BODY>, внутри которого размещается большинство существующих тегов HTML. Тег <BODY> имеет ряд параметров, которые условно можно разделить на четыре основные группы (параметры фона, границ документа, текста и гиперссылок).
Фреймы
Фреймы позволяют нам открыть в окне броузера - не один, а одновременно несколько документов, например документ который содержит меню, документ, который содержит логотип, шапку страницы, документ с непосредственным содержанием нашего сайта
Более подробно остановимся на Iframe.
IFrame - "плавающий" или встроенный фрейм. Iframe позволяет нам вставить один html-документ в другой html-документ. «Плавающий» фрейм вводится в наш обычный html-документ при помощи тэга <Iframe><Iframe>:
<IFRAME src="ancorpri.html" width="300" height="250" scrolling="auto" frameborder="1"></IFRAME>
В атрибуте src мы указываем путь к документу, который отобразиться во встроенном фрейме.
Атрибуты height и width отвечают за ширину и высоту встроенного фрейма.
Атрибут scrolling(полоса прокрутки), он может принимать несколько значений: no - это значит совсем не будет полосы прокрутки, ни при каких обстоятельствах; yes - это значит полоса прокрутки будет всегда; auto - полоса прокрутки появится только тогда, когда она нужна.
Атрибут frameborder указывает отображать или нет границы встроенного фрейма, возможные значения 1 (да, отображать) и 0 (нет, не отображать). Iframe может выравниваться относительно содержимого страницы: текста и картинок, и может, соответственно, быть заключен в тэги выравнивания и таблицы.
Добавим в наш файл Index.html фрейм со ссылкой на внешний файл Список.html, в котором далее будет записан список группы :
Таблица тэгов.
| Тэг | Назначение и атрибуты |
| A | ссылка |
| href="другой_документ.html" - путь к документу | |
| target=_blank - открывает ссылку в новом окне | |
| name="anchor1" - имя закладки | |
| title="Ваша подсказка" - подсказка к ссылке (текстовой) | |
| AREA | определяет геометрические области внутри карты и ссылки для них |
| shape="rect" (circle, poly) - тип области | |
| coords="x1,y1,..." - координаты области | |
| alt="описание" - описание, подсказка | |
| href="document.html" - ссылка | |
| B | выделение текста полужирным шрифтом |
| BIG | выделение текста более крупным шрифтом, чем основной |
| BODY | тело документа, обязательный тэг |
| text="#cc0000" - задает цвет текста всего документа | |
| bgcolor="#000000" - задает цвет фона документа | |
| background="картинка.jpg" - задает фоновую картинку | |
| link="#ff9999" - задает цвет ссылки | |
| alink="#ff9999" - задает цвет активной (нажатой) ссылки | |
| vlink="#ff9999" - задает цвет посещенной ссылки | |
| topmargin="0" - ширина верхнего и нижнего полей документа для IE | |
| leftmargin="0" - ширина левого и правого полей документа для IE | |
| marginheight="0" - ширина верхнего и нижнего полей документа для NN | |
| marginwidth="0" - ширина левого и правого полей документа для NN | |
| BR | принудительный перенос текста на другую строку |
| clear="all" (left, right) - завершение обтекания текстом объекта | |
| CENTER | центрирование текста и объектов |
| DIV | выравнивание текста и объектов |
| align="center" - центрирование | |
| align="right" - выравнивание по правому краю документа | |
| align="left" - выравнивание по левому краю документа | |
| align="justify" - выравнивание по обоим краям документа | |
| FONT | управление шрифтами |
| color="#cc0000 - задает цвет для блока текста | |
| size="+0" - задает размер шрифта текста (от -2 до +4) | |
| face="Arial" - задает определенный тип шрифта | |
| FRAME | определяет содержимое и вид одного фрейма |
| marginheight="0" - ширина верхнего и нижнего полей фрэйма | |
| marginwidth="0" - ширинау левого и правого полей фрэйма | |
| scrolling="yes" (no, auto) - линейка прокрутки | |
| name="window-1" - имя фрейма | |
| noresize - запретить посетителю менять размеры фреймов | |
| FRAMESET | определяет макет основного окна в виде прямоугольных пространств |
| rows="100,200,*" - определяет расположение горизонтальных фреймов | |
| cols="10%,20%,70%" - определяет расположение вертикальных фреймов | |
| border - определяет ширину рамок фрэймов в пикселах | |
| Hx | заголовки (H1, H2, H3, H4, H5, H6) |
| HEAD | голова документа, обязательный тэг |
| HR | линия |
| align="right" (center или left) | |
| width="30%" (ширина линии в процентах) | |
| size="6" (толщина линии) | |
| NoShade (отмена объемности) | |
| color="cc0000" (цвет линии, только в IE) | |
| HTML | указывает на тип документа, обязательный тэг |
| I | выделение текста курсивом |
| IFRAME | "плавающий" фрейм |
| src="ancorpri.html" - путь к подгружаемому документу | |
| width="300" - вширина "плавающего" фрейма | |
| height="250" - высота "плавающего" фрейма | |
| scrolling="auto" (yes, no) - полоса прокрутки | |
| frameborder="1" (0) - отображать или нет границы фрейма | |
| IMG | подгрузка изображений (картинок) |
| Border="5" - рамка покруг картинки | |
| width="500" - ширина картинки | |
| height="100" - высота картинки | |
| align="left" - расположение текста по отношению к картинке | |
| vspace="10" - расстояние от картинки до текста по вертикали | |
| hspace="30" - расстояние от картинки до текста по горизонтали | |
| alt="описание" - описание картинки | |
| usemap="#karta1" - ссылка на карту | |
| LI | определяет элемент списка |
| MAP | определяет клиентскую навигационную карту |
| name="karta1" - имя карты | |
| MARQUEE | бегущая строка текста (только IE) |
| bgcolor - цвет фона бегущей строки | |
| height - высота строки | |
| width - ширина строки | |
| behavior="scroll" обычная прокрутка | |
| behavior="slide" - строка пробегает до края и останавливается | |
| behavior="alternate" - строка будет двигаться от края к краю | |
| scrollamount="1" (1-10) - скорость движения строки | |
| direction="left" (right, up, down) - движение влево (вправо, вверх, вниз) | |
| OL | упорядоченные списки |
| type="I" (i, 1, a, A) - стиль элемента списка | |
| P | параграф, выравнивание текста и объектов |
| align="center" - центрирование | |
| align="right" - выравнивание по правому краю документа | |
| align="left" - выравнивание по левому краю документа | |
| align="justify" - выравнивание по обоим краям документа | |
| PRE | форматированный текст |
| S | перечеркнутый текст |
| SMALL | выделение текста более мелким шрифтом, чем основной |
| STRIKE | перечеркнутый текст |
| SUB | нижний индекс |
| SUP | верхний индекс |
| TABLE | таблица |
| bgcolor="#FFCC33" - цвет фона таблицы (строки, ячейки) | |
| background="картинка.gif" - задает фоновый рисунок | |
| width="50" или width="50%"- ширина таблицы | |
| height="45" или height="45%"- высота таблицы | |
| cellspacing="5" - расстояние между ячейками | |
| cellpadding="5" - расстояние внутри ячеек | |
| border="3" - задает толщину рамки таблицы | |
| bordercolor="#000000" - задает цвет рамки таблицы | |
| TD | ячейка данных таблицы |
| bgcolor="#FFCC33" - цвет фона | |
| background="картинка.gif" - задает фоновый рисунок | |
| width="50" или width="50%"- ширина | |
| height="45" или height="45%"- высота | |
| align="center" (right, left) - горизонтальное выравнивание содержимого | |
| valign="middle" (top, bottom) - вертикальное выравнивание содержимого | |
| colspan="2" - растянуть ячейку на несколько стобцов | |
| rowspan="2" - растянуть ячейку на несколько рядов | |
| cellspacing="5" - расстояние между ячейками | |
| TITLE | заголовок документа |
| TR | строка таблицы |
| bgcolor="#FFCC33" - цвет фона | |
| background="картинка.gif" - задает фоновый рисунок | |
| width="50" или width="50%"- ширина | |
| height="45" или height="45%"- высота | |
| TT | шрифт пишущей машинки (моноширинный) |
| U | подчеркнутый текст |
| UL | неупорядоченные списки |
| type="disk" (circle, square) - стиль элемента списка |