: , <TITLE> и <TITLE> эквивалентны. </div> <div ID="sdfootnote2"> 1 некоторые поисковые машины не работают с титулами длиной более 64 символов </div> <div ID="sdfootnote3"> 1 Точка с запятой является частью escape последовательности,

Главная Учебники - Разные Лекции (разные) - часть 19

: , и <TITLE> эквивалентны. </div> <div ID="sdfootnote2"> 1 некоторые поисковые машины не работают с титулами длиной более 64 символов </div> <div ID="sdfootnote3"> 1 Точка с запятой является частью escape последовательности,</h1> <table width='100%' class='list_table'> <tr> <td class='border_cell'> </td></tr> <tr> <td valign='top' width='70%' class='border_cell'> Министерство образования и науки РФ Муниципальное общеобразовательное учреждение средняя общеобразовательная школа № 7 по информатике на тему: «Язык гипертекстовой разметки HTML » Выполнила: учащаяся 11Б класса МОУСОШ № 7 Мельникова Евгения Проверил: учитель информатики Стариков Валерий Алексеевич Новочеркасск 2007 <a name="_Toc164404862"></a> <a name="_Toc164403498"></a> <a name="_Toc163190205">Содержание</a> <a href="#_Toc166378842">Введение. - 3 -</a> <a href="#_Toc166378843">Основная часть. - 4 -</a> <a href="#_Toc166378844">Что такое HTML? - 4 -</a> <a href="#_Toc166378845">Зачем нужно изучать HTML? - 4 -</a> <a href="#_Toc166378846">Что Вам понадобится для освоения HTML? - 4 -</a> <a href="#_Toc166378847">Краткая история HTML - 5 -</a> <a href="#_Toc166378848">Тэги HTML - 6 -</a> <a href="#_Toc166378849">Структура Web-страницы. - 6 -</a> <a href="#_Toc166378850">Уровни заголовков <Hx> - 7 -</a> <a href="#_Toc166378851">Escape последовательности (символьные объекты). - 8 -</a> <a href="#_Toc166378852">Тэг абзаца - 8 -</a> <a href="#_Toc166378853">Центрирование элементов документа - 8 -</a> <a href="#_Toc166378854">Элемент <PRE> </PRE> - 9 -</a> <a href="#_Toc166378855">Фоновые рисунки - 9 -</a> <a href="#_Toc166378856">Управление цветом. - 9 -</a> <a href="#_Toc166378857">Раскладка цветовой гаммы по RGB-составляющим - 10 -</a> <a href="#_Toc166378858">Стили в HTML. - 12 -</a> <a href="#_Toc166378859">Тэги списков - 12 -</a> <a href="#_Toc166378860">Нумерованные списки - 13 -</a> <a href="#_Toc166378861">Ненумерованные списки - 13 -</a> <a href="#_Toc166378862">Список определений - 13 -</a> <a href="#_Toc166378863">Гипертекстовые ссылки - 13 -</a> <a href="#_Toc166378864">HTML-графика. - 13 -</a> <a href="#_Toc166378865">Размеры изображений - 14 -</a> <a href="#_Toc166378866">Пример включения графики в документ: - 14 -</a> <a href="#_Toc166378867">Размещение изображений - 14 -</a> <a href="#_Toc166378868">Размещение графики в тексте - 14 -</a> <a href="#_Toc166378869">Изображения без текста - 15 -</a> <a href="#_Toc166378870">Альтернативный текст для графики - 15 -</a> <a href="#_Toc166378871">Фоновые изображения - 15 -</a> <a href="#_Toc166378872">Внешние изображения, звуки, анимация. - 15 -</a> <a href="#_Toc166378873">Таблицы - 16 -</a> <a href="#_Toc166378874">Базовые элементы таблиц - 16 -</a> <a href="#_Toc166378875">Атрибуты таблиц - 17 -</a> <a href="#_Toc166378876">Формат таблиц - 17 -</a> <a href="#_Toc166378877">Другие элементы HTML-таблиц. - 18 -</a> <a href="#_Toc166378878">Формы на Web-страницах - 19 -</a> <a href="#_Toc166378879">Цель и место размещения документа Web - 20 -</a> <a href="#_Toc166378880">Тестирование и публикация Web-сайта. - 20 -</a> <a href="#_Toc166378881">Несколько полезных советов по оформлению сайта. - 21 -</a> <a href="#_Toc166378882">Учебно-методический комплекс по теме «HTML». - 22 -</a> <a href="#_Toc166378883">Пояснительная записка. - 22 -</a> <a href="#_Toc166378884">Презентация Power Point. - 23 -</a> <a href="#_Toc166378885">Исследование MS EXCEL. - 23 -</a> <a href="#_Toc166378886">Тестовая программа на языке Visual Basic. - 23 -</a> <a href="#_Toc166378887">Web-страница. - 25 -</a> <a href="#_Toc166378888">Руководство пользователя. - 26 -</a> <a href="#_Toc166378889">Заключение. - 27 -</a> <a href="#_Toc166378890">Литература. - 29 -</a> <a name="_Toc166378842"></a> <a name="_Toc164404863">Введение.</a> <a name="_Toc164404864"></a> Данная тема — «Язык гипертекстовой разметки HTML» — выбрана мною не случайно. Ведь век, в который мы живем — век компьютерный. Количество информации в современном мире стремительно нарастает. Человек оказывается погруженным в море информации. И для того, чтобы в этом море не «утонуть», необходимо обладать знаниями и умениями в области информационных технологий. Компьютерные сети создают реальную возможность быстрого и удобного доступа пользователя ко всей информации, накопленной человечеством за всю историю. Еще 10 лет назад казалось невозможным, что Internet станет неотъемлемой частью жизни человека. А сейчас электронная почта и телеконференции, поиск информации во Всемирной паутине и в файловых архивах, интерактивное общение и покупки в Интернет-магазинах настолько прочно вошли в нашу жизнь, что трудно представить себе человека живущего без Internet’а. А, если разобраться подробнее, из чего состоит Internet? Из Web-сайтов и Web-страниц, которые пишутся на языке HTML . Мне, как и каждому, хотелось научиться создавать свои собственные Web-страницы. Поэтому я начала изучать язык гипертекстовой разметки. И это оказалось настолько интересно, что, выбирая тему а, я, конечно, выбрала именно HTML. И в своем е я подробно (и понятно) рассказала все, что я узнала за время изучения. Сейчас существует множество различных самоучителей и учебников, в которых тоже подробно и понятно рассказывается об HTML. Но может, именно мой реферат поможет кому-то из новичков освоить эту интереснейшую тему. <a name="_Toc166378843"></a> <a name="_Toc164404865">Основная часть.</a> <a name="_Toc166378844">Что такое HTML?</a> · HyperText Markup Language (HTML) является стандартным языком, предназначенным для создания гипертекстовых документов в среде WEB. HTML-документы могут просматриваться различными типами WEB-браузеров. Когда документ создан с использованием HTML, WEB-браузер может интерпретировать HTML для выделения различных элементов документа и первичной их обработки. Большинство документов имеют стандартные элементы, такие, как заголовок, параграфы или списки. Используя тэги HTML можно обозначать данные элементы, обеспечивая WEB-браузеры минимальной информацией для отображения данных элементов, сохраняя в целом общую структуру и информационную полноту документов. Все что необходимо, чтобы прочитать HTML-документ — это WEB-браузер, который интерпретирует тэги HTML и воспроизводит на экране документ в виде, который ему придает автор. <a name="_Toc166378845">Зачем нужно изучать HTML?</a> Можно работать на Web без знания языка HTML, так как тексты HTML могут создаваться различными специальными редакторами и конвертерами. Однако писать непосредственно на HTML нетрудно. Возможно, это даже легче, чем изучать HTML-редактор или конвертер, которые часто ограничены в своих возможностях, содержат ошибки или производят плохой HTML код, который не работает на различных платформах. Способы, которыми теги HTML могут сочетаться, определяются терминами элементов и их классификацией. Гораздо удобнее определить, например, что элемент H1 может содержать только текстовые элементы, чем давать длинный список подходящих элементов, особенно, если учесть, что один и тот же список должен появляться во многих контекстах, и этот список может изменяться при добавлении новых текстовых элементов к будущим версиям HTML. На самом деле это не так. HTML не является языком программирования, это язык разметки текстовых документов. В нем необязательно точное соответствие синтаксису, объявление переменных, описание процедур и классов и прочих атрибутов «обычных» языков программирования. Если вы не укажете такой важный элемент как TITLE или BODY, то браузер просто будет использовать соответствующее значение по умолчанию. Если вы сделаете синтаксическую ошибку, самое страшное, что случится — искажение вида документа в окне браузера, при котором ошибку легко найти и исправить. Вы никогда не будете мучиться с отладкой текста, как всегда случается при написании более-менее сложных программ на языке программирования. Вы сами не заметите, как начнете с легкостью писать HTML-код самостоятельно. <a name="_Toc166378846">Что Вам понадобится для освоения HTML?</a> Для освоения HTML Вам понадобятся две вещи: P Любой браузер, т.е., программа, пригодная для просмотра HTML-файлов. P Любой редактор текстовых файлов, поддерживающий русский язык в выбранной Вами кодировке. Если на Вашем компьютере установлен Windows, вполне подойдет Notepad. В настоящее время широко используются два типа редакторов HTML: Редакторы типа «что видишь, то и получишь» (Netscape Navigator Gold, Microsoft Front Page). Пользователь не видит «внутренностей» документа, с которым он работает, точно так же, как при работе с текстовым процессором типа Microsoft Word или Word Perfect. Кстати говоря, существует довольно много конвертеров, способных преобразовывать документы, созданные в Microsoft Word или Word Perfect, в HTML-документы. Редакторы собственно HTML-текстов (HotDog, Ken Nesbitt Web Editor и многие другие). В процессе работы пользователь видит внутреннее содержание HTML-файла и может изменять его либо вручную, либо вызывая команды меню для вставки определенных элементов HTML. Работа с таким редактором очень похожа на работу с интерактивной средой программирования типа Microsoft Visual Basic или Borland Delphi. <a name="_Toc166378847">Краткая история HTML</a> Язык HTML был разработан Тимом Бернерс-Ли во время его работы в CERN и распространен браузером Mosaic, разработанным в NCSA. В 1990-х годах он добился особенных успехов благодаря быстрому росту Web. В это время HTML был расширен и дополнен. В Web очень важно использование одних и тех же соглашений HTML авторами Web-страниц и производителями. Это явилось причиной совместной работы над спецификациями языка HTML. HTML 2.0 (ноябрь 1995, см. [RFC1866]) был разработан под эгидой Internet Engineering Task Force (IETF) для упорядочения общепринятых положений в конце 1994 года. HTML+ (1993) и HTML 3.0 (1995) — это более богатые версии языка HTML. Несмотря на то, что в обычных дискуссиях согласие никогда не было достигнуто, эти черновики привели к принятию ряда новых свойств. Усилия Рабочей группы World Wide Web Consortium по HTML в упорядочении общепринятых положений в 1996 привели к версии HTML 3.2. Большинство людей признают, что документы HTML должны работать в различных браузерах и на разных платформах. Достижение совместимости снижает расходы авторов, поскольку они могут разрабатывать только одну версию документа. В противном случае возникает еще больший риск, что Web будет представлять собой смесь личных несовместимых форматов, что в конечном счете приведет к снижению коммерческого потенциала Web для всех участников. В каждой версии HTML предпринималась попытка отразить все большее число соглашений между работниками и пользователями этой индустрии, чтобы усилия авторов не были потрачены впустую, а их документы не стали бы нечитаемыми в короткий срок. Язык HTML разрабатывался с той точки зрения, что все типы устройств должны иметь возможность использовать информацию в Web: персональные компьютеры с графическими дисплеями с различным разрешением и числом цветов, сотовые телефоны, переносные устройства, устройства для вывода и ввода речи, компьютеры с высокой и низкой частотой и т.д. <a name="_Toc166378848">Тэги HTML</a> Документ HTML состоит из элементов, примерами которых могут служить заголовки, параграфы, таблицы, списки и т.п. Элемент может представлять собой обычный текст или содержать внутри другие элементы. Для обозначения различных элементов в HTML служат тэги (tag). Тэг HTML состоит из: - левой открывающей скобки <, - имени тэга с параметрами или без них - правой закрывающей скобки >. Тэги часто используются парами (например, <H1> и </H1>), в которых первый тэг задает начало элемента, второй — его окончание. Завершающий тэг имеет то же имя, что и стартовый, но перед именем ставится косая черта /. Завершающие тэги не имеют параметров. Некоторые элементы могут включать атрибуты, включаемые в качестве параметров в стартовые тэги<a href="#_ftn1" name="_ftnref1">[1]</a> . Не все тэги поддерживаются всеми браузерами. Если какой-либо браузер не поддерживает какой-либо тэг, то он обычно этот тэг просто игнорирует. Элементы HTML можно классифицировать на три основные категории: P заголовочные элементы, т.е. элементы, используемые в элементе HEAD («шапка», заголовок) и содержащие информацию о документе в целом: TITLE, ISINDEX, BASE, META, LINK, SCRIPT, STYLE P блоковые элементы, включающие элементы, которые специфицируют структуру документа, например, разделение на части и параграфы (абзацы): H1, H2, H3, H4, H5, H6, ADDRESS, и элементы P, UL, OL, DL, PRE, DIV, CENTER, BLOCKQUOTE, FORM, ISINDEX, HR, TABLE P текстовые элементы. Текстовыми элементами могут быть: - простой текст, возможно содержащий escape последовательности (например, &) - выражения разметки: EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE - разметка шрифта: TT, I, B, U, STRIKE, BIG, SMALL, SUB, SUP - специальные элементы: A, IMG, APPLET, FONT, BASEFONT, BR, SCRIPT, MAP - элементы формы: INPUT, SELECT, TEXTAREA <a name="_Toc166378849"></a> <a name="_Toc164403500">Структура Web-страницы</a> . HTML Этот элемент говорит программе-навигатору о том, что файл содержит документ HTML. Расширение имени файла .html или .htm также говорит о таком содержимом документа. HEAD Этот элемент идентифицирует заголовок HTML-документа. Составными частями заголовка могут являться титул, мета-тэги и другие элементы. Титул выводится в окне навигатора (обычно в специальной строке сверху). TITLE Этот элемент содержит титул документа и идентифицирует его содержимое в глобальном контексте. Титул иногда выводится в специальном поле окна навигатора (обычно вверху), но не в основном окне. Содержимое этого поля выводится в некоторых каталогах и списках поисковых машин, поэтому следует делать титул максимально информативным. Поле титула используется при WAIS-поиске<a href="#_ftn2" name="_ftnref2">[2]</a> . Необязательно, но элемент HEAD может содержать следующие элементы в добавление к элементу TITLE: элемент BASE, задающий точный базовый адрес ссылок на URL элемент META, дающий различную метаинформацию, например дату истечения срока документа элемент LINK, который также задает метаинформацию, но уже о связях документа с другими документами элементы STYLE и SCRIPT. Ожидается, что в будущем это будут очень важные элементы, но сейчас они еще не используются (так как стандартизация находится в стадии развития). BODY Вторая и наибольшая по размерам часть документа HTML (тело документа), которая содержит контекст документа и отображается в окне навигатора. Описанные ниже тэги включаются между стартовым и оконечным тегами BODY Итак, самая простая Web-страница выглядит следующим образом: <HTML> <HEAD> <TITLE> </TITLE> </HEAD> <BODY> </BODY> </HTML> Переход на новую строку осуществляется с помощью тэга . Этот элемент по своему действию является прямой противоположностью предыдущему. Текст, заключенный между его тегами, будет выведен в одну строку. Длинная строка не уместится на экране, и для ее просмотра придется использовать горизонтальную полосу прокрутки. Провести горизонтальную черту можно с помощью тэга <HR>. Параметры тэга: SIZE — толщина линии в пикселях. WIDTH — ширина линии в пикселях или процентах от ширина окна браузера. ALIGN — расположение на экране (слева/по центру/справа). NOSHADE — позволяет представить линию просто однотонной темной полоской. <a name="_Toc166378850">Уровни заголовков <Hx></a> Когда пишется HTML-документ, текст структурно делится на просто текст, заголовки частей текста, заголовки более высокого уровня и т.д. Первый уровень заголовков (самый большой) обозначается цифрой 1, следующий — 2, и т.д. Большинство браузеров поддерживает интерпретацию шести уровней заголовков, определяя каждому из них собственный стиль. Заголовки выше шестого уровня не являются стандартом и могут не поддерживаться браузером. Заголовок самого верхнего уровня имеет признак "1". Синтаксис следующий: <Hx> Заголовок x-го уровня </Hx> где x — цифра от 1 до 6, определяющая уровень заголовка. <a name="_Toc166378851">Escape последовательности (символьные объекты).</a> Некоторые символы, такие как <, используются в HTML в специальном значении, поэтому должен существовать способ их выражения, как символьных данных внутри самого документа или в URL. Принято использовать следующие нотации (соответствия): <table border="0"> <tr> <td> символ обычное имя (имена) символа </td> <td> HTML запись символа (escape последовательность) </td> </tr> <tr> <td> < символ "меньше чем", левая угловая скобка </td> <td> <<a href="#_ftn3" name="_ftnref3">[3]</a> </td> </tr> <tr> <td> > символ "больше чем", правая угловая скобка </td> <td> > </td> </tr> <tr> <td> & амперсанд </td> <td> & </td> </tr> <tr> <td> " двойные кавычки </td> <td> " </td> </tr> <tr> <td> знак копирайт, © </td> <td> © </td> </tr> <tr> <td> знак зарегистрированной торговой марки, ® </td> <td> ® </td> </tr> <tr> <td> непрерывный пробел </td> <td>   </td> </tr> </table> Двойные кавычки (") могут использоваться и в пределах обычного текста. В escape последовательности важен вариант написания символов, то есть различаются заглавные и строчные буквы. Например, амперсанд (&) не может быть представлен как &AMP вид записи. <a name="_Toc166378852">Тэг абзаца </a> Элемент абзаца (paragraph) — один из самых полезных. Он позволяет использовать только начальный тег, так как следующий элемент <Р> обозначает конец предыдущего и начало следующего абзаца. Конечный тег удобно использовать в тех случаях, когда по смыслу необходимо обозначить конец абзаца. Вместе с элементом <Р> можно использовать атрибут выравнивания align. позволяют выравнивать абзац по левому краю, центру и правому краю соответственно. <a name="_Toc166378853">Центрирование элементов документа</a> Можно центрировать все элементы документа в окне браузера. Для этого можно использовать тэг <CENTER>. Все элементы между тэгами <CENTER> и </CENTER> будут находиться в центре окна <a name="_Toc166378854">Элемент <</a> PRE> </PRE> Элемент для обозначения текста, отформатированного заранее (preformatted). Подразумевается, что текст будет выведен в том виде, в каком он был подготовлен пользователем. Например, учитываются символы конца строки, появившееся при наборе текста в редакторе. Во всех других случаях браузер игнорирует эти символы. Этот элемент удобно использовать для демонстрации листингов программ или для вывода текстовых документов, переформатирование которых может привести к искажению их смысла. <a name="_Toc166378855">Фоновые рисунки</a> Фоновый цвет По умолчанию навигаторы выводят текст черными буквами на сером фоне. Однако пользователь может изменить цвет текста и фона по своему желанию. Некоторые Web-дизайнеры очень активно используют возможность смены цвета текста и символов. Можно изменить цвет всех текстовых элементов (собственно текста, ссылок, использованных ссылок и т.п.) независимо с помощью тега <BODY>. <BODY BGCOLOR="#000000" TEXT="#FFFFFF" LINK="#9690CC"> Приведенный выше фрагмент обеспечивает вывод белого текста (TEXT) на черном фоне (BGCOLOR), а ссылки будут серебристыми (LINK). Описание фонового рисунка включается в тэг BODY и выглядит следующим образом: <BODY BACKGROUND="picture.gif"> Итак, BGCOLOR — цвет фона документа TEXT — цвет простого текста документа LINK — цвет ссылки Цвет задается шестизначным числом в шестнадцатеричном формате по схеме RGB (Red, Green, Blue). Цвет #000000 соответствует черному, а цвет #FFFFFF — белому. <a name="_Toc166378856"></a> <a name="_Toc164403501">Управление цветом.</a> <table border="0"> <tr> <td> Стандартные цвета: </td> <td> Градации красного цвета </td> <td> Градации зеленого цвета </td> <td> Градации синего цвета </td> <td> Градации оранжевого цвета </td> </tr> <tr> <td> Аквамарин Белый Желтый Зеленый Каштановый Красный Оливковый Пурпурный Светло-зеленый Серебристый Серый Сизый Синий Ультрамарин Фуксиновый Черный </td> <td> #010000 #100000 #200000 #300000 #400000 #500000 #600000 #700000 #800000 #900000 #A00000 #B00000 #C00000 #D00000 #E00000 #FF0000 </td> <td> #000100 #001000 #002000 #003000 #004000 #005000 #006000 #007000 #008000 #009000 #00A000 #00B000 #00C000 #00D000 #00E000 #00FF00 </td> <td> #000001 #000010 #000020 #000030 #000040 #000050 #000060 #000070 #000080 #000090 #0000A0 #0000B0 #0000C0 #0000D0 #0000E0 #0000FF </td> <td> #FFB000 #FFA800 #FFA000 #FF9800 #FF9000 #FF8800 #FF8000 #FF7800 #FF7000 #FF6800 #FF6000 #FF5800 </td> </tr> </table> <a name="_Toc166378857">Раскладка цветовой гаммы по RGB-составляющим</a> Белоснежный (Snow) FFFAFA Призрачно-белый(Ghostwhite) F8F8FF Белый-антик (Antique White) FAEBD7 Кремовый (Cream) FFFBF0 Персиковый (Peachpuff) FFDAB9 Белый-навахо (Navajo White) FFDEAD Шелковый оттенок (Cornsilk) FFF8DC Слоновая кость (Ivory) FFFFF0 Лимонный (Lemon Chiffon) FFFACD Морская раковина (Seashell) FFF5EE Медовый (Honeydew) F0FFF0 Лазурный (Azure) F0FFFF Бледно-лиловый (Lavender) E6E6FA Голубой с красным отливом (Lavender Blush) FFF0F5 Тускло-розовый (Misty Rose) FFE4E1 Белый (White) FFFFFF Черный (Black) 000000 Тускло-серый (Dim Gray) 696969 Синевато-серый (Slate Gray) 708090 Грифельно-серый (Light Slate Gray) 778899 Серый (Gray) BEBEBE Светло-серый (Light Gray) C0C0C0 Серый нейтральный (Medium Gray) A0A0A4 Темно-серый (Dark Gray) 808080 Полуночно-синий (Midnight Blue) 191970 Темно-синий (Dark Blue) 000080 Васильковый (Cornflower) 6495ED Грифельно-синий (Slate Blue) 6A5ACD Светлый грифельно-синий (Light Slate Blue) 8470FF Голубой королевский (Royal Blue) 4169E1 Синий (Blue) 0000FF Небесно-голубой (Sky Blue) 87CEEB Светлый небесно-голубой (Light Sky Blue) 87CEFA Синий со стальным оттенком (Steel Blue) 4682B4 Голубой со стальным оттенком (Light Steel Blue) B0C4DE Светло-синий (Light Blue) A6CAF0 Синий с пороховым оттенком (Powder Blue) B0E0E6 Бледно-бирюзовый (Pale Turquoise) AFEEEE Бирюзовый (Turquoise) 40E0D0 Зеленовато-голубой (Cyan) 00FFFF Светлый циан (Light Cyan) E0FFFF Темный циан (Dark Cyan) 008080 Серо-синий (Cadet Blue) 5F9EA0 Аквамарин (Aquamarine) 7FFFD4 Цвет морской волны (Seagreen) 54FF9F Светлая морская волна (Light Seagreen) 20B2AA Бледно-зеленый (Pale Green) 98FB98 Весенний зеленый (Spring Green) 00FF7F Зеленая лужайка (Lawn Green) 7CFC00 Зеленый (Green) 00FF00 Нейтральный зеленый (Medium Green) C0DCC0 Темно-зеленый (Dark Green) 008000 Зеленовато-желтый (Chartreuse) 7FFF00 Зелено-желтый (Green Yellow) ADFF2F Лимонно-зеленый (Lime Green) 32CD32 Желто-зеленый (Yellow Green) 9ACD32 Зеленый лесной (Forest Green) 228B22 Бледно-золотистый березовый (Pale Goldenrod) EEE8AA Светло-желтый золотистый (Light Goldenrod Yellow) FAFAD2 Светло-желтый (Light Yellow) FFFFE0 Желтый (Yellow) FFFF00 Темно-желтый (Dark Yellow) 808000 Золотой (Gold) FFD700 Светло-золотистый (Light Goldenrod) FFEC8B Золотисто-березовый (Goldenrod) DAA520 Легкий желтый (Burly Wood) DEB887 Розово-коричневый (Rosy Brown) BC8F8F Кожано-коричневый (Saddle Brown) 8B4513 Охра (Sienna) A0522D Бежевый (Beige) F5F5DC Пшеничный (Wheat) F5DEB3 Рыжевато-коричневый (Tan) D2B48C Шоколадный (Chocolate) D2691E Кирпичный (Firebrick) B22222 Коричневый (Brown) A52A2A Самон (Salmon) FA8072 Светлый самон (Light Salmon) FFA07A Оранжевый (Orange) FFA500 Коралловый (Coral) FF7F50 Коралловый светлый (Light Coral) F08080 Оранжево-красный (Orange Red) FF4500 Красный (Red) FF0000 Темно-красный (Dark Red) 800000 Теплый розовый (Hot Pink) FF69B4 Розовый (Pink) FFC0CB Светло-розовый (Light Pink) FFB6C1 Красно-фиолетовый бледный (Pale Violet Red) DB7093 Темно-бордовый (Maroon) B03060 Красно-фиолетовый (Violet Red) D02090 Фуксин (Magenta) FF00FF Фуксин темный (Dark Magenta) 800080 Фиолетовый (Violet) EE82EE Темно-фиолетовый (Plum) DDA0DD Орсель (Orchid) DA70D6 Фиолетово-синий (Blue Violet) 8A2BE2 Пурпурный (Purple) A020F0 <a name="_Toc166378858">Стили в </a> HTML. <table border="0"> <tr> <td> — жирный текст </td> <td> Использование элемента B </td> </tr> <tr> <td> — курсив </td> <td> Использование элемента I </td> </tr> <tr> <td> — нижний индекс </td> <td> Обычный текст и элемент SUB </td> </tr> <tr> <td> — верхний индекс </td> <td> Обычный текст и элемент SUP </td> </tr> <tr> <td> <STRIKE> </STRIKE> — зачеркнутый </td> <td> Использование элемента STRIKE </td> </tr> <tr> <td> — подчеркнутый </td> <td> Использование элемента U </td> </tr> <tr> <td> <TT> </TT> — печатная машинка </td> <td> (изображается как шрифт фиксированной ширины) </td> </tr> <tr> <td> <PRE></PRE> — форматированный </td> <td> (сохранить формат текста как есть) </td> </tr> <tr> <td> <CENTER></CENTER> — центрировать </td> <td> </td> </tr> <tr> <td> <BLINK></BLINK> — мигающий </td> <td> </td> </tr> <tr> <td> <MULTICOL COLS=?> </MULTICOL> — многоколоночный текст </td> <td> </td> </tr> <tr> <td> <MULTICOL GUTTER=?> </MULTICOL> — пробел между колонками </td> <td> (по умолчанию 10 точек) </td> </tr> <tr> <td> <MULTICOL WIDTH=?> </MULTICOL> — ширина колонки </td> <td> </td> </tr> <tr> <td> <SPACER ALIGN=left/right/center> — Выравнивание </td> <td> </td> </tr> </table> Также можно использовать тэг , обозначающий гарнитуру шрифта Размер шрифта — Можно изменять размер шрифта при помощи этого тэга. Шрифт может иметь размер от 1 до 7. Вы можете прямо указать размер шрифта цифрой, или указать смещение относительно базового значения (по умолчанию — 3) в положительную или отрицательную сторону. Базовое значение можно изменить при помощи тэга <BASEFONT SIZE=n> Можно изменить цвет шрифта при помощи тэга Цвет указывается в RGB-формате (Red-Green-Blue) посредством указания размерности каждой компоненты цвета в шестнадцатеричном формате. <a name="_Toc166378859">Тэги списков</a> В HTML существует три вида основных списков: P нумерованный P ненумерованный P список описаний <a name="_Toc166378860"></a> <a name="_Toc164403502">Нумерованные списки</a> В нумерованном списке браузер автоматически вставляет номера элементов по порядку. Начинается тэгом <OL> и завершается тэгом </OL>. Каждый элемент списка начинается с тэга <LI>. Тип нумерации <OL TYPE=A/a/I/i/1> (для всего списка) <LI TYPE=A/a/I/i/1> (этот и следующие) <a name="_Toc166378861"></a> <a name="_Toc164403503">Ненумерованные списки</a> Для ненумерованных списков используются маркеры. Вид маркера обычно настраивает пользователь. Ненумерованный список начинается тэгом <UL> и завершается тэгом </UL>. Каждый элемент списка начинается с тэга <LI>. Тип метки <UL TYPE=Disc/Circle/Square> (для всего списка) <LI TYPE= Disc/Circle/Square> (этот и последующие) <a name="_Toc166378862"></a> <a name="_Toc164403504">Список определений</a> Список определений начинается с тэга <DL> и завершается тэгом </DL>. Данный список служит для создание списков типа "термин" — "описание". Каждый термин начинается тэгом <DT> , а описание — тэгом <DD>. <a name="_Toc166378863">Гипертекстовые ссылки</a> Общий вид: <A HREF="URL"> текст ссылки</A> Тэг ссылки — <A> </A>. HREF="URL" — адрес объекта, на который указывает ссылка. Пользователь также может менять цвета ссылок (как пройденных, так и активных) Цвет ссылки <BODY LINK="#$$$$$$"> Пройденная ссылка <BODY VLINK="#$$$$$$"> Активная ссылка <BODY ALINK="#$$$$$$"> <a name="_Toc166378864">HTML-графика.</a> Поддержка изображений в HTML — путь в мир графики. Создание и манипулирование изображениями, графическими форматами и другим графическим материалом не является частью HTML. В частности, HTML спецификации не объявляют каких-либо требований или ограничений на графические форматы, поддерживаемые Web браузерами. Большинство программ-навигаторов способны выводить документы, содержащие текст и изображения в форматах XBM, GIF или JPEG. В будущем возможна поддержка и других форматов графики (например Portable Network Graphic — PNG). На загрузку изображений затрачивается дополнительное время и ресурсы процессора, поэтому не следует ими злоупотреблять. Старайтесь использовать файлы с изображениями небольших размеров, оптимизированные для использования в Internet. Для оптимизации графики существует целый ряд программ. Для включения графики в документ используется тэг <IMG SRC=«ImageName»> где - ImageName — URL графического файла. Синтаксис URL для тэга <IMG SRC> аналогичен используемому в тэгах HREF. Если изображение имеет формат GIF, имя файла должно иметь расширение (скажем, ImageName.gif). Файлы X Bitmap должны иметь расширение .xbm; JPEG — .jpg или .jpeg; Portable Network Graphic — .png. <a name="_Toc166378865"></a> <a name="_Toc164403505">Размеры изображений</a> В тэг <IMG> должны быть включены атрибуты, передающие навигатору размеры включенного в документ изображения. Параметры HEIGHT и WIDTH позволяют навигатору узнать высоту и ширину (в пикселях) изображения для размещения текста с учетом включенной графики.<a href="#_ftn4" name="_ftnref4">[4]</a> <a name="_Toc166378866"></a> <a name="_Toc164403506">Пример включения графики в документ:</a> <IMG SRC=picrure.gif HEIGHT=100 WIDTH=65> <a name="_Toc166378867"></a> <a name="_Toc164403507">Размещение изображений</a> При размещении графики в тексте документа существует достаточно большая свобода выбора. Можно разместить изображение отдельно от текста (текст будет располагаться выше и ниже, но будет отсутствовать на уровне изображения) или разместить изображение и текст в одном параграфе. Можно даже организовать "оборачивание" текста вокруг графики. <a name="_Toc166378868"></a> <a name="_Toc164403508">Размещение графики в тексте</a> По умолчанию нижняя часть изображения выравнивается со следующим за графикой текстом. Можно также выровнять последующий текст по верхней границе изображения или посередине с помощью атрибутов <ALIGN=TOP> и <MIDDLE> или <CENTER>. Можно также организовать "оборачивание" рисунка текстом с помощью атрибутов <ALIGN= LEFT> и <RIGHT>. В этом случае текст будет располагаться "вокруг" рисунка. Рисунок может в этом случае располагаться справа или слева от текста. При этом можно задать независимо способ выравнивания текста. Такой способ выравнивания позволяет сделать документы более выразительными и существенно расширяет возможности Web-дизайнера. <a name="_Toc166378869"></a> <a name="_Toc164403509">Изображения без текста</a> Для вывода изображения отдельно от текста нужно создать новый параграф и разместить изображение в нем. Можно разместить рисунок слева, справа или по центру с помощью атрибутов ALIGN. <a name="_Toc166378870"></a> <a name="_Toc164403510">Альтернативный текст для графики</a> Некоторые навигаторы WWW не способны выводить графику. Кроме того, часть пользователей может специально отказаться от загрузки изображений (в целях экономии времени) при связи через модем. HTML позволяет обеспечить вывод заданного текста в качестве альтернативы. Для задания такого текста служит параметр <ALT>. Фрагмент: <IMG SRC="UpArrow.gif" ALT="Вверх"> обеспечивает вывод вместо изображения UpArrow.gif слова «Вверх». Если программа просмотра поддерживает графику, на экран будет выведен рисунок, в противном случае — заданный в параметре ALT текст. <a name="_Toc166378871"></a> <a name="_Toc164403511">Фоновые изображения</a> Последние версии Web-навигаторов могут загружать изображения для использования в качестве фона, на котором выводится текст, таблицы и т.п. Кому-то нравится использовать фоновую графику, другим — нет. При выборе фона нужно помнить только об одном — текст должен хорошо читаться на выбранном фоне при любом экранном разрешении. В качестве фоновых изображений можно использовать текстуры или изображения объектов. Для создания фоновых изображений пользуются обычными графическими приложениями. Для создания фона в окне навигатора используются изображения небольшого размера, которые просто транслируются для заполнения окна целиком. Заполнение автоматически осуществляется навигатором после загрузки файла с фоновой графикой. <a name="_Toc166378872"></a> <a name="_Toc164403512">Внешние изображения, звуки, анимация.</a> Автор Web-страницы также может предоставить возможность просмотра графики с высоким разрешением взамен представленной в документе уменьшенной копии. Такие изображения называются внешними, их полезно использовать в тех случаях, когда Вы не хотите замедлять процесс загрузки основного документа, предоставляя пользователю возможность самому решить, хочет ли он видеть Ваши картинки. Для включения ссылки на внешнее изображение используется обычный тэг: <A HREF="Picture.gif">Картинка</A> Можно также использовать в качестве ссылки уменьшенную копию загружаемого изображения: <A HREF="LargerImage.gif"> <IMG SRC="SmallImage.gif"> </A> Читатель увидит уменьшенную копию и сможет решить, хочет ли он видеть большое изображение. Такой же синтаксис используется для ссылок на звуковые и анимационные файлы. Например, фрагмент: <A HREF="AdamsRib.mov">link anchor</A> задает ссылку на анимационный файл QuickTime. Ниже приведен список расширений имен для наиболее популярных файлов multimedia: <table border="0"> <tr> <td> Тип файла </td> <td> Расширение </td> </tr> <tr> <td> обычный текст </td> <td> .txt </td> </tr> <tr> <td> документ HTML </td> <td> .html </td> </tr> <tr> <td> изображение GIF </td> <td> .gif </td> </tr> <tr> <td> изображение TIFF </td> <td> .tiff </td> </tr> <tr> <td> изображение X Bitmap </td> <td> .xbm </td> </tr> <tr> <td> изображение JPEG </td> <td> .jpg или .jpeg </td> </tr> <tr> <td> файл PostScript </td> <td> .ps </td> </tr> <tr> <td> звуковой файл AIFF </td> <td> .aiff </td> </tr> <tr> <td> звуковой файл AU </td> <td> .au </td> </tr> <tr> <td> звуковой файл WAV </td> <td> .wav </td> </tr> <tr> <td> анимация QuickTime </td> <td> .mov </td> </tr> <tr> <td> анимация MPEG </td> <td> .mpeg or .mpg </td> </tr> </table> Однако не у всех пользователей могут быть установлены программы для работы с multimedia-расширениями. На большинстве рабочих станций UNIX, например, нет возможности просматривать анимационные файлы QuickTime. <a name="_Toc166378873">Таблицы</a> До появления в HTML специальных средств работы с таблицами приходилось использовать форматированный текст (<PRE>), в котором для создания ровных колонок использовались пробелы. Таблицы существенно улучшают представление текста, даже если он на первый взгляд не похож на таблицу Появление новых тэгов существенно расширило возможности организации таблиц. Сейчас таблицы могут иметь специальные заголовки, в которых разъясняются значения колонок и строк, ячейки для каждого элемента таблицы и т.п. В приведенной ниже таблице описаны теги HTML, предназначенные для организации таблиц в документах <a name="_Toc166378874"></a> <a name="_Toc164403513">Базовые элементы таблиц</a> <table border="0"> <tr> <td> Элемент </td> <td> Описание </td> </tr> <tr> <td> <TABLE> ... </TABLE> </td> <td> определяет таблицу HTML. Если задан атрибут BORDER, ячейки таблицы выделяются рамкой. </td> </tr> <tr> <td> <CAPTION> ... </CAPTION> </td> <td> определяет заголовок таблицы. По умолчанию заголовок располагается над таблицей и выравнивается по центру. С помощью атрибута <ALIGN=> можно изменить местоположение и способ выравнивания заголовка таблицы<a href="#_ftn5" name="_ftnref5">[5]</a> . </td> </tr> <tr> <td> <TR> ... </TR> </td> <td> задает строку таблицы. Можно задать атрибуты для целой строки : ALIGN (LEFT, CENTER, RIGHT) и/или VALIGN (TOP, MIDDLE, BOTTOM)<a href="#_ftn6" name="_ftnref6">[6]</a> . </td> </tr> <tr> <td> <TH> ... </TH> </td> <td> определяет ячейку-заголовок. По умолчанию текст в этой ячейке выводится жирным шрифтом и выравнивается по центру. Ячейка-заголовок может содержать другие атрибуты, задающие представление ячейки и/или ее содержимого<a href="#_ftn7" name="_ftnref7">[7]</a> . </td> </tr> <tr> <td> <TD> ... </TD> </td> <td> определяет ячейку данных в таблице. По умолчанию текст выравнивается по левому краю и центруется по вертикали. Ячейка может содержать другие атрибуты, определяющие характеристики этой ячейки и/или ее содержимого<a href="#_ftn8" name="_ftnref8">[8]</a> . </td> </tr> </table> <a name="_Toc166378875"></a> <a name="_Toc164403514">Атрибуты таблиц</a> Атрибуты в ячейках <TH> ... </TH> или <TD> ... </TD> имеют более высокий приоритет, нежели атрибуты, заданные для всей строки <TR> ... </TR>. <table border="0"> <tr> <td> Атрибут </td> <td> Описание </td> </tr> <tr> <td> ALIGN (LEFT, CENTER, RIGHT) </td> <td> Выравнивание содержимого ячейки по горизонтали </td> </tr> <tr> <td> VALIGN (TOP, MIDDLE, BOTTOM) </td> <td> Выравнивание содержимого ячейки по вертикали </td> </tr> <tr> <td> COLSPAN=n </td> <td> Число колонок (n), охватываемых ячейкой </td> </tr> <tr> <td> ROWSPAN=n </td> <td> Число строк (n), охватываемых ячейкой </td> </tr> <tr> <td> NOWRAP </td> <td> Запрет переноса слов (word wrapping) в ячейке. </td> </tr> </table> <a name="_Toc166378876"></a> <a name="_Toc164403515">Формат таблиц</a> Типичная таблица выглядит подобно приведенному здесь фрагменту: <table border="0"> <tr> <td> <TABLE> </td> <td> <== начало таблицы </td> </tr> <tr> <td> <CAPTION> Заголовок </CAPTION> </td> <td> <== заголовок </td> </tr> <tr> <td> <TR> </td> <td> <== начало первой строки </td> </tr> <tr> <td> <TH> содержимое ячейки </TH> </td> <td> <== первая ячейка в строке 1 (заголовок колонки) </td> </tr> <tr> <td> <TH> содержимое ячейки </TH> </td> <td> <== последняя ячейка в строке 1 (заголовок колонки) </td> </tr> <tr> <td> </TR> </td> <td> <== конец первой строки </td> </tr> <tr> <td> <TR> </td> <td> <== начало второй строки </td> </tr> <tr> <td> <TD> содержимое ячейки </TD> </td> <td> <== первая ячейка в строке 2 </td> </tr> <tr> <td> <TD> содержимое ячейки </TD> </td> <td> <== последняя ячейка в строке 2 </td> </tr> <tr> <td> </TR> </td> <td> <== конец второй строки </td> </tr> <tr> <td> <TR> </td> <td> <== начало последней строки </td> </tr> <tr> <td> <TD> содержимое ячейки </TD> </td> <td> <== первая ячейка в последней строке </td> </tr> <tr> <td> <TD> содержимое ячейки </TD> </td> <td> <== последняя ячейка в последней строке </td> </tr> <tr> <td> </TR> </td> <td> <== конец последней строки </td> </tr> <tr> <td> </TABLE> </td> <td> <== конец таблицы </td> </tr> </table> Тэги <TABLE> и </TABLE> должны обозначать таблицу в целом. Первым элементом в структуре таблицы является заголовок (CAPTION), однако, он может быть опущен. После заголовка может располагаться произвольное число строк <TR> </TR>. Внутри каждой строки может размещаться произвольное число ячеек <TD> </TD> или <TH> </TH>. Каждая строка таблицы форматируется независимо от других, и строки могут содержать разное число ячеек. Такой подход обеспечивает высокую гибкость при организации таблиц. <a name="_Toc166378877"></a> <a name="_Toc164403516">Другие элементы </a> HTML-таблиц. <table border="0"> <tr> <td> Окантовка таблицы </td> <td> <TABLE border=?></TABLE> </td> <td> </td> </tr> <tr> <td> Расстояние между ячейками </td> <td> <TABLE cellspacing=?> </td> <td> </td> </tr> <tr> <td> Дополнение ячеек </td> <td> <TABLE cellpadding=?> </td> <td> </td> </tr> <tr> <td> Желаемая ширина </td> <td> <TABLE width=?> </td> <td> (в точках) </td> </tr> <tr> <td> Ширина в процентах </td> <td> <TABLE width="%"> </td> <td> (проценты от ширины страницы) </td> </tr> <tr> <td> Выравнивание </td> <td> <TR ALIGN=Left/Right/Center/Middle/Bottom> </td> <td> </td> </tr> <tr> <td> Выравнивание в ячейке </td> <td> <TD ALIGN=Left/Right/Center/Middle/Bottom> </td> <td> </td> </tr> <tr> <td> Без перевода строки </td> <td> <TD NOWRAP> </td> <td> </td> </tr> <tr> <td> Растягивание по колонке </td> <td> <TD COLSPAN=?> </td> <td> </td> </tr> <tr> <td> Растягивание по строке </td> <td> <TD ROWSPAN=?> </td> <td> </td> </tr> <tr> <td> Желаемая ширина </td> <td> <TD WIDTH=?> </td> <td> (в точках) </td> </tr> <tr> <td> Ширина в процентах </td> <td> <TD WIDTH="%"> </td> <td> (проценты от ширины страницы) </td> </tr> <tr> <td> Цвет ячейки </td> <td> <TD BGCOLOR="#$$$$$$"> </td> <td> </td> </tr> <tr> <td> Выравнивание </td> <td> <TH ALIGN= Left/Right/Center/Middle/Bottom> </td> <td> </td> </tr> <tr> <td> Без перевода строки </td> <td> <TH NOWRAP> </td> <td> </td> </tr> <tr> <td> Растягивание по колонке </td> <td> <TH COLSPAN=?> </td> <td> </td> </tr> <tr> <td> Растягивание по строке </td> <td> <TH ROWSPAN=?> </td> <td> </td> </tr> <tr> <td> Желаемая ширина </td> <td> <TH WIDTH=?> </td> <td> (в точках) </td> </tr> <tr> <td> Ширина в процентах </td> <td> <TH WIDTH="%"> </td> <td> (проценты ширины таблицы) </td> </tr> <tr> <td> Цвет ячейки </td> <td> <TH BGCOLOR="#$$$$$$"> </td> <td> </td> </tr> <tr> <td> Заглавие таблицы </td> <td> <CAPTION></CAPTION> </td> <td> </td> </tr> <tr> <td> Выравнивание </td> <td> <CAPTION ALIGN=TOP|BOTTOM> </td> <td> (сверху/снизу таблицы) </td> </tr> </table> <a name="_Toc166378878">Формы на </a> Web-страницах Все формы начинаются тэгом <FORM> и завершаются тэгом </FORM>. Тэг <TEXTAREA> используется для того, чтобы позволить пользователю вводить более одной строки информации (свободный текст ). <TEXTAREA NAME="address" ROWS=10 COLS=50> </TEXTAREA> Атрибуты, используемые внутри тэга <TEXTAREA> описывают внешний вид и имя вводимого значения/ Описание атрибутов: NAME — имя поля ввода ROWS — высота поля ввода в символах COLS — ширина поля ввода в символах Если вы хотите, чтобы в поле ввода по умолчанию выдавался какой-либо текст, то необходимо вставить его внутри тэгов <TEXTAREA> и </TEXTAREA>. Тэг <INPUT> используется для ввода одной строки текста или одного слова. Атрибуты тэга: TYPE — определяет тип поля ввода. По умолчанию это простое поле ввода для одной строки текста. Остальные типы должны быть явно указаны: CHECKBOX используется для выбора нескольких значений одновременно. RADIO. Данный атрибут позволяет вводить одно значение из нескольких альтернатив. Для создания набора альтернатив необходимо создать несколько полей ввода с атрибутом TYPE="RADIO" с разными значениями атрибута VALUE, но с одинаковыми значениями атрибута NAME.При выборе одного из полей ввода типа RADIO все остальные поля данного типа с тем же именем (атрибут NAME) автоматически станут невыбранными на экране. RESET. Данный тип обозначает кнопку, при нажатии которой все поля формы примут значения, описанные для них по умолчанию (Очистить). SUBMIT. Этот тип обозначает кнопку Отправить. TEXT описывает однострочное поле ввода. MAXLENGTH — определение максимальной длины вводимого значения в символах, SIZE — размер отображаемого поля ввода на экране (по умолчанию принимается 20 символов). С помощью тэга <SELECT> </SELECT> можно создать раскрывающийся список. Тэг SELECT имеет один или более параметр между стартовым тэгом <SELECT> и завершающим </SELECT>. По умолчанию, первый элемент отображается в строке выбора. При этом перед каждым элементом списка ставится <OPTION>. <a name="_Toc166378879">Цель и место размещения документа Web</a> Глобальная Сеть не только соединила пользователей всего мира, но и утвердилась в виде новых технологий на наших персональных компьютерах. Иными словами, средства, предназначенные для работы с Сетью, стали использоваться и в других целях, с нею не связанных, а среди программного обеспечения, устанавливаемого на большинство персональных компьютеров, приложения для Internet заняли свое почетное место. В результате работа многих пользователей стала иметь большее отношение к Сети, чем они того сами, может быть, желали. Так, одним из способов самовыражения стало размещение личных страничек в Internet. Многие коммерческие фирмы стали использовать Сеть для рекламы и сбыта своей продукции. Людям, занятым поиском работы, стал доступен и такой сервис: составить резюме в формате Web-страницы и разместить эту информацию в Сети. Важную роль Internet стал играть для научных, учебных и общественных организаций. Подтверждение этому легко найти, выйдя на просторы киберпространства. <a name="_Toc166378880">Тестирование и публикация </a> Web-сайта. Каждый независимый веб-мастер желает бесплатно иметь в своем распоряжении настоящий полноценный Web-сервер. В России существует значительное число серверов, которые, не занимаясь вебхостингом профессионально, с удовольствием размещают у себя частные тематические проекты. Если вы создали интересный (причем не обязательно популярный) сайт, то обратитесь к администрации одного из таких серверов — если ваш проект действительно интересен не только вам одному, шансы на успех довольно велики. Вы получите все то, за что обычно платят десятки долларов в месяц — несколько десятков мегабайт дискового пространства, CGI, SSI, почтовый ящик, статистику сервера и т.п. Возможно, вам дадут доменное имя типа проект.имя_провайдера.ru. О выделении такого поддомена, кстати, можете попросить с самого начала — провайдеру оно не стоит ни копейки. Возможно, провайдер в обмен попросит вас разместить на сайте его рекламный баннер или просто ссылку типа «Размещено на сервере...» Прежде чем разместить свой Web-сайт на сервере в Интернете, его необходимо тщательно протестировать, так как потенциальными посетителями вашего сайта являются десятки миллионов пользователей Интернета. Необходимо просмотреть, как выглядят ваши страницы в наиболее распространенных браузерах Internet Explorer и Netscape Navigator (а они могут выглядеть по-разному). Необходимо проверить: P нормально ли читается текст на выбранном фоне; P правильно ли расположены рисунки; P правильно ли работают гиперссылки. Для публикации Web-сайта необходимо получить от провайдера необходимые сведения: P URL-адрес сайта; P секретные имя пользователя и пароль, которые необходимы администратору сайта для его редактирования. Технология публикации Web-сайтов может иметь несколько вариантов: P для публикации можно воспользоваться инструментальным средством, которое использовалось для создания Web-сайта (например, Netscape Composer); P организация, предоставившая место на своем сервере, может предложить публиковать сайты через Web-интерфейс с помощью браузера или с помощью оригинального Диспетчера файлов; P наибольшие возможности при публикации предоставляют FTR-клиенты. <a name="_Toc166378881">Несколько полезных советов по оформлению сайта.</a> Совет 1. Выдерживайте принятый стиль Если Вы решили создать сложный HTML-документ с разветвленной структурой, постарайтесь оформить все его страницы одинаково, оперируя в рамках одного стиля, применяйте повторяющиеся управляющие элементы, одинаковые интервалы и подобные шрифты. Совет 2. Правильно выбирайте фон сайта Однотонный цветной фон предельно прост с точки зрения реализации и изменения, он все же является ключевым элементом дизайна, и Вы должны осуществлять его выбор со всей тщательностью. При выборе цвета фона Вы должны учитывать то, как он будет гармонировать со следующими элементами: цветом текста, цветом гиперссылок, с логотипами или фирменными эмблемами. Крайне необходимо обеспечить достаточный цветовой и яркостный контраст между навигационными элементами и фоном. Если же Вы решили использовать узорчатый фон, то изображения, используемые для построения фона, должны быть едва заметными, в каком-то смысле неопределенными. Они должны содержать нейтральные, неконтрастирующие друг с другом цвета. И, наконец, в идеале эти изображения должны образовывать бесшовный фон при их отображении методом укладки плиток. И напоследок, фон не должен становится доминирующим элементом оформления. Он должен дополнять основную идею дизайна, но никак не заменять ее. Совет 3. Используйте принцип KISS при создании сайтов Принцип KISS - Keep It Simple, Stupid (Будь проще, дурачок). - При создании сайтов используйте как можно более простой язык, особенно если речь идет о персональных страницах. - Не используйте технические или научные термины, которые непонятны большинству. - Используйте общие слова, а не «литературные». - Избегайте использования таинственных акронимов, тем более не используйте их в заголовках. При употреблении акронима давайте полную расшифровку и его объяснение при первом упоминание в тексте. Совет 4. Проверяйте на ошибки и недочеты по сто раз все, что закачиваете на свой сайт. Совет 5. Не торопитесь с регистрацией в поисковых системах и каталогах, сначала подготовьте сайт. Совет 6. Не следует включать в список желаемых ключевых слов общеупотребительные, часто встречающиеся слова, такие как сервер, html, ru, сайт и другие. Ваши слова должны быть достаточно информативными. Многие поисковые системы не сканируют общеупотребительные слова. Совет 7. Максимальный размер документа должен составлять 100-150 KB. Документы большего размера неудобоваримы для поисковых систем и людей. Совет 8. Делайте странички интерактивными. Совет 9. Сделайте так, чтобы Ваши посетители возвращались на Ваш сайт. P Хорошее содержание. Информативность — вот главное. Ваш сайт должен содержать нужную информацию и регулярно обновляться. P Легкость в использовании. Мы часто слышим о «дружественном пользователю» компьютеру или программе. Создавайте «дружелюбные» сайты. Снабжайте сайт навигацией, легкой в использовании. P Быстрая загрузка. Ваш сайт должен уметь работать с самым старым браузером и самым медленным модемом. P Регулярное обновление. У Вас хорошее содержание, но проблема — обновление раз в год. Обновляйте чаще и предупреждайте об обновлениях. <a name="_Toc166378882">Учебно-методический комплекс по теме «</a> HTML». <a name="_Toc166378883">Пояснительная записка.</a> Пояснительная записка, которую Вы сейчас читаете, набрана в текстовом редакторе Microsoft Word. Шрифт: Times New Roman, 12, выравнивание по ширине. Используются заголовки 1 уровня (Заголовок14), 2 уровня (Заголовок10) и 3 уровня (Заголовок4). Также используются автосписки (нумерованные и маркированные). Пояснительная записка состоит из 30 страниц, включает 8 таблиц. Оглавление создано автоматически (команда Вставка→Ссылка→Оглавление и указатели→OK). <a name="_Toc166378884">Презентация </a> Power Point. Презентация позволяет более наглядно представлять материал по теме урока, что способствует повышению уровня качества знаний учащихся, делает урок более интересным, современным. Презентация создана с помощью Microsoft PowerPoint. Содержит 23 слайда. Данная презентация интерактивная, т. е., переход от одного слайда к другому осуществляется с помощью кнопок Назад и Далее , а не автоматически. Здесь коротко рассказывается об истории появления Internet, раскрывается значение основных терминов, описываются основные тэги. <a name="_Toc166378885">Исследование </a> MS EXCEL. В программе Microsoft EXCEL я провела исследования по следующим темам: «Рост числа хостов» (1), «Рост числа серверов Интернета» (2), «Распределение серверов Интернета по странам мира» (3), Использование ресурсов Internet (4). Глядя на диаграммы (1) и (3), можно с уверенностью сказать, что развитие Интернета шагает вперед семимильными шагами. Диаграмма (2) наглядно показывает, что наибольшее число серверов — в Японии, наименьшее — в России. На диаграмме (4) видно, что чаще всего в сети Internet ищут информацию (46%) пользователей и реже всего общаются в чатах (33%). <a name="_Toc166378886">Тестовая программа на языке </a> Visual Basic. Программа «Тест» выполнена в приложении на языке Visual Basic. Она состоит из 6 форм, включает 5 вопросов, освещающие знания по основным понятиям языка HTML. На каждый из вопросов 3 ответа, причем верный из них только один. Создание проекта «Тест. exe». Для начала на основную форму добавим несколько меток, две кнопки Начать тест и Выход. После этого составляем таблицу результатов тестирования, используя графические возможности Visual Basic. Теперь добавляем ещё 5 форм с именами Вопрос 1, Вопрос 2, Вопрос 3, Вопрос 4 и Вопрос 5. На каждой из них должно быть: P 1 метка (на ней будет записана формулировка вопроса) P 2 кнопки Назад и Далее, причем на форме Вопрос 1 нет кнопки Назад, а на Вопрос 5 кнопка называется не Далее, а Результаты P 3 радиокнопки (на них будут записаны варианты ответов) Текст программы следующий: Форма Тест , кнопка Начать Вопрос1.Visible = True Форма Тест , кнопка Выход End Форма Вопрос 1 кнопка Далее For i = 0 To 2 If Опция1(i).Value = True Then Форма1.a1 = i + 1 Next Вопрос1.Visible = False Вопрос2.Visible = True Форма Вопрос 2 кнопка Далее For i = 0 To 2 If Опция1(i).Value = True Then Форма1.a2 = i + 1 Next Вопрос2.Visible = False Вопрос3.Visible = True Форма Вопрос 2 кнопка Назад Вопрос2.Visible = False Вопрос1.Visible = True Форма Вопрос 3 кнопка Далее For i = 0 To 2 If Опция1(i).Value = True Then Форма1.a3 = i + 1 Next Вопрос3.Visible = False Вопрос4.Visible = True Форма Вопрос 3 кнопка Назад Вопрос3.Visible = False Вопрос2.Visible = True Форма Вопрос 4 кнопка Далее For i = 0 To 2 If Опция1(i).Value = True Then Форма1.a4 = i + 1 Next Вопрос4.Visible = False Вопрос5.Visible = True Форма Вопрос 4 кнопка Назад Вопрос4.Visible = False Вопрос3.Visible = True Форма Вопрос 5 кнопка Назад Вопрос5.Visible = False Вопрос4.Visible = True Форма Вопрос 5 кнопка Результаты For i = 0 To 2 If Опция1(i).Value = True Then Форма1.a5 = i + 1 Next Вопрос5.Visible = False Форма1.Visible = True Форма1.Метка6.Caption = Форма1.p1 Форма1.Метка3.Caption = Форма1.p2 Форма1.Метка8.Caption = Форма1.p3 Форма1.Метка16.Caption = Форма1.p4 Форма1.Метка17.Caption = Форма1.p5 Форма1.Метка7.Caption = Форма1.a1 Форма1.Метка12.Caption = Форма1.a2 Форма1.Метка13.Caption = Форма1.a3 Форма1.Метка18.Caption = Форма1.a4 Форма1.Метка19.Caption = Форма1.a5 s = 0 If Форма1.a1 = Форма1.p1 Then s = s + 1 If Форма1.a2 = Форма1.p2 Then s = s + 1 If Форма1.a3 = Форма1.p3 Then s = s + 1 If Форма1.a4 = Форма1.p4 Then s = s + 1 If Форма1.a5 = Форма1.p5 Then s = s + 1 Форма1.Метка15.Caption = s Форма Тест p1 = 1 p2 = 2 p3 = 1 p4 = 3 p5 = 2 Теперь, когда программа написана, можно создавать файл .exe (команда Файл→Создать Тест.exe→OK) и создавать ссылку на Web-странице. Руководство пользователя. Открываем файл Test.exe. Перед нами открывается программа Тест. По нажатию на кнопку Начать открывается форма с первым вопросом. После ответа на вопрос необходимо нажать кнопку Далее. Если Вы хотите вернуться к какому-либо из вопросов, нажмите кнопку Назад. После ответа на последний (пятый) вопрос нажмите кнопку Результаты. По нажатию этой кнопки открывается форма с правильными ответами, Вашими ответами и количеством правильных ответов. <a name="_Toc166378887">Web-страница.</a> Ссылки на все элементы курсовой работы Вы можете найти на Web-странице Index. Вот HTML-код Web-страницы. <HTML> <HEAD> <TITLE>Женина </TITLE> </HEAD> <BODY ALIGN="Left" BACKGROUND="1-8.gif" VLINK="Red" ALINK="Yellow" LINK="Black"> <HR> <IMG SRC="9B1.gif" ALIGN="Left"> <CENTER></SENTER> на тему: "Язык гипертекстовой разметки HTML" <IMG SRC="BOOK.gif" Align="Right"> <MARQUEE BEHAVIOR="Alternate">Автор: Мельникова Женя</MARQUEE> <HR> <A HREF="REFERAT.doc">Пояснительная записка</A> <A HREF="I.xls">Исследование</A> <A HREF="HTML.ppt">Презентация "Язык гипертекстовой разметки HTML"</A> <A HREF="Test.exe">Тесты</A> <IMG SRC="anim_glob.gif" ALIGN="Right"> </BODY> </HTML> <a name="_Toc166378888">Руководство пользователя.</a> Просмотр начинается с открытия файла Index.htm. Для того чтобы прочитать пояснительную записку, перейдите по ссылке Пояснительная записка. Если вы хотите посмотреть презентацию, перейдите по ссылке Презентация «Язык гипертекстовой разметки HTML». Просмотр исследования — ссылка Исследование. Для запуска тестовой программы — Тест. Данный учебно-методический комплекс можно использовать на уроках в школе. Например: Презентации — при объяснении нового материала, для его более наглядного представления, в процессе докладов учащихся, а также при самостоятельном изучении новой темы. Текстовые документы, созданные с помощью Word'а — это всевозможные контрольные и самостоятельные работы. Кроме того, можно распечатать краткое содержание материала, пройденного на уроке или выписать основные тезисы. Электронные таблицы EXCEL — это представление любой табличной информации (от анализа результатов контрольной работы до электронного журнала). Тесты VisualBasic — прекрасный способ объективно оценить уровень знаний по какой-либо теме. И, наконец, в качества оглавления ко всему УМК можно создать Web-страницу, разместив на ней ссылки на все составляющие УМК. <a name="_Toc166378889"></a> <a name="_Toc164404867">Заключение.</a> Использование HTML позволяет форматировать документы для их представления с использованием шрифтов, линий и других графических элементов на любой системе, их просматривающей. HTML дает авторам средства для: · публикации электронных документов с заголовками, текстом, таблицами, списками, фотографиями и т.д. · загрузки электронной информации с помощью щелчка мыши на гипертекстовой ссылке. · разработки форм для выполнения транзакций с удаленными службами, для использования в поиске информации, резервировании, заказе продуктов и т.д. · включения электронных таблиц, видеоклипов, звуковых фрагментов и других приложений непосредственно в документы. Тестовый контроль с помощью компьютера предполагает возможность и объективнее выявить знание и незнание обучающихся, он довольно прост и удобен для оценивания уровня знаний. В настоящее время существует множество учебных программ, позволяющих: - повысить интерес учащихся к предмету; - повысить успеваемость учеников; - сэкономить время на опрос учащихся; Кроме того, они дают возможность учащимся заниматься самостоятельно как на уроках, так и в домашних условиях. Такие программы также хороши и для учителя: они помогают повысить уровень своих знаний. С появлением обучающих компьютерных программ учебный процесс переориентировался сторону развития системного мышления. Методики, основанные на информационных технологиях, имеют ряд преимуществ по сравнению с традиционными: - возможность наглядного и динамичного представления информации с использованием изображений и звука (текстовая, графическая, аудио- и видеоинформация, анимация); - непрерывность компьютерного образования на всех уровнях обучения (непрерывность обеспечена компьютерной поддержкой всех школьных дисциплин). С помощью PowerPoint можно подготовить выступление с использованием слайдов, которые потом можно напечатать на прозрачных пленках (прозрачках), бумаге, 35-миллиметровых слайдах или просто демонстрировать на экране компьютера, можно также создать конспект доклада и материал для раздачи слушателям. PowerPoint позволит профессионально подготовить презентацию, щегольнув броской графикой и эффектно оформленными тезисами. Но что самое замечательное, вы сможете превратить документ, подготовленный в редакторе Word, в презентацию всего лишь одним щелчком мыши. Power Point создает файл презентаций, который имеет расширение имени ppt и содержит набор слайдов. Программа предоставляет пользователю большое количество шаблонов презентаций на различные темы. Такие шаблоны содержат слайды, оформленные определенным образом. В поле слайда размещаются заглушки, которые мы можем вставить свой текст, графику, а также таблицу и диаграмму. Кроме того, можно изменить художественное оформление любого шаблона презентации, выбрав дизайн по своему вкусу. При этом изменится только внешний вид презентации, а не его содержание. И, наконец, можно начать работу над презентацией "с нуля" — в Power Point для этого есть все средства. EXCEL — пожалуй, самая популярная сегодня программа электронных таблиц. Ею пользуются деловые люди и ученые, бухгалтеры и журналисты. С ее помощью ведут разнообразные списки, каталоги и таблицы, составляют финансовые и статистические отчеты, обсчитывают данные каких-нибудь опросов, состояние торгового предприятия, обрабатывают результаты научного эксперимента, ведут учет, готовят презентационные материалы. Для ведения домашней бухгалтерии EXCEL тоже вполне подходит. Программа сумеет вычислить суммы по столбцам и строкам таблиц, взять проценты, посчитать среднее арифметическое, срок погашения кредита, в ней вообще можно использовать множество стандартных функций — финансовых, математических, логических, статистических. Оформление таблиц может быть самым разнообразным (а это немаловажно, когда нужно распечатать прайс-лист, справку или презентационный материал). Возможности форматирования данных — как в хорошем текст-процессоре: можно менять шрифты, начертания, выделять строки, столбцы или отдельные ячейки текста цветом, рамочками и линеечками, закрашивать области фоном или цветом, строить по табличным данным графики и диаграммы, вставлять в таблицу картинки и т. д. и т. п. WORD — мощный текстовый редактор, позволяющий быстро создать документ любой сложности из разрозненных заметок и довести до совершенства информационный бюллетень или брошюру. Сегодня он является самой популярной в мире программой. Word начинен «быстрыми» командами и самыми современными средствами, такими как встроенная программа проверки правописания и словарь синонимов, которые помогают вам грамотно составлять документы, и готовыми шаблонами, позволяющими вам сводить воедино заметки, письма, счета и брошюры без больших усилий. <a name="_Toc166378890"></a> <a name="_Toc164403517"></a> <a name="_Toc163190249">Литература.</a> <ol> <li>Н. Угринович. «Информатика и информационные технологии». Издательство «Бином».</li> <li>И. Семакин, Л. Залогова, С. Русаков, Л. Шестакова. Информатика. Базовый курс». Издательство «Бином».</li> <li>А. Левин. «Самоучитель работы на компьютере». Издательство «Питер».</li> <li>М. Хелворсон, М. Янг «Эффективная работа с Microsoft Office».</li> <li>Лекции по информатике, 10-11 класс.</li> </ol> <a href="#_ftnref1" name="_ftn1">[1]</a> Тэги HTML можно задавать строчными или прописными. Теги <title>, <TITLE> и <TITLE> эквивалентны. <a href="#_ftnref2" name="_ftn2">[2]</a> некоторые поисковые машины не работают с титулами длиной более 64 символов <a href="#_ftnref3" name="_ftn3">[3]</a> Точка с запятой является частью escape последовательности, но в принципе она может быть опущена. Однако одни браузеры обработают такой код HTML, а другие могут и не понять. <a href="#_ftnref4" name="_ftn4">[4]</a> Некоторые навигаторы используют значения параметров HEIGHT и WIDTH для расчета деформации изображения, если реальные размеры не соответствуют заданным атрибутам. Однако при корректировке размеров таким способом изображение в большинстве случаев искажается, поэтому лучше устанавливать размеры точно, тем более что согласование размеров обеспечивают не все навигаторы. Многие современные WYSIWYG-редакторы HTML способны самостоятельно определять размеры включаемых в документ изображений. <a href="#_ftnref5" name="_ftn5">[5]</a> В заголовке таблицы можно использовать любые другие теги <a href="#_ftnref6" name="_ftn6">[6]</a> Значения атрибутов разъяснены ниже. <a href="#_ftnref7" name="_ftn7">[7]</a> Значения атрибутов разъяснены ниже. <a href="#_ftnref8" name="_ftn8">[8]</a> </div> </body> </html>