Это цитата сообщения Н_НИНА Оригинальное сообщение
Текст с прокруткой
 [390x61]
|
Это цитата сообщения Surge_Blavat Оригинальное сообщение
Простейшая таблица для записей и картинок
Таким образом я выставил свои кнопки
Это цитата сообщения yaqut Оригинальное сообщение
Таблицы... часть 2
И снова таблицы... часть 2
|
Это цитата сообщения FlashStudio Оригинальное сообщение
Ещё немного HTML-тэгов
Вы уже сделали несколько страниц ? Если нет, вот пример:
<html>
<head>
<title>My web-сайт</title>
</head>
<body>
<h1>A Heading</h1>
<p>text, text text, text</p>
<h2>Subhead</h2>
<p>text, text text, text</p>
</body>
</html>
Теперь что?
Теперь выучим семь новых тэгов.
Таким же образом, как вы делали текст жирным шрифтом с помощью тэга <b>, вы можете придать ему характер курсива/italic тэгом <i>. И конечно, "i" это сокращение от "italic".
Пример 1:
<i>Это должно быть выведено курсивом.</i>будет выглядеть в браузере:
Это должно быть выведено курсивом.
Аналогично можно уменьшить размер шрифта тэгом <small>:
Пример 2:
<small>Это будет выведено уменьшенным шрифтом.</small>
будет выглядеть в браузере:
Могу ли использовать несколько тэгов одновременно?
Да, исключая перекрывание тэгов. Это проще увидеть на примере:
Пример 3:
Если вы хотите вывести текст bold и italic, это нужно сделать так:
<b><i>Текст bold и italic</i></b>
а НЕ так :
<b><i>Текст bold и italic</b></i>
Разница в том, что, в первом случае, мы закрыли первый тэг в последнюю очередь. Так мы избегаем конфликтов в браузере.
Ещё тэгов!
Как сказано в Уроке 4, есть тэги, которые являются одновременно открывающими и закрывающими. Эти тэги содержат команды, которые не связаны с конкретными буквами, являются изолированными командами. Пример - тэг <br />, который создаёт перевод строки:
Пример 4:
Некоторый текст<br /> и ещё текст, уже на новой строке
будет выглядеть в браузере:
Некоторый текст и ещё текст, уже на новой строкеЗаметьте, что этот тэг записан как гибрид открывающего и закрывающего тэгов с пробелом и слэшем: <br />. В принципе, его можно записывать <br></br>, но зачем усложнять?
Другой такой тэг - <hr /> - рисует горизонтальную линию ("hr" от "horizontal rule"):
Пример 5:
<hr />
будет выглядеть в браузере:
Примеры тэгов, требующих наличия и закрывающего тэга: <ul>, <ol> и <li>. Эти тэги используются для вывода списков.
<ul> - сокращение от "unordered list/неупорядоченный список" - вставляет значок кнопки для каждого элемента списка. <ol> - сокращение от "ordered list/упорядоченный список" - нумерует каждый элемент списка. Для создания элемента списка используйте тэг <li> ("list item/элемент списка"). Непонятно? См. примеры:
Пример 7:
<ul>
<li>Элемент списка</li>
<li>Другой Это цитата сообщения FlashStudio Оригинальное сообщение
Создайте свой первый сайт
Создайте свой первый сайт
После полученных в предыдущем уроке знаний вы уже через несколько минут создадите свой первый web-сайт.
Как?
В Уроке 1 мы узнали, что необходимо для создания web-сайта: браузер и Notepad (или аналогичная программа - текстовый редактор). Поскольку вы читаете этот текст, то ваш браузер уже открыт. Вам нужно открыть лишь дополнительное окно браузера (открыть браузер ещё раз), и вы сможете читать этот учебник и одновременно видеть ваш новый web-сайт.
Также откройте Notepad (в Accessories в Programs - Start menu):
Теперь мы готовы!
Что я могу?
Начнём с чего-нибудь попроще. Как насчёт страницы, на которой написано: "Ура! Это моя первая web-страница." Читайте дальше, и вы узнаете, как это легко сделать.
HTML прост и логичен. Браузер читает HTML так, как читаете его вы: сверху вниз и слева направо. Таким образом, HTML-документ начинается и заканчивается тем, чем должен начинаться и заканчиваться текст.
Во-первых необходимо сообщить браузеру, что вы будете "говорить" с ним на языке HTML. Это делается тэгом <html> (тут ничего нового). Так что, прежде чем напечатать что-либо, нужно поставить тэг "<html>" в первой строке документа Notepad.
Как вы, возможно, помните из предыдущего урока, <html> это открывающий тэг, который должен иметь и закрывающий тэг после того, как вы закончите ввод HTML. Поэтому, чтобы не забыть, поставьте закрывающий тэг "</html>" на пару строк ниже и вводите весь текст документа между <html> и </html>.
Следующее, что необходимо, это "head" (голова или "шапка"), которая содержит служебную информацию о вашем документе, и "body" (тело), содержимое самого документа. Поскольку HTML логичен, head (<head> и </head>) находятся выше body (<body> и </body>).
Ваш документ теперь должен выглядеть так:
<html>
<head>
</head>
<body>
</body>
</html>
Обратите внимание, как мы структурировали тэги по строкам (с помощью клавиши Enter) и какие сделали отступы (клавишей Tab). В принципе не важно, как вы структурируете ваш HTML-документ. Но, для облегчения чтения кода, настоятельно рекомендуем структурировать ваш HTML с помощью перевода строк и отступов, как в нашем примере.
Вот вы уже и сделали вашу первую web-страницу - первенца, который, возможно, выглядит не так, как вы предполагали, когда начинали читать этот учебник, но это уже, в некотором роде, web-сайт. Вы создали базовый шаблон для всех последующих HTML-документ.
Ну ладно, но как мне добавить содержимое в мой web-сайт?
Как вы уже видели ранее, в вашем HTML-документе есть две части: а head и body. В разделе head вы вносите информацию о странице, а body содержит информацию самой страницы.
Например, если вы хотите дать название документу, чтобы оно появлялось в верхней строке браузера, это нужно сделать в разделе "head". Тэг для названия - <title>:
<title>Моя первая web-страница</title>
Обратите внимание, что этот title не появляется на самой web-странице. Всё, что вы хотите видеть на самой странице, является содержимым/content и должно, следовательно, находиться между тэгами "body".
Итак, мы хотим, чтобы на странице выводилось "Ура! Это моя первая страница." Этот текст, который вы хотите показать, и, естественно, он должен располагаться в разделе body. Поэтому в разделе body напечатайте следующее:
<p>Ура! Это моя первая страница.</p>
Буква p в <p> это сокращение от "paragraph" и означает именно это - параграф текста.
Ваш HTML-документ должен теперь иметь такой вид:
<html>
<head>
Это цитата сообщения FlashStudio Оригинальное сообщение
Что такое HTML-тэги?
Что такое HTML-тэги?
Теперь вы готовы начать изучение HTML-тэгов.
"Тэги"?
Тэги это метки, которые вы используете для указания браузеру, как он должен показывать ваш web-сайт.
Все тэги имеют одинаковый формат: они начинаются знаком "<" и заканчиваются знаком sign ">".
Обычно имеются два тэга - открывающий: <html> и закрывающий: </html>. Различие в том, что в закрывающем имеется слэш "/".
Всё содержимое, помещённое между открывающим и закрывающим тэгами, является содержимым тэга.
Н, как говорится, из каждого правила есть исключения, и в HTML также имеются тэги, которые являются и открывающими, и закрывающими. Эти тэги не содержат текста, а являются метками, например, перенос строки выглядит так: <br />.
HTML - это тэги, и ничего кроме тэгов. Для изучения HTML нужно изучить различные тэги.
Можете вы привести какие-нибудь примеры?
Okay, тэг <b> информирует браузер, что весь текст между <b> и </b> должен быть напечатан жирным шрифтом. ("b" это сокращение для "bold".)
Пример 1:
<b>This text must be bold.</b>
будет выглядеть при просмотре в браузере:
This text must be bold.
Тэги <h1>, <h2>, <h3>, <h4>, <h5> и <h6> указывают браузеру создавать заголовки (h для "heading"), где <h1> это заголовок первого уровня - самый крупный шрифт, <h2> - заголовок второго уровня - шрифт меньшего размера, и <h6> - заголовок шестого уровня - самого низкого в этой иерархии, и самый маленький шрифт.
Пример 2:
<h1>Это заголовок</h1>
<h2>Это подзаголовок</h2>
будет выглядеть в браузере:
Это заголовок
Это подзаголовок
В каком регистре должны вводиться буквы тэгов?
Большинству браузеров безразлично, в каком регистре введены буквы тэгов. <HTML>, <html> или <HtMl> обычно даёт одинаковый результат. Однако корректным будет нижний регистр. Поэтому привыкайте печатать тэги в нижнем регистре.
Где размещать все эти тэги?
Вы печатаете ваши тэги в HTML-документе. На web-сайте имеется один или более HTML-документов. Когда вы бродите по Web, вы открываете различные HTML-документы.
Это цитата сообщения FlashStudio Оригинальное сообщение
Ссылки
В этом уроке вы научитесь создавать ссылки - переходы с одной страницы на другую.
Что необходимо для создания ссылки?
Для создания ссылки вы используете то же, что и всегда при кодировании HTML: тэг. Простой тэг с одним элементом и одним атрибутом - и вы можете перейти куда угодно. Вот пример того, как может выглядеть ссылка на HTML.net:
Пример 1:
<a href="http://www.html.net/">Это ссылка на HTML.net</a>
будет выглядеть в браузере:
Элемент a обозначает "якорь/anchor". Атрибут href это сокращение от "hypertext reference/гипертекстовая ссылка", специфицирующий место, на которое выполняется переход по данной ссылке - обычно это internet-адрес и/или имя файла.
В примере атрибут href имеет значение "http://www.html.net", которое является полным адресом HTML.net и называется URL (Uniform Resource Locator/универсальный локатор ресурса). Обратите внимание, что"http://" всегда должно входить в состав URLов. Слова "Это ссылка на HTML.net" это текст, который показывается в браузере как ссылка. Не забудьте закрыть тэг </a>.
Как насчёт ссылок между моими собственными страницами?
Если вы делаете ссылки между страницами на одном web-сайте, то не нужно указывать полный адрес (URL) документа. Например, если у вас две страницы (назовём их page1.htm и page2.htm), сохранённые в одной папке, вы можете сделать ссылку с одной страницы на другую, просто напечатав имя файла в ссылке. То есть ссылка с page1.htm на page2.htm будет выглядеть так:
Пример 2:
<a href="page2.htm">Щёлкните здесь для перехода на page 2</a>
Если page 2 помещена в подпапку "subfolder", ссылка выглядит так:
Пример 3:
<a href="subfolder/page2.htm">Щёлкните здесь для перехода на page 2</a>
В обратную сторону ссылка со страницы page 2 (в подпапке subfolder) на page 1 будет такой:
Пример 4:
<a href="../page1.htm">Ссылка на page 1</a>
Сочетание "../" указывает на папку, расположенную на один уровень выше от данной позиции файла, с которого делается ссылка. Следуя этой логике, вы можете также указать на два уровня выше "../../" или более.
Разобрались? Альтернативно вы всегда можете указать полный адрес файла (URL).
А ссылки внутри страницы?
Вы можете также создавать ссылки-переходы внутри самой страницы - например, оглавление со ссылками на главы. Всё, что вам необходимо, - использовать атрибут id и символ "#".
Используйте атрибут id для маркировки элемента, на который вы хотите сделать переход. Например:
<h1 id="heading1">heading 1</h1>
Теперь можно создать ссылку на этот элемент с помощью знака "#" в атрибуте ссылки. Знак "#" сообщает браузеру, что это переход на той же самой странице. После "#" должен следовать id тэга, на который выполняется переход. Например:
<a href="#heading1">Ссылка на heading 1</a>
Всё станет понятнее на примере:
Пример 5:
<html>
<head>
</head>
<body>
<p><a href="#heading1">Ссылка на heading 1</a></p>
<p><a href="#heading2">Ссылка на heading 2</a></p>
<h1 id="heading1">heading 1</h1>
<p>Text text text text</p>
<h1 id="heading2">heading 2</h1>
<p>Text text text text</p>
</body>
</html>
выглядит в браузере (щёлкните по ссылкам):
Это цитата сообщения FlashStudio Оригинальное сообщение
Изображения
Здóрово было бы поместить портрет актёра и музыкальной легенды David'а Hasselhoff'а прямо в центре ваше страницы?!
Это звучит немного дерзко...
Может быть, но это довольно просто сделать. Всё, что вам необходимо, как всегда, - тэг:
Пример 1:
<img src="david.jpg" alt="David" />
будет выглядеть в браузере:
Вам необходимо сообщить браузеру, что вы хотите вставить изображение/image (img), и указать его размещение (src, сокращение для "source"). У вас есть файл изображения?
Обратите внимание, что тэг img не требует наличия закрывающего тэга. Как и <br />, это команда не связана с буквенным текстом.
"david.jpg" это название файла изображения. ".jpg" - расширения файла, тип изображения. Как ".htm" указывает, что файл является HTML-документом, так и ".jpg" сообщает браузеру, что файл является изображением. Есть три типа файлов изображений, которые можно вставить на ваши страницы:
- GIF (Graphics Interchange Format)
- JPG / JPEG (Joint Photographic Experts Group)
- PNG (Portable Network Graphics)
GIF-изображения обычно лучше всего для графики и рисунков, а JPEG - для фотографий. Для этого есть две причины: первая - GIF-изображения содержат только до 256 цветов, а JPEG - до миллионов цветов, и второе - формат GIF лучше сжимает простые изображения, чем JPEG, который оптимизирован под более сложные изображения. Чем выше сжатие, тем меньше файл изображения, тем быстрее загружается ваша страница. Как вы, вероятно, знаете из собственного опыта, пользователи не любят "тяжёлые" страницы.
Традиционно форматы GIF и JPEG являются преобладающими типами, но в последнее время становится всё более популярным формат PNG (прежде всего из-за издержек формата GIF). Формат PNG по многим параметрам превосходит JPEG и GIF: миллионы цветов и эффективное сжатие.
Где мне взять файлы изображений?
Для этого вам понадобится программа редактирования файлов изображений. Такая программа совершенно необходима для создания интересных web-сайтов.
К сожалению в Windows и других операционных системах отсутствуют хорошие программы для редактирования изображений. Таким образом, вы может вложить деньги в приобретение Paint Shop Pro, PhotoShop или Macromedia Fireworks - это три лучшие программы редактирования изображений, имеющиеся в данный момент на рынке.
Однако, как мы говорили ранее, не обязательно покупать дорогие программы для работы с этим учебником. Вы можете загрузить прекрасную программу для работы с изображениями, Irfan View, которая является т. н. freeware, и, следовательно, ничего не стóит.
Либо вы можете просто содрать изображения с других сайтов, загрузив соответствующие страницы. Но, пожалуйста, будьте внимательны, чтобы не нарушить при этом авторских прав. Вот как загрузить изображения:
- Правой клавишей мыши щёлкните на изображении в Internet.
- Выберите "Save picture as..." в меню.
- Выберите место для сохранения на вашем компьютере и нажмите "Save".
Проделайте это с изображением, расположенным здесь, и сохраните его на вашем компьютере в том же месте, что и ваши HTML-документы. (Заметьте, что этот логотип сохраняется в файле формата PNG: logo.png):
Теперь вы можете вставлять это изображение в ваши страницы. Попробуйте сделать это самостоятельно.
Это всё, что нужно знать об изображениях?
Вам необходимо знать ещё две вещи.
Во-первых, вы можете легко вставлять изображения, размещённые в других папках, или даже на других web-сайтах:
Пример 2:
<img src="images/logo.png">
Пример 3:
<img src="http://www.html.net/logo.png">
Во-вторых, изображения могут быть ссылками:
Пример 4:
<a href="http://www.html.net">
<img Это цитата сообщения FlashStudio Оригинальное сообщение
Ещё о таблицах
Название "Ещё о таблицах" может звучать немного вызывающе. Если вы уже можете создавать таблицы, то уже абсолютно ничто в HTML не может смутить вас.
Что же ещё?
При создании таблиц используются два атрибута: colspan и rowspan.
Colspan - сокращение от "column span/охват столбцов". Colspan используется в тэге <td> для специфицирования того, сколько столбцов охватывает данная ячейка:
Пример 1:
<table border="1">
<tr>
<td colspan="3">Cell 1</td>
</tr>
<tr>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>
будет выглядеть в браузере:
| Cell 1 | ||
| Cell 2 | Cell 3 | Cell 4 |
Установка colspan "3", заставляет ячейку в первом ряду охватывать три столбца. Если установим colspan "2", ячейка охватит только два столбца, и понадобится вставить дополнительные ячейки в первый ряд, чтобы ячейки ровно распределились на два ряда.
Пример 2:
<table border="1">
<tr>
<td colspan="2">Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5</td>
</tr>
</table>
будет выглядеть в браузере:
| Cell 1 | Cell 2 | |
| Cell 3 | Cell 4 | Cell 5 |
А как насчёт rowspan?
Как вы уже могли догадаться, rowspan специфицирует, сколько рядов охватывает данная ячейка:
Пример 3:
<table border="1">
<tr>
<td rowspan="3">Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 4</td>
</tr>
</table>
будет выглядеть в браузере:
| Cell 1 | Cell 2 |
| Cell 3 | |
| Cell 4 |
В этом примере rowspan имеет значение "3" в ячейке Cell 1. Это указывает, что ячейка должна охватывать три ряда (свой собственный ряд плюс ещё два). Cell 1 и Cell 2 при этом остаются в одном ряду, а Cell 3 и Cell 4 образуют отдельные ряды.
Удивлены? Ладно, это не так сложно. Неплохо будет нарисовать таблицу на бумаге до начала работы в HTML.
Неудивительно? Тогда вернитесь к началу и создайте пару таблиц с использованием colspan и rowspan.
Это цитата сообщения FlashStudio Оригинальное сообщение
Публикация страниц
До сих пор только вы имели возможность наслаждаться просмотром ваших страниц. Теперь пришло время и всем остальным оценить ваши произведения.
Готов ли мир к этому?
Мир готов - скоро и вы тоже будете готовы. Для показа вашего web-сайта в Internet вы должны иметь пространство на сервере и бесплатную FTP-программу.
Если у вас есть доступ в Internet, у вас, возможно, уже есть немного места для вашего web-сайта. Ваше пространство на сервере может называться примерно так - http://home.provider.com/~usernumber. Но сначала вы должны активировать его. Прочтите об этом в документации вашего Internet-провайдера или на его справочных страницах.
Другая возможность получить некоторое пространство в Internet - настроить учётную запись e-mail (на, например, Hotmail), тогда вы сможете зарегистрировать свободное пространство в Internet. Такой сервис имеют несколько компаний, среди них - Angelfire (щёлкните "Sign Up" и выберите free membership) - регистрация займёт всего несколько минут.
Для доступа на сервер вам необходимо знать "Host Name" (Например, ftp.angelfire.com) и иметь своё username и password.
Это всё, что мне нужно?
Для доступа на сервер и выгрузки на него ваших страниц вам понадобится также программа, работающая по протоколу FTP. Возможно, у вас её ещё нет, но можно загрузить её бесплатно.
Имеется множество FTP-программ. Одна из лучших - FileZilla, абсолютно бесплатная. Можно скачать FileZilla с filezilla.sourceforge.net.
А как выгружать страницы?
Ниже мы даём описание того, как выгружать страницы на бесплатную учётную запись/account на Angelfire с помощью FileZilla. Но эта процедура применима, в большей или меньшей степени, для всех провайдеров и FTP-программ.
Откройте FTP-программу после того, как подключитесь к Internet. Вставьте "Host Name" ("ftp.angelfire.com" ниже "Address"), имя пользователя (ниже "User") и пароль (ниже "Password") и щёлкните "Connect". У вас теперь имеется доступ к этому серверу. В одной части программы вы видите содержимое вашего компьютера ("Local Site"), а в другой - содержимое сервера ("Remote Site"):
Найдите ваши HTML-документы и изображения на вашем компьютере (в "Local site") и перешлите их на сервер ("Remote site") дважды щёлкнув на них. Теперь их видит весь мир! (Например, по адресу http://www.angelfire.com/folk/htmlnet/page1.htm).
Назовите одну из страниц "index.htm" (или "index.html"), и она автоматически станет стартовой страницей. т. е., если вы введёте http://www.angelfire.com/folk/htmlnet (без указания имени файла), откроется http://www.angelfire.com/folk/htmlnet/index.htm.
Для длительной работы неплохо приобрести собственный домен (www.ваше-имя.com) и избавиться от длинного адреса, предоставляемого Internet-провайдером бесплатного сервиса.
Это цитата сообщения FlashStudio Оригинальное сообщение
Внешний вид (CSS)
Хорошо было бы придать страницам достойный их содержания вид?
Разумеется, но как?
Для этого используйте Cascading Style Sheets (CSS)/каскадные таблицы стилей. В этом уроке мы дадим краткое описание CSS. Позднее вы можете прочитать наш учебник CSS. Так что примите этот урок, так сказать, для растравки.
CSS это лучшая половина HTML. Но, в плане кодирования, их статус различается: HTML заботится об общем выводе информации (её структуре), в то время как CSS производит тонкую настройку внешнего вида (layout).
Как показано в Уроке 7, CSS может добавляться атрибутом style. Например, вы можете установить тип и размер шрифта параграфа:
Пример 1:
<p style="font-size:20px;">Это напечатано размером 20</p>
<p style="font-family:courier;">Это напечатано шрифтом Courier</p>
<p style="font-size:20px; font-family:courier">Это напечатано шрифтом Courier размером 20</p>
будет выглядеть в браузере:
Это напечатано размером 20
Это напечатано шрифтом Courier
Это напечатано шрифтом Courier размером 20
В этом примере мы использовали атрибут style для специфицирования типа шрифта (командой font-family) и размер шрифта (командой font-size). Обратите внимание, как в последнем параграфе мы одновременно установили тип и размер, разделяя параметры точкой с запятой.
Объём работы значительно возрастёт?
Одной из привлекательных особенностей CSS является возможность управлять внешним видом страниц централизованно. Вместо использования style в каждом тэге вы можете указать браузеру только один раз, как должен выглядеть текст на странице:
Пример 2:
<html> <head> <title>My first CSS page</title> <style type="text/css"> h1 {font-size: 30px; font-family: arial} h2 {font-size: 15px; font-family: courier} p {font-size: 8px; font-family: times new roman} </style> </head> <body> <h1>My first CSS page</h1> <h2>Welcome to my first CSS page</h2> <p>Here you can see how CSS works </p> </body> </html>В этом примере правила CSS вставлены в раздел head и применяются ко всей странице. Для этого используется тэг<style type="text/css">, который даёт соответствующее указание браузеру.
В этом примере заголовки на странице будут выведены шрифтом Arial размера 30px. Все подзаголовки - Courier размера 15. А весь текст в обычных параграфах будет шрифтом Times New Roman размера 8.
Можно также указывать правила CSS в отдельном документе. Тогда можно применять CSS уже ко всем страницам. Это очень важное качество, если вам понадобится изменить тип или размер шрифта для большого web-сайта с тысячами страниц. Сейчас мы не будем в это углубляться, но вы можете изучить всё подробнее в нашем учебнике CSS.
Что ещё можно сделать с помощью CSS?
CSS может намного больше, чем просто изменение типа и размера шрифта. Например, вы можете устанавливать цвет и фон. Вот
Это цитата сообщения FlashStudio Оригинальное сообщение
Формы по шагам: Элементы форм
Форма представляет собой лишь контейнер для размещения объектов, которые дублируют элементы интерфейса операционной системы: кнопки, поле со списком, переключатели, флажки и т.д. В табл. 3.1 представлены различные элементы форм.
| Название | Описание | Пример |
|---|---|---|
| Однострочное текстовое поле | Предназначено для ввода строки символов с помощью клавиатуры. | |
| Поле для пароля | Обычное текстовое поле, но отличается тем, что все символы отображаются звездочками. Предназначено для того, чтобы никто не подглядел вводимый пароль. |
|
| Многострочный текст | Область, в которой можно вводить несколько строк текста. | |
| Кнопка | Элемент формы, на который нужно нажимать. | |
| Кнопка SUBMIT | После нажатия на эту кнопку данные формы отправляются на сервер и обрабатываются программой, указанной параметром action тега FORM. | |
| Кнопка RESET | При нажатии на эту кнопку, данные формы возвращаются в первоначальное значение. | |
| Переключатели (radiobutton) | Используются для выбора только одного варианта из предложенных. | |
| Флажки (checkbox) | Используются для выбора одного и более вариантов из предложенных. | |
| Поле со списком | Предназначен для выбора одного или нескольких значений из списка. | |
| Скрытое поле | Скрытое поле не отображается на странице и прячет свое содержимое от пользователя. | |
| Поле с изображением | Аналогично по действию кнопке Submit, но представляют собой рисунок. | |
| Отправка файла |
Это цитата сообщения FlashStudio Оригинальное сообщение
Формы по шагам: Однострочное текстовое поле
Однострочное текстовое поле предназначено для ввода строки символов с помощью клавиатуры. Синтаксис создания такого поля следующий.
Параметры поля перечислены в табл. 4.1.
| Параметр | Описание |
|---|---|
| size | Ширина текстового поля, которое определяется числом символов моноширинного шрифта. Иными словами, ширина задается количеством близстоящих букв одинаковой ширины по горизонтали. |
| maxlength | Устанавливает максимальное число символов, которое может быть введено пользователем в текстовом поле. Когда это количество достигается при наборе, дальнейший ввод становится невозможным. Если этот параметр опустить, то можно вводить строку длинее самого поля. |
| name | Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать. |
| value | Начальный текст, отображаемый в поле. |
Создание текстового поля с разными параметрами показано в примере 4.1.
Пример 4.1. Текстовое поле
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Текстовое поле</title>
</head>
<body>
<form action="handler.php">
<p><b>Как ваше имя?</b></p>
<p><input type="text" maxlength="25" size="40"></p>
</form>
</body>
</html>В результате получим следующее (рис 4.1).
Рис. 4.1. Вид текстового поля в браузере
Это цитата сообщения FlashStudio Оригинальное сообщение
Формы по шагам: Поле для пароля
Поле для пароля — обычное текстовое поле, но отличается от него тем, что все символы отображаются звездочками. Предназначено для того, чтобы никто не подглядел вводимый пароль. Синтаксис создания следующий.
Параметры поля перечислены в табл. 5.1.
| Параметр | Описание |
|---|---|
| size | Ширина текстового поля, которое определяется числом звездочек моноширинного шрифта. |
| maxlength | Устанавливает максимальное число символов, которое может быть введено пользователем в текстовом поле. Когда это количество достигается при наборе, дальнейший ввод становится невозможным. Если этот параметр опустить, то можно вводить строку длинее самого поля. |
| name | Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать. |
| value | Начальный текст, который выводится в поле. Этот текст не отображается и заменяется звездочками. |
Создание поля для пароля показано в примере 5.1.
Пример 5.1. Поле для пароля
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Ввод пароля</title>
</head>
<body>
<form action="handler.php">
<p><b>Логин:</b> <input type="text" maxlength="25" size="40" name="text"></p>
<p><b>Пароль:</b> <input type="password" maxlength="15" size="40" name="pass"></p>
<p><input type="submit"></p>
</form>
</body>
</html>Результат данного примера показан на рис. 5.1.
Рис. 5.1. Отображение пароля в поле
Хотя вводимый текст и не показывается, на сервер данные этого поля передаются в открытом виде без шифрования. Поэтому использование этого поля не обеспечивает безопасности данных и их можно перехватить.
Это цитата сообщения FlashStudio Оригинальное сообщение
Формы по шагам: Многострочный текст
Этот элемент формы предназначен для создания области, в которой можно вводить несколько строк текста. В таком текстовом поле допустимо делать переносы строк, они сохраняются при отправке данных на сервер.
Синтаксис создания следующий.
текст
</textarea>
Между тегами <textarea> и </textarea> можно поместить любой текст, который будет отображаться внутри поля.
Допустимые параметры перечислены в табл. 6.1.
| Параметр | Описание |
|---|---|
| cols | Ширина поля в символах. |
| disabled | Блокирует доступ и изменение элемента. |
| name | Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать. |
| readonly | Устанавливает, что поле не может изменяться пользователем. |
| rows | Высота поля в строках текста. |
| wrap | Параметры переноса строк. |
Создание поля многострочного текста показано в примере 6.1.
Пример 6.1. Многострочный текст
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Текстовое поле</title>
</head>
<body>
<form action="handler.php">
<p><b>Введите ваш отзыв:</b></p>
<p><textarea rows="10" cols="45" name="comment"></textarea></p>
<p><input type="submit"></p>
</form>
</body>
</html>Результат данного примера показан на рис. 6.1.
Рис. 6.1. Многострочное текстовое поле
Это цитата сообщения FlashStudio Оригинальное сообщение
Формы по шагам: Кнопки
Кнопки являются одним из самых понятных и интуитивных элементов интерфейса. По их виду сразу становится понятно, что единственное действие, которое с ними можно производить — это нажимать на них. За счет этой особенности кнопки часто применяются в формах, особенно при их отправке и очистке.
Кнопку на веб-странице можно создать двумя способами — с помощью тега <INPUT> и тега <BUTTON>.
Рассмотрим вначале добавление кнопки через <INPUT> и его синтаксис.
Параметры кнопки перечислены в табл. 7.1.
| Параметр | Описание |
|---|---|
| name | Имя кнопки, предназначено для того, чтобы обработчик формы мог его идентифицировать. |
| value | Значение кнопки и одновременно надпись на ней. |
Создание кнопки с разными параметрами показано в примере 7.1.
Пример 7.1. Добавление кнопки
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Кнопка</title>
</head>
<body>
<form action="handler.php">
<p><input type="button" name="press" value=" Нажми меня нежно "></p>
</form>
</body>
</html>В результате получим следующее.
В надписи на кнопке можно ставить пробелы в любом количестве, за счет них можно регулировать ее ширину.
Второй способ создания кнопки основан на использовании тега <BUTTON>. Он по своему действию напоминает результат, получаемый с помощью тега <INPUT>. В отличие от этого тега, <BUTTON> предлагает расширенные возможности по созданию кнопок. Например, на подобной кнопке можно размещать любые элементы HTML, в том числе изображения и таблицы.Ниже показаны разные виды кнопок, полученные с помощью указанного тега.
В примере 7.2 показано создание кнопки с текстом и рисунком.
Пример 7.2. Кнопки, созданные с помощью тега <BUTTON>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Кнопка</title>
</head>
<body>
<form action="handler.php">
<p>
<button>Кнопка с текстом</button>
<button><img src="/images/umbrella.gif" width="25" height="32" alt="Зонтик"> Кнопка с рисунком</button>
</p>
</form>
</body>
</html>В данном примере показано создание обычной кнопки с
Это цитата сообщения FlashStudio Оригинальное сообщение
Формы по шагам: Поле со списком
Поле со списком, называемое еще ниспадающее меню, один из гибких и удобных элементов формы. В зависимости от настроек, в списке можно выбирать одно или несколько значений. Преимущество списка в его компактности, он может занимать всего одну строку, а чтобы просмотреть весь список нужно на него нажать. Однако это является и недостатком, ведь пользователю сразу не виден весь выбор.
Поле со списком создается следующим образом.
<select параметры>
<option параметры>Пункт 1</option>
<option>Пункт 2</option>
<option>Пункт 3</option>
</select>Тег <SELECT> позволяет создать элемент интерфейса в виде раскрывающегося списка, а также список с одним или множественным выбором. Конечный вид зависит от использования параметра size тега <SELECT>, который устанавливает высоту списка. Ширина списка определяется самым широким текстом, указанным в теге <OPTION>, а также может изменяться с помощью стилей. Каждый пункт создается с помощью тега <OPTION>, который должен быть вложен в контейнер <SELECT>.
| Список множественного выбора | Раскрывающийся список |
Параметры тега <SELECT>
Рассмотрим параметры тега <SELECT>, с помощью которых можно изменять вид и представление списка.
MULTIPLE
Наличие параметра multiple сообщает браузеру отображать содержимое элемента <SELECT> как список множественного выбора. Конечный вид списка зависит от используемого параметра size. Если он отсутствует, то высота списка равна количеству пунктов, если значение size меньше числа пунктов, то появляется вертикальная полоса прокрутки. Когда size=1 список превращается в «крутилку», как показано ниже, но выбирать с помощью нее одновременно несколько пунктов списка становится неудобно.
| Параметр size отсутствует | Параметр size равен 1 |
Для выбора нескольких значений списка применяются клавиши <Ctrl> и <Shift> совместно с курсором мыши.
В примере 10.1 показано создание списка множественного выбора.
Пример 10.1. Список множественного выбора
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Список</title>
</head>
<body>
<form action="handler.php">
<p><select Это цитата сообщения FlashStudio Оригинальное сообщение
Формы по шагам: Поле с изображением
Поле с изображением аналогично по действию кнопке SUBMIT, но представляет собой рисунок. Это расширяет возможности дизайнерских изысков по оформлению формы. Когда пользователь нажимает на рисунок, данные формы отправляются на сервер и обрабатываются программой, заданной параметром action тега <FORM>.
Изображение в форме создается следующим образом.
Параметры перечислены в табл. 12.1.
| Параметр | Описание |
|---|---|
| align | Определяет выравнивание изображения. |
| alt | Альтернативный текст для кнопки с изображением. |
| border | Толщина рамки вокруг изображения в пикселах. |
| name | Имя поля для обращения к нему из скриптов или для получения значения обработчиком формы. |
Хотя по своему назначению указанное поле похоже на кнопку SUBMIT, его параметры совпадают с параметрами тега <IMG>, который добавляет изображение на веб-страницу.
В примере 12.1 показано использование поля с изображением.
Пример 12.1. Кнопка с изображением
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Кнопка с изображением</title>
</head>
<body>
<form action="handler.php">
<p><b>Введите ваше имя:</b></p>
<p><input type="text" size="35">
<input type="image" src="/images/imgbutton.gif" alt="Отправить форму на сервер"></p>
</form>
</body>
</html>Результат данного примера показан на рис. 12.1.
Рис. 12.1. Форма с графической формой
Перед использованием указанного поля требуется подготовить изображение в графическом редакторе.
Это цитата сообщения FlashStudio Оригинальное сообщение
Формы по шагам: Переход между полями с помощью табуляции
При достаточно большом количестве полей формы, которые необходимо заполнить, переходить между ними с помощью курсора мыши становится утомительно. При этом требуется навести курсор на соответствующее поле, нажать кнопку мыши, и только после этого вводить нужное значение. Как альтернатива, используется клавиша <Tab>, которая позволяет быстро переключать фокус с одного поля на другое. Параметр tabindex определяет последовательность перехода между полями при нажатии на <Tab>.
Замечание
Фокусом называется активность поля, иными словами, поле доступно для того, чтобы в него вводили информацию или использовали какое другое действие. Например, кнопки, флажки, переключатели можно активизировать с помощью пробела.
Следующие поля формы (теги) могут иметь параметр tabindex: <BUTTON>, <INPUT>, <SELECT>, <TEXTAREA>. В качестве значения принимается число, которое представляет собой шаг перехода. Так, номер 1 означает, что это поле первое получит фокус, номер 2 будет идти следующим и т.д. В примере 14.1 показано применение параметра tabindex когда поля формы размещаются в ячейках таблицы. Если значение tabindex не указано, то по умолчанию переход по элементам формы происходит так, как они расположены в коде HTML, т.е. сверху вниз.
Пример 14.1. Использование параметра tabindex
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Порядок полей</title>
</head>
<body>
<form name="bio" method="POST" action="handler.php">
<table width="100%" cellspacing="0" cellpadding="4">
<tr valign="top">
<td >
Ваше имя:<br> <input name="name" type="text" tabindex="1" size="30">
</td>
<td>
Фамилия:<br> <input name="lastname" type="text" tabindex="3" size="30">
</td>
</tr>
<tr valign="top">
<td>
Телефон:<br>
<input name="tel" type="text" tabindex="2" size="30">
</td>
<td>
Пол:<br>
<select name="gender" tabindex="4">
<option selected>Мужской</option>
<option>Женский</option>
<option>Гермафродит</option>
</select></td>
</tr>
</table>
</form>
</body>
</html>Результат примера показан ниже. Обратите внимание, что с помощью табуляции фокус вначале получает поле, где надо ввести имя, а затем поле для ввода телефона.
Это цитата сообщения FlashStudio Оригинальное сообщение
Структура гипертекстовой разметки сайта
- Что видит человек, который заходит на сайт? Он видит на своем экране красивую страницу, заполненную текстом и картинками. Давайте заглянем за кулисы и посмотрим, как выглядит обратная сторона web страницы.
- Итак, рассмотрим от начала, с самой первой буквы, самой первой строки и до конца кодовой (гипертекстовой) разметки внутреннее строение сайта.
- DOCTYPE «Тип документа», влияет на совместимость сайта с компьютерами посетителей сайта. На сегодняшний день использование для создания структуры сайта тип документа HTML 4.01 Transitional является самым оптимальным вариантом:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html> Тэг, открывающий «HTML-документ». Закрывающий тэг из этой пары будет самым последним на нашей веб странице.
- <head> Тэг, открывающий все оглавление документа.
- <title></title> Тэги, между которыми нужно написать название документа:
<title>Мой первый сайт</title>
- <meta http-equiv> Непарный тэг, содержит код, определяющий тип и кодировку документа:
<meta http-equiv="Тип-содержимое" content="text/html; charset=windows-1251">
- <style type="text/css"> Тэг, открывает «отделение стиля», определяющего внешний вид web страницы, в этом отделении кодовая запись осуществляется в терминах языка css:
body {
Здесь пишем правило селектора body – «тела» документа.
}
#nav {
Здесь пишем правило селектора навигации, создающего и
определяющего вид кнопок навигации по страницам сайта.
}
#content {
Здесь пишем правило селектора контента.
В этом селекторе будет заключена практически вся основная
текстовая и визуальная информация доступная для
посетителей сайта.
}
p {
Здесь пишем правило для абзацев. Текстовая информация
выводится на экран компьютеров посетителей сайтов в виде
текстовых блоков – абзацев.
}
- </style> Тэг, закрывающий «отделение стиля»;.
- </head> Тэг, закрывающий «оглавление документа».
Теперь мы переходим к отделению, которое является «телом» документа, здесь заключается вся текстовая и визуальная информация, которую будут видеть посетители сайта:
- <body> Тэг, открывает отделение «тела» документа, определяющего структуру web страницы. Кодовая запись осуществляется в терминах языка html. (Закрывающий тэг из этой пары </body> будет предпоследним на нашей веб странице).
- <div id="content"> Тэг, открывающий «селектор контента». В этом селекторе будет заключен практически весь объем текстовой и визуальной информации, отображение которой увидят посетители сайта.
- <div id="nav"></div> Тэги, между которыми находиться «селектор навигации». Этот селектор создает кнопки, с помощью которых вы можете путешествовать по сайту, например, с «Главной» страницы на страницу «Новости» и т.д.
- <h1></h1> Тэги, между которыми пишем текст «главного заголовка» сайта. Всего можно задать и использовать только шесть стилей оформления заголовков:h1, h2, h3, h4, h5 и h6. На сайте может быть сколько угодно заголовков, просто к каждому заголовку нужно будет выбрать один из шести видов оформления. Стиль оформления любого текстового элемента - это: тип, размер, цвет и прочие параметры шрифта.
- <p></p> Тэги «абзацев», между которыми пишем текстовую информацию сайта. На сайте может быть столько абзацев, сколько Вам необходимо. Остается только придумать заголовки для каждого абзаца, чтобы донести до посетителей главную мысль сайта.
- </div> Тэг, закрывающий «селектор контента».
- </body> Тэг, закрывающий отделение «тела» документа.
- </html> Тэг, закрывающий «HTML-документ».
Вот и все