Автор работы: Пользователь скрыл имя, 31 Мая 2012 в 18:58, реферат
Cyщecтвyeт двa типa peдaктopoв: WYSIWYG (What-You- See-Is What-You-Get Что-ты-видишь-то-и-получаешь) и peдaктopы, paбoтaющиe нaпpямyю c HTML-кoдoм.
Ecли Вы нe имeeтe ни мaлeйшeгo пpeдcтaвлeния o HTML, тo для начала вaм пoдoйдyт peдaктopы пepвoй гpyппы, нaпpимep:
Front Page, Word
<a href="URL" target="Окно">
<img border="0" src="Рисунок" width="Ширина"
height="Высота" TITLE="Подсказка>
</a>
Ссылка на e-mail. Вверх
Вы можете также
создать ссылку на e-mail, в это случае
нужно в качестве URL’a прописать следующее:
mailto:адрес электронной почты
Например:
<a href="mailto:lenin@zeos.net">
Почтовая гиперссылка
имеет несколько параметров (не обязательных):
?subject - Тема пиcьма
&Body - Текст вашего сообщения
&cc - Копии письма через запятую
&bcc - Скрытые копии письма через запятую
title="Выпадающая подсказка" Ставиться
по желанию и распологаеться отдельно
от параметров почтовой ссылки (смотрите
расположение кавычек на примере ниже).
<a href="mailto:lenin@zeos.net ?subject=Поздравление &Body=text &cc=copy@mail.ua.net &bcc=hidden_copy@mail.ua.net" title="Пример почтовой гиперссылки">Мое мыло</a>
Щелкнув на такую ссылку, откроется окно почтовой программы пользователя с уже заполнеными полями. Останется только написать письмо и отправить.
Закладки. Вверх
Иногда возникает вопрос: как сделать ссылку на определенное место в том же или в другом документе? Чтобы нажав по какой-нибудь ссылке можно было попасть в определенное место данного документа. Вот в этом нам и помогут закладки.
Ссылка на закладку
в том же документе имеет следующий
вид:
<a href="#Имя закладки">Название
раздела</a>
А так выглядит ссылка
на закладку в другом документе:
<a href="Имя документа#Имя закладки">Название
раздела</a>
Сама закладка будет
такой:
<A NAME="Имя закладки"></a>
Щелкнув на Название раздела пользователь будет попадать на определенную Вами закладку. Вверху данной страницы находится содержание, оформленное как ссылки на определенные закладки, находящиеся в этом же документе.
Ссылки и цвет. Вверх
Для того, чтобы при наведении на ссылку курсором и при клике она меняла свой цвет в тег <BODY> нужно добавить еще несколько параметров.
text - цвет текста.
link - цвет ссылки.
vlink - цвет пройденой ссылки.
alink - цвет активной ссылки, когда подводиться
к ней курсор.
<BODY text="black" link="blue" vlink="purple" alink="red">
Данные атрибуты
определяют свойства для всего документа.
Поместив такой код в HTML страницу,
уже не надо будет назначать каждый
раз цвет шрифту, т.к везде он будет
таким, каким определен в теге <BODY>.
Стили (CSS).
CSS Cascading Style Sheets (Таблицы каскадных стилей) – это набор правил оформления и форматирования, который может быть применен к различным элементам страницы. В стандартном HTML для присвоения какому-либо элементу определенных свойств (таких, как цвет, размер, положение на странице и т. п.) приходиться каждый раз описывать эти свойства. Применяя CSS, Вы можете один раз описать свойства элементов и определить это описание как стиль, а в дальнейшем просто указывать, что элемент, который вы хотите оформить соответствующим образом, должен принять свойства стиля, описанного вами.
Вы можете сохранить описание стиля не в тексте вашей странички, а в отдельном файле – это позволит использовать описание стиля на любом количестве Web-страниц.
Описания стилей находятся в тегах <STYLE></STYLE> и размешаются между тегами <HEAD></HEAD>. Приведем пример использования стилей, где слово "Пример" отображается шрифтом Comic Sans MS, если такого нет на машине пользователя, используется шрифт Tahoma, жирным шрифтом, размером 25 процентов и темно-зеленым цветом :
Описываем стили
под именем Example :
<STYLE><!--
.Example{font-family: Comic Sans MS, Tahoma; font-weight: bolder; font-size:
25pt; color: darkgreen;}
--></STYLE>
Здесь вызываем описания стилей :
<div class="Example"> Пример </div>
Если Вы распологаете стили в отдельном файле, тогда между тегами <HEAD></HEAD> каждого HTML документа нужно добавить ссылку на CSS файл:
<LINK REL=STYLESHEET TYPE="text/css" HREF="Example.css">
Example.css - это Ваш CSS файл, содержащий описание применяемых стилей. Если он находиться в другом каталоге, нужно указать к нему путь. Создается CSS файл в любом текстовом редакторе, например, в Блокноте, нужно будет только изменить расширение текстового файла на CSS. В CSS файле не должны указыватся теги <STYLE></STYLE>. Например:
У нас есть файл Example.css,
содержажий такие параметры (подчеркиваем
ссылки только при наведении на них курсором):
<!--
A { text-decoration: none; }
A:hover { color: #FF0000; text-decoration: underline; }
-->
Ссылка на него в HTML документе будет выглядить
так:
<LINK REL=STYLESHEET TYPE="text/css" HREF="Example.css">
Вы можете определить стиль для любого тега отдельно. Для этого нужно в тег добавить элемент STYLE и описать его стиль в кавычках. Следующий пример отображает слово "Пример" шрифтом Verdana, размером 150 процентов и красным цветом.
<H3 STYLE="font-family:Verdana; font-size:150%; color:red"> Пример </H3>
В таблице приведены некоторые свойства элементов, управляемых с помощью CSS.
Свойства шрифта:
font-family Используется для указания шрифта
или шрифтового семейства, которым будет
отображаться элемент.
Пример:
P {font-family: Verdana, sans-serif;}
font-weight Определяет степень жирности шрифта
с помощью трех параметров: lighter (обычный),
bold (жирный), bolder (очень жирный)
Пример:
B {font-weight: bolder;}
font-size Устанавливает размер шрифта. Параметр
может указываться в процентах, пикселях
или сантиметрах.
Примеры использования для тегов H1, H2,
H3:
H1 {font-size: 200%;}
H2 {font-size: 150px;}
H3 {font-size: 400pt;}
Свойства текста:
text-decoration Устанавливает эффекты оформления
шрифта, такие, как подчеркивание или зачеркивание
текста
Пример использования для тега Н4:
H4 {text-decoration: underline;} (подчеркивание)
H4 {text-decoration: line-through;} (зачеркивание)
text-align Определяет выравнивание элемента.
Пример:
P {text-align: left} (выравнивание по левому краю)
P {text-align: right} (выравнивание по правому
краю)
P {text-align: justify} (выравнивание по ширине)
P {text-align: center} (выравнивание по центру)
text-indent Устанавливает отступ первой строки
текста. Чаще всего используется для создания
параграфов с табулированной первой строкой.
Пример использования для тега H1:
H1 {text-indent: 60pt;}
line-height Управляет интервалами между строками
текста.
Пример:
P {line-height: 50 %}
Цвет элемента и фона:
color Определяет цвет элемента I {color: yellow;}
Пример использования для тега H3:
H3 {color: #0000FF;}
background-color Устанавливает цвет фона для
элемента.
Пример использования для тега H3:
<H3 style=”background-color:gold; color:brown;”> Пример
</H3>
Пример
Свойства границ:
margin-left (слево)
margin-right (справо)
margin-top (сверху)
margin-bottom (снизу) Устанавливают значения
отступов вокруг элемента.
Пример использования для рисунка:
IMG { margin-left: 20pt}
IMG { margin-right: 20pt}
IMG { margin-top: 20pt}
IMG { margin-bottom: 20pt}
Единицы измерения:
px Пиксели
cm Сантиметры
mm Миллиметры
pt или % проценты
Мета-теги.
Мета-теги - информация для Обозревателя и поисковых машин. В HTML документе всегда размещаются между тегами <HEAD></HEAD>. Большинство мета-тегов являются не обязательными, поэтому решайте сами какие использовать. Приведены самые полезные.
Кодировка. (обязательный
мета тег) Указав его, Обозреватель будет
правильно отображать текст страницы.
<meta http-equiv="content-type" content="text/html;
charset=Кодировка">
Пример: <meta http-equiv="content-type" content="text/html;
charset=Windows-1251">
Показ дополнительного
файла перед основным. Вы можете
использовать этот мета-тег для переадресации,
не прибегая к навороченным скриптам.
<Meta name="Refresh" Content="число (в секундах);
Url=имя файла с расширением">
Пример: <Meta name="Refresh" Content="10; Url=INDEX.HTM">
Данный пример загружает документ INDEX.HTM
через 10 секунд.
Указание имени
автора. Впишите свое имя или Nickname.
<Meta name="Author" Content="имя автора">
Пример: <Meta name="Author" Content="Владимир
Дригалкин">
Описание документа.
Текст, который Вы укажите в этом
теге, будет отображаться поисковиками.
Длинна описания не должна превышать 200
символов.
<Meta name="Description" Content="описание">
Пример: <Meta name="Description" Content="Все
про взлом программного обеспечения. Инструменты,
вирусы, исходники.">
Ключевые слова
для поисковиков. Укажите поисковикам,
по каким словам им осуществлять поиск
информации, содержащейся на Вашей
странице. Не пишите в этом тэге одних
и тех же слов. Длинна списка до 800
символов.
<Meta name="Keywords" Content="слова через
запятую или пробел">
Пример: <Meta name="Keywords" Content="crack
cracking взлом">
Указание E-Mail.
<Meta name="Reply-to" Content="адрес E-Mail">
Пример: <Meta name="Reply-to" Content="Lenin@INC.net">
Дата создания сайта.
<Meta Name="Date" Content="месяц, число,
год и время через пробел">
Пример: <Meta Name="Data" Content="May 28 1999
15:34 Am">