WOW BEST RU
Главная | Каталог статей | Регистрация | Вход
 
Пятница, 15.11.2024, 23:33
Приветствую Вас Гость | RSS
Меню сайта
Клик рекламу.помог
Форма входа
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0
Каталог сайтов ForuCoz.com - раскрути сайт
Главная » Статьи » Мои статьи

Самоучитель по написанию сайта для новичков( азы)
… - формирует строку таблицы.
3. Парный дескриптор - формирует ячейку внутри строки.
Пример:

1) Основная составляющая – это дескриптор (или ТЭГ) HTML.
Дескриптор (ТЭГ) – это команды языка HTML, представляющие собой слово или аббревиатуру, заключенные в треугольные скобки().

Дескрипторы бывают двух видов: одиночные и парные.
• Одиночный дескриптор – определяет реакцию браузера в том месте, в котором он находится на Web странице.
Пример.
Дескриптор
переводит в то место, где встретится на Web странице.
• Парный дескриптор – определяет действие в отношении фрагмента Web страницы, в которой находится между открывающей и закрывающей частью парного дескриптора.
Пример.
… … …

2) Атрибут дескриптора.
В состав начального дескриптора могут применяться дополнительные параметры, например:
Дескриптор абзаца (параграфа).


----------------------
----------------------


Текст будет отображаться выровненным по центру.
Здесь Align является параметром, а center – значением данного параметра. (Такой параметр называется в языке HTML атрибут).

Атрибут дескриптора – определяет дополнительное свойство дескриптора, уточняет его действие. В случае парного дескриптора используется внутри открывающего дескриптора.

У дескриптора может быть один атрибут, несколько атрибутов или может вообще их не быть.
Пример с несколькими атрибутами.

---------------------------------

Два атрибута: color - атрибут цвета и size - атрибут размера.

2.Сценарий (SKRIPT).
Сценарий (SKRIPT) - это программный код, обеспечивающий работу интерактивных и динамических элементов Web сайта.

Сценарии бывают двух видов:
1)Серверный – это программа, выполняющаяся на Web сервере.
2)Клиентский – это программа, выполняющаяся с помощью интерпретатора браузера (то есть на компьютере пользователя).

Наиболее частая функция сценария – взаимодействие с базами данных и создание их на основе Web страниц.

Клиентский сценарий в отличие от языка разметки HTML предоставляет гораздо больше возможностей:
• Для взаимодействия с операционной системой и браузером;
• По управлению элементами интерфейса операционной системы и браузером.

Серверный сценарий чаще всего используется для отображения в виде Web страниц содержимого баз данных, которые хранятся на сервере.
Преимущества серверного сценария:
Более широкий спектр возможностей по обработке взаимодействия пользователя и Web сайта.
Преимущества клиентского сценария:
Большая скорость обработки и экономия ресурсов (за счет уменьшения передачи данных между сервером и компьютером пользователя).

3.Среда программирования.
Среда программирования (среда разработки) – это программное обеспечение, позволяющее эффективно создавать элементы Web станиц, разрабатывать сценарии и осуществлять их отладку.
Основные из них:
1) MS Font Page.
2) Macromedia Dream Weaver.
3) Блокнот.

Основные дескрипторы (теги) HTML

1.Заголовок HTML документа – определяет назначение HTML документа и его основные свойства.
Формируется при помощи парного дескриптора :

-----------


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

2.Тело Web документа – содержит содержательную часть Web документа (информация, графика и так далее).
Формируется при помощи парного дескриптора :

------------

3.Дескриптор, определяющий начало и конец документа.
Формируется при помощи парного дескриптора . Начальный находится в самом начале HTML документа, конечный – в самом конце Web документа.

Заголовок
Тело

Заголовок HTML документа и его основные свойства

Формируется при помощи МЕТА дескрипторов ().
Дескриптор используется для описания свойств HTML документа. Он является одиночным, однако содержит следующие атрибуты:
• http-equiv
• name
• content
Первые два используются для обозначения свойств (то есть дают свойству имя), последний используется для придания свойству значения.
Например:

Используется для обозначения годности документа.


Указывает на тип документа, его отношение к текстовому документу и его кодировка.


Дает описание содержимого Web страницы.

Ключевые слова указываются через запятую (можно пробел). Определяет ключевые слова данного Web документа.

