Гипертекстовый учебник на HTML

Скачать материалы к учебному курсу:
Скачать Notepad++ Portable
Скачать папку web

Урок 1. Создание html-страницы

Прежде, чем приступить к изучению, скачайте необходимые материалы «К разделу «Гипертекстовый учебник на HTML». Ссылка для скачивания расположена на желтом фоне вверху урока. Разархивируйте файлы.

Задание:

Изучить основные команды, используемые при создании HTML-страниц.
Выполнить 5 упражнений, приведенных в тексте урока.
Выполнить контрольное задание.
Сдать урок преподавателю устно, отвечая на вопросы и демонстрируя все действия на компьютере.

В результате изучения этого урока Вы создадите web-страницу об РГППУ, как показано на рисунке ниже.

1. Структура HTML-документа, определение цветов в web

HTML–документ создается в текстовом редакторе Блокнот и имеет расширение .htm или .html.

Кроме обычного текста HTML-файл содержит лишь один тип управляющих конструкций, называемых тегами (tags).

Теги управляют браузером при отображении web-страницы.

Все теги, чтобы отделить их от содержимого страницы, заключены в угловые скобки < >.

Обычно теги парные. Заключительный тег выглядит так же, как и начальный, но со слешем (/). Парные теги должны вкладываться друг в друга без пересечений, т.е. если в области А открылся тег В, он должен закрыться до того, как закроется тег А.

Структура HTML-документа (листинг 1)

<!DOCTYPE html>
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8" />
<title>Мой первый шаг</title>
</head>
<body>
Здравствуйте, это моя первая веб-страница!
</body>
</html>

Весь HTML-документ заключен между тегами <html> и </html>. Это обязательный тег.

Между тегами <head> и </head> содержится заголовочная часть документа.

Заголовочная часть включает теги <title> и </title>, которые используются для присвоения имени документу. Это название при загрузке документа появляется в строке заголовка браузера. Заголовок должен быть лаконичным, информативным и занимать одну строку.

В элементе <head> также могут содержаться и другие теги, которые обеспечивают связи между различными документами и метод пересылки специальных сообщений определенному браузеру или другой программе.

Все тело страницы с графикой, текстом и гиперссылками (т.е. содержательная часть) содержится между тегами <body> и </body>.

Упражнение 1.

1. Откройте папку web из скачанного архива, внутри папки web расположены папки library и rgppu. В дальнейшем все html-файлы сохраняйте в папке web!

2. Откройте программу Блокнот.

3. Наберите (или скопируйте) текст, изображенный в листинге 1.

4. Сохраните документ в папке web под именем fist.html. При сохранении документа в поле Тип файла установите Все файлы (рис. 1).

Рис. 1

5. Закройте Блокнот.

6. Зайдите в свою папку и запустите файл fist.html двойным щелчком. В окне браузера web-страница должна иметь следующий вид (рис. 2). При загрузке документа, описанного в листинге 1, в строке заголовка браузера отобразится заголовок Мой первый шаг.

Рис. 2

Примечание. Для корректного отображения шрифтов на web-странице в Notepad++ необходимо до верстки и сохранения html-файла выбрать из верхнего меню Кодировки – Кодировать в UTF-8 без BOM (UTF-8 without BOM)

Тело документа

Между тегами <body> и </body> размещается основная часть материала Вашего документа.

Многие теги, как парные, так и непарные, имеют атрибуты, уточняющие действие тега.

Атрибуты тега <body>

background	Атрибут указывает URL-адрес изображения, которое следует использовать в качестве фона документа
bgcolor	Определяет цвет фона документа.
bgproperties	Если этот атрибут имеет значение fixed, то изображение фона не будет прокручиваться
leftmargin	Атрибут определяет ширину левого поля в пикселях.
topmargin	Атрибут определяет ширину верхнего поля в пикселях.
text	Атрибут определяет цвет текста.

Примечание: в приведенной выше таблице указаны не все атрибуты тега <body>. Пока мы ограничимся знакомством только с несколькими.

Например:

<body background>="fons/image.jpg">

В данном примере фоном документа будет являться рисунок image.jpg, который находится в папке fons. В данном случае HTML-документ находится в файловой структуре на том же уровне, что и папка fons.

Определение цветов

При создании страницы Вам придется работать с подбором различных цветов и их сочетаний. Цвет определяется для текста HTML-документа и его различных фрагментов (абзацев, заголовков, сносок и т.д.). Цвет используется для задания фона документа и вида гиперссылок. Рассмотрим подробнее, как определяются цвета в WEB.

При определении цветов для документа HTML можно использовать либо название цветов, либо их шестнадцатеричные коды.

В таблице приведены названия некоторых цветов и их шестнадцатеричные коды.

