Фотошопу CS и иже с ним посвящается

Форум » » ХТМЛ краткий курс поумнения » тема закрыта
	перенос

Автор

Сообщение

Esty
Ушедшая во Тьму
Сообщение N: 312 версия фотошопа: CS2 Откуда: Чуждая, ПЫтер Фото:

Отправлено: 26.12.07 20:40. Заголовок: ХТМЛ краткий курс поумнения

Учебник по ХТМЛ
ручки, ножки, голова...

<HTML>
<HEAD>
<TITLE>тут должно быть название вашей страницы</TITLE>
<STYLE>
тут тот самый загадочный CSS
</STYLE>
</head>
<body>
тут собственно содержание вашей страницы
</BODY>
</HTML>
обратите внимание при заполнении страницы на маленькую хитрость
<тэг1><тэг2><тэг3> ... </тэг3></тэг2></тэг1>
Только такая очередность закрывающих тэгов верна: тэг, который мы открыли первым - закрываем последним, второй – предпоследним и т.д.
<HEAD>...</HEAD>
Указывает на начало и конец заголовка документа.
Атрибуты <HEAD> :

lang="Код языка"
<META>...</META>Служит для размещения дополнительной информации о Web-странице: предоставление информации о документе, его авторе, дате создания, списки ключевых слов для поисковых машин и т.п.
(об этом написаны огромные статьи, так что читайте их сами)
<STYLE>...</STYLE>
Задает таблицу стиля для Web-страницы. Может присутствовать только в HTML-заголовке (внутри тега <HEAD>).
<BODY>...</BODY>
Задает начало и конец тела HTML-документа.
Блочный парный тег.
Атрибуты тега <BODY> :

bgcolor="Цвет" - определяет цвет фона документа

text="Цвет" - определяет цвет текста документа

link="Цвет" - определяет цвет выделенного элемента текста

vlink="Цвет" - определяет цвет ссылки на документ, который уже просмотрен

alink="Цвет" - определяет цвет ссылки в момент, когда на нее указывает курсор мыши

background="Интернет-адрес файла изображения" - дает изображение, служащее фоновым
background-repeat: no-repeat; 
background-position:положение;

bgproperties="fixed" - фоновое изображение не движется. Только для IE.

class="Стилевой класс"

id="Имя"

lang="Код языка"

NOWRAP

style="Определение встроенного стиля"

leftmargin="Расстояние" - задание отступа на странице слева.

rightmargin="Расстояние" - задание отступа на странице справа.

topmargin="Расстояние" - задание отступа на странице сверху

bottommargin="Расстояние" - расстояние отступа на странице снизу

Ответов - 8 [только новые]

Esty
Ушедшая во Тьму
Сообщение N: 311 версия фотошопа: CS2 Откуда: Чуждая, ПЫтер Фото:

Отправлено: 26.12.07 19:51. Заголовок: divы divные и CSS &#..

divы divные и CSS
<DIV>...</DIV>Определяет отдельный элемент страницы: простой текстовой абзац или более сложный фрагмент с HTML-форматированием. Его содержимое может быть сколь угодно сложно. Зачастую используется для создания слоев и применения стилей.

Атрибуты <DIV> :

id="Имя" - название слоя

style="Определение встроенного стиля"

class="Стилевой класс"

align="left|center|right|justify";
делаем следующий трюк

CODE

<html> 
 <head> 
 <title>test</title> 
 <style type="text/css"> 
 <!-- 
 body{ 
 text-align:center; 
 } 
  
 .all{ 
 width:200px; 
 margin-left:auto; 
 margin-right:auto; 
 } 
  
 .a{ 
 background-color:#00CCFF; 
 width:90px; 
 height:50px; 
 margin-top:80px; 
 } 
  
 .b{ 
 background-color:#9900FF; 
 float:right; 
 width:100px; 
 height:300px; 
 } 
  
 .c{ 
 background-color:#FF0000; 
 width:90px; 
 height:100px; 
 margin-top:10px; 
 } 
 --> 
 </style> 
 </head> 
 <body> 
 <div class="all"> 
 <div class="b">&nbsp;</div> 
 <div class="a">&nbsp;</div> 
 <div class="c">&nbsp;</div> 
 </div> 
 </body> 
 </html>

