Создание Web-страниц с помощью HTML (часть 3)
материал по информатике и икт (9 класс)

① Горизонтальная линия.

Отдельный тег

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

✰Атрибут выравнивания (ALIGN):

ALIGN=LEFT – выравнивание по левому краю;

ALIGN =CENTER – выравнивание по центру;

ALIGN=RIGHT – выравнивание по правому краю;

✰Атрибут размера (SIZE):

SIZE=число – задает высоту линии в пикселях (от 1 до 100);

WIDTH=число – задает длину линии в пикселях.

✰Атрибут цвета (COLOR):

COLOR=цвет (английское название цвета или числовой код оттенка).

Пример:

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

Примеры:

• ---

  100 WIDTH=650 COLOR=GREEN> (прямоугольник)

• ---

  80 WIDTH=80 COLOR=”#00FFFF”> (квадрат)

• ---

  (создает линию без тени)

② Объединение ячеек таблицы.

Для этого служат атрибуты тега :

🙢  COLSPAN=n – объединение n соседних ячеек в одной и той же строке.

🙢  ROWSPAN=n – объединение n соседних ячеек одного и того же столбца.

③ Совместная верстка рисунка и текста с помощью таблицы.

Рамку таблицы в этом случае необходимо задать нулевой толщины (BORDER=0).

Пример:

n64-64.gif">

ЦВЕТЫ

r64-64.gif">

④ Гиперссылки.

Гиперссылка – это фрагмент текста или рисунок, который является указателем на другой файл или объект.

Для создания ссылки используют парный тег … с обязательным параметром HREF. В нем после знака равенства необходимо указать адрес (URL) документа.  

Пример:

="a1.html"> Урок2.Список.Таблица.  

Атрибут TITLE предназначен для задания текста всплывающей подсказки при наведении на ссылку курсора мыши.

 TITLE="Создание Web-страниц"> Урок2.Список.Таблица.

⑤ Задание цвета для всех ссылок на странице.

Цвета всех ссылок на странице задаются в качестве параметров тега . Эти параметры являются необязательными.

• – задает цвет ссылки
• – задает цвет активной (нажатой) ссылки
• – задает цвет посещенной ссылки

Пример:

 ⑥ Использование изображений в качестве гиперссылок.

Кроме текста в качестве ссылок можно использовать рисунки. При этом соответствующий тег  надо поместить между тегами  и .

Пример:

 SRC="n64-64.gif"  WIDTH=64 HEIGHT=64 > 

Вокруг изображения-ссылки автоматически добавляется рамка толщиной в 1 пиксель с цветом, совпадающим с заданным цветом для текстовых ссылок. Чтобы убрать рамку, следует задать параметр BORDER=0.

Пример:

n64-64.gif"  WIDTH=64 HEIGHT=64 BORDER=0>

⑦ Ссылки в фреймах.

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

TARGET=имя фрейма>  Ссылка 

☝   При работе с фреймами удобно использовать зарезервированные имена окон, применяемые в качестве значений параметра target: _top и _parent позволяют загрузить страницу в том же окне, на месте всей фреймовой структуры; _self – в том же фрейме, _blank – в новом окне.

Примеры:

window> Творчество учащихся школы 

_parent> Казань 

⑧ Создание фреймов.

Для создания фреймовой структуры применяется контейнер …, который заменяет контейнер … и используется для разделения экрана на области. Внутри него находятся теги , которые указывают на HTML–документы, предназначенные для изначальной загрузки в созданные фреймы.  

Фреймы бывают вертикальными и горизонтальными.

⑨ Атрибуты тега

⑩ Пример:

Создание двух вертикальных фреймов    (имя файла fr1.html).

COLS="50%, 50%">

NORESIZE>

☝   NORESIZE – запрет изменения размеров фрейма. По умолчанию размеры фреймов можно менять с помощью мыши, перетаскивая границу между фреймами.  

①① Пример:

Создание двух горизонтальных фреймов    (имя файла fr2.html).

ROWS="40%, *">

①② Фильтры, применяемые к тексту.

⌦ 

filter:Glow(Strength='26', Color='red'); width:350; height:60; font-size:18pt; font-weight: bold; text-align: center; color: snow"> Нижнекуюкская основная школа 

⌦ 

filter:Shadow(Color='red', Direction='130'); width:400; height:60; font-size:30pt; font-weight: bold; text-align: center; color: lime"> Дирекция школы 

⌦ 

filter:Wave(Freq='8', Add='0',LightStrength='5', Phase='5', Strength='2'); width:400; height:60; font-size:30pt; font-weight: bold; text-align: center; color: teal"> Фактлар