1. Язык разметки HTML

Transcript 1. Язык разметки HTML

1. Язык разметки HTML
HTML в Web-приложениях,
построенных на основе компонентов
(Java EE, .NET)
2
История HTML
• RFC 1866 — HTML 2.0, одобренный как
стандарт 22 сентября 1995;
• HTML 3.2 — 14 января 1996;
• HTML 4.0 — 18 декабря 1997;
• HTML 4.01 — 24 декабря 1999;
• “ISO HTML», основан на HTML 4.01
Strict) — 15 мая 2000.
• Сейчас разрабатывается “HTML 5”
3
Справочные материалы
•
•
•
•
•
Справочник по всем тегам (по-русски)
http://htmlbook.ru/html/
Спецификации HTML
www.w3.org/MarkUp/html3/Contents.html
www.w3.org/TR/html401/
4
Инструменты
Редакторы кода
• Простейшие (Notepad++, EditPlus, SciTe)
• Adobe HomeSite (30-day trial)
• Встроенный в IDE редактор (NetBeans, Eclipse, …)
• И другие
Визуальные редакторы
• Amaya (бесплатный)
• Kompozer (бесплатный)
• Macromedia Dreamweaver
• Microsoft FrontPage
• И другие
http://en.wikipedia.org/wiki/Comparison_of_HTML_editors
Вспомогательные средства для
инспектирования существующих Web-страниц
•Mozilla Firebug
•Internet Explorer Developer Toolbar
5
Простейший HTML-документ
<HTML>
<HEAD>
<TITLE>Название документа</TITLE>
</HEAD>
<BODY>
Тело документа
</BODY>
</HTML>
6
Объявление DOCTYPE
Правильные варианты тега DOCTYPE
Стандарт HTML 4.01 Strict (строгий), Transitional
(переходный), Frameset (с фреймами)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd
">
http://validator.w3.org
7
Особенности написания HTML
• HTML-тег имеет вид:
<имя_тега [атрибуты]>с о д е р ж и м о е </имя_тега>
элемент
контейнер
или
<имя_тега [атрибуты]/>
Атрибуты:
имя1[="значение1"]имя2[="значение2"] …
1) <p align=“left”>Абзац</p>
2) <hr width=50% noshade/>
8
Особенности написания HTML
• Регистр символов тегов не важен
• Для параметров тегов исп. зн. по умолчанию
• Дополнительные пробелы, табуляции и переносы
строки не отображаются браузером
• Комментарии: 
• Кавычки вокруг значений параметров: двойные,
одинарные или могут отсутствовать, если
значение не содержит пробелов
• Неизвестные теги и параметры игнорируются
• Рекомендуется закрывать все теги
9
Специальные символы
Числовые ссылки на символы имеют формат
10
&#число; . Пример: №
№
Знак номера
Форматирование
текста
Логическое – определяет структурное назначение части текста
•
• Физическое – определяет визуальное отображение части текста
Тэги логического
Тэги физического форматирования
форматирования
<B>жирный текст</B>
<ABBR>
<BIG>большой текст</BIG>
<ACRONYM>
<BLOCKQUOTE>цитата
<CITE>
<BLOCKQUOTE>
<CODE>
<BR>Новая строка
<DFN>
<EM>
<KBD>
<SAMP>
<STRONG>
<VAR>
<FONT>текст с зад. пар.
шрифта<FONT>
<H1>Заголовок 1 ур.</H1> … … …
<H6> Заголовок 6 ур. </H6>
<I>курсивный текст</I>
<P>Абзац</P>
<SUB>Нижний индекс</SUB>
<SUP>Верхний индекс</SUP>
<PRE>Предварительно
отформатированный текст<PRE>
11
Примеры часто используемых
средств форматирования
12
Примеры часто используемых
средств форматирования
13
Примеры часто используемых
средств форматирования
14
Примеры часто используемых
средств форматирования
15
Тег <DIV>
Описание
Элемент <DIV> является блочным элементом и
предназначен для выделения фрагмента документа с
целью изменения вида содержимого. Как правило,
вид блока управляется с помощью стилей. Чтобы не
описывать каждый раз стиль внутри тега, можно
выделить стиль во внешнюю таблицу стилей, а для
тега добавить параметр class или id с именем
селектора.
Как и при использовании других блочных элементов,
содержимое тега <DIV> всегда начинается с новой
строки. После него также добавляется перенос
строки.
Синтаксис
<div>...</div>
Параметры
align
Задает выравнивание содержимого тега <DIV>.
title
16
Добавляет всплывающую подсказку к содержимому.
Тег <SPAN>
Описание
Тег <SPAN> предназначен для определения
встроенных элементов документа. В отличие от
блочных элементов, таких как <TABLE>, <P> или
<DIV>, с помощью тега <SPAN> можно выделить
часть информации внутри других тегов и установить
для нее свой стиль. Например, внутри параграфа
(тега <P>) можно изменить цвет и размер первой
буквы, если добавить начальный и конечный тег
<SPAN> и определить для него стиль текста. Чтобы
не описывать каждый раз стиль внутри тега, можно
выделить стиль во внешнюю таблицу стилей, а для
тега добавить параметр class или id с именем
селектора.
Синтаксис
<span>...</span>
17
Использование ссылок
Тег <a> (anchor)
• Абсолютная ссылка
<a href="http://www.htmlbook.ru">Ссылка на сайт
htmlbook.ru</a>
• Локальная ссылка
<a href="/index.html">На главную</a>
• Ссылка, открываемая в новом окне
<a href="http://www.yandex.ru" target="_blank">Яndex</a>
• Закладка
<a name="product"></a>
• Ссылка на закладку в текущем документе
<a href="#product">Описание продукта</a>
• Ссылка на закладку в другом документе
<a href="/index.html#contacts">На главную</a>
• Ссылка на e-mail
<a href=“mailto:[email protected]">Написать в службу
поддержки</a>
18
Создание таблиц
Таблица описывается тегом <TABLE>.
Элементы таблицы строятся по рядам
(строки).
Ряд задается тегом <TR> (Table Row, ряд
таблицы).
Внутри ряда находятся ячейки (столбцы)
(тег <TD> - Table Data, данные таблицы).
Для заголовков столбцов вместо тега
<TD> используется <TH> (Table Head,
заголовок таблицы). Разница в этих
тегах лишь в том, что текст в последнем
центрируется и выделяется жирным
шрифтом.
19
Пример простой таблицы
20
Свойства тега <table>
21
<TR>
Свойства тегов <tr>и <td>
align
Определяет выравнивание содержимого ячеек по горизонтали.
bgcolor
Цвет фона ячеек.
bordercolor
Цвет рамки.
valign
Выравнивание содержимого ячеек по вертикали.
<TD>
22
Объединение ячеек
<table border="1">
<tr> <td>1</td>
<tr> <td rowspan=2>4,7</td>
<tr>
</table>
Объединение 2 ячеек
по вертикали
<td>2</td>
<td>3</td></tr>
<td colspan=2>5,6</td>
</tr>
<td>8</td>
<td>9</td></tr>
Объединение 2
ячеек по
горизонтали
23
Разделы thead и tbody таблицы
• Элемент <THEAD> предназначен для хранения
одной или нескольких строк, которые представлены
вверху таблицы. Допустимо использовать не более
одного элемента <THEAD> в пределах одной
таблицы, и он должен идти в исходном коде сразу
после тега <TABLE>.
• Элемент <TBODY> предназначен для хранения
одной или нескольких строк таблицы. Это позволяет
создавать структурные блоки, к которым можно
применять единое оформление через стили, а также
управлять их видом через скрипты.
• Допускается применять несколько тегов <TBODY>
внутри контейнера <TABLE>. Доступны и другие
виды группировок строк — <TFOOT> и <THEAD>, ни
один из них не должен перекрываться с элементом
<TBODY>.
<table>
<thead>...</thead>
<tfoot>...</tfoot>
<tbody>
<tr>
<td> ... </td>
</table>
</tr>
24
</tbody>
Создание списков
• Маркированные (ненумерованные)
при помощи тега <UL> (Unordered List)
• Нумерованные
при помощи тега <OL> (Ordered List)
Элемент списка задается <LI> (List
Item)
• Списки определений
при помощи тега <DL> (Definition List)
25
Ненумерованные
(маркированные) списки
26
Нумерованные списки
Вложенные списки
27
Создание форм
• Предназначены для отправки данных на
сервер
• Создаются при помощи тега <form>
• Элементы формы создаются при помощи
<input type=“тип_элемента”>
28
Все возможные элементы формы
http://oreilly.com/catalog/jscript3/example/js3examples/16-1.html
29
<FORM NAME="everything"> 
<TABLE BORDER CELLPADDING=5>