теперь разбираем трюк
Блочная модель
Каждый элемент располагается в блоке, состоящем из содержимого этого элемента, рамки (border), промежуточной области между содержимым и границей элемента (padding), а также полей (margin). Изучение этих свойств поможет в дальнейшем, когда вы будете задавать вид странице.

margin-top, margin-right, margin-bottom, margin-left
Устанавливает ширину поля для определенной стороны элемента.(эти свойства устанавливает ширину соответственно верхнего, нижнего и левого поля).
Значение:

margin-top - ширина верхнего поля.

margin-right - ширина правого поля.

margin-bottom - ширина нижнего поля.

margin-left - ширина левого поля.

inherit - применяется значение родительского элемента.
padding-top, padding-right, padding-bottom, padding-left
Устанавливает ширину промежутка между содержимым элемента и определенным его участком его границы (соответственно верхнем, правым, нижним и левым).
Значение:

padding-top - ширина верхнего промежутка.

padding-right - ширина правого промежутка.

padding-bottom - ширина нижнего промежутка.

padding-left - ширина левого промежутка.

inherit - применяется значение родительского элемента.

Esty
Ушедшая во Тьму
Сообщение N: 314 версия фотошопа: CS2 Откуда: Чуждая, ПЫтер Фото:

Отправлено: 27.12.07 21:08. Заголовок: таблицы и границы Зд..

таблицы и границы
Здесь надо вспомнить золотое правило:

цитата:

тэг, который мы открыли первым - закрываем последним, второй – предпоследним и т.д.

собственно
<TABLE>...</TABLE>
Атрибуты <TABLE>

align="left|center|right"; положение таблицы

bgcolor="Цвет фона"

border="Толщина границы в пикселах"

background="Интернет-адрес файла изображения"

bordercolor="Цвет борбюра"

class="Стилевой класс"

id="Имя" - название слоя

cellpadding="Расстояние от ячейки до краёв"

cellspacing="Расстояние между ячейками таблицы"

cols="Количество колонок"

height="Высота" в единицах или %%

width="Ширина" в единицах или %%

class="Стилевой класс"

style="Определение встроенного стиля"
<TR>строк в таблице</TR>
Aтрибуты:

ALIGN - устанавливает выравнивание текста в ячейках строки
ALIGN=LEFT - выравнивание влево
ALIGN=CENTER - выравнивание по центру
ALIGN=RIGHT - выравнивание вправо

VALIGN - вертикальное выравнивание текста в ячейках строки
VALIGN=TOP - выравнивание по верхнему краю
VALIGN=MIDDLE - по центру
VALIGN=BOTTON - по нижнему краю
VALIGN=CENTER
VALIGN=BASELINE

bgcolor - цвет фона

bordercolor - цвет рамки строки
<TD>ячеек таблицы</TD>
Aтрибуты:

NOWRAP - содержимое ячейки показывать в одну строку

COLSPAN - размах ячейки по горизонтали
COLSPAN=2 - ячейка на 2колонки . Устанавливает число ячеек, которые должны быть объединены по горизонтали.

ROWSPAN - устанавливает число ячеек, которые должны быть объединены
по вертикали.
ROWSPAN=2 - ячейка, за ней 2 строки

ALIGN - выравнивание текста в ячейках
ALIGN=LEFT - выравнивание влево
ALIGN=CENTER - выравнивание по центру
ALIGN=RIGHT - выравнивание вправо

VALIGN - вертикальное выравнивание
VALIGN=TOP - по верхнему краю
VALIGN=MIDDLE - по центру
VALIGN=BOTTOM - по нижнему краю

WIDTH - ширина ячейки в пикселях
WIDTH=200

HEIGHT - высота ячейки в пикселях
HEIGHT=40

bgcolor - цвет фона

background - фоновая графика

bordercolor - цвет рамки строки

