Если у вас возникли сложности с курсовой, контрольной, дипломной, рефератом, отчетом по практике, научно-исследовательской и любой другой работой - мы готовы помочь.
Предоплата всего
Подписываем
Клименко Н.Б., Трясоруков А.И.
Основы языка HTML
Учебное пособие
Ростов-на-Дону
2011
ББК 32.973
УДК 004
К 70
Рецензент:
к.п.н., доц. Филимонова Е.В.,
зав. кафедрой информационных технологий ВПО РИФ РГТЭУ
Клименко Н.Б., Трясоруков А.И.
К70 Основы языка HTML: Учебное пособие. – Ростов н/Д: ОП ПИ ЮФУ, 2011. – 52с.
ISBN 5-88045-045-7
Учебное пособие предназначено для студентов, изучающих методы создания Web-страниц и рекомендуется для получения практических навыков использования элементов языка HTML. В пособии описаны действия по созданию простейших Web-страниц, подобраны и систематизированы практические задания.
Большинство из предлагаемых заданий используется авторами при проведении практических занятий со студентами.
УДК 004
ББК 32.973
К 70
ISBN 5-88045-045-7 © Клименко Н.Б., Трясоруков А.И., 2011
Содержание
|
[0.0.1] [0.0.2] Назначение и виды браузеров [0.0.3] Internet Explorer [0.0.4] Netscape [0.0.5] Opera
[0.0.6] [0.0.7] HTML – редакторы и их виды
[0.0.8]
[0.0.9]
[0.0.10]
[0.0.11]
[0.0.12]
[0.0.13]
[0.0.14]
[0.0.15]
[0.0.16]
[0.0.17]
[0.0.18]
[0.0.19]
[0.0.20] [0.0.21] Варианты заданий
[0.0.22] |
Как известно, основной объем информации, доступной в сети Интернет, размещается во «всемирной паутине» - World Wide Web (WWW) – информационной системе, подобной гигантской библиотеке. В этой библиотеке информация представлена в виде связанных между собой документов, которые называются Web-страницами. Каждая Web-страница может содержать текст, рисунки, видео, звукозаписи, объемные миры и др. Такие страницы могут размещаться на компьютерах в любой части света. При подключении к WWW вы получаете равный доступ к сведениям, разбросанным по всему миру. Собрание страниц, объединенных некоторой общей темой, связанных между собой взаимными ссылками и помещенных, как правило, на одном компьютере, называется Web-узлом или сайтом. Узлы Web подобны книгам, а Web-страницы - страницам этих книг. Физически Web-страница – это фойл, созданный специальными средствами. Совокупность связанных Web-страниц, о
Компьютеры, на которых размещаются сайты, а также программы, обеспечивающие поддержку сайтов, называются серверами. На одном сервере может размещаться множество Web-узлов или сайтов.
Чтобы опубликовать в Интернете документ, содержащий некоторую информацию, достаточно поместить файл с этим документом на сервер, постоянно подключенный к Интернету. Сервер должен «уметь» общаться с другими серверами с помощью специального протокола передачи гипертекста HTTP – HyperText Transfer Protocol. Множество таких серверов и образует «всемирную паутину» -World Wide Web.
Просмотреть любую Web-страницу можно с помощью специальных программ - браузеров,
Когда вы загружаете из WWW любой документ, то его текст в окне вашего браузера отображается в хорошо отформатированном, удобном для просмотра виде. Это значит, что Web-страницы представляют собой не простой текст, а содержат также некоторую вспомогательную информацию для управления представлением документа в окне вашего браузера.
Поскольку при создании документа не известно, на компьютере какого типа пользователь будет его просматривать, то Web-страницы не могут готовиться и храниться в формате, разработанном для конкретной компьютерной платформы, например, в формате Microsoft Word для Windows XP. Для того, чтобы пользователь, работающий на компьютере любого типа, видел документ, отформатированный надлежащим образом, используется специально разработанный для этого язык гипертекстовой разметки HTML.
Основная функция браузера заключается в интерпретации кода HTML и выводе визуального результата на экран монитора пользователя. Сегодня существует большое количество самых разнообразных браузеров, однако наибольшей популярностью пользуются следующие три программы: Internet Explorer, Netscape Navigator и Opera. Рассмотрим немного подробнее каждую из этих программ.
В августе 1995 года компания Microsoft выпустила очередное обновление своей операционной системы Windows 95, в состав которой впервые был включен интернет-браузер Internet Explorer 1.0. Однако первоначальный программный код браузера принадлежал не Microsoft, а компании Spyglass, которая впоследствии продала лицензию на изменение и коммерческое распространение кода разработчикам Microsoft. Последние поставили Internet Explorer на более высокий уровень развития, что позволило браузеру-дебютанту составить достойную конкуренцию Netscape Navigator — браузеру, которым к 1995 году пользовались свыше 50% посетителей Интернета.
В конце того же года Microsoft выпускает окончательный и доработанный вариант Internet Explorer 2.0, а весной 1996 года появляется версия 3.0, содержавшая для того времени целый ряд нововведений, таких как поддержка фреймов, подключение программных надстроек (plug-in) и пр.
Выход четвертой версии Internet Explorer (вторая половина 1997 года) положил начало стремительному увеличению доли рынка браузеров корпорации Microsoft (к концу года по самым разным данным она охватывала 60% рынка, в то время как ее основной соперник, компания Netscape, — всего около 30%).
Однако Microsoft не останавливается на достигнутом превосходстве. В 1999 году выходит пятая версия популярного во всем мире браузера, в котором были реализованы новые и усовершенствованы старые технологии.Примерно через год появляется версия 5.5 и, в октябре 2001 года свет увидела версия — 6.0. В начале 2003 года была заявлена версия 7.0.
Можно назвать несколько основных возможностей браузера, благодаря которым Internet Explorer получил такую популярность:
Среди недостатков можно выделить следующие:
Компания Netscape Communications Corporation практически с самого начала считалась основным конкурентом корпорации Microsoft в продвижении своего браузера. Современный браузер Netscape берет свое начало в марте 1993 года, когда один из основателей будущей компании Марк Андриссен (Магс Andreessen) — анонсирует выход программы Mosaic (прототипа будущего браузера Netscape). На следующий год Марк Андриссен и его коллега Джим Кларк (Jim Clark) основывают компанию Mosaic Communications (будущая Netscape Communications Corporation), а буквально через несколько месяцевна свет появляется первая версия интернет-браузера Netscape O.9.
Компания расширяется, Netscape получает распространение, и в итоге к лету 1995 года большинство посетителей Всемирной паутины (около 80%) используют для путешествия по Интернету именно эту программу. Однако вскоре появляется Internet Explorer, который начинает всерьез конкурировать с Netscape, и основатели компании выпускают новую версию своего браузера (2.0), снабдив его не только новым именем Netscape Navigator, но и некоторыми техническими возможностями, тем самым начав знаменитую "войну браузеров".
В конце 1998 года крупнейший интернет-провайдер Соединенных Штатов Америки America-On-Line (AOL) покупает компанию Netscape и все права на развитие одноименного браузера. В 2000 году выходит Netscape 6.0, параллельно с выходом которого анонсируется проект Mozilla O.6. Оба приложения на тот момент использовали единое программное ядро Gecko, но Netscape как торговая марка принадлежал AOL, a Mozilla разрабатывался в качестве независимого проекта. Наконец, в августе 2002 года выходит версия Netscape — 7.0, а следом за ней появляется Mozilla 1.0.
Основными преимуществами браузеров семейства Netscape являются:
Недостатков тоже хватает, учитывая трудный путь развития, который прошли браузеры Netscape:
Компания Opera Software (г. Осло, Норвегия) разработала одноименный браузер в 1994 году для норвежской телекоммуникационной компании Telenor. Группа разработчиков, включавшая в себя двух основателей Opera Software, Иона Штефенсона фон Тежнера (Jon Stephenson fon Tetzchner) и Гера Иварсоя (Geir Ivarsoy), поставила перед собой задачу создать интернет- и мультимедиа-приложение, которым могли бы пользоваться все желающие, независимо от системных возможностей своих компьютеров.
В первоначальную концепцию браузера были заложены такие критерии, как скорость запуска программы и загрузки информации, небольшой размер приложения, минимальные требования к ресурсам компьютера пользователя.
Программа, изначально задуманная как небольшой по размеру быстрый браузер для компьютеров с незначительными ресурсами, какое-то время использовалась в пределах внутренней информационной сети компании Telenor, а к концу 1995 года авторы Opera покинули стены компании, чтобы продолжить самостоятельное развитие своего детища. Наконец, во второй половине 1996 года браузер Opera 2.1 стал доступен для загрузки в Интернете в качестве 90-дневной условно-бесплатной (Shareware) версии.
К числу основных отличий Opera от других браузеров, которые с полной уверенностью можно считать преимуществами, отнесем следующие:
Однако и у Opera есть ряд недостатков, которые также следует упомянуть:
В заключение лишь приведу статистику использования браузеров. Согласно подсчетам известной исследовательской группы OneStat, около 94,6% пользователей во всем мире выходило в Интернет с помощью Internet Explorer, в то время как на долю Netscape пришлось всего 3,3%. Остальные браузеры отстают безнадежно, пользователей Mozilla 1.0 и Opera 6.0 насчитывается всего около 0,8%.
Статистика использования браузеров в российской части Интернета почти повторяет мировые показатели: Internet Explorer— 91,5%, Netscape -3,2%, а прочие браузеры — 5,2% (источник: ArtLebedev Group, ноябрь 2002 года).
HTML - HyperText Markup Language (Язык разметки гипертекста) представляет собой довольно простой набор команд, описывающих структуру документа. Этот язык разметки позволяет выделить в документе отдельные логические части - заголовки, абзацы, таблицы, списки-перечисления и т.д., но не задает конкретные атрибуты форматирования. Конкретный вид форматирования определяет сам браузер при чтении документа, и именно браузер обеспечивает наилучшее отображение Web-документа на вашем экране.
Многие ошибочно называют HTML языком программирования. К сожалению, это не так. И дело здесь даже не в том, что у HTML нет компилятора, а только встроенный в браузер интерпретатор: BASIC и JavaScript тоже обходятся одними интерпретаторами, но это не мешает им называться языками программирования.
Дело в том, что в HTML отсутствует главный атрибут, присущий любому языку программирования, — команды. На HTML нельзя задать последовательность действий, а можно только описать, как браузер должен вводить на экран тот или иной документ. Если же на Web-странице действительно должно что-то выполняться, например вестись форум, то используются настоящие языки программирования, такие как Java и JavaScript. Поэтому мы будем пользоваться термином "HTML-код Web документа".
Язык HTML, или универсальный язык разметки гипертекста, используется для создания самых разных интерактивных документов с гиперссылками и элементами мультимедиа — Web-страниц, интерфейсов, презентаций, электронных книг и учебных пособий.
Файлы с HTML-кодом — это обычные текстовые файлы, доступные для чтения как программе, так и человеку. Благодаря этому HTML-страницы можно редактировать и просматривать на любом компьютере и в любой операционной системе.
Для создания HTML-страниц можно пользоваться любым текстовым редактором, но существуют и специализированные программы. Эти HTML-редакторы делятся на два типа: визуальные и невизуальные.
Визуальные HTML-редакторы обладают интуитивно понятным интерфейсом и не требуют много времени на освоение, но генерируют очень длинный, неоптимальный и малопонятный HTML-код, который потом трудно редактировать. К редакторам этого типа относится,например Microsoft FrontPage Express.
Невизуальные редакторы требуют знания HTML, но лишены недостатков визуальных редакторов. Кроме того, это, как правило, небольшие, компактные программы, бесплатные или условно-бесплатные. К HTML-редакторам этого типа относятся, например MacroHTML и HomeSite.
Поэтому, если вы хотите серьезно освоить Web-дизайн и понять принципы создания Web-документов, вам не обойтись без знания основ языка HTML,
Для создания Web-документов нам понадобится любой браузер – Internet Explorer, Opera, Mozilla или Netscape, а лучше все четыре, так как многие элементы HTML по-разному отображаются в разных программах просмотра, и весьма желательно контролировать эту разницу. Браузер Internet Explorer входит в состав операционной системы Windows, а последние бесплатные версии браузеров Opera, Mozilla и Netscape вы можете скачать из Интернета с сайтов
www.opera.com, www.mozilla.org и www.netscape.com.
Кроме браузера нам нужен будет любой текстовой редактор, например, Блокнот (Notepad) из Windows. Программа Блокнот (Notepad) нужна для подготовки HTML-файлов, а браузер - для просмотра и контроля сделанного.
С помощью этих инструментов можно создать сайт на своем локальном компьютере, после чего поместить его на один из WWW-серверов в Интернете, сделав, таким образом, ваши Web-страницы доступными всему миру.
В качестве примера подготовим Web-страницы некой фирмы. Назовем ее «Компания ГЕОТОН», допустим, что она работает в области автоматизированных систем управления. Цель сайта - рассказать миру о компании, сфере ее деятельности, найти партнеров и заказчиков.
Для файлов нашего сайта нужна отдельная папка.
<html>
<head>
<title> </title>
</head>
<body>
</body>
</html>
Напомним, что первый <html> и последний </html> теги означают соответственно начало и конец документа, элемент <head>... </head> определяет заголовок Web-страницы, элемент <body>... </body> - тело документа, а в элементе <title> </title> мы сейчас укажем название Web-страницы.
<title>Компания Геотон </title>
Напомним, что название Web-страницы должно быть коротким и в максимальной степени отображать ее содержание.
Наша следующая задача - вставить в тело документа между тегами <body>.. ,</body> короткий текст-приветствие посетителям Web-страницы.
Добро пожаловать на страничку компании ГЕОТОН! Здесь Вы узнаете о нашей деятельности, о программных продуктах нашей компании и об оборудовании, которое мы производим!
Для каждой Web-страницы вы можете определить цвет фона и цвет текста. Это выполняется с помощью атрибутов bgcolor и text открывающего тега <body>. Для определения цвета как значения атрибутов существует два варианта:
Ниже приведена таблица с шестнадцатиричными и именными кодами цветов.
Таблица 1.Шестнадцатиричные и именные цветовые коды
|
Цвет |
Шестнадцатиричный код цвета |
Именной код цвета |
|
Белый |
#FFFFFF |
White |
|
Бирюзовый |
#008080 |
Teal |
|
Желтый |
#FFFF00 |
Yellow |
|
Зеленый |
#008000 |
Green |
|
Золотой |
#FFD700 |
Gold |
|
Каштановый |
#80000 |
Maroon |
|
Красный |
#FF0000 |
Red |
|
Лимонный |
#00FF00 |
Lime |
|
Морской волны |
#00FFFF |
Aqua |
|
Оливковый |
#808000 |
Olive |
|
Пурпурный |
#800080 |
Purple |
|
Серебряный |
#C0C0C0 |
Silver |
|
Серый |
#808080 |
Gray |
|
Синий |
#0000FF |
Blue |
|
Темно-голубой |
#000080 |
Navy |
|
Фуксия |
#FF00FF |
Fuchsia |
|
Черный |
#000000 |
black |
Конечно, словесное указание цвета более удобно и понятно. С другой стороны, числовые обозначения дают больше возможностей, так как позволяют указать практически любой из 16 777 215 оттенков, тогда как словесные обозначения ограничены только шестнадцатью цветами.
Полный перечень цветовых имен и их цифровых эквивалентов языка HTML довольно обширен.
<body bgcolor=blue text=yellow>
Ваш текстовый файл должен выглядеть примерно так, как на рис. 1-1
|
<html> <head> <title> Компания Геотон </title> </head> <body> Добро пожаловать на страничку компании ГЕОТОН! Здесь Вы узнаете о нашей деятельности, о программных продуктах нашей компании и об оборудовании, которое мы производим! </body> </html> |
Рис. 1-1. Код HTML первой Web-страницы в окне программы Блокнот (Notepad)
Теперь документ следует сохранить в созданную ранее папку Web в которой должны сохраняться все файлы сайта.
Теперь можно просмотреть результаты нашей работы.
Как видите, в заголовке окна браузера указывается название документа, которое мы ввели в элементе <title></title>, а цвет фона и текста страницы - такие, как указаны в теге <body> после изменения. Текст отображается в одном абзаце и выровнен влево.
Возможно, в вашем браузере размер шрифта текста будет крупнее или мельче, чем на рисунке. В таком случае выберите команду меню Вид > Размер шрифта > Средний в браузере Internet Explorer, чтобы установить средний размер шрифта.
Так как в элементе <body> </body> мы ввели текст без разбивки на абзацы, то в браузере он отображается в виде одного абзаца и выровнен влево. Теперь следует придать тексту более наглядный вид.
Внутри парного тега <BODY></BODY> размещается большинство существующих тегов HTML.
Ряд параметров условно можно разделить на четыре основные группы (параметры фона, границ документа, текста и гиперссылок).
Рассмотрим каждую из групп подробнее.
Параметры фона
Параметрами фона документа являются BGCOLOR, BACKGROUND и BGPROPERTIES.
BGCOLOR устанавливает цвет фона, значение которого может быть введено в символьном эквиваленте, в шестнадцатеричном коде или в формате цветовой модели RGB. Система указания цвета в HTML основана на трех основных цветах: красном, зеленом и синем (модель RGB — Red, Green, Blue). Любое значение RGB может быть преобразовано в шестнадцатеричный формат (от 00 до FF с приставкой # (читается "диез")). Некоторым значениям упомянутых моделей соответствует символьное название цвета. Таким образом, один и тот же цвет можно указать тремя возможными способами.
Далее показано три варианта установки цвета фона (белого):
Параметр BACKGROUND позволяет накладывать на фон документа графическое изображение:
<BODY BACKGROUND="images/bg.gif">
Параметр BGPROPERTIES поддерживается только браузером Microsoft Internet Explorer и позволяет менять свойства фона документа.
Например, конструкция
<BODY BACKGROUND="images/bg.gif" BGPROPERTIES="fixed">
позволит прокручивать содержание документа, оставляя фоновое графическое изображение в зафиксированном виде.
Описанные параметры не являются обязательными, однако использование BGCOLOR рекомендуется по следующей причине: пользователь в настройках своего браузера может поставить любой цвет фона, а разработчик, полагая, что белый цвет является основным по умолчанию, может не указать этот параметр. В результате вместо подразумевающегося белого цвета, фон может оказаться черным, зеленым и т. д., что способно привести к нарушению оформления документа. Также наряду с графическим изображением фона рекомендуется использовать и параметры цвета на тот случай, если рисунок не загрузится (тогда браузер отобразит цвет).
Параметры границ документа
Параметры границ HTML-документа создают отступы заданного размера от верхнего, нижнего, левого и правого краев документа. Этим отступам соответствуют параметры TOPMARGIN, BOTTOMMARGIN, LEFTMARGIN и RIGHTMARGIN. Значения для них задаются в пикселах:
<BODY TOPMARGIN="5" BOTTOMMARGIN="5"
LEFTMARGIN="10" RIGHTMARGIN="10">
Однако данные параметры не воспринимаются некоторыми браузерами. В частности, Netscape объединяет упомянутые параметры в две группы - горизонтальные и вертикальные отступы:
<BODY MARGINWIDTH="10" MARGINHEIGHT="5">
Таким образом, если вы хотите учесть особенности всех браузеров, то в HTML-конструкцию надо подставить и те, и другие параметры:
<BODY TOPMARGIN="5" BOTTOMMARGIN="5"
LEFTMARGIN="10" RIGHTMARGIN="10"
MARGINWIDTH="10" MARGINHEIGHT="5">
Параметры текста
Из параметров текста документа реально применяется только один — TEXT. Он задает цвет основного текста на странице (значение параметра может быть введено аналогично цвету фона документа):
<BODY TEXT="black">
Чтобы разбить текст на абзацы, надо в начале абзаца поставить открывающий тег <p>, а после последнего символа абзаца – закрывающий тег </P>. При этом браузер пропускает после абзаца строку. Чтобы размещать текст нового абзаца в следующей строке используется тег <br>. Это одиночный тег. Он вставляется в начале строки вместо тега <P>.
Этот тег можно также использовать для вставки пустой строки.
Параметры гиперссылок
Параметры гиперссылок (связей с внутренними или внешними документами) определяют цвет активных (ALINK), не посещенных (LINK) и посещенных (VLINK) ссылок:
<BODY LINK="#OOOOFF" ALINK="#OOOOFF" VLINK="blue">
Чтобы Web-страница выглядела более привлекательно, разделим текст на абзацы и выделим заголовок.
Язык HTML имеет шесть уровней заголовков разделов документа, пронумерованных цифрами от 1 до 6. Заголовки объявляются парой тегов с номерами, соответствующими уровню, например,
<h1> </h1> -заголовок раздела первого уровня,
Далее текст
<h6> </h6> - заголовок раздела шестого уровня.
От нормального текста заголовки отличаются размером и толщиной букв. Заголовок первого уровня h1 отображается обычно очень крупным шрифтом, в то время как заголовок шестого уровня h6 - очень мелким.
Не следует путать заголовки разделов документа с рассмотренным ранее заголовком документа, определяемым элементом <head> </head>.
В качестве заголовка текста используем первое предложение
Добро пожаловать на страничку компании ГЕОТОН!
Для этого достаточно ограничить его тегами <h1> и </h1>.
Этот фрагмент кода должен принять следующий вид:
< h1>Добро пожаловать!</ h1>
на страничку компании ГЕОТОН!
После изменения не забывайте сохранять файл и обновлять изображение в окне браузера. Результат должен быть похож на изображение страницы рис.2-1.
Рис.2-2. Текст Web-страницы в окне браузера
По умолчанию заголовок выравнивается по левому краю страницы. Но его можно также выровнять по правому краю или центрировать.
Для правостороннего выравнивания в теге <h1> используется атрибут align=right, а для центрирования - align=center. Допускается также явное указание левостороннего выравнивания - align=left.
Этот элемент HTML-документа должен принять следующий вид:
<h1 align=center>Дoбpo пожаловать </h1>
Результат будет выглядеть примерно так, как на рис. 2-3.
Рис.2-3. Текст после центрирования заголовка.
Теперь займемся остальным текстом. Увеличим его размер и оформим текст полужирным курсивным начертанием.
Для установки полужирного начертания используются парные теги <b> </b>.
<b><i>Здесь Вы узнаете о нашей деятельности, о программных продуктах нашей компании и об оборудовании, которое мы производим</i></b>
Элементы разметки могут быть вложенными, как в данной структуре, где элемент <i>...</i> вложен в элемент <b>…</b>. Современные браузеры способны правильно обрабатывать вложенные теги. Поэтому вам необходимо следить за тем, чтобы не нарушался порядок вложения.
С помощью пары тегов <u></u> можно установить подчеркнутое начертание текстового фрагмента, ограниченного данными тегами, а с помощью пары тегов <tt></tt> - отобразить текст телетайпным шрифтом.
После того, как вы просмотрите полученный результат, увеличим размер шрифта текста. Это можно сделать разными способами.
Теги <big></big> увеличивают размер шрифта текста, заключенного между ними.
<big><b><i>Здесь Вы узнаете о нашей деятельности о программных продуктах нашей компании и оборудовании, которое мы производим! </i></b></big>
С помощью тегов <small></small> вы можете уменьшить размер шрифта текста по сравнению с исходным.
Другой способ указания размера шрифта - с помощью тегов <font></font> с атрибутом size. В качестве значений этого атрибута используются целые числа от 1 до 7. Причем значение 1 соответствует минимальному размеру шрифта, а значение 7 - максимальному.
В качестве значения атрибута size можно также использовать числа от 1 до 7 со знаком + (плюс) или - (минус). В этом случае размер шрифта соответственно увеличивается или уменьшается, по сравнению с исходным, например, теги <font size=+l></font> увеличат размер шрифта, по сравнению с текущим, на один уровень. Проверьте.
<font size=5><b><i>Здесь Вы узнаете о нашей деятельности, о программных продуктах нашей компании и об оборудовании, которое мы производим</i></b></font>
В тегах <font></font> может использоваться также атрибут color для указания цвета шрифта, ограниченного тегами текста. Значения этого атрибута такие же, как и для рассмотренных ранее атрибутов, описывающих цвет фона и текста документа.
По умолчанию абзац с текстом выровнен влево. Центрируем его по горизонтали с помощью тегов <center></center>. Вы можете также выровнять абзац по правому краю страницы с помощью тегов <right></right> или по левому - с помощью тегов <left></left>.
<center> Здесь Вы узнаете <font size=5 color=black>о нашей деятельности,</font><font size=+1 color=red> о программных продуктах</font> нашей компании и <font size=-2 color=blue>об оборудовании, которое мы производим!</center>
Обратите внимание, что для центрирования абзаца мы использовали теги <сеnter> </center>, в отличие от атрибута align=center, который использован нами в тегах <h1></h1>.
Коды перевода строки, табуляции и прочих служебных символов игнорируются HTML-браузерами. Поэтому, чтобы отметить начало нового абзаца (параграфа), необходимо использовать тэг <P> или <br>
Большинство браузеров вставляет дополнительные пробелы, чтобы разделить параграфы, абзац также может начинаться с отступа.
Тэг может быть пустым, но может включать параметры, например
<p Align= center> Текст абзаца
Тэг перевода строки <br> (break rule) является упрощенным вариантом параграфа. Он переводит текст, вписанный за тэгом, на следующую строку, начиная с левой крайней позиции, не включая пробелы.
Блоки текста можно разделить и с помощью горизонтальной линии, пересекающей окно вывода. Тэгом такой горизонтали является <hr>(horizontal rule). В этом случае браузер сам будет определять длину горизонтальной линии по ширине окна.
Известны четыре атрибута для тэга <hr>.
Size – специфицирует толщину линии,
Width – определяет длину линии в пикселях или процентах от ширины окна,
Align – отвечает за то, как будет располагаться линия относительно краев окна вывода, может принимать следующие значения: left, center,right.
Noshade – показывает, что при прорисовке линии не должны употребляться тени.
Язык HTML допускает два подхода к шрифтовому выделению фрагментов текста. С одной стороны, можно прямо указать, что шрифт на некотором участке текста может быть полужирным или курсивным, т.е. явно указать начертание шрифта текста, как мы это делали в предыдущем задании. С другой стороны, можно пометить любой фрагмент текста, как имеющий некий, отличный от нормального, логический стиль, предоставив интерпретацию этого стиля браузеру.
Таким образом, логический стиль указывает роль текстового фрагмента, например, большую значимость по сравнению с обычным текстом или то, что данный фрагмент является цитатой. В своей работе вы можете использовать следующие теги, определяющие логические стили. Проверьте, как они работают в разных браузерах.
<dfn></dfn> - применяется для определения слова. Текст обычно выводится курсивом.
<em></em> - для выделения слов и усиления. Отображается курсивом.
<cite></cite> - для выделения названий книг, фильмов, спектаклей и т.д. Выводится курсивом.
<code></code> - для фрагментов кода программ. Показывается на экране шрифтом фиксированной ширины.
<kbd></kbd> - используется для текста, который пользователь вводит с клавиатуры. В разных браузерах может отображаться разными шрифтами.
<samp></sainp> - служит для отображения сообщений программ. Выводится шрифтом фиксированной ширины.
<strong></strong> - для особо важных фрагментов. Обычно выделяется полужирным начертанием.
<var></var> - используется для указания, что часть текста или слово является символьной переменной, т.е. текстом, который может быть заменен различными выражениями. Отображается курсивом.
Спецификация HTML 4.0 предлагает более прогрессивный способ указания стилей текста и других элементов - с помощью специального языка каскадных таблиц стилей CSS (Cascading Style Sheets).
Стиль большинства элементов HTML может описываться с помощью атрибута style, который располагается внутри открывающего тега элемента. В качестве значения атрибута style используются пары вида «свойство: значение». Например, во фрагменте кода, описывающего заголовок раздела, <h1 style="color: blue"> атрибут style="color: blue" определяет, что свойство color (цвет) имеет значение blue (синий), т.е. текст заголовка первого уровня должен отображаться синим цветом.
Используя стили можно не только определять формат части или всего текста, но и позиционировать элементы страницы (например, текст и графику) указав координаты их положения. Таблица стилей – это просто структура описания свойств элемента. Если она задана, то разные документы могут просто ссылаться на эту таблицу и не содержать соответствующие атрибуты форматирования в тегах.
Посмотрим, как с помощью языка каскадных таблиц стилей указать стиль текстового фрагмента, который начинается словами Здесь Вы узнаете...
Для указания толщины шрифта используется свойство font-weight со значениями lighter (тонкий), bold (полужирный), bolder (жирный), например,
style=" font -weight: bold".
Для определения курсивного начертания применяется свойство font-style со значением italic. Поэтому, чтобы придать тексту полужирное курсивное начертание, следует атрибут style определить так:
style=" font –weight: bold; font-style: italic".
Обратите внимание: свойства могут располагаться в любом порядке и обязательно должны разделяться точкой с запятой.
Если требуется указать размер шрифта, то следует воспользоваться свойством font-size, значения которого можно указать в относительных или абсолютных величинах. Относительные величины - это проценты, а в качестве абсолютных величин используются пункты (pt), пикселы (рх), сантиметры (cm), миллиметры (mm). Например:
style="
style="
Для определения способа выравнивания текста по горизонтали используется свойство text-align со значениями left (влево), right (вправо), center (по центру), justify (по ширине). Таким образом, чтобы указать, что текст Здесь Вы узнаете... должен быть оформлен полужирным курсивным начертанием с размером 150% от исходного и выровнен по центру, следует его стиль определить следующим образом:
style="font-weight: bold; font-style: italic;
<Р style="font-weight: bold; font-style: italic; font-size:150%; text-align: center">3десь Вы узнаете о нашей деятельности, о программных продуктах нашей компании и об оборудовании, которое мы производим
Код HTML в файле geoton.html должен иметь вид как на Рис. 3-1, а результат в окне браузера практически не будет отличаться от ранее приведенного на Рис. 2-3.
Рис. 3-1. HTML-код Web страницы.
Таблицы стилей действуют другим, более удобным и экономичным способом.
Для присвоения какому-либо элементу определенных характеристик вы должны один раз описать этот элемент и определить это описание как стиль, а в дальнейшем просто указывать, что элемент, который вы хотите оформить соответствующим образом, должен принять свойства стиля, описанного вами. Более того, вы можете сохранить описание стиля не в тексте вашей Web-страницы, а в отдельном файле - это позволит использовать описание стиля на любом количестве Web-страниц. И еще одно, связанное с этим преимущество - возможность изменить оформление любого количества страниц, исправив лишь описание стиля в одном отдельном файле.
Кроме того, язык таблиц стилей позволяет работать со шрифтовым оформлением страниц на гораздо более высоком уровне, чем стандартный HTML.
В настоящее время язык CSS насчитывает довольно большое количество свойств элементов HTML, которыми он может управлять. Применяя «безопасные», т.е. совместимые с максимальным количеством браузеров, элементы CSS - свойства шрифта, цвета элементов и фона, свойства текста и границ - вы можете значительно облегчить свою работу и сделать ваши Web-страницы более привлекательными в плане оформления текста.
На каждую Web-страницу можно поместить любое количество рисунков. Вы можете использовать готовые графические изображения или создать их сами. Графические изображения, которые вы вставляете в свои Web-документы, должны быть созданы в таком графическом формате, который поддерживается браузером. Стандартные форматы Web-графики - GIF, JPG и PNG. Размеры их файлов минимальны по сравнению с другими форматами, что значительно сокращает время загрузки из сети.
Чтобы включить изображения в Web-документ используется одиночный тег <img>. Тэг изображения может включать следующие атрибуты:
Вставим на первую страницу нашего сайта рисунок. Прежде всего, этот файл рисунка следует скопировать в папку Web, которую мы создали для хранения файлов сайта.
Для вставки изображения в Web-документ используется одиночный тег <img> с атрибутом src, значение которого соответствует имени вставляемого файла или его адресу в Интернете. С помощью необязательного атрибута <border> можно включить отображение рамки вокруг рисунка. Значение 1 для этого атрибута создаст рамку толщиной 1 пиксел. Таким образом, тег, вставляющий рисунок, должен выглядеть следующим образом:
<img src=logo.gif border=1>
Вставим его после заголовка Добро пожаловать на страничку компании ГЕОТОН!
Операционная система Windows не различает регистр букв в названиях имен файлов, но операционные системы семейства Unix различают его, поэтому следует тщательно следить за тем, чтобы имя файла в теге указывалось с соблюдением регистра. Начинающие Web- дизайнеры часто недоумевают: почему рисунок был виден на странице при тестировании на локальном компьютере и не появляется при за грузке страниц с удаленного сервера. А все дело в том, что они указали cloud.gif, а на диске хранится CLOUD.GIF.
<h1 аlign=center>Добро пожаловать на страничку компании ГЕОТОН!</h1>
и введите в ней тег
<img src= logo.gif border=1> для включения изображения в документ.
По умолчанию рисунок выравнивается влево. Чтобы выровнять рисунок по центру, следует, воспользовавшись тегами<center> </center>, записать строку кода HTML, вставляющего рисунок, следующим образом:
<center><img src= logo.gif border=l></center>
Откорректируйте указанную строку в файле geoton.html. В результате Web-страница будет выглядеть как на Рис. 4-1
Рис.4-1. Текст с рисунком Web-страницы в окне браузера
Когда вставляете графический объект с помощью тега <img src=> ,то можно масштабировать его размеры с помощью атрибутов width и height, вставленных в скобки этого тега. Значения этих атрибутов можно задавать в экранных пикселах или в процентах. Например.
<img src= logo.gif width=”150” height=”200”>
<img src= logo.gif width=”30%” height=”60%”>
Для указания способа взаимодействия рисунка с текстом используется атрибут align=. Он может принимать следующие значения:
Фоновый рисунок (обои) задается при помощи атрибута background= в открывающем теге body.
Для наглядного представления информации на Web-страницах часто используются списки. Списки могут быть нумерованными и ненумерованными.
Создадим новую страницу нашего сайта, на которой вставим ненумерованный список.
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
<title>Чем мы занимаемся?</title>
<h2 align=center>Чем мы занимаемся?</h2>
<body bgcolor=aqua text=navy>
Помните, однако, что цвет текста должен быть таким, чтобы текст хорошо читался на выбранном фоне. Если атрибуты цвета не указывать, то по умолчанию текст будет отображаться черным цветом на белом фоне.
HTML поддерживает несколько типов списков.
<ol> </ol> – упорядоченный нумерованный список, обычно содержит пронумерованные абзацы, разделенные пустыми строками.
<ul> </ul> –маркированные списки, абзацы не имеют номеров, а имеют маркеры. Чтобы изменить вид маркера, надо в тело тега ul включить атрибут type.
Примеры маркеров:
Type=”circle” – белый незаштрихованный кружок
Type=”disc” – черный заштрихованный кружок
Type=”square” – черный заштрихованный квадратик.
<menu> </menu> – список коротких элементов, обычно длиной не более одной строки и разделенных более компактно, чем <ul>.
<dir> </dir> – список очень коротких элементов, возможно размещенных в несколько колонок.
Теперь вставим на страницу ненумерованный список с информацией о сфере деятельности компании ГЕОТОН. Ненумерованные списки создаются с помощью пары тегов <ul></ul>, которые ограничивают список. Между ними располагается столько элементов, начинающихся с тега <li>, сколько элементов в списке.
<ul>
<li>Созданием новых и развитием существующих автоматизированных систем управления технологическими процессами на промышленных объектах .
<li> планированием и установкой "под ключ" локальных и глобальных вычислительных систем.
<li>Разработкой и внедрением систем корпоративных сетей с построением кабельных систем (для офисов), а также систем передачи данных с использованием телефонных, оптоволоконных и радиоканалов
<li>Внедрением проектных решений по созданию и использованию глобальных информационных магистралей для обеспечения совместных работ систем связи, видеоконференций и мультимедиа.
<li> Созданием систем слежения и видеонаблюдения.
</ul>
Обратите внимание: тег <li> может использоваться как одиночный, т.е. без парного, закрывающего тега </li>.
Как видите, каждый элемент ненумерованного списка выделяется специальным маркером.
Существует тип списков, называемый списком определений или глоссарием. Такой список состоит из абзацев, каждый из которых имеет короткий заголовок. Список определений заключается между тэгами <dl> </dl>. Тэг<dt> специфирует заголовок элемента списка. После тэга дается текст заголовка, который отделяется от поясняющего текста тэгом <dd>.
Для тэгов нумерованного, ненумерованного списков и глоссария имеется дополнительный атрибут <compact>. Его наличие в тексте кода HTML-документа информирует браузер, что названия элементов списка и пояснения к ним будут короткими и тогда браузер не насыщает текст пробелами и употребляет компактные шрифты.
Рассказав на Web-странице о сфере своей деятельности, компания ГЕОТОН предполагает, что познакомившиеся с этой информацией и заинтересовавшиеся ею посетители сайта захотят связаться с компанией, задать вопросы, обсудить общие проблемы, предложить сотрудничество. Чтобы ускорить и облегчить им процедуру связи, достаточно поместить на данной странице специальную форму; заполнив ее, посетитель сайта передаст компании информацию, которую он посчитает нужным послать.
Подобные формы широко используются на Интернет-сайтах для сбора различных сведений, регистрации пользователя, формирования запроса и т.д. Образец типичной формы регистрации пользователя на сайте www.narod.ru показан на Рис. 6-1.
Рис.6-1. Форма регистрации
Такая форма может содержать поля для ввода данных, поля списков, открывающиеся списки, флажки и переключатели для выбора значений и другие элементы управления. После заполнения формы пользователем специальная программа-обработчик или, как ее еще называют, скрипт, обрабатывает полученные данные и передает их по назначению.
Чтобы вставить в Web-документ простую форму, которая позволит пользователю напечатать свое сообщение прямо на Web-странице и автоматически отправить его по электронной почте компании ГЕОТОН, выполним следующие действия.
Сначала вставим в HTML-документ spisok.html текст с приглашением заполнить форму, поместив его под списком. Текст приглашения следует выделить в отдельный абзац, ограничив его парой тегов <р></р>, и выровнять по центру с помощью атрибута align=center.
<р align=center>Если у Вас есть вопросы или предложения, напишите нам:
Каждая форма начинается тегом <form> и заканчивается тегом </form>. HTML-документ может содержать в себе несколько форм, однако они не должны находиться одна внутри другой. Текст и теги могут размещаться внутри формы без ограничений. Открывающий тег <form> должен содержать обязательный атрибут action, который определяет, где находится программа-обработчик или адрес сервера, который будет обрабатывать форму. Так как сообщение, написанное посетителем сайта, будет отправляться по электронной почте, то значение этого атрибута должно содержать адрес E-mail владельца сайта, например:
Action="mailto: geoton@narod.ru”.
Еще один атрибут тега <form> - method - определяет, каким образом или с помощью какого протокола данные из формы будут переданы программе-обработчику. Так как будет использована электронная почта, то значение этого атрибута должно быть post: method=post. Таким образом, элемент<form>.. . </form> будет иметь примерно такой вид:
<form action="mailto: geoton@narod.ru" method=post ></form>
Теперь нам нужно поместить в форме многострочное текстовое поле для ввода сообщения. Для этого служат теги <textarea></textarea>. В качестве атрибутов открывающего тега <textarea> необходимо указать количество строк (rows) и колонок (cols), а также имя (name), под которым содержимое текстового поля ввода будет передано программе-обработчику, например:
<textarea rows=5 cols = 40 name=Comments></textarea>
Такой элемент создаст текстовое поле ввода высотой 5 строк и шириной 40 символов. Введенный посетителем сайта текст будет передан обработчику под именем comments. Чтобы центрировать текстовое поле относительно краев страницы, следует ограничить его тегами <center></center>.
<center><textarea rows=5 cols=40 name=Comments> </textarea></center>
Здесь для центрирования текстового поля мы использовали теги <сеnter></center>, а не атрибут align=center тега <р>, так как данный атрибут предназначен преимущественно для выравнивания текстовых фрагментов, и некоторые браузеры могут игнорировать данный атрибут для поля формы. Вставленное текстовое поле будет примерно таким, как на рис. 6-2.
Рис. 6-2. Текстовое поле формы
Чтобы запустить процесс передачи данных из формы обработчику, нужен какой то элемент управления, например, кнопка. Создать такой элемент управления очень легко с помощью одиночного тега <input> с атрибутом type. Если нужно создать кнопку, то значение этого атрибута должно быть submit (передать): <input type=submit>.
Такой элемент по умолчанию выведет на Web-странице кнопку с надписью Submit Query (Передать запрос). Чтобы изменить надпись на кнопке, достаточно включить в данный тег атрибут value с нужным вам значением, например: value="Отправить". Напомним, что значения атрибутов, в которых используются символы, отличные от латинских, следует обязательно заключать в кавычки.
<p><center><input type=submit value= ”Отправить”> </center></p>
В результате элемент <form>... </form> должен принять следующий вид:
<form асtion="mailto:geoton@narod.rn" method=post>
<center><textarea rows=5 cols=40 name=Comments> </textarea> </center>
<p><center><input type=submit value="Отправить"></center></p>
</form>
Напомним еще раз, что в качестве значения атрибута action, в открывающем теге <form> следует указать ваш адрес электронной почты. В окне браузера форма будет примерно такой, как на рис. 6-3.
Рис. 6-3. Текстовое поле и кнопка в окне браузера
Работу формы можно проверить.
Рис. 6-4. Диалог-предупреждение
Если бы соединение с Интернетом было установлено, то данные из формы были бы отправлены и через некоторое время вы получили бы их по электронной почте.
Мы уже упоминали в начале, что аббревиатура HTML означает Язык разметки гипертекста. Что же такое гипертекст? В отличие от простого текста, который можно читать только от начала к концу, гипертекст позволяет осуществлять мгновенный переход от одного фрагмента текста к другому. Справочные системы многих программных продуктов построены именно по принципу гипертекста. При щелчке левой кнопкой мыши на некотором выделенном цветом и подчеркнутом фрагменте текущего документа - гипертекстовой ссылке - происходит переход к заранее назначенному документу или фрагменту документа. На Web-страницах гипертекстовые ссылки широко используются для перехода к определенному фрагменту текущей страницы, к следующей или любой странице сайта или к документу другого сайта.
Для задания перехода по гиперссылке в языке HTML используются теги <а></а> с атрибутом href, значением которого является адрес перехода. В качестве адреса может использоваться имя файла другого документа или URL-адрес.
Каждый компьютер, подключенный к Интернету, имеет свой уникальный адрес, который может быть представлен или в числовом виде, например, 204.146.46.133, или определенным сочетанием символов, например, www.microsoft.com. Поскольку каждый компьютер имеет свою уникальную структуру каталогов и файлов, то и каждая Web-страница также имеет уникальный адрес, называемый URL (Uniform Resource Locator - Унифицированный указатель ресурсов). Как видно из названия, URL может указывать не только на страницы Web, но также и на другие ресурсы Интернета, например, FTP (File TransferProtocol - Протокол передачи файлов) - хранилища файлов. В самом общем виде URL включает в себя указатель на протокол, который применяется для доступа к ресурсу - http, ftp и др. - и символьный адрес компьютера в сочетании с именем конкретного файла в структуре каталогов этого компьютера. Например, URL- адрес http://www.chat.ru/user/faq.html состоит из указателя на протокол http, который применяется для доступа к Web, имени компьютера www.chat.ru и имени файла-документа faq.html, который находится в каталоге user.
Из сказанного следует, что каждой Web-странице соответствует свой HTML-файл. Однако вы можете заметить, что во многих URL-адресах отсутствует имя файла, например, http://www.microsoft.com. Тем не менее, в окне браузера все же появляется конкретная страница. Дело в том, что администраторы Web-серверов могут указать на своих узлах некоторые HTML-файлы, которые выводятся по умолчанию, если имя файла в URL явно не задано. Обычно эти файлы имеют имена index.html или index.htm.
Посмотрим, как создать переход по ссылке с конца текущего документа spisok.html на первую страницу нашего сайта, т.е. к файлу geoton.html. Чтобы сообщить посетителю сайта о возможности вернуться к первой странице, необходимо предусмотреть между открывающим <а> и закрывающим </а> тегами соответствующий текст, например:
<а href="geoton.html">На первую страницу</а>
Обратите внимание, что адрес ссылки должен быть заключен в кавычки, так как некоторые браузеры могут не понять его без кавычек.
Чтобы ссылка На первую страницу была центрирована, следует ограничить элемент <а> ... </а> тегами <center> и </center>.
<center><a href="geoton.html">Ha первую cтраницу </а> </сепtег>
В окне браузера вы увидите результат примерно такой, как на рис. 7-1.
Рис.7-1. Отцентрированная ссылка.
Ссылка на первую страницу будет подчеркнута и выделена другим цветом - таким, который предусмотрен в вашем браузере для не просмотренных ссылок.
Таким образом, мы осуществили переход по ссылке на другую страницу сайта. Теперь создадим гиперссылку для перехода с первой страницы - geoton.html - на вторую - spisok.html. Для ссылки логичней всего будет использовать текстовый фрагмент о нашей деятельности, так как список на второй странице раскрывает содержание именно этого фрагмента текста. Поэтому нам нужно в файле geoton.html поместить открывающий тег <а> с атрибутом href ="spisok.html" перед фрагментом текста о нашей деятельности, а закрывающий тег </а> - после него.
Скорее всего, что когда вы просмотрите результат в браузере, вы обнаружите, что ссылка о нашей деятельности видна очень плохо или вообще не видна. Это связано с тем, что цвет, которым браузер отображает непросмотренные ссылки, совпадает с цветом фона вашего документа. В таком случае цвет ссылок следует изменить, воспользовавшись атрибутами link и vlink тега <body>. Атрибут link определяет цвет непросмотренной ссылки, a vlink - просмотренной. Еще один атрибут - alink определяет цвет ссылки в момент, когда на ней установлен указатель мыши и нажата левая кнопка.
Установим для непросмотренной ссылки белый цвет (white), для просмотренной - светло-зеленый (lime), а для ссылки в момент щелчка мышью - красный (red).
Если вы устанавливаете какой-либо из атрибутов: bgcolor, text, link, vlink, alink – то устанавливайте их все. Иначе, например, установленный вами фоновый цвет может совпасть с цветом текста, установленным пользователем в браузере.
<body bgcolor=blue text=yellow link=white vlink=lime alink=red>
Теперь в программе просмотра ссылка четко видна.
Если ссылка плохо видна, вы можете вставить для текущей страницы в теге <body> атрибуты link, vlink и alink с подходящими значениями цветов.
Вставить переход в документе можно не только с текстовой ссылки, но также и с рисунка. Посмотрим, как вставить переход с рисунка на вторую страницу. Обратите внимание: пока переход не вставлен, указатель мыши при установке на рисунке имеет форму стрелки.
Для создания такой ссылки достаточно в файле geoton.html вставить открывающий тег <а href=”spisok.html”> перед тегом <img src=CLOUD.GIF border=1> и закрывающий тег </а> после него.
Рис. 7-2. Окончательный HTML-код файла geoton.html
В окне браузера вокруг рисунка вы увидите тонкую рамку.
Создавая в этом разделе ссылки на страницы нашего сайта, мы использовали в качестве адреса имя файла. При таком указании адреса браузер всегда ищет файл в текущем каталоге. Если бы нужный файл - spisok.html - находился, предположим, в подкаталоге Doc текущего каталога, то в адресе необходимо было бы указать путь к нему от текущего каталога: <а href="Doc\spisok.html">.
Такая ссылка, в которой адрес указывается относительно текущего каталога на том же компьютере, называется относительной.
Вы можете также использовать в ссылках полный URL-адрес, указывающий на файл, находящийся в определенном каталоге определенного компьютера в сети, например: http://www.intel.com/help/index.html. Такая ссылка называется абсолютной. В то время как относительные ссылки указывают на файлы, расположенные на том же самом компьютере, абсолютные ссылки служат для представления адресов документов на других компьютерах в Интернете.
До сих пор мы создавали документы, в которых текст располагался в одной колонке. На практике часто возникает необходимость расположить текст в двух или трех колонках. Помочь в этом может таблица. Кроме того, таблица, состоящая из одной ячейки, может эффектно выделить фрагмент текста, на который вы хотите обратить внимание читателя. Очень удобно чередовать в ячейках таблицы, рисунки и текст. Ну и конечно же, таблица нужна для отображения информации в табличном виде. Часто таблица используется для представления меню. Создадим в новом файле таблицу из одной колонки, в ячейках которой, как в меню, представим ссылки на имеющиеся и другие, еще не созданные страницы сайта. Ведь сайт может содержать десятки страниц. Поэтому очень важно иметь возможность быстро выбирать нужную страницу из меню. Это меню мы затем поместим у левого края экрана так, чтобы оно постоянно оставалось в поле зрения пользователя.
<html>
<head>
<title>Меню</title>
</head>
<body bgcolor=silver>
</body>
</html>
Каждая таблица начинается тегом <table> и заканчивается тегом </table>. Внутри этого тега можно включать следующие свойства:
Border – определяет ширину рамки обрамления таблицы
Width – определяет ширину таблицы на странице
Определение таблицы может выглядеть так
TABLE BORDER ''10'' WIDTH ''100%''.
Далее можно ввести название таблицы. Это можно сделать так
<CAPTION ALIGN=''TOP''> Страницы сайта </CAPTION>.
Первая строка таблицы может содержать заголовки столбцов. Определите ее следующим образом:
<TR BGCOLOR=''YELLOW''ALIGN=''CENTER''> <TH>Названия
Строки таблицы образуются парным тегом <tr></tr>, между которыми располагаются парные теги <td></td>. Каждая пара этого тега образует один столбец. Между открывающим <td> и закрывающим </td> тегами помещается текст или любое другое содержимое ячейки. Учитывая сказанное, код HTML, описывающий нашу таблицу, состоящую из одного столбца и содержащую пункты меню с названиями страниц сайта, должен иметь следующий вид:
<table>
<tr><td>Главная страница</td></tr>
<tr><td>Чем Мы занимаемся?</td></tr>
<tr><td>О нашей компании</td></tr> ,,;
<tr><td>Hoвости</td></tr>
<tr><td>O6opyдование</td></tr>
<tr><td>Cneu. ПО</td></tr>
<tr><td>Наши партнеры</td></tr>
<tr><td>Прайс-лист</td></tr>
<tr><td>Связь с компанией</td></tr>
</table>
Рис.8-1. Таблица из одного столбца
Созданная нами таблица располагается у левого края экрана. Это положение можно изменить, использовав в открывающем теге <table> атрибут align=center для выравнивания таблицы по центру или атрибут align=right - для выравнивания по правому краю окна браузера. Пункты меню расположены один под другим, а края таблицы и ячеек не видны. Это связано с тем, что по умолчанию рамка и ячейки таблицы не показываются. Чтобы включить их отображение, следует использовать в теге <table> атрибут border, указав в качестве его значения толщину рамки в пикселах
<table border=l>
Таблица отображается с рельефными границами (рис. 8-2).
Рис.8-2. Рельефные границы таблицы
Размер таблицы обычно устанавливается браузером автоматически так, чтобы отображалось все ее содержимое. Однако вы можете установить фиксированную ширину таблицы в пикселах с помощью атрибута width.
<table border=1 width=140>
В окне браузера ширина таблицы уменьшится так, что в большинстве ячеек текст будет отображаться в двух строках (рис. 8-3).
Рис.8-3. Таблица с фиксированной шириной столбца.
При использовании для формирования столбцов таблицы тегов <td></td> данные в ячейках представляются шрифтом нормального текста и по умолчанию выравниваются по левому краю ячеек. Если же требуется выделить данные в ячейках, например, заголовки столбцов или строк таблицы, то вместо тегов <td></td> удобно использовать теги <th></th>. Текст в элементах <th></th> обычно выделяется полужирным начертанием и выравнивается по центру ячеек. Наше меню будет выглядеть лучше, если его пункты будут центрированы в ячейках и выделены полужирным шрифтом. Поэтому заменим в HTML-коде элементы <td></td> элементами <th></th>.
|
Рис.8-4. HTML-код файла menu.html |
Рис.8-5.Таблица с тегами th |
В тегах <td> и <th> вы можете использовать следующие атрибуты:
Вы можете также изменить цвет любой ячейки, столбца, строки или всей таблицы, вставив атрибут bgcolor соответственно в тег <th>, <tr> или <table>.
Нам осталось теперь создать ссылки из двух первых пунктов меню на соответствующие страницы нашего сайта. Так как остальные страницы еще не созданы, то ограничимся этими двумя ссылками. Как и прежде, воспользуемся тегами <а></а> с атрибутом href. В качестве значения этого атрибута для первого пункта меню - Главная страница - следует указать файл geoton.html, т.е. href="geoton.html", а для второго - Чем мы занимаемся? – файл spisok.html, т.е. href="spisok.html".
Далее мы разделим экран по вертикали на два окна так, чтобы в окне у левого края экрана постоянно отображалась таблица с меню, а справа от нее - страницы нашего сайта, которые пользователь сможет выбирать из меню. Обычно при переходе по ссылке новый документ отображается в том же окне, что и исходный, в котором была ссылка. Чтобы отобразить его в другом окне, необходимо в открывающем теге <а> использовать атрибут target, параметром которого должно быть имя того окна, в которое будет загружен документ. Позже мы подробнее поговорим об этом и присвоим соответствующему окну имя " frame ", а сейчас укажем это имя как значение атрибута target в ссылке: target="frame".
Еще раз подчеркнем, что в этом разделе Web-страница будет загружаться в то же окно браузера, в котором находится ссылка, а атрибут target позволит загружать документ в другое окно, которое мы создадим в следующем разделе.
<tr><th><a href=”geoton.html" target=”frame”>Главная страница </a> </th></tr>
<tr><th><a href="spisok.html" target=”frame">Чем мызанимаемся?</а> </th></tr>
Окончательный вид файла menu.html с HTML-кодом показан на рис. 8-6, а таблицы в браузере - на рис. 8-7.
Рис.8-6. Окончательный вид файла menu.html c HTML-кодом таблицы
Рис.8-7. Таблица со ссылками в окне браузера
Теперь первые два пункта меню выделены цветом и подчеркнуты как ссылки. Проверим, как работают эти ссылки.
С помощью фреймов экран разделяется на несколько окон, в каждом из которых отображается содержимое отдельной страницы. Используя подобным образом технологию фреймов, можно одновременно загрузить в одно окно браузера несколько Web-страниц.
На Рис. 9-1 приведен типичный пример применения фреймов. Окно браузера разбито по вертикали на два фрейма. В левом отображается диалог поисковой системы, а справа - наша первая Web-страница. Размер фрейма может изменяться пользователем прямо на экране с помощью мыши. Каждый фрейм имеет собственный адрес, что позволяет отображать его независимо от других фреймов, и собственное имя, позволяющее переходить к нему из других фреймов. Такие свойства фреймов позволяют размещать в одном фрейме информацию, которую автор считает необходимым постоянно показывать пользователю. Это может быть логотип фирмы, набор управляющих кнопок, меню и т.д. С помощью фреймов можно создавать также окна запросов, когда в одном фрейме находится собственно запрос, а в другом - его результаты.
Рис.9-1. Окно браузера с фреймами
Посмотрим, как с помощью фреймов поместить в окне браузера меню для перехода на другие страницы сайта и сами страницы.
Для описания фреймов используется специальный HTML-файл.
<html>
<head>
< title >Компания ГEOTOH</title>
</head>
</html>
Вместо тегов <body></body> в файле, описывающем фреймы, используется пара тегов <frameset></frameset> с атрибутами rows или cols, определяющими, как делится экран - по горизонтали или по вертикали. В качестве значений этих атрибутов можно использовать числовое значение высоты или ширины фрейма в пикселах или в процентах от 1% до 100%. Например, если вы хотите разделить окно браузера по горизонтали на два равных по размеру фрейма, то код HTML должен быть таким:
<frameset rows="50%,50%”>
Обратите внимание: значения атрибутов отделяются один от другого запятой. Чтобы разделить окно браузера по вертикали на два фрейма шириной 200 и 600 пикселов, следует написать:
<frameset cols="200,600">
Однако фактическая ширина и высота окна фрейма зависит от текущего разрешения монитора. Поэтому, если у пользователя установлено разрешение, например, 1024x768 пикселов, т.е. ширина экрана - 1024 пиксела, то часть экрана может остаться незаполненной. Поэтому рекомендуется задавать размеры фреймов в процентах так, чтобы их сумма была равна 100%. Если все же необходимо для одного из окон указать фиксированный размер в пикселах, то размер другого окна можно не указывать, заменив его значение символом *. В этом случае браузер сам подберет нужный размер для второго окна.
Создадим для отображения нашего сайта два вертикальных фрейма. Для первого фрейма, в котором будет выводиться меню, установим фиксированную ширину - 160 пикселов, а размер второго предоставим определить браузеру, заменив его звездочкой *.
<frameset cols="160,*">
</frameset>
Таким образом, мы указали, что окно браузера должно быть разделено по вертикали на два фрейма. Для описания каждого фрейма в отдельности используются одиночные теги <frame>, которые должны находиться внутри элемента <frameset>.. .</frameset>. Обязательным атрибутом тега <frame> является src, значение его - адрес документа, который должен находиться в данном фрейме. Так как в первом фрейме будет находиться файл menu.html, то данный тег следует записать так:
<frame src="../files/71/menu.html">
Во второй фрейм должен загружаться файл geoton.html, поэтому второй тег <frame > будет таким:
<frame src="../files/71/geoton.html”>
Чтобы во второй фрейм могли загружаться также и все остальные страницы сайта - spisok.html и другие, которые, возможно, будут созданы, - необходимо с помощью атрибута name присвоить данному фрейму имя, которое, будучи указано в ссылках любого документа в качестве значения атрибута target, определит, в какой именно фрейм следует загрузить документ. Напомним, что в общем случае, при переходе по ссылке новый документ открывается в том же окне. Именно для того, чтобы при переходе по ссылкам нашего меню страницы открывались не в первом фрейме, в котором расположено меню, а во втором, мы использовали в предыдущем разделе для гиперссылках меню атрибут target со значением: target="frame", где "frame" - это имя второго фрейма. И теперь имя "frame" следует присвоить второму фрейму, в котором должен открываться файл geoton.html. Поэтому второй тег <frame src> в окончательном виде должен быть записан так:
<frame src="../files/71/geoton.html" name="frame">
Окончательный код файла index.html в окне программы Блокнот (Notepad) должен быть таким, как на рис. 9-2.
Рис.9-2. Окончательный код файла index.html
Имя index.html должно обязательно присваиваться файлу с главной страницей каждого сайта. Именно этот файл открывается по умолчанию при обращении к Web-узлу, если не указано другое имя файла. На некоторых сайтах имя главной страницы может быть lndex.htm, a index.html отображается не как страница, а как папка с именами файлов. Это надо уточнять у администратора узла.
Теперь можно просмотреть, как выглядят созданные фреймы.
Проверим, как работают ссылки меню.
Обратите внимание, что каждый фрейм имеет свои полосы прокрутки. При необходимости их отображение можно отменить. Для этого достаточно в теге <frame> указать атрибут scrolling=no.
<frame src="../files/71/menu.html" scrolling=no>
В окне браузера Web-страница примет вид примерно как на рис. 9-4.
Рис. 9-3. Фреймы созданы
Рис. 9-4. Выключена вертикальная полоса прокрутки
Для закрепления пройденного материала основные теги фреймовых структур и их параметры приведены в табл. 9.1.
Таблица 9.1. Основные теги и параметры фреймовых структур
|
Тег |
Параметры |
Функция |
|
FRAMESET |
Определение фреймовой структуры |
|
|
COLS |
Размер окна фрейма по вертикали в пикселах или процентах |
|
|
ROWS |
Размер окна фрейма по горизонтали в пикселах или процентах |
|
|
FRAME |
Тег описания свойств отдельного фрейма |
|
|
SRC |
Указывается имя файла для загрузки в окно фрейма |
|
|
NAME |
Указывается имя окна фрейма |
|
|
SCROLLING |
Включается или отключается полоса прокрутки в окне фрейма |
|
|
NORESIZE |
Запрещает изменение размеров фрейма при просмотре |
|
|
MARGINWIDTH |
Определяет размер левых и правых полей фрейма в пикселях |
|
|
MAGINHEIGHT |
Определяет размер верхних и нижних полей фрейма в пикселях |
|
|
FRAMEBORDER |
Определяет размер границы фрейма |
|
|
NOFRAMES |
Тег информации для браузеров без поддержки |
Существуют специальные зарезервированные имена действий, по которым происходит загрузка документов на сайтах с фреймовой структурой: "_blank", "_self", "_parent" И "_top".
Действие:
<А HREF="filel.html" TARGET="_blank">
осуществляет загрузку документа в новое окно без имени, определяемого параметром NAME тега <FRAME>, поэтому этот вариант исключает изменение содержимого созданного окна.
Действие
<А HREF="fiIe2.html" TARGET="_self">
открывает документ в текущем окне.
Действие
<А HREF="file3.html" TARGET="_parent">
производит загрузку документа в область, занимаемую родительским фреймом текущего фрейма.
Действие
<А HREF="fiie4.html" TARGET="_top">
вызывает загрузку документа в полном окне.
В данном случае не был задействован параметр NAME в теге описания текущего фрейма <FRAME>.
Как видите, фреймы - удобное и эффективное средство для размещения информации на Web-страницах. Используя его, не следует терять чувства меры. Слишком большое количество окон на экране не улучшает восприятие информации. Не располагайте на экране более трех фреймов и старайтесь не применять их без необходимости.
Рассмотрим основные преимущества и недостатки применения фреймовых структур. Начнем, как водится, с положительных сторон:
А теперь — несколько недостатков фреймов:
Если HTML-документ слишком большого размера и нет возможности разбить его на несколько отдельных файлов, можно прибегнуть к помощи внутренних гиперссылок, перемещающих пользователя в пределах одной Web-страницы. Такой подход бывает полезен, например, при составлении технической документации или юридических договоров, где быстрый переход от одного пункта документа к другому играет первостепенную роль.
Структура внутренней гиперссылки включает две части — сама ссылка и ее именной идентификатор, позволяющий переместиться в нужное место электронного документа.
Идентификатор состоит из знака диез плюс имя элемента, аналогичное значению параметра HREF самой гиперссылки)
<u1>
<li>Созданием новых и развитием существующих автоматизированных систем управления технологическими процессами на промышленных объектах .
<li> планированием и установкой "под ключ" локальных и глобальных вычислительных систем.
<li>Разработкой и внедрением систем корпоративных сетей с построением кабельных систем (для офисов), а также систем передачи данных с использованием телефонных, оптоволоконных и радиоканалов
<li>Внедрением проектных решений по созданию и использованию глобальных информационных магистралей для обеспечения совместных работ систем связи, видеоконференций и мультимедиа.
<li> Созданием систем слежения и видеонаблюдения.
</ul>
Пример составления внутренних гиперссылок приведен в листинге 10-1.
<HTML>
<HEAD>
<title>Пример составления внутренних гиперссылок</title>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="black" LINK="#FFOOOO" ALINK="green" VLINK="blue">
<a name="Начало">
Описания видов деятельности фирмы
<P><A HREF="#Podbor">Подбор оборудования</A></P>
<P><A HREF="#span">Сопровождение эксплуатации ВТ</A></P>
<P><A HREF="#table">Настройка и установка ПО</A></P>
<HR ALIGN="center" WIDTH="95%" NOSHADE>
<P ALIGN="justify">
<A NAME="Podbor"></A>
"Подбор оборудования"—
<p>
<HR ALIGN="center" WIDTH="60%" NOSHADE COLOR="green">
<p>
<HR ALIGN="center" WIDTH="95%" COLOR="gray">
<p>
<p>
<HR ALIGN="center" WIDTH="60%" NOSHADE COLOR="green">
<p>
<HR ALIGN="center" WIDTH="95%" COLOR="gray">
<p>
<p> Вернуться к <a href="#Начало">перечню </A></p>
<A NAME="span"></A>
Сопровождение эксплуатации ВТ
SPAN - Идентификатор сопровождения
<HR ALIGN="center" WIDTH="60%" NOSHADE COLOR="green">
<p>
<HR ALIGN="center" WIDTH="60%" NOSHADE COLOR="green">
<p>
<HR ALIGN="center" WIDTH="95%" COLOR="gray">
<p>
<p>
<HR ALIGN="center" WIDTH="60%" NOSHADE COLOR="green">
<p>
<HR ALIGN="center" WIDTH="95%" COLOR="gray">
<p>
<p> Вернуться к <a href="#Начало">перечню </A></p>
<A NAME="table"></A>
table-Настройка и установка ПО
<HR ALIGN="center" WIDTH="60%" NOSHADE COLOR="green">
<p>
<HR ALIGN="center" WIDTH="60%" NOSHADE COLOR="green">
<p>
<HR ALIGN="center" WIDTH="95%" COLOR="gray">
<p>
<HR ALIGN="center" WIDTH="95%" COLOR="gray">
<p>
<HR ALIGN="center" WIDTH="60%" NOSHADE COLOR="green">
<p>
<HR ALIGN="center" WIDTH="95%" COLOR="gray">
<p>
<HR ALIGN="center" WIDTH="60%" NOSHADE COLOR="green">
<HR ALIGN="center" WIDTH="95%" COLOR="gray"></BODY>
<p> Вернуться к <a href="#Начало">перечню </A></p>
</HTML>
Листинг 10-1. Пример составления внутренних гиперссылок
Следует заметить, что для обозначения места, в которое нужно перенести пользователя документа, применяется пустая конструкция <А NAME="Podbor"></A>. Дело в том, что при создании внутренних ссылок визуально выделять расположение именного идентификатора не имеет смысла, потому что основная цель — переход в соответствующий раздел текущего документа.
Для лучшего усвоения материала основные параметры тега <А> приведены в табл. 10.1.
Таблица 10.1. Параметры тега <А>
|
Параметр |
Функция |
|
HREF |
Указание адреса перехода по гиперссылке |
|
TARGET |
Определение места назначения перехода(текущее/новое окно) |
|
STYLE |
Задание стилевого шаблона |
|
CLASS |
Указание класса стилевого шаблона |
|
NAME |
Именной идентификатор внутренней гиперссылки |
Перед созданием Web-страниц, полезно продумать план построения сайта с функциональной точки зрения.
Это значит надо определить:
В соответствии с целью сайта важно продумать его содержание и определить вид информации, которая будет на нем представлена. Далее, надо продумать сколько страниц будет содержать сайт и каким образом они будут взаимосвязаны.
Особое внимание надо уделить главной или загрузочной странице сайта, т.е. той странице, которая открывается при первом обращении к сайту. Обычно ее файл носит название Index.html. Главная страница представляет общее содержание сайта, его оглавление и набор ссылок, обеспечивающих связь с остальными частями сайта.
По типу структуры Web-сайты можно разделить на несколько видов.
.
3. Таблица. У посетителей сайта имеется возможность переходить на страницы, принадлежащие одной группе информации ( по горизонтали) и также переходить на страницы из других групп информации (по вертикали). Чтобы посетитель мог сориентироваться как ему удобнее выполнить переход часто создают дополнительную страницу карты Web-узла со схемой отношений между страницами в таблице. С карты Web-узла можно перейти на любую другую страницу, а на любой странице сайта должна быть гиперссылка на страницу карты Web-узла.
4. Комбинированная. Если порядок просмотра сведений сайта не важен, то страницы Web-сайта могут быть как угодно связаны между собой.
На Web-сайте имеются специальные страницы, дизайн которых выделяется. К таким страницам относятся:
Главная страница – здесь важна быстрая загрузка и размещение страницы целиком на экране пользователя;
Контактная информация – детальную информацию о том, как посетители сайта могут связаться с автором по разным вопросам рекомендуется вынести на отдельную страницу контактов, а ссылку на эту страницу разместить на каждой странице сайта.
Карта узла необходима, когда Web-узел имеет много страниц или когда связи между страницами неочевидны.
Страница часто задаваемых вопросов (FAQ) – это эффективный способ сообщить пользователям информацию о теме вашего сайта или о том, как он работает.
Средства обратной связи можно разместить в виде анкеты или гостевой книги и поместить их на отдельную страницу.
Страницы для печати могут понадобиться, если вы хотите дать возможность посетителю компактно распечатать информацию, размещенную на страницах сайта. Такие страницы форматируются без рамок, без гипертекста, с минимумом оформительских элементов.
Наиболее важную информацию стараются помещать всегда в начале страницы.
Если Web-узел состоит из одной страницы, то на ней надо выделить заголовок с логотипом, область с основной информацией, панель ссылок и контактные адреса.
Создать Web-страницы сайта организации:
Вариант1.Организация – оптовая база продовольственных товаров;
Вариант 2. Организация – розничный магазин продовольственных товаров;
Вариант 3. Организация – розничный магазин косметики;
Вариант 4. Организация – розничный магазин одежды для мужчин;
Вариант 5. Организация – розничный магазин одежды для женщин;
Вариант 6. Организация – розничный магазин бытовой техники;
Вариант 7. Организация – розничный магазин компьютерной техники;
Вариант 8. .Организация – оптовая база строительных товаров;
Вариант 9. Организация – образовательное учреждение;
Вариант 10. Организация оказывающая медицинские услуги.
Русскоязычные ресурсы:
Зарубежные ресурсы:
Рис 1-2. Текст Web-страницы в окне браузера
Главная страница
Текст слайда
екст слайда
Текст слайда
Текст слайда