<TR>
<TD>Username:<BR>[1]<INPUT TYPE=text NAME="username" SIZE=15></TD>
<TD>Password:<BR>[2]<INPUT TYPE=password NAME="password" SIZE=15></TD>
<TD ROWSPAN=4>Input Events[3]<BR>
<TEXTAREA NAME="textarea" ROWS=20 COLS=28></TEXTAREA></TD>
<TD ROWSPAN=4 ALIGN=center VALIGN=center>
[9]<INPUT TYPE=button VALUE="Clear" NAME="clearbutton"><BR>
[10]<INPUT TYPE=submit NAME="submitbutton" VALUE="Submit"><BR>
[11]<INPUT TYPE=reset NAME="resetbutton" VALUE="Reset"></TD></TR>
<TR>
<TD COLSPAN=2>Filename: [4]<INPUT TYPE=file NAME="file" SIZE=15></TD></TR>
<TR>
<TD>My Computer Peripherals:<BR>
[5]<INPUT TYPE=checkbox NAME="peripherals" VALUE="modem">28.8K Modem<BR>
[5]<INPUT TYPE=checkbox NAME="peripherals" VALUE="printer">Printer<BR>
[5]<INPUT TYPE=checkbox NAME="peripherals" VALUE="tape">Tape Backup</TD>
<TD>My Web Browser:<BR>
[6]<INPUT TYPE=radio NAME="browser" VALUE="nn">Netscape Navigator<BR>
[6]<INPUT TYPE=radio NAME="browser" VALUE="ie">Internet Explorer<BR>
[6]<INPUT TYPE=radio NAME="browser" VALUE="other">Other</TD></TR>
<TR>
<TD>My Hobbies:[7]<BR>
<SELECT multiple NAME="hobbies" SIZE=4>
<OPTION VALUE="programming">Hacking JavaScript
<OPTION VALUE="surfing">Surfing the Web
<OPTION VALUE="caffeine">Drinking Coffee
<OPTION VALUE="annoying">Annoying my Friends
</SELECT></TD>
<TD align=center valign=center>My Favorite Color:<BR>[8]
<SELECT NAME="color">
<OPTION VALUE="red">Red
<OPTION VALUE="green">Green
<OPTION VALUE="blue">Blue
<OPTION VALUE="white">White
<OPTION VALUE="violet">Violet <OPTION VALUE="peach">Peach
</SELECT></TD></TR>
</TABLE>
30
Пример простой формы
31
Скрытые элементы формы:
hidden
• <input type=“hidden” name=“somename”
value=“somevalue”>
• Используется для передачи на сервер
данных, не вводимых пользователем
32
Работа с графикой
• Размещение изображения на странице
<IMG SRC=“myimg.jpg” WIDTH=“100” HEIGHT=“50”>
33
Использование фреймов
Для создания фрейма используется тег
<FRAMESET>, который заменяет тег
<BODY> в документе и применяется
для разделения экрана на области.
Внутри данного тега находятся теги
<FRAME>, которые указывают на
HTML-документ, предназначенный для
загрузки в область
34
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<frameset rows="25%,75%">
<frame src="top.html" name="TOP" scrolling="no" noresize>
<frameset cols="100,*">
<frame src="menu.html" name="MENU">
<frame src="content.html" name="CONTENT">
</frameset>
</frameset>
</html>
35
2. CSS
(Cascading Style Sheets –
каскадные таблицы стилей)
36
• CSS (Cascading Style Sheets, каскадные
таблицы стилей) — это набор
параметров форматирования, который
применяется к элементам веб-страницы
для управления их видом и
положением.
Преимущества CSS:
•Разделение оформления и содержания
•Единое оформление документов
•Централизованное хранение
•Расширенные возможности
•Быстрая работа
37
История версий
• Официальные рекомендации W3C:
• CSS уровень 1 (CSS1) 1996 г.
• CSS уровень 2 (CSS2) 1998 г.
• Рабочие версии W3C: CSS2.1, CSS3
38
Справочные материалы
•
•
•
•
•
Справочник (по-русски)
http://www.htmlbook.ru/css/
Спецификации
www.w3.org/TR/CSS2/
www.w3.org/Style/CSS/
39
Инструменты
• Текстовые редакторы
• TopStyle (версия Lite - бесплатная)
• Встроенный редактор Netbeans 6.5
40
Базовый синтаксис CSS
селектор { определение }
Определение имеет вид:
свойство1: значение1;
свойство2: значение2;
свойствоN: значениеN;
Правило CSS
ПРИМЕР:
H1 {color: red;
font-size: 20pt}
41
Встраивание таблиц стилей в
HTML-документ
1. Связывание с помощью тега <LINK>,
задаваемого в секции <HEAD>:
<HEAD> <LINK REL=“stylesheet”
TYPE=“text/css”
HREF=“css/styles.css”/> </HEAD>
main.html
css/styles.css
2. Внедрение тегом <STYLE TYPE=
“text/css” > в секции <HEAD>
<HEAD>
<STYLE TYPE=“text/css”>
P { background-color: lightgrey }
main.html
</STYLE>
</HEAD>
42
Встраивание таблиц стилей в
HTML-документ
3. Импортирование при помощи @import
<head> <style type="text/css">
@import url("css/style2.css");
H1 { font-size: 120%;
main.html css/style2.css
font-family: Arial,
Helvetica, sans-serif;
color: green;
}
</style> </head>
4. Встраивание (использование
внутренних стилей)
<h1 style="font-size: 120%;
#336">Заголовок</h1>
color:
main.html
43
Группирование
H1 { font-family: Arial }
H2 { font-family: Arial }
H3 { font-family: Arial }
H1, H2, H3 { fontfamily: Arial }
Некоторые свойства имеют
собственный синтаксис
группирования, например свойство
font
H1 ( font: bold 14pt Arial )
44
Селекторы CSS: выбор элементов, к
которым применять правила оформления
•Селектор класса
•Селектор ID
<STYLE type="text/css">
<!-H1.red { color: red;
}
.blueBgrd { color:
red; background-color:
blue }
-->
</style>
<STYLE type="text/css">
<!-#par24 { letter-spacing:
1em; }
#form3 { color: red;
background-color: blue }
-->
</style>
<H1 class="red">Красный
шрифт</h1>
<DIV
class="blueBgrd">Красный
шрифт на синем фоне</DIV>
<P id="par24">Разрежённые
слова</p>
<P id="form2">Чёрный
шрифт</p>
45
Селекторы CSS
•Универсальный селектор:
*
•Контекстные селекторы: для вложенных элементов
Контекстный селектор состоит из простых селекторов, разделенных пробелом.
Так, для селектора тега синтаксис будет следующий.
Тег1 Тег2 { ... }
В этом случае стиль будет применяться к Тегу2 когда он размещается внутри
Тега1, как показано ниже.
<Тег1>
<Тег2> ... </Тег2>
</Тег1>
•Соседние селекторы: для соседних элементов
<p>Lorem <b>ipsum </b> dolor sit amet, <i>consectetuer</i>
adipiscing <tt>elit</tt>.</p>
Соседние: <b> и <i>, <i> и <tt>
Селектор 1 + Селектор 2 { Описание правил стиля }
Не поддерживаются IE!
•Дочерние селекторы: для дочерних элементов
Селектор 1 > Селектор 2 { Описание правил стиля }
Не поддерживаются IE!
46
Модель форматирования
Отображаемые элементы в модели форматирования
документа:
•блоковые (block)
•встроенные (inline)
Блоковый элемент HTML представляется
окруженным вложенными прямоугольными
блоками:
•Содержимое
•Отступ (padding)
•Граница (border)
•Поле (margin)
47
Блоковые элементы
48
Примеры:
Блоковые элементы
<P> - A paragraph of text and/or inline elements.
<PRE> - A paragraph of text with white spaces
preserved.
<LI> - A list item. Identical to <P; except that it has listitem marker on the left.
<TABLE> - A table of cells. Each cell is identical to
<P>
<FORM> - An input form. Identical to <P> except that
it has no margins.
<DIV> - A container to group elements into a block
element.
<H1/H2/H3...> - A title line. Identical to <P> except that
it has different margins and font size
<HR> - A horizontal ruler.
49
Встроенные элементы
Встроенный элемент форматируется как
прямоугольный блок, примыкающий к другим
встроенным элементам и выстраивающийся
вместе с ними в одну строку
Примеры:
•
•
•
•
<IMG> - A tag to insert an image into the current line.
<STRONG> - A tag to make the text stronger.
<EM> - A tag to emphasize the text
<INPUT> - A tag to allow user entering input data to a
form.
• <SPAN> - A container to group inline elements into a
unit.
• <A> - A tag to create a hyper link.
• <BR> - A tag to break the current line.
50
Свойства display и visibility
visibility = visible|hidden
Определяет, является ли элемент видимым или
нет.
Если свойство равно hidden, элемент все равно
занимает место в разметке страницы.
display = none|block|inline
block: элемент отображается как блоковый
inline: элемент отображается как встроенный
none: элемент удаляется из отображаемой
структуры
51
Единицы измерения в CSS
52
Шрифты
Семейство шрифта [font-family]
Приоритетный список шрифтов,
используемых для отображения данного
элемента или web-страницы.
h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: "Times New Roman", serif;}
Стиль шрифта [font-style]
normal, italic или oblique
h2 {font-style: italic;}
Вариант шрифта [font-variant]
normal или small-caps
h1 {font-variant: small-caps;}
h2 {font-variant: normal;}
Вес шрифта [font-weight]
Свойство font-weight описывает,
насколько толстым, или "тяжёлым",
должен отображаться шрифт. Шрифт
может быть normal или bold.
Некоторые браузеры поддерживают
даже числовые значения 100-900 (в
сотнях) для описания веса шрифта.
Размер шрифта [font-size]
h1 {font-size: 30px;}
h2 {font-size: 12pt;}
h3 {font-size: 120%;}
p {font-size: 1em;}
p{
Сокращенная запись [font]
font-style: italic;
p{
font-weight: bold;
font: italic bold 30px arial, sans-serif;
font-size: 30px;
}
font-family: arial, sans-serif;
53
}
Порядок свойств font таков:font-style | font-variant | font-weight | font-size | font-family
Цвет и фон
Цвет переднего плана : color
Цвет фона элемента : background-color
h1 {
color: #990000;
background-color: #FC9804;
}
Фоновое изображение: background-image
body {
background-image: url("butterfly.gif");
}
Повторение фонового изображения: background-repeat
Блокировка фонового изображения: background-attachment
Расположение фонового рисунка: background-position
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
Сокращенная
запись
background
background: #FFCC66 url("butterfly.gif") no-repeat
fixed right bottom;
Порядок свойств этого элемента таков:
54
[background-color] | [background-image] | [background-repeat] | [background-attachment]
[background-position]
Форматирование текста
Настройка отображения символов, слов и абзацев
letter-spacing
Определяет интервал между символами в пределах элемента.
Браузеры обычно устанавливают расстояние между символами, исходя
из типа и вида шрифта, его размеров и настроек операционной
системы. Чтобы изменить это значение и применяется данный атрибут.
line-height
Устанавливает интерлиньяж (межстрочный интервал) текста, отсчет
ведется от базовой линии шрифта. При обычных обстоятельствах
расстояние между строками зависит от вида и размера шрифта и
определяется браузером автоматически.
text-align
Определяет горизонтальное выравнивание текста в пределах элемента.
text-decoration
Добавляет оформление текста в виде его подчеркивания,
перечеркивания, линии над текстом и мигания. Одновременно можно
применить более одного стиля, перечисляя значения через пробел.
text-indent
Устанавливает величину отступа первой строки блока текста (например,
для параграфа P). Воздействия на все остальные строки не
55
оказывается.
Форматирование текста
Настройка отображения символов, слов и абзацев
text-transform
Управляет преобразованием текста элемента в
заглавные или прописные символы. Когда значение
отлично от none, регистр исходного текста будет
изменен.
vertical-align
Выравнивает элемент по вертикали относительно
своего родителя или окружающего текста.
white-space
Параметр white-space устанавливает, как отображать
пробелы между словами.
word-spacing
Устанавливает интервал между словами. Если
установлен параметр выравнивания justify, то атрибут
word-spacing не действует, поскольку интервал между
56
словами будет установлен принудительно.
Свойства блоков
Свойства этой категории устанавливают
параметры блоковых элементов. Среди них
можно выделить три больших группы,
формирующих блоки полей(margin),
границ(border) и отступов (padding), причём
группу, работающую с границей, можно
подразделить ещё на четыре группы,
устанавливающие значения цвета, стиля,
ширины и одновременно всех перечисленных
свойств границы. Все эти группы отличает то,
что в них включены свойства для задания
параметров верхних,
57
Свойства блоков
Свойства
границы
border
border-color
border-style
border-width
border-bottom
border-bottom-color
border-bottom-style
border-bottom-width
border-left
…
border-right
…
border-top
…
Свойства поля
margin
margin-bottom
margin-left
margin-right
margin-top
Свойства отступа
padding
padding-bottom
padding-left
padding-right
padding-top
58
•
•
•
•
Позиционирование
Абсолютное
Относительное
Статическое
Фиксированное
Значения static, relative,
fixed и absolute
свойства position
Относительный способ определяет смещение элемента
относительно его естественного положения в потоке
отображения элементов. Абсолютный способ удаляет
элемент из естественного потока позиционирования и
позволяет разместит его на странице абсолютно
произвольным образом.
Статический способ, являющийся умалчиваемым способом
позиционирования элементов, предполагает естественный
поток отображения элементов страницы в окне браузера в
59
соответствии с иерархией объектов документа.
Позиционирование
<head>
<title>Позиционирование</title>
</head>
<body>
<span style="position: static;
background-color: #90EE90;">
Родитель, позиционируемый
статически! Дочерний IMG к нему не
привязан
<img src="dog.jpg" style="position:
absolute; top: 60px; left: 60px;" >
<hr>
</span>
<div style="position: absolute; top: 180px; left: 60px;border: 1px solid black">
<span style="position: relative; top: -30px;background-color: gray;">
Это изображение
</span>
<img src="cat.jpg" style="position: relative; top: -20px;" >
<span style="position: relative; top:
является изображением кота.
</span>
</div>
</body>
</html>
-10px;background-color: lightgrey;">
60
Пример:Оформление таблиц при
помощи
CSS
/* Design 7 */ table.Design7 { border-spacing: 0px; bordercollapse: collapse; background: #F9F5D7; border: 0.3em solid
#000000; }
table.Design7 th { text-align: left; font-weight: normal;
padding: 0.1em 0.5em; border: 0px; border-bottom: 1px solid
#000000; }
table.Design7 td { text-align: right; border: 0px; borderbottom: 1px solid #000000; padding: 0.1em 0.5em; }
table.Design7 thead th { text-align: center; font-weight: bold;
background-color: #AA0000; color: #FFFFFF; }
table.Design7 th.Corner { text-align: left; }
table.Design7 td.Odd { background: #E8E4C0; }
61
62

1. Язык разметки HTML

Transcript 1. Язык разметки HTML

Directory