ИЗ ИСТОРИИ ГИПЕРТЕКСТА Более 25 лет назад появился новый вид организации данных — гипертекст. Термин «гипертекст» был впервые описан Тэдом Нельсоном в 1969 году. Информация, подготовленная в виде гипертекста, — это электронная информация, работать с которой можно только на компьютере, невозможно создать ее точную «бумажную» копию.
Hyper Text Markup Language (HTML ) – язык разметки гипертекста – предназначен для написания гипертекстовых документов, публикуемых в World Wile Web. Гипертекстовый документ – это текстовый файл, имеющий специальные метки, называемые тегами, которые впоследствии опознаются браузером и используются им для отображения содержимого файла на экране компьютера Гиперссылка – специальная конструкция языка HTML, которая позволяет щелчком мыши перейти к просмотру другого документа.
Разработка HTML привела в итоге к новой технологии распространения гипертекстовых документов в Internet. Однако для широкого распространения WWW, кроме языка HTML, потребовалась разработка протокола передачи гипертекста HTTP (Hyper. Text Transfer Protocol - протокол передачи гипертекста), который позволил осуществлять обмен документами HTML. Именно этот протокол дал возможность приложению-клиенту находить и использовать ресурсы, хранящиеся на другом компьютере. Протокол HTTP занимается поиском и загрузкой нужного документа
Первые HTML-документы, обращавшиеся в Internet в начале 90 -х годов, были исключительно текстовыми. Так было до тех пор, пока в NCSA (Национальный центр исследования сверхпроводников) Иллинойского университета не был разработан первый графический интерфейс (Mosaic) для HTML-документов. Впоследствии с появлением множества простых и доступных браузеров для Web и для других служб Internet началась новая эра для HTML. Язык HTML стал основным инструментом для распространения информации в Internet, хотя изначально он предназначался для организации информации в пределах одного научного центра.
Немного терминологии Интернет-страница (WWW-страница, Web-страница) - обособленный документ, хранящийся в отдельном файле на диске и включающий в себя текст, отображаемый на экране во время просмотра в браузере, а также специальные команды (тэги) языка HTML (форматирование абзацев, шрифтовые выделения, ссылки на другие страницы и файлы и т. п. ), дополненный хранящимися в отдельных файлах и подгружающимися дополнительно по размещенным в тексте страницы ссылкам мультимедиа-вставки (рисунки, видео, звук и пр. ).
Немного терминологии Сайт - набор Web-страниц, составляющих единую подборку (как правило, посвященных какой-либо одной тематике) и связанных между собой перекрестными ссылками. Одна из этих страниц является основной (головной, индексной, стартовой) и играет роль содержания книги, тогда как все остальные страницы, как правило, вызываются из основной с помощью гиперссылок.
Немного терминологии "Домашняя страница" (Home. Page) - своего рода "атавизм" в терминологии, предполагающий создание частными пользователями лишь простейших одностраничных HTMLдокументов, являющихся своего рода "сетевыми визитными карточками" их владельцев. В настоящее время он все еще используется для обозначения (теперь уже многостраничных) личных сайтов. Другое значение этого термина - указанная в настройках браузера некоторая (назначенная по умолчанию или самим пользователем) "изначальная" Интернет-страница, автоматически загружаемая при запуске браузера на исполнение, - это может быть любая, но чаще всего стартовая страница какого-либо сайта Интернет, произвольный HTML-документ на жестком диске локального компьютера, либо "пустая страница", представляющая собой имеющийся в комплекте браузера HTML-документ с белым фоном, не содержащий никакого текста.
Немного терминологии Сервер - обособленный компьютер, подключенный к сети Интернет (чаще всего круглосуточно) и имеющий собственный адрес (URL), на диске которого расположены один или несколько сайтов. Серверы могут быть служебными (например, поисковые системы, почтовые серверы), либо специально предназначенными для размещения сайтов (Web-серверы), принадлежащими организации или частному лицу, а также общедоступными для размещения сайтов всех желающих.
Немного терминологии Таким образом, если сайты представляют собой "информационные" объекты, то серверы - это скорее объекты "физические", материальные. Еще одно значение понятия сервер обозначает, кроме самого компьютера как узла сети, также и установленное на нем специализированное программное обеспечение, поддерживающее информационный обмен с пользователями (сервер WWW, сервер FTP, почтовый сервер и т. п. ).
Немного терминологии Динамические (интерактивные) Webстраницы - Интернет-страницы, текст которых содержит фрагменты программного кода (скрипты) или вызовы размещенных на сервере программ (CGI, ISAPI). В отличие от обычных Web-страниц, содержимое которых практически не меняется от посещения к посещению, если только его не изменит по своему желанию владелец сайта (динамические свойства цифрового видео и анимаций в данном случае не принимаются в рассмотрение, так как они присущи соответствующим внешним файлам, а не самой странице), содержимое интерактивной страницы может изменяться по заранее заданному сценарию (алгоритму) либо в зависимости от манипуляций пользователя. Примерами использования интерактивных технологий являются размещаемый на странице счетчик посещений, результат работы поискового сайта, обработка заказа билетов или покупок через Интернет и пр.
HTML был разработан для того, чтобы, подготавливая Web-страницу, не надо было думать о различии в программном и аппаратном обеспечении компьютеров, на которых эта страница будет просматриваться. Вопрос создания системно-независимых файлов актуален, так компьютерная сеть объединяет принципиально разные компьютерные системы — такие как IBM, «Макинтош» , Apple и др.
Существует два способа создания гипертекстовых документов. Можно воспользоваться одним из WYSIWYG HTML- редакторов, для работы с которыми не требуется специальных знаний о внутренней структуре создаваемого документа. Этот способ позволяет создавать документы для WWW без знания языка HTML-редакторы автоматизируют создание гипертекстовых документов, избавляют от рутинной работы. Однако их возможности ограничены, они сильно увеличивают размер получаемого файла и не всегда полученный с их помощью результат соответствует ожиданиям разработчика.
Альтернативой служит создание и разметка документа при помощи обычного текстового редактора. При этом способе в текст вручную вставляются команды языка HTML. Создавая документы таким способом, вы точно знаете, что делаете. .
Способы создания гипертекстовых документов С помощью редактора: • Netscape Composer; • Hot. Dog; • Front. Page С помощью текстового редактора Блокнот
HTML-документ содержит символьную информацию. Одна ее часть - собственно текст, т. е. данные, составляющие содержимое документа. Другая -- теги (markup tags), называемые также флагами разметки, -- специальные конструкции языка HTML, используемые для разметки документа и управляющие его отображением. Именно теги языка HTML определяют, в каком виде будет представлен текст, какие его компоненты будут исполнять роль гипертекстовых ссылок, какие графические или мультимедийные объекты должны быть включены в документ.
Графическая и звуковая информация, включаемая в HTML- документ, хранится в отдельных файлах. Программы просмотра HTML-документов (браузеры) интерпретируют флаги разметки и располагают текст и графику на экране соответствующим образом. Для файлов, содержащие HTML-документы, приняты расширения *. htm или *. html.
Основными элементами документа являются тэги (или дескрипторы). Каждый тэг ограничен угловыми скобками, и технология предполагает использование открытых и закрытых тэгов, указывающих на начало и конец форматирования определенного блока. Прописные и строчные буквы при записи тегов не различаются.
СТРУКТУРА HTML- ДОКУМЕНТА Программа состоит из двух частей. В первой части задается заголовок страницы, которая отображается в Самым главным из тегов HTML является одноименный заголовке окна и первая загружается, при просмотре тег -- <HTML>. страницы. Выбор названия заголовка имеет большое Он должен всегда открывать документ, так же, как тег значение, т. к. именно по загол индексируется страница в </HTML> должен непременно стоять в последней его поисковых системах. Нормационнго наполнения строке. страницы. Эти теги обозначают, что находящиеся между ними строки представляют единый гипертекстовый документ. Без этих тегов браузер или другая программа просмотра не в состоянии идентифицировать формат документа и Задачей заголовка является представление правильно его интерпретировать. необходимой информации для браузера и сервера HTTP. Информация, размещенная внутри заголовка Закрывающий тег так же важен, как и открывающий. документа, обычно не выводится на экран (кроме Если, например, документ включен в электронное названия документа). письмо, тег </HTML> дает команду программе просмотра прекратить интерпретацию текста, как HTML-кода.
СТРУКТУРА HTML-ДОКУМЕНТА HTML-документ состоит из двух частей: заголовок (head) и тело (body), расположенных в следующем порядке: <HTML> <HEAD> . . . </HEAD> <BODY> . . . </BODY> </HTML>
В первой части задается заголовок страницы, которая отображается в заголовке окна и первая загружается, при просмотре страницы. Выбор названия заголовка имеет большое значение, т. к. именно по заголовку индексируется страница в поисковых системах. Название заголовка должно отражать информационного наполнения страницы. суть Задачей заголовка является представление необходимой информации для браузера и сервера HTTP. Информация, размещенная внутри заголовка документа, обычно не выводится на экран (кроме названия документа).
Заголовок документа открывается тегом <HЕAD>, который обычно следует сразу же за тегом <HTML>. Закрывающий тег </HEAD> показывает конец этого раздела, между ними располагаются остальные теги заголовка документа. В заголовке находится заглавие (или название) страницы, рекомендуется не более 64 символов, теги <TITLE> и </TITLE>. Пример: <HEAD> <TITLE>Название страницы</TITLE> </HEAD>
Цветовое оформление документа Цвет Код black (черный) #000000 maroon (темно- #800000 бордовый) Цвет silver (серебряный) Код #C 0 C 0 C 0 red (красный) #FF 0000 green (зеленый) #008000 olive (оливковый) #808000 navy (темно- #000080 синий) lime (известь) yellow (желтый) #00 FF 00 #FFFF 00 blue (синий) #0000 FF fuchsia (фуксия) #FF 00 FF aqua (аква) #00 FFFF white (белый) #FFFFFF purple (фиолетовый) #800080 teal (сине- #008080 зеленый) gray (серый) #808080
Тело документа В отличие от заголовка, тело документа является обязательным элементом, так как в нем располагается весь материал документа. Тело документа размещается между тегами <BODY> и </BODY>. Все, что размещено между этими тегами, интерпретируется браузером в соответствии с правилами языка HTML, позволяющими корректно отображать страницу на экране монитора.
Тело документа Тег <BODY> не только обозначает начало содержимого документа, но и задает его основные свойства: цвет фона, текста и многое другое. Эти свойства определяются с помощью атрибутов, которые приведены в таблице. Атрибут Назначение ALINK Определяет цвет активной ссылки BACKGROUND Указывает на URL-адрес изображения, которое используется в качестве фонового BGCOLOR Определяет цвет фона документа LINK Определяет цвет не посещенной ссылки ТЕХТ Определяет цвет текста VLINK Определяет цвет посещенной ссылки
Для создания своей первой страницы недостаточно знать основные тэги. Необходимо научиться форматировать текст соответствующим образом. Для этого используются тэги для форматирования текста.
Таблица тэгов для форматирования текста ТЭГИ НАЗНАЧЕНИЕ <h 1></h 1> Задает размер заголовка ……. <h 6></h 6> <pre></pre> Обрамляет предварительно отформатированный текст <b></b> Жирное начертание шрифта <i></i> Начертание Курсив <tt></tt> Имитация стиля печатной машинки <cite></cite> Используется для цитат, обычно наклонный текст <strong></stron Используется для выделения наиболее важных g> частей текста (наклонный или жирный текст)
Таблица тэгов для форматирования текста <font size=. . . ></font> Устанавливает размер текста в пределах от 1 до 7 <font color=…></font> Устанавливает цвет текста, используя значение цвета в виде RRGGBB <p> Начало нового абзаца <p align=. . . > Выравнивает абзац относительно одной из сторон документа, значения: left, right, или center Вставляет перевод строки <blockquote> </blockquote> Создает отступы с обеих сторон текста. <ol></ol> Создает нумерованный список <li> Определяет каждый элемент списка и присваивает номер <ul></ul> Создает ненумерованный список <li> Предваряет каждый элемент списка и добавляет кружок или квадратик <ahref="URL"></a> Создаст гиперссылку на другие документы или часть текущего документа
Тэги состоят из ключевых слов и могут быть дополнены атрибутами, разделенными пробелами. Описание атрибутов без использования ключевых слов не допускается. <P> </P> - Тег абзаца Разместите его в начало каждого абзаца, и программа просмотра отделит абзацы друг от друга пустой строкой. Использование закрывающего тега </P> необязательно. Несколько стоящих подряд тегов <Р> не дают дополнительного пространства между абзацами.
Разделение текста на абзацы Тег абзаца имеет один атрибут, поддерживаемый большинством браузеров. Это атрибут ALIGN, задающий выравнивание текста в абзаце. Если этот атрибут не задан, то текст выравнивается по левому краю окна браузера. В таблице представлены возможные значения этого атрибута: Значение Функция LEFT Выравнивание текста по левой границе окна браузера CENTER Выравнивание по центру окна браузера RIGHT Выравнивание по правой границе окна браузера JUSTIFY Выравнивание текста по ширине окна браузера Пример: Если вы хотите, чтобы текст абзаца был выровнен по центру, нужно написать следующее: <P ALIGN=CENTER> Текст </P>
Пример: <P>Этот абзац расположен слева</P> <P ALIGN=CENTER>Этот абзац по центру</P> <P ALIGN=RIGHT>А вот этот абзац справа</P> Что дает при просмотре: Этот абзац расположен слева Этот абзац по центру А вот этот абзац справа
Логическое форматирование Хотя язык HTML включает теги для достижения различных шрифтовых эффектов (полужирный шрифт, курсив, подчеркнутый шрифт), не все браузеры их поддерживают. Однако все браузеры поддерживают тот или иной способ выделения текста. Поэтому использование логического форматирования текста в любом случае приведет к выделению программой просмотра различных частей текста и выявит структуру документа. Говоря о логической разметке текста, можно выделить две основные части: • выделение заголовков в документе; • логическое выделение элементов текста.
Логическое форматирование Название документа, задаваемое с помощью тега <TITLE>, не выводится на экран как часть документа. Чтобы отобразить название используется один из тегов заголовка. Заголовки в типичном документе разделяются по уровням. Язык HTML позволяет задать шесть уровней заголовков: H 1 (заголовок первого уровня), Н 2, Н 3, H 4, Н 5 и H 6. Заголовок первого уровня имеет обычно больший размер и насыщенность по сравнению с заголовком второго уровня.
Теги Применение Используется для выделения цитат или названий книг и статей Применяется для вывода небольшого <CODE> </CODE> куска программного кода Используется для выделения важных <EM> </ EM> фрагментов текста Выделяет текст, вводимый <KBD> </ KBD> пользователем с клавиатуры Используется для выделения текста <SAMP> </SAMP> примера Используется для выделения очень <STRONG> </ STRONG> важных фрагментов текста Используется для отметки имен <VAR> </ VAR> переменных Используется для отметки удаленного <STRIKE> </ STRIKE> текста <CITE> </ CITE>
Физическое форматирование Одним из отличий HTML-документа от документа, подготовленного на печатной машинке, является возможность форматирования текста. Язык HTML позволяет автору документа выбрать понравившийся ему шрифт, подходящий размер букв, их цвет и начертание. За все эти параметры отображения текста отвечают теги физического форматирования. Они действуют на все символы, стоящие между открывающим и закрывающим тегами.
Физическое форматирование Теги <B> </ B> <I> </ I> Применение <B>Полужирный</B> <I>Курсив</I> Результат Полужирный Курсив <U> </ U> <U>Подчеркнутый</ U> Подчеркнутый <TT> </ TT> <S> </ S> <BIG> </BIG> <SMALL> </ SMALL> <SUP> </SUP> <SUB> </SUB> Пишушая <TT>Пишущая машинка</TT> машинка <S>Зачеркнутый</S> Зачеркнутый <BIG>Большой</BIG> Большой <SMALL>Маленький</ Маленький SMALL> Верхний -x<SUP>индекс</SUP> xиндекс Нижний -x<SUB>индекс</SUB> xиндекс
Физическое форматирование Элементы физического форматирования могут быть вложенными друг в друга, хотя конечный результат зависит от браузера. При этом нужно внимательно следить, чтобы один контейнер находился целиком в другом контейнере, например: <B><U>жирный и подчеркнутый текст</U></B>
Физическое форматирование Для изменения цвета и размера шрифта используется метка <FONT></FONT>. Ее атрибуты: COLOR="#hhhhhh" - цвет текста; SIZE="n" - размер шрифта; FACE="имя_шрифта" - смена шрифта, где имя_шрифта может быть arial, verdana, helvetica, sans-serif и другие. Пример использования метки <FONT>: <FONT SIZE="5" COLOR="RED" FACE="SANS-SERIF"> Крупный шрифт красного цвета без засечек </FONT> В окне браузера увидите: Крупный шрифт красного цвета без засечек
Горизонтальные линии <HR> Одним из методов разделения документа на части является проведение горизонтальных линий. Они визуально подчеркивают законченность той или иной области страницы. Тег <HR> позволяет провести рельефную горизонтальную линию в окне большинства программ просмотра. Этот тег не требует закрывающего тега. До и после линии автоматически вставляется пустая строка. Атрибуты тега <HR> представлены в таблице. Атрибут Назначение ALIGN Выравнивает по краю или центру; имеет значения LEFT, CENTER, RIGHT WIDTH Устанавливает длину линии в пикселях или процентах от ширины окна браузера; в последнем случае добавляется символ % SIZE Устанавливает ширину линии в пикселях NOSHADE Отменяет рельефность линии COLOR Указывает цвет линии; используется наименование цвета или шестнадцатеричный код
Разрыв строки Иногда требуется "разорвать" текст, перенеся его остаток на новую строку, при этом не выделяя нового абзаца. Для этого используется тег разрыва строки <BR>. Он заставляет программу просмотра выводить стоящие после него символы с новой строки. В отличие от тега абзаца, тег <BR> не добавляет пустую строку. У этого тега нет парного закрывающего тега.
Нумерованные списки Нумерованные (упорядоченные) списки используют, когда важен порядок вывода элементов списка. Браузер автоматически вставляет номера элементов по порядку, в исходном HTML-тексте номера не печатаются. Если количество элементов списка изменится (в результате удаления или добавления новых элементов), то нумерация автоматически обновится. Весь нумерованный список заключается между парой тегов <OL> и </OL>, а каждый элемент списка расположен между тегами <LI> и </LI> (закрывающий тег </LI> может отсутствовать). Пример <OL> <LI>Программирование</LI> <LI>Алгоритмизация</LI> <LI>Проектирование</LI> </OL>
Нумерованные списки Тег <OL> может имеет атрибуты TYPE и START: <OL START=n TYPE=вид_счетчика> Атрибут TYPE задает вид счетчика, возможные значения которого приведены в таблице, a START -- начальное значение. Значение A a I i 1 Функция большие латинские буквы (A, B, C. . . ) маленькие латинские буквы (a, b, c. . . ) большие римские цифры (I, III. . . ) маленькие римские цифры (i, iii. . . ) арабские цифры (1, 2, 3. . . ); используется по умолчанию
Пример Нумерованные списки <OL TYPE=I START=15> <LI>Программирование</LI> <LI>Алгоритмизация</LI> <LI>Проектирование</LI> </OL>
Маркированные списки Маркированный (неупорядоченный) список используется для представления коллекции элементов, порядок вывода которых не важен. При выводе маркированных списков браузер автоматически вставляет специальные значки (маркеры), отмечающие каждый элемент списка. Маркированный список начинается стартовым тегом <UL> и завершается тегом </UL>. Каждый элемент списка начинается с тега <LI> и завершается (необязательным) тегом </LI>.
Маркированные списки Пример <UL> <LI>Программирование</LI> <LI>Алгоритмизация</LI> <LI>Проектирование</LI> </UL>
Маркированные списки Тег <UL> имеет атрибут TYPE, определяющий внешний вид маркера: <UL TYPE=тип_маркера> Значение атрибута TYPE может быть одним из следующих: : disc (круг -- форма по умолчанию), circle (окружность) или square (квадрат). Пример <UL TYPE=square> <LI>Программирование</LI> <LI>Алгоритмизация</LI> <LI>Проектирование</LI> </UL>
Маркированные списки Атрибут TYPE применяется и в теге <LI> для изменения формы маркера перед конкретным элементом списка. Пример <UL> <LI TYPE=circle> Программирование <LI TYPE=disk> Алгоритмизация <LI TYPE=square> Проектирование </ul>
Маркированные списки Тег <LI> обеспечивает вывод маркера и разделение элементов списка. Если хочется использовать нестандартные маркеры, то тег <LI> не указывается. Для выделения элементов списка в этом случае используются какие-либо картинки или символы, а тег <BR> обеспечивает переход к следующему элементу списка. <UL> <IMG SRC=arr. gif ALIGN=top> <nbr>Программирование<BR> <IMG SRC=arr. gif ALIGN=top> <nbr>Алгоритмизация<BR> <IMG SRC=arr. gif ALIGN=top> <nbr>Проектирование<BR> </UL>
Вложенные списки Любой список может быть частью другого списка, вложен в другой список. Считается полезным использование сдвигов при подготовки текста исходного HTML-документа, чтобы четко представлять уровни вложенности списков. <OL> <LI>Дирекция</LI> <UL> <LI>Иванов И. И. </LI> <LI>Петров К. В. </LI> </UL> <LI>Отдел маркетинга</LI> <UL> <LI>Варшавская Е. Л. </LI> <LI>Самсонов Д. М. </LI> </UL> </OL> При выводе вложенных маркированных списков браузер автоматически проставляет маркеры перед элементами, находящимися на разных уровнях вложенности.
Гиперссылки Для создания гипертекстовой ссылки используется пара тегов <A>. . . </A>. Фрагмент текста, изображение или любой другой объект, расположенный между этими тегами, отображается в окне браузера как гипертекстовая ссылка. Активация такого объекта приводит к загрузке в окно браузера нового документа или к отображению другой части текущей Web- страницы. Гипертекстовая ссылка формируется с помощью выражения <A HREF="URL_ресурса">фрагмент документа</A>
Гиперссылки HREF здесь является обязательным атрибутом, значение которого и есть URL-адрес запрашиваемого ресурса. Кавычки в задании значения атрибута HREF не обязательны. Текстовые указатели, т. е. фрагменты текста, являющиеся ссылками, не отличаются разнообразием внешнего вида. Обычно такой указатель представляет собой слово или слова, подчеркнутые прямой линией. Цвет указателя может регулироваться автором и установками программы просмотра Пример <A HREF="example. html"><IMG SRC="pict. gif"></A>
• • ссылки • Лабораторная работа № 10 Создание гиперссылок. Откройте документ first. htm в программе Блокнот. После флага <BODY> введите фразу: Текст до После предыдущей фразы введите флаг <А HREF=" first. htm"> • Введите после флага фразу: Ссылка • Затем введите закрывающий флаг </А> • Введите после тега фразу : Текст после ссылки • Сохраните документ с именем Link. htm • Просмотрите отображение файла с помощью браузера Internet Explorer • Найдите ссылку в документе и сделайте переход по гиперссылке (щелчком ЛКМ), убедитесь, что при этом загружается документ, на который указывает ссылка. • Щёлкните ЛКМ по кнопке Назад на панели инструментов браузера, чтобы вернуться к предыдущей странице. Убедитесь, что ссылка считается просмотренной и отображается другим цветом.
Для создания веб-страниц используются еще таблицы, для представления табличных данных и для общего форматирования всей страницы. Таблица формируется тэгами <table> и </table>, для выделения строк и столбцов используются тэги <tr></tr> и <td></td> соответственно. Если есть необходимость выделения ячейки заголовков, тогда воспользуемся <th></th>.
Атрибуты таблицы АТРИБУТ Align НАЗНАЧЕНИЕ Выравнивание таблицы по горизонтали (left, center, right) Bgcolor Задает фон внутри таблицы (можно задавать различный фон в каждой ячейке отдельно) Bordercolor width Определяет ширину бордюра Задает цвет бордюра Задает ширину таблицы процентном соотношении, пикселях) (либо в в
Лабораторная работа № 11 Создание таблиц • Откройте документ first. htm в программе Блокнот • Между тегами <BODY> и </BODY> введите флаг: <TABLE BORDER="10" WIDTH="100%"> • Введите название таблицы: <caption align="top">Cписок телефонов</caption> • Первая строка таблицы содержит заголовки столбцов. Введите её следующим образом: <TR BGCOLOR="YELLOW" ALIGN="CENTER"> <ТН>Фамилия<ТН>Номер телефона • Введите следующие строки таблицы: <TR><TD>Петров<TD>21 -34 -57 • Последнюю строку таблицы задайте следующим образом: <TR><TD ALIGN="CENTER" COLSPAN="2"> Ha первом этаже имеется бесплатный телефон-автомат. • Завершите таблицу флагом </TABLE> • Сохраните документ с именем table. htm • Просмотрите отображение документа с помощью
Представим в виде таблицы информацию о погоде по дням недели. День недели Погода Понедельник Солнечная Вторник Солнечная Основное тело среда дождливая программы будет иметь вид: <table align=center border=1 > <tr> <th>День недели</th> <th>noгoдa</th></tr> <td>Понедельник</td> <td>солнечнaя</td></tr> <td>Вторник</td> <td>солнечнaя</td></tr> <td>cpeдa</td> <td>дождливая</td></tr> </table>
Контейнер <FRAMESET> Фрейм (frame) — это отдельный, законченный HTML-документ, который вместе с другими HTML-документами может быть отображён в окне web-браузера. Фреймы по своей сути очень похожи на ячейки таблицы, однако более универсальны. Фреймы разбивают web-страницу на отдельные мини-кадры, расположенные на одном экране, которые являются независимыми друг от друга. Каждое окно может иметь собственный адрес. При нажатии на любую из ссылок, расположенных в одном фрейме, вы можете рассматривать страницы, показанные в другом окне. Web-страница, которая разделена на фреймы, называется документом группы фреймов. Документы группы фреймов содержат стандартный заголовок, задаваемый тегом HEAD, но в отличии от стандартных HTMLдокументов, они не содержат тега BODY. Вместо него используется контейнер (т. е. парный тег) <FRAMESET>, который применяется для определения строк и столбцов отдельных фреймов, каждый из которых обозначается тегом <FRAME>.
Если включить контейнер BODY в документ, где используется контейнер FRAMESET, то кадры будут проигнорированы программой просмотра, и информация, содержащаяся в документах, задаваемых тегами <FRAME>, не будет выведена. Будет показана только информация, содержащаяся в контейнере BODY. Внутри контейнера <FRAMESET> . . . </ FRAMESET> могут располагаться только теги <FRAME> или другие контейнеры FRAMESET.
• • Лабораторная работа № 12 Создание фреймов Запустите текстовый редактор Блокнот. Введите следующий текст: <HTML> <HEAD> <ТITLЕ>Описание фреймов</ТITLE> </HEAD> <FRAMESET COLS="15%, 10%, 75%" NORESIZE> <FRAME SRC="first. htm"> <FRAME SRC="Iink. htm"> <FRAME SRC="table. htm"> </FRAMESET> </HTML> • Сохраните документ с именем frames. htm • Просмотрите отображение файла с помощью браузера Internet Explorer.
<TABLE BORDER=3> <TR> <TD>Ed</TD> </TR> </TABLE> Еd
Замените Ed на неупорядоченный список. <TABLE BORDER=3> <TR> <TD> Компоненты Яблочного Пирога: <UL> <LI>Яблоки <LI>Мука <LI>Сахар <LI>Корица </UL> </TD> Компоненты Яблочного Пирога: </TR> • Яблоки • Мука </TABLE> • Сахар • Корица
Затем мы развернем таблицу на полную ширину окна браузера. <TABLE BORDER=3 WIDTH=100%> <TR> <TD> Компоненты Яблочного Пирога: <UL> <LI>Яблоки <LI>Мука <LI>Сахар <LI>Корица </UL> </TD> </TR> </TABLE>
Теперь мы должны создать вторую ячейку. Мы хотим, чтобы левая ячейка была немного меньшей чем правая. <TABLE BORDER=3 WIDTH=100%> <TR> <TD WIDTH=40%></TD> <TD WIDTH=60%> Компоненты Яблочного Пирога: <UL> <LI>Яблоки <LI>Мука <LI>Сахар <LI>Корица </UL> </TD> </TR> </TABLE>
Теперь можно скопировать изображение пирога - applepie. gif в вашей рабочей папке. Вставьте изображение в первую ячейку. <TABLE BORDER=3 WIDTH=100%> <TR> <TD WIDTH=40%><IMG SRC="applepie. gif" WIDTH=150 HEIGHT=138></TD> <TD WIDTH=60%> Компоненты Яблочного Пирога: <UL> <LI>Яблоки <LI>Мука <LI>Сахар <LI>Корица </UL> </TD> </TR> </TABLE>
Выравниваем изображение пирога вправо и выключим атрибут рамки. <TABLE BORDER=0 WIDTH=100%> <TR> <TD WIDTH=40% ALIGN=RIGHT><IMG SRC="applepie. gif" WIDTH=150 HEIGHT=138></TD> <TD WIDTH=60%> Компоненты Яблочного Пирога: <UL> <LI>Яблоки <LI>Мука <LI>Сахар <LI>Корица </UL> </TD> </TR> </TABLE>
Результат: Компоненты Яблочного Пирога: • Яблоки • Мука • Сахар • Корица Все!
Скачать презентацию ИЗ ИСТОРИИ ГИПЕРТЕКСТА Более 25 лет назад появился
ОСНОВЫ ЯЗЫКА HTML без практики.ppt