Добавлен: 25.06.2023
Просмотров: 86
Скачиваний: 3
СОДЕРЖАНИЕ
1.1 Понятие о языке гипертекстовой разметки HTML
1.2 Структура файла в формате HTML
2. Основные элементы HTML- документа и разметка контента
2.2 Встроенные и блочные элементы
3. Создание документов в стандарте HTML
3.1 Инструментарий для создания HTML – страниц
Элементы более низкого уровня - уровня текста - по умолчанию выводятся друг за другом в текущей строке. Они могут встраиваться в элементы уровня блока и включать иные встроенные элементы.
Пример 3. Блочная структура Web-страницы |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html PUBLIC"-//W3C//DTD HTML 4.0 Transit! onal//EN"> <html> <head> <TITLE>Заголовки,блоки,абзацы</TITLE> </hЕАd> <ВОdy leftmargin="100" bgcolor="#ffffff"> <Н1 align="center"> <Р>Часть первая <Р>Старгородский лев </h1> <Н2> <р>Глава 1<Р>Безенчук и "Нимфы" </Н2> <div style="background:#ffddff; color:#006600; margin-left:-40px"> <Р>В уездном городе N было так много парикмахерских заведений и бюро похоронных процессий, что казалось, жители города рождаются лишь затем, чтобы побриться, остричься, освежить голову вежеталем и сразу же умереть. А на самом деле в уездном городе N люди рождались, брились и умирали довольно редко. Жизнь города N была тишайшей.</р> </div> <р>Вопросы любви и смерти не волновали Ипполита Матвеевича Воробьянинова, хотя этими вопросами по роду своей службы он ведал с девяти утра до пяти вечера ежедневно с получасовым перерывом для завтрака.</р> </ВОdy> </hТml> |
Делая обзор данной Web-страницы, есть возможность заметить следующее.
Строки 7-10: заголовок первого уровня.
Строки 11-13: заголовок второго уровня, выполненный по умолчанию более мелким шрифтом.
Строки 14-16: блок <div>. Для наглядности он выделяется другим цветом текста и фоном, а кроме того смещен на сорок пикселей влево от линии других элементов.
Строка 17. Обычный абзац, который создан с помощью элемента <р>.
Все указанные элементы включены в элемент <body>. В терминологии программистов упоминается, что данный элемент является родительским, для вложенных элементов-потомков <h1>, <h2>, <div>, <р>. Элементы-потомки наследуют некоторые свойства элемента-родителя. К примеру, <h1>, <h2>, <p> наследуют от <body> значение левой границы. Элемент <div> выпадает из данного списка, так как для него явно указано левое поле.
Рисунок 1 – Блочная структура страницы
А вот элемент <р>, каковой включен в <div>, наследует от него смещенную левую границу (рисунок 1).
2.3 Списки
Для организации списков используются специальные элементы. Можно создавать нумерованные, маркированные списки и списки определений [16, 19].
Нумерованные списки могут размещаться в контейнере <ol>...</ol>, маркированные - в <ul>...</ul>. Всякий дальнейший элемент списка вкладывается в отдельный контейнер <li>. Закрывающий тег предполагается, однако может быть опущен, так как однозначно восстанавливается по присутствию следующего элемента или по концу списка [7].
Списки различных видов могут вкладываться друг в друга (рисунок 2), что может продемонстрировать такой пример 4.
Пример 4. Организация списков |
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <ТITLE>Списки</TITLE> </head> <ВОdy> Сотни тысяч людей, богато обеспеченных людей, будут стремиться в Васюки. <UL> <LI>Следовательно, НКПС построит железнодорожную магистраль. Это-раз. <LI>Два - это гостиницы и небоскребы для размещения гостей. <LI>Три - поднятие сельского хозяйства в радиусе на тысяч километров.. <ОL> <LI value="4">Дворец, в котором будет происходить турнир, четыре. <LI>Пять - постройка гаражей для гостевого автотранспорта. </ОL> <LI>Для передачи всему миру сенсационных результатов турнира придется построить сверхмощную радиостанцию. Это – в шестых. </UL> </ВОdy> </НТml> |
Рисунок 2 – Пример реализации списков
Отдельный тип списков составляют непосредственно списки-определения, каковые организуют текст наподобие толкового словаря. В них задается слово-определение и создается его описание. Собственно, слово выравнивается по левому краю. Описание выводится с отступом вправо. Весь список может быть вложен в контейнер <dl>...</dl>, который определяет структуру списка и может включать в содержание лишь элементы <dt> (определение) и <dd> (описание) [8]. Формально элементы <dt> и <dd> являются контейнерами, однако соответствующие закрывающие теги зачастую не отмечаются.
2.4 Разметка текста
В практической деятельности все еще часто встречаются элементы физического форматирования текста, определяющие гарнитуру шрифта и его начертание. К примеру, контейнер <i> …</i> выведет заключенный в него текст курсивом.
Большая часть из таких тегов не рекомендуется использовать, а для физического форматирования текста рекомендуется применять таблицы стилей. В примере 5 показаны примеры применения физического форматирования текста, а на рисунке 3 продемонстрировано, как эта Web-страница может выглядеть на экране браузеров.
Пример 5. Физическое форматирование |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HЕАD> <TITLE>Физическое форматирование текста</TITLE> </HEAD> <bОdy bgcolor="white"> <Н1>Физическое форматирование текста</H1> <В>Bold</B><BR> <I>Italic</I><BR> <ТТ>Teletype (Monospaced) </TТ><BR> <U>Underlined</U><BR> Subscripts: f<SUВ>0</SUB> + f <SUB>1</SUВ><ВR> Superscripts: x<SUР>2</SUP> + y<SUP>2</SUР><BR> <SMALL>Smaller</SМАLL><BR> <BIG>Bigger</BIG><ВR> <STRIKE>Strike Through</STRIKE><BR> <B><I>Bold Italic</I></B><BR> <ВIG><TT>Big Monospaced</TT></BIG><BR> <SMАLL><I>Small Italic</I></SMALL><BR> <FОNT COLOR="GRAY">Gray</FONT><BR> <DЕL>Delete</DEL><BR> <INS>Insert</INS><ВR> </ВОDY> </HTML> |
Рисунок 3 – Отображение браузером элементов физического форматирования
В примере 6 показаны примеры логического форматирования. Итоги отображения указанных выражений в окне браузера продемонстрировано на рисунке 4.
Пример 6. Логическое форматирование |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <ТITLE>Логическое форматирование текста</TITLE> </HEAD> <BODY ВGCDLOR="WНITE"> <H1>Логическое форматирование текста</H1> <ЕМ>Emphasized</EM><BR> <STRОNG>Strongly Emphasized</STRONG><BR> <СОDE>Code</CODE><BR> <SАMP>Sample Output</SAMP><BR> <KВD>Keyboard Text</KBD><BR> <DFN>Definition</DFN><BR> <VАR>Variable</VAR><BR> <CITE>Citation</CITE><ВR> <EMXCODE>Emphasized Code</CОDE></EM><BR> <FONT COLOR="GRAY"><СITE>Gray Citation</CITE></FONT><BR> <ACRONYМ TITLE="Java Development Kit">JDK Acronym</ACRONYM> </BODY> </HTML> |
Рисунок 4 – Отображение браузером элементов логического форматирования
Вместо явного указания шрифта для отображения данных, большинство авторов задает тип текста и предоставляют браузеру свободу выбора определенного представления данного текста. Для установления вида текста применяется логическое форматирование. К примеру, применяя контейнер <еm> … </еm>, можно указывать, что заключенный там текст должен быть выделен (по умолчанию курсивом) [17]. Но, если каскадные таблицы стилей не применяются, автор в определенной степени утрачивает контроль над внешним видом документа.
2.5 Таблицы
HTML-таблицы применяются не только классическим способом (другими словами для представления данных в виде двухмерной таблицы), но и для управления компоновкой и группировкой элементов. Таблицы могут содержать изображения, фрагменты текста, включая списки, и даже другие таблицы. Авторы Web-страницы имеют возможность запретить отображение рамки вокруг таблицы и границ между ячейками, в итоге содержимое таблицы выглядит как выровненные фрагменты данных [18].
Таблица является довольно сложной структурой, формируемой совокупностью элементов. Основных элементов, из каковых может быть организована минимальная таблица – 3. Это <TABLE> - который ограничивает всю таблицу (может включать необязательный элемент CAPTION, который задает имя таблицы), <TR> - который выделяет строку (вкладывается в <TABLE>), <TD> - который выделяет отдельные ячейки в строке (вкладывается в <TR>). Данные (текст, остальные таблицы, картинки, гиперссылки, формы и другое) находятся в контейнерах <TD>…</TD>. В содержание всякой строки таблицы могут входить элементы <TH>, содержащие заголовок таблицы. В составе элемента <TH> информация по умолчанию показывается полужирным шрифтом и может выравниваться по центру. Данные в элементе <TD> показываются обычным шрифтом и выравниваются по левому краю. Пример простой таблицы показан в примере 7. На рисунке 5 продемонстрирован внешний вид данной таблицы на экране браузера. Закрывающие теги </TR>, < /ТН> и </TD> необязательны, но способствуют прослеживанию структуры таблицы.
Пример 7. Простая таблица |
<TАВLE BORDER=1> <CАРTION>Название таблицы</CAPTION> <ТR><TН>Заголовок1</TH> <TH>Заголовок2</ТН></TR> <TR><TD>Строка1 Столбец1</TD><TD>Строка1 Столбец2</TD></TR> <TR><ТD>Строка2 Столбец1</TD><TD>Строка2 Столбец2</TD></TR> <TR><TD>Строка3 Столбец1</ТD><TD>Строка3 Столбец2</ТD></TR> </TABLE> |
Рисунок 5 – Простая HTML-таблица
Если в открывающем теге <TABLE> не отмечены атрибуты, по умолчанию формируется таблица без рамок, выровненная по левому краю. Добавочные возможности по управлению внешней структурой таблицы предоставляют особые атрибуты [6]. Простой пример применения атрибута FRAME показан в примере 8. На рисунке 6 продемонстрировано, как этот пример может выглядеть на экране браузера.
Пример 8. Таблица с отключенным внешним обрамлением |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TIТLE>2000 World Championship</TITLE> </HEAD> <BODY> <Н2 АLIGN="CENTER">2000 World Championship</Н2> Final result in the 2000 world tic-tac-toe championship. Deep Green is "X", Garry Kasparov is "0". <TABLE ALIGN="СЕNTER" BОRDER=1 FRAME="VOID"> <TR><TH>X<ТН>0<TH>X <TR><TH>X<TH>0<TH>X <ТR><ТН>0<TH>X<ТH>0 </TАВLE> </BОDY> </HTML> |
Рисунок 6 – Таблица с отключенным внешним обрамлением
В примере 9 показана таблица, для каковой в заголовках столбцов текст показывается белым цветом на черном фоне, а в других ячейках выводится черный текст на светло-сером фоне. Внешний вид таблицы продемонстрирован на рисунке 7.
Пример 9. Задание цвета фона и текста таблицы |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TIТLE>WWW Standards</TITLE> </HEAD> <ВОDY BGCOLOR="WHITE"> <Н1 ALIGN="CENTER">WWW Standards</Hl> <TАВLE BОRDER=1 BGСОLOR="#EEEEEE"> <TR BGCOLOR="BLACK"> <ТН><FОNT СОLOR="WHITE">Standard</FONT> <TH><FONT COLOR="WHITE">Obsolete Version</FONТ> <TH><FONT COLOR="WНIТE">Most Widely Supported Version</FONT> <TH><FONT COLOR="WНITE">Upcoming Version</FОNT> <ТR> <ТD>НТML <TD>3.2 <TD>4.0 <ТD>XHTML <TR> <TD>HTTP <ТD>1.0 <TD>1.1 <TD>1.2 </TАВLE> </BODY> </HTML> |
Рисунок 7 – Таблица с ячейками и текстом разных цветов
Если будет потребность ячейки могут расширяться на несколько столбцов или строк. Примеры кода показаны в примерах 10 и 11, а внешний вид таблицы продемонстрирован на рисунке 8.
Пример 10. Ячейка заголовка, расширяющаяся на два столбца |
<TАВLE ВОRDER=1> <TR> <TH COLSPAN=2>Заголовок столбцов 1 и 2 <TН>Заголовок столбца 3 <TR> <TD>Столбец 1 <ТD>Столбец 2 <TD>Столбец 3 </TАВLE> |
Пример 11. Ячейка данных, расширяющаяся на две строки |
<ТАВLE BОRDER=1> <ТR> <TН>Заголовок 1<TH>Заголовок 2 <TR><ТD ROWSPAN=2>Данные строк 1 и 2 <TD>Строка 1 Столбец 2 <ТR><TD>Строка 2 Столбец 2 </TАВLE> |
(а)
Рисунок 8 – Расширение ячейки на несколько столбцов (а),
расширение ячейки на несколько строк (б)
(б)
2.6 Гипертекстовые ссылки
Многие создатели Web-страниц не ставят перед собой задачу последовательно представлять материал в одном документе. Вместо этого они предоставляют на собственных страницах ссылки на иные документы и разделы того же документа, представляя посетителям возможность переходить по ссылкам и показывать информацию, которая их больше всего интересует. Элемент <A> дает возможность автору расположить фрагменты текста либо изображения так, чтобы при активизации их пользователем браузер отображал в своем окне нужный раздел иного документа [6]. Элемент <A> также дает возможность назвать позицию и документе, чтобы на нее могли указывать гипертекстовые ссылки.