Студопедия

Главная страница Случайная страница

Разделы сайта

АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторикаСоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника






  • 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> и, с какими атрибутами?






    © 2023 :: MyLektsii.ru :: Мои Лекции
    Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав.
    Копирование текстов разрешено только с указанием индексируемой ссылки на источник.