3. Контрольные задания.

1. Вставьте в WEB-страницу Ваша_Фамилия.HTML(место произвольно) рисунок из файла Природа.jpg.( Использовать все атрибуты).

4.2. Вставьте в WEB-страницу Ваша_Фамилия.HTML (место произвольно)

рисунок (Произвольного вида) созданный в программе Paint и сохранённый в файле 33.jpg

4.3. Сделайте рисунок Природа.jpg фоном документа.

4.4. Сделайте рисунок 33.jpg ссылкой на файл Ваше_Имя.HTML.

4.5. Закройте программы Блокнот и Internet_Explorer.

5. Рекомендуемая литература

1. Браун, Марк, Р., Хоникатт, Джерри, и др. Использование HTML 4, 4-е издание. Специальное издание.: Пер. с англ. – М.; СПб.; К.: Издательский дом «Вильямс», 2000.-784 с.: ил.(стр. 80-96).

2. Ю. П. Тютюнов, М. П. Кашук. «Основы разработки Web-страниц» (Методические указания и задания) – ОГТЖТ, 2006.

3. Под редакцией Ю.М. Алексеева. Быстро и легко создаем, программируем, шлифуем и раскручиваем web-сайт. «Лучшие книги» Москва. 2004.-432 с.: ил.

Лабораторная работа № 4 Тема: Форматирование текста в html документах.

Цель: Получение практических навыков форматирования текста в HTML документах.

Техническое обеспечение: PENTIUM

Программное обеспечение: WINDOWS, Microsoft Word, Microsoft Internet Explorer.

Место проведения: Лаборатория ПЭВМ.

Продолжительность занятия: 2 часа.

1. Краткая справка

В НTML 6 уровней заголовков разделов страницы, имеющих номера от 1до 6. Заголовок высшего уровня имеет номер 1. Отличаются заголовки от текста и между собой толщиной и высотой букв, в заголовке <H1> самые крупные символы.

Тэги <H1>..</H1>,<H2>..</H2>, … <H6>..</H6>.

Абзацы в тексте выделяются тэгами <P>..</P>. При просмотре браузером абзацы отделяются друг от друга пустой строкой.

И заголовки, и абзацы по умолчанию прижаты к левому краю окна.

Атрибут ALIGN позволяет выровнять текст по центру или вправо.

Синтаксис: <P ALIGN=RIGHT> ……</P>. , может принимать значения LEFT(влево),

CENTER ( по центру), RIGHT (вправо).

Пример:

<P ALIGN=LEFT> Этот абзац расположен слева </p>

<P ALIGN=CENTER> Этот абзац по центру </P>.

<P ALIGN=RIGHT> Этот абзац справа </P>.

<P ALIGN=JUSTIFY> Этот абзац по ширине страницы</p>

Что дает при просмотре: Этот абзац расположен слева. Этот абзац по центру. А вот этот абзац справа.

Аналогично формируются и заголовки: <H1 ALIGN=RIGHT>..<H1> и т.д.

Для выравнивания по центру, можно использовать тэги <CENTER> .. </CENTER>. Они позволяют отформатировать сразу несколько заголовков и абзацев.

Например:

<CENTER>

<H1> Заголовок страницы </H1>

<H2> Подзаголовок </H2>

<P> Абзац 1. </P>

<P> Абзац 2. </P>

</CENTER>

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

Тэг <HR> описывает горизонтальную линию. Может включать атрибуты:

• SIZE – толщина линии в пикселях;

• WIDTH – длина линии в пикселях или процентах, от ширины экрана;

• ALIGN – выравнивание линии, может принимать значения LEFT, CENTER, RIGHT;

• COLOR – цвет линии;

• NOSHADE – линия рисуется без тени.

Тэги <BLOCKQUOTE></BLOCKQUOTE> добавляют к выделенному ими тексту со всех четырех сторон поля (сверху и снизу)- по пустой строке, слева и справа – шириной в 5 знаков).

