Создание Web-страниц. Изучение языка HTML.
HTML - Hyper Text Markup Language. Web-страница (документ HTML) представляет собой текстовый файл на языке HTML формата *.htm или *.html, размещенный в World Wide Web (WWW). WWW - Всемирная Паутина, распределенная система доступа к гипертекстовым документам, существующая в Интернете. Web-страница кроме текста может содержать гипертекстовые ссылки, при помощи которых можно переходить к другим Web-страницам и просматривать их. Web-страница может содержать вставки в виде графики, анимации, видеоклиппов и музыки. Для просмотра Web-страниц можно использовать, например, MicroSoft Internet Explorer или NetScape Navigator, или Opera (просмотрщик или броузер). Язык HTML позволяет: 1) Создавать и редактировать Web-страницы, в том числе свою домашнюю Web-страницу, которую можно затем разместить в Интернете; 2) Редактировать документы HTML, полученные из Интернета, так чтобы функционировали все внедренные в документ объекты (картинки, анимации и т.д.); 3) Создавать мультимедийные презентации, слайд-шоу, демонстрационные проекты, благодаря гипертекстовым ссылкам и возможности вставлять в документ HTML рисунки, диаграммы, анимации, видеоклипы, музыкальное и речевое сопровождение, текстовые спецэффекты (например, бегущая строка). Существуют три основных способа создания Web-страниц (или документов HTML): 1) Использование текстового редактора Блокнот (NotePad), встроенного в Windows, и просмотр результатов с помощью броузера. Этот самый простой способ рекомендуется начинающим. Технология этого способа создания Web-страницы такова: В редакторе Блокнот создается файл Web-страницы, который сохраняется с расширением *.htm. Затем этот файл загружается и просматривается программой Internet Explorer. Для вызова редактора Блокнот с целью редактирования файла Web-страницы во время ее просмотра в Internet Explorer, используется пункт меню Вид, Источник или В виде HTML. После сохранения файла и выхода из Блокнота для просмотра отредактированной страницы надо нажать клавишу F5 или кнопку "Обновить" в панели инструментов Internet Explorer. 2) Использование специальных редакторов документов HTML, например Hot Metal Light, Hot Dog Professional, MS Front Page, HTMLPad и др. 3) Использование редактора Word-97, где создается текст документа, который затем конвертируется в HTML-формат. Рассмотрим основные понятия языка HTML. 1. Элемент - это конструкция языка HTML, или контейнер, содержащий данные. Web-страница представляет собой набор элементов. 2. Тег - это стартовый и конечный маркеры элемента. Теги определяют границы действия элементов и отделяют элементы друг от друга. В тексте Web-страницы теги заключаются в угловые скобки, например: <HTML>. Конечный тег всегда снабжается косой чертой: </HTML>. 3. Гиперссылка - фрагмент текста, который является указателем на другой файл или объект. Гиперссылки позволяют переходить от одного документа к другому. 4. Фрейм - область гипертекстового документа со своими полосами прокрутки. 5. Апплет - программа, передаваемая на компьютер клиента в виде отдельного файла и запускаемая при просмотре Web-страницы. 6. Скрипт - программа, включенная в состав Web-страницы для расширения ее возможностей. 7. Загрузка (DownLoad) - копирование документа с Web-сервера на компьютер клиента. UpLoad - копирование документа c компьютера клиента на Web-сервер - используется при создании собственной Web-страницы (т.е. при ее опубликовании).
Рассмотрим общую структуру типичного простейшего документа HTML:
<COMMENT>Комментарий</COMMENT>
<HTML>
<HEAD>
<TITLE>Название документа</TITLE>
</HEAD>
<BODY>
Здесь расположен текст самого документа HTML.
</BODY>
</HTML>
Просмотр простейшего документа HTML
Дадим пояснения указанным тегам документа HTML.
<COMMENT> или <!-- --> - Комментарий к документу. Он игнорируется
броузером. Комментарий не является обязательным и может отсутствовать.
<HTML> - идентификатор всего блока HTML-команд.
<HEAD> - идентификатор заголовка документа HTML.
<TITLE> - идентификатор заголовка окна просмотра.
<META> - этот непарный тег применяется для указания подробной
информации о документе.
<BODY> - идентификатор HTML-команд документа для просмотра.
Три основных тега <HTML>, <HEAD> и <BODY> передают броузеру
основную информацию для идентификации и организации документа.
Все указанные теги - парные, то есть каждый из них заканчивается
конечным тегом с косой чертой.
Все команды можно писать как с маленькой буквы, так и с большой.
Рассмотрим теги форматирования текстового потока:
<P> - идентификатор конца абзаца.
<BR> - идентификатор перевода строки.
<HR> - идентификатор изображения горизонтальной линии.
Эти теги одиночные, т.е. непарные, они не требуют тегов с косой
чертой.
<PRE> - установка равноширинного шрифта. В конце нужен тег </PRE>.
Рассмотрим парные теги форматирования заголовков и подзаголовков
документа: <H1>, <H2>, <H3>, <H4>, <H5>, <H6>. При этом заголовки
будут выведены большими буквыми, причем размер букв у тега <H1>
будет самый большой, у <H2> меньше, у <H3> еще меньше и т.д.
Рассмотрим парные теги форматирования символов текста:
<B> - идентификатор полужирного шрифта.
<strong> - идентификатор выделенного шрифта.
<i> - идентификатор курсива.
<U> - идентификатор подчеркивания.
<s> - идентификатор перечеркивания.
<tt> - идентификатор равноширинного шрифта (телетайпного или курьера).
<big> - задает увеличенный размер шрифта.
<small> - задает уменьшенный размер шрифта.
<CENTER> - задает центрирование текста.
<sub> - задает нижний индекс.
Пример: x<sub>1</sub>+x<sub>2</sub>=x<sub>3</sub>
<sup> - задает верхний индекс.
Пример: Теорема Пифагора a<sup>2</sup>+b<sup>2</sup>=c<sup>2
Просмотр примера с тегами форматирования текстового потока.
Рассмотрим теги форматирования абзацев:
<p align=left> - выравнивание текста в абзаце по левому краю.
<p align=right> - выравнивание текста в абзаце по правому краю.
<p align=center> - выравнивание текста в абзаце по центру.
<p align=justify> - полное выравнивание по обоим краям экрана.
align - атрибут выравнивания.
Рассмотрим теги списков.
Они являются способом наглядного отображения структурированной информации.
Упорядоченные списки служат для отображения последовательных
операций или алгоритмов. Броузер автоматически генерирует номера
для каждого пункта в списке.
<OL> - идентификатор упорядоченного списка. В конце </OL>.
Неупорядоченные списки служат для составления перечней, когда
порядок следования пунктов несущественен. Перед каждым элементом
будет стоять специальный списочный значок (точка).
<UL> - идентификатор неупорядоченного списка. В конце </UL>.
Отдельные элементы в упорядоченном и неупорядоченном списках
помечают одиночным тегом <LI>, а элементы в списках определений
<DL> тегами <DT> для термина и <DD> для значения термина.
<LI> - идентификатор элемента в упорядоченном и неупорядоченном списке.
Конечный тег </LI> может быть опущен.
Списки определений обеспечивают специальное форматирование, как
в словарях, для терминов и связанных с ними описаний.
<DL> - идентификатор списка определений. В конце </DL>.
<DT> - идентификатор термина в списке определений.
<DD> - идентификатор значений термина в списке определений.
Списки определений имеют вид:
<DL>
<DT> название термина 1
<DD> определение термина 1
<DD> другое определение термина 1
.....
</DL>
Применение тегов списков изложено в Примерах 4 и 5.
Просмотр примера с тегами списков.
Некоторые важнейшие теги HTML
<BODY bgcolor="teal" text="aqua" link="red"> - задает цвет текста
(text), цвет фона (bgcolor) и цвет гипертекстовой ссылки (link).
Задают еще alink="" и vlink="" -цвета активной и посещенной ссылки.
<BODY background="back.jpg"> - задает фоновый рисунок (обои) на Web-
странице в файле back.jpg.
<BODY background="/windows/tartan.bmp"> - фоновый рисунок (обои)
взят из файла tartan.bmp, причем указан путь этого файла.
<font color="yellow" size=5> - задает цвет символов текста (атрибут
color) и их размер (атрибут size). В конце нужен тег </font>.
<hr color="lime"> - задает цвет горизонтальной линии.
<hr color="red" size=3 width=220 align=center> - атрибут size=N
задает толщину линии в пикселах; атрибут width=M задает длину линии
в пикселах; атрибут align=center (или left, или right) задает смещение
линии (ее размещение в центре, или смещение влево, или вправо).
<IMG SRC="lycos.gif"> - вставка графического изображения в виде
файла lycos.gif. Есть и анимационные gif-файлы. Можно также
использовать и графические файлы формата *.jpg (или *.jpeg), *.bmp.
Пример графического файла lycos.gif, вставленного в документ HTML:
|
Введение. Основные способы создания Web-страниц. Основные понятия языка HTML.
HTML - Hyper Text Markup Language. Web-страница (документ HTML) представляет собой текстовый файл на языке HTML формата *.htm или *.html, размещенный в World Wide Web (WWW). WWW - Всемирная Паутина, распределенная система доступа к гипертекстовым документам, существующая в Интернете. Web-страница кроме текста может содержать гипертекстовые ссылки, при помощи которых можно переходить к другим Web-страницам и просматривать их. Web-страница может содержать вставки в виде графики, анимации, видеоклиппов и музыки.
Для просмотра Web-страниц можно использовать, например, MicroSoft Internet Explorer или NetScape Navigator, или Opera (просмотрщик или броузер).
Язык HTML позволяет:
1) Создавать и редактировать Web-страницы, в том числе свою домашнюю Web-страницу, которую можно затем разместить в Интернете;
2) Редактировать документы HTML, полученные из Интернета, так чтобы функционировали все внедренные в документ объекты (картинки, анимации и т.д.);
3) Создавать мультимедийные презентации, слайд-шоу, демонстрационные проекты, благодаря гипертекстовым ссылкам и возможности вставлять в документ HTML рисунки, диаграммы, анимации, видеоклипы, музыкальное и речевое сопровождение, текстовые спецэффекты (например, бегущая строка).
Существуют три основных способа создания Web-страниц (или документов HTML):
1) Использование текстового редактора Блокнот (NotePad), встроенного в Windows, и просмотр результатов с помощью броузера. Этот самый простой способ рекомендуется начинающим.
Технология этого способа создания Web-страницы такова:
В редакторе Блокнот создается файл Web-страницы, который сохраняется с расширением *.htm. Затем этот файл загружается и просматривается программой Internet Explorer. Для вызова редактора Блокнот с целью редактирования файла Web-страницы во время ее просмотра в Internet Explorer, используется пункт меню Вид, Источник или В виде HTML. После сохранения файла и выхода из Блокнота для просмотра отредактированной страницы надо нажать клавишу F5 или кнопку "Обновить" в панели инструментов Internet Explorer.
2) Использование специальных редакторов документов HTML, например Hot Metal Light, Hot Dog Professional, MS Front Page, HTMLPad и др.
3) Использование редактора Word-97, где создается текст документа, который затем конвертируется в HTML-формат.
Рассмотрим основные понятия языка HTML.
1. Элемент - это конструкция языка HTML, или контейнер, содержащий данные. Web-страница представляет собой набор элементов.
2. Тег - это стартовый и конечный маркеры элемента. Теги определяют границы действия элементов и отделяют элементы друг от друга. В тексте Web-страницы теги заключаются в угловые скобки, например: <HTML>. Конечный тег всегда снабжается косой чертой: </HTML>.
3. Гиперссылка - фрагмент текста, который является указателем на другой файл или объект. Гиперссылки позволяют переходить от одного документа к другому.
4. Фрейм - область гипертекстового документа со своими полосами прокрутки.
5. Апплет - программа, передаваемая на компьютер клиента в виде отдельного файла и запускаемая при просмотре Web-страницы.
6. Скрипт - программа, включенная в состав Web-страницы для расширения ее возможностей.
7. Загрузка (DownLoad) - копирование документа с Web-сервера на компьютер клиента.
UpLoad - копирование документа c компьютера клиента на Web-сервер - используется при создании собственной Web-страницы (т.е. при ее опубликовании).
Воспользуйтесь поиском по сайту: