'

Форматирование текста на Web-странице

Понравилась презентация – покажи это...





Слайд 0

Форматирование текста на Web-странице Пока наша страница выглядит не слишком привлекательно: мелкий шрифт чёрного цвета на белом фоне. С помощью тэгов можно задать различные параметры форматирования текста. Размер заголовков. Размеры заголовков задаются парами тэгов от <H1>…</H1> (самый крупный) <H6>…</H6> (самый мелкий) Шрифт. Некоторые тэги имеют атрибуты, которые являются именами свойств и могут принимать определённые значения. С помощью тэга FONT и его атрибутов можно задать параметры форматирования шрифта. 1) Атрибут FACE позволяет задать гарнитуру шрифта (например, FACE="Arial")


Слайд 1

2) Атрибут SIZE позволяет менять размер шрифта. Значения его можно задавать от 1 до 7. Например, SIZE=5 2) Атрибут COLOR позволяет задавать цвет шрифта. Задать этот атрибут можно либо названием цвета (например, COLOR="blue"), либо его шестнадцатеричным значением. Шестнадцатеричное значение использует RGB-формат "#RRGGBB", где по две цифры задаётся интенсивность соответственно красного, зелёного и синего цветов. Минимальная интенсивность = 00, а максимальнаxя = FF. Например, <FONT FACE="Arial" SIZE=6 COLOR="#6699CC"> Компьютер и ПО </FONT> С помощью тэга <B>…</B> начертание шрифта устанавливают на «полужирный», тэгом <I>… </I> делают наклонным, тэгом <U>…</U> – подчёркнутым, а тэгом <TT>…</TT> – моноширинным.


Слайд 2

Выравнивание текста. Задать способ выравнивания текста позволяет атрибут ALIGN. Выравнивание по левой границе задаётся так: ALIGN="left", по правой - ALIGN="left", по центру - ALIGN="center" и по ширине - ALIGN=" justify" Таким образом, например, синий цвет заголовка, выровненного по центру, можно задать следующим образом: <FONT COLOR="blue"> <H1 ALIGN="center">Компьютер и ПО</H1> </FONT> ? Перевод строки Для перевода строки используется тэг <BR> Абзацы. Разделение текста на абзацы производится с помощью контейнера <P>…</P>


Слайд 3

При просмотре в браузере абзацы отделяются друг от друга интервалами. Для каждого абзаца можно задать определённый тип выравнивания и параметры форматирования шрифта. Специальные символы. Существуют таблицы кодов для написания специальных символов на Web-страницах. К ним относится пробел.Он устанавливается специальным кодом - &nbsp; Множественные пустые строки - &nbsp;<BR> Т.к. все заключенное между “<” и “>” броузер воспринимает как тэг, то , чтобы ввести символы скобки в текст для него придумали спецсимволы: &lt; - < &gt; - > Ещё часто встречающиеся: &quot; - " &amp; - & `


Слайд 4

Цвет фона. Цвет фона задаётся так же, как и цвет шрифта - либо названием цвета, либо его шестнадцатеричным значением. Записывается в контейнер BODY атрибутом BGCOLOR. Например, <BODY BGCOLOR="#66FF99"> ? Фоновое изображение. Фоном так же может быть изображение в формате JPEG, GIF или PNG. Изображения располагаются в отдельных файлах и подключаются к HTML-документу браузером. Записывается фон в виде изображения в контейнер BODY атрибутом BACKGROUND. В кавычках записывается путь к файлу. Если изображение находится в другой папке (или даже на другом диске) указывается полный путь к файлу, если же изображение находится в той же папке, что и файл с HTML-текстом, или подпапке, то указывается его относительный путь.


Слайд 5

Например, <BODY BACKGROUND="fon1.gif"> <BODY BACKGROUND="images/fon2.gif"> <BODY BACKGROUND="file://z:/html%20project/images/fon3.gif"> Вставка изображений Рисунки на Web-страницу размещают тэгом IMG. К этому тэгу всегда добавляется атрибут SRC, сообщающий браузеру имя графического файла. Например, <IMG src="image_name.jpg"> Для того, чтобы сразу на страничке картинка отображалась правильного размера, в тэге IMG указывают в пикселах размер выводимого изображения: Width Ширина объекта Height Высота объекта Например, <IMG src="image_name.gif" width="30" height="75">


Слайд 6

Необязательный атрибут ALIGN выравнивает текст относительно рисунка. Его возможные значения: top одна строка текста справа на уровне верхнего края рисунка bottom одна строка текста справа на уровне нижнего края рисунка middle одна строка текста справа на уровне середины рисунка left рисунок слева от текстового массива right рисунок справа от текстового массива Например, <IMG src="image_name.jpg" width="30" height="75" align="left"> Если рядом с картинкой не должно быть текста, ее размещают внутри отдельного абзаца. Выравнивание рисунка по горизонтали в этом случае задают в тэге P. К изображению атрибутом ALT (альтернатива) можно добавить название. Оно появляется на экран или вместо иллюстрации (если по какой - либо причине графика не выводится в окне браузера), или в качестве всплывающий строки, при указании на рисунок мышью. <P align="center"> <IMG src="kreml.gif" width="515" height="240" alt="М.Н.Воробьев. Вид Московского Кремля. 1818"> </P>


Слайд 7

Изображение можно поместить в рамку, для этого используется атрибут BORDER, который задаёт ширину рамки в пикселях. Например, <IMG src="image_name.jpg" BORDER=3>


×

HTML:





Ссылка: