Сделай Сам Свою Работу на 5

Теги физического форматирования





 

Ожидаемый эффект Пример кода
Перевод строки Здесь <br> строка будет разорвана
Жирный текст <b>Жирный текст</b>
Курсив <i>Курсив</i>
Подчёркнутый текст <u>Подчёркнутый</u>
Моноширинный шрифт <tt>Моноширинный шрифт</tt>
Увеличенный шрифт <big>Увеличенный шрифт</big>
Уменьшенный шрифт <small>Уменьшенный шрифт</small>
Подстрочный индекс <sub>Подстрочный индекс</sub>
Надстрочный индекс <sup>Надстрочный индкс</sup>
Контейнер. Используется в тех случаях, когда надо отменить действие какого-то другого тега. Тексту, отмеченному этим тэгом, могут быть заданы другие параметры. <span>Какой-то особый текст</span>
Указание параметров шрифта. Могут задаваться следующие параметры: face, size и color. Вместо использования тега FONT рекомендуется использовать указание класса для данного элемента интерфейса, а уже в описании самого класса указывать параметры шрифта. <font face="Verdana", "Arial", "Helvetica" color="cccc66" size="+1"> Текст </font>
Абзац (атрибут align может принимать значения left, right, center, justify) <p align="left">Текст</p>
Заголовки разного размера: <H1>, <H2>, <H3>, <H4>, <H5>, <H6>. <H1>Самый большой заголовок</H1> <H6>Самый маленький заголовок</H6>
Вывод текста с исходным форматированием <pre>Этот текст будет отображён в том виде, в каком он написан (со всеми переносами строк и т.д.)</pre>
Отделение фрагмента текста для задания ему неких особых параметров <div style="color: green">это зелёный текст</div>
Ссылка на другой документ <a href="new_document.html" target="_new">Это ссылочка</a>
Ссылка на e-mail <a href="mailto:vasya@mail.ru"> vasya@mail.ru</a> Или: <a href="mailto:vasya@mail.ru?subject=Привет&Body=Тут текст письма">
Ссылки внутри страницы Для пометки места, куда надо перейти, используется тег: <a name="chapter5"> Ссылка выглядит так: <a href="#chapter5">Глава 5</a>
Нумерованный список (параметр start указывает, с какого числа начинать нумерацию документов, параметр type,задаёт вид нумерации: A – прописные латинские буквы; a – строчные латинские буквы; I – большие римские буквы; i – маленькие римские буквы; 1 – арабские цифры). <ol start="5" type="A"> <li>Элемент 5</li> <li>Элемент 6</li> <li>Элемент 7</li> </ol>
Маркированный список (пераметр type може принимать значения disc, circle, square)   <ul type="circle"> <li>Элемент</li> <li>Элемент</li> <li>Элемент</li> </ul>
Словарный список <dl> <dt>Delphi</dt> <dd>Хороший язык программирование </dd> <dt>C++</dt> <dd>Мерзкое убожество</dd> </dl>
SRC – обязательный атрибут. Указывает адрес (URL) файла с изображением. HEIGHT и WIDTH – определяют ширину и высоту изображения соответственно. Если указанные значения не совпадают с реальным размером изображения, изображение масштабируется (порой с заметной потерей качества). HSPACE и VSPACE – определяют отступ картинки (в пикселах) по горизонтали и вертикали от других объектов документа. ALIGN – указывает способ выравнивания изображения в документе. Может принимать следующие значения: · left – выравнивает изображение по левому краю документа. Прилегающий текст обтекает изображение справа. · right – выравнивает изображение по правому краю документа. Прилегающий текст обтекает изображение слева. · top и texttop – выравнивают верхнюю кромку изображения с верхней линией текущей текстовой строки. · middle – выравнивает базовую линию текущей текстовой строки с центром изображения. · absmiddle – выравнивает центр текущей текстовой строки с центром изображения. · bottom и baseline – выравнивает нижнюю кромку изображения с базовой линией текущей текстовой строки. · absbottom – выравнивает нижнюю кромку изображения с нижней кромкой текущей текстовой строки. NAME – определяет имя изображения, уникальное для данного документа. Вы можете указать любое имя без пробелов с использованием латинских символов и цифр. Имя необходимо, если вы планируете осуществлять доступ к изображению, например, из JavaScript-сценариев. ALT – определяет текст, отображаемый браузером на месте изображения, если браузер не может найти файл с изображением или включен в текстовый режим. В качестве значения задается текст с описанием изображения. BORDER – определяет ширину рамки вокруг изображения в пикселах. Рамка возникает, только если изображение является гипертекстовой ссылкой. В таких случаях значение BORDER обычно указывают равным нулю. LOWSRC – указывает адрес (URL) файла с альтернативным изображением более низкого качества (и, соответственно, меньшего объема), чем изображение, указанное в атрибуте SRC. Браузеры Netscape, поддерживающие данный атрибут, сначала загрузят картинку из LOWSRC, a затем заменят ее картинкой из SRC. USEMAP – применяет к изображению навигационную карту (image map), заданную элементом MAP. В качестве значения задается имя карты с предшествующей ему решеткой. ISMAP – определяет изображение как навигационную карту (image map), обрабатываемую сервером. Имеет смысл использовать только тогда, когда изображение является гиперссылкой. После клика мышкой на изображении серверу отправляются x,y-координаты нажатия. В зависимости от полученных координат, сервер (при наличии на нем соответствующего программного обеспечения) может показать вам тот или иной документ. Данный атрибут является флагом и не требует присвоения значения. <img src="mypic.jpg" align="top" alt="Это моя картинка">

 







Таблицы

 

Ожидаемый эффект Пример кода
Создание таблицы. Параметры тега TABLE: ALIGN – определяет способ горизонтального выравнивания таблицы. Возможные значения: left, center, right. Значение по умолчанию – left. VALIGN – должен определять способ вертикального выравнивания таблицы. Возможные значения: top, bottom, middle. BORDER – определяет ширину внешней рамки таблицы (в пикселах). При BORDER="0" или при отсутствии этого атрибута рамка отображаться не будет. CELLPADDING – определяет расстояние (в пикселах) между рамкой каждой ячейки таблицы и содержащимся в ней материалом. CELLSPACING – определяет расстояние (в пикселах) между границами соседних ячеек. WIDTH – определяет ширину таблицы. Ширина задается либо в пикселах, либо в процентном отношении к ширине окна браузера. По умолчанию этот атрибут определяется автоматически в зависимости от объема содержащегося в таблице материала. HEIGHT – определяет высоту таблицы. Высота задается либо в пикселах, либо в процентном отношении к высоте окна браузера. По умолчанию этот атрибут определяется автоматически в зависимости от объема содержащегося в таблице материала. BGCOLOR – определяет цвет фона ячеек таблицы. Задается либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов. BACKGROUND – позволяет заполнить фон таблицы рисунком. В качестве значения необходимо указать URL рисунка. bordercolorlight – цвет верхней и левой частей рамок; bordercolordark – цвет правой и нижней частей рамок. Параметры frame и rules отвечают за отображение рамок вокруг и внутри таблицы. Frame: box или border – рамка со всех четырех сторон; above – рамка только сверху; below – рамка только снизу; hsides – снизу и сверху; vsides – справа и слева; lhs – только слева; rhs – только справа; void – без рамок (у ячек рамки будут); Rules: all – все рамки; groups – только линии, разделяющие группы; rows – только линии разделяющие строки; cols – только линии разделяющие столбцы; none – без рамок. Данные внутри ячейки (<TD>) можно выравнивать так: align – аналогично параметру тега TABLE. valign – выравнивание по вертикали: top – по верхнему краю; bottom – по нижнему краю; middle – по середине (установлено по умолчанию); baseline – по базовой линии. Для объединения нескольких строк или столбцов в одну/один, следует использовать параметры rowspan и colspan соответственно. Их значения показывают, сколько строк/столбцов надо присоединить к текущему. <table border="1"> <tr> <td>Строка 1, Колонка 1</td> <td>Строка 1, Колонка 2</td> <td>Строка 1, Колонка 3</td> </tr> <tr> <td> Строка 2, Колонка 1</td> <td> Строка 2, Колонка 2</td> <td> Строка 2, Колонка 3</td> </tr> </table>
Таблицы могут быть вложенными <table border="1"> <tr> <td>Строка 1, Колонка 1</td> <td>Строка 1, Колонка 2</td> <td>Строка 1, Колонка 3</td> </tr> <tr> <td> Строка 2, Колонка 1</td> <td> Строка 2, Колонка 2</td> <td> <table> <tr> <td> Ячейка вложенной таблицы</td> </tr> </table> </td> </tr> </table>

 

 

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

 

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

 