class="Стилевой класс"

style="Определение встроенного стиля"
<MULTICOL>...</MULTICOL>
Вывод текста в несколько столбцов.
Атрибуты:

COLS="n"
n - количество столбцов

GUTTER="m"
m - расстояние между столбцами
<TH>...</TH>
Обозначает заголовок таблицы.

Esty
Ушедшая во Тьму
Сообщение N: 315 версия фотошопа: CS2 Откуда: Чуждая, ПЫтер Фото:

Отправлено: 27.12.07 21:31. Заголовок: про много букофффф, ..

про много букофффф, т.е текст и его стили
<B>жирный текст</B>
Атрибуты (одинаковые для следующих элементов)

class="Стилевой класс"

style="Определение встроенного стиля"

title="Текст подсказки"
<BIG>бАААльшой текст</BIG>
<BLOCKQUOTE>...</BLOCKQUOTE>

цитата:

Форматирует текст как цитату. Текст выводится на экран с увеличенным левым полем.

<CODE>...</CODE>

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

<EM> Выделяет текст терминов. "курсив" </EM>
<FONT>...</FONT>Управление параметрами текста.
Атрибуты <FONT>:

color="Цвет"

face="Имя шрифта"

size="Высота в пикселах"

class="Стилевой класс"

style="Определение встроенного стиля"
<I> курсив </I>
<PRE>...</PRE>

Выводит блок текста моноширным шрифтом  
 с сохранением всего заданного форматирования,  
 т.е. текст выводится как он есть,  
 со всеми пробелами и т.д.

Атрибуты <PRE>:

class="Стилевой класс"

style="Определение встроенного стиля"
<S> ~~Выводит текст зачеркнутым. Все тегами будет написано перечеркнутым шрифтом.~~ </S>
Атрибуты <S>:

class="Стилевой класс"

style="Определение встроенного стиля"
<SMALL>маааленький</SMALL>
<STRONG>жирный</STRONG>
Атрибуты аналогичны <S>
<SUB>^{верхний индекс}... </SUB> и <SUP>_нижний</SUP>
<U> подчёркивание </U>
<LINK>...</LINK>Устанавливает связь текущей страницы с другими файлами. Основное применение: обращение к ранее описаным стилям в отдельном файле. Вставляется между тегами <HEAD>

Атрибуты <LINK>:

href="Интернет-адрес назначения"
rel="Alternate|Appendix|Bookmark|Chapter |Contents|Copyright|Glossary|Help |Index|Next|Offline|Prev |Section|Shortcut Icon|Start|Stylesheet |Subsection|fontdef|stylesheet"
type="Тип данных MIME"
Атрибуты <LINK>:
rev="Alternate|Appendix|Bookmark|Chapter |Contents|Copyright|Glossary|Help |Index|Next|Prev|Section |Start|Stylesheet |Subsection|"
id="Имя"
target="Имя окна или фрейма|_blank|_parent|_search|_top">
Пример:

<HEAD>  
 . . .  
 <link rel="stylesheet" type="text/css" href="MyStyle.css">  
 . . .  
 </HEAD>

ну что полегчало? А осталась ещё графика, формы, кнопки, мультимедиа всякая...

Esty
Ушедшая во Тьму
Сообщение N: 317 версия фотошопа: CS2 Откуда: Чуждая, ПЫтер Фото:

Отправлено: 11.01.08 15:22. Заголовок: графика и прочие кра..

графика и прочие красивости
<IMG>...</IMG>

<IMG SRC="имя файла">

рисунок- ссылка

 <a href="http://адрес сайта" target="blank"> 
 (открытие ссылки в новом окне) 
 <img src="http://адрес+имя файла" alt="ваш текст" border="0px"></a>

Параметры:

WIDTH - ширина картинки в пикселях

HEIGHT - высота картинки в пикселях

ALIGN - выравнивание

ALIGN=LEFT - изображение прижимается к левому полю окна, текст обтекает изображение с правой стороны

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

ALIGN=RIGHT - изображение прижимается к правому полю окна, текст обтекает изображение с левой стороны

