ASIA.UCOZ Пятница, 29 Марта 2024, 03:09:11
Приветствую Вас Гость | RSS
[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Форум Средняя Азия » Софт » Веб дизайн » Cкрипты для начинающего (Все что нужно начинаешего)
Cкрипты для начинающего
JuSt_DuDeДата: Суббота, 02 Января 2010, 09:33:15 | Сообщение # 1
Генерал-полковник
Группа: Пользователи
Сообщений: 21
Награды: 0
Репутация: 1
Замечания: 0%
Статус: Offline
Учебники HtmL


 
JuSt_DuDeДата: Суббота, 02 Января 2010, 09:36:21 | Сообщение # 2
Генерал-полковник
Группа: Пользователи
Сообщений: 21
Награды: 0
Репутация: 1
Замечания: 0%
Статус: Offline
И так начнем Уроки по HTML

Урок 1

Что такое HTML ??

HTML (HyperText Markup Language) - язык гипертекстовой разметки. Используется для создания web-страниц, которые являются HTML-документами. С помощью HTML мы делаем разметку документа, например, где должен находиться тот или иной файл, как будет звучать тот или иной фрагмент текста в речевых браузерах, какого цвета будет заголовок абзаца и т.д. Хочется особо отметить тот факт, что помимо графических браузеров, существуют ещё браузеры речевые и текстовые (не отображают графику), что и советую не забывать при создании web-страниц. Процент пользователей с такими браузерами невелик, но ни один профессионал не позволит себе проигнорировать эту, пусть и небольшую интернет-аудиторию.

Как же выглядит этот язык? (самый лёгкий язык в мире). HTML состоит из специальных символов, так называемых тэгов, с помощью которых мы управляем содержимым документа.

Например: мы хотим выделить текст курсивом.
мы хотим <EM> выделить текст курсивом </EM>

Так будет выглядеть строка в виде HTML, где <EM> - это тэг, который даёт браузеру команду выделить текст курсивом, а </EM>- это закрывающий тэг. Вместе они образуют пару тэгов, которая называется "элемент" или "тэг-контейнер". Большинство тэгов в HTML парные, однако, есть и одиночные.
Например: тэг принудительного перевода строки <BR>.
Обратите внимание на то, как выглядит сам тэг. Все тэги в HTML выделены ограничивающими символами "<" и ">", что позволяет легко узнавать их в процессе редактирования готового документа. А закрывающий тэг начинается со знака "/"
В процессе создания документа часто возникает необходимость делать заметки - комментарии, для того, что бы впоследствии свободнее ориентироваться в HTML-пространстве. Для этого, комментарии в своём документе вы заключаете в знаки
"<!--" и "-->".
Например:<!--saved from url=(0063)http://www.t1.com/us.html -->
У тэгов могут быть параметры. У одних их очень много, а у других нет вообще. Параметры в свою очередь могут иметь значения. Если значение не задано, параметр примет значение по умолчанию. Короче, если вы не задаёте значение, браузер задаст его сам.
Например: <BODY bgcolor="#335533">, где BODY-тэг, bgColor -параметр, #335533 -значение.

HTML-документ, отвечающий спецификации HTML4.0 начинается со строки:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> Эта строка говорит браузеру о том, что документ соответствует международной спецификации версии 4.0. Затем мы должны открыть документ с помощью элемента <HTML>. Запомним, что любой HTML-документ всегда открывается с помощью тэга <HTML> и закрывается с помощью тэга </HTML>. Между ними расположен сам документ, состоящий из двух разделов: HEAD и BODY ( заголовка и тела ).
Пример:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>пример простого HTML-документа</TITLE>
</HEAD>
<BODY>на экране появиться только эта фраза</BODY>
</HTML>
Согласитесь, что комментарии здесь излишне.

Не могу не сказать пару слов о таблицах стилей CSS (cascading style sheets), представляющих собой инструменты присоединения стилей к HTML- документам. С их помощью мы можем управлять шрифтом и цветом текста, распределением материала, и т.д. То есть мы задаём для всего документа определённые правила отображения на экране монитора тех или иных элементов данного HTML- документа. Допустим, нам нужно все заголовки первого уровня отобразить белым цветом, а заголовки третьего уровня - красным. Всё это реализуют CSS, к тому же очень просто!
Пример синтаксиса: <STYLE type="text/css">
H1 { color: white }
H3 { color: red }
</STYLE>
Введение таблиц стилей в процесс создания HTML-документов со временем приведёт к исчезновению многих элементов и параметров, применяемых сейчас в веб-страницах и описываемых мною в этой книге. Однако у нас с вами есть чёткая цель: научиться создавать сайты средствами HTML. Согласны? Тогда переходим к уроку 2.

Если кому то помог став +


 
JuSt_DuDeДата: Суббота, 02 Января 2010, 09:42:21 | Сообщение # 3
Генерал-полковник
Группа: Пользователи
Сообщений: 21
Награды: 0
Репутация: 1
Замечания: 0%
Статус: Offline
И так начнем второй урок

Урок 2

Раздел документа HEAD.

HEAD - раздел документа, определяющий его заголовок. Определяется элементом , внутри которого располагаются следующие тэги и элементы:

Советую всегда использовать этот элемент при создании HTML-документов. Не ленитесь составлять качественное и понятное название своему творению. Постарайтесь отобразить в нём суть страницы, не обращая внимание на длину строки, и ваши старания окупятся в тот момент, когда роботы-поисковики заглянут к вам в гости.

META. Так как роботы поисковых машин существа очень примитивные, вам придётся это учитывать при разработке своего сайта. Для этой цели и существует тэг , у которого есть три параметра:
HTTP-EQUIVE
name
content

HTTP-EQUIVE используется для передачи дополнительной информации, в частности, при указании кодировки.
Пример:
name задаёт определение тэга. Имеет множество значений, из которых самыми популярными являются description и keywords.
content задаёт значение, определяющее содержание тэга .
Примеры:
Советую при составлении ключевых слов максимально продумать стратегию сайта. Нужен ли вам огромный траффик, или лучше привлекать на сайт действительно ценных посетителей? Решать только вам.

BASE задаёт базовый адрес документа (URL), с помощью которого работают относительные ссылки в документе. Что такое относительная ссылка? Это ссылка, в которой указывается не полный URL-адрес документа, а лишь имя файла. Тэг имеет один обязательный параметр href, который и задаёт URL-адрес.
Пример:

LINK. Этот тэг определяет взаимоотношения документов внутри сайта. Представляет интерес исключительно для роботов поисковых систем. Имеет ряд параметров и массу значений к ним. Параметры:
href - задаёт url-адрес другого документа
rel - определяет тип взаимоотношений с другими документами
type - задаёт тип таблицы стилей

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

STYLE - элемент, с помощью которого в документ вставляется таблица стилей CSS. Имеет параметр type, который задаёт тип вставляемой таблицы.
Пример:

SCRIPTE - элемент, который используется для внедрения JavaScript-сценариев в HTML-документ.
Пример:

Описание сценариев JavaScript не входит в формат этого учебник

Если кому то помог став +


 
JuSt_DuDeДата: Суббота, 02 Января 2010, 09:46:50 | Сообщение # 4
Генерал-полковник
Группа: Пользователи
Сообщений: 21
Награды: 0
Репутация: 1
Замечания: 0%
Статус: Offline
И так урок 3

Раздел документа BODY.

Сейчас мы приступаем к самому интересному - изучению тела HTML-документа и его содержимого. Тело определяется элементом , внутри которого располагаются HTML-элементы и тэги, задающие свойства содержимого документа и отвечающие за то, что мы видим на экране монитора. Тэг имеет ряд полезных параметров:
bgcolor - задаёт цвет фона документа
background - задаёт url-адрес файла, который будет использоваться в качестве фона.
link - задаёт цвет не просмотренной ссылки
alink - задаёт цвет активной ссылки
vlink - задаёт цвет просмотренной ссылки

Пару слов о цвете в HTML. Если вы уже работали с каким-нибудь графическим приложением, вам должна быть знакома цветовая система RGB ( Red, Green, Blue ), т.е. ( Красный, Зелёный, Синий ). Каждый цвет в системе RGB имеет своё собственное шестнадцатеричное значение в виде цифр и латинских букв, а также название на английском языке.
Пример: синий: #0000FF или blue, зелёный: #008000 или green
При определении цвета в HTML-документе можно использовать как название, так и шестнадцатеричное значение.

Пример простого HTML-документа на основе пройденного материала:

Текст вашего документа

Гипертекстовые ссылки.

Основным инструментом в сети интернет являются гиперссылки. Щёлкнув по ссылке, мы даём браузеру команду загрузить на наш компьютер нужный документ. Внешний вид ссылки зависит от вашей фантазии и дизайнерского замысла. Это может быть как текст, так и изображение, и даже части изображения. В HTML-документе ссылки задаются с помощью элемента , который имеет параметры href и name.
Параметр href задаёт url-адрес документа на который указывает ссылка.
Пример: главная,
где слово "главная" является ссылкой на сайт: www.real.ru
Параметр name задаёт имя для части документа, на которую делается ссылка (внутренняя ссылка). В этом случае мы создаём что-то вроде метки:
А это ссылка на "помеченную" часть:
Для облегчения просмотра больших документов, достаточно раскидать по нему несколько меток, не забыв создать соответствующие ссылки, и разместить их в начале страницы.

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

Рассмотрим элементы и тэги, участвующие в процессе форматирования текста HTML-документа. Они делятся на тэги логического и физического форматирования. Тэги логического форматирования определяют "характер" текстового фрагмента, который разные браузеры отобразят по разному (по умолчанию). К примеру, речевой браузер изменит интонацию части текста, которая заключена в пару тэгов логического форматирования. Тэги физического форматирования задают вид отображения выделенных участков текста в окне браузера.

Тэги логического форматирования
- используется для выделения текста в качестве программного кода. Текст внутри элемента браузерами обычно отображается моноширинным шрифтом.
Пример: $a1ref-> [o] = "q"
- используется для выделения текста в качестве цитаты. Текст внутри элемента браузерами обычно отображается курсивом.
Пример: Чем больше женщину мы любим, тем меньше нравимся мы ей.Помните, кто сказал?
- используется для смыслового выделения фрагмента, имеющего некоторую важность. Текст внутри элемента браузерами обычно отображается курсивом.
Пример: этоважный фрагменттекста
- используется для выделения фрагмента текста в качестве вводимого с клавиатуры. Текст внутри элемента браузерами обычно отображается моноширинным шрифтом.
Пример: Для того, что бы воспользоваться базой данных следует набратьexit
- используется для выделения очень важных участков текста. Текст внутри элемента браузерами обычно отображается полужирным шрифтом.


 
JuSt_DuDeДата: Суббота, 02 Января 2010, 09:48:40 | Сообщение # 5
Генерал-полковник
Группа: Пользователи
Сообщений: 21
Награды: 0
Репутация: 1
Замечания: 0%
Статус: Offline
Продолжение 3 -го урока

Пример: этону очень важный фрагменттекста

Тэги физического форматирования
- задаёт отображение текста курсивом.
Пример: выделениекурсивом
- задаёт отображение текста полужирным шрифтом.
Пример: выделениеполужирным шрифтом
- задаёт подчёркивание фрагмента текста .
Пример: текстподчёркнут
и задают перечёркнутый текст.
Пример: перечёркнутыйтекст
- задаёт текст моноширинным шрифтом.
Пример: это простомоноширинным шрифт
- отображает текст со сдвигом вверх, иногда шрифтом меньшего размера: верхний индекс.
Пример: WERstidioTM
- отображает текст со сдвигом вниз, иногда шрифтом меньшего размера: нижний индекс.
Пример: Blog
- задаёт фрагмент текста шрифтом большего размера.
Пример: текстбольшего размера
- задаёт фрагмент текста шрифтом меньшего размера.
Пример: текстменьшего размера
- задаёт основной цвет, размер и тип шрифта HTML-документа. Если в какой-нибудь части документа требуется изменить вид текста, используйте тэг . Тэг имеет три параметра: size, face, color.
Пример:
- задаёт параметры шрифта для фрагмента текста, расположенного между начальным и конечным тэгами данного элемента. Имеет параметры: size, face, color. Параметром face следует задавать несколько схожих типов шрифта, т.к. на компьютере пользователя может не быть именно того шрифта, который вы указали. В этом случае текст будет отображён шрифтом по умолчанию, что может не отвечать вашим дизайнерским замыслам.

Если кому то помог став +


 
JuSt_DuDeДата: Суббота, 02 Января 2010, 13:57:48 | Сообщение # 6
Генерал-полковник
Группа: Пользователи
Сообщений: 21
Награды: 0
Репутация: 1
Замечания: 0%
Статус: Offline
Урок 4

Форматирование HTML-документа.

В этом уроке: абзацы, заголовки, разделительные линии, принудительный перевод строки и всё, что имеет отношение к структурной разметке HTML-документа.
P - элемент, с помощью которого текст в HTML-документе разбивается на абзацы. Имеет один параметр - align, возможные значения которого:
left - выравнивает абзац по левому краю
center - текст выравнивается по центру
right - выравнивает абзац по правому краю
justify - выравнивает текст абзаца по ширине

Абзац, заданный с помощью элемента

, отделяется от остального текста пустой строкой.
Пример:

Текст вашего абзаца

В данном примере текст абзаца будет выровнен по левой стороне.

BR - тэг принудительного перевода строки. Может иметь параметр clear, прекращающий обтекание изображения текстом. Возможные значения параметра clear : all, left и right.
Пример:
первая строка
вторая строка
третья строка

Результат:
первая строка
вторая строка
третья строка

HR. Этот тэг вставляет в текст HTML-документа горизонтальную распределительную линию. Имеет параметры:
width - задаёт ширину линии в пикселях или в процентах от ширины окна браузера.
size - задаёт толщину линии в пикселях
align - задаёт горизонтальное выравнивание (left, center, right)
noshade - отменяет объёмность линии. (советую использовать всегда)

Заголовки в HTML-документе задаются элементами: H1, H2, H3, H4, H5, H6. Шесть уровней заголовков различаются между собой величиной шрифта. H1 - самый большой и самый "жирный" заголовок, а H6 - самый "тонкий" и маленький. Заголовки отделяются от остального текста пустой строкой сверху и снизу. Элемент может иметь параметр align, с помощью которого заголовок выравнивается по горизонтали (left, center, right).
Пример:
Самый большой заголовок, выровненный по центру

CENTER - элемент, который выравнивает всё содержимое HTML-документа, расположенное между тегами
и
, посередине окна просмотра браузера. В основном используется для выравнивания таблиц.
Пример:

Первая ячейка Вторая ячейка

PRE - используется для вставки в HTML-документ отформатированного текста, который будет отображён браузером с сохранением всех пробелов моноширинным шрифтом.
Пример:

Отформатированный текст

DIV - элемент, с помощью которого фрагмент HTML-документа выделяется в качестве блока или раздела. Может иметь параметр align, выравнивающий блок по горизонтали (left, center, right).
Пример:

текст блока

ADDRESS - элемент, который задаёт фрагмент текста в качестве почтового адреса. Браузеры такой текст обычно отображают курсивом.
Пример:
Наш адрес
Москва, ул.Строителей, 15

BLOCKQUOTE - элемент задаёт фрагмент текста в качестве цитаты. Текст, размеченный данным элементом на экране отображается с отступом вправо.
Пример:

текст блока


 
JuSt_DuDeДата: Понедельник, 04 Января 2010, 10:29:27 | Сообщение # 7
Генерал-полковник
Группа: Пользователи
Сообщений: 21
Награды: 0
Репутация: 1
Замечания: 0%
Статус: Offline
HTML таблица цветов

Русское название In Englis Код / Сode
Белоснежный Snow FFFAFA
Призрачно-белый Ghostwhite F8F8FF
<span style="color:FAEBD7">Белый-антик Antique White FAEBD7
Кремовый Cream FFFBF0
Персиковый Peachpuff FFDAB9
Белый-навахо Navajo White FFDEAD
Шелковый оттенок Cornsilk FFF8DC
Слоновая кость Ivory FFFFF0
Лимонный Lemon Chiffon FFFACD
Морская раковина Seashell FFF5EE
Медовый Honeydew F0FFF0
Лазурный Azure F0FFFF
Бледно-лиловый Lavender E6E6FA
Голубой с красным отливом Lavender Blush FFF0F5
Тускло-розовый Misty Rose FFE4E1
Белый White (*) FFFFFF
Черный Black (*) 000000
Тускло-серый Dim Gray 696969
Синевато-серый Slate Gray 708090
Грифельно-серый Light Slate Gray 778899
Серый Gray BEBEBE
Светло-серый Light Gray C0C0C0
Серый нейтральный Medium Gray A0A0A4
Темно-серый Dark Gray 808080
Полуночно-синий Midnight Blue 191970
Темно-синий Navy (*), Dark Blue 000080
Васильковый Cornflower 6495ED
Грифельно-синий Slate Blue 6A5ACD
Светлый грифельно-синий Light Slate Blue 8470FF
Голубой королевский Royal Blue 4169E1
Синий Blue 0000FF
Небесно-голубой Sky Blue 87CEEB
Небесно-голубой светлый Light Sky Blue 87CEFA
Синий со стальным оттенком Steel Blue 4682B4
Голубой со стальным оттенком Light Steel Blue B0C4DE
Светло-синий Light Blue A6CAF0
Синий с пороховым оттенком Powder Blue B0E0E6
Бледно-бирюзовый Pale Turquoise AFEEEE
Бирюзовый Turquoise 40E0D0
Зеленовато-голубой Cyan (*) 00FFFF
Светлый циан Light Cyan E0FFFF
Темный циан Dark Cyan 008080
Серо-синий Cadet Blue 5F9EA0
Аквамарин Aquamarine 7FFFD4
Цвет морской волны Seagreen 54FF9F
Цвет морской волны, светлый Light Seagreen 20B2AA
Бледно-зеленый Pale Green 98FB98
Весенне-зеленый Spring Green 00FF7F
Зеленая лужайка Lawn Green 7CFC00
Зеленый Green (*) 00FF00
Средне-зеленый Medium Green C0DCC0
Темно-зеленый Dark Green 008000
Зеленовато-желтый Chartreuse 7FFF00
Зелено-желтый Green Yellow ADFF2F
Лимонно-зеленый Lime Green 32CD32
Желто-зеленый Yellow Green 9ACD32
Зеленый лесной Forest Green 228B22
Хаки Forest Green F0E68C
Бледно-золотистый Pale Goldenrod EEE8AA
Светло-желтый золотистый Light Goldenrod Yellow FAFAD2
Светло-желтый Light Yellow FFFFE0
Желтый Yellow (*) FFFF00
Темно-желтый Dark Yellow 808000
Золотой Gold FFD700
Светло-золотистый Light Goldenrod FFEC8B
Золотистый Goldenrod DAA520
Желтоватый Burly Wood DEB887
Розово-коричневый Rosy Brown BC8F8F
Кожано-коричневый Saddle Brown 8B4513
Охра Sienna A0522D
Бежевый Beige F5F5DC
Пшеничный Wheat F5DEB3
Рыжевато-коричневый Tan D2B48C
Ш околадный Chocolate D2691E
К ирпичный Firebrick B22222
Коричневый Brown A52A2A
Сомон Salmon FA8072
Светлый сомон Light Salmon FFA07A
Оранжевый Orange FFA500
Коралловый Coral FF7F50
Коралловый светлый Light Coral F08080
Оранжево-красный Orange Red FF4500
Красный Red (*) FF0000
Темно-красный Dark Red 800000
Теплый розовый Hot Pink FF69B4
Розовый Pink FFC0CB
Светло-розовый Light Pink FFB6C1
Красно-фиолетовый бледный Pale Violet Red DB7093
Темно-бордовый Maroon (*) B03060
Красно-фиолетовый Violet Red D02090
Фуксин Magenta (*) FF00FF
Фуксин темный Dark Magenta 800080
Фиолетовый Violet EE82EE
Темно-фиолетовый Plum DDA0DD
Орсель Orchid DA70D6
Фиолетово-синий Blue Violet 8A2BE2
Пурпурный Purple A020F0[/size]


 
Форум Средняя Азия » Софт » Веб дизайн » Cкрипты для начинающего (Все что нужно начинаешего)
  • Страница 1 из 1
  • 1
Поиск:



Copyright asia.ucoz.ru © 2007-2024Хостинг от uCoz