• Свойства HTML документа, обозначенные http-equiv передаются на компьютер пользователя в составе HTTP заголовка. Браузер обязательно интерпретирует http заголовок. Инструкции, содержащиеся в http заголовке особенно важны для правильного отображения HTML документа.

• Свойства HTML документа, определенные с помощью атрибута name носят рекомендательный характер и в большинстве своем игнорируются браузером.

Подобные МЕТА свойства (или свойства HTML документа) обрабатываются поисковыми системами.
Пример.
BACKGROUND=1.jpg>

Структура дескриптора BODY

1.Атрибут bgcolor – для отображения фона HTML документа.
Пример.
bgcolor=”white” (black, blue и другие цвета)

Данному атрибуту может присваиваться свойство RGB (RGB – red, green, blue).
Пример.
bgcolor=”#FFCC22”, где
FF – уровень красной составляющей, CC - уровень зеленой составляющей, 22 – уровень синей составляющей.
В шестнадцатеричной системе исчисления FFFFFF – белый цвет, 000000 – черный цвет.
Данная кодировка (RGB) может использоваться во всем HTML документе.

2. Атрибут background – определяет фон с помощью графического формата.
Пример.
background=”2.jpg”
В значении атрибута указывается название документа и путь к нему. (Если указано только название, то данный файл должен находиться в той же папке, что и HTML документ).

Если путь указан так:
background=”/fold1/2.jpg”, то папка будет искаться начиная от корневого каталога.

3. Атрибут TEXT.
Значения данного атрибута могут быть такими же, как у атрибута bgcolor.

Эти же правила верны и для следующих атрибутов:
4. Атрибут LINK= определяет цвет ссылки.
5. Атрибут VLINK= определяет цвет уже посещенной ранее ссылки.
6.Атрибут ALINK= определяет цвет активной ссылки (то есть ссылки, указывающей на текущий документ).

7. Атрибут TOPMARGIN=(верхнее поле).
8. Атрибут LEFTMARGIN=(левое поле).
Пример.
TOPMARGIN=”20” (в пунктах).
LEFTMARGIN=”10” (в пунктах).
Все содержимое HTML документа будет смещено относительно левого и верхнего края HTML документа.

Пример парного дескриптора:

-----------------------

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

В HTML документе можно помещать комментарии (они игнорируются браузером и используются для служебных целей).
Комментарии.
1) Одиночный дескриптор.

2) Парный дескриптор .

------------------


Браузеры игнорируют “обычные” средства форматирования текста, такие как последовательность пробелов, знаки табуляции, переводы строки и прочие. Чтобы отформатировать документ используются средства физического и логического форматирования.

К физическим относятся дескрипторы, которые определяют напрямую внешний вид текста.
К логическим относятся дескрипторы, которые определяют логический статус (значение) текста.

Физические средства форматирования.
1.Одиночный дескриптор
- перевод строки (разрыв строки)
.
2.Парный дескриптор - запрещает разрыв текста, находящегося в контейнере. Данный дескриптор еще называют дескриптор жесткого переноса.
По причине различных условий, в которых отражается HTML документ (разные браузеры, видеорежимы, разрешение экрана) HTML документ может отображаться с нарушением взаимного расположения элементов.

3. Одиночный дескриптор - определяет место мягкого переноса. Данный дескриптор используется совместно с дескриптором и размещается внутри его контейнера.
Браузер осуществляет перенос в соответствии с этим дескриптором только в том случае, если строчка не помещается в ширину окна и обычный перенос запрещен с помощью дескриптора
.

4. Парный дескриптор

- параграф или абзац. Текст, находящийся внутри дескриптора оформляется в виде параграфа или абзаца.
Атрибут ALIGN= выравнивание текста.
Возможные значения:
• =LEFT – по левому краю.
• =CENTER – по центру.
• =RIGHT – по правому краю.

5. Парные дескрипторы заголовка.
Бывают шести уровней:


… … …

Текст заголовка выравнивается, до и после текста интервал.
Допустимо использование атрибута ALIGN.
Данные дескрипторы имеют большое значение для повышения информационной ценности документа в ”глазах” поисковой системы. (Дескрипторы заголовка – один из основных инструментов для повышения ценности).

6. Дескриптор