VALIGN=TOP - верхняя граница изображения выравнивается по самому высокому элементу текущей строки

VALIGN=TEXTTOP - верхняя граница изображения выравнивается по самому высокому текстовому элементу текущей строки

VALIGN=MIDDLE - выравнивание середины изображения по базовой линии текущей строки

VALIGN=ABSMIDDLE - выравнивание середины изображения посередине текущей строки

VALIGN=BOTTOM,BASELINE - выравнивание нижней границы изображения по базовой линии текущей строки

VALIGN=ABSBOTTOM - выравнивание нижней границы изображения по нижней границе текущей строки

HSPACE - горизонтальный отступ от графического изображения

ALT - альтернативный текст

<MAP>...</MAP> (ни когда не пользовала и весьма плохо представляю что это такое и как эти области определить...)
Создание нескольких активных областей на одном рисунке <AREA> - задает чувствительную область

Атрибуты <MAP>:

NAME - имя карты координат
Атрибуты <AREA>:

SHAPE - форма области

SHAPE=rect - прямоугольник (задаются две пары координат: x1,y1,x2,y2 (для верхнего левого и нижнего правого углов))

SHAPE=circle - окружность (задается x,y,r , где x,y - координаты центра, r - радиус)

SHAPE=poly - многоугольник (задается x1,y1,x2,y2,...xn,yn , где x,y - координаты углов)

HREF - URL ссылки при щелчке на область мыщью

NOHREF - задание неактивной но чувствительной области

COORDS - координаты области
Пример:

<MAP NAME="menu">  
 <AREA SHAPE=rect COORDS="0,0,20,20" HREF="file1.html">  
 <AREA SHAPE=rect COORDS="40,0,60,20" HREF="file2.html">  
 </MAP>

Определение рисунка как меню производится в теге <IMG> при помощи атрибута USEMAP:

<IMG SRC="pic.gif" border=0 USEMAP=#menu>

Esty
Ушедшая во Тьму
Сообщение N: 318 версия фотошопа: CS2 Откуда: Чуждая, ПЫтер Фото:

Отправлено: 11.01.08 16:34. Заголовок: не люблю я бегущие с..

не люблю я бегущие строки, но..... некоторые находят их привлекательными и полезными.
<MARQUEE>...</MARQUEE>

Создание бегущей строки.

BEHAVIOR-устанавливает движения текста

BEHAVIOR="scroll"(по умолчанию)-стандартное движение от правого края к левому

BEHAVIOR="alternate"-движение от правого края к левому и обратно

BEHAVIOR="slide"-один раз пробегает и остается

DIRECTION-направление движения текста
DIRECTION="left"(по умолчанию)
DIRECTION="right"
DIRECTION="up"
DIRECTION="down"

LOOP - число повторений цикла, по умолчанию "infinite"-вечно

WIDTH - ширина строки
WIDTH=n - ширина строки n пикселей
WIDTH=n% - ширина строки n% от ширины экрана

HEIGHT - высота строки
HEIGHT=n - высота строки n пикселей
HEIGHT=n% - высота строки n% от max возможного значения

scrollAmount - регулировка движения строки по экрану
scrollAmount=n - строка скачет через n пикселей

scrollDelay - скорость перерисовки строки
scrollDelay= t - скорость перерисовки t милисекунд

TrueSpeed - по умолчанию"false"

BGCOLOR - цвет поверхности бегущей строки
События:

onStart срабатывает, когда должна начаться прокрутка

onFinish срабатывает, когда прокрутка закончилась

onBounce срабатывает, когда бегущяя строка достигла границы и меняет направление
допускается, когда значение behavior установлено на "alternate"

onMouseOver срабатывает при наведении курсора на прокрутку

onMouseOut срабатывает, когда курсор убирается с прокрутки

onClick срабатывает при нажатии на прокрутку
вид кода

<MARQUEE BEHAVIOR="alternate"> 
 <IMG SRC="001.PNG" BEHAVIOR=ALTERNATE  
 HEIGHT=227 WIDTH=213 ALT="Idocs Guide to HTML"></MARQUEE>

