Лабораторная работа № 10
Тема: «HTML. Работа с текстом»
-
Создать на диске «С:» в папке «Мои документы» свою рабочую папку с номером Вашей группы, например: «kom-410» (Если такая папка уже существует, перейти к пункту 2). Все практические занятия по данной дисциплине будут проводиться именно с ЭТОЙ папкой! Обращайте внимание на выбранный каталог при сохранении файлов.
-
Скопировать (именно скопировать, а не перенести!) в эту папку текстовый файл «blank.txt» с сетевого диска «Z:».
-
Запустить текстовый редактор БЛОКНОТ через кнопку Пуск / Программы / Стандартные / Блокнот или через «Мой компьютер» файл «C:\Windows\Notepad.exe».
-
Открыть в нем текстовый файл «blank.txt» из своей рабочей папки (см. п. 1).
-
В данном файле находится минимальная конфигурация HTML-документа. Выполните действие «Сохранить как», указав имя файла «lesson01.html» (обратите внимание на расширение файла!), тип файла «Текстовые документы». После выполнения операции сохранения Вы получили свой первый HTML-документ. Теперь можете просмотреть его броузером: запустите Netscape Communicator (Navigator) или Internet Explorer, и откройте в нем этот файл (lesson01.html), указав к нему путь до своей рабочей папки. Убедитесь, что при просмотре в броузере этого файла нет ни заголовка окна, ни содержимого документа, т.к. этот файл еще «пустой».
-
Далее работа будет происходить по следующей схеме:
-
все изменения HTML-документа нужно производить в тектовом редакторе;
-
сохранить изменения;
-
просмотреть измененый документ в броузере, используя кнопку «Обновить».
-
Придумайте название этого документа, которое будет отображено в шапке окна броузера, например: «Мой первый HTML-документ». Напишите его в элементе TITLE (если не понятно где это писать, см. п. 6). Должно получиться примерно так:
<TITLE>Мой первый HTML-документ</TITLE>
-
Теперь сохранитесь и посмотрите, что изменилось в броузере. Выглядеть это должно примерно так:
Таким образом задают заголовок HTML-документа.
-
HTML-документ содержит как текстовую, так и графическую информацию, иногда вставляют аудио- и видеофайлы. Попробуем разместить в документе некоторый текст. Для этого воспользуемся элементом P (от слова Paragraph – Параграф (англ.)). Пример:
<P>Первый параграф.
<P>Второй параграф.
Результат просмотрите в броузере.
-
По умолчанию, текст выравнивается по левому краю, но можно задать принудительно. Для этого нужно использовать аргумент ALIGN (аргументы ВСЕДА пишутся в тэгах!) со следующими значениями:
-
align=left - для выравнивания по левому краю;
-
align=center - для выравнивания по центру;
-
align=right - для выравнивания по правому краю.
-
align=justify - для выравнивания по обеим краям. Например:
<P align=center>Текст по центру,
который будет написан в одну строку.
Обратите внимание, что при использовании элемента «параграф» несколько пробелов подряд при отображении в броузере заменяются на один, слова переносятся на следующую строку, если не помещаются на одной или на предыдущую, если она еще не заполнилась, а символы имеют различную ширину.
-
Для принудительного перевода строки используют тэг <BR>. Пример:
<P align=left>Первая строка,<BR>
Вторая строка,<BR>
Третья строка.
-
Добавьте после «Параграфа» преформатированный текст используя элемент PRE. Данный элемент должен ВСЕГДА иметь закрывающий тэг! Напишите следующее:
<PRE>Фиксированний текст,
который будет отображаться так,
как написан.</PRE>
Сравните в броузере отображение «Параграфа» и «Преформатированного текста».
-
Рассмотрим несколько атрибутов для тэга <BODY>:
-
bgcolor – задает цвет фона документа;
-
text – задает цвет текста документа;
-
background – указывает на файл изображения, которым будет заполнен фон документа.
Т.к. это аргументы, то и указывать их необходимо в самом тэге, например:
<body bgcolor=gray text=blue>
Попробуйте задавать цвет как с помощью стандартных названий, так и с помощью кода RGB.
Например:
<body bgcolor=gray text=”#CD00FF”>
Укажите самостоятельно цвет текста – оранжевый, а фона – бледно фиолетовый.
-
Скопируйте с сетевого диска в рабочую папку каталог «Fon». Попробуйте с помощью атрибута background заполнить фон документа любым скопированным изображением, указав к этому файлу путь. Например:
<body bgcolor=gray text=blue background=”fon/gauze.jpg”>
-
Рассмотрите возможность отображения заголовков в тексте. Для этого используют элементы H1, H2, H3, H4, H5 и H6. Они ОБЯЗАТЕЛЬНО должны иметь закрывающий тэг! Элемент H1 является старшим и определяет заголовок первого уровня (самый крупный шрифт), а H6 – младший и определяет заголовок низшего уровня (самый мелкий шрифт). Пример:
<H2>Руководство пользователя</H2>
Выравнивание заголовка производиться также с помощью аргумента align со значениями left, center и right (см. п. 10).
-
Для указания почтового адреса, авторских прав и информации для контактов используют элемент ADDRESS. Пример:
<ADDRESS>
Newsletter editor<BR>
J.R. Brown<BR>
8723 Buena Vista, Smallville, CT 01234<BR>
Tel: +1 (123) 456 7890
</ADDRESS>
Напишите с помощью данного элемента адрес нашего университета.