– одиночный горизонтальный дескриптор.
Там где находится данный дескриптор, отображается горизонтальная черта.
Атрибуты:
• ALIGN
• COLOR –цвет черты (значения как у background).
• WIDTH – ширина линии (в пунктах).
• SIZE – толщина линии (в пунктах).
• NOSHADE – без тени.

7. Парный дескриптор .
Предназначен для определения шрифта (начертания) отображаемого текста (курсив и так далее).
Атрибуты:
• FACE – название шрифта.
Пример:
FASE=”Times New Roman”
Текст, который помещен внутри контейнера будет отображен данным шрифтом. В связи с тем, что сложно угадать есть ли у пользователя такой же шрифт, допускается перечисление нескольких шрифтов через запятую в дескрипторе.
• COLOR
• SIZE=3 - по умолчанию. (Размер символов может быть от 1 до 7).

8.Одиночный дескриптор
Данный дескриптор устанавливает базовое значение текстовых значений Web страниц, находящихся после . Атрибуты как у дескриптора .

9. Парный дескриптор

 - дескриптор пре форматирования. 
Используется для форматирования текста стандартными способами (табуляцией, последовательностью пробелов и так далее).
Пример:
 
_ _ _ _ _ _ _ _ _ _ _ _ _ _
|_ _ _ _ _ _ _|_ _ _ _ _ _ _|
|_ _ _ _ _ _ _|_ _ _ _ _ _ _|

10. Парный дескриптор


Используется для выравнивания группы элементов таблицы (группа – несколько текстовых или графических элементов). Все, что внутри таблицы выравнивается.
Пример:

Align

10. Парный дескриптор


Все содержимое контейнера данного дескриптора выравнивается по центру.

Советы по форматированию текстовых фрагментов

1.Использовать мягкий контраст между фоном и текстом (например, черный и белый).
2.Использовать как можно меньшее число шрифтов (2-3). Принято для отображения заголовков использовать шрифты типа Arial (то есть без засечек), а шрифты с засечками для самого текста (например, ТАЙМС).
3.Реже используйте выделения, подчеркивания и жирные шрифты.

Существуют так же дескрипторы:
1) - выделяет текст в контейнере с помощью жирного шрифта.
2) - выделяет текст в контейнере с помощью наклонного текста (курсив).

Пример логического форматирования.
1) Парный дескриптор
Используется для цитат. Обычно браузером отображается в виде курсива (наклонного текста).
2) Парный дескриптор


Используется для выделения больших цитат. (Браузер обычно делает отступ от левого края).

В большинстве случаев браузер не допускает пересечение дескрипторов.
Пример пересечения:

 



(В лучшем случае просто не запустится).

Но есть и исключения, например
В том месте, где пересеклись дескрипторы и , текст будет выделен жирным курсивом.
3) Парный дескриптор - подчеркивание.

Специальные символы

Используются для отображения символов, которые являются в HTML управляющими и не могут быть отображены обычными способами.
Например, (>) - больше или (<) – меньше. Браузер ее воспринимает как начало контрольной последовательности.
Для того чтобы все-таки отобразить эту скобку необходимо набрать последовательность:
1) < - отобразится левая скобка.
2) > - отобразится правая скобка.
3) © - отобразится значок авторского права.
4) ° - отобразится значок температуры.
5)   отобразится символ пробела (жесткого пробела). Если пробел указан с помощью данного специального символа, то разрыв строки не допускается, так как браузер будет видеть слова и пробелы как одно слово.

Сложное форматирование

В отличие от простого форматирования символов и абзацев в HTML сложное форматирование производится с помощью многоуровневых конструкций, основу которых составляет дескриптор, задающий способ форматирования (список, таблица) и элементы более низкого уровня, используемые непосредственно для отображения текста.
Пример:


  1. abc

  2. def