Esty
Ушедшая во Тьму
Сообщение N: 319 версия фотошопа: CS2 Откуда: Чуждая, ПЫтер Фото:

Отправлено: 15.01.08 01:31. Заголовок: Строчки и кусочки &#..

Строчки и кусочки
<BR>...</BR>
Переход на новую строку не прерывая абзаца.
Атрибуты <BR>:

clear="all|left|right|none"

style="Определение встроенного стиля"

class="Стилевой класс"
<CENTER>...</CENTER>
Используется для центрирования блока текста.
Атрибуты <CENTER> в IE:

accesskey="Клавиша-ускоритель"
class="Стилевой класс"
contenteditable="inherit|true|false"
dir="ltr|rtl"
DISABLED
HIDEFOCUS
id="Имя"
lang="Код языка"
language="JScript|javascript|vbs|vbscript|XML|Код языка скрипта"
style="Определение встроенного стиля"
tabindex="Порядковый номер в последовательности"
title="Текст подсказки"
<LEFT>...</LEFT>, <RIGHT>...</RIGHT>
аналогично <CENTER>, но пользовать не советую- не все браузеры адекватно эти тэги понимают!
<HR>...</HR>
Описывает горизантальную линию.

align="left|center|right|justify";

size="Высота в пикселах"

width="Ширина" (указывает сколько % от ширины блока займёт линия, например 50% значит линия будет на 1\2 ширины блока(страницы))
<P>...</P>
Описывает текстовой абзац.

Атрибуты <P>:

align="left|center|right|justify";

class="Стилевой класс"

id="Имя"

lang="Код языка"

style="Определение встроенного стиля"

Успешно добрались до форм и фреймов, не знаю как вам, а мне на сегодня хватит ХТМЛ!

Esty
Ушедшая во Тьму
Сообщение N: 320 версия фотошопа: CS2 Откуда: Чуждая, ПЫтер Фото:

Отправлено: 18.01.08 16:08. Заголовок: Формы <FIELDSET&..

Формы
<FIELDSET>...</FIELDSET>
Используется для группирования элементов форм.
Пример:

<FIELDSET> 
 <LEGEND>Возраст</LEGEND> 
 <INPUT type=Radio Name="size16">До 16 
 <INPUT type=Radio Name="size16">Больше 16 
 </FIELDSET>

<FORM>...</FORM>
Открытие формы.
Атрибуты FORM:

ACTION - обязательный атрибут - определяет местонахождение определяемых форм

METHOD - определяет место передачи формы
METHOD=POST
METHOD=GET - (по умолчанию)

ENCTYPE - определяет кодировку для передачи обработчику по умолчанию
ENCTYPE=application/x-www-form-urlencoded

<INPUT>...</INPUT>
Рисует кнопку или окно ввода.
Синтаксис:

<INPUT TYPE="тип кнопки" VALUE="надпись" NAME=" имя переменной">

тип кнопки=SUBMIT - рисует кнопку с надписью "надпись" - обработчик onclick

тип кнопки=RADIO - рисует круглую кнопку - обработчик onclick
параметр CHECKED - обозначает, что кнопка помечена
параметр VALUE - определяет имя, присваиваемое переменной

тип кнопки=CHECKBOX - рисует квадрат, в котором можно сделать пометку - обработчик onclick
параметр CHECKED - обозначает, что кнопка помечена
параметр VALUE - определяет имя, присваиваемое переменной

тип кнопки=BUTTON - рисует кнопку с надписью надпись - обработчик onclick

тип=HIDDEN - определяет скрытый элемент данных
параметр NAME - определяет переменную
параметр VALUE - определяет имя, присваиваемое переменной

тип кнопки=TEXT - ввод текста в окно
параметр VALUE - текст по умолчанию
параметр SIZE - ширина окна в символах

тип кнопки=PASSWORD - окно для ввода пароля
параметр VALUE - пароль по умолчанию
параметр SIZE - ширина окна в символах
параметр MAXLENGTH - допустимая длина пароля

