Профессиональный лицей № 15

Внутривузовское учебное издание

 

Литературный редактор Зайцева Н.Н.

Технический редактор Смагина И.В.

 

Подписано в печать _______________Формат 60х90/16.

Бумага книжно-журнальная. Гарнитура Times New Roman.

Усл.п.л. 1, 05 п.л. Тираж 30 экз. Заказ 196.

 

Издательство ОрелГИЭТ

302028, г. Орел, ул. Октябрьская, 12

 

Отпечатано с готового оригинал-макета на

полиграфической базе ОрелГИЭТ

 

 

 

Профессиональный лицей № 15

< /body>

< /html>

HTML-код создаваемой Web-страницы

 

Чтобы сохранить документ на диске, выполните следующие шаги.

Ø Выберите команду меню Файл ♦ Сохранить. На экране появится диалог Сохранить как.

Ø В открывающемся списке Папка выберите диск для документа.

Ø В списке папок и файлов выберите каталог, в котором будет храниться HTML-документ.

Ø В поле ввода Имя файла введите имя файла проба.html для хранения страницы.

Ø Нажмите кнопку Сохранить, чтобы закрыть диалог Сохранить как. Документ будет сохранен на диске.

Осталось просмотреть созданную Web-страницу в браузере.

Ø Щелкните мышью на кнопке программы Microsoft Internet Explorer на Панели задач операционной системы Windows, чтобы перейти к окну браузера.

Ø В поле ввода Адрес окна программы введите полный путь к созданному файлу с HTML-кодом Лицей.html.

Нажмите клавишу ENTER. В окне браузера появится созданная Web-страница

 

Обратите внимание, что текст на странице отображается желтым цветом на синем фоне.

Форматирование текста на странице

Форматирование текста на странице позволяет красиво оформить Web-документ. В этом разделе мы рассмотрим, как устанавливать размер и начертание шрифта, выравнивать текст.

Мы будем по-разному форматировать отдельные фрагменты текста, поэтому включим в НTML-документ новое предложение.

Ø Щелкните мышью на кнопке программы Блокнот, чтобы перейти к окну редактора.

Ø Вставьте новую строку, которая должна быть расположена ниже тега < body>, с тек­стом Профессиональный лицей № 15 готовит профессии рабочих и служащих!

На Web-странице могут использоваться заголовки разделов документа. Заголовки объявляются парой тегов: < h1> < /h1>, < h2> < /h2>, < h3> < /h3>, < h4> < /h4>, < h5> < /h5> или < h6> < /h6>. Символы в заголовке имеют большую толщину и размер по сравнению с обычным текстом. Заголовок с тегом < hl> является самым крупным, а с тегом < h6> - самым мелким. Номер в названии тега указывает на уровень заголовка, что позволяет ес­тественным образом включать в разделы документа подразделы. Необходимо отличать заголовок раздела от заголовка документа, определяемого тегом < head>.

 

Создадим заголовок раздела в нашем HTML-документе.

Ø В документе первое предложение Профессиональный лицей № 15 замените на фрагмент кода < h1> Профессиональный лицей № 15< /h1>;, чтобы данная строка стала заголовком первого уровня.

Для просмотра документа в браузере, его нужно сохранить на диске.

Ø Выберите команду меню Файл ♦ Сохранить. HTML-документ будет сохранен на диске.

Ø Щелкните мышью на кнопке программы Microsoft Internet Explorer, чтобы перейти к окну браузера.

Ø Нажмите кнопку с надписью Обновить на панели инструментов. Файл Лицей.html с нашим HTML-документом будет перезагружен, а на Web-странице появится заголовок.

По умолчанию заголовок раздела выравнивается по левому краю страницы. Атрибут align позволяет выровнять заголовок по правому краю или центрировать. Значение right -данного атрибута обеспечивает выравнивание текста по правому краю, а значение center - центрирование. Давайте выровняем заголовок раздела по центру Web-страницы.

Ø Нажмите кнопку программы, чтобы перейти к окну редактора.

Ø Добавьте в тег < h1> атрибут align=center, чтобы центрировать заголовок.

Дан­ный элемент будет выглядеть так:

< h1 align=center> Профессиональный лицей № 15< /h1>

Ø Выберите команду меню Файл ♦ Сохранить для сохранения

Ø Щелкните мышью на кнопке программы Microsoft Internet Explorer на Панели задач операционной системы Windows, чтобы перейти к окну браузера.

Ø Нажмите кнопку с надписью Обновить на панели инструментов. Файл проба.html будет перезагружен, а на Web-странице заголовок будет центрирован

Теперь установим наклонное начертание остального текста Web-страницы, воспользовавшись парными тегами < i> < /i>.

Ø Перейдите к редактору.

Ø Добавьте в начало и конец второго предложения текста HTML-документа откры­вающий < i> и закрывающий < /i> теги. Элемент с данными тегами примет вид:

< i> Профессиональный лицей № 15 готовит профессии рабочих и служащих! < /i>

Ø Сохраните HTML-документ на диске с помощью команды меню Файл ♦ Сохранить.

Ø Перейдите к программе Microsoft Internet Explorer.