Данная конструкция формирует нумерованный список, при этом дескриптор
    является дескриптором, который определяет способ форматирования. В браузере отобразится:
    1.abc или a. abc
    2.def b. def

    1. Парный дескриптор

  1. (от английского слова List - список) используется для отображения элементов списка. Атрибутов не имеет.

    2. Парный дескриптор

    - формирует нумерованный список (или упорядоченный).
    • Изменение способа нумерации производится с помощью атрибута TYPE.
    Например:
      1 - арабские цифры.
      а – прописные буквы.
      А – заглавные буквы.
      I – римские цифры.
      • Атрибут START позволяет указать номер, с которого начинается нумерация.
      Например, если START=3, то нумерация начнется с трех или с буквы “c”.

      2. Парный дескриптор


      Формирует не упорядоченный список (маркерный).
      • abc
      • def
      Например:

      • abc


      Где disc – жирная точка; square - квадрат; circle – не закрашенная окружность.
      При отображении элементов списка браузер делает отступ слева.

      Многоуровневые списки.
      Например:


      • abc


        • def

        • ghi



      Отобразиться:
      • abc
      o def
      o ghi
      Браузер будет делать очередной отступ слева.

      Таблицы.
      1. Парный дескриптор …

      В его контейнере должны быть сформированы элементы таблицы (ячейки) в которых и будет информация.
      2. Парный дескриптор






1 2 3 4

Атрибуты дескриптора :

• Атрибут WIDTH – определяет ширину таблицы (в процентах или пикселях).
Пример:


• Атрибут HEIGHT – высота (принимает такие же значения, как и атрибут WIDTH).
• Атрибут ALIGN – выравнивание таблицы по ширине относительно краев окна.
• Атрибут BORDER – определяет ширину рамки (если значение данного атрибута 0, то рамки отсутствуют).
• Атрибут bgcolor – для формирования фона таблицы с помощью цвета.
• Атрибут background - для формирования фона таблицы с помощью картинки.
• Атрибут cellpadding – для указания отступов от краев ячейки (в пикселях).
• Атрибут cellspacing – расстояние между ячейками.

Обычная таблица

• Атрибут bordercolor – цвет границ ячеек (рамки).

Атрибуты дескриптора

:

1) Атрибут ALIGN – выравнивание текста в ячейках.
2) Атрибут VALIGN – определяет вертикальное выравнивание текста в ячейках.
Возможные значения атрибута VALIGN:
• =TOP – по верху.
• =MIDDLE – по центру.
• =BOTTOM – по нижнему краю ячейки.

3)Атрибут bgcolor – для указания фона строки.

Атрибуты дескриптора

.
Дополнительно атрибуты:
• Атрибут COLSPAN – объединение ячеек, находящихся в одной строке. Значение атрибута равно количеству близлежащих ячеек находящихся в одной строке, которые будут объединены.
Пример:
:

• Атрибут ALIGN.
• Атрибут VALIGN.
• Атрибут bgcolor.
Вышеперечисленные атрибуты действуют так же, как для дескриптора




1 3 4


• Атрибут ROWSPAN – объединение ячеек, находящихся в одном столбце. Значение атрибута указывает количество близлежащих ячеек находящихся в одном столбце, которые будут объединены.
Пример:





1 2 4

Форматирование текстовых фрагментов HTML документа

Кроме ширины и высоты таблицы в целом можно регулировать ширину и высоту ячеек (то есть использовать такие же атрибуты в дескрипторе

, в пикселях и в процентах).
Если они не указаны, то браузер выравнивает размер ячейки по ширине текста.
Таблица является наиболее часто употребляемым инструментом в Web дизайне, позволяющим точно разместить на таблице отдельные мультимедийные элементы. Подобно спискам, таблицы могут быть вложены в другие таблицы.
Пример:





Чтобы добавить такую таблицу в контейнере дескриптора ячейки пишут следующее:







Фон отдельных ячеек могут отображать не все браузеры.

Размещение графических изображений в HTML документе

Для размещения изображений используются в основном два графических формата:
• JPG
• GIF

1.Формат JPG.
Плюсы - Графическое изображение, сохраненное в данном формате, имеют наименьший объем.
Минусы – при сохранении происходит довольно сильное сжатие картинки, а при сжатии изображение теряет качество и наблюдается эффект пикселизации.
Пример:
Картинка сжалась в девять раз.


Девять пикселей заменяются одним пикселем среднего цвета.

Изображение сохраняется в формате .jpg в том случае, если необходимо сохранить максимальное количество оттенков.

2.Формат GIF.
При сохранении картинок в этом формате также происходит сжатие, но пикселизации не происходит.
Минусы – изображение сохраняется с помощью ограниченного количества цветов (обычно 256 цветов) => изображение будет не очень красочным.

С помощью формата .gif сохраняются навигационные кнопки, навигационные графические элементы и фоновые изображения.

