Html...{Учимся веб-программированию} ч.2

Спецсимволы

Помимо тегов в языке HTML используется специальный управляющий символ & — амперсант. Этот символ используется для вывода специальных символов и символов из расширенной кодовой таблицы, которые нельзя ввести с клавиатуры. Например, вывод самого символа амперсант & осуществляется посредством последовательности символов &аmp; для вывода угловых скобок используются &lt; для “<” и &gt; для “>”, а, скажем, символ с номером 182 из кодовой таблицы, может быть задан последовательностью &#182;.

Самый часто используемый спецсимвол – это неразрывный пробел (его мнемоника &nbsp;).

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

Мнемоники и коды часто используемых спецсимволов

Символ Описание Мнемоника Коd

Пробел &nbsp; &#160;

< Меньше чем &lt; &#60;

> Больше чем &gt; &#62;

© Знак охраны авторского права &copy; &#169;

® Зарегистрированный товарный знак &reg; &#174;

& Знак амперсанда &amp; &#38

Семантические теги

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

Например, как поисковый робот может отличить содержимое документа от навигационного меню если они размечены с помощью одинаковых div-элементов?

Для того, чтобы разрешить эту проблему, в HTML5 были введены семантические теги. С помощью семантических тегов вы можете сделать страницы сайтов более понятными для поисковых систем и браузеров. <footer> Определяет футер <header> Определяет заголовочный блок сайта <nav> Определяет навигационное меню С помощью тега <section> вы можете группировать логически связанное содержимое в документе.

Если логически связанное содержимое является автономным (может использоваться в других документах независимо от остального содержимого на странице) необходимо использовать вместо <section> тег <article>. Тег aside используется для выделения элементов, которые не являются частью содержимого, но косвенно с ним связаны.

Данным тегом могут выделяться: цитаты, дополнительная информация к статье, словарь с терминами, список ссылок и т.д.

Как уже говорилось выше, с помощью тега <mark> вы можете выделить "важную" часть в тексте.

В журналах и газетах иллюстрации часто сопровождаются подписями. В HTML4 невозможно было создавать подписи, не прибегая к использованию CSS.

В HTML5 это проблема решена добавлением новых тегов: <figure> и<figcaption>.

<figure>

<img src='foto-1387634.jpg' width='300' height='230' />

<figcaption>Мы с Машей на отдыхе, Красное море </figcaption>

</figure>

Форма////

Функциональность сайтов, предоставляющих пользователю возможность ввода данных и получения результатов их обработки, обеспечивается использованием программ, работающих на стороне сервера — серверных приложений. Эти приложения обрабатывают полученные от посетителя Web-сайта данные и выдают результат в виде обычной Web-страницы.

Именно для них в HTML предусмотрена возможность создания Web-форм и элементов управления — чтобы посетитель мог ввести данные, которые потом обработает серверное приложение.

Основная схема работы серверного приложения:

1. Посетитель вводит в элементы управления, расположенные в Web-форме на Web-странице, нужные данные.

2. Введя данные, посетитель нажимает расположенную в той же Web-форме особую кнопку — кнопку отправки данных.

3. Web-форма кодирует введенные в нее данные и отправляет их серверному приложению, расположенному по указанному интернет-адресу.

4. Web-сервер перехватывает отправленные данные, запускает серверное приложении и передает данные ему.

5. Серверное приложение обрабатывает полученные данные.

6. Серверное приложение формирует ответ (возможно, это Web-страница) с результатами обработки данных посетителя и передает ее Web-серверу.

7. Web-сервер получает сформированную серверным приложением ответ и отправляет ее посетителю.

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

Для создания интерактивных HTML-документов используют заполняемые формы, определяемые тегом form. В одном документе может быть определено несколько форм для заполнения, но одновременно на сервер может быть отправлена только одна форма. По этой причине данные форм должны быть независимы друг от друга и вложенные теги form не допускаются. Формат тега form следующий:

<form action="url" method="GET/POST"> ... </form>

Здесь используются следующие атрибуты:

-- action=url – URL-адрес сервера запросов, куда будет отослано содержание формы после подтверждения. Если это поле отсутствует, будет использован URL-адрес текущего документа.

-- method=GET/POST – HTTP-метод, используемый для посылки содержания заполненной формы на сервер. Возможные варианты при этом следующие:

• GET – это метод по умолчанию, который приводит к добавлению содержимого заполненной формы к URL;

• POST – при использовании этого метода содержимое заполненной формы пересылается не как часть URL, а как содержимое тела запроса.

• ENCTYPE - задаёт тип кодирования содержимого заполненной формы.

Этот атрибут действует только когда используется метод POST.