Имя Код Вид Описание
&quot; &#34; " двойная кавычка
&amp; &#38; & амперсанд
&lt; &#60; < знак 'меньше'
&gt; &#62; > знак 'больше'
&nbsp; &#160;   неразрывный пробел
&iexcl; &#161; ¡ перевернутый восклицательный знак
&brvbar; &#166; ¦ разорванная вертикальная черта
&sect; &#167; § параграф
&copy; &#169; © знак copyright
&laquo; &#171; « левая двойная угловая скобка
&raquo; &#187; » правая двойная угловая скобка
&frac14; &#188; ¼ одна четвертая
&frac12; &#189; ½ одна вторая
&frac34; &#190; ¾ три четвертых
&uarr; &#8593; стрелка вверх
&rarr; &#8594; стрелка вправо
&darr; &#8595; стрелка вниз
&harr; &#8596; стрелка влево-вправо
  &#8597; стрелка вверх-вниз

 

 

Формы HTML

 

Формы HTML используются для отправки пользовательской информации на сервер. При обработке данных из форм с помощью PHP следует использовать специальные массивы $_GET и $_POST, в которые PHP размещает полученные данные.

Так, например, если в форме вы использовали поле ввода

 

<input type="text" name="my_text" />

 

то для получения информации используйте код (например):

 

echo $_POST['my_text']

 

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

 

Тег <FORM> используется для обозначения документа как формы. Данный элемент определяет границы использования других элементов, размещаемых в форме. Внутри пары <FORM> и </FORM> размещается последовательность элементов ввода информации. Атрибуты тега <FORM> :

· method – определяет, как передавать данные из формы (get – данные добавляются в URL вызываемого документа; post – данные передаются через специальные заголовки и не видны пользователю);

· action – указывает на URL документа, ответственного за обработку данных. Часто, этим документом является та же страница, в которой размещена форма. Тогда в PHP удобно использовать следующий код:

echo "<from ation=\"".$PHP_SELF."\" …>";

Константа $PHP_SELF содержит URL документа, в котором она используется.

· enctype – определяет, каким образом данные из формы будут закодированы для передачи обработчику; если значение атрибута не установлено, по умолчанию оно предполагается =application/x-www-form-urlencoded.

· name - определяет имя формы, уникальное для данного документа. Используется, если в документе присутствует несколько форм.

· target - определяет имя окна, в которое возвращается результат обработки отправленной формы. Возможные значения : _self, _parent, _top, _blank или явно указанное имя окна.

 

Элемент <INPUT> используется для определения области внутри формы, где собираются данные. Данный элемент представляет собой поле для ввода информации пользователем. В этом случае требуется наличие атрибута name для определения наименования переменной поля.

Можно использовать следующие атрибуты:

· NAME – определяет имя, используемое при передаче содержания данной формы на сервер. Этот атрибут необходим для большинства типов (атрибут TYPE – cм. ниже) элемента INPUT и обычно используется для идентификации поля или для группы полей, связанных логически.

· TYPE – определяет тип поля для ввода данных. По умолчанию – это "text". Возможные значения:

- text – создает поле ввода под одну строку текста. Как правило используется совместно с атрибутами SIZE и MAXLENGTH.

- textarea – создает поле ввода для текста в несколько строк. Но для этих целей лучше использовать элемент TEXTAREA

- file – дает возможность пользователю приобщить файл к текущей форме. Возможно использование совместно с атрибутом ACCEPT.

- password – создает поле ввода под одну строку, однако текст, вводимый пользователем, отображается в виде значков "*", скрывая тем самым его содержание от любопытных глаз.

