HTML. Переход к новой строке. Вставка пробелов

Цель работы: изучение дескрипторов P, BR и приобретение умения форматирования документа WEB.

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

Переход к новой строке. Дескриптор < BR> (см. рис. 4-1) уведомляет Web-броузер о том, что следует прекратить размещение текста и других элементов страницы в пределах текущей строки и перейти к новой строке. Тэг < BR> полезен для разделения коротких фрагментов текста, таких как почтовые адреса или стихотворные строки. В отличие от многих других дескрипторов HTML, < BR> не имеет специального закрывающего дескриптора-двойника с символом косой черты (/), отменяющего операцию.

Многие Web-дизайнеры применяют дескриптор < BR> для принудительного размещения встроенных элементов (таких как графические изображения, положение которых не должно выбираться
броузером автоматически) в определенном месте
страницы.

Рис.4-1. Пример использования дескриптора < BR>.

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

Рис. 4-2. Вставка символов пробела.

Web-броузеры обычно игнорируют дополнительные символы, пробела, введенные в
текст страницы. Если необходимо явно задать добавочные символы пробела, следует использовать команду & nbsp; (см. рис 4-2).

Пробелы — удобное средство задания отступа для
первой строки абзаца. Их используют также для
выделения некоторых элементов Web-страницы,
таких как графические изображения. Например,
вставка символов пробела между двумя изображениями позволит избежать неожиданной ситуации, когда отдельные картинки могут быть восприняты броузером как одна большая.

Команда & nbsp; создает неделимое пустое пространство между элементами страницы. Ввод
& nbsp; вместо символа пробела между двумя сосед-
ними словами гарантирует, что оба слова не будут
разнесены по разным строкам в окне броузера —
программа обязательно расположит их рядом.

Дескриптор < PRE> предлагает иной способ вставки
пробелов в содержимое Web-страницы. Он предотвращает автоматическое удаление броузером лишних пробелов. Более подробные сведения об использовании дескриптора < PRE> вы найдете ниже, в
разделе " Предварительное форматирование тек-
ста".

Ход работы:

1. Ознакомитесь с данной инструкцией. Вызовите броузер WEB щелчком «мыши» по иконке.

2. В меню “файл→ открыть” откройте файл, созданный в лабораторной работе № 3.

3. Наберите ниже приведенный текст (в шаблоне, ранее созданном в лабораторной работе № 3 «Калоев HTML. Лаб.3») в графическом редакторе Блокнот.

4. Документ HTML, с примером форматирования абзаца, должен содержать описательный элемент < BR>.

5. В итоге, код документа HTML будет выглядеть следующим образом:

< html>

< TITLE> Моя первая проба сил в HTML< /TITLE> <! -- тег названия страницы -->

< head> ПРОБА - ШАБЛОН< /head> <! -- тег заголовков -->

< body>

< BR> Пожалуйста введите в приведенную форму Ваши пожелания

< p> & nbsp; < /p> <! -- Вставка пустой строки и пробела -->

< BR> Ваше мнение < INPUT TYPE=”text” NAME=”unit” SIZE=”50” MAXLENGTH=”45”>

< p> < a name=" ПАЛИТРА (ТАБЛИЦА) ЦВЕТОВ" > < /a> < /p>

< div align=" center" > < B> < font face=" Times New Roman, Times, serif" color=" #FF0000" > < B> ПАЛИТРА (ТАБЛИЦА) ЦВЕТОВ< /B> < /font> < /b>

< /div>

< div align=" center" >

< pre> > <! — авторское форматирование, хорошо, когда пишешь стихи -->

Ниже приведена таблица, содержащая предопределенные

наименования основных цветов (с переводом их на русский язык)

и соответствующие им шестнадцатеричные значения.

Наименование Код

aqua (голубой) #OOFFFF

black (черный) #000000

blue (синий) #OOOOFF

fuchsia (розовый) #FFOOFF

gray (темно-серый) #808080

green (темно-зеленый) #008000

lime (зеленый) #OOFFOO

maroon (малиновый) #800000

navy (темно-синий) #000080

olive (оливковый) #808000

purple (сиреневый) #800080

red (красный) #FFOOOO

silver (светло-серый) #СОСОСО

teal (бирюзовый) #008080

white (белый) #FFFFFF

yellow (желтый) #FFFFOO

c

6. Сохраните набранный текст под тем же расширением «.html» в отдельной папке в корневом каталоге или в папке «Мои документы» под названием включающей Вашу фамилию, например: Калоев HTML. Лаб. 4).

7. Запустите полученный файл в броузере Internet Explorer и в открывшемся окне Вы увидите набранный абзац «Проба сил в HTML ».

8. Проанализируйте набранный код фрагмента программы, поэкспериментируйте, изменяя написание приведенных дескрипторов (тэгов) в редакторе Блокнот (не забудьте сохранить изменения и обновить страницу).

9. Оформите лабораторную работу в письменном виде (преподавателю лабораторную работу следует сдавать и в письменном и в электронном виде).

Примечание: после каждого изменения в файле “Проба сил в HTML” необходимо сохранить сделанные изменения и затем обновить страницу.

Задачи для самостоятельного решения. Предлагается самостоятельно применить дескриптор < BR>, чтобы посмотреть, как изменяется расположение написания заголовка.

Контрольные вопросы:

1. Как написать закрывающий тэг < BR> в выше приведенном фрагменте?

2. Как в HTML 3.2 специально отформатировать местоположение элемента?

3. Почему в HTML применяются дескрипторы отдельного форматирования текста?

4. Можно ли разделительную линию < hr> сделать короче?

5. В каком порядке располагается дескриптор < BR> и, с какими атрибутами?