Улучшеная страничка
<p>Корова похожа на лошадь.
<p>А лошадь не похожа на корову.
<p>Имеено это сходство
<p> мы берем за основу
Принудительный разрыв строки
Команда <br> заставляет браузер продолжать вывод абзаца с новой строки. Не имеет парного.
<p>
Корова похожа на лошадь. <br>
А лошадь не похожа на корову. <br>
Имеено это сходство <br>
Мы берем за основу .
Вопросы и упражнения.
Что такое HTML- программа
Кто выполняет программу
При записи абзаца поставили между соседними словами поставили 5 пробелов.Сколько прбелов увидит он в броузере ? ( пять, один, ни одного, два )
<P>
Иванов
Иван
</P>
Как покажет текст браузер?
в две строчки
в одну строчку с двумя прбелами
в одну строчку с одним прбелом
не покажет вовсе
Какая из трех программ задает вывод текста в две строки:
Программа 1 |
Программа 2 |
Программа 3 |
<P> Іванов <br> Иван<br> </P>
|
<P> Іванов<br> Иван </P>
|
<P> Іванов <br> Иван </P>
|
Форматирование текста
Структура, стиль и внешний вид текстового документа
Можно рекомендовать следующий способ оформления:
Программирование вывода текста
Открывающие теги могут содержать атрибуты, т.е. дополнительную информацию о свойотображаемого на экране элемента. Атрибуты записываются через пробел от его имени в виде отдельного ключевого слова, знака «=» и параметра ( значения атрибута ). Порядок следования не важен. Действует внутри тега.
Атрибут 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 |
голубой |
Специальные символы
Название |
Символ |
Мнемоническое имя |
Числовой код |
Меньше |
< |
< |
< |
Больше |
> |
> |
> |
Амперсант |
& |
& |
& |
Неразрывный пробел |
|
  |
  |
Копирайт |
C |
© |
© |
Тире |
-- |
|
— |
Левая „Елочка” |
« |
« |
« |
Превая „елочка” |
» |
» |
» |
Левая „лапка” |
“ |
|
“ |
Превая „лапка” |
” |
|
” |
Номер |
№ |
|
№ |
Программирование списков
Допускается задание в документах списков двух типов.
Ненумерованный ( маркированный )
Каждый элемент этого списка браузер предворяет меткой в начале строки, а сами строки смещают вправо.
Вид метки, которую браузер помещает перед каждым элементом списка, настраивается при помощи атрибута 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>
Нумерованный
вложенные списки
Вопросы и упражнения.