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

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

HTML в Web-приложениях, построенных на основе компонентов(Java EE, .NET)

История 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”

Справочные материалы • Справочник по всем тегам (по-русски) • http://htmlbook.ru/html/ • Спецификации HTML • www.w3.org/MarkUp/html3/Contents.html • www.w3.org/TR/html401/

Инструменты Редакторы кода • Простейшие (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

Простейший HTML-документ <HTML><HEAD><TITLE>Название документа</TITLE></HEAD><BODY>Тело документа </BODY> </HTML>

Объявление 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

Особенности написания HTML • HTML-тег имеет вид: <имя_тега [атрибуты]>содержимое</имя_тега> или <имя_тега [атрибуты]/> Атрибуты: имя1[="значение1"]имя2[="значение2"]… элемент контейнер 1) <p align=“left”>Абзац</p> 2) <hr width=50% noshade/>

Особенности написания HTML • Регистр символов тегов не важен • Для параметров тегов исп. зн. по умолчанию • Дополнительные пробелы, табуляции и переносы строки не отображаются браузером • Комментарии:  • Кавычки вокруг значений параметров: двойные, одинарные или могут отсутствовать, если значение не содержит пробелов • Неизвестные теги и параметры игнорируются • Рекомендуется закрывать все теги

Специальные символы Числовые ссылки на символы имеют формат &#число; . Пример:№№Знак номера

Форматирование текста Тэги логического форматирования <ABBR> <ACRONYM> <CITE> <CODE> <DFN> <EM> <KBD> <SAMP> <STRONG> <VAR> Тэги физического форматирования <B>жирный текст</B> <BIG>большой текст</BIG> <BLOCKQUOTE>цитата <BLOCKQUOTE> <BR>Новая строка <FONT>текст с зад. пар. шрифта<FONT> <H1>Заголовок 1 ур.</H1> … … … <H6> Заголовок 6 ур. </H6> <I>курсивный текст</I> <P>Абзац</P> <PRE>Предварительно отформатированный текст<PRE> • Логическое – определяет структурное назначение части текста • Физическое – определяет визуальное отображение части текста <SUB>Нижний индекс</SUB> <SUP>Верхний индекс</SUP>

Примеры часто используемых средств форматирования

Тег <DIV> Описание Элемент <DIV> является блочным элементом и предназначен для выделения фрагмента документа с целью изменения вида содержимого. Как правило, вид блока управляется с помощью стилей. Чтобы не описывать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для тега добавить параметр class или id с именем селектора. Как и при использовании других блочных элементов, содержимое тега <DIV> всегда начинается с новой строки. После него также добавляется перенос строки. Синтаксис <div>...</div> Параметры align Задает выравнивание содержимого тега <DIV>. title Добавляет всплывающую подсказку к содержимому.

Тег <SPAN> Описание Тег <SPAN> предназначен для определения встроенных элементов документа. В отличие от блочных элементов, таких как <TABLE>, <P> или <DIV>, с помощью тега <SPAN> можно выделить часть информации внутри других тегов и установить для нее свой стиль. Например, внутри параграфа (тега <P>) можно изменить цвет и размер первой буквы, если добавить начальный и конечный тег <SPAN> и определить для него стиль текста. Чтобы не описывать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для тега добавить параметр class или id с именем селектора. Синтаксис <span>...</span>

Использование ссылок Тег <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:support@site.ru">Написать в службу поддержки</a>

Создание таблиц Таблица описывается тегом <TABLE>. Элементы таблицы строятся по рядам (строки). Ряд задается тегом <TR> (Table Row, ряд таблицы). Внутри ряда находятся ячейки (столбцы) (тег <TD> - Table Data, данные таблицы). Для заголовков столбцов вместо тега <TD> используется <TH> (Table Head, заголовок таблицы). Разница в этих тегах лишь в том, что текст в последнем центрируется и выделяется жирным шрифтом.

Пример простой таблицы

Свойства тега <table>

<TR> Свойства тегов <tr>и <td> align Определяет выравнивание содержимого ячеек по горизонтали. bgcolor Цвет фона ячеек. bordercolor Цвет рамки. valign Выравнивание содержимого ячеек по вертикали. <TD>

Объединение ячеек <table border="1"> <tr> <td>1</td> <td>2</td> <td>3</td></tr> <tr> <td rowspan=2>4,7</td> <td colspan=2>5,6</td> </tr> <tr> <td>8</td> <td>9</td></tr> </table> Объединение 2 ячеек по горизонтали Объединение 2 ячеек по вертикали

Разделы thead и tbody таблицы • Элемент <THEAD> предназначен для хранения одной или нескольких строк, которые представлены вверху таблицы. Допустимо использовать не более одного элемента <THEAD> в пределах одной таблицы, и он должен идти в исходном коде сразу после тега <TABLE>. • Элемент <TBODY> предназначен для хранения одной или нескольких строк таблицы. Это позволяет создавать структурные блоки, к которым можно применять единое оформление через стили, а также управлять их видом через скрипты. • Допускается применять несколько тегов <TBODY> внутри контейнера <TABLE>. Доступны и другие виды группировок строк — <TFOOT> и <THEAD>, ни один из них не должен перекрываться с элементом <TBODY>. <table> <thead>...</thead> <tfoot>...</tfoot> <tbody> <tr> <td> ... </td> </tr> </tbody> </table>

Создание списков • Маркированные (ненумерованные) при помощи тега <UL> (Unordered List) • Нумерованные при помощи тега <OL> (Ordered List) Элемент списка задается <LI> (List Item) • Списки определений при помощи тега <DL> (Definition List)

Ненумерованные(маркированные) списки

Нумерованные списки Вложенные списки

Создание форм • Предназначены для отправки данных на сервер • Создаются при помощи тега <form> • Элементы формы создаются при помощи <input type=“тип_элемента”>

Все возможные элементы формы http://oreilly.com/catalog/jscript3/example/js3examples/16-1.html

<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> </FORM>

Пример простой формы

Скрытые элементы формы: hidden • <input type=“hidden” name=“somename” value=“somevalue”> • Используется для передачи на сервер данных,не вводимых пользователем

Работа с графикой <IMG SRC=“myimg.jpg” WIDTH=“100” HEIGHT=“50”> • Размещение изображения на странице

Использование фреймов Для создания фрейма используется тег <FRAMESET>, который заменяет тег <BODY> в документе и применяется для разделения экрана на области. Внутри данного тега находятся теги <FRAME>, которые указывают на HTML-документ, предназначенный для загрузки в область

<!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>

2. CSS (Cascading Style Sheets –каскадные таблицы стилей)

CSS (Cascading Style Sheets, каскадные таблицы стилей) — это набор параметров форматирования, который применяется к элементам веб-страницы для управления их видом и положением. • Преимущества CSS: • Разделение оформления и содержания • Единое оформление документов • Централизованное хранение • Расширенные возможности • Быстрая работа

История версий • Официальные рекомендации W3C: • CSS уровень 1 (CSS1) 1996 г. • CSS уровень 2 (CSS2) 1998 г. • Рабочие версии W3C:CSS2.1, CSS3

Справочные материалы • Справочник (по-русски) • http://www.htmlbook.ru/css/ • Спецификации • www.w3.org/TR/CSS2/ • www.w3.org/Style/CSS/

Инструменты • Текстовые редакторы • TopStyle (версия Lite - бесплатная) • Встроенный редактор Netbeans 6.5

Базовый синтаксис CSS селектор{ определение } Определение имеет вид: свойство1: значение1; свойство2: значение2; свойствоN: значениеN; Правило CSS ПРИМЕР: H1{color: red; font-size: 20pt}

Встраивание таблиц стилей в HTML-документ 1. Связывание с помощью тега <LINK>, задаваемого в секции <HEAD>: <HEAD> <LINK REL=“stylesheet” TYPE=“text/css” HREF=“css/styles.css”/> </HEAD> 2. Внедрение тегом <STYLE TYPE= “text/css” > в секции <HEAD> <HEAD> <STYLE TYPE=“text/css”> P { background-color: lightgrey } </STYLE> </HEAD> css/styles.css main.html main.html

Встраивание таблиц стилей в HTML-документ 3. Импортирование при помощи @import <head> <style type="text/css"> @import url("css/style2.css"); H1 { font-size: 120%; font-family: Arial, Helvetica, sans-serif; color: green; } </style> </head> 4. Встраивание (использование внутренних стилей) <h1 style="font-size: 120%; color: #336">Заголовок</h1> main.html css/style2.css main.html

Группирование H1 { font-family: Arial } H2 { font-family: Arial } H3 { font-family: Arial } Некоторые свойства имеют собственный синтаксис группирования, например свойство font H1 ( font: bold 14pt Arial ) H1, H2, H3 { font-family: Arial }

Селекторы CSS: выбор элементов, к которым применять правила оформления • Селектор класса • <STYLE type="text/css"> </style> • <H1 class="red">Красный шрифт</h1><DIV class="blueBgrd">Красный шрифт на синем фоне</DIV> • Селектор ID • <STYLE type="text/css"> </style> • <P id="par24">Разрежённые слова</p> • <P id="form2">Чёрный шрифт</p>

Селекторы 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!

Модель форматирования • Отображаемые элементы в модели форматирования документа: • блоковые (block) • встроенные (inline) • Блоковый элементHTML представляется окруженным вложенными прямоугольными блоками: • Содержимое • Отступ (padding) • Граница (border) • Поле (margin)

Блоковые элементы

Блоковые элементы Примеры: <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 list-item 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.

Встроенные элементы Встроенный элемент форматируется как прямоугольный блок, примыкающий к другим встроенным элементам и выстраивающийся вместе с ними в одну строку Примеры: • <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.

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