Не рекомендуется. Используйте вместо этого

Учебный курс
Введение в HTML и CSS
Лекция 4
Элементы разметки
тела документа
кандидат технических наук
Павел Брониславович Храмцов
paul@kiae.su
1
HTML и Cookies
<meta http-equiv="Set-Cookie" content="ss=start; expires=Sat,
09-May-96 11:00:00 GMT; path=/; domain=www.kiae.su">
(ПУ)
2
Типы элементов тела документа
1. Теги управления разметкой
2. Теги управления отображением
3. Теги характеризующие тип информации
4. Списки
5. Графика
6. Гипертекстовые ссылки
7. Таблицы
8. Фреймы
9. Формы обмена данными
3
Тег BODY
<ВОDY ВАСКGROUND="image.gif">
Атрибут
Значение
ВGCOLOR=#FFFFFF Цвет фона
ТЕХТ=#0000FF
Цвет текста
VLINK =#FF0000
Цвет пройденных гипертекстовых ссылок
LINK =#00FF00
Цвет гипертекстовой ссылки
</ВОDY>
4
Управление разметкой
Заголовки:
<H1>Заголовок 1</H1>
Параграф:
<p align=right>….</p>
Управление переносом:
<br> и <nobr>…..</nobr>
5
Управление отображением
Изменение размера шрифта:
<ВIG> и <SMALL>
Верхние / Нижние индексы:
<SUР> и <SUВ>
Управление шрифтом:
<FONT> и <FONTBASE>
<FONT color=… size=… face=…>…</FONT>
6
Теги управления формой
отображения
Тег
Описание
<b>
Задает жирный текст
<big>
Относительное увеличение текста
<em>
Выделяет текст (обычно курсив)
<i>
Задает курсив
<small>
Относительное уменьшение текста
<strong>
Акцентирует текст (обычно жирный)
<sub>
Определяет нижний индекс
<sup>
Определяет верхний индекс
<ins>
Вставленный текст
<del>
Удаленный текст
<s>
Не рекомендуется. Используйте вместо этого <del>
<strike>
Не рекомендуется. Используйте вместо этого <del>
<u>
Не рекомендуется. Используйте вместо этого стили
(style)
7
Теги управления типом
информации
Тег
Описание
<code>
Определяет текст кода программы
<kbd>
Определяет текст клавиатуры
<samp>
Определяет образец кода программы
<tt>
Определяет текст телетайпа
<var>
Определяет переменную
<pre>
Определяет заранее отформатированный текст
<listing>
Не рекомендуется. Используйте вместо этого
<pre>
<plaintext>
Не рекомендуется. Используйте вместо этого
<pre>
<xmp>
Не рекомендуется. Используйте вместо этого
<pre>
8
Теги цитирования,
сносок и определения
Тег
Описание
<abbr>
Определяет сокращение
<acronym>
Определяет акроним
<address>
Определяет элемент address (адрес)
<bdo>
Определяет направление вывода текста
<blockquote>
Определяет длинную цитату
<q>
Определяет короткую цитату
<cite>
Определяет сноску на другой материал
<dfn>
Используется для определения термина
9
Списки
Типы списков:
• Неупорядоченные списки
• Упорядоченные списки
• Списки определений
• Директории (<DIR>)
• Меню (<MENU>)
10
Неупорядоченный список:
<UL>
<LI>Unordered information.
<LI>Ordered information.
<LI>Definitions.
</UL>
<UL TYPE=DISK>Тег создает сплошные маркеры
такого типа, как в списках первого уровня по
умолчанию.
<UL TYPE=СIRCLE>Тег создает маркеры в виде
окружностей.
<UL TYPE=SQUARE>Тег создает сплошные
квадратные маркеры.
11
Упорядоченный список:
<OL>
<LI>Unordered information.
<LI>Ordered information.
<LI>Definitions.
</OL>
<ОL ТYРЕ=l> Тег создает список с нумерацией в
формате 1., 2., 3., 4. и т.д.
<ОL ТYРЕ=А> Тег создает список с нумерацией в
формате А., В., С., D. и т.д.
<OL ТYРЕ=а> Тег создает список с нумерацией в
формате а., b., с., d. и т.д.
<ОL ТYРЕ=I> Тег создает список с нумерацией в
формате I., II., III., IV. и т.д.
12
Список определений:
<DL>
<DT><STRONG>Lower cost</STRONG>
<DD>The new version of this product
costs significantly less than the previous
one! <DT><STRONG>Easier to
use</STRONG> <DD>We've changed the
product so that it's much easier to use!
<DT><STRONG>Safe for kids</STRONG>
<DD>You can leave your kids alone in a
room with this product and they won't
get hurt (not a guarantee).
</DL>
13
Картинки
Изображения в HTML используются в качестве:
• Графических объектов в элементе IMG
• Графических объектов в элементе INPUT
• Чувствительных областей в элементе IMG
14
Элемент разметки IMG
<img src=… alt=… align=… width=… height=…
hspace=… vspase=…>
<IMG SRC="image.gif" ALT="изображение"
WIDTH="100" HEIGHT="200" HSPACE="10"
VSPACE="10" BORDER="2" ALIGN="left">
15
Элемент разметки IMG и
«чувствительные» картинки
<IMG SRC=“001.jpg" ALT="Изображения"
USEMAP="#imap">
<MAP NAME="imap">
<AREA SHAPE="rect" COORDS="0,0,100,100"
HREF="http://www.intuit.ru/help/index.html">
<AREA SHAPE="rect" COORDS="100,0,200,100"
HREF="http://www.intuit.ru/shop/index.html">
<AREA SHAPE="default" nohref> </MAP>
16
Ссылки
Варианты описания ссылок:
<a href=“URL” [traget=“имя окна”]>
<a name=kuku>
<MAP NAME="imap">
<AREA SHAPE="rect" COORDS="0,0,100,100"
HREF="http://www.intuit.ru/help/index.html">
<AREA SHAPE="rect" COORDS="100,0,200,100"
HREF="http://www.intuit.ru/shop/index.html">
<AREA SHAPE="default" nohref> </MAP>
17
Таблицы
<TABLE BORDER>
<TR>
<TD COLSPAN=3>Если в таблице два тега TR,
то в ней две строки.
</TD>
</TR>
<TR>
<TD>Если в строке три тега TD,</TD>
<TD>то в ней</TD>
<TD>три столбца.</TD>
</TR>
</TABLE>
18
Управление расстояниями
между содержанием ячеек
<TABLE cellspacing=0 cellpadding=0 BORDER=0>
<TR>
<TD><img src=001.jpg width=100 height=100
border=0></TD>
<TD><img src=001.jpg width=100 height=100
border=0></TD>
<TD><img src=001.jpg width=100 height=100
border=0></TD>
</TR>
</TABLE>
19
Фреймы
<HTML> <HEAD> <TITLE>Пример фреймов</TITLE>
</HEAD>
<FRAMESET COLS="30%, 70%">
<FRAMESET rows="50%, 50%">
<FRAME SRC=html-edi0.html>
<FRAME SRC=html-edi1.html>
</FRAMESET>
<FRAMESET rows="20%, *, 40%">
<FRAME SRC html-edi2.html >
<FRAME SRC html-edi3.html >
<FRAME SRC= html-edi1.html >
</FRAMESET>
</FRAMESET>
20
</HTML>
Параметры фреймов
Атрибут NАМЕ – имя фрейма
Атрибут МАRGINWIDTH (по умолчанию отступ равен
6) - горизонтальный отступ от границы фрейма
Атрибут МАRGINHEIGHT – вертикальный отступ
Атрибут SCROLLING – запрещает полосу прокрутки
Атрибут NORESIZE – не разрешает менять границу
фрейма
Атрибут SRС – загружаемая страница
Атрибут ТАRGЕТ – целевой фрейм загрузки
21
Формы
<FORM METHOD=post
ACTION=mailto:yourname@your.email.address>
<input name=kuku value=kuku>
<input type=checkbox name=r>
<textarea>введите текст </textarea>
<input type=submit value=“Отправить”>
</form>
22
Комментарии
<!--- Все что угодно можно писать после этой
комбинации символов и до следующей
комбинации символов “-->”, однако стоит
помнить, что комментарии на сервере могут
иметь прикладной смысл! -->
23