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

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

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

Esty: Учебник по ХТМЛ ручки, ножки, голова... <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: divы divные и CSS <DIV>...</DIV>Определяет отдельный элемент страницы: простой текстовой абзац или более сложный фрагмент с HTML-форматированием. Его содержимое может быть сколь угодно сложно. Зачастую используется для создания слоев и применения стилей. Атрибуты <DIV> : id="Имя" - название слоя style="Определение встроенного стиля" class="Стилевой класс" align="left|center|right|justify"; делаем следующий трюк CODE [pre]<html> <head> <title>test</title> <style type="text/css">  </style> </head> <body> <div class="all"> <div class="b"> </div> <div class="a"> </div> <div class="c"> </div> </div> </body> </html> [/pre] теперь разбираем трюк Блочная модель Каждый элемент располагается в блоке, состоящем из содержимого этого элемента, рамки (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: таблицы и границы Здесь надо вспомнить золотое правило: тэг, который мы открыли первым - закрываем последним, второй – предпоследним и т.д. собственно <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: про много букофффф, т.е текст и его стили <B>жирный текст</B> Атрибуты (одинаковые для следующих элементов) class="Стилевой класс" style="Определение встроенного стиля" title="Текст подсказки" <BIG>бАААльшой текст</BIG> <BLOCKQUOTE>...</BLOCKQUOTE> Форматирует текст как цитату. Текст выводится на экран с увеличенным левым полем. <CODE>...</CODE> [pre]Рекомендуется использовать для фрагментов исходного текста, помещения на страницы примеров и отображают моноширным шрифтом.[/pre] <EM> Выделяет текст терминов. "курсив" </EM> <FONT>...</FONT>Управление параметрами текста. Атрибуты <FONT>: color="Цвет" face="Имя шрифта" size="Высота в пикселах" class="Стилевой класс" style="Определение встроенного стиля" <I> курсив </I> <PRE>...</PRE> [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"> Пример: [pre]<HEAD> . . . <link rel="stylesheet" type="text/css" href="MyStyle.css"> . . . </HEAD>[/pre] ну что полегчало? А осталась ещё графика, формы, кнопки, мультимедиа всякая...

Esty: графика и прочие красивости <IMG>...</IMG> [pre]<IMG SRC="имя файла">[/pre] рисунок- ссылка [pre] <a href="http://адрес сайта" target="blank"> (открытие ссылки в новом окне) <img src="http://адрес+имя файла" alt="ваш текст" border="0px"></a>[/pre] Параметры: 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 - координаты области Пример: [pre]<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> [/pre] Определение рисунка как меню производится в теге <IMG> при помощи атрибута USEMAP: [pre]<IMG SRC="pic.gif" border=0 USEMAP=#menu>[/pre]

Esty: не люблю я бегущие строки, но..... некоторые находят их привлекательными и полезными. <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 срабатывает при нажатии на прокрутку вид кода [pre]<MARQUEE BEHAVIOR="alternate"> <IMG SRC="001.PNG" BEHAVIOR=ALTERNATE HEIGHT=227 WIDTH=213 ALT="Idocs Guide to HTML"></MARQUEE> [/pre]

Esty: Строчки и кусочки <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: Формы <FIELDSET>...</FIELDSET> Используется для группирования элементов форм. Пример: [pre]<FIELDSET> <LEGEND>Возраст</LEGEND> <INPUT type=Radio Name="size16">До 16 <INPUT type=Radio Name="size16">Больше 16 </FIELDSET>[/pre] <FORM>...</FORM> Открытие формы. Атрибуты FORM: ACTION - обязательный атрибут - определяет местонахождение определяемых форм METHOD - определяет место передачи формы METHOD=POST METHOD=GET - (по умолчанию) ENCTYPE - определяет кодировку для передачи обработчику по умолчанию ENCTYPE=application/x-www-form-urlencoded <INPUT>...</INPUT> Рисует кнопку или окно ввода. Синтаксис: [pre]<INPUT TYPE="тип кнопки" VALUE="надпись" NAME=" имя переменной">[/pre] тип кнопки=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: Фреймы <FRAMESET>...</FRAMESET> Определяет состав и размеры кадров на экране. Атрибуты FRAMESET: COLS - определяет размеры и количество вертикальных окон ROWS - определяет размеры и количество горизонтальных окон <FRAME>...</FRAME> Определяет HTML файл для каждого кадра. Теги <FRAME>...</FRAME> располагаются внутри <FRAMESET> Атрибуты FRAME: SRC - адрес HTML-документа [pre]<FRAME SRC="MyDocument.html">[/pre] NAME - задает имя кадра FRAMEBORDER - отражение рамки фрейма (0 - выключена) Для загрузки в нужном окне HTML-документа по гиперссылке из другого окна используют атрибут TARGET в теге <A HREF> [pre]<A HREF="Text.html" TARGET="nameWindow">[/pre] Для упрощения можно использовать тег <BASE> [pre]<BASE TARGET="nameWindow">[/pre] Параметр TARGET - задает кадр, выделяемый по умолчанию для отображения гипертекста NORESIZE - включает режим, при котором пользователь не может изменить размеры данного кадра SCROLLING - линейка прокрутки SCROLLING=YES - создается линейка прокрутки SCROLLING=NO - линейка прокрутки не создается MARGINHEIGHT MARGINWIDTH толщина граничной линии между кадрами в пикселях <NOFRAME>...</NOFRAME> Предназначен для передачи сообщений браузеру, не обрабатывающему кадры. Пример использования <NOFRAMES> [pre]<HTML> <HEAD> <TITLE>Пример</TITLE> </HEAD> <FRAMESET COL="25,*"> <FRAME SRC="LeftFile.html"> <FRAME SRC="RightFile.html"> </FRAMESET> <NOFRAME> <BODY> Ваш браузер не может обрабатывать кадры!!! </BODY> </NOFRAME> </HTML>[/pre] <IFRAME>...</IFRAME> Создание вложенного окна. Атрибуты IFRAME: frameBorder - height - высота окна width - ширина окна marginHeight - верхний и нижний отступ документа в окне marginWidth - левый и правый отступ документа в окне SCROLLING - прокрутка scrolling=yes - прокрутка разрешена scrolling=no - прокрутка запрещена SRC - описание вставляемого документа PS: вставку флеш, звука, проигрывателя в документ я расписывать тут не буду- сами почитаете, ибо справочников по ХТМЛ в сети множество!

полная версия страницы