Текст, Изображения, Таблицы, Формы Ванкевич Кирилл УО Белорусский государственный университет информатики и радиоэлектроники филиал Минский радиотехнический колледж
1. Введение в HTML Введение в HTML Введение в HTML Как работает Web? Как работает Web? Как работает Web? Как работает Web? Что такое Web-страница? Что такое Web-страница? Что такое Web-страница? Что такое Web-страница? Создание HTML-страниц Создание HTML-страниц Создание HTML-страниц Создание HTML-страниц Основные Теги: Гиперссылки, Изображения, Форматирование Основные Теги: Гиперссылки, Изображения, Форматирование Основные Теги: Гиперссылки, Изображения, Форматирование Основные Теги: Гиперссылки, Изображения, Форматирование Заголовки и абзацы Заголовки и абзацы Заголовки и абзацы Заголовки и абзацы 2. HTML-структура HTML-структура HTML-структура Объявление Объявление Объявление Объявление 2
Раздел : Title, Meta, Script, Style Раздел : Title, Meta, Script, Style Раздел : Title, Meta, Script, Style Раздел : Title, Meta, Script, Style Раздел Раздел Раздел Раздел Стиль текста и теги форматирования Стиль текста и теги форматирования Стиль текста и теги форматирования Стиль текста и теги форматирования Гиперссылки:, Гиперссылки и Разделы Гиперссылки:, Гиперссылки и Разделы Гиперссылки:, Гиперссылки и Разделы Гиперссылки:, Гиперссылки и Разделы Изображения: Изображения: Изображения: <img> Изображения: <img> Списки:, и Списки:, и Списки: <ol>, <ul> и Списки: <ol>, <ul> и Спецсимволы Спецсимволы Спецсимволы 2. Элементы и 2. Элементы и Элементы и Элементы и 3. HTML-таблицы HTML-таблицы HTML-таблицы 4. HTML-формы 5. HTML-фреймы HTML-формыHTML-фреймы HTML-формыHTML-фреймы 3
WWW использование классической архитектуры клиент/сервер WWW использование классической архитектуры клиент/сервер HTTP - это текстовый протокол запрос-ответ HTTP - это текстовый протокол запрос-ответ 4 Запрос страницы Клиент, использующий веб-браузер Запуск программного обеспечения веб-сервера (IIS, Apache и т.д.) Ответ сервера HTTP HTTP
Web-страницы представляют собой текстовые файлы с HTML-кодом Web-страницы представляют собой текстовые файлы с HTML-кодом HTML – H yper T ext M arkup L anguage (язык гипертекстовой разметки) HTML – H yper T ext M arkup L anguage (язык гипертекстовой разметки) Составные описания HTML-кода Составные описания HTML-кода структура документа (семантическая разметка) структура документа (семантическая разметка) форматирование форматирование Тип файла описания HTML-кода : Тип файла описания HTML-кода : текстовый документ текстовый документ Задача HTML: с помощью тегов предоставить информацию о структуре содержимого страницы. Задача HTML: с помощью тегов предоставить информацию о структуре содержимого страницы. 5
HTML-файлы должны иметь расширения.htm или.html HTML-файлы должны иметь расширения.htm или.html HTML-файлы могут быть созданы с помощью текстовых редакторов: HTML-файлы могут быть созданы с помощью текстовых редакторов: Блокнот, NotePad ++, PSPad Блокнот, NotePad ++, PSPad Или HTML-редакторов (WYSIWYG-редакторов): Или HTML-редакторов (WYSIWYG-редакторов): Microsoft FrontPage Microsoft FrontPage Adobe Dreamweaver Adobe Dreamweaver Microsoft Word Microsoft Word Visual Studio Visual Studio 6
Текст, Изображения, Таблицы, Формы
HTML состоит из элементов и тегов HTML состоит из элементов и тегов Начинается с и заканчивается Начинается с и заканчивается Элементы (теги) являются вложенными в друг друга: Элементы (теги) являются вложенными в друг друга: Теги имеют атрибуты: Теги имеют атрибуты: В HTML описывают структуру, используя два основных раздела: и В HTML описывают структуру, используя два основных раздела: и 8
Исходный HTML-код должен быть отформатирован для повышения удобочитаемости и облегчения отладки. Исходный HTML-код должен быть отформатирован для повышения удобочитаемости и облегчения отладки. Каждый элемент должен начинаться с новой строки. Каждый элемент должен начинаться с новой строки. Каждый вложенный (блок) элемент должен иметь отступ. Каждый вложенный (блок) элемент должен иметь отступ. Браузеры игнорируют множественные пробелы в исходном коде страницы, так что форматирование безвредно. Браузеры игнорируют множественные пробелы в исходном коде страницы, так что форматирование безвредно. По причине производительности, форматированием кода можно пожертвовать. По причине производительности, форматированием кода можно пожертвовать. 9
10 <html> My First HTML Page My First HTML Page This is some text... This is some text... </html> test.html
<html> My First HTML Page My First HTML Page This is some text... This is some text... </html> 11 Открытие тега Зактрытие тега HTML-элементы состоят из открывающего и закрывающего тега, содержимого.
<html> My First HTML Page My First HTML Page This is some text... This is some text... </html> 12 Заголовок
<html> My First HTML Page My First HTML Page This is some text... This is some text... </html> 13 Тело документа
Гиперссылки Гиперссылки Изображения Изображения Форматирование текста Форматирование текста 14 <a href=" title="Telerik">Link to Telerik Web site title="Telerik">Link to Telerik Web site This text is emphasized. This text is emphasized. new line new line This one is more emphasized. This one is more emphasized.
15 <html><head> Simple Tags Demo Simple Tags Demo </head><body> <a href=" title= "Telerik site">This is a link. "Telerik site">This is a link. Bold and italic text. Bold and italic text.</body></html> some-tags.html
Теги могут иметь атрибуты Теги могут иметь атрибуты Атрибуты определяют свойства и поведение Атрибуты определяют свойства и поведение Например: Например: Некоторые атрибуты можно применять к каждому элементу: Некоторые атрибуты можно применять к каждому элементу: id, style, class, title id, style, class, title Id должен быть уникальным в документе Id должен быть уникальным в документе Содержимое атрибута title отображается в виде подсказки, когда на элемент наводится курсор мыши Содержимое атрибута title отображается в виде подсказки, когда на элемент наводится курсор мыши 16 Атрибут alt со значением " logo "
Теги заголовков (h1 – h6) Теги заголовков (h1 – h6) Теги абзаца Теги абзаца Теги div и span Теги div и span 17 This is my first paragraph This is my first paragraph This is my second paragraph This is my second paragraph Heading 1 Heading 1 Sub heading 2 Sub heading 2 Sub heading 3 Sub heading 3 This is a div This is a div
18 <html> Headings and paragraphs Headings and paragraphs Heading 1 Heading 1 Sub heading 2 Sub heading 2 Sub heading 3 Sub heading 3 This is my first paragraph This is my first paragraph This is my second paragraph This is my second paragraph This is a div This is a div </html> headings.html
Структура HTML-документа
Важно иметь правильное представление и отношение к HTML Важно иметь правильное представление и отношение к HTML HTML – это только структура, а не внешний вид (за внешний вид отвечает CSS) HTML – это только структура, а не внешний вид (за внешний вид отвечает CSS) Веб-браузеры «спокойно» относятся к неверному HTML-коду и синтаксическим ошибкам, но не стоит злоупотреблять. Веб-браузеры «спокойно» относятся к неверному HTML-коду и синтаксическим ошибкам, но не стоит злоупотреблять. 20
HTML-документы должны начинаться с определения типа документа (DTD) HTML-документы должны начинаться с определения типа документа (DTD) Он сообщает веб-браузеру тип HTML-кода Он сообщает веб-браузеру тип HTML-кода Возможные версии: HTML 4.01, XHTML 1.0 (Transitional or Strict), XHTML 1.1, HTML 5 Возможные версии: HTML 4.01, XHTML 1.0 (Transitional or Strict), XHTML 1.1, HTML 5 Например: Например: Смотреть список возможных типов Смотреть список возможных типов 21
XHTML является более строгим, XHTML является более строгим, чем HTML чем HTML Теги и имена атрибутов должны быть в нижнем регистре Теги и имена атрибутов должны быть в нижнем регистре Все теги должны быть закрыты (, ), в то время как HTML позволяет и и предусматривает отсутствие закрывающего тега ( par1 par2 ) Все теги должны быть закрыты (, ), в то время как HTML позволяет и и предусматривает отсутствие закрывающего тега ( par1 par2 ) XHTML-документ должен иметь только один корень (HTML позволяет более одного) XHTML-документ должен иметь только один корень (HTML позволяет более одного) 22
Многие атрибуты элементов являются устаревшими в XHTML, большинство из них переехали в CSS Многие атрибуты элементов являются устаревшими в XHTML, большинство из них переехали в CSS Минимизация атрибутов запрещена Минимизация атрибутов запрещена Примечание: загрузка XHTML-страницы происходит быстрее, чем HTML (валидный код быстрее, нежели не валидный)! Примечание: загрузка XHTML-страницы происходит быстрее, чем HTML (валидный код быстрее, нежели не валидный)! 23
Содержит сведения, которые не отображаются на веб-странице, за исключением тега Содержит сведения, которые не отображаются на веб-странице, за исключением тега Начинается после объявления Начинается после объявления Начинается с тега и заканчивается Начинается с тега и заканчивается Содержит обязательный тег Содержит обязательный тег Может содержать другие теги, например. Может содержать другие теги, например. 24
Заголовок должен располагаться между тегами и Заголовок должен располагаться между тегами и Используется для указания заголовка в строке заголовка Web-браузера Используется для указания заголовка в строке заголовка Web-браузера Используется поисковыми системами и людьми Используется поисковыми системами и людьми 25 Telerik Academy – Winter Season 2009/2010 Telerik Academy – Winter Season 2009/2010
Metа-теги описывают содержимое страницы и ключевые слова для поисковых машин, разрешают или запрещают индексацию Metа-теги описывают содержимое страницы и ключевые слова для поисковых машин, разрешают или запрещают индексацию 26
Тег используется для размещения скриптов в HTML-документе Тег используется для размещения скриптов в HTML-документе Скрипты выполняются в Web-браузере клиента Скрипты выполняются в Web-браузере клиента Сценарии могут располагаться в разделах и Сценарии могут располагаться в разделах и Поддерживаемые клиентские языки сценариев: Поддерживаемые клиентские языки сценариев: JavaScript (не Java!) JavaScript (не Java!) VBScript VBScript JScript JScript 27
28 <html> JavaScript Example JavaScript Example function sayHello() { function sayHello() { document.write(" Hello World! "); document.write(" Hello World! "); } <script type= <script type= "text/javascript"> "text/javascript"> sayHello(); sayHello(); </html> scripts-example.html
Тег применяется для определения стилей (CSS) элементов веб-страницы Тег применяется для определения стилей (CSS) элементов веб-страницы 29 <html> p { font-size: 12pt; line-height: 12pt; } p { font-size: 12pt; line-height: 12pt; } p:first-letter { font-size: 200%; } p:first-letter { font-size: 200%; } span { text-transform: uppercase; } span { text-transform: uppercase; } Styles demo. Styles demo. Test uppercase. Test uppercase. </html> style-example.html
Комментарии могут располагаться в любом месте между тегами Комментарии могут располагаться в любом месте между тегами Комментарии начинаются с Комментарии начинаются с 30 Telerik Telerik...
Раздел описывает видимую часть страницы Раздел описывает видимую часть страницы Следует после раздела Следует после раздела Начинается с и заканчивается Начинается с и заканчивается 31 <html> Test page Test page </html>
Теги форматирования текста изменяют текст между открывающим тегом и закрывающим Теги форматирования текста изменяют текст между открывающим тегом и закрывающим Пр. Hello делает Hello жирным Пр. Hello делает Hello жирным bold italicized underlined Sample superscript Sample subscript strong emphasized Preformatted text Quoted text block Deleted text – strike through 32
33 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " " Page Title Page Title Notice Notice This is a sample Web page. This is a sample Web page. Next paragraph: Next paragraph: preformatted. preformatted. More Info More Info Specifically, were using XHMTL 1.0 transitional. Specifically, were using XHMTL 1.0 transitional. Next line. Next line. </html> text-formatting.html
Ссылка на документ, который называется form.html, находящийся в корне сайта: Ссылка на документ, который называется form.html, находящийся в корне сайта: Ссылка на документ, который называется parent.html, находится в родит. каталоге: Ссылка на документ, который называется parent.html, находится в родит. каталоге: Ссылка на документ, который называется cat.html, находится в подкаталоге stuff : Ссылка на документ, который называется cat.html, находится в подкаталоге stuff : 34 Fill Our Form Fill Our Form Parent Parent Catalog Catalog
Ссылка на внешний Web-сайт: Ссылка на внешний Web-сайт: Всегда используйте полный URL, включая префикс " ", а не просто " " Всегда используйте полный URL, включая префикс " ", а не просто " " Используйте target="_blank" для открытия ссылки в новом окне Используйте target="_blank" для открытия ссылки в новом окне Ссылка на адрес электронной почты: Ссылка на адрес электронной почты: 35 BASD BASD Please report bugs here (by only) Please report bugs here (by only)
Ссылка на документ apply-now.html Ссылка на документ apply-now.html Находится на одном сервере, в корневом каталоге Находится на одном сервере, в корневом каталоге Использование изображения в качестве ссылки: Использование изображения в качестве ссылки: Ссылка на документ index.html Ссылка на документ index.html На том же сервере, в подкаталоге родительского каталога: На том же сервере, в подкаталоге родительского каталога: 36 <img src="apply-now-button.jpg" /> src="apply-now-button.jpg" /> Switch to English version Switch to English version
Ссылка на другое место в том же документе: Ссылка на другое место в том же документе: Ссылка на определенное место в другом док.: Ссылка на определенное место в другом док.: 37 Go to Introduction Go to Introduction... Introduction Introduction Go to Section Go to Section Technical Background Technical Background </div>
38 Fill Our Form Fill Our Form Parent Parent Catalog Catalog BASD BASD Please report bugs here (by only) Please report bugs here (by only) Switch to English version Switch to English version hyperlinks.html
39 Table of Contents Table of Contents Introduction Introduction Some background Some background Project History Project History...the rest of the table of contents... Introduction Introduction... Section 1 follows here... Some background Some background... Section 2 follows here... Project History Project History... Section 2.1 follows here... links-to-same-document.html
Вставка изображения с помощью тега : Вставка изображения с помощью тега : Атрибуты тега : Атрибуты тега : Пример: Пример:src Путь к изображению. (относит. или абсол.) alt Альтернативный текст для изображения height Высота изображения. width Ширина изображения. border Толщина рамки вокруг изображения. 40
: рисует горизонтальную линию : рисует горизонтальную линию : выравнивает содержимое контейнера по центру (Устаревший!) : выравнивает содержимое контейнера по центру (Устаревший!) : управление шрифтом (Устаревший!) : управление шрифтом (Устаревший!) 41 Hello World! Hello World! Font3 Font3 Font+4 Font+4
42 <html> Miscellaneous Tags Example Miscellaneous Tags Example Hello World! Hello World! Font3 Font3 Font+4 Font+4 </html> misc.html
a.Apple b.Orange c.Grapefruit Создание упорядоченного списка : Создание упорядоченного списка : Значения атрибутов для type : 1, A, a, I, i Значения атрибутов для type : 1, A, a, I, i Apple 2. Orange 3. Grapefruit A.Apple B.Orange C.Grapefruit I.Apple II.Orange III.Grapefruit i.Apple ii.Orange iii.Grapefruit Apple Apple Orange Orange Grapefruit Grapefruit </ol>
Создание неупорядоченного списка : Создание неупорядоченного списка : Значения атрибутов для type : Значения атрибутов для type : disc, circle или square disc, circle или square 44 Apple Orange Pear o Apple o Orange o Pear Apple Orange Pear Apple Apple Orange Orange Grapefruit Grapefruit </ul>
Создание списков определений Создание списков определений Тег создает термин, а тег задает определение этого термина Тег создает термин, а тег задает определение этого термина 45 <dl><dt>HTML</dt> A markup language … A markup language … <dt>CSS</dt> Language used to … Language used to … </dl>
46 Apple Apple Orange Orange Grapefruit Grapefruit </ol> Apple Apple Orange Orange Grapefruit Grapefruit </ul><dl> HTML HTML A markup lang… A markup lang… </dl> lists.html
££ Фунт стерлингов €Евро "" Двойная кавычка ¥¥ Иена или юань — Длинное тире Неразрывный пробел &&Амперсанд >> Знак «больше» << Знак «меньше» ™ Знак торговой марки ®® Знак зарегистр. торговой марки ©© Знак copyright Символ Сущность Имя символа 47
48 <p>[>> Welcome <<] <<] ►I have following cards: ►I have following cards: A♣, K♦ and 9♥. A♣, K♦ and 9♥. ►I prefer hard rock ♫ ►I prefer hard rock ♫ music ♫ music ♫ © 2006 by Svetlin Nakov & his team © 2006 by Svetlin Nakov & his team Telerik Academy Telerik Academy special-chars.html
Элементы блока добавляют разрыв строки до и после Элементы блока добавляют разрыв строки до и после это блочный элемент это блочный элемент Другие элементы блока,, заголовки, списки, и т. д. Другие элементы блока,, заголовки, списки, и т. д. Строчные элементы не разбивают текст до и после него Строчные элементы не разбивают текст до и после него это строчный элемент это строчный элемент Большинство HTML-элементов являются строчными, например, Большинство HTML-элементов являются строчными, например, 50
Тег создает логические разделы Тег создает логические разделы Используется в свя- зке с CSS, для зада- ния стилей Используется в свя- зке с CSS, для зада- ния стилей Пример: Пример: 51 DIV example DIV example This one is only a test. This one is only a test. div-and-span.html
Встроенный элемент стиля Встроенный элемент стиля Используется для изменения определенной части текста Используется для изменения определенной части текста Не создает области разрыва (абзац) в документе Не создает области разрыва (абзац) в документе Очень эффективен с CSS Очень эффективен с CSS 52 This one is only a test. This one is only a test. This one is another TEST. This one is another TEST. span.html
Таблицы представляют табличные данные Таблицы представляют табличные данные Таблица состоит из одной или нескольких строк Таблица состоит из одной или нескольких строк Каждая строка имеет один или более столбцов Каждая строка имеет один или более столбцов Таблицы состоят из нескольких основ. тегов: : начало / конец таблицы : создание строки таблицы : создание табл. данных (ячейка) Таблицы состоят из нескольких основ. тегов: : начало / конец таблицы : создание строки таблицы : создание табл. данных (ячейка) Таблицы не должны использоваться для разметки. Для этого нужно использовать стили и позиционирование CSS Таблицы не должны использоваться для разметки. Для этого нужно использовать стили и позиционирование CSS 54
Начало и конец таблицы Начало и конец таблицы Начало и конец строки Начало и конец строки Начало и конец ячейки в строке Начало и конец ячейки в строке
56 Lecture 1 Lecture 1 Lecture 2 Lecture 2 Lecture 2 - Demos Lecture 2 - Demos </table>
Строки таблицы делятся на три смысловые части: header, body и footer Строки таблицы делятся на три смысловые части: header, body и footer обозначает заголовок таблицы и содержит тег, вместо обозначает заголовок таблицы и содержит тег, вместо предназначен для хранения одной или нескольких строк таблицы предназначен для хранения одной или нескольких строк таблицы обозначает нижний колонтитул, но находится перед тега обозначает нижний колонтитул, но находится перед тега и определяет столбцы (предназначены для задания ширины и стиля ) и определяет столбцы (предназначены для задания ширины и стиля ) 57
58 <table><colgroup> </colgroup><thead> Column 1 Column 2 Column 1 Column 2 </thead><tfoot> Footer 1 Footer 2 Footer 1 Footer 2 </tfoot><tbody> Cell 1.1 Cell 1.2 Cell 1.1 Cell 1.2 Cell 2.1 Cell 2.2 Cell 2.1 Cell 2.2 </tbody></table> Заголовок Нижний колонтитул Последний body (данные) th Столбцы
<table><colgroup> </colgroup><thead> Column 1 Column 2 Column 1 Column 2 </thead><tfoot> Footer 1 Footer 2 Footer 1 Footer 2 </tfoot><tbody> Cell 1.1 Cell 1.2 Cell 1.1 Cell 1.2 Cell 2.1 Cell 2.2 Cell 2.1 Cell 2.2 </tbody></table> 59 table-full.html Хотя нижний колонтитул перед данными в коде, он отображается как последний По умолчанию текст заголовка отображается полужирным шрифтом и по центру
Данные таблицы ячейки ( ) могут содер- жать вложенные таблицы (таблицы в таблицах): Данные таблицы ячейки ( ) могут содер- жать вложенные таблицы (таблицы в таблицах): 60 <table> Contact: Contact: First Name First Name Last Name Last Name </table> nested-tables.html
cellpadding cellpadding Определяет пустое пространство вокруг содержимого ячейки Определяет пустое пространство вокруг содержимого ячейки cellspacing cellspacing Определяет пустое пространство между ячейками Определяет пустое пространство между ячейками Таблицы имеют два важных атрибута: Таблицы имеют два важных атрибута: 61 cellcell cellcell cell cell cell cell
62 <html> Table Cells Table Cells First First Second Second First Second First Second </html> table-cells.html
rowspan rowspan Объединяет вертикальные ячейки Объединяет вертикальные ячейки colspan colspan Объединяет горизонтальные ячейки Объединяет горизонтальные ячейки Ячейки таблицы имеют два важных свойства: Ячейки таблицы имеют два важных свойства: 63 cell[1,1]cell[1,2] cell[2,1] colspan="1"colspan="1" colspan="2" cell[1,1]cell[1,2] cell[2,1] rowspan="2"rowspan="1" rowspan="1"
64 Cell[1,1] Cell[1,1] Cell[2,1] Cell[2,1] Cell[1,2] Cell[1,2] Cell[2,2] Cell[2,2] Cell[3,2] Cell[3,2] Cell[1,3] Cell[1,3] Cell[2,3] Cell[2,3] </table> table-colspan-rowspan.html Cell[2,3]Cell[1,3] Cell[3,2] Cell[2,2] Cell[1,2] Cell[2,1]Cell[1,1]
Ввод данных пользователя на веб-странице
Формы являются основным методом сбора данных от посетителей сайта Формы являются основным методом сбора данных от посетителей сайта Создается блок формы с помощью: Создается блок формы с помощью: Пример: Пример: 66 <form></form>......</form> Атрибут "action" указывает, на адрес документа-обработчика формы Атрибут method" рассказывает, как данные формы должны быть отправлены – через Get или Post запрос
Однострочные текстовые поля ввода: Однострочные текстовые поля ввода: Многострочные текстовые поля textarea: Многострочные текстовые поля textarea: Скрытые поля содержат данные не видные пользователю: Скрытые поля содержат данные не видные пользователю: Часто используется код JavaScript Часто используется код JavaScript 67 This is a multi-line text field This is a multi-line text field
Fieldsets предназначен для группирования элементов формы: Fieldsets предназначен для группирования элементов формы: Тег применяется для создания заголовка группы элементов формы. Тег применяется для создания заголовка группы элементов формы. 68 Client Details Client Details Order Details Order Details </form>
Флажки: Флажки: Переключатели: Переключатели: Переключатели могут быть сгруппированы, что позволяет выбрать только один из группы: Переключатели могут быть сгруппированы, что позволяет выбрать только один из группы: 69
Выпадающее меню: Выпадающее меню: Кнопка "Отправить": Кнопка "Отправить": 70 <option value="Value 1" <option value="Value 1" selected="selected">Male selected="selected">Male Female Female Other Other </select>
Кнопка Reset – возвращает форму в исходное состояние Кнопка Reset – возвращает форму в исходное состояние Поле с изображением. При нажатии на рисунок данные формы отправляются на сервер. Поле с изображением. При нажатии на рисунок данные формы отправляются на сервер. Обычная кнопка – используется для JavaScript, никаких действий по умолчанию Обычная кнопка – используется для JavaScript, никаких действий по умолчанию 71
Ввод пароля – текстовое поле, которое маскирует введенный текст звездочками **** Ввод пароля – текстовое поле, которое маскирует введенный текст звездочками **** Поле множественного выбора – отображает список элементов в несколько строк, вместо одной Поле множественного выбора – отображает список элементов в несколько строк, вместо одной 72 <option value="Value 1" <option value="Value 1" selected="selected">keyboard selected="selected">keyboard mouse mouse speakers speakers </select>
Загрузка файла – поле для загрузки файлов Загрузка файла – поле для загрузки файлов При использовании, от элемента формы требуется определенный атрибут: При использовании, от элемента формы требуется определенный атрибут: </form>
Label используется, чтобы связать пояснительный текст в поле формы, используя идентификатор поля (id). Label используется, чтобы связать пояснительный текст в поле формы, используя идентификатор поля (id). При нажатии на текст помеченный label, курсор фиксируется на элементе формы, с заданным id. При нажатии на текст помеченный label, курсор фиксируется на элементе формы, с заданным id. 74 First Name First Name
75 Academic information Academic information Degree Degree Bachelor of Art Bachelor of Art Bachelor of Science Bachelor of Science Master of Master of Business Administration Business Administration Student ID Student ID Personal Details Personal Details First Name First Name Last Name Last Name form.html
76 Gender: Gender: Male Male Female Female <textarea name="terms" cols="30" rows="4" <textarea name="terms" cols="30" rows="4" readonly="readonly">TERMS AND CONDITIONS... readonly="readonly">TERMS AND CONDITIONS... </form> form.html (continued)
77
Определяет порядок перехода между элементами с помощью клавиши Tab Определяет порядок перехода между элементами с помощью клавиши Tab tabindex="0" (ноль) - «естественный« порядок tabindex="0" (ноль) - «естественный« порядок Если X > Y, то выполняется условие tabindex="X", а иначе tabindex="Y" Если X > Y, то выполняется условие tabindex="X", а иначе tabindex="Y" Элементы с отрицательным значением свойства tabindex пропускаются, однако, это не определено в стандарте Элементы с отрицательным значением свойства tabindex пропускаются, однако, это не определено в стандарте 78
, и, и
Frames обеспечивают возможность показать несколько документов HTML на одной веб- странице Frames обеспечивают возможность показать несколько документов HTML на одной веб- странице Страница может быть разделена на отдельные виды (frames) по горизонтали и вертикали Страница может быть разделена на отдельные виды (frames) по горизонтали и вертикали Фреймы были популярны в ранние периоды развития HTML, но теперь их использование нерационально (Устаревший!) Фреймы были популярны в ранние периоды развития HTML, но теперь их использование нерационально (Устаревший!) Фреймы не поддерживаются поисковиками Фреймы не поддерживаются поисковиками Содержимое тега отображается в браузере, когда он не поддерживает фреймы. Содержимое тега отображается в браузере, когда он не поддерживает фреймы. 80
81 <html> Frames Example Frames Example </html> frames.html Обратите внимание на атрибут target применяется для элементов. В нем указывается имя окна или фрейма, куда браузер будет загружать документ. Обратите внимание на атрибут target применяется для элементов. В нем указывается имя окна или фрейма, куда браузер будет загружать документ.
Встроенные фреймы обеспечивают возможность показать один сайт внутри другого сайта: Встроенные фреймы обеспечивают возможность показать один сайт внутри другого сайта: 82 iframe-demo.html
1. Какой тег нужно добавить для переноса строки, сохранив при этом валидность XHTML 1.1? 1. Какой тег нужно добавить для переноса строки, сохранив при этом валидность XHTML 1.1? 2. Насте требуется выровнять содержимое ячейки по центру, при этом сохранить валидность по XHTML 1.1. Она предложила такой вариант: Содержимое. Выберите верное утверждение: 2. Насте требуется выровнять содержимое ячейки по центру, при этом сохранить валидность по XHTML 1.1. Она предложила такой вариант: Содержимое. Выберите верное утверждение: 84 Этот вариант рабочий, но невалидный. Этот вариант нерабочий, но валидный. Этот вариант рабочий и валидный. Этот вариант нерабочий и невалидный.
3. Николаю захотелось добавить несколько подряд идущих пробелов в тексте. Он добавил их внутри тега. Однако, они вырезались. Какой тег надо использовать Николаю, чтобы пробелы не вырезались? 3. Николаю захотелось добавить несколько подряд идущих пробелов в тексте. Он добавил их внутри тега. Однако, они вырезались. Какой тег надо использовать Николаю, чтобы пробелы не вырезались? 4. Какой тег является дочерним для : 4. Какой тег является дочерним для : 85 Никакой.
5. Какой из представленных вариантов является валидным по XHTML 1.1? 5. Какой из представленных вариантов является валидным по XHTML 1.1? 6. Какой тег существует: 6. Какой тег существует: 86
7. Размер окна браузера 1000 пикселей. На страницу добавили блок с шириной 40%. Затем в этот блок добавили таблицу с шириной 50%. Какова будет ширина таблица в пикселях? 7. Размер окна браузера 1000 пикселей. На страницу добавили блок с шириной 40%. Затем в этот блок добавили таблицу с шириной 50%. Какова будет ширина таблица в пикселях? 8. Как правильно задать ссылку на адрес электронной почты: 8. Как правильно задать ссылку на адрес электронной почты: пикселей.200 пикселей. Недостаточно данных.500 пикселей. Написать
9. Петру надо сделать нумерованный список, какой из тегов ему надо использовать: 9. Петру надо сделать нумерованный список, какой из тегов ему надо использовать: 10. Зоя попыталась вставить изображение на сайт следующим образом: Оно у неё появилось, но при попытке проверить валидность на стандарт XHTML 1.1 у неё появилась ошибка. В чём она заключается? 10. Зоя попыталась вставить изображение на сайт следующим образом: Оно у неё появилось, но при попытке проверить валидность на стандарт XHTML 1.1 у неё появилась ошибка. В чём она заключается? 88 Атрибуты нужно заключать в двойные кавычки, а не в одинарные. Неправильно закрыт тег. Вместо /> надо писать >. Атрибута title у тега не существует. Не хватает атрибута alt у тега.
11. Какого тега НЕ существует:11. Какого тега НЕ существует: 12. Игорю нужно сделать ширину таблицы на всю страницу (либо родительского контейнера). Как ему нужно написать тег ? 12. Игорю нужно сделать ширину таблицы на всю страницу (либо родительского контейнера). Как ему нужно написать тег ? 89
13. На сайте внутри папки pages находится файл page.html. А внутри папки images находится файл foto.jpg. Причём папки images и pages лежат в корне сайта. Как правильно написать путь к foto.jpg из файла page.html:13. На сайте внутри папки pages находится файл page.html. А внутри папки images находится файл foto.jpg. Причём папки images и pages лежат в корне сайта. Как правильно написать путь к foto.jpg из файла page.html: 14. Какой из вариантов содержит ошибку: 14. Какой из вариантов содержит ошибку: 90 images/foto.jpgpages/images/foto.jpg../images/foto.jpg../images/pages/foto.jpg Ссылка
15. Василию требуется вывести на страницу код, который он написал на языке Java. Какой тег для этого ему необходимо использовать?15. Василию требуется вывести на страницу код, который он написал на языке Java. Какой тег для этого ему необходимо использовать? 16. Каких атрибутов не бывает? 16. Каких атрибутов не бывает? 91 alt, width, heightins, meta, kr href, title, styleplaceholder, name, id
17. Сколько всего уровней заголовков ?17. Сколько всего уровней заголовков ? 18. HTML расшифровывается как: 18. HTML расшифровывается как: 92 от -10 до 10 от 1 до 10 от 1 до 6 от 0 до 6 Hyper Markup LangHigh Too My Link HyperText Markup Language Hyperpyper Trob Meas Lock
Вопросы?