Для внедрения изображения используется одиночный дескриптор .
• Атрибут SRC – основной атрибут. Он указывает путь и имя файла, в котором содержится графический элемент.
Пример:

• Атрибут WIDTH – ширина внедряемого изображения (в пикселях).
• Атрибут HEIGHT - высота внедряемого изображения (в пикселях).
• Атрибуты VSPACE, HSPACE – устанавливают отступ текста от внедряемого в HTML документ изображения.
• Атрибут BORDER – задает толщину рамки вокруг изображения.
• Атрибут ALT – задает альтернативный текст, который появляется в том месте, где должны быть картинки.
Пример:
ALT=”Здесь была картинка”.

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

• Атрибут ALIGN – выравнивание.
Возможные значения:
=LEFT, CENTER, RIGHT.
Добавляются значения: =TOP, MIDDLE, BOTTOM.

• Если не используются атрибуты WIDTH, HEIGHT, то изображение внедряется оригинального размера.

Если используется только один атрибут, например HEIGHT, то браузер уменьшит или увеличит ширину пропорционально изображению.

Использование гипрессылок

Гипрессылка – это URL адрес того документа, который привязан к одному из элементов Web страницы (текстовому или графическому).
Для внедрения ссылок в HTML документ применяется парный дескриптор .
Пример:

Все, что находится внутри контейнера, называется элемент привязки (текстовый фрагмент или графический элемент).

В результате на экране отображается подчеркнутый выделенный текст.

Пример привязки к изображению:



Изображение, к которому привязывается ссылка, называется навигационной картинкой (изображением).
В случае привязки к картинке ссылки вокруг картинки формируется рамка (чаще всего синего цвета). Чтобы ее убрать, необходимо указать:

Значением атрибута HREF может быть абсолютный адрес (URL адрес) или относительный адрес (имя файла, в котором хранится HTML документ, указываемый с помощью ссылки). Например, HREF=”1.htm”. Браузер будет искать данный документ в текущей папке, то есть в той, в которой находится активный документ.

Исключение составляет дескриптор

В случае использования данного дескриптора в заголовке HTML документа (то есть контейнера HEAD)относительные адреса (указанные в виде значений HREF) будут восприниматься браузером не относительно текущей папки, а относительно URL адреса, указанного в значении атрибута URL.

Использование дескриптора
для указания отдельных элементов HTML документов.
1. Атрибут NAME используется для указания места, до которого необходимо пролистать
HTML документ.
Пример:

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

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

Пример:

Название якоря может формироваться без указания URL адреса HTML документа.

Пример:

Данный якорь будет искаться в текущей папке.

При использовании абсолютного адреса необходимо использовать аббревиатуру http (например, http://www.kirov.ru).

HTML форма

Форма (в документе HTML) – это средство, позволяющее организовать диалог пользователя и Web сайта.
Основные виды HTML форм:
1) Кнопки.
2) Списки.
3) Текстовые поля.
4) Переключатели (флажки).
5) Радиокнопки.

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

Группа дескрипторов, формирующих HTML форму.
1. Парный дескриптор

- задает свойство формы и содержит в своем контейнере элементы этой формы.
Атрибуты:
• Атрибут NAME – для задания имя формы.
Например, NAME=”anketa”.
! Каждый элемент HTML формы, как и сама форма, должны быть обязательно поименованы.
• Атрибут METHOD – определяет, каким способом HTML форма будет отправляться к программе-обработчику.
Есть два варианта:
1)=POST – используется чаще всего.
2)=GET – используется для отправки HTML формы с помощью URL адреса.
(По умолчанию задается метод GET).
• Атрибут ACTION – задает местоположение программы-обработчика. Значением атрибута служит адрес (абсолютный или относительный).
Например,
ACTION=”executive.php” – файл, в котором хранится программа-обработчик.
Или ACTION=“mailto:a@kirov.ru” – пользовательская форма будет отсылаться по указанному электронному адресу.
• Атрибут ENCTYPE – тип кодировки.
Варианты:
=”text/htm/”
=”text/plain” – обычный текст без элементов форматирования.

Элементы HTML форм

1.Текстовые поля.
Бывают двух видов:
1) Многострочное. Парный дескриптор
Атрибуты:
• Атрибут NAME.
• Атрибут ROWS – высота поля в строчках.
• Атрибут COLLS – ширина поля в символах.
Размещенный в контейнере дескриптора