IV. Соглашения по логинам и паролям

простейший случай: https://jsfiddle.net/MrLang/1963ds3p/9/

<table border=1>

<tr><td>A11</td><td>A12 а12</td><td>A13</td></tr>

<tr><td>A21</td><td>A22</td><td>A23</td></tr>

<tr><td>A31</td><td>A32</td><td>A33</td></tr>

</table>

<br>

простейший случай:

простейший случай, но без border:

<table border=0>

<tr><td>A11</td><td>A12 а12</td><td>A13</td></tr>

<tr><td>A21</td><td>A22</td><td>A23</td></tr>

<tr><td>A31</td><td>A32</td><td>A33</td></tr>

</table>

<br>

простейший случай, но без border:

A11 A12 a12 A13

A21 A2 A23

A31 A3 A33

Поинтересней:

<table width='50%' border=1>

<caption>Заголовок для таблицы</caption>

<tr><th>[1]</th><th>[2]</th><th>[3]</th></tr>

<tr><td>A11</td><td>A12</td><td>A13</td></tr>

<tr><td>A21</td><td>A22</td><td>A23</td></tr>

<tr><td>A31</td><td>A32</td><td>A33</td></tr>

</table>

Поинтересней:

Заголовок для таблицы

Где применяют таблицы?

· Для показа табличных данных, например, список членов команды с указанием ФИО, телефона, е-почты, наличие мобильных устройств.

· Для определенного форматирования экрана. Например, страница может состоять из трех колонок: левая панель с вертикальным меню, основная центральная панель с информацией страницы и третья, правая панель с медальками, справочной информацией.

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

· Есть ли альтернативы таблице? Да, например, DIV c кучей дополнительных атрибутов. Но, TABLE проще на порядок.

Объединение колонок и столбцов:

Объединение вертикальное A21+A22:

<table width='50%' border=1>

<tr><th>[1]</th><th>[2]</th><th>[3]</th></tr>

<tr>< td colspan=2>A11+A12</td> <td>A13</td></tr>

<tr><td>A21</td><td>A22</td><td>A23</td></tr>

<tr><td>A31</td><td>A32</td><td>A33</td></tr>

</table>

Объединение горизонтальное A11+A21:

<table width='50%' border=1>

<tr><th>[1]</th><th>[2]</th><th>[3]</th></tr>

<tr> <td rowspan=2>A11+A21</td> <td>A12</td><td>A13</td></tr>

<tr><td>A22</td><td>A23</td></tr> <!-- нет первого столбца - ->

<tr><td>A31</td><td>A32</td><td>A33</td></tr>

</table>

Новые атрибуты: cellpadding, cellspacing, align, bgcolor:

<table width='50%' border=4 cellpadding ="10" cellspacing ="2">

<tr><th>[1]</th><th>[2]</th><th>[3]</th></tr>

<tr><td rowspan=2 align=center >A11+A21</td><td align=right >A12</td><td>A13</td></tr>

<tr><td bgcolor=gray >A22</td><td>A23</td></tr>

<tr><td>A31</td><td>A32</td><td>A33</td></tr>

</table>

сellpadding – расстояние между рамочкой ячейки и текстом в ячейке,

cellspacing – расстояние между ячейками,

align – расположение текста в ячейке (=left (прижато к левому краю), =center(по центру), =right(к правому краю)),

bgcolor – цвет фона ячейки (red,.. или #232323,..). Есть имена основных цветов (red,white,green,yellow,..)

valign – выравнивание по вертикали (=top(прижато к верхнему краю), =middle(по центру), =bottom(прижато к нижнему краю))

width =50% (50% от размера верхнего контейнера), =200 (200 пикселей)

Теги: TABLE, TR, TH, TD, CAPTION, TR, FORM, INPUT,..

Атрибуты и параметры: align = center, bgcolor = gray

Самостоятельная работа:

1. Посмотрите описание тега TABLE и его атрибуты, соответствующие атрибуты и значения их на http://htmlbook.ru/html/table

2. Сделайте страничку входа в сервис (форма с логин, пароль, …) с помощью таблицы

IV. Соглашения по логинам и паролям

Имеется почтовый адрес команды:

mrlang2017@yandex.ru Пароль – mrlang007 Имя - MrLang

Просьба на всех интернет-сервисах, которые можно использовать для совместной работы регистрироваться с этим адресом и этим паролем.

V. Рассказать о ходе разработки mrLang 2.0 (main2.php – заглавная страница – аналог приложения). Показать эскизы экранов нашего сервиса.

Основные проблемы:

· На разных устройствах - по разному извлекается звук.

· Разные размеры экранов – от 3” до 27“ и разные методы работы с ним (мышка и клавиатура; палец и виртуальная клавиатура, съедающая пространство экрана)

· Защита от несанкционированного вмешательства

VI. Домашнее задание:

1. написать свой пример html с формой для входа. Дополнительно: поля ПОЛ type=’radio’ (М/Ж), поле ЧемВладеете type=’checkbox’ (HTML/CSS/JS/PHP), поле ЯЗЫК <select/option> (Английский/Немецкий/Французский/Китайский/прочие).

Используйте сайт http://htmlbook.ru/

2. Найти интересные примеры форм для залогинивания в интернете. Изучите реализацию этих форм с помощью Инструмента разработчика в браузерах: Chrome, FF, Opera, IE.

3. Придумать свой вариант экранов входа по логину и/или регистрации, нарисовать на бумаге.

4. Сделать забавные mp3-файлы для забавных картинок (персонажи, просто картинки). Выложить в нашей группе VK.

5. Поупражняться с различными кодировками для *.html - как это все отображается в браузере(ах).

P.S. приложение «Бабуля без тормозов»