УЧЕБНЫЕ МАТЕРИАЛЫ

Web-верстка, компьютерная графика,
мультимедиа

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

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




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

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

 Задание:

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

В результате изучения этого урока Вы создадите 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

 

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

<body bgcolor="#FF0000">
<body bgcolor="red"> 

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.

  1. Создайте HTML-документ, в котором введите текст из листинга 2.
  2. Убедитесь, что у Вас в папку web скопирована папка library.
  3. Сохраните документ в папке web под именем elementH.html
  4. Запустите файл 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.

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

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

Рис. 5

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

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

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

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

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

Например:

<img src="image1.jpg"> 

Листинг 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

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

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

 

Рис. 6

 

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

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

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

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

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

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

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

 

Рис. 7 

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