Ø Перезагрузите файл с HTML-документом Лицей.html, используя кнопку с надписью Обновить на панели инструментов, и на Web-странице текст примет наклонное начертание.

Отметим, что пара тегов < b> < /b> позволяет установить полужирное начертание текст, пара < u> < /u> - подчеркнутое начертание символов.

HTML поддерживает несколько способов изменения размера шрифта. Но, мы рассмотрим наиболее удобный часто используемый способ, он заключается в использовании пары тегов < font> < /font>;. Атрибут тега size позволяет устанавливать размеры шрифта в условных единицах от 1 до 7: значение 1 соответствует минимальному размеру шрифта величина 7 - максимальному. Другой атрибут рассматриваемого тега - face позволяет указать название шрифта, например, Arial, которым браузер будет отображать текст. Еще один атрибут - color - способен дать цвет шрифта. Значением данного атрибута являются те же значения, что и для описанных ранее атрибутов для установки цвета фона и текста.

Итак, изменим размер шрифта с помощью тега < font>;.

Ø Перейдите к редактору Блокнот.

Ø Добавьте в начало и конец второго предложения текста HTML-документаоткры­вающий < font size=5> и закрывающий < /font> теги, чтобы установить размер шрифта в 5 условных единиц. Фрагмент кода будет выглядеть так:

< font size=5> < i> Профессиональный лицей № 15 готовит профессии рабочих и служащих! < /i> < /font>

Теперь выровняем данный фрагмент текста по центру с помощью тегов < center> < /center>;.

Ø Добавьте в начало и конец второго предложения текста HTML-документа откры­вающий < center> и закрывающий < /center> теги

Ø Сохраните HTML-документ на диске.

Ø Перейдите к программе Microsoft Internet Explorer.

Ø Перезагрузите файл Лицей.html. На Web-странице основной текст будет центриро­ван.

Вставка изображения

 

Рисунки позволяют существенно повысить привлекательность Web-страницы, лучше передать содержание документа. В этом разделе я расскажу и покажу, как вставлять изо­бражение в Web-документ.

Рисунки на Web-странице должны быть созданы в таком графическом формате, который поддерживается браузером. К стандартным форматам Web-графики относятся GIF, JPG и PNG. Эти форматы обеспечивают эффективное сжатие изображений и минимальный размер файлов, что значительно сокращает время загрузки из сети.

Сначала подготовим необходимые графические файлы для вставки в Web-документ.

Ø Скопируйте графические файлы с расширением GIF в папку, в которой хранится файл с HTML-кодом Лицей.html.

Дело в том, что в HTML-документе должно быть указано имя графического файла или полный путь к нему. Чтобы ваша Web-страница была независима от возможных измене­ний на диске, все файлы, относящиеся к создаваемому Web-документу или сайту, лучше хранить в одной папке.

Для вставки изображения в Web-документ используется одиночный тег < img>. Единственный обязательный атрибут данного тега srс определяет имя вставляемого файла или его электронный адрес в Интернете. С помощью необязательного атрибута < border> можно включить отображение рамки вокруг рисунка. Значение атрибута определяет толщину рамки в пикселях.

Вставим скопированный рисунок в Web-документ.

Ø Перейдите к редактору Блокнот.

Ø После элемента заголовка раздела < h1 align=center> Профессиональный лицей №15< /h1> вставьте новую строку с кодом, который обеспечивает включение рисунка с рамкой в Web-документ:

< img src=licem.GIF border=1>

Ø Сохраните HTML-документ на диске.

Ø Перейдите к программе Microsoft Internet Explorer и перезагрузите файл Лицей.html. На Web-странице появится рисунок здания лицея.

По умолчанию вставленное изображение выравнивается по левому краю страницы. Давайте отцентрируем вставленный рисунок.

Ø Перейдите к редактору Блокнот.

Ø Добавьте в элемент встраивания изображения открывающий < center> и закры­вающий < /center > теги, чтобы выровнять рисунок по центру. Указанный фрагмент HTML-кода примет вид:

< center> < img src=licem.GIF> < /center>

Ø Сохраните HTML - документ на диске.

Ø Перейдите к программе Microsoft Internet Explorer и перезагрузите файл Лицей.html. На Web-странице рисунок будет выровнен по центру. Например

Для установки фонового рисунка применяется атрибут background тега < body>. В качестве значения атрибута следует указать имя графического файла с изображением.

Установим фоновый рисунок на Web-страницу.

Ø Перейдите к редактору Блокнот.

Ø Добавьте в элемент с тегом < body> атрибут background=2. GIF, чтобы данный фрагмент HTML-кода выглядел так:

< body bgcolor=blue text=red background=2.GIF>

Ø Сохраните документ на диске.

Перейдите к программе Microsoft Internet Explorer и перезагрузите файл Лицей.html. На Web-странице появится фоновый рисунок.

Обратите внимание, что имя графических файлов в HTML-документе набрано строчны­ми буквами. Операционная система Windows не различает регистр букв в названиях файлов. Однако операционная система Unix, в которой в дальнейшем может функционировать ваш сайт или Web-страница, отличает строчные и прописные буквы, поэтому имя графического файла в теге следует указывать с соблюдением регистра.

 

