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

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

Задание:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Атрибут указывает URL-адрес изображения, которое следует использовать в качестве фона документа

Определяет цвет фона документа.

Если этот атрибут имеет значение fixed, то изображение фона не будет прокручиваться

Атрибут определяет ширину левого поля в пикселях.

Атрибут определяет ширину верхнего поля в пикселях.

Атрибут определяет цвет текста.

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

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

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

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

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

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

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

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

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

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

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

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

и закрывающий

теги.

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

Листинг 2

Заголовок первого уровня

Заголовок второго уровня

Заголовок третьего уровня

Заголовок четвертого уровня

Заголовок пятого уровня

Заголовок шестого уровня

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

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

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

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

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

Выравнивает текст по правому краю

Выравнивает текст по левому краю

Выравнивает текст по центру

Выравнивает текст по ширине

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

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

Заголовок выровнен вправо

Заголовок выровнен влево

Заголовок выровнен по центру

Заголовок с выравниванием «justify» равномерно заполняет строку. Заголовок с выравниванием «justify» равномерно заполняет строку. Заголовок с выравниванием «justify» равномерно заполняет строку. Заголовок с выравниванием «justify» равномерно заполняет строку. Заголовок с выравниванием «justify» равномерно заполняет строку.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Атрибут color=”ИМЯ” задает цвет текста.

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

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

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

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

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

А в этом случае текст будет написан жирным подчеркнутым курсивом .

Листинг 4

Добро пожаловать в мультимедийное обучение

А что такое мультимедиа?

Определений мультимедиа множество. Ричард Майер, профессор психологии Калифорнийского университета, Санта-Барбара, определяет мультимедиа, как представления контента с использованием как текста, так и графики. Определение, на мой взгляд, очень хорошо для начала, но не обеспечивает необходимой глубины для понимания того, что делает использование мультимедиа эффективным (или неэффективным) для обучения.

Мао Нео и Кен Т.К. Нео, с факультета мультимедиа Малазийского университета, расширили это определение. Они определяют мультимедиа как «соединение различных типов цифрового контента, таких как текст, изображения, звук и видео, в интегрированное мультисенсорное интерактивное приложение или представление для доставки сообщении или информации аудитории». Это определение мне очень нравится, поскольку включает в себя те ключевые моменты, которые определяют использование мультимедиа в обучении. При любой комбинации или наложении обычных медиаформатов, целое заключает в себе гораздо больше, чем простая сумма составляющих.

Упражнение 4

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

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

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

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

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

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

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

Добро пожаловать на самую лучшую в мире Web-страницу

Упражнение 5

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

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

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

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

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

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

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

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

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

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

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

Источник