- checkbox – создает поле ввода для атрибутов типа Boolean ("да"/"нет") или для атрибутов, которые могут одновременно принимать несколько значений. Эти атрибуты представляют собой несколько полей checkbox, которые могут иметь одинаковые имена. Каждое выбранное поле chackbox создает отдельную пару name/value в информации, посылаемой на сервер, даже если результатом будут дублирующиеся имена. Поле этого типа обязательно должно иметь атрибуты NAME и VALUE, а также необязательный атрибут CHECKED, который указывает на то, что поле активизировано.

- radio – создает поле ввода для атрибутов, которые принимают одно значение из нескольких возможных. Все кнопки (radio buttons) в группе должны иметь одинаковые имена, но только выбранная кнопка в группе создает пару name/value, которая будет послана на сервер. Как и для полей checkbox, атрибут CHECKED необязателен; он может быть использован для определения выделенной кнопки в группе кнопок (radio button).

- submit – создает кнопку, при нажатии которой заполненная форма посылается на сервер. Атрибут VALUE в данном случае изменяет надпись на кнопке, содержание которой, заданное по умолчанию, зависит от браузера. Если атрибут NAME указан, то при нажатии данной кнопки к информации, посылаемой на сервер, добавляется пара name/value, указанная для для атрибута SUBMIT, в противном случае пара не добавляется.

- image – создает графическую кнопку-картинку, инициализирующую передачу данных на сервер. Местонахождение графического изображения можно задать с помощью атрибута SRC. При передаче данных серверу сообщаются координаты x и y той точки на изображении, где был произведен щелчок клавишей мыши. Координаты измеряются из верхнего левого угла изображения. При этом информация о поле типа image записывается в виде двух пар значений name/value. Значение name получается посредством добавления к названию соответствующего поля суффиксов ".x" (абсциссы), и ".y" (ординаты).

- reset – создает кнопку, сбрасывающую значения полей формы к их первоначальным значениям. При нажатии кнопки данные на сервер не отправляются. Надпись на кнопке может быть изменена с помощью атрибута VALUE. По умолчанию надпись на кнопке зависит от версии браузера.

- hidden – поля этого типа не отображаются на экране монитора, что позволяет разместить "секретную" информацию в рамках формы. Содержание этого поля посылается на сервер в виде name/value вместе с остальной информацией формы. Этот тип полей удобно использовать для передачи данных от скрипта скрипту незаметно для пользователя.

- button – позволяет создать пользовательскую кнопку в HTML документе, что, при умелом использовании JavaScript, добавляет форме функциональность. Атрибут NAME позволяет задать имя данной кнопке, которое может быть использовано для какой-либо функции в скрипте. Атрибут VALUE позволяет задать текст, который будет отображен на кнопке в документе.

· VALUE – задает текстовый заголовок для полей любого типа, в том числе и кнопок. Для таких полей как checkbox или radio, будет возвращено значение, заданное в атрибуте VALUE.

· CHECKED – указывает, что поля типов checkbox и/или radio (см. выше атрибут TYPE) активизированы.

· SIZE – определяет размер поля в символах. Например, чтобы определить поле с видимой шириной в 24 символа, надо указать SIZE="24".

· MAXLENGTH – определяет максимальное количество символов, которые можно ввести в текстовом поле. Оно может быть больше, чем количество символов, указанных в атрибуте SIZE. По умолчанию количество символов не ограничено.

· SRC – задает URL-адрес картинки, используемой при создании графической кнопки. Используется совместно с атрибутом TYPE="image".

· ALIGN – определяет способ вертикального выравнивания для изображений. Используется совместно с атрибутом TYPE="image". Полностью аналогичен атрибуту ALIGN элемента IMG. По умолчанию имеет значение bottom.

· ACCEPT – конкретизирует тип файла. Используется только совместно с параметром TYPE="file". Значение задается в виде MIME-типа.

 

Пример 1.6.1 – простая форма для ввода:

 

<form action="index.php" method="post">

Улица: <input type="text" name="street" value="" />

Город: <input type="text" name="city" size="20" value="Minsk" />

</form>

 

Атрибут CHECKBOX

 

При создании форм часто бывает необходимо получить ответ пользователя на вопрос типа (Да/Нет). Например, нужно выбрать из списка несколько значений. Для создания независимых кнопок в формах можно использовать атрибут checkbox.

