Создание WEB-страниц c помощью языка HTML
Основные элементы HTML-документов: заголовок, список, таблица, графические изображения, гиперссылка, форма и фрейм. Три вида документов версии HTML 4.01: Strict, Transitional и Frameset. Структура элементарного WEB-документа. Сущность раздела HEAD.
| Рубрика | Программирование, компьютеры и кибернетика |
| Вид | контрольная работа |
| Язык | русский |
| Дата добавления | 16.07.2017 |
| Размер файла | 674,8 K |
Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже
Студенты, аспиранты, молодые ученые, использующие базу знаний в своей учебе и работе, будут вам очень благодарны.
Размещено на http://www.allbest.ru/
Размещено на http://www.allbest.ru/
Задание №1
Создание WEB-страниц c помощью языка HTML
Цель работы: научиться создавать HTML-документы с использованием основных элементов (заголовков, списков, таблиц, графических изображений, гиперссылок, форм и фреймов).
1 Структура HTML-документа
Все элементы языка образуют определенную иерархию. Есть более важные, а есть те, без которых можно обойтись; одни могут вкладываться в другие, обратная ситуация не всегда возможна; есть работающие самостоятельно, а есть такие, которые работают только в паре.
1.1 Информация о версии языка. Элемент <!doctype>
Если рассмотреть любой HTML-документ, то определенные элементы в нем всегда можно найти.
Правила хорошего тона советуют в первом элементе разместить информацию о версии языка, которую вы используете, чтобы браузер, отображающий Web-страницу, мог учесть особенности или ограничения этой версии.
Рассматриваемый элемент имеет только открывающий тег <!doctype>, который начинается восклицательным знаком. В данном теге заключена информация о типе документа.
В версии HTML 4.01 есть ссылки на три вида документов.
1. HTML 4.01 Strict - наиболее «правильная» версия, не поддерживающая отмененные элементы для форматирования текста. Элемент обычно имеет вид
<!doctype html public "-//W3C//DTD HTML4.01//EN" "http://www.w3.org/TR/ html4/ strict.dtd">
С указанного адреса браузер (в случае, необходимости) может загрузить описание элементов данной версии языка. Часть, касающаяся адреса, может быть опущена. Аббревиатура DTD (Document Type Definition) означает «определение типа документа». Эта версия языка не поддерживает подокна-фреймы, речь о которых пойдет позже.
2. HTML 4.01 Transitional - переходная версия языка, наиболее популярная в настоящее время. Подразумевается, что предыдущие требования к синтаксису смягчаются и поддерживаются страницы, написанные до появления стандарта HTML 4.0. Допустимы отмененные в современном языке элементы, например, <font>. В этом случае <!doctype> имеет вид
<!doctype html public"-//W3C//DTD HTML 4.01 Transitional//EN">
Как и в предыдущем примере, может быть использован адрес документа: http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd
3. HTML 4.01 Frameset -- используется в том случае, если ваш документ включает фреймы. Записывается
<!doctype html pubiic"-//W3C//DTD HTML 4.01 Frameset//EN">
Адрес документа: http://www.w3.org/TR/1999/REC-html40l-19991224/ frameset.dtd
1.2 Элемент <html>
Этот элемент служит признаком того, что перед нами Web-страница, или HTML-документ.
Правило записи (синтаксис): элемент является контейнером. Открывающий тег - <html>, закрывающий - </html>. Оба тега могут отсутствовать. Однако их использование является правилом хорошего тона. Все остальные элементы, кроме <!doctype>, помещаются внутрь контейнера <html>...</html> и служат его контентом.
Из содержимого контейнера наибольшее значение имеют два элемента, располагаемые друг за другом - <head> (голова) и <body> (тело), то есть заголовочная и основная части. Документ может содержать один раздел <head> и один <body>. Заголовочная часть не отображается браузером и несет служебную информацию. В <body> располагается основное содержание Web-страницы.
|
Пример 1.1. Структура элементарного WEB-документа |
|
|
<!doctype html public"-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Title</title> </head> <body> Hello, world! </body> </html> |
html гиперссылка фрейм
1.3 Элемент <HEAD> - высокоуровневая информация о Web-странице
Раздел HEAD -- первый раздел HTML-документа. Он располагается после декларации DOCTYPE и открывающего тега <HTML>, перед разделом BODY. В составе HEAD должен присутствовать элемент TITLE, который часто является единственным элементом данного раздела. Элемент TITLE обязателен в составе документа HTML 4.0 и содержит текст заголовка. Содержимое элемента TITLE представляется в заголовке окна браузера.
Элементы МЕТА позволяют записывать информацию о документе, перенаправлять и обновлять Web-страницы, а также включать звуковые файлы. Как привило, данные в теге МЕТА задаются в виде пар NAME-CONTENT, где NAME представляет имя свойства, a CONTENT-- его значение. Обычно с именем связываются такие записи, как author (автор документа), description (краткое описание), keywords (ключевые слова, разделенные запятыми, предназначенные для использования поисковыми серверами) и generator (программа, с помощью которой документ был сгенерирован).
|
Пример 1.2. Раздел HEAD, содержащий тег МЕТА |
|
|
<HEAD> <ТITLE>Why You Should Buy Windows 2000</TITLE> <META NAME="author" CONTENT="Bill Gates"> <MEТA NAME="keywords" CONTENT="Windows,Advocacy,OS,Operating Systems"> <MЕTA NAME="description" CONTENT="A summary of the advantages of Windows 2000."> </HEAD> . . . |
Атрибут HTTP-EQUIV позволяет обновлять страницы, используя значение Refresh. Предположим, что электронная версия газеты содержит заголовки, которые время от времени изменяются. Чтобы отобразить эти изменения, страница должна обновляться каждые 30 минут (1800 секунд). В примере 1.3 показано, как может быть использован дескриптор МЕТА для автоматического обновления документа на экране. Для этого задается выражение НТТР-EQUIV="Refresh", а в качестве значения атрибута CONTENT указывается время (1800 секунд), по истечении которого страница должна быть перезагружена.
|
Пример 1.3. Web-страница автоматически перезагружается каждые 30 минут |
|
|
<HЕАD> <ТITLЕ>Why You Should Buy Windows 2000</TITLE> <МЕТА HTTР-EQUIV="Rеfresh" CONТЕNT="1800"> </HЕАD> . . . |
Вместо перезагрузки страницы автор может предоставить пользователю документ, расположенный по другому URL (пример 1.4). Такой подход применяется тогда, когда URL документа изменился и автор собирается автоматически перенаправить пользователя к новому URL. Новая страница автоматически отобразится на экране браузера по истечении 5 секунд. Чтобы это произошло, надо задать значение атрибута HTTP-EQUIV, равное Refresh, и указать новый URL документа.
|
Пример 1.4. Перенаправление по новому адресу |
|
|
<HEAD> <ТIТLE>Why You Should Buy Windows 2000 (New Address)</TITLE> <MЕТА HTTP-EQUIV="Refresh" СОNTЕNT="5; URL=http://www.apple.com/Buy-Win2000.html"> </HEАD> . . . |
2 Структурирование и разметка контента
Большое количество элементов HTML предназначено для организации контента и прежде всего текста, который обычно составляет подавляющую часть содержимого Web-страниц.
Структурирование контента подразумевает его разбивку на логические блоки. Первым среди таких блоков, как правило, следует заголовок.
2.1 Заголовки
Элементы Н1-Н6 предназначены для определения заголовков различных уровней в составе документа. H1 задает заголовок первого, или верхнего, уровня, Н2 -- заголовок второго уровня, Н3 - третьего уровня и т. д. Как правило, раздел BODY начинается с заголовка первого уровня, содержащего тот же текст, что и элемент TITLE, находящийся в разделе HEAD. В остальной части документа заголовки второго уровня (Н2) используются для определения заголовков разделов, НЗ - для подразделов и т. д. В большинстве браузеров заголовки отображаются полужирным шрифтом: H1 - наибольшего размера, а Н6 - наименьшего. По умолчанию к заголовкам применяется выравнивание по левому краю, однако при необходимости они могут быть расположены по центру либо выровнены по правому краю документа. Тип выравнивания задается с помощью атрибута ALIGN, допустимыми значениями которого являются LEFT, RIGHT, CENTER и JUSTIFY. Если задано значение JUSTIFY, то заголовки, длина которых превышает ширину окна браузера, располагаются так, что их левая и правая границы совпадают с границами окна. Примеры заголовков различных уровней приведены в примере 2.1. Заголовок третьего уровня отображается с подчеркиванием. На рис. 2.1 показан внешний вид этого документа в окне браузера Internet Explorer 5.0.
|
Пример 2.1. Документ с заголовками разных уровней |
|
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTМL> <HEAD> <TIТLE>Уровни заголовков</TITLE> </HEAD> <ВODY> <Н1>Заголовок 1-го уровня (H1)</Н1> <Н2 ALIGN="СЕNTER"> Заголовок 2-го уровня (H2)</H2> <H3><U>Заголовок 3-го уровня (H3)</U></H3> <Н4 ALIGN="RIGНТ"> Заголовок 4-го уровня (H4)</H4> <Н6> Заголовок 6-го уровня (H6)</H6> </BОDY> </НТML> |
2.2 Встроенные и блочные элементы
Все элементы, отвечающие за представление контента, принято разделять на две большие группы: элементы уровня блока, или блочные (block) и встроенные, или элементы уровня текста (inline).
Первые отделяют в тексте и вообще в контенте большие блоки (например, заголовок, абзац, адрес автора публикации). Вторые выделяют фрагмент внутри строки (одно слово или фразу).
По умолчанию блоки начинаются с новой строки и отделяются от предыдущего и последующего блока строкой. Блоки могут быть вложены друг в друга. Блочные элементы могут содержать встроенные элементы.
Элементы более низкого уровня - уровня текста - по умолчанию выводятся друг за другом в текущей строке. Они могут встраиваться в элементы уровня блока и включать другие встроенные элементы.
|
Пример 2.2. Блочная структура 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>. Для наглядности он выделен другим цветом текста и фоном, а также смещен на 40 пикселей влево от линии других элементов.
Строка 17. Обычный абзац, созданный при помощи элемента <р>.
Все перечисленные элементы входят в элемент <body>. В терминах программирования говорят, что этот элемент является родительским, для вложенных элементов-потомков <h1>, <h2>, <div>, <р>. Элементы-потомки наследуют ряд свойств элемента-родителя. Например, <h1>, <h2>, <p> наследуют от <body> значение левой границы. Элемент <div> выпадает из этого списка, поскольку для него явно задано левое поле. А вот элемент <р>, который входит в <div>, наследует от него смещенную левую границу (рис. 2.2).
2.3 Списки
Особые элементы служат для организации списков. Возможно создание нумерованных, маркированных списков и списков определений.
Нумерованные списки помещаются в контейнер <ol>...</ol>, маркированные - в <ul>...</ul>. Каждый следующий элемент списка вкладывается в отдельный контейнер <li>. Закрывающий тег подразумевается, но может быть опущен, поскольку однозначно восстанавливается по наличию следующего элемента или по концу списка.
Списки разных типов могут вкладываться друг в друга (рис. 2.3), что демонстрирует следующий пример.
|
Пример 2.3. Организация списков |
|
|
<!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> |
Отдельный вид списков составляют списки-определения, которые организуют текст подобно толковому словарю. В них задается слово-определение и формируется его описание. Само слово выравнивается по левому краю. Описание выводится с отступом вправо. Весь список вкладывается в контейнер <dl>...</dl>, который определяет структуру списка и может содержать только элементы <dt> (определение) и <dd> (описание). Формально элементы <dt> и <dd> являются контейнерами, но соответствующие закрывающие теги часто не указываются.
2.4 Разметка текста
На практике все еще часто можно встретить элементы физического форматирования текста, задающие гарнитуру шрифта и его начертание. Например, контейнер <i> …</i> выведет заключенный в него текст курсивом.
Большинство подобных тегов не рекомендовано к использованию, а для физического форматирования текста рекомендуется использовать таблицы стилей.
В примере 2.4 представлены примеры использования физического форматирования текста, а на рис. 2.4 показано, как данная Web-страница выглядит на экране браузера.
|
Пример 2.4. Физическое форматирование |
|
|
<!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> |
Вместо того, чтобы явным образом указывать шрифт для отображения данных, многие авторы задают тип текста и предоставляют браузеру свободу выбора конкретного представления этого текста. Для определения типа текста используется логическое форматирование. Например, используя контейнер <еm> … </еm>, мы указываем, что заключенный в него текст должен быть выделен (по умолчанию курсивом). Однако если каскадные таблицы стилей не используются, автор в некоторой степени теряет контроль над внешним видом документа.
В примере 2.5 представлены примеры логического форматирования. Результаты отображения приведенных выражений в окне браузера показаны на рис. 2.5.
|
Пример 2.5. Логическое форматирование |
|
|
<!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> |
2.5 Таблицы
HTML-таблицы используются не только традиционным способом (т.е. для представления данных в виде двухмерной таблицы), они также применяются для управления расположением и группировки элементов. В состав таблиц могут входить изображения, фрагменты текста, включая списки, и даже другие таблицы. Автор Web-страницы имеет возможность запретить отображение обрамления вокруг таблицы и разграничительных линий между ячейками, в результате содержимое таблицы выглядит как выровненные фрагменты данных.
Таблица представляет собой достаточно сложную структуру, формируемую множеством элементов. Базовых элементов, из которых может быть составлена минимальная таблица - три. Это <TABLE> - ограничивающий всю таблицу (может содержать необязательный элемент CAPTION, задающий название таблицы), <TR> - выделяющий строку (вкладывается в <TABLE>), <TD> - выделяющий отдельные ячейки в строке (вкладывается в <TR>). Данные (текст, другие таблицы, изображения, гиперссылки, формы и др.) располагаются в контейнерах <TD>…</TD>. В состав каждой строки таблицы могут входить элементы <TH>, содержащие заголовок таблицы. В составе элемента <TH> информация по умолчанию отображается полужирным шрифтом и выравнивается по центру. Данные в элементе <TD> выводятся обычным шрифтом и выравниваются по левому краю. Пример простой таблицы представлен в примере 2.6. На рис. 2.6 показан внешний вид этой таблицы на экране браузера. Закрывающие теги </TR>, < /ТН> и </TD> необязательны, однако помогают проследить структуру таблицы.
|
Пример 2.6. Простая таблица |
|
|
<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> |
Если в открывающем теге <TABLE> не указаны атрибуты, по умолчанию создается таблица без обрамления, выровненная по левому краю. Дополнительные возможности по управлению внешним видом таблицы предоставляют специальные атрибуты.
Простой пример использования атрибута FRAME приведен в примере 2.7. На рис. 2.7 показано, как этот пример выглядит на экране браузера.
|
Пример 2.7. Таблица с отключенным внешним обрамлением |
|
|
<!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> |
В примере 2.8 приведена таблица, для которой в заголовках столбцов текст отображается белым цветом на черном фоне, а в остальных ячейках выводится черный текст на светло-сером фоне. Внешний вид таблицы показан на рис. 2.8.
|
Пример 2.8. Задание цвета фона и текста таблицы |
|
|
<!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> |
При необходимости ячейки могут расширяться на несколько столбцов либо строк. Примеры кода приведены в примерах 2.9 и 2.10, а внешний вид таблицы показан на рисунке 2.9.
|
Пример 2.9. Ячейка заголовка, расширяющаяся на два столбца |
|
|
<TАВLE ВОRDER=1> <TR> <TH COLSPAN=2>Заголовок столбцов 1 и 2 <TН>Заголовок столбца 3 <TR> <TD>Столбец 1 <ТD>Столбец 2 <TD>Столбец 3 </TАВLE> |
|
Пример 2.10. Ячейка данных, расширяющаяся на две строки |
|
|
<ТАВLE BОRDER=1> <ТR> <TН>Заголовок 1<TH>Заголовок 2 <TR><ТD ROWSPAN=2>Данные строк 1 и 2 <TD>Строка 1 Столбец 2 <ТR><TD>Строка 2 Столбец 2 </TАВLE> |
2.6 Гипертекстовые ссылки
Большинство авторов Web-страниц не ставят перед собой задачу последовательно изложить материал в одном документе. Вместо этого они снабжают свои страницы ссылками на другие документы и разделы того же документа, предоставляя читателям возможность переходить по ссылкам и отображать информацию, наиболее интересующую их. Элемент <A> позволяет автору оформлять фрагменты текста или изображения так, чтобы при активизации их пользователем браузер отобразил в своем окне требуемый раздел другого документа. Элемент <A> также предоставляет возможность именовать позицию и документе, чтобы на нее могли указывать гипертекстовые ссылки.
В примере 2.11 показаны четыре типа гипертекстовых ссылок: содержащую абсолютный URL, относительный URL, указывающую на позицию внутри текущего документа, а также на позицию в документе с заданным URL.
Помимо ссылок http:, большинство браузеров также поддерживают ссылки mailto: (для адресов электронной почты), file: (для локальной файловой системы на клиентской машине) и ftp: (для FTP-узлов).
|
Пример 2.11. Гипертекстовые ссылки |
|
|
The official HTML specifications are available from <А HRЕF="http://www.w3.оrg/MаrkUp/"> the World Wide Web Consortium (W3C)</A>, with some examples given in <A HRЕF="HTML-Examples.html">my example page</А>. The Java programming language is discussed in <A НREF="#Section-3">Section 3</A>. For a discussion of COBOL, see <А HREF="johndoe.html#COBOL">my friend's home page</А>. |
2.7 Изображения
Элемент IMG позволяет включать изображения в состав документа. Большинство браузеров может обрабатывать форматы GIF (Graphic Interchange Format), JPEG (Joint Photographic Expert Group) и PNG (Portable Network Graphic). Поскольку время загрузки изображения определяет время загрузки всей страницы, желательно представлять изображение в том формате, который обеспечивает минимальный размер файла.
Элемент IMG включает изображение в текущую позицию в документе. IMG представляет собой элемент текстового уровня и не приводит к созданию нового абзаца. IMG не является контейнером, поэтому закрывающий дескриптор не указывается. SRC - обязательный атрибут. Он определяет расположение файла, содержащего изображение, которое должно быть включено в документ. Атрибут ALT задает строку, которая выводится вместо изображения в браузерах, не поддерживающих графические файлы.
В примере 2.12 приведены различные варианты выравнивания изображения относительно текстовой строки. Результаты показаны на рис. 2.10.
|
Пример 2.12. Варианты выравнивания изображения |
|
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TIТLE>Выравнивание изображения</TITLE> </HЕАD> <BODY> <Н1 align=center>Выравнивание изображения</H1> <TABLE border=1> <TR><ТН>Выравнивание <TН>Результат <TR><TH><СОDE>LЕFT</CODE> <TD><IMG srС="rude-pc.gif" align="left" Аlt="Rude PC" width=54 height=77> This positions the image at the left side, with text flowing around it on the right. <TR><TH><CODE>RIGHT</CODE> <TD><IMG src="rude-pc.gif" align="RIGHT" alt="Rude PC" width=54 height=77> This positions the image at the right side, with text flowing around it on the left. <TR><TH><СОDE>TOP</CODE> <TD><IМG src="rude-pc.gif" align="tOP" alt="Rude PC" width=54 height=77> Here, the image runs into the paragraph and the line containing the image is aligned with the image top. <TR><TH><CODE>BOTTOM</СОDE> <ТD><IМG src="rude-pc.gif" align="BOTTOM" alt="Rude PC" width=54 height=77> Here, the image runs into the paragraph and the line containing the image is aligned with the image bottom. <TR><TH><CODE>MIDDLE</CODE> <ТD><IMG src="rude-pc.gif" align="MIDDLE" alt="Rude PC" width=54 height=77> Here, the image runs into the paragraph and the line containing the image is aligned with the image center. </TАВLE> </BОDY> </HTML> |
Рисунок может являться ссылкой, для чего элемент <img> должен быть помещен в контейнер <а href=...>...</a>. Еще эффектнее воспринимается сайт, на котором части изображения являются ссылками на разные страницы. Такое изображение называется графической картой.
В примере 2.13 приведено изображение, разделенное на три прямоугольника, с каждым из которых связан HTML-документ. Изображение карты ссылок показано на рис. 2.11.
|
Пример 2.13. Организация карты ссылок |
||
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>Карта ссылок</TITLE > </HEAD> <BODY> <IMG SRC="arrows.gif" USEMAP="#arrows" BORDER=0> <MАP NAME="arrows"> <ARЕА SHAPE="RECT" COОRDS="0,0,100,190" HREF="left.html" АLT="Налево"> <AREA SHАРE="RECT" COORDS="101,0,200,190" NОНREF АLT="Прямо"> <AREA SHAPЕ="RЕСT" CООRDS="201,0,300,190" HRЕF="right.html" АLT="Направо"> </МАР> </BODY> </HTML> |
Строка 7: код этой строки выводит изображение и ссылается на элемент с именем #arrows, в котором описана карта.
Контейнер <MAP> содержит строки 8-12: описание карты.
Строки 9-11 описывают отдельные области и указывают, какую ссылку они будут вызывать.
Проведя указателем мыши по такому изображению, можно легко обнаружить, где находится ссылка, а где ее нет (рис. 2.11). Справа и слева карты изображения ссылки существуют, а в центре - отсутствует. Адрес ссылки можно прочитать в статусной строке 6pаузера. Выполняя пример, обратите внимание, как адрес ссылки меняется при перемещении маркера с левой стрелки поворота на правую.
2.8 Включение объектов в документ
Почти все браузеры могут обрабатывать встроенные файлы изображений. Большинство браузеров также поддерживает Java-аплеты. Прочие аудио, видео и другие объекты обычно обрабатываются дополнительными модулями, встраиваемыми в состав браузера.
Элемент <EMBED> не предусмотрен в спецификации HTML 4.0, но может быть использован для создания встроенных объектов, типы которых поддерживаются дополнительными модулями конкретного браузера.
Приведенное ниже выражение включает в состав документа видео файл, который воспроизводится после щелчка мышью на объекте. Для того чтобы видеофрагмент отображался корректно, в браузере должен быть установлен соответствующий дополнительный модуль.
<EMBED SRC="videoclip.avi" WIDTH=120 HEIGHT=90>
Список свободно распространяемых модулей и описания связанных с ними атрибутов EMBED расположен по следующему адресу:
http://home.netscape.com/plugins/
Приведенные в этом списке модули поддерживают VRML, QuickTime, потоковые аудиоданные, файлы Adobe Acrobat, изображения PNG и другие форматы данных.
3 ФОРМЫ
3.1 Формирование элементов управления
Один из интерактивных элементов - гиперссылки - был уже рассмотрен. Однако гиперссылки не позволяют организовать обратную связь с пользователем. Для этих целей в HTML предусмотрены другие виды интерактивного взаимодействия. Одна из них - это формы, к которым относится набор простейших элементов управления, таких как кнопки, переключатели, поля ввода и тому подобное. Данные из форм отсылаются на сервер или обрабатываются при помощи Java-скриптов на самой странице. Форма - не единственный способ организации интерактивного взаимодействия, но один из самых простых.
Элемент <input> предназначен для формирования большого количества элементов управления в формах. Сюда относятся текстовые поля, поля ввода пароля, флажки, переключатели, кнопки, скрытые элементы. Они все, как правило, используются ввода данных в форму. Форматирование элементов формы (выравнивание, шрифты, цвет и пр.) осуществляется только через изменение стиля.
В примере 3.1 приведено использование элемента <input> с различными атрибутами (рис. 3.1).
|
Пример 3.1. Элементы ввода информации |
||
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <TIТLE>Элементы ввода информации < input ></TITLE> </hЕАd> <body> <fОrm> ввод текста   <inРut type="text" value="текст по умолчанию" name="my_text"> <Вr> ввод пароля  <input type="password" value="enter" name="my_pass" style="background: #aaaaaa; text-align: center;"> <br> флажок (checkbox)   <inРuТ type="checkbox" name= "check1" vаlue="первый"> <inРut type="checkbox" name="check2" value="второй" checked> <br><br> проголосуй за <Вr> <input type="radio" name="radio1" value="Бендер">  Бендера <br> <input type="radio" name="radiо1" checked value="Паниковский">   Паниковского <br> <input type="radio" name="rаdio1" value="Балаганов">  Балаганова <Вr><br> <input type="file" name="my_file"> <br> <inРut type="hidden" name="spy" value="донос"> <br> <inpuТ type="button" value="кнопка"> <br><br> <inpuТ type="submit" name="submit1" value="отправить"> <inРut type="reset" name="reset1" value="очистить"> </fОrm> </body> </html> |
Строка 7. Выводится текст «Ввод текста», а за ним поле ввода текста, в котором отображается текст, заданный по умолчанию в атрибуте value. Именно этот текст будет подвергаться редактированию.
Строка 9. Аналогично формируется поле для ввода пароля. Слово «enter», заданное по умолчанию, выводится звездочками.
Стандартные атрибуты HTML не предоставляют возможности управлять отображением элементов форм (фон, выравнивание, шрифт и т.д.). Это возможно при использовании стилей.
Например, в строке 7 в поле ввода сразу после отображения выводится текст «текст по умолчанию», который выравнивается по левому краю.
В строке 9 показано, что текст можно выводить, выравнивая его по центру.
Строки 11, 12. Выводятся флажки, второй из которых по умолчанию отмечен. Могут быть выбраны оба флажка.
Строки 15, 17, 19. Выводятся однотипные радиокнопки, из которых по умолчанию выбрана вторая (в строке 17 в элементе <input> установлен флажок - атрибут checked). Кнопки объединены общим именем name="radio1" и из них может быть выбрана только одна.
Строка 21. Организуется поле для ввода имени файла, рядом с которым - кнопка для вызова стандартного диалога.
Строка 23. «Подпольный» элемент не выводится, но при отправке данных значения его параметров могут передаваться.
Строка 25. Выводится простая кнопка, надпись на которой легко изменить.
Строка 27. Выводится кнопка «отправить» (определяются данные).
Строка 28. Выводится кнопка «очистить». Ее нажатие вернет форму в начальное состояние.
3.2 Организация списков
Элемент <select> предназначен для организации меню, различных списков и выбора из них. Пункты списка создаются элементами <option>. При отправке данных на сервер пересылается имя списка вместе со значением, которое по умолчанию является выбранной строкой. Передаваемое значение может быть изменено. Ниже представлен пример использования элемента <option> с различными атрибутами. Результат показан на рис. 3.2.
|
Пример 3.2. Списки выбора |
|
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>Элемент <option></TITLE> </HEAD> <BODY> <SELЕСT name="select1"> <ОРТION>Москва <OPTION selected>Жмеринка <OPTION>Большие Васюки </SELECT> <SELЕСТ name="select2" size=5 multiple> <OPTION selected>Полыхаев <OPTIОN value="бухгалтер">Берлага <OРТION label="васис" selected>Васисуалий Андреевич Лоханкин <OPTION style="color: red;">Гигиенишвили <OPTION>Пряхин <OPTION>Дуня <OPТION>Люция Францевна Пферд </SELЕCT> </BODY> </HTML> |
3.3 Связывание элементов формы
Элементы для связывания различных форм весьма полезны в случае автоматической обработки содержимого страницы и при использовании альтернативных браузеров. Они позволяют задать логическую связь между различными элементами. Например, связать надпись на экране с каким-то элементом формы, таким как ее название. Для связывания текстовой информации и элемента управления, т.е. организации подписи, используют элемент <LABEL>. Каждый конкретный элемент <LABEL> может связываться только с одним элементом формы, но с одним элементом формы может быть связано несколько элементов <label>.
В некоторых случаях необходимо организовать подпись не к одному, а к ряду элементов и организовать их в группу. Для организации подписи ко многим элементам служат элементы <fieldset> и <legend>.
Применение элементов <LABEL>, <fieldset>, <legend> показано в примере 3.3 и на рис.3.3.
|
Пример 3.3. Связывание элементов формы |
|
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>Элемент <fieldset></TITLE> </HEAD> <BODY> <FIELDSЕТ> <LEGEND style="font-family:'arial';">анкета</lеgend> <FORM action="uri" method="post"> <LABЕL for="имя">имя:</label> <INPUT type="text" id="имя"><br><br> пол<br> <LАВЕL for="пол">м</LABEL><INPUT type="radio" name="пол" value="м"> <LABEL for="пол">ж</LABEL><INPUT type="rаdio" name="пол" value="ж"> </FОRM> </FIЕLDSET> </ВОDY> </HTML> |
4 ФРЕЙМЫ
4.1 Разбиение окна браузера на фреймы
Фреймы позволяют разделить окно браузера на несколько областей прямоугольной формы и отобразить в каждой из них отдельный HTML-документ. Описание фреймовой структуры строится в отдельном файле. В обычном HTML-документе за разделом HEAD непосредственно следует раздел BODY, в котором содержится информация, предназначенная для отображения. В документе с фреймами элемент BODY либо отсутствует, либо расположен в разделе NOFRAMES, предназначенном для браузеров, которые не поддерживают фреймы. Вместо элемента BODY используется элемент FRAMESET, с помощью которого задается разбиение окна браузера на столбцы или строки. В состав FRAMESET входят другие элементы FRAMESET, реализующие дальнейшее разбиение окна, либо элементы FRAME, определяющие URL документов, которые должны отображаться внутри фреймов.
В примерах 4.1 и 4.2 приведены исходные коды двух документов с фреймами. Эти документы почти идентичны и отличаются только использованием атрибута FRAMEBORDER, определяющим, должны ли отображаться разделительные линии между фреймами. Результаты показаны на рис. 4.1 и 4.2.
|
Пример 4.1. Фреймы с разделителями |
|
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"> <HTML> <HEAD> <TITLE>Frames with Borders</TITLE> </HEAD> <FRАМЕSET ROWS="40%,60%"> <FRAME SRC="Frame-Cell.html"> <FRАMESET COLS="*,*"> <FRАМE SRC="Frame-Cеll.html"> <FRAME SRC="Frаme-Cell.html"> </FRAMЕSET> <NOFRAMES> <BODY> Your browser does not support frames. Please see <A HRЕF-"Frame-Cеll.html">nonframes version</A>. </BODY> </NOFRAMЕS> </FRAMESET> </HTML> |
|
Пример 4.2. Фреймы без разделителей |
|
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"> <HTML> <HЕАD> <TITLE>Frames without Borders</TITLE> </HEAD> <FRАМЕSET ROWS="40%,60%" FRAMEBORDER=0 BORDER=0 FRAMESPACING=0> <FRАМE SRC="Frаme-Cell.html"> <FRAMЕSET COLS="*,*"> <FRAME SRC="Framе-Cell.html"> <FRAME SRC="Frame-Cell.html"> </FRAMESET> <NOFRAMES> <BODY> Your browser does not support frames. Please see <A HREF="Frame-Cell.html">nonframes version</A>. </BODY> </NOFRAMES> </FRAMЕSET> </HTML> |
4.2 Определение фрейма для отображения документа
Автор Web-страницы может создать ее так, чтобы при активизации ссылки документ, на который она указывает, отображался в конкретном, заранее заданном фрейме. Чтобы сделать это, надо присвоить требуемому фрейму имя, а в состав гипертекстовой ссылки включить атрибут TARGET, указав в качестве значения этого атрибута имя фрейма. При отсутствии атрибута TARGET документ, соответствующий активизированной ссылке, отображается в том фрейме, в котором находится эта ссылка. Если в атрибуте TARGET вы укажете имя несуществующего фрейма, документ будет открыт в новом окне браузера и этому окну будет присвоено имя, заданное в качестве значения TARGET.
Часто фреймы используются для создания небольшой панели инструментов или меню, представляющего содержание документа. Такая панель или меню располагается либо в верхней, либо в левой части окна браузера. Остальное пространство в окне предназначено для отображения главного документа. После щелчка на пункте меню с содержанием в основной области выводится документ, на который указывает ссылка. Рассмотрим в качестве примера Web-страницу, показанную на рис. 4.3.
WEB-страница создается так, чтобы под таблицу с содержанием отводилось пространство фиксированного размера. Остальная часть окна предназначается для вывода документа (имя этого фрейма Main). В примере 4.3 представлен HTML-код документа верхнего уровня.
|
Пример 4.3. Код документа с фреймами |
|
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"> <HTML> <HEAD> <TITLE>Документ из двух фреймов</TITLE> </HEAD> <FRAMESET ROWS="75,*"> <FRАМE SRC="mеnu.html" NAME="Menu"> <FRAME SRC="introduction.html" NАME="Main"> <NОFRАMES> <BODY> This page requires Frames. For a non-Frames version, <A HREF="introduction.html">the introduction</A>. </BОDY> </NOFRAMES> </FRAMESET> </HTML> |
Каждая из ссылок в документе menu.html содержит атрибут TARGET, для которого указано значение Main. Таким образом, при активизации ссылки в верхнем фрейме документ отображается в нижнем фрейме. Код документа, включающего таблицу с содержанием, показан в примере 4.4.
|
Пример 4.4. Код документа с меню |
|
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"> <HTML> <HEAD> <TITLE>Таблица с содержанием</TITLE> </HEAD> <ВОDY> <TАBLE WIDTH="100%"> <TR><ТН><А HREF="intrоduction.html" TARGET="Main"> Introduction</A></TH> <TH><A НREF="potential.html" TARGET="Mаin"> Potential</A></TH> <TH><A HRЕF="invеsting.html" TARGET="Main"> Investing</A></TH> <TH><A HREF="referеnces.html" TARGET="Main"> References</A></TH> </ТR> </TАBLE> </BODY> </HTML> |
При выборе ссылки в таблице содержимое верхнего фрейма остается неизменным. Того же эффекта можно достичь, вовсе отказавшись от атрибутов TARGET в составе гипертекстовых ссылок и включив в раздел HEAD выражение <BASE TARGET="Main">. Документ, содержащий атрибут TARGET, не считается строго соответствующим HTML 4.0, поэтому в начало этого документа должна быть включена промежуточная декларация DOCTYPE.
4.3 Встроенные фреймы
Элемент <iframe> открывает специальный вид панелей -- встроенное окно или встроенный фрейм. В этом окне может отображаться другой документ. Использование элемента <iframe> показано в примере 4.5 и на рис. 4.4.
|
Пример 4.5. Встроенный фрейм |
||
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TIТLE>Встроенный фрейм</TITLE> </HEAD> <BОDY style="background-color: #dddddd"> <Р>Был воскресный вечер. Все было чисто и умыто</P> <DIV> Налюбовавшись  <IFRАМE align=middle width=70% height=350 src="framе-cell.html"> Здесь должен быть встроенный фрейм </IFRАМЕ> </DIV> <Р>- Эх, Киса, - сказал Остап, мы чужие на этом празднике жизни</P> </BODY> </HTML> |
Строка 7-12. Организуется блок <div>.
Строка 8. В блоке сначала выводится текст «Налюбовавшись».
Строка 9. Выводится фрейм, который имеет относительный размер по ширине (70%) и абсолютный по высоте (350 рх). Во фрейм выводится файл frame-cell.html. Фрейм выравнивается по середине строки.
Задание:
Выполнить в контрольной работе те примеры из приведенных выше, которые соответствуют номеру варианта (Табл.1.1). Вариант равен порядковому номеру фамилии студента в журнале группы.
Таблица 1.1 Варианты заданий
|
Вариант |
Примеры |
Вариант |
Примеры |
Вариант |
Примеры |
Вариант |
Примеры |
Вариант |
Примеры |
|
|
1 |
1.1, 2.1-2.4, 3.1, 4.1-4.2 |
6 |
1.2, 2.9-2.13, 3.2, 4.3-4.5 |
11 |
1.3, 2.5-2.8, 3.1, 4.1-4.2 |
16 |
1.4, 2.1-2.4, 3.3, 4.3-4.5 |
21 |
1.1, 2.9-2.13, 3.1, 4.1-4.2 |
|
|
2 |
1.2, 2.5-2.8, 3.1, 4.3-4.5 |
7 |
1.3, 2.1-2.4, 3.3, 4.1-4.2 |
12 |
1.4, 2.9-2.13, 3.1, 4.3-4.5 |
17 |
1.1, 2.5-2.8, 3.3, 4.1-4.2 |
22 |
1.2, 2.1-2.4, 3.2, 4.3-4.5 |
|
|
3 |
1.3, 2.9-2.13, 3.1, 4.1-4.2 |
8 |
1.4, 2.5-2.8, 3.3, 4.3-4.5 |
13 |
1.1, 2.1-2.4, 3.2, 4.1-4.2 |
18 |
1.2, 2.9-2.13, 3.3, 4.3-4.5 |
23 |
1.3, 2.5-2.8, 3.2, 4.1-4.2 |
|
|
4 |
1.4, 2.1-2.4, 3.2, 4.3-4.5 |
9 |
1.1, 2.9-2.13, 3.3, 4.1-4.2 |
14 |
1.2, 2.5-2.8, 3.2, 4.3-4.5 |
19 |
1.3, 2.1-2.4, 3.1, 4.1-4.2 |
24 |
1.4, 2.9-2.13, 3.2, 4.3-4.5 |
|
|
5 |
1.1, 2.5-2.8, 3.2, 4.1-4.2 |
10 |
1.2, 2.1-2.4, 3.1, 4.3-4.5 |
15 |
1.3, 2.9-2.13, 3.2, 4.1-4.2 |
20 |
1.4, 2.5-2.8, 3.1, 4.3-4.5 |
25 |
1.1, 2.1-2.4, 3.1, 4.1-4.2 |
Содержание отчета:
задание;
исходные тексты;
результаты работы.
Размещено на Allbest.ru
...Подобные документы
Понятие об html. Структура файла в формате html. Отличительный признак html-документа. Гипертекстовые ссылки. Создание документов в стандарте html. Заголовки. Форматирование текста и изменение стилей. Фреймы.
реферат [23,7 K], добавлен 17.08.2007Цель и место размещения документа Web. Язык гипертекстовой разметки. Сценарий и структура Web-документа. Основные редакторы гипертекста. Создание документов в стандарте HTML. Создание заголовков, форматирование и изменение стиля, нумерация списков.
реферат [34,4 K], добавлен 22.11.2009Hyper Text Markup Language (html) как стандартный язык для создания гипертекстовых документов в среде web. Тэги списков, гипертекстовые ссылки, графика внутри документа, специальные тэги html и таблицы. Планирование фреймов. Этапы создания сайтов.
контрольная работа [126,9 K], добавлен 18.11.2010Характеристика принципов создания html-страниц и связывания их ссылками так, чтобы можно было произвольным образом переходить от одной страницы к другой. Применение тегов форматирования текста и заголовка окна. Этапы создания html-страницы с таблицей.
контрольная работа [16,0 K], добавлен 19.06.2014Общая характеристика языка разметки гипертекста Hypertext Markup Language. Структура HTML-документа. Обзор основных возможностей HTML. Элементы современного дизайна Web-страниц. Анализ практического применения HTML (на примере обучающих программ).
курсовая работа [47,9 K], добавлен 24.11.2012Разработки британского учёного Тима Бернерсом-Ли. HTML как язык для обмена научной и технической документацией, пригодный для использования людьми, не являющимися специалистами в области вёрстки. Структура HTML-документов и основные теги на языке HTML.
курсовая работа [820,3 K], добавлен 03.03.2011Цели, задачи и компоненты информационной технологии управления. Разработка структуры сайта и программный код работы в HTML–редакторе: создание титульной страницы, документа с фреймами, связь информационных документов с помощью гипертекстовых ссылок.
курсовая работа [34,3 K], добавлен 11.08.2011Создание Web-документов (от простейших статических до документов на основе динамического HTML): форматирование текста, создание списков, таблиц, встраивание различных объектов, использование средств интерактивного общения с пользователем.
методичка [45,5 K], добавлен 27.10.2010Понятие, сущность и особенности применения языка HTML, а также структура его документа. Рекомендации по созданию сайтов в интернете. Общая структура и порядок оформления гипертекстов, записанных в языке HTML, примеры отображения их в браузере компьютера.
контрольная работа [29,4 K], добавлен 12.09.2010Значение атрибута TITLE тега HTML-документа. Возможности HTML для разработчиков Web-страниц. Параметры тега
, регулирующие отступы вокруг изображения. Оформление комментариев в CSS. Теги логического форматирования текста (phrase elements).
тест [19,9 K], добавлен 11.10.2012Основные теги и атрибуты языка HTML. Создание web-сайта, который должен представлять собой несколько связанных между собой страниц. Рассмотрение различных значений атрибутов и тегов на страницах и в других документах. Экранные формы разработанных страниц.
лабораторная работа [1,2 M], добавлен 16.04.2014Основы языка программирования Web-страниц – HTML. Виды информации, которую может содержать Web-страница: текст, графика, звук, анимация и видео. Инструментарий для создания Web-страниц. Основные HTML-редакторы, которые используются для Web-дизайна.
реферат [374,0 K], добавлен 19.01.2011Изучение тегов для создания списков и таблиц в HTML, основных атрибутов тегов. Практические навыки создания списков и таблиц в HTML-документах. Нумерованные, маркированные и вложенные списки, список определений. Выравнивание данных в ячейках таблицы.
контрольная работа [322,1 K], добавлен 09.08.2014Термин HTML (HiperText Markup Language) и его реализация. Программы просмотра страниц написанных на зыке манипулирования гипертекстами. Характеристика специальных программ – браузеров: Google Chrome, Opera, Mozilla Firefox. Структура HTML-страницы.
контрольная работа [118,8 K], добавлен 05.04.2015Создание сайта при помощи HTML и CSS. Язык гипертекстовой разметки HTML и таблица стилей CSS. Основные понятия об этих языках, этапы и алгоритмы программного обеспечения. Добавление стилей в документ. Свойства элементов, принцип построения Web-страницы.
курсовая работа [2,9 M], добавлен 12.01.2016Структура HTML–документа. Синтаксис записи тега. Обозначение цветов в шестнадцатеричной системе счисления. Формат задания и параметры таблицы в документе, параметры её заголовка, строк и ячеек, группирование столбцов. Наследование свойств выравнивания.
курсовая работа [318,8 K], добавлен 03.01.2014Определение понятия гипертекста. Основные части документа SGML. История создания стандартного языка разметки документов HTML. Отличия синтаксиса XHTML от HTML. RSS - семейство XML-форматов для описания лент новостей. Применение языка разметки KML.
презентация [4,3 M], добавлен 15.02.2014История html. Гипертекст. Структура web-страницы. Переход внутри одного документа. Переход к другому документу. Правила синтаксиса. Кодирование символов. Использование символов. Управление цветом. Конструктор документов. Способы определения таблиц стилей.
дипломная работа [911,3 K], добавлен 25.02.2005Суть и составные части Web технологии, ее базовые элементы. Стандартный язык, предназначенный для создания гипертекстовых документов: HyperText Markup Language (HTML). HTML-тэги, определяющие, как будет отображаться WEB-броузером тело документа в целом.
реферат [19,4 K], добавлен 01.04.2010Особенности программирования на языке HTML и JavaScript. Основные стили форматирования текста. Анализ основных приемов и методов создания страниц, рисунков, таблиц и гиперссылок. Основные цвета и их коды. Разработка собственного сайта и его презентация.
курсовая работа [61,3 K], добавлен 29.01.2016
