Файл: Основы программирования на языке HTML. (История появления HTML).pdf
Добавлен: 02.04.2023
Просмотров: 274
Скачиваний: 1
Чтo coздaeт 6раузер:
Когда браузер читает НТМL-страницу , он интерпретирует все теги, которые окружают основной текст программы. Те и это обычны е слова или символы в угловых скобках, например, <head>, <р>, <hl> и т. д. С помощью тег браузер распознает структуру и значенuе вашего текста. Итак ,вместо того , чтобы nросто передавать браузеру кусок текста, благодаря HTML можно использовать теги, чтобы сказать браузеру, какая часть текста является названием , где начинается новый абзац, что нужно подчеркнуть и где расположить изображения.
7. HTML формы.
Html формы - это самая сложная часть языка html. Приведу html форму заказа обучающего диска:
Введите ФИО:
Введите пароль:
Какой диск вы хотите получить?
CD
DVD
Какие обучающие курсы вы хотите видеть на диске?
Курсы по Фотошопу
Курсы по Adobe Dreamweaver
Курсы по PHP
Выберите способ доставки:
Срочная
Введите адрес для доставки:
Сделать заказ
Отмена
html форма - это всего лишь каркас, созданный при помощи языка html, т.е. мы можем указать браузеру где у нас будет какое поле и что написано на той или иной кнопке. Но для того, чтобы при нажатии на кнопку ваш комментарий добавился в гостевую книгу или данные заказа полетели в офис - нужна иная технология - программа, скрипт, который привязывается к форме.
Любые элементы формы находятся как бы в теле формы. Т.е. у любой формы есть каркас, а уже внутри него вставляются различные элементы формы, и пишется html код.
Пример 1:
<form>
<!-- сюда вставляют различные элементы -->
</form>
Как видите здесь два базовых тега : открывающий <form> и обязательный закрывающий тег </form> .
Но в этом выше, как бы голый каркас, т.е. без атрибутов. А теперь рассмотрим более реальный каркас html формы:
Пример 2:
<form name="forma zakaza" method="post" action="obrabotchik.php">
<!-- сюда вставляют различные элементы -->
</form>
Атрибуты:
NAME – определяет имя формы, уникальное для данного документа. Используется только , если в документе присутствует несколько форм.
ACTION – обязательный атрибут. Указывает путь к скрипту( или программе) сервера, обслуживающему данную форму.
METHOD – определяет способ отправки содержимого html формы. Возможные значения GET (по умолчанию) и POST.
Методы передачи:
Метод GET используется для передачи различных переменных , или очень коротких сообщений. Информация передается в явном виде через строку браузера , т.е. ее можно перехватить. Например если вы видите в строке набора браузера нечто вроде
http://adress.com/lessons.php?rub=28 это значит что передается значение переменной rub равное 28. В html формах обычно не используется.
Метод POST создан специально для передачи текстовых сообщений. Почти всегда применяется в формах. Передает информацию в скрытом виде.
Разберем элементы формы:
<form name="primer1" method="post" action="obrabotchik.php">
Введите ФИО: <br>
<input type="text" name="fio" size="30">
<br>
Введите пароль:<br>
<input type="password" name ="pass">
</form>
В результате получим:
Введите ФИО:
Введите пароль:
Мы видим следующее:
Элемент INPUT - создает поле html формы (кнопку, поле ввода, чекбокс и т.п.), Элемент не имеет конечного тега.
Основные атрибуты :
TYPE - определяет тип поля для ввода данных. По умолчанию – это "text". В данном примере еще используется тип "password" который указывает на то, чтоб информация звездочками.
NAME - определяет имя, используемое при передаче содержания данной html формы на сервер. Если Вы собираетесь куда-нибудь передавать информацию из формы, то обязательно вводите имя.
SIZE - определяет размер поля в символах. По умолчанию имеет значение равное 24.
Т.е. если этот атрибут не писать то длина будет равна 24 символа.
Есть еще и такой полезный атрибут как MAXLENGTH , который определяет
максимальное количество символов, которые можно ввести в текстовом поле. Оно может быть больше, чем количество символов, указанных в атрибуте SIZE. По умолчанию количество символов не ограничено.
Ну вот например:
<form name="primer2" method="post" action="obrabotchik.php">
Введите пароль(максимум шесть символов):<br>
<input type="password" name ="pass" maxlength="6">
</form>
Результат:
Введите пароль(максимум шесть символов):
Ну как работает? А вы попробуйте ввести больше шести символов :)
Еще есть атрибут VALUE который определеят что будет по умолчанию написано в поле для ввода.
Смотрите пример:
<form name="primer3" method="post" action="obrabotchik.php">
Введите свой e-mail: <br>
<input type="text" name="e-mail" size="35" value="пример: admin@zvirec.com">
</form>
Результат:
Введите свой е-mail:
пример: admin@zvirec.com
Теперь рассмотрим следующий элемент формы:
<form name="primer4" method="post" action="obrabotchik.php">
<p> Какой диск вы хотите получить?</p>
<p>
<input name="disc" type="radio" value="cd" checked>
CD<br>
<input name="disc" type="radio" value="dvd">
DVD </p></form>
Результат:
Какой диск вы хотите получить?
CD
DVD
Данный тип элементов html формы называется радиопереключатель (переключает: либо одно значение, либо другое - два одновременно быть не может). Поэтому атрибут type имеет значение type="radio". Раз мы выбераем между CD и DVD то радиопереключателя у нас два, поэтому два раза пользуемся элементом INPUT. Как видите у них одинаковое
имя - name="disc" и разные значения value . Почему это так? давайте подумаем логически:
Нас интересует какой диск хочет получить клиент, CD или DVD . Поэтому у нас одинаковое значение имени name="disc" и разные значение ( value="cd" и value="dvd").
Т.е. если мы выбираем первый вариант, то переменная disc примет значение cd а если второй- то dvd. Логично? по другому и быть не может...
Если вы хотите сделать, чтобы по умолчанию у Вас радиопереключатель был установлен на каком-либо варианте, то просто допишите атрибут-флаг checked(включен). Примечание:в радиопереключателе обязательно должен присутствовать атрибут value иначе ничего работать не будет.
Последний элемент:
<form name="primer5" method="post" action="obrabotchik.php">
<p>Какие обучающие курсы вы хотите видеть на диске?</p>
<input type="checkbox" name="fotoshop" value="yes" checked>
Курсы по Фотошопу <br>
<input type="checkbox" name="dreamweaver" value="yes">
Курсы по Adobe Dreamweaver <br>
<input type="checkbox" name="php" value="yes">Курсы по PHP
</form>
Результат:
Какие обучающие курсы вы хотите видить на диске?
Курсы по Фотошопу
Курсы по Adobe Dreamweaver
Курсы по PHP
Данный тип элементов html формы называется checkbox и отличается от
радиопереключателя тем, что здесь можно выбрать несколько вариантов. Как видите
type="checkbox" означает что тип элемента - Чекбокс, атрибут name нужен для того, чтобы обработчик мог идентифицировать данное поле и наконец value - определяет тот параметр, который будет отправлен при поставленной галочке. В данном элементе, атрибут value не является обязательным, в отличие от радиопереключателя. Если мы его не поставим, то при поставленной галочке,как значение переменной в обработчик полетит текст который написан рядом с галочкой.
8. Управление цветом
Кодирование цвета используется для раскрашивания шрифтов, горизонтальных линий и фона, других элементов страницы. Цвета обозначаются английскими названиями или числовыми шестнадцатеричными кодами. Существует несколько атрибутов, значениями которых являются параметры цвета. Самый простой способ определить цвет - написать название цвета на английском языке. Так, например, задаётся красный цвет шрифта в элементе FONT:
Color = “red”
Допустимые названия цветов:
Русское название Английское название RGB - код
Аквамарин Aqua #00FFFF
Белый White #FFFFFF
Жёлтый Yellow #FFFF00
Зелёный Green #008000
Золотой Gold #FF0700
Индиго Indigo #4B0080
Каштановый Maroon #800000
Красный Red #FF0000
Оливковый Olive #808000
Оранжевый Orange #FF0000
Пурпурный Purple #800080
Светло-зелёный Lime #00FF00
Серебристый Silver #C0C0C0
Серый Gray #808080
Сизый Teal #008080
Синий Blue #0000FF
Ультрамарин Navy #000080
Фиолетовый Violet #EE80EE
Фуксиновый Fuchsia #FF00FF
Чёрный Black #000000
Но в общем случае цвет определяется RGB - кодом. Любой цвет в этом случае представляется как комбинация красного (R), зелёного (G), синего (B) цветов, взятых в определённых пропорциях. Доля каждой цветовой составляющей определяется интенсивностью цвета и выражается двуразрядным шестнадцатеричным числом. В десятичном исчислении эти числа соответствуют диапазону от 0 до 255. В Windows-95 это соответствует цветовому режиму монитора True Color (24-разрядное двоичное кодирование цвета).
В выше приведённой таблице видно, что для формирования стандартных цветов часто используются или крайние значения интенсивности базового цвета 00 и FF, или среднее значение 80. Выбрав цвет, можно увидеть его численные характеристики, и наоборот, задав численные значения, получить новый оттенок.
Ещё одно направление применения цвета: элемент HR, создающий горизонтальную линию, допускает использование ряда атрибутов. С их помощью линию можно превратить в цветной прямоугольник. Его можно использовать для разделения частей страницы или в качестве маркеров списка.
HTML - код, рисующий радугу на Web-странице:
<FONT color = “ red “> Радуга </ front>
<TABLE border = 0 width = 100% >
<TR><TD bgcolor = #FF3030 >K
<TR><TD bgcolor = FFD000 >0
<TR><TD bgcolor = #F3FF5F >Ж
<TR><TD bgcolor = #00FF00 >З
<TR><TD bgcolor = #6FD3F7 >Г
<TR><TD bgcolor = # 5F72FDF >С
<TR><TD bgcolor = # B568F4 >Ф
</ table>
Цветовая проработка Web-страницы является альтернативой многочисленных рисунков и позволяет обеспечить более быструю загрузку документа.
Заключение
На сегодняшний день перспективы HTML продолжают расти. Консорциум всемирной паутины разрабатывает HTML версии 5. Первый вариант спецификации языка появился в Интернете 20 ноября 2007 года. Параллельно ведётся работа по дальнейшему развитию HTML под названием XHTML (англ.Extensible Hypertext Markup Language— «расширяемый язык разметки гипертекста»). Пока XHTML по своим возможностям сопоставим с HTML, однако предъявляет более строгие требования к синтаксису. Как и HTML, XHTML является подмножеством языка SGML, однако XHTML, в отличие от предшественника, основан наXML. Вариант XHTML 1.0 был одобрен в качестве Рекомендации Консорциума всемирной паутины26 января2000 года.
Планируемая спецификация XHTML 2.0 разрывает совместимость со старыми версиями HTML и XHTML, что не очень устраивает некоторых веб-разработчиков и производителей браузеров. ГруппойWHATWG(англ.Web Hypertext Application Technology Working Group) разрабатывается спецификацияWeb Applications1.0, часто неофициально называемая «HTML 5», которая расширяет HTML (впрочем, имея и совместимый с XHTML 1.0 XML-синтаксис) для лучшего представления семантики различных типичных страниц, например форумов, сайтов аукционов, поисковых систем, онлайн-магазинов ит.д., которые не очень удачно вписываются в модель XHTML 2.