КАТЕГОРИИ: Архитектура-(3434)Астрономия-(809)Биология-(7483)Биотехнологии-(1457)Военное дело-(14632)Высокие технологии-(1363)География-(913)Геология-(1438)Государство-(451)Демография-(1065)Дом-(47672)Журналистика и СМИ-(912)Изобретательство-(14524)Иностранные языки-(4268)Информатика-(17799)Искусство-(1338)История-(13644)Компьютеры-(11121)Косметика-(55)Кулинария-(373)Культура-(8427)Лингвистика-(374)Литература-(1642)Маркетинг-(23702)Математика-(16968)Машиностроение-(1700)Медицина-(12668)Менеджмент-(24684)Механика-(15423)Науковедение-(506)Образование-(11852)Охрана труда-(3308)Педагогика-(5571)Полиграфия-(1312)Политика-(7869)Право-(5454)Приборостроение-(1369)Программирование-(2801)Производство-(97182)Промышленность-(8706)Психология-(18388)Религия-(3217)Связь-(10668)Сельское хозяйство-(299)Социология-(6455)Спорт-(42831)Строительство-(4793)Торговля-(5050)Транспорт-(2929)Туризм-(1568)Физика-(3942)Философия-(17015)Финансы-(26596)Химия-(22929)Экология-(12095)Экономика-(9961)Электроника-(8441)Электротехника-(4623)Энергетика-(12629)Юриспруденция-(1492)Ядерная техника-(1748) |
Основы создания web-страниц
Существует большое количество инструментов, позволяющих создавать web-страницы любой сложности и последующего раз- мещения в сети Интернет. В основе создания любых web-страниц лежит язык HTML (HyperText Markup Language — язык разметки гипертекста) — стандартный язык разметки web-страниц в Интер-
нете. Язык HTML интерпретируется браузером и отображается в виде документа в удобной для пользователя форме.
Общая характеристика языка разметки web-страниц Язык HTML не является языком программирования. Он пред- назначен для разметки текстовых документов. С помощью языка HTML размечается текст, таблицы, картинки на web-странице. Размещение текста, таблиц, картинок и других элементов доку- мента на web-странице определяют специальные метки — теги (tags). Различают два вида тегов — открывающий (начальный) и за крывающий (конечный). Эти теги образуют контейнер, который может содержать текст документа и другие элементы языка раз- метки (рис. 3.3).
<тэг> — открывающий закрывающий — </тэг> <тэг_1> текст <тэг_2> текст </тэг_2> текст </тэг_1>
Рис. 3.3. Элементы языка разметки HTML
Очередность написания тэгов должна быть следующей: тэг, ко- торый открыт первым, закрывается последним, второй — предпос- ледним и т.д. Нарушение этого правила приводит к ошибкам ин- терпретации и отображения документа в интернет-браузере.
Создание простой web-страницы Web-страница представляет собой текстовый файл, содержащий теги разметки документа, и может быть создана несколькими спо- собами: «вручную», а также с помощью различных конструкторов и генераторов. Рассмотрим создание простой web-страницы с помощью стандарт-
ного текстового редактора Блокнот, входящего в состав операци- онной системы Microsoft Windows. Для запуска программы на Рабочем столе MS Windows нажмите кнопку Пуск, выберите пункт меню Выполнить, в пустом поле по- явившегося окна Запуск программы укажите название программы notepad и нажмите ОК (рис. 3.4).
Рис. 3.4. Запуск редактора Блокнот
Для создания простой web-страницы введите следующий текст (рис. 3.5).
Рис. 3.5. Простая web-страница
Сохраните полученный документ. Имя файла должно иметь тип *.html. Для этого укажите место размещения файла, тип файла — Все файлы и его имя с расширением, например index.html (рис. 3.6). Для просмотра результатов откройте полученный файл в любом браузере, установленном в системе, например Internet Explorer. Для этого нажмите правой кнопкой мыши на имени файла index.html и выберите пункты меню Открыть с помощью | Internet Explorer (рис. 3.7). В результате откроется браузер, содержащий размеченный доку- мент index.html. Результат работы браузера представлен на рис. 3.8.
Рис. 3.6. Сохранение web-страницы
Рис. 3.7. Запуск браузера
Рис. 3.8. Результат работы браузера
Для того чтобы посмотреть текст документа, загруженного в бра- узер, на тексте страницы нажмите правую кнопку мыши и в появив- шемся меню выберите пункт Просмотр HTML-кода. В результате на экране будет отображен исходный код web-страницы (рис. 3.9).
Рис. 3.9. Просмотр исходного кода web-страницы через браузер
В документе используются следующие обязательные теги: <html>…</html> — сообщают браузеру, что загружаемый файл является web-страницей; <head>…</head> — сообщают браузеру информацию о заголовке web-страницы; <title> Заголовок </title> — сообщают браузеру название web-
страницы (вкладки браузера); <body>…</body> — содержат основной текст документа; <br> — переход на следующую строку.
Шрифты и цвет на web-странице Для разметки документа часто необходимо использовать различ- ные шрифты, при этом важными параметрами являются начертание, размер и цвет. Для изменения параметров шрифта используется тег <font>…</font>, который имеет следующие параметры: а) face — задает название шрифта. Примером могут служить Times New Roman, Arial, Comic Sans MS, System, Verdana и др.;
б) color — задает цвет шрифта в системе RGB (красный, зеленый, синий). Каждый цвет задается в шестнадцатеричной системе счисле- ния и лежит в диапазоне [0..FF], что соответствует 0..255 в десятичной. Палитру цветов можно посмотреть в поисковой машине Яндекс, для чего следует указать в строке запроса ключевые слова «палитра» и необходимый цвет. В результате будет получен соответствующий ему шестнадцатеричный код (рис. 3.10);
Рис. 3.10. Цветовая палитра в поисковой системе Яндекс
в) size — задает размер шрифта, может принимать значения в пре- делах [0..7]. Стандартный размер равен 3. Примером форматирования текста может служить следующий тег: <font face=«Times New Roman» color=«#0000FF» size=5>…</font> Кроме того, текст можно сделать подчеркнутым, перечеркнутым, курсивным, полужирным, задать верхние и нижние индексы. Для этого существуют соответствующие теги: <b> Полужирный текст </b> <i> курсив </i> <u> Подчеркнутый текст </u> <s> Перечеркнутый </s> <small> Малый </small> <big> Большой </big> <sup> Верхний индекс </sup> <sub> Нижний индекс </sub> Добавляя теги в index.html, получаем код (рис. 3.11) и результаты работы браузера (рис. 3.12).
Рис. 3.11. Оформление шрифтов в исходном коде
Рис. 3.12. Оформление шрифтов на web-странице
Выравнивание текста на web-странице Необходимым элементом разметки документа является выравнива- ние текста. Для этих целей применяется специальный тег <p>...</p>, обозначающий абзац документа. Для выравнивания текста абза- ца необходимо указать параметр align, который может принимать следующие значения: left — выравнивает текст по левому краю, при этом строки текс-
та выравниваются по левому краю, а правый край располагается «лесенкой»; right — выравнивает текст по правому краю;
center — выравнивает текст по центру; justify — выравнивает текст по ширине. Примером может служить тег: <p align=center> По центру </p> Пример исходного кода для выравнивания текста представлен на рис. 3.13, а результат его интерпретации браузером — на рис. 3.14.
Рис. 3.13. Выравнивание текста: исходный код
Рис. 3.14. Выравнивание текста: окно браузера
Использование списков на web-странице В документах часто встречаются различные списки, которые так- же являются элементами разметки. В языке HTML для разметки списков используются следующие теги: <ul> <li>…</ul> — маркированный список; <li> — элемент списка. Тег имеет параметр type, который может принимать значения disk, circle, square (кружок, пустой кружок, квадрат); <ol> <li>…</ol> — нумерованный список;
<li> — элемент списка. Тег имеет параметр type, который может принимать значения 1, A, a, I, i (арабские цифры, буквы верхне- го регистра, буквы нижнего регистра, римские цифры верхнего регистра, римские цифры нижнего регистра). Нумерация списка производится автоматически в зависимости от типа списка и коли- чества элементов. Например, для списка со значением параметра type = 1 и количеством элементов, равным 5, список будет прону- мерован [1, 2, 3, 4, 5], а со значением type = i — [i, ii, iii, iv, v]. Исходный код разметки списков представлен на рис. 3.15, а ре- зультат его отображения в браузере — на рис. 3.16.
Рис. 3.15. Списки на web-странице: исходный код
Рис. 3.16. Списки на web-странице: окно браузера
Использование рисунков на web-странице Рисунки позволяют повысить привлекательность web-страницы и улучшить восприятие документа. Рисунки на web-странице долж- ны быть созданы в графическом формате, который поддерживается
браузером. К стандартным форматам web-графики относятся GIF, JPG и PNG. Для добавления рисунка на web-страницу используется тег: <img src=«vzfei.jpg» align=right> Имя графического файла в теге следует указывать с соблюде- нием регистра. Данный тег имеет параметр align, который служит для выравнивания текста относительно рисунка. Параметр может принимать следующие значения: left — текст обтекает картинку справа; right — текст обтекает картинку слева; bottom — текст снизу; top — текст сверху; middle — текст в середине. Код для размещения рисунка на web-странице приведен на рис. 3.17, а результат работы браузера — на рис. 3.18.
Рис. 3.17. Рисунок на web-странице: исходный код
Рис. 3.18. Рисунок на web-странице: окно браузера
Использование таблиц на web-странице Таблицы используются для наглядного представления информации в документе. Для оформления таблиц применяется специальный тег <table>…</table>. Для построения простейшей таблицы HTML необходимы всего три тега: <table>…</table> — служит для обозначения границ таблицы; <tr>…</tr> — служит для обозначения строки таблицы; <td>…</td> — служит для обозначения ячейки в строке таблицы. Для указания толщины рамки таблицы используется параметр border. Иногда требуется объединить ячейки таблицы. Для объединения ячеек по горизонтали и вертикали используются атрибуты colspan и rowspan: colspan — определяет число столбцов, объединяемых одной ячей- кой; rowspan — определяет число строк, объединяемых одной ячейкой. Пример: <td colspan=«2»> Текст </td> — объединение двух ячеек; <td rowspan=«2»> — объединение двух строк.
Исходный код разметки таблицы приведен на рис. 3.19, а результат отображения в браузере — на рис. 3.20.
Рис. 3.19. Таблица на web-странице: исходный код
Рис. 3.20. Таблица на web-странице: окно браузера
Создание ссылок и гипертекста на web-странице В отличие от обыкновенного текста, который можно читать только от начала к концу, гипертекст позволяет осуществлять мгновенный
переход от одного фрагмента текста к другому. Для создания и ис- пользования гипертекстовых ссылок используется специальный тег: <a href=«адрес»> текст </a> Осуществление переходов возможно как между документами (несколькими web-страницами), так и внутри документа (одной web-страницы). В качестве адреса могут выступать как файлы, так и различные web-ресурсы. Примером перехода на внешние ресурсы могут служить записи: <a href=«http://www.website.vzfei.ru»> ЗФЭИ </a> — переход на сайт института ЗФЭИ; <a href=«http://www.yandex.ru»> Яндекс </a> — переход на сайт поисковой системы Яндекс. Иногда требуется открыть документ в новой закладке браузера. Для этого следует указать параметр target=«_blank». <a href=«http://www.website.vzfei.ru» target=«_blank»> ЗФЭИ </a> — открытие страницы сайта института ЗФЭИ в отдельной вкладке. Когда на web-странице размещено много информации, удобно создать систему переходов (ссылок) в пределах одного докумен- та. Примером такой организации может служить автоматическое оглавление в документах (например, Microsoft Word). Для созда- ния системы переходов необходимо расставить в документе метки (якоря) и ссылки на них, используя следующие параметры: <a href=«#метка»> текст (ссылка) </a> — ссылка, которая ис- пользуется для перехода на заданный фрагмент текста (размещается в оглавлении); <a name=«метка»> текст (фрагмент) </a> — ссылка, которая ис- пользуется для обозначения фрагмента текста (размещается в тексте). Вместо текстового обозначения ссылки можно использовать кар- тинку. Для этого следует использовать запись: <a href=«адрес»><img src=«картинка»></a> Исходный код представлен на рис. 3.21, а результаты его интер- претации в браузере — на рис. 3.22. Отправка электронных писем с web-страницы При создании web-страницы иногда следует предусмотреть воз- можность отправки электронных писем. Для этого используется особый синтаксис ссылки с указанием параметров отправки письма: <a href=«mailto: почтовый ящик»>Написать письмо</a>
79
Также следует указать параметры письма: ?subject= Письмо с личного сайта студента &Body=Текст письма &cc=почтовый ящик1, почтовый ящик2 (копии письма) Исходный код страницы представлен на рис. 3.23, окно браузе- ра — на рис. 3.24. После нажатия на такую ссылку откроется почтовая программа, установленная в системе по умолчанию, и создаст новое письмо с заполненными полями (рис. 3.25).
Контрольные вопросы 1. Какие инструменты используются для оформления web-до- кументов? 2. Как создать «простую» web-страницу? 3. Как отобразить текст web-страницы синего цвета? 4. Как выровнять текст web-страницы по ширине? 5. Как создать маркированный список на web-странице? 6. Как добавить рисунок на web-страницу? 7. Как оформить данные на web-странице в виде таблицы? 8. Как создать на web-странице гиперссылку? 9. Как отправить электронное письмо с web-страницы?
Задания для самостоятельной работы Выполните задания и оформите полученные результаты в виде web-страницы. 1. Составьте перечень ссылок на интернет-ресурсы по заданной теме (Приложение 5). 2. Найдите с помощью поисковой системы материал по заданной теме (Приложение 5) объемом не менее двух страниц с указанием ссылок на использованные интернет-ресурсы. 3. Составьте таблицу курсов валют за последние пять лет, исполь- зуя официальные источники. 4. Составьте перечень ссылок на интернет-ресурсы по заданной теме (Приложение 5) и оформите их в виде маркированного списка на web-странице.
81
5. Используя официальные источники, получите данные по курсам валют за последние пять лет, постройте график с использованием MS Excel и разместите его в виде рисунка на web-странице. 6. Создайте личную web-страницу с фотографией (автора), авто- биографией (резюме), хобби и возможностью отправки электронных писем.
Дата добавления: 2014-11-08; Просмотров: 2053; Нарушение авторских прав?; Мы поможем в написании вашей работы! Нам важно ваше мнение! Был ли полезен опубликованный материал? Да | Нет |