Свойства и методы формы:

Когда форма отправляется на сервер, управление данными передаётся программе, заданной атрибутом action тега <form>. Предварительно браузер подготавливает информацию в виде пары "имя=значение", где имя определяется атрибутом name тега <input>, а значение введено пользователем или установлено в поле формы по умолчанию.

Внутрь контейнера <form> помещаются другие теги, при этом сама форма никак не отображается на веб-странице, видны только ее элементы и результаты вложенных тегов.

Теги формы*****/

Внутри тега form могут находиться любые теги, кроме другого тега form.

Для задания интерфейсных элементов внутри form используются теги input, select, textarea и другие. Давайте их рассмотрим.

Для того чтобы ввести информацию о пользователе (логин, пароль, дату рождения и т.д.) используют элемент ввода <input>. Его основной атрибут – type – определяет, что мы будем вводить и как.

Тег input используется для задания простого элемента ввода, при этом могут быть использованы следующие атрибуты:

Значения предпоследнего атрибута type в списке очень обширны и важны, поскольку задают поведение при вводе в input

Очень часто мы сталкиваемся с необходимостью выбора. Например, мы выбираем, согласны ли с лицензионным соглашением, мы выбираем какие странички отображать в меню соц. сети, приложения.

Когда надо выбрать несколько элементов из многих, используют checkbox –поле с квадратиком, куда устанавливается галочка. Создается это поле так:

<input id="Checkbox1" type="checkbox" value="Английский"/>

Английский<br />

value – значение, которое вы выбрали. Используется для обработки в скриптах. Рядом с полем пишется то слово, которое соответствует элементу выбора, и которое мы хотим отобразить на странице в браузере.

Иногда мы можем выбирать только один элемент из списка предложенных альтернатив. Например, мы выбираем пол: мужской/женский. Такой выбор нам помогут организовать радиокнопки.

Создаются они так:

<input type="radio" name="gender" value="мужской"/> мужской

<input type="radio" name="gender" value="женский"/> женский

Обратите внимание, что имена (name) – одинаковые. Это обеспечивает то, что вы сможете выбрать (одновременно) только один из элементов.

Иногда очень удобно задавать альтернативы в виде выпадающего списка.

На некоторых сайтах так организован выбор страны, вуза, возраста.

Задание перечня альтернатив удобно для обработки, так как пользователь правильно введёт данные (ну хотя бы с точки зрения орфографии).

Использование выпадающего списка значительно экономит место на форме.

Тег select предназначен для создания списков в форме, при этом внутри разрешена только последовательность тегов option, за каждым из которых следует некоторое количество простого текста. Атрибуты тега select следующие: name=идентификатор – символьное имя для элемента select, по которому он идентифицируется; size=n – если значение равно 1 или если этот атрибут опущен, то элемент select будет представлен как выпадающее меню. Если size = 2 или более, то элемент будет представлен как окно выбора, а значение будет определять, сколько элементов списка будут видны; multiple – если этот атрибут присутствует, то допускается множественный выбор из списка.

Создать список можно так:

<select id="Select1">

<option>Элемент списка</option>

...

</select>

где select – сам список, option – элемент списка.

Можно так же организовать выбор из заданного списка: datalist. Это называется альтернативой и ее можно задавать с помощью списка вариантов:

Любимое блюдо

<input type="text" name="team" id="favorite_dish"

list="dish_list">

<datalist id="dish_list">

<option>Борщ</option>

<option>Суп</option>

<option>Щи</option>

<option>Окрошка</option>

</datalist>

Обратите внимание на то, что атрибут list элемента input и атрибут id элемента <datalist> содержат одинаковое значение dish_list. Это их связывает.

Тег button создает на веб-странице кнопки и по своему действию напоминает результат, получаемый с помощью тега <input> (с атрибутом type="button | reset | submit"). В отличие от этого тега, <button> предлагает расширенные возможности по созданию кнопок. Например, на подобной кнопке можно размещать любые элементы HTML, в том числе изображения. Используя стили, можно определить вид кнопки путём изменения шрифта, цвета фона, размеров и других параметров.

Теоретически, тег <button> должен располагаться внутри формы, устанавливаемой элементом <form>. Тем не менее, браузеры не выводят сообщение об ошибке и корректно работают с тегом <button>, если он встречается самостоятельно. Однако, если результат нажатия на кнопку необходимо отправить на сервер, помещать <button> в контейнер <form> обязательно.

И, наконец, тег textarea может быть использован для расположения многострокового поля ввода с необязательным содержимым в форме.

Атрибуты тега textarea следующие:

name= символьное имя поля ввода;

