- •Виды электронных изданий
- •Газета, электронный вариант
- •Журнал, электронный вариант
- •Книги, электронный вариант
- •Информационные агентства
- •Основы HTML
- •Структура простейшей веб-страницы:
- •Атрибуты.
- •Основные теги:
- •Правила написания HTML-кода.
- •Способы задания цвета
- •Специальные символы.
- •Абзац <P>…</P>
- •Тег <FONT>
- •Тег <BODY>
- •Линейка
- •Практическое задание 1.
- •Гиперссылка
- •Способы создания и виды гиперссылок
- •Протокол mailto
- •Атрибуты тега <А>…</A>:
- •Практическое задание 2.
- •Добавление изображений на веб-страницу
- •Атрибуты тега <IMG>
- •Практическое задание 3.
- •Создание списков.
- •Практическое задание 4.
- •Тег <HEAD>…</HEAD>
- •Практическое задание 5.
- •Таблицы.
- •Создание простой таблицы
- •Атрибуты тега <TABLE>:
- •Атрибуты тегов <TR>, <TH> и <TD>
- •Практическое задание 6.
- •Фреймы.
- •Атрибуты <FRAMESET> и <FRAME>
- •Практическое задание 7.
- •Формы
- •Элементы форм
- •TEXTAREA
- •SELECT
- •TEXT
- •PASSWORD
- •CHECKBOX
- •RADIO
- •RESET
- •SUBMIT
- •HTML-редакторы
- •Allaire HomeSite
- •Интерфейс программы
- •Создание простой веб-страницы
- •Создание ссылок
- •Вставка изображений
- •Форматирование шрифта
- •Таблицы
- •Microsoft FrontPage
- •Проводник FrontPage
- •Редактор FrontPage
- •Работа с ссылками и закладками
- •Графика во FrontPage
- •Таблицы
- •Фреймы.
- •Список литературы
2.значения атрибутов могут быть регистрозависимы
Пример. Создание ссылки. photo.html и PHOTO.html – разные файлы! <A HREF=“photo.html”>
<A HREF=“PHOTO.html”>
3.между именем тега и именем атрибута, а также между атрибутами должен быть пробел
4.в именах тегов и атрибутов не должно быть пробелов
5.значения атрибутов нужно помещать в парные кавычки “…”
6.несколько пробелов подряд сжимаются в один
7.игнорируется ENTER для перевода строки
8.любой кусок HTML-кода или обычного текста может быть закомментирован. Закомментированную часть броузер игнорирует.
9.теги вкладываются друг в друга по принципу русских матрёшек. Сначала закрывается внутренний тег, потом внешний
10.броузеры игнорируют незнакомые теги и атрибуты.
Способы задания цвета
Число существующих цветов, вообще говоря, безгранично. Одни устройства способны воспринимать цвета (глаз человека), другие – воспроизводить (монитор, фотоснимок). Делают они это по-разному. Человеческий глаз воспринимает гораздо больше цветов, чем может передать экран или фотография. Другими словами, их цветовой охват – диапазон цветов, которые могут быть воспроизведены, – меньше, чем цветовой охват человеческого глаза.
Из-за разницы в цветовых охватах различных устройств было создано несколько цветовых моделей. Например, RGB, CMYK, Lab. Ни одна из них не идеальна. Цветовые модели используются для взаимосвязи между устройствами с различными цветовыми охватами.
Модель RGB предназначена для описания излучаемых цветов. Устройства, излучающие цвета: монитор, телевизор, проектор. Базовые компоненты этой модели основаны на трех цветах: красном (Red), зеленом (Green) и синем (Blue), так как человеческое восприятие цвета основано именно на них. Вся остальная палитра создается путём смешения трёх основных цветов в различных соотношениях.
Чтобы задать цвет на веб-странице, необходимо соответствующему атрибуту присвоить буквенное названия цвета или шестнадцатеричный код цвета.
Буквенное название: red, blue, white, black.
Пример. Белый текст на черном фоне:
<BODY BGCOLOR=“black” TEXT=“white”>
Таким образом можно задать лишь небольшой набор базовых цветов. Основной способ – в виде кода.
Шестнадцатеричный код в рамках модели RGB образуется следующим образом: #RRGGBB, где RR – две позиции, отведенные под красный цвет, GG
– две позиции, отведенные под зелёный, BB – две позиции, отведенные под синий.
Шестнадцатеричность: 0123456789ABCDEF min max
#000000 соответствует черному цвету (все цвета выключены), #FFFFFF – белому (все цвета включены).
Тогда красный цвет – #FF0000 (все цвета, кроме красного, выключены).
Базовые цвета:
#000000 – Black (чёрный) |
#008000 – Green (зелёный) |
#C0C0C0 – Silver (серебристый) |
#00FF00 – Lime (салатовый) |
#808080 – Gray (серый) |
#808000 – Olive (оливковый) |
#FFFFFF – White (белый) |
#FFFF00 – Yellow (жёлтый) |
#800000 – Maroon (коричневый) |
#000080 – Navy (тёмно-синий) |
#FF0000 – Red (красный) |
#0000FF – Blue (синий) |
#800080 – Purple (пурпурный) |
#008080 – Teal (тёмный циан) |
#FF00FF – Fuchsia (фуксия) |
#00FFFF – Aqua (циан) |
Специальные символы.
Не все символы, набранные с клавиатуры, однозначно интерпретируются броузером. Чтобы вывести на экран такие символы, как “”, &, <, >, используемые при написании тегов, нужно использовать специальные коды.
Синтаксис: &код;
Числ. значение |
Букв. значение |
Символ |
Описание |
|
|
|
|
|
|
" |
" |
“ |
Кавычка |
|
|
|
|
|
|
& |
& |
& |
Амперсант |
|
|
|
|
|
|
< |
< |
< |
Знак “меньше” |
|
|
|
|
|
|
> |
> |
> |
Знак “больше” |
|
|
|
|
|
|
|
|
|
Торговая марка |
|
|
|
|
|
|
|
|
|
Неразрывный пробел |
|
|
|
|
|
|
© |
© |
|
Знак Copyright |
|
|
|
|
|
|
® |
® |
|
Знак зарегистрированной то- |
|
варной марки |
||||
|
|
|
||
|
|
|
|
Абзац <P>…</P>
Тег <P>…</P> используется для разметки абзацев. С помощью атрибута ALIGN задается горизонтальное выранивание текста. Варианты: left, center, right. Между абзацами расстояние несколько больше, чем между двумя строками одного абзаца.
Тег <FONT>
Данный тег позволяет задать тип шрифта, его цвет и размер на части вебстраницы.
Пример: <FONT FACE=”Arial” SIZE=”7”>Шрифт Arial</FONT>
Атрибут |
Значение |
Описание |
|
|
|
|
|
COLOR |
Yellow, ##FFFF00 |
Цвет текста |
|
|
|
|
|
FACE |
Arial |
Тип шрифта |
|
|
|
|
|
SIZE |
5, |
Размер кегля. Задается: |
|
целым числом от 1 до7, |
|||
|
|||
|
+2 |
относительным размером с указани- |
|
|
|
ем знака + или - (происходит увели- |
|
|
|
чение или уменьшение размера |
|
|
|
шрифта на заданное число пунктов). |
|
|
Тег <BODY> |
То, что прописано в теге <BODY>, влияет на всю веб-страницу целиком. Атрибуты этого тега задают цвет фона веб-страницы, фоновое изображение, цвет текста и ссылок, и т.п.
Атрибут |
Значение |
Описание |
|
|
|
BGCOLOR |
yellow |
Цвет фона |
|
|
|
BACKGROUND |
Images/fon.gif |
Фоновое изображение |
|
|
|
TEXT |
black |
Цвет текста |
|
|
|
LINK |
blue |
Цвет не посещённой ссылки (по ней не |
|
|
щелкали мышкой) |
|
|
|
ALINK |
red |
Цвет активной ссылки |
|
|
|
VLINK |
navy |
Цвет посещённой ссылки |
|
|
|
LEFTMARGIN |
15 |
Отступ от левого и правого краёв броузера |
|
|
до содержимого страницы, в пикселах |
|
|
|
TOPMARGIN |
20 |
Отступ от верхнего и нижнего краёв бро- |
|
|
узера до содержимого страницы, в пиксе- |
|
|
лах |
|
|
|
BGPROPERTIES |
fixed |
Имеет одно значение, fixed; заставляет |
|
|
фон-изображение не прокручиваться. |
|
|
|
Цвет текста части веб-страницы можно переопределить с помощью тега
<FONT>…</FONT> и его атрибута COLOR.
Пример. Вывести в центре крупным шрифтом “Моя первая вебстраница!”, отступив пять строк от верхнего края. Текст – розового цвета, фон – бордового.
HTML-код: <HTML> <HEAD>
<TITLE>Выравниваем текст</TITLE> </HEAD>
<BODY BGCOLOR=“maroon” TEXT=“pink”> <BR><BR><BR><BR><BR>
<CENTER><H1>Моя первая веб-страница!</H1></CENTER> </BODY>
</HTML>
Линейка
<HR> – тег, создающий горизонтальную линию. Это одиночный тег, у него нет закрывающего.
Пример. Вывести линию толщиной 5 пикселей, занимающую половину экрана и выровненную по правому краю:
HTML-код: |
|
||
<HR |
SIZE=”5” WIDTH=”50%” ALIGN=”right”> |
||
|
|
|
|
Атрибут |
|
Значение |
Описание |
|
|
|
|
SIZE |
|
5, 150% |
Размер, толщина линии |
|
|
|
|
WIDTH |
|
100, 70% |
Длина линии |
|
|
|
|
ALIGN |
|
left, right, center, |
Выравнивание линии |
|
|
justify |
|
|
|
|
|
NOSHADE |
|
Убирает тень у линии. Не имеет значения. |
|
|
|