 |
Форматирование текста и размещение графики
|
|
|
|
Основы языка гипертекстовой разметки документов
Публикации во Всемирной паутине реализуются в форме Web-сайтов. Web-сайт по своей структуре напоминает журнал, который содержит информацию, посвященную какой-либо теме или проблеме. Как журнал состоит из печатных страниц, так и Web-сайт состоит из Web-страниц.
Обычно сайт имеет титульную страницу (страницу с оглавлением), на которой имеются гиперссылки на его основные разделы (Web-страницы). Гиперссылки также имеются на других Web-страницах сайта, что обеспечивает возможность пользователю свободно перемещаться по сайту.
Web-сайты обычно являются мультимедийными, так как кроме текста могут содержать иллюстрации, анимацию, звуковую- и видеоинформацию.
Создание Web-сайтов реализуется с использованием языка разметки гипертекстовых документов HTML. Технология HTML состоит в том, что в обычный текстовый документ вставляются управляющие символы (тэги) и в результате мы получаем Web-страницы в том виде, который задается тэгами.
Основными достоинствами HTML-документов являются:
· малый информационный объем;
· возможность просмотра на персональных компьютерах, оснащенных различными операционными системами.
Для создания Web-страниц используются простейшие текстовые редакторы, которые не включают в создаваемый документ управляющие символы форматирования текста. В качестве такого редактора в Windows можно использовать стандартное приложение Блокнот.
Рассмотрим, как создаются Web-сайты, на примере разработки тематического сайта «Компьютер». Сначала необходимо разработать проект сайта, то есть определить, какова будет их тематика и как они будут связаны между собой.
Пусть наш сайт кроме титульной страницы «Компьютер» будет содержать:
|
|
|
· страницу «Программы», содержащую классификацию программного обеспечения;
· страницу «Словарь», содержащую словарь компьютерных терминов;
· страницу «Комплектующие» с ценами на устройства компьютера;
· страницу «Анкета», содержащую анкету для посетителей сайта.
Форматирование текста и размещение графики
1. Открыть окно текстового редактора Блокнот.
Вид Web-страницы задается тэгами, которые заключаются в угловые скобки. Тэги могут быть одиночными или парными, для которых обязательно наличие открывающего и закрывающего тэгов (такая пара тэгов называется контейнером). Закрывающий тэг содержит прямой слэш (/) перед обозначением. Тэги могут обозначаться как прописными, так и строчными буквами.
| Тэги и атрибуты | Обозначения |
| <HTML> </HTML> | HTML-код страницы помещается внутрь данного контейнера без них браузер не в состоянии определить формат документа и правильно его интерпретировать. Web-страница разделяется на две логические части: заголовок и содержание. |
| <HEAD> </HEAD> | Заголовок Web-страницы заключается в данный контейнер и содержит название документа и справочную информацию о странице (например, тип кодировки), которая используется браузером для ее правильного отображения. |
| <TITLE> </TITLE> | Название Web-страницы содержится в данном контейнере и отражается в строке заголовка браузера при просмотре страницы. |
| <BODY> </BODY> | Основное содержание страницы помещается в данный контейнер и может включать текст, таблицы, бегущие строки, ссылки на графические изображения и так далее. |
| Назовем нашу Web-страницу «Компьютер» и поместим для начала на страницу текст «Все о компьютере». <HTML> <HEAD> <TITLE>Компьютер </TITLE> </HEAD> <BODY> Все о компьютере </BODY> </HTML> | |
| Созданную Web-страницу сохранить в виде файла в своей папке. Принято сохранять титульный файл сайта, то есть тот, который первый загружается в браузер, под именем index.htm. Для этого в поле Имя файла вместо * набрать имя index, а после точки расширение txt заменит на htm или html. Значок файла будет содержать значок браузера Internet Explorer. Не закрывать. | |
| Загрузить файл index.htm в окно браузера для просмотра (для этого открыть файл с помощью программы Internet Explorer). Не закрывать. Для удобства работы можно окна уменьшить и расположить их рядом. | |
| Теперь научимся форматировать текст. | |
| <H1> </H1> | Размер шрифта задается с помощью данных тэгов (от <H1> (самый крупный) до <H6> (самый мелкий). Заголовок страницы целесообразно выделить самым крупным шрифтом. <HEAD> <TITLE>Компьютер </TITLE> </HEAD> <BODY> <H1 > Все о компьютере </H1> </BODY> </HTML> Отредактировать текст в Блокноте, сохранить и просмотреть в Internet Explorer, для этого не забудьте обновить окно командой Вид - Обновить. (данные команды повторяйте после каждого этапа редактирования) |
| ALIGN | Некоторые тэги имеют атрибуты, которые являются именами свойств и могут принимать определенные значения. Так, заголовок по умолчанию выровнен по левому краю страницы, однако принято заголовок размещать по центру. Задать тип выравнивания для тэга заголовка позволяет заданный атрибут, которому требуется присвоить определенное значение. Выравнивание по правой границе окна реализуется с помощью записи ALIGN=”right”, а по центру - ALIGN=”center ”. <HEAD> <TITLE>Компьютер </TITLE> </HEAD> <BODY> <H1 ALIGN="CENTER"> Все о компьютере </H1> </BODY> </HTML> |
| <FONT> </FONT> | С помощью данного тэга и его атрибутов можно задать параметры форматирования шрифта любого фрагмента текста. Атрибут FACE позволяет задать гарнитуру шрифта (например, FACE=”Arial”), атрибут SIZE – размер шрифта (например, SIZE=4), атрибут COLOR – цвет шрифта (например, COLOR=”blue”). Значение атрибута COLOR можно задать либо названием цвета (например, “red”, “green” и т.д.). либо его шестнадцатеричным значением. Шестнадцатеричное представление цвета использует RGB-формат “#RRGGBB”, где первые цифры задают интенсивность красного (red), две последние – интенсивность зеленого (green) и две последние - интенсивность синего (blue) цветов. Минимальная интенсивность цвета задается 16-ричным числом 00, максимальная – FF. Следовательно, синий цвет имеет код “#0000FF”. Зададим заголовку синий цвет. <HEAD> <TITLE>Компьютер </TITLE> </HEAD> <BODY> <FONT COLOR="BLUE"> <H1 ALIGN="CENTER"> Все о компьютере </H1> </FONT> </BODY> </HTML> |
| <HR> | Заголовок целесообразно отделить от остального содержания страницы горизонтальной линией с помощью указанного одиночного тэга. <HEAD> <TITLE>Компьютер </TITLE> </HEAD> <BODY> <FONT COLOR="BLUE"> <H1 ALIGN="CENTER"> Все о компьютере </H1> </FONT> <HR> </BODY> </HTML> |
| <P> </P> | Разделение текста на абзацы производится с помощью заданного контейнера. При просмотре в браузере абзацы отделяются друг от друга интервалами. Для каждого абзаца можно задать определенный тип выравнивания. На титульной странице обычно размещается текст, кратко описывающий содержание сайта. Поместим текст, разбитый на абзацы с различным выравниваем: <HEAD> <TITLE>Компьютер </TITLE> </HEAD> <BODY> <FONT COLOR="BLUE"> <H1 ALIGN="CENTER"> Все о компьютере </H1> </FONT> <HR> <P ALIGN="LEFT"> На этом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие. </P> <P ALIGN="right"> Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету. </P> </BODY> </HTML> |
| <IMG > | Вставим изображение компьютера в текст с правой стороны. На Web-страницах могут размещаться графические файлы трех форматов – GIF, JPG и PNG. Если рисунок сохранен в другом формате, его необходимо предварительно преобразовать в один из вышеуказанных форматов с помощью графического редактора (Photo Editor, Paint). Для вставки изображения используется указанный тэг с атрибутом SCR, который указывает на место хранения файла на локальном компьютере или в Интернете. Нужно указать путь файла. Иллюстрации на web-страницах стали неотъемлемым элементом дизайна. Однако пользователи иногда в целях экономии времени отключают в браузере загрузку графического файла и читают только тексты. Поэтому, чтобы не терялся смысл и функциональность страницы, вместо рисунка должен выводиться поясняющий текст с помощью атрибута ALT, поясняющий, что должен был бы увидеть пользователь на рисунке: <IMG SRC="COMPUTER.GIF" ALT="Компьютер">. Для вставки рисунка с правой стороны текста тэг должен иметь следующий вид: <IMG SRC="COMPUTER.GIF" ALT="Компьютер" ALIGN="RIGHT"> <HEAD> <TITLE>Компьютер </TITLE> </HEAD> <BODY> <FONT COLOR="BLUE"> <H1 ALIGN="CENTER"> Все о компьютере </H1> </FONT> <HR> <P ALIGN="LEFT"> На этом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие. </P> <IMG SRC="COMPUTER.GIF" ALT="Компьютер" ALIGN="RIGHT"> <P ALIGN="right"> Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету. </P> </BODY> </HTML> |
| Можно найти рисунок компьютера в коллекции ClipArt, которую обычно используют в текстовом редакторе Word. Вставить его в текст word-ского документа, скопировать, затем вставить в документ графического редактора и сохранить в той же папке, что и Web-страница в формате GIF. |
|
|
|
|
|
|
|
|
|
|
|
|