rows= число строк в поле ввода, то есть высота поля;

cols= число столбцов в поле ввода, то есть ширина поля.

Объект textarea имеет полосы прокрутки, так что может быть введено любое количество текста. Содержание по умолчанию должно быть строгим ASCII-текстом, при этом символы перевода строки воспринимаются.

Пример несложной формы;№№№

<form method="POST" id= "student" name= "student" action =

'ajax.php'>

<label for = "firstName"> Введите Ваше имя

<input type= "text" id = " firstName" name="firstName"

size="45">

</label>

<input type="radio" checked name="radioJob">

<span>Учащийся ВУЗа</span>

<input type="radio" name="radioJob" > <span>Другое</span>

<button type="submit"> Submit </button>

<button type= "reset"> Reset </button>

</form>

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

Таблицы%%%

В таблице каждый кусок информации отображается в ячейке (cell).

Ячейки, лежащие на одной линии, составляют строку (row). В некоторыех таблицах, строки могут быть сгруппирированы. Специальная группа строк в начале таблицы – заголовок (header), в конце – нижний колонтитул (footer). Главные строки таблицы – тело (body), и они могут быть также сгруппирированы.

Ячейки в линии сверху вниз, составляют столбец (column), но столбцы имеют ограниченное приминение в таблицах CSS.

Описание таблиц в HTML-документах осуществляется с помощью тега <table>. Таблица задается двумя тегами: <tr>, </tr> – описание строки таблицы и <td>, </td> – описание клетки таблицы.

Ячейки не имеют границ. У ячеек нет рамок и наполнений. По умолчанию, рамки разделены значениями таблицы, это свойство border-spacing.

Вы можете также полностью удалить пространство, установив свойство таблицы border-collapse в collapse.

По умолчанию, текст внутри таблицы выравнивается по левому краю, а ширина столбца таблицы определяется наиболее длинным элементом в этом столбце.

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

Чтобы переместить её вниз, установите её свойство caption-side в bottom.

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

Тег <caption> должен размещаться внутри тега <table>, причём непосредственно внутри него и первым, до остальных вложенных тегов.

Задание заголовка к строке или столбцу таблицы осуществляется при помощи тега th после tr или td соответственно.

Атрибут border= к тегу table рисует рамку вокруг таблицы и каждой клетки, при этом ширина рамки задается в пикселях. Следует иметь ввиду, что атрибуты colspan= и rowspan= тегов td и tr позволяют объединять клетки таблицы в группы, вокруг которых рисуется рамка.

Рассмотрим пример таблицы, занимающей по ширине весь экран браузера:

<table border="l">

<tr>

<td colspan="2">

Две ячейки, объединенные по горизонтали

</td>

</tr>

<tr>

<td rowspan="2">

Две ячейки, объединенные по вертикали

</td>

<td >просто ячейка</td>

</tr>

<tr>

<td > просто ячейка </td>

</tr>

</table>

что в окне браузера даст результат, приведённый на рис. 2.

Как хорошо стилизовать таблицу с помощью CSS? Необходимо знать несколько основных свойств и то, как они работают. Это уже упоминавшиеся border-spacing и border-collapse. border-collapse устанавливает, как отображать границы вокруг ячеек таблицы. Это свойство играет роль, когда для ячеек установлена рамка, тогда в месте стыка ячеек получится линия двойной толщины. Значение collapse заставляет браузер анализировать подобные места в таблице и убирать в ней двойные линии. При этом между ячейками остаётся только одна граница, одновременно принадлежащая обеим ячейкам. То же правило соблюдается и для внешних границ, когда вокруг самой таблицы добавляется рамка. Значение по умолчанию separate.

Синтаксис:

border-collapse: collapse | separate

Значения: collapse – линия между ячейками отображается только одна, также игнорируется значение атрибута cellspacing. separate – вокруг каждой ячейки отображается своя собственная рамка, в местах соприкосновения ячеек показываются сразу две линии. border-spacing - задаёт расстояние между границами ячеек в таблице. border-spacing не работает в случае, когда для таблицы установлено свойство border-collapse со значением collapse. Значение по умолчанию 0.

Синтаксис:

border-spacing: <размер> [<размер>]

Значения: Одно значение устанавливает одновременно расстояние по вертикали и горизонтали между границами ячеек. Если значений два, то первое определяет горизонтальное расстояние, а второе — вертикальное.

Вот и всё эти самые основы вы и должны знать без теории без мысленно начинать практику.. а так же подписывайтесь на сообщество в вк https://vk.com/treeplantbussines там я выкинул урок в формате psd а так же в видео. Будет урок по основам css до скорой встречи!