1 / 62

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;

Download Presentation

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

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


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

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

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

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

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

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

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

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

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

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

  11. Форматирование текста Тэги логического форматирования <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>

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

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

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

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

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

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

  18. Использование ссылок Тег <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>

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

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

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

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

  23. Объединение ячеек <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 ячеек по вертикали

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

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

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

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

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

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

  30. <FORM NAME="everything"> <!-- A one-of-everything HTML form... --> <TABLE BORDER CELLPADDING=5> <!-- ...in a big HTML table. --> <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>

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

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

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

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

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

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

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

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

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

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

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

  42. Встраивание таблиц стилей в 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

  43. Встраивание таблиц стилей в 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

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

  45. Селекторы CSS: выбор элементов, к которым применять правила оформления • Селектор класса • <STYLE type="text/css"> <!--    H1.red { color: red; }   .blueBgrd { color: red; background-color: blue }--></style> • <H1 class="red">Красный шрифт</h1><DIV class="blueBgrd">Красный шрифт на синем фоне</DIV> • Селектор ID • <STYLE type="text/css"> <!--#par24 { letter-spacing: 1em; }#form3 { color: red; background-color: blue }--></style> • <P id="par24">Разрежённые слова</p> • <P id="form2">Чёрный шрифт</p>

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

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

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

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

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

More Related