Создание списков перечисления

Список является удобной формой представления данных. Например, с помощью списков полезно объединять фрагменты информации в единую структуру, описывать многоша­говые процессы, представлять оглавления документов. Язык HTML поддерживает нуме­рованные и ненумерованные списки. В ненумерованных или маркированных списках для выделенияэлементов используются специальные символы, которые называют мар­керами списка. В нумерованных или упорядоченных списках перед элементом отобра­жается его порядковый номер. Рассмотрим, как создавать марки­рованный список на Web-странице.

Ø В элемент < title> < /title> введите заголовок документа Здесь вы получите специальности: что­бы данный фрагмент HTML-кода выглядел так:

< title> Здесь вы получите специальности: < /title>

Ø Ниже тега < body> введите новую строку с элементом HTML-кода, который опреде­ляет центрированный заголовок раздела документа:

< h2 align=center>: < /h2>

Для создания маркированного списка следует использовать пару тегов < ul> < /ul>;, ко­торая ограничивает список. Каждый элемент списка должен начинаться тегом < li> причем нет необходимости в закрывающем теге элемента. Давайте создадим ненумерованный список профессий. Ниже элемента < h2 align=center> Здесь вы получите специальности: < /h2> введите код для списка:

< ul>

< li> Мастер по обработке цифровой информации

< li> Контролер сберегательного банка

< li> Электромонтер по ремонту и обслуживанию электрооборудования

< /ul>

Полный HTML-код представлен на Рис.

 

Осталось сохранить документ на диске и просмотреть его в браузере.

Ø Выберите команду меню Файл ♦ Сохранить.

Ø В открывающемся списке Папка выберите диск, в котором расположен файл с HTML - кодом Лицей.html.

Ø Нажмите кнопку Сохранить, чтобы закрыть диалог Сохранить как.

Ø Перейдите к программе Microsoft Internet Explorer.

Ø В поле ввода Адрес окна программы введите полный путь к созданному файлу с HTML - кодом Лицей.html.

Ø Нажмите клавишу ENTER. В окне появится созданная Web-страница со спи­ском Обратите внимание, что каждый элемент списка помечен специальным маркером - темным кружком. Отметим, что для создания нумерованных списков можно воспользоваться парой тегов < ol> < /ol>;, причем элементы списка также должны начинаться тегом < li>.

Ссылки на другие страницы

Ссылка состоит из двух частей: указателя и адресной части. Указатель ссылки связан с ее представлением на Web-странице. Указателем ссылки может быть фрагмент текста или изображение. Указатель ссылки обычно выделяется цветом. При подведении к ссылке указатель мыши принимает вид . Адресная часть ссылки содержит имя доку­мента, на который указывает ссылка, или его электронный адрес для загрузки из Интер­нета. Далее будет рассказано, как вставлять в Web-документ ссылки, пред­ставленные текстом и рисунком.

Ø Сначала создайте еще три HTML-документа с именами МОЦИ.html, КСБ.html, Электрик.html для начала пропишите только заголовочную часть HTML-документов. Напрмер,

< html>

< head>

< title> Мастер по обработке цифровой информации< /title>

< /head>

Ø Перейдите к редактору Блокнот.

Ø Откройте основной HTML-документ проба.html, в который мы будем вставлять гипертекстовые ссылки.

Для вставки ссылки на другие страницы используется пара тегов < а> < /а>;. Данный тег имеет единственный атрибут href, значением которого является адресная часть ссылки, т.е. имя документа, на который нужно сослаться, или его электронный адрес для загруз­ки из Интернета. Указатель ссылки располагается между открывающим < а> и закры­вающим < /а> тегами. Это может быть фрагмент текста или HTML-код, соответствую­щий рисунку.

Давайте создадим текстовую ссылку, в которой указателем будет Мастер по обработке цифровой информации на нашей Web-странице, а адресной частью - имя созданного ранее документа МОЦИ.html.

Пропишите HTML-код со ссылкой на Web-страницуМОЦИ.html < а href=МОЦИ > Мастер по обработке цифровой информации < /a>. Адресная часть можно заключать в кавычки, так как некоторые браузеры могут ее некорректно обрабатывать без кавычек.

< ul>

< li> < a href=МОЦИ.html> Мастер по обработке цифровой информации< /a>

< li> Контролер сберегательного банка

< li> Электромонтер по ремонту и обслуживанию электрооборудования

Ø Сохраните изменения.

Ø Откройте браузер и обновите страницу. Предложение Мастер по обработке цифровой информации станет подчеркнутым и изменит цвет как гиперссылка.

Ø Проверьте работу ссылки.

Ø Пропишите HTML-коды на оставшиеся Web-страницы.

 

Гиперссылка на домашнюю страницу.

 

Так как страница проба.html является главной страницей, она будет домашней. Чтобы создать переход с других страниц на домашнюю, необходимо с помощью тегов < br> или < p> < /p> внизу страницы написать слово «Домой» или «На домашнюю страницу» и с этой фразы прописать гиперссылку:

 

< a href=проба.html> Домой< /a>

< /body>

< /html>