Практическая работа №9. Форматирование текста на Веб-странице.

Цель работы: Знакомство учащихся с приёмами форматирования веб-документа.

Теоретическая часть:

Для того, чтобы отформатировать текст, который будет располагаться на вашей веб-странице, необходимо воспользоваться следующими тегами:

Форматирование
Заголовки <H*></H*> * - от 1 до 6 Стандарт определяет 6 уровней заголовков
Конец строки <TR>  
Начало абзаца <P>  
Выравнивание <H* > </H*> *-ALIGN= LEFT|CENTER|RIGHT По левому краю, по правому, по центру
Цитата <BLOCKQUOTE> </BLOCKQUOTE> Обычно выделяется отступом
Шрифт
Жирный <B></B>  
Курсив <I></I>  
Размер шрифта <FONT SIZE=?></FONT> От 1 до 7
Цвет шрифта <FONT COLOR="#$$$$$$"> </FONT>  

Практическая часть

Форматирование текста.

На базе первой простейшей Веб-страницы создайте текстовый документ, имеющий следующее оформление:

Устройства компьютера(заголовок 1)

Внешние (заголовок 2)

Принтер, сканер, монитор, клавиатура. (размер -2, цвет синий, шрифт Arial)

Внутренние(заголовок 2)

Винчестер, материнская плата, видеокарта.

<body>

<h1> Устройство компьютера </h1>

<h2> Внешние </h2>

<P> <font size = -2 face=”arial” color=blue> Принтер, сканер, монитор, клавиатура </font>

<h2> Внутренние </h2>

<p> <b> винчестер </b> <i> материнская плата </i> <U> видеокарта </U>

</body>

Самостоятельно создайте Веб-страницу, на которой будет изображен текст в следующем виде:

Методика освоения новых программ

Знакомство с примерами, шаблонами и образцами документов.

Для того, чтобы оценить возможности новой программы, лучше всего воспользоваться уже имеющимися образцами документов, созданных с её помощью.

Эксперименты с пробными документами.

Цель эксперимента – проверка действия команд редактирования.

Практическая работа №10. Веб-страницы с гиперссылками и изображениями.

Цель работы: Знакомство учащихся с различными возможностями перехода на другие страницы и вставки графических изображений

Теоретическая часть:

Важнейшую роль в оформлении страницы играют иллюстрации.

Для размещения рисунков в документе служит одиночный тег <IMG>, который должен обязательно содержать атрибут SCR=, значение которого составляет адрес файла изображения.

Изображение переносится на страницу с сохранением размеров. Нужные размеры рисунка можно задать с помощью атрибутов WIDTH= (ширина) и HEIGHT= (высота).

Альтернативный текст – словесное описание изображения задаётся при помощи атрибута ALT=.

Для создания гиперссылки в документе используются теги <A> и </A>. Текст ссылки помещается между этими тегами. Для того, чтобы указать адрес, на который указывает ссылка, необходим атрибут HERF=. Некоторые гиперссылки могут указывать на определённое место внутри страницы (якоря). Для него является обязательным атрибут NAME=. Значением этого атрибута является имя якоря, которое может состоять только из латинских букв и цифр и не должно содержать пробелов.

В качестве гиперссылки можно использовать изображения. Для этого теги разметки изображения должны быть помещены между тегами гиперссылок.

Практическая часть

Создайте папку и переименуйте её своей фамилией.

В папке создайте 2 документа в программе Блокнот, на основе которого можно сделать Веб-страницу. (сделайте заголовок, тело).

В свою папку скопируйте две картинки (большую для фона и маленькую) и одну анимацию, переименуйте их соответственно paint1.gif, paint2.gif, anim.gif. (расширения должны быть соответствующими вашим изображениям).

На основе первого документа сделайте страницу, содержащую все скопированные вами изображения. Код для разметки Веб-страницы будет следующим:

<html>

<head>

<title> ИЗОБРАЖЕНИЕ1 </title>

</head >

<body background=paint1.jpg>

<img scr=paint2.gif>

<img scr=anim.gif>

</body>

</html>

Сохраните этот документ под именем document1.

Второй документ должен содержать ссылку на этот документ, при нажатии на которую появится список. Код тела этой веб-страницы должен иметь вид:

<body>

<A HREF=” document1.htm> </A>

</body>

Самостоятельно постройте две Веб-страницы. Первая должна содержать 5-6 предложений, касающихся темы изображений, 3 картинки, 2 анимации и небольшой пояснительный текст. Вторая – гиперссылку на первый документ.

Наши рекомендации