- •Введение в технологию создания web-сайтов образовательного назначения на языке html
- •I. Основы языка html
- •Контрольные вопросы:
- •II. Размещение графики на Web-странице
- •Контрольные вопросы:
- •III. Создание таблиц в html-документе
- •Контрольные вопросы:
- •IV. Создание гиперссылок в html-документе
- •Контрольные вопросы:
Введение в технологию создания web-сайтов образовательного назначения на языке html
I. Основы языка html
Цель обучения: научиться создавать файлы, содержащие элементы форматирования на языке HTML.
Требуемый начальный уровень подготовки слушателей: уметь работать с основными объектами Windows, знать возможности, принципы и основные приемы работы с компьютером.
Задание: создать простую web-страничку на языке html.
Теоретические аспекты:
Веб-сайт - это группа страниц, логически связанных друг с другом общей идеей или темой, написанных на языке HTML и имеющих общее дизайнерское решение.
HTML (HyperText Markup Language) - это язык, принятый в World Wide Web для создания и публикации web-страниц. HTML предоставляет авторам средства для:
включения в web-документы заголовков, текста, таблиц, списков, фотографий и т.п.;
перехода к другим web-страницам посредством щелчка кнопки мыши по гипертекстовой ссылке;
создания и заполнения форм для транзакций с удаленными службами, например, для поиска информации, бронирования билетов, оформления заказов на товары и т.п.
непосредственного включения в web-документы видеоклипов, звука и других внешних объектов.
Язык HTML используется для задания логической структуры документа (заголовки, абзацы, графические изображения и прочие объекты).
Термин HTML (HyperText Markup Language) означает «язык маркировки гипертекстов».
Первую версию HTML разработал сотрудник Европейской лаборатории физики элементарных частиц Тим Бернерс-Ли.
Язык НТМL позволяет размечать электронный документ, который отображается на экране с полиграфическим уровнем оформления; результирующий документ может содержать самые разнообразные метки, иллюстрации, аудио- и видеофрагменты и так далее. В состав языка вошли развитые средства для создания различных уровней заголовков, шрифтовых выделений, различные списки, таблицы и многое другое.
Важным моментом, повлиявшим на судьбу HTML, стало то, что в качестве основы был выбран обычный текстовый файл. Выбор был сделан под влиянием следующих факторов:
такой файл можно создать в любом текстовом редакторе на любой аппаратной платформе в среде какой угодно операционной системы;
к моменту разработки HTML существовал американский стандарт для разработки сетевых информационных систем — Z39.50, в котором в качестве единицы хранения указывался простой текстовый файл в кодировке LATIN1, что соответствует US ASCII.
Таким образом, гипертекстовая база данных в концепции WWW — это набор текстовых файлов, размеченных на языке HTML, который определяет форму представления информации (разметка) и структуру связей между этими файлами и другими информационными ресурсами (гипертекстовые ссылки). Гипертекстовые ссылки, устанавливающие связи между текстовыми документами, постепенно стали объединять самые различные информационные ресурсы, в том числе звук и видео; в результате возникло новое понятие — гипермедиа.
Для освоения HTML могут понадобиться две вещи:
Любой браузер, т.е., программа, пригодная для просмотра HTML-файлов.
Любой редактор текстовых файлов. Вполне подойдет Блокнот (Notepad). Web-страничка создается в Блокноте и сохраняется с расширением .htm.
Вот самый простой HTML-документ:
<html>
<head>
<title>
Лабораторная работа
</title>
</head>
<body>
<H1>
Привет!
</H1>
<P>
Это простейший пример HTML-документа.
</P>
<P>
Этот html-файл может быть одновременно открыт
и в блокноте, и в браузере. Сохранив изменения в
блокноте, просто нажмите кнопку Reload ('перезагрузить') в
браузере, чтобы увидеть эти изменения.
</P>
</body>
</html>
Для удобства чтения в примере введены дополнительные отступы, однако в HTML это совсем не обязательно. Более того, браузеры просто игнорируют символы конца строки и множественные пробелы в HTML-файлах. Поэтому пример мог бы выглядеть вот так:
<html>
<head>
<title>Лабораторная 2. Пример 1.</title>
</head>
<body>
<H1>Привет!</H1>
<P>Это простейший пример HTML-документа.</P>
<P>Этот html-файл может быть одновременно открыт и в блокноте, и в Internet Explorer'е. Сохранив изменения в блокноте, просто нажмите кнопку Reload ('перезагрузить') в Explorer'е, чтобы увидеть эти изменения.</P>
</body>
</html>
Как видно из примера, вся информация о форматировании документа сосредоточена в его фрагментах, заключенных между знаками "<" и ">". Такой фрагмент (например, <html>) называется тегом (по-английски — tag).
Итак, тег HTML состоит из следующих друг за другом в определенном порядке элементов:
левой угловой скобки <
необязательного слэша /, который означает, что тег является конечным тегом, закрывающим некоторую структуру. Таким образом, в этом контексте вы можете читать символ /, как конец. Практически все теги являются парными, т.е. открывающему тегу соответствует закрывающий, который пишется с чертой (/) после открывающей скобки.
имени тега, например TITLE или PRE
необязательных, если даже тег может иметь их, атрибутов, задающих различные свойства тега, дающих дополнительную информацию о том, как браузер должен обработать текущий тег. Тег может быть без атрибутов или сопровождаться одним или несколькими атрибутами, например: ALIGN=CENTER
правой угловой скобки >.
Примеры:
<H1>
<H1 ALIGN=LEFT>
Как было сказано, большинство, но не все теги HTML спарены так, что за открывающим тегом следует соответствующий закрывающий тег, а между ними содержится текст или другие теги, например:
<H1>Заголовок</H1>
В таких случаях два тега и часть документа, отделенная ими, образуют блок, называемый HTML элементом.
Теги можно вводить как большими, так и маленькими буквами. Например, метки <body>, <BODY> и <Body> будут восприняты браузером одинаково.
Для каждого тега определяется множество возможных атрибутов. Большинство тегов допускает один или несколько атрибутов, однако атрибутов может и совсем не быть.
Спецификация атрибута состоит из расположенных в следующем порядке:
имени атрибута, например WIDTH
знак равенства (=)
значения атрибута, которое задается строкой символов, например, "80".
Всегда полезно заключить значение атрибута в кавычки, используя либо одинарные ('80'), либо двойные кавычки ("80").
Практические задания:
Создание простейших файлов HTML
Создайте папку, в которой Вы будете сохранять созданные Web-страницы.
Запустите стандартную программу Блокнот (Notepad) и наберите следующий текст с элементами форматирования:
<HTML>
<HEAD>
<TITLE> Учебный файл HTML </TITLE>
</HEAD>
<BODY>
Расписание занятий на вторник
</BODY>
</HTML>
Сохраните файл под именем schedule.html.
Для просмотра созданной Web-страницы загрузите браузер Mozilla Firefox.
Откройте в меню браузера Файл → Открыть файл и найдите созданный ранее файл schedule.html, загрузите его. Убедитесь, что название Web-страницы (Учебный файл HTML) отразилось в верхней статусной строке браузера.
Управление расположением текста на экране
Внесите изменения в текст, расположив слова "Расписание", "занятий", "на вторник" на разных строках:
<HTML>
<HEAD>
<TITLE> Учебный файл HTML </TITLE>
</HEAD>
<BODY>
Расписание
занятий
на вторник
</BODY>
</HTML>
Сохраните внесенные изменения, с помощью команд Файл → Сохранить.
Просмотрите с помощью браузера новую полученную Web-страницу используя клавишу F5 или с помощью кнопки Обновить.
Предыдущие шаги не вызвали никаких видимых изменений в документе html — при отображении гипертекста браузеры автоматически размещают текст на экране, не принимая во внимание встречающиеся в файле переводы строк и идущих подряд пробелов. Существуют специальные команды, выполняющие перевод строки и задающие начало нового абзаца. Кроме того, существует команда, которая запрещает программе браузера каким-либо образом изменять форматирование текста и позволяет точно воспроизвести на экране заданный фрагмент текстового файла.
Тег перевода строки <BR> отделяет строку от последующего текста или графики. Тег абзаца <P> тоже отделяет строку, но еще добавляет отступ, который зрительно выделяет абзац. Оба тега являются одноэлементными (не требуют закрывающего тега).
Внесите изменения в текст файла HTML:
<HTML>
<HEAD>
<TITLE> Учебный файл HTML </TITLE>
</HEAD>
<BODY>
Расписание <P>занятий <BR>на вторник
</BODY>
</HTML>
Сохраните внесенные изменения в файле schedule.html. Просмотрите с помощью браузера обновленную страницу.
Выделение фрагментов текста
Теги выделения фрагментов текста позволяют управлять отображением отдельных символов и слов. Существует несколько тегов выделения фрагментов текста:
Стиль |
Элемент или тег |
Результат |
Bold |
<B> Этот текст жирный </B> |
Этот текст жирный |
Italic |
<I> Этот текст наклонный </I> |
Этот текст наклонный |
Underline |
<u> Этот текст подчеркнутый </u> |
Этот текст подчеркнутый |
Внесите изменения в файл schedule.html:
<HTML>
<HEAD>
<TITLE> Учебный файл HTML </TITLE>
</HEAD>
<BODY>
<B>Расписание</B> <I>занятий</I> <U> на вторник</U>
</BODY>
</HTML>
Посмотрите новую полученную Web-страницу.
Попробуейте использовать вложение тегов:
<I><B>Расписание</B></I> <I>занятий</I> <U> на вторник</U>.
Изменение размера текста
Существует два способа управления размером текста, отображаемого браузером:
использование стилей заголовка;
задание размера текущего шрифта.
Когда пишется HTML-документ, текст структурно делится на просто текст, заголовки частей текста, заголовки более высокого уровня и т.д. Первый уровень заголовков (самый большой) обозначается цифрой 1, следующий - 2, и т.д. Большинство браузеров поддерживает интерпретацию шести уровней заголовков, определяя каждому из них собственный стиль.
Заголовки выше шестого уровня не являются стандартом и могут не поддерживаться браузером.
Заголовок самого верхнего уровня имеет признак "1". Синтакс заголовка уровня 1 следующий:
<H1> Заголовок первого уровня </H1>
Заголовки другого уровня могут быть представлены в общем случае так:
<Hx> Заголовок x-го уровня </Hx>
где x - цифра от 1 до 6, определяющая уровень заголовка.
Тег <FONT> представляет собой контейнер для изменения характеристик шрифта, таких как размер, цвет и гарнитура. Хотя этот тег до сих пор поддерживается всеми браузерами, он считается устаревшим и от его использования рекомендуется отказаться в пользу стилей.
<font>Текст</font>
Параметры тега <FONT>:
Color - устанавливает цвет текста.
Face - определяет гарнитуру шрифта.
Size - задает размер шрифта в условных единицах.
Внесите изменения в файл schedule.html:
<HTML>
<HEAD>
<TITLE> Учебный файл HTML </TITLE>
</HEAD>
<BODY>
<H1>Расписание</H1> <I>занятий</I> <U>на вторник</U>
</BODY>
</HTML>
Просмотрите обновления через браузер.
Внесите следующие изменения в файл schedule.html:
<HTML>
<HEAD>
<TITLE> Учебный файл HTML </TITLE>
</HEAD>
<BODY>
<FONT SIZE="7">Расписание</FONT> занятий на вторник
</BODY>
</HTML>
Самостоятельно измените размер шрифта для текста "занятия на вторник", используя тег <FONT>.
Гарнитура и цвет шрифта
Тег <FONT> предоставляет возможности управления размером, начертанием и цветом текста. Изменение гарнитуры шрифта выполняется простым добавлением к тегу <FONT> атрибута FACE. Например, для изображения текста шрифтом Arial необходимо записать <FONT FACE="ARIAL">.
Для изменения цвета шрифта в теге <FONT> можно использовать атрибут COLOR="X". Вместо Х надо подставить либо название цвета (в кавычках, на английском языке), либо его шестнадцатеричное значение (перед шестнадцатеричным значением ставится символ #). При задании цвета шестнадцатеричным числом можно представить этот цвет разложенным на три составляющие: красную(R), зеленую (G), синюю (B), каждая из которых имеет значение от 0 до FF. Примеры записи цвета в формате RGB приведены в таблице:
Цвет |
RRGGBB |
black | черный |
000000 |
white | белый |
FFFFFF |
red | красный |
FF0000 |
green | зеленый |
00FF00 |
azure | бирюзовый |
00FFFF |
blue | синий |
0000FF |
gray | серый |
A0A0A0 |
purple | фиолетовый |
FF00FF |
yellow | желтый |
FFFF00 |
brown | коричневый |
996633 |
orange | оранжевый |
FF8000 |
violet | лиловый |
8000FF |
Внесите изменения в файл schedule.html:
<HTML>
<HEAD>
<TITLE> Учебный файл HTML </TITLE>
</HEAD>
<BODY>
<U><I><B><FONT COLOR="#FF0000" FACE="ARIAL" SIZE="7">Расписание</FONT></B></I></U>
занятий на вторник
</BODY>
</HTML>
Самостоятельно измените размер, цвет, гарнитуру, стиль текста документа.
Выравнивание текста по горизонтали
С помощью тегов HTML можно управлять горизонтальным выравниванием текста. Если не оговаривать способ выравнивания, все элементы в документе будут выравниваться по левому краю и иметь неровное правое поле.
Современные браузеры для выравнивания текста используется атрибут ALIGN=, который встраивается в теги абзаца или заголовка:
ALIGN=CENTER — выравнивание по центру;
ALIGN=RIGHT — выравнивание по правому краю;
ALIGN=LEFT — выравнивание по левому краю.
Внесите изменения в файл schedule.html:
<HTML>
<HEAD>
<TITLE> Учебный файл HTML </TITLE>
</HEAD>
<BODY>
<P ALIGN=CENTER>
<FONT COLOR="#008080" SIZE="7"><B>Расписание</B></FONT><BR>
<FONT SIZE="6"><I>занятий на вторник</I></FONT>
</P>
</BODY>
</HTML>
Просмотрите обновления.
Задание цвета фона и текста
Цвета фона и текста документа устанавливаются в начале файла HTML в теге <BODY>. Атрибут BGCOLOR= задает цвет фона страницы, TEXT= определяет цвет текста для всей страницы, LINK= и VLINK= определяют цвета соответственно непросмотренных и просмотренных ссылок.
Внесите изменения в файл schedule.html:
<HTML>
<HEAD>
<TITLE> Учебный файл HTML </TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFCC" TEXT="#330066">
<P ALIGN=CENTER>
<FONT COLOR="#008080" SIZE="7"><B>Расписание</B></FONT><BR>
<FONT SIZE="6"><I>занятий на вторник</I></FONT>
</P>
</BODY>
</HTML>