Обозначение цветов в web

Цвет	Код	Цвет	Код
Black (черный)	#000000	Silver (серебряный)	#С0С0С0
Maroon (темно-бордовый)	#800000	Red (красный)	#FF00000
Green (зеленый)	#008000	Lime (известь)	#00FF00
Olive (оливковый)	#808000	Yellow (желтый)	#FFFF00
Navy (темно-синий)	#000080	Blue (синий)	#0000FF
Purple (фиолетовый)	#800080	Fuchia (фуксия)	#FF00FF
Teal (темно-зеленый)	#008080	Aqua (аква)	#00FFFF
Gray (серый)	#808080	White (белый)	#FFFFFF

Например: следующие строки идентичны, цвет фона документа будет красным.

2. Заголовки HTML-документа

Элементы H1, H2, H3, H4, H5, H6

Дальнейшее структурирование тела документа выполняется внутри элемента <body> с помощью заголовков, задаваемых элементами H1, H2, H3, H4, H5, H6 и других тегов.

Элементы заголовков являются парными, поэтому должны имеет открывающий <H1> и закрывающий </H1> теги.

HTML располагает шестью уровнями заголовков: Н1 (самый верхний), H2, H3, H4, H5 и Н6 (самый нижний). Функции элементов заголовков подобны обычным стилям заголовков в текстовых редакторах.

Листинг 2

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Заголовки HTML</title>
</head>
<body background="library/fons/fon10.jpg">
<h1>Заголовок первого уровня</h1>
<h2>Заголовок второго уровня </h2>
<h3>Заголовок третьего уровня </h3>
<h4>Заголовок четвертого уровня </h4>
<h5>Заголовок пятого уровня </h5>
<h6>Заголовок шестого уровня </h6>
</body>
</html>

Упражнение 2.

Создайте HTML-документ, в котором введите текст из листинга 2.
Убедитесь, что у Вас в папку web скопирована папка library.
Сохраните документ в папке web под именем elementH.html
Запустите файл elementH.html

На рис. 3 показано, как разные уровни заголовков выводятся браузером.

Рис. 3

3. Выравнивание текста

Атрибут ALIGN указывает расположение текста. Возможные значения данного атрибута.

align=”right”	Выравнивает текст по правому краю
align=”left”	Выравнивает текст по левому краю
align=”center”	Выравнивает текст по центру
align=”justify”	Выравнивает текст по ширине

Примечание: регистр букв в идентификаторах тегов и атрибутов не учитывается.

Листинг 3. Выравнивание заголовков

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Заголовки HTML</title>
</head>
<body bgcolor="#FFDAB9">
<h1 align="right">Заголовок выровнен вправо</h1>
  <h2 align="left">Заголовок выровнен влево</h2>
  <h3 align="center">Заголовок выровнен по центру</h3>
  <h4 align="justify">Заголовок с выравниванием "justify" равномерно заполняет строку. Заголовок с выравниванием "justify" равномерно заполняет строку. Заголовок с выравниванием "justify" равномерно заполняет строку. Заголовок с выравниванием "justify" равномерно заполняет строку. Заголовок с выравниванием "justify" равномерно заполняет строку.</h4>
</body>
</html>

Упражнение 3.

Создайте новый HTML-документ.
Введите текст из листинга 3 (для фона можете использовать любое изображение или любой цвет из папки library/colors).
Сохраните документ в папке web под именем align.html
Запустите файл align.html

Ваш документ должен выглядеть примерно так, как показано на рис. 4.

Рис. 4

Разделение текста на абзацы

Тег <p> задает начало абзаца и вставляет соответствующий пустой интервал для отделения данного абзаца от предыдущего. Тег абзаца имеет только один атрибут ALIGN.

align="left" - выравнивание абзаца по левому краю текста (значение по умолчанию).

align="right" – выравнивание абзаца по правому краю текста.

align="center" – центрирование абзаца.

align="justify" – выравнивание абзаца по ширине.

Принудительный разрыв строки

Тег <br> позволяет выполнить перенос оставшейся части текста абзаца на следующую строку. Это непарный тег. В отличие от тега абзаца не увеличивает интервал в тексте.

Изменение шрифта

Тег <font> и </font> позволяет изменить для фрагмента текста тип, размер и цвет шрифта.

Атрибуты тега <font>

size	Атрибут size=”n” используется для задания абсолютного размера между 1 и 7. size=”+n” или –n – увеличивает или уменьшает шрифт относительно текущего значения.
face	Атрибут face=”ИМЯ” – задает тип шрифта, используемого для отображения данного фрагмента текста. Можно через запятую задать несколько имен шрифтов, которые броузер ищет в локальной системе. Использоваться будет тот, чье имя найдено первым.
color	Атрибут color=”ИМЯ” задает цвет текста.