тип кнопки=NUM - ввод числа в окно
параметр VALUE - число по умолчанию

тип кнопки=RESET - сброс данных формы

<SELECT>...</SELECT>Выбор значения из всех предложенных.

NAME - обязательный атрибут, определяющий имя переменной, которую генерирует меню.

MULTIPLE - атрибут, указывающий на возможность выбора нескольких элементов

SIZE - высота окна в строках

<OPTION>...</OPTION>
Определяет элемент меню. Используется внутри тега <SELECT>.

VALUE - начение, которое будет передано обработчику (обязательный атрибут)

SELECTED - атрибут, указывающий на значение по умолчанию

<TEXTAREA>...</TEXTAREA>
Выводит область ввода текста.
параметры соотвественно высота, ширина, цвет поля и текст указываются в CSS

Esty
Ушедшая во Тьму
Сообщение N: 321 версия фотошопа: CS2 Откуда: Чуждая, ПЫтер Фото:

Отправлено: 18.01.08 16:16. Заголовок: Фреймы <FRAMESE..

Фреймы

<FRAMESET>...</FRAMESET>
Определяет состав и размеры кадров на экране.
Атрибуты FRAMESET:

COLS
- определяет размеры и количество вертикальных окон

ROWS
- определяет размеры и количество горизонтальных окон
<FRAME>...</FRAME>
Определяет HTML файл для каждого кадра.
Теги <FRAME>...</FRAME> располагаются внутри <FRAMESET>
Атрибуты FRAME:

SRC - адрес HTML-документа

<FRAME SRC="MyDocument.html">

NAME - задает имя кадра

FRAMEBORDER - отражение рамки фрейма (0 - выключена)
Для загрузки в нужном окне HTML-документа по гиперссылке из другого окна используют атрибут

TARGET в теге <A HREF>

<A HREF="Text.html" TARGET="nameWindow">

Для упрощения можно использовать тег <BASE>

<BASE TARGET="nameWindow">

Параметр TARGET - задает кадр, выделяемый по умолчанию для отображения гипертекста

NORESIZE - включает режим, при котором пользователь не может изменить размеры данного кадра

SCROLLING - линейка прокрутки
SCROLLING=YES - создается линейка прокрутки
SCROLLING=NO - линейка прокрутки не создается

MARGINHEIGHT
MARGINWIDTH толщина граничной линии между кадрами в пикселях

<NOFRAME>...</NOFRAME>
Предназначен для передачи сообщений браузеру, не обрабатывающему кадры.
Пример использования <NOFRAMES>

<HTML> 
 <HEAD> 
 <TITLE>Пример</TITLE> 
 </HEAD> 
 <FRAMESET COL="25,*"> 
 <FRAME SRC="LeftFile.html"> 
 <FRAME SRC="RightFile.html"> 
 </FRAMESET> 
 <NOFRAME> 
 <BODY> 
 Ваш браузер не может обрабатывать кадры!!! 
 </BODY> 
 </NOFRAME> 
 </HTML>

<IFRAME>...</IFRAME>
Создание вложенного окна.

Атрибуты IFRAME:

frameBorder -
height - высота окна
width - ширина окна
marginHeight - верхний и нижний отступ документа в окне
marginWidth - левый и правый отступ документа в окне

SCROLLING - прокрутка
scrolling=yes - прокрутка разрешена
scrolling=no - прокрутка запрещена

SRC - описание вставляемого документа

PS: вставку флеш, звука, проигрывателя в документ я расписывать тут не буду- сами почитаете, ибо справочников по ХТМЛ в сети множество!

Форум » » ХТМЛ краткий курс поумнения » тема закрыта

Тему читают:

- участник сейчас на форуме

- участник вне форума

Все даты в формате GMT 3 час. Хитов сегодня: 0
Права: смайлы да, картинки да, шрифты нет, голосования нет
аватары да, автозамена ссылок вкл, премодерация вкл, правка нет

Создай свой форум на сервисе Borda.ru
Текстовая версия