Практическая работа №2 по теме: «Форматирование текста Web-страницы»
Цель: научить форматировать текст Web-страницы; развитие познавательного интереса; воспитание аккуратности, бережного отношения к технике.
Форматирование шрифта
Назначение |
Формат |
Значение аргументов (вместо звездочки *) |
|
Жирный |
<B> текст </B> |
|
|
Подчеркнутый |
<u> текст </u> |
|
|
Курсив |
<I> текст </I> |
|
|
Верхний индекс |
<SUB> текст </SUB> |
|
|
Нижний индекс |
<SUP> текст </SUP> |
|
|
Размер шрифта(от 0 до 7) |
<FONT SIZE=*> текст </FONT> |
0, 1, 2 , 3, 4, 5 ,6 ,7 |
|
Цвет шрифта(задается названием цвета или его кодом ) |
<FONT COLOR=”*”> текст </FONT> |
См. ниже значения |
|
Гарнитура шрифта (задается название шрифта) |
<FONT FACE=”*”> текст </FONT> |
Arial, Arial Black, Comic Sans MS, Monotype Corsiva, Courier New, Times New Roman и др. |
|
Название |
Код |
Имя |
Название |
Код |
Имя |
|
черный |
#000000 |
black |
серебряный |
#C0C0C0 |
silver |
|
темно-бордовый |
#800000 |
maroon |
красный |
#FF0000 |
red |
|
зеленый |
#008000 |
green |
известь |
#00FF00 |
lime |
|
оливковый |
#808000 |
olive |
желтый |
#FFFF00 |
yellow |
|
темно-синий |
#000080 |
navy |
голубой |
#0000FF |
blue |
|
фиолетовый |
#800080 |
purple |
фуксия |
#FF00FF |
fuchsia |
|
чирок |
#008080 |
teal |
аква |
#00FFFF |
aqva |
|
серый |
#808080 |
gray |
белый |
#FFFFFF |
white |
Бегущая строка
<MARQUEE> текст </MARQUEE> — направление движения – справа-налево
Scroll – стандартное движение от правого края к левому – бесконечный цикл. Число циклов можно ограничить:
<MARQUEE LOOP=n BENAVITION=scroll>текст</MARQUEE>
slide – надпись один раз пробегает от правого края к левому и там остаётся.
alternate – движение от правого края страницы к левому и обратно, бесконечный цикл.
Определение ширины участка, занимаемого бегущей строкой:
<MARQUEE WIDTH=n>текст</MARQUEE> , где n – ширина той части страницы, на которой расположена бегущая строка.
Задание 1. Оформление шрифта HTML-документа.
- Откройте созданный вами файл Пример.html и преобразуйте его следующим образом:
<html> <title> первые стихи </title>
<body text="#0000ff">
<p align=center>
<font face="Arial Black"> <font color="#ff0000"> <big>
Привет! Это моя первая страничка! </big> </font>
<font color ="#ffff00">
<h1 align=left>Меня зовут </h1>
<h2 align=center>Я учусь в группе </h2>
<h3 align=right>Это моя любимая песенка</h3> </font>
<p align=left> <font face="Comic Sans MS">
В лесу родилась <i>елочка. </i><br>
В лесу она росла.</font><br>
<font face="Courier New">
Зимой и летом стройная, <br>
<font color ="green"> Зеленая</font> была.<br> </font>
<b> Метель </b> ей пела песенку:<br>
<font face="Monotype Corsiva"> «Спи, елочка, бай-бай»</font> <br>
<b> <i>Мороз </b> </i>снежком укутывал:<br>
<font face="Monotype Corsiva">
«Смотри, не замерзай!»</font>
</body>
</html>
- Сохраните изменения, НЕ ЗАКРЫВАЯ Блокнот просмотрите с помощью браузера Internet Explorer (чтобы увидеть изменения нажмите кнопку
Обновить). - Подчеркните фразу «Зимой и летом стройная»
- Выделите все «елочки» полужирным курсивом.
- Измените, размер шрифта на 5 единиц для фразы «Смотри, не замерзай!»
- Cделайте бегущей строкой фразу «Привет! Это моя первая страничка!»
- Сохраните изменения и просмотрите их с помощью браузера Internet Explorer .
- Для третьего заголовка внесите следующие изменения:
<h3 align=right>
<P>
<MARQUEE scrollDelay=28 behavior=alternate bgColor="gold" height=66>
<font color ="#ff0000"> Это моя любимая песенка <font>
</MARQUEE></P></B></FONT><I><FONT face=Arial size=4>
</h3> </font>
- Сохраните изменения и просмотрите их с помощью браузера Internet Explorer .
Цвет фона и текста
Назначение |
Формат |
Значение аргументов (вместо звездочки *) |
|
Цвет фона (задается названием цвета или его кодом ) |
<BODY BGCOLOR=” *”> |
См. цвет шрифта |
|
Цвет текста (задается названием цвета или его кодом ) |
<BODY TEXT=”*”> |
|
|
Фоновое изображение |
<BODY BACKGROUND=”*”> |
Вместо * прописывается название файла в формате bmp Например: <BODY BACKGROUND=”цветы.bmp”> |
Вставка изображений
Назначение |
Формат |
Значение аргументов (вместо звездочки *) |
|
Вставка изображений |
<IMG SRC=”*”> |
Вместо * прописывается название файла в формате bmp, jpg |
|
Выравнивание текста около изображения |
<IMG SRC=”*” ALIGN=” top”> <IMG SRC=”*” ALIGN=” bottom”> <IMG SRC=”*” ALIGN=” middle”> <IMG SRC=”*” ALIGN=” left”> <IMG SRC=”*” ALIGN=” right ”> |
|
|
Изображение как ссылка |
<A HREF=адрес> <IMG SRC=”*”> </A> |
В качестве адреса может быть: адрес документа, адрес сайта, e-mail. |
Задание 2. Оформление фона HTML-документа, вставка картинки.
- Откройте созданный вами файл Пример.html.
- Сделайте цвет фона голубой.
- После фразы «В лесу родилась» вставьте изображение елочки (елка.bmp)
- Сохраните изменения и просмотрите их с помощью браузера Internet Explorer .
- Попробуйте все способы выравнивания текста около изображения, не меняя место вставки картинки. Запишите в тетрадь назначение всех аргументов выравнивания текста около изображения.
- Вставьте в качестве фона файл шары.jpg
- Сохраните изменения и просмотрите их с помощью браузера Internet Explorer .
Подведение итогов
- Сделайте в тетради конспект теоретического материала.
- Ответьте на следующие вопросы:
1.Какие существуют параметры форматирования шрифта в документе?
2.Какие существуют способы выравнивания текста около изображения?
3.Можно ли в качестве фона для Web-страницы использовать картинку?
Домашнее задание:
- Выучите конспект.
- Разработайте структуру вашего будущего сайта, распределите материал, продумайте и подберите оформление.