Вместе с атрибутом checkbox должны использоваться следующие атрибуты:

· checked – инициализировать данный флаг, как отмеченный;

· value – значение поля ввода;

 

Примечание: иногда возникает необходимость передать для обработки очень большое количество checkbox'ов. Тогда можно использовать следующий код (пример 1.6.2):

 

for ($i=$start_condition; $i<$end_condition; $i++)

{

echo "<input type=\"checkbox\" name=\"selected_lnk[]\"

value=\"".$i."\" id=\"checkbox_lnk_".$i."\" />";

}

 

В таком случае PHP сформирует массив, элементами которого будут значения value этих checkbox'ов. Получить их можно таким кодом (пример 1.6.3):

 

for ($i=$start_condition; $i<$end_condition; $i++)

{

echo selected_lnk[$i];

}

Атрибут IMAGE

 

В зависимости от содержимого формы может случиться так, что пользователю потребуется щелкнуть мышью на изображении, чтобы завершить работу с формой. Для организации этого используется атрибут image.

После щелчка пользователя по изображению браузер сохраняет координаты соответствующей точки экрана и принимает всю форму.

Вместе с атрибутом image должны использоваться следующие атрибуты:

· align – необязательный атрибут, указывает на положение изображения на экране;

· src – URL файла (источника изображения);

 

Пример 1.6.4:

 

Выберите точку на изображении:

<INPUT TYPE= "image" NAME="point" SRC="globe.gif" />

 

 

Атрибут PASSWORD

 

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

 

Атрибут RADIO

 

Данный атрибут используется для организации выбора одного единственного варианта их нескольких возможных.

Вместе с атрибутом radio должны использоваться следующие атрибуты:

· checked – инициализировать данный флаг, как отмеченный;

· value – значение поля ввода

 

Пример 1.6.5 (обратите внимание на то, что name у всех radio имеет одно и то же значение; переданная на обработку переменная принимает значение value выбранного radio):

 

<form>

<input type="radio" name="car" value="slav" /> Mersedes

<input type="radio" name="car" value="obol" /> BMW

<input type="radio" name="car" value="chern" /> Audi

</form>

 

Атрибут RESET

 

Данный атрибут используется для создания кнопки 'Reset'. При нажатии на эту кнопку форма восстанавливает первоначальные значения полей всех элементов <INPUT>.

 

Атрибут SELECT

 

Для организации списков с прокруткой и выпадающим меню можно использовать атрибут <SELECT>. Для определения списка пунктов используются элементы <OPTION> внутри <SELECT>.

Вместе с атрибутом SELECT можно использовать следующие атрибуты:

· multiple – позволяет выбрать более чем одно наименование;

· size – определяет число пунктов, видимых для пользователя;

· size = 1 – браузер выводит список на экран в виде выпадающего меню (видно одно наименование);

· size > 1 – браузер представляет на экране обычный список (число – количество видимых наименований);

 

C элементом OPTION можно использовать следующие атрибуты:

· selected – для первоначального выбора значения элемента по умолчанию;

· value – значение, возвращаемое формой после выбора пользователем данного пункта. По умолчанию значение поля равно элементу <OPTION>;

 

Когда пользователь заполняет форму, атрибут name элемента <SELECT> состыковывается с атрибутом VALUE элемента для формирования наименования, выбранного пользователем.

 

Пример 1.6.6:

 

<select name="user_selection">

<option value="1" selected>Выбор-1</option>

<option value="2">Выбор-2</option>

<option value="3">Выбор-3</option>

<option value="4">Выбор-4</option>

</select>

 

Атрибут SUBMIT

 

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

Вместе с атрибутом submit можно использовать следующие атрибуты:

· value – значение переменной поля;

 

Атрибут TEXTAREA

 

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

Вместе с атрибутом TEXTAREA можно использовать следующие атрибуты:

· cols – число колонок (символов) в текстовой области;

· rows – число видимых строк в текстовой области;

 

Пример 1.6.7:

 

<textarea name="adress" cols="60" rows="5">

г. Минск, ул. Гикало 9

</textarea>

 

 








Не нашли, что искали? Воспользуйтесь поиском по сайту:



©2015 - 2024 stydopedia.ru Все материалы защищены законодательством РФ.