Начертания шрифтов

Тег <b>…</b> - позволяет отобразить текст полужирным шрифтом.

Тег <i>…</i> - позволяет отобразить текст в курсивном начертании.

Тег <u>…</u> - отображает подчеркнутый текст.

Например:

В этом случае текст будет отображен <b><i>жирным курсивом</i></b>, но не подчеркнутым.

А в этом случае текст будет написан <b><i><u>жирным подчеркнутым курсивом</u></i></b>.

Листинг 4

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Что такое мультимедиа</title>
</head>
<body bgcolor="#FFDAB9">
<h2 align="right"><font face="arial">Добро пожаловать в мультимедийное обучение</font></h2>
<h3 align="left"><font face="arial">А что такое мультимедиа?</font></h3>
<p align="justify">Определений мультимедиа множество. <b><font color="blue">Ричард Майер, профессор психологии Калифорнийского университета</font></b>, Санта-Барбара, определяет мультимедиа, как представления контента с использованием как текста, так и графики. Определение, на мой взгляд, очень хорошо для начала, <u>но не обеспечивает необходимой глубины для понимания того, что делает использование мультимедиа эффективным (или неэффективным) для обучения.</u></p>
<p align="justify"><font color="maroon"><b>Мао Нео и Кен Т.К. Нео</b></font>, с факультета мультимедиа Малазийского университета, расширили это определение. Они определяют мультимедиа как <b><i>«соединение различных типов цифрового контента, таких как текст, изображения, звук и видео, в интегрированное мультисенсорное интерактивное приложение или представление для доставки сообщении или информации аудитории»</i></b>. Это определение мне очень нравится, поскольку включает в себя те ключевые моменты, которые определяют использование мультимедиа в обучении. При любой комбинации или наложении обычных медиаформатов, целое заключает в себе гораздо больше, чем простая сумма составляющих.</p>
</body>
</html>

Упражнение 4

Откройте файл align.html и сохраните под новым именем text_format.html в папке web.
Измените код, как в листинге 4 (для фона можете использовать любой цвет из папки colors).Чтобы не набирать текст вручную, Вы можете скопировать этот текст из файла text_fomat.txt из папки web.
Запустите файл text_format.html
Результат должен быть примерно, как на рисунке 5.

Рис. 5

4. Изображения в HTML-документе

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

Web-страницы поддерживают следующие форматы изображений: jpg, gif, png.

Для вставки изображений используется тег <IMG>. Обязательным для этого тега является атрибут SRC (от английского SouRCe – источник). Он определяет путь до графического файла, изображение которого должно быть выведено на WEB-странице.

Для вставки изображения используется команда <img src=”Имя файла”>.

Например:

Листинг 5. Вставка изображения в Web-документ

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Вставка изображений в Web-страницу</title>
</head>
<body bgcolor="#CCFFCC">
<p align="center"><font face="Arial" size="5" color="navy"><b>Добро пожаловать на самую лучшую в мире Web-страницу</b></font></p>
<p align="center"><img src="library/images/tiger.jpg" alt="Фотография тигра"></p>
</body>
</html>

Упражнение 5

Создайте новый HTML-документ.
Введите текст из листинга 5 (для фона можете использовать любое изображение или любой цвет из папки colors).
Сохраните документ в папке web под именем tiger.html
Запустите файл tiger.html

Ваш документ должен выглядеть так, как показано на рис. 6.

Рис. 6

5. Контрольное задание

Задание: cоздать web-страницу в соответствии с рис. 7

Все изображения для задания находятся в папке web/rgppu.
Фон для WEB-страницы Вы можете выбрать в папке web/library/fons.
Тексты, необходимые для создания страницы, приведены ниже.
Сохраните HTML-документ в папке web под именем rgppu.html

Российский государственный профессионально-педагогический университет (РГППУ) основан в 1979 году и является головным в системе высшего профессионального образования Российской Федерации. РГППУ - это первый в стране инженерно-педагогический вуз для подготовки кадров начального, среднего и высшего профессионального образования.

За более чем 25-летнюю историю своего развития вуз стал одним из признанных лидеров в системе педагогического образования и неизменно входит в пятерку рейтинга 100 ведущих педагогических вузов России.

В настоящее время в структуре РГППУ 3 института

Институт психолого-педагогического образования (ППО)
Институт гуманитарного и социально-экономического образования (ГСЭО)
Институт инженерно-педагогического образования (ИПО)

Рис. 7

Приготовьтесь продемонстрировать файлы fist.html, elementH.html, align.html, tiger.html, rgppu.html