Еще один способ форматирования текста – использование Тэга <PRE>..</PRE> (preformatted text – предварительно форматированный текст). Обычно браузеры игнорируют множественные пробелы и символы конца строки. Тег <PRE> позволяет выводить текст в окне браузера точно в том виде, как он есть в исходном HTML – документе.

<pre> текст (куча пробелов) текст </pre>

Текст между <pre> и </pre> тоже фиксированный, но тут есть одна большая особенность, он не только фиксированный, но еще и выводится с точностью до пробела так, как вы его набили в блокноте.Шрифт с символами одинаковой ширины называется фиксированным. А тэг для него следующий: <tt> fixed - фиксированный шрифт </tt>

В HTML существует два подхода к шрифтовому выделению текста – физический и логический стили.

Физические стили.

Под физическими стилями подразумевают прямое указание браузеру на модификацию текущего шрифта. Т.е. между тэгами <B> и </B> будет жирный шрифт, а между <I> и </I>- курсив (наклонный).

<B> Полужирный текст </B

<I> Наклонный текст (курсив)

<TT> шрифт фиксированный ширины (как на пишущей машинке) </TT>

<U> Подчеркнутый текст </U>

<STRIKE> перечеркнутый шрифт </STRIKE>

<S> тоже перечеркнутый шрифт </S>

<BIG> шрифт большего размера </BIG>

<SMALL> шрифт меньшего размера. </SMALL>

Логические стили.

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

<DFN> - служит для описания определений (это определение);

<EM> - служит для выделения текста (это выделенное слово);

<CITE> - служит для выделения цитат (это цитата);

<CODE> - служит для выделения программных кодов, текстов программ и т.п. Обычно выделяется шрифтом фиксированной ширины (это текст программы);

<KBD> – используется для ввода с клавиатуры пользователя (Введите password);

<SAMP> - используется для вывода машинных сообщений ( Segmentation fauit: core dumped);

<STRONG> - служит для особого выделения текста, обычно выделяется жирным текстом (это очень важный текст);

<VAR> - используется для символьных переменных (это переменная);

<ABBR> - используется для аббревиатур (СНГ, КПСС, WWW);

<ACRONYM> - используется для сокращений (стр. англ.).

Элементы <ABBR> и <ACRONYM> могут содержать аттрибут <TITLE>, описывающий расшифровку аббревиатуры или сокращения:

<ABBR TITLE = Worid wide Web> WWW</ABBR>. Элементы ABBR и ACORONYM используется для голосовых браузеров (для слепых например), в остальных браузерах сокращения каким-либо шрифтом не выделяются.

Тэг <font></font> - многофункционален. Им может задаваться не только цвет текста в конкретной части документа, но и размер шрифта, и вид шрифта (Arial)

Атрибут тэга <font> face <font face="ARIAL"> текст (шрифт Arial)</font>

С помощью атрибута face в нашем примере задан шрифт Arial. Таким образом вы можете задать и какой-нибудь экзотический шрифт для своей страницы, но это немного рискованно, т.к. у вашего посетителя может не оказаться такого шрифта, поэтому все же лучше задавайте стандартные (Arial (без надсечек), Times Roman (пропорциональный), Courier (равноширинный) и другие).

Задание размера шрифта:

<font size="+4"> текст </font> <font size="+3"> текст </font> <font size="+2"> текст </font> <font size="+1"> текст </font> <font size="+0"> текст </font> <font size="-1"> текст </font> <font size="-2"> текст </font>

Задание цвета в документе

Цвет в документе можно задать и в открывающем теге <body>: <body text="#336699"> Это значит, что весь текст страницы будет синим.

Цвет фона устанавливается в тэге <body>: <body bgcolor="#000000">

Мы одновременно можем прописать в теге <body> и цвет текста в документе, и цвет фона. <body text="#336699 bgcolor="#000000">

Тэг <font></font> - может задавать цвет текста в конкретной части документа.

Пример: Слова Добро Пожаловать в красный. <font color="#CC0000">Добро пожаловать! :)</font> где СС0000 значение цвета.

Примечание: Коды цветов, букв, символов смотри в специальных файлах расположенных по адресу C:\Work\Курс\Группа\WEB.