Главная | Обратная связь | Поможем написать вашу работу!
МегаЛекции

Программирование вывода текста




Открывающие теги могут содержать атрибуты, т.е. дополнительную информацию о свойотображаемого на экране элемента. Атрибуты записываются через пробел от его имени в виде отдельного ключевого слова, знака «=» и параметра (значения атрибута). Порядок следования не важен. Действует внутри тега.

Атрибут size определяет толщину линии

< hr size=1>

 

Пример 2. doc2.htm  
<HTML> <HEAD> < meta http-equiv = “Content-Type” content =”text/html; charset = windows-1251 “> <TITLE> Вид 2 </TITLE> </HEAD> <BODY bgcolor = white text = black > <h1> Сборник газетных вырезок </h1> <hr> <p> Заметка из газеты <cite> «Станок» </cite>   <p> Действительно, в отделе <cite>”Что случилось за день”</cite> нонпарелью было напечатано: <font color =red> <h3 align = center> Попал под лошадь </h3>   <small> <p> Вчера на плошади попал под лошадь извозчика </small> </font> <p> Это извозчик отделался легким испугом <p align=right> <cite>”Двенадцать стульев “</cite><br> Илья Ильф, Евгений Петров </BODY> </HTML>   Начало HTML - документа Начало головной части Информация о документе     Название документа Конец головной части Начало тела документа Заголовок Горизонтальная линия Начало абзаца Выделено название газкты   ачало подцитаты Задан красный цвет Заголовок выровнен по центру пдцитаты Уменьшен размер шрифта     Размер восстановлен Восстановлен черный цвет     Конец тела документа Конец HTML - документаа Абзац выровнен справа     Конец тела программы Конец программы

Форматирование шрифта

<font size=3> <font>

Форматирование абзаца

<P> </P> - выравнивает абзац по левому краю

<P align=left > </P> - выравнивает абзац по левому краю

<P align=right > </P> - выравнивает абзац по левому краю

<P align=center > </P> - выравнивает абзац по левому краю

Вид тэга Описания и атрибуты
<BIG> Укрупнение шрифта
<BLOCKQUOTE> Большая цитата
<CENTER> Выравнивание блока по центру
<CITE> Цитата
<DIV> Блок (контейнер)
<EM> Выделение
<FONT> Мзменеиие шрифта
<Hn> Заголовок
<HR> Горизонтальная линия
<PRE> Авторскте фориатирование
<P> Абзац
<SMALL> Уменьшение шрифта
<STRONG> Устленное выделение
<SUB> Нижний индекс
<SUP> Верхний индекс
<TT>  

 

Цвет фона и цвет шрифта

Цвет для фона и шрифта можно задать с помощью при помощи атрибутов bgcolor и text в теге в теге <body>.

<BODY bgcolor = white text = black >

Цвет шрифта можно менять внутри документа многократно при помощи команды <font>. Установка цвета в этой команде выполняется при помощи атрибута color.

<font color="red"> </font>.

Cамое лучшее - не задавать шрифт вовсе. Браузер будет показывать документ шрифтом „по умолчанию”.Для изменения размеров шрифта есть специальные команды: <big> </big> ’,

<small> </small>. Команда <big> увеличивает размер шрифта, а команда <small> уменьшает.

Название можно выделить при помощи команды <cite> </cite>. Большие цитаты лучше выделять из основного текста при помощи команды <blockquote> </blockquote>

Выделение

Усиленное выделение

Имя Код Описания
black #000000 черный
silver #C0C0C0 серебряный
Gray #808080 серый
white #FFFFFF белый
maroon #800000 кричневый
red #FF0000 красный
purple #800080 темно-сиреневый
fuchsia #FF00FF сиреневый
green #008000 зеленый
lime #00FF00 светло-зеленый
olive #808000 оливковый
yellow #FFFF00 желтый
navy #000080 темно - синий
blue #0000FF синий
teal #008080 петроль
aqua #00FFFF голубой

 

 

Специальные символы

Название Символ Мнемоническое имя Числовой код
Меньше < &lt &#060
Больше > &gt &#062
Амперсант & &amp &#038
Неразрывный пробел   &nbsp &#160
Копирайт C &copy &#169
Тире --   &#151
Левая „Елочка” « &laquo &#171
Превая „елочка” » &raquo &#187
Левая „лапка”   &#147
Превая „лапка”   &#148
Номер   &#8470

Программирование списков

Допускается задание в документах списков двух типов.

  • Ненумерованный (маркированный)

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

Вид метки, которую браузер помещает перед каждым элементом списка, настраивается при помощи атрибута type – окружность, диск, квадрат.

<ul type=circle |disc | square >

<li> первый элемент </li>

<li> второй элемент </li>

…….

<li> последний элемент </li>

<ul>

Пример.

<ul type=disc >

<li> урган </li>

<li> дорога из желтого кирпича </li>

<li> великий и ужасный </li>

<li> исполнение желаний </li>

<ul>

  • Нумерованный
  • вложенные списки

 

Вопросы и упражнения.

Рисунки на Web - странице.

В Интернете наиболее популярны два графических формата.JPG, GIF

Картинка в тексте

Для вставки картинки нужно воспользоваться командой <img>

Атрибут src = имя файла

При помощи главного атрибута src можно задать имя файла с картинкой

<img src =./pic/img.gif>

Атрибут alt = “ текст надписи “

Если браузер не находит картинки в указанном месте на диске, он вместо нее рисует на экране маленький прямоугольник и вписывает в него надпись, которая задана атрибутом alt.

<img src =monstr.jpg alt =” Страшный зверь“>

Атрибуты width=n и height =m

Эти атрибуты задают ширину и высоту (в пикселах) прямоугольника, в который входит выводится картинка. Рекомендуется всегда записывать эти атрибуты и указывать в них естественные размеры картинки, чтобы картинка выводилась без искажения.

Атрибут border =n

Позволяет задать рамку вокруг иллюстации толщиной в n пикселов. При n =0 или отсутствии рамка не рисуется.

Атрибут align

Позволяет задавать положение иллюстрации по отношению к соседним элементам документа. Можно использовать следующие значения атрибута:

Align =top вертикальное выравнивание по верхнему краю

Align =middle вертикальное выравнивание по центру

Align =bottom вертикальное выравнивание по нижнему краю

Align =left вертикальное выравнивание по левому краю

Align =right вертикальное выравнивание по правому краю

 

Атрибут hspace=n и vspace=n

Определяют свободное пространство слева и справа (hspace), над и под (vspace) картинкой.

Примеры.

<img scr=./pic/07.gif width=200 height=200 border=1

align=top hspace=15 vspace=0 alt=”Петька прагает вниз “>

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

  • Заменить на align= middle
  • Заменить на align= bottom
  • Заменить на align= left
  • Заменить на align= right

 

Картинка как ссылка

Для того. чтобы заставить работать картинку как гиперссылку, достаточно вложить команду <img> внутрь команды <a>. Картинка- ссылка обрамляется в рамочку. Курсор при попадании на картинку - ссылку менует свою форму.

<a href="адрес ссылки "> <img src="ссылка на рисунок "></a>

 

<a href=dog.html> <img src=dog.gif border=0 width=200 height=200 alt=”Собака “></a>

 

Вопросы и упражнения

  1. Запишите HTML – коды для вывода на экран таких страниц

Бабочка крапивница зимовала

в стогу. Солнцк нагрело стог,

  Крапивница отогрелась и затрепетала от нетерпенья

Качнулся ветерок, она

вспорхнула и понеслась

 

 

Гиперссылки

Гипертексты и броузеры

HTML – документ - это гипертекст. Текст проектируется в расчете на возможность чтения не по порядку, а по контексту.

  • Гипертекстовые ссылки среди других элементов выделяются цветом и подчеркиванием
  • Курсор мыши на ссылке меняет свою форму и превращается в указующий перст
  • Для перехода по ссылке необходимо выполнить на ней клик мышью
  • Для возврата необходимо использовать навигационную кнопку браузера Назад

Можно выделить несколько видов гиперссылок

· Внутренние связывают документы внутри одного узла

Используется относительный путь от данной страниці или от корневой папки.

Для задания гипертекстового перехода внутри документа используют две команды <a>.

Первая команда с атрибутом href является источником перехода, вторая с атрибутом name - приемником.

указывает на метки    
< a href = #метка > текст </a> …… <a name =метка > </a> <p> В лесу родилась елочка   Задание перехода по метке На экран выводится ссылка: текст Метка. Сюда браузер приходит по ссылке   На экране отображается фраза.  

 

Указывает на документ

Для того, чтобы браузер загрузил в свое окно новый HTML - документ, нужно записать в программе ссылку при помощи команды <a> с атрибутом href = имя_фала.

   
…… < a href = имя_файла> текст </a> ……     Выполнить файл имя_файла. На экран выводится ссылка: текст При щелчке мыши на ссылке браузер строит на экране документ по программе, заданной в файле имя_файла.  
Поделиться:





Воспользуйтесь поиском по сайту:



©2015 - 2024 megalektsii.ru Все авторские права принадлежат авторам лекционных материалов. Обратная связь с нами...