Простые советы.

воскресенье, 27 марта 2016 г.

Формы.

Первая форма

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

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

• action задаёт адрес, URL, отправки формы;

• method задаёт метод отправки формы.

Пример:

поля формы

</form>

Для отправки формы обычно используют методы get или post. Если не указать атрибут method, то будет использован get.

Метод get посылает данные формы в строке запроса, то есть они видны в адресной строке браузера и следуют после знака вопроса. Например:

(https://www.google.com/search?q=htmlacademy)

Метод get лучше использовать в поисковых формах, потому что он позволяет получить ссылку на результаты поиска и передать её кому-то.

Метод post посылает данные в теле HTTP-запроса и используется, когда нужно отправить много данных и ссылка на результат обработки этих данных не нужна. Например, при редактировании личного профиля.

Текстовое поле ввода

Большинство полей форм создаётся с помощью одиночного тега input. У этого тега два обязательных атрибута:

• type задаёт тип поля;

• name задаёт имя поля.

Тип поля влияет на то, как оно будет отображаться и вести себя. Самый распространённый тип — это text, который обозначает текстовое поле. Он же используется по умолчанию. Пример:

</form>

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

Идентификатор и значение по умолчанию

Атрибут id поля ввода обозначает идентификатор. Он должен быть уникальным не только в пределах формы, но и на всей странице.

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

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

Атрибут value задаёт значение поля ввода по умолчанию. Это тоже повышает удобство.

Согласитесь, приятно зайти в огромную анкету на каких-нибудь госуслугах, а там ваши паспортные данные уже подставлены в нужные поля и заполнять их не надо. И всё благодаря тому, что программист добавил к полям атрибут value с нужными данными.

Подпись для поля ввода

Можно подумать, что сделать подпись к полю очень просто. Пишем текст рядом с полем и всё готово:

Подпись <input type="text" name="username">

На самом деле этого недостаточно — мы получили просто кусок текста и поле, которые расположены рядом друг с другом, но логически никак не связаны.

Есть специальный тег, который позволяет смело сказать: «Этот кусок текста действительно подпись к этому полю!». Это парный тег <label>.

Он связывает текст и поле ввода логически. А ещё если щёлкнуть по тексту в такой подписи, то курсор переместится в соответствующее поле.

Создавать подписи к полям с помощью <label> — хороший приём. Используйте его.

Первый способ создать подпись — просто обернуть текст подписи и тег поля в тег <label>, вот так:

<label>

Подпись <input type="text" name="username">

</label>

Надо отметить, что при оборачивании текста в тег <label> он визуально никак не меняется, ведь главная задача подписи — создать логическую связь.

Вот пример:

<label>

Ваш логин <input type="text" name="login">

</label>

<br><br>Другие поля

</form>

Связываем подпись и поле по id

Иногда обернуть поле и текст подписи в тег <label> нельзя. Например, когда они размещены в разных ячейках таблицы.

В этом случае можно связать подпись с полем с помощью атрибута id. Алгоритм такой:

1. Добавляем к полю ввода идентификатор с помощью атрибута id.

2. Оборачиваем текст подписи в тег <label>.

3. Добавляем тегу <label> атрибут for.

4. В атрибут for записываем такое же значение, что и в атрибуте id у поля.

Например:

<label for="user-field-id">Имя пользователя</label>

...

много-много других тегов

...

Пример:

<table>

<tr>

<td>

Ваш логин

</label>

</td>

<td>

</td>

</tr>

<tr>

<td>Подпись</td>

Добавим ещё одно поле

Пришло время добавить в форму ещё одно поле.

Сделайте это по всем правилам хорошего тона: помимо имени задайте полю идентификатор, добавьте подпись к полю и свяжите их.

Мы могли бы связать поле и подпись, просто обернув их в тег <label>. Но в этом задании мы тренируем более сложный вариант — с использованием id и for.

Вот пример:

<h1>Форма входа</h1>

<label for="login-field">Ваш логин</label>

<label for="password-field">Ваш пароль</label>

</form>

Поле для ввода пароля

Мы создаём простую форму входа. Уже есть два поля и связанные с ними подписи. Одно из полей предназначено для ввода пароля, но сейчас оно является простым текстовым полем.

Чтобы сделать его настоящим полем для ввода пароля, в котором текст будет отображаться «звёздочками», нужно просто изменить значение атрибута type на password.

Пример:

<label for="login-field">Ваш логин</label>

<label for="password-field">Ваш пароль</label>

</form>

Кнопка отправки формы

Форма практически готова. Осталось добавить кнопку для отправки формы. Такая кнопка создаётся с помощью тега <input> c типом submit.

Надпись на кнопке можно задать с помощью атрибута value. Для кнопки отправки формы задавать имя необязательно. Но если имя задано, то на сервер будут отправляться имя и значение кнопки.

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

Пример:

<label for="login-field">Ваш логин</label>

<label for="password-field">Ваш пароль</label>

</form>

Многострочное поле ввода

Мы научились создавать простейшие формы с текстовыми полями и кнопками. А теперь познакомимся с более сложными элементами формы.

Многострочное текстовое поле создаётся с помощью парного тега <textarea>. У него есть атрибуты name и id, которые аналогичны атрибутам текстового поля.

Атрибут rows принимает целочисленное значение и задаёт высоту многострочного поля в строках. Атрибут cols задаёт ширину поля в символах. В качестве ширины символа берётся некоторая «усреднённая ширина».

Атрибут value у многострочного поля отсутствует, а значение по умолчанию задаётся по-другому. Текст, расположенный между открывающим и закрывающим тегом <textarea> и является значением по умолчанию. Вот так:

<textarea>Значение по умолчанию</textarea>

Пример:

<p>Список комментариев</p>

<p>Введите ваш комментарий:</p>

<textarea rows="10" name="comment" id="comment-field">Текст комментария</textarea>

</form>

Чекбокс или «галочка»

Поле-галочка — это тег <input> с типом checkbox.

Галочка работает по принципу «либо да, либо нет». Если галочка стоит, то браузер посылает переменную с именем поля на сервер, если галочки нет, то не посылается ничего. Таким образом, атрибут value не является обязательным.

Чтобы галочка стояла по умолчанию, нужно добавить к тегу атрибут checked. Вот так:

<input type="checkbox" checked>

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

Пример:

<p>Множество полей</p>

<p>И как всегда в конце формы регистрации вопрос:</p>

<label for="subscribe-field">Подписать вас на рассылку?</label>

</form>

Переключатель или «радиобаттон»

Поле-переключатель — это тег <input> с типом radio.

Обычно переключатели размещают группами по несколько штук. Причём у переключателей из одной группы должно быть одинаковое имя и разные значения, которые задаются c помощью value.

Таким образом, атрибут value является для переключателей обязательным. Браузер отправляет на сервер значение value выбранного переключателя.

Простой пример:

<p>В тестах часто встречаются задания типа «выберите один из предложенных вариантов».</p>

<p><i>Какой тег обозначает «абзац»?</i></p>

<label>

Тег <p>

</label>

</form>

Группа переключателей

Теперь добавим ещё один вариант ответа в наш переключатель. Для этого нужно добавить ещё один <input> с таким же именем, но другим значением value.

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

Чтобы сделать какой-либо вариант в переключателе выбранным по умолчанию, нужно добавить к соответствующему тегу <input> атрибут checked, как у поля-галочки.

Кстати, имя поля у переключателей одной группы должно быть одинаковым, но идентификаторы всегда должны быть уникальными.

Образец:

<p><i>Какой тег обозначает «абзац»?</i></p>

<label>

Тег <p>

</label>

<br>

<label>

Тег <b>

</label>

</form>

Раскрывающийся список или «селект»

Раскрывающийся список так же, как и переключатель, позволяет выбрать один вариант ответа из нескольких.

Раскрывающийся список создаётся с помощью парного тега <select>, у которого есть знакомые атрибуты name и id.

Варианты ответов задаются с помощью парных тегов <option>, которые должны располагаться внутри тега <select>.

Например:

<option value="light">Светлая тема</option>

<option value="dark">Тёмная тема</option>

...

</select>

В атрибуте value тега <option> задаётся значение варианта ответа, а внутри этого тега располагается подпись варианта ответа.

Если при отправке формы у выбранного варианта задан value, то на сервер отправится значение этого атрибута. В противном случае будет отправлен текст подписи.

Пример:

<p>Часто выпадающие списки используют для выбора даты.</p>

<p><i>Ваш год рождения</i></p>

</select>

</form>

«Мультиселект»

Раскрывающийся список можно превратить в так называемый «мультиселект», то есть список, в котором можно выбрать не один, а несколько вариантов.

Чтобы сделать это, нужно добавить к тегу <select> атрибут multiple.

Выбрать несколько вариантов можно, щёлкая по ним с зажатой клавишей Ctrl на Windows или Command на OS X.

Высоту мультиселекта можно изменять с помощью атрибута size тега <select>.

Чтобы отметить как выбранные по умолчанию одно или несколько значений, нужно к соответствующим тегам <option> добавить атрибут selected.

Пример:

<p>В мультиселекте можно выбрать несколько вариантов, щёлкая по ним с зажатой клавишей Ctrl на Windows или Command на OS X.</p>

<p><i>Любимые дни недели:</i></p>

<option>Понедельник</option>

<option>Вторник</option>

<option>Среда</option>

<option>Четверг</option>

<option>Пятница</option>

<option>Суббота</option>

<option selected>Воскресенье</option>

</select>

</form>

Поле для загрузки файлов

Поле для загрузки файлов — это тег <input> с типом file. Для этого поля обязательным атрибутом является имя.

Чтобы поле заработало и браузер смог передать выбранный файл на сервер, необходимо добавить форме атрибут enctype со значением multipart/form-data.
Не полю, а форме!!!

Кстати, внешний вид таких полей очень сильно отличается в зависимости от операционной системы и очень плохо изменяется с помощью стилей.

Пример:

<p>Выберите изображение для своего аватара:</p>

</form>

Скрытое поле

И ещё одно невидимое и очень полезное поле. Это скрытое поле. Его используют, когда в форме нужно отправить какие-то дополнительные служебные данные, которые не вводятся пользователем.

Например, это могут быть реквизиты заказа или номер пользователя в форме оплаты.

Скрытое поле — это тег <input> с типом hidden.

Посмотреть больше примеров и потренироваться можно в посте «Примеры форм»

Создать собственную форму для связи с вми непосредственно из блоге вы можете в моем посте

"Форма обратной связи для блогспот."

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

HTML-Академия

Примеры форм.

ПРИМЕР ФОРМЫ №1Для знакомства я рекомендую вам посмотреть пост "Формы"

<!DOCTYPE html>

<html>

<head>

<title>Испытание: форма регистрации</title>

</head>

<body>

<h1>Регистрация</h1>

<label>Ваш логин (email):</label>

<br>

<label>Пароль:</label><br>

Информация о себе:<br>

<label for="subscribe-field">Подписаться на рассылку</label><br>

</form>

</body>

</html>

ПРИМЕР ФОРМЫ №2

!DOCTYPE html>

<html>

<head>

<title>Испытание: редактирование профиля</title>

</head>

<body>

<h1>Профиль</h1>

<label>Ваш пол:

Мужской

</label>

<label>

Женский

</label><br>

Месяц и год рождения:<br>

<option value="jan">Январь</option>

<option value="feb">Февраль</option>

...

</select>

...

</select><br>

Знакомые технологии:<br>

<option>JavaScript</option>

</select><br>

Фото:<input type="file" name="avatar">

</form>

</body>

</html>

ПРИМЕР ФОРМЫ №3

<!DOCTYPE html>

<html>

<head>

<title>Идентификатор и значение по умолчанию</title>

</head>

<body>

<h1>Добавить в корзину</h1>

Количество <input type="text" name="total" id="total-field" value="5"> шт.

</form>

</body>

</html>

CSS:

h1 {

font-size: 18px;

}

HTML-Таблица.

Простейшая таблица.

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

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

table обозначает таблицу.
trрасшифровывается как «table row», обозначает строку таблицы.
tdрасшифровывается как «table data», обозначает ячейку внутри строки таблицы.

Теги td располагаются внутри тегов tr, а те, в свою очередь, внутри table. Почти всё текстовое содержимое таблицы размещается внутри тегов td. В простейшей таблице в каждой строке должно быть одинаковое количество ячеек, то есть внутри всех должно быть одинаковое количество td.
Потренируйтесь добавлять строки в таблицу.

Пример таблицы в HTML

< table> — начало таблицы
  < tr> — начало строки
    < td>Первая ячейка< /td> — первый столбец
    < td>Вторая ячейка< /td> — второй столбец
  < /tr> — конец строки
  < tr> — начало  второй строки
    < td>Первая ячейка< /td> — первый столбец
    < td>Вторая ячейка< /td> — второй столбец
  < /tr> — конец второй строки

< /table> — конец таблицы

Добавляем столбцы

Со строками справились, теперь потренируемся добавлять в таблицу столбцы.
Для того, чтобы добавить столбец в таблицу, надо в каждую строку tr добавить по ячейке td.

Задаём рамки с помощью CSS

Для того, чтобы научиться создавать полноценные таблицы с помощью CSS, я вам рекомендую с этого места создать таблицу уже не в сообщении блогспота , а в программе Notepad++например, или любой другой. Для написания CSS следует использовать вот такой код:

<head>
  <style>
    CSS-код
  </style>
</head>

Об этом я писал в посте«Структура HTML документа»
Таблицы в предыдущих заданиях отображались с рамками по умолчанию. Такие рамки отображаются, если у тега table задан атрибут border с ненулевым значением.

Но с помощью атрибута border гибко управлять рамками не получается. С его помощью можно только изменять их толщину. Поэтому мы будем учиться использовать CSS. С помощью CSS-свойства border можно задавать как внешние рамки таблицы, так и рамки каждой ячейки.

Потренируемся использовать CSS для задания рамок
Примерно так:

table {
    border: 3px solid black;
}

td {
    border: 3px solid lightgray;
}

Улучшаем отображение рамок.

Мы задали рамки таблицы с помощью CSS, но они не так хороши, как хотелось бы. По умолчанию браузер рисует рамки таблицы и рамки отдельных ячеек раздельно.

Чтобы избавиться от таких двойных рамок, используется CSS-свойство таблицы border-collapse. Вот так:

table {
  border-collapse: collapse;
}

Значение collapse убирает двойные рамки: cхлопываются рамки соседних ячеек, а также рамки ячеек и внешняя рамка таблицы. При этом внешняя рамка таблицы может исчезнуть, и чтобы её вернуть, можно увеличить её ширину.

Я долго думал, как оформить этот пост, чтобы были понятны все манипуляции и пришел к выводу, что какие бы фото и видео я не публиковал, пока вы сами не попробуете писать эти коды в программе, все остальное бесполезно.

Поэтому, открывайте программу Notepad++ и пишите свой первый сайт. Так у вас будет возможность легко и быстро проверять ваш код и отрабатывать навыки его написания. Здесь и далее, я буду приводить только код и его значения.

Горизонтальные и вертикальные рамки.

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

Такие эффекты легко достигаются с помощью CSS. Для этого необходимо использовать не свойство border, которое задаёт рамки для всех сторон ячейки, а одно из свойств:

border-top,
border,
border-bottom,
border-left.

Эти свойства задают отображение только одной рамки ячейки: верхней, правой, нижней или левой соответственно.

Отступы внутри ячеек

Вы освоили простейшие приёмы для работы с рамками таблиц. Наша таблица уже смотрится аккуратно, но содержимое ячеек прилипает к рамкам. Если добавить отступы внутри ячеек, то информация будет восприниматься намного лучше.

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

CSS-свойство padding задаёт «внутренние отступы элемента» со всех сторон.
Можно задавать отступы для каждой из сторон отдельно, используя свойства:

padding-top,
padding-right,
padding-bottom,
padding-left.

Например, чтобы задать у ячеек все отступы в 10 пикселей, а отступ слева в 20 пикселей, нужно написать такой CSS-код:

td {
  padding: 10px;
  padding-left: 20px;
}

Как пример:

table {
    border-collapse: collapse;
    border: 3px solid black;
}

td {
    padding:5px;
    padding-right: 30px;
    border: 2px solid lightgray;
}

Отступы между ячейками

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

Отступы между ячейками не работают с border-collapse: collapse, что достаточно логично, ведь рамки ячеек в этом режиме «склеены» и их не разорвать.

Поэтому в этом задании мы используем border-collapse: separate, которое «расклеивает» ячейки. На самом деле это значение по умолчанию, а мы используем его только для наглядности. Если удалить свойство border-collapse, то результат не изменится, ячейки будут отображаться раздельно.

Отступы между ячейками можно задать:

с помощью атрибута cellspacing тега <table>
или c помощью CSS-свойства border-spacing.

Отметим, что свойство border-spacing задаётся для таблицы, в отличие от padding, которое задаётся для ячеек.

Ячейки-заголовки

Теперь мы познакомимся с ещё несколькими табличными тегами и научимся создавать более сложные таблицы.

Обычно в таблицах выделяют названия столбцов или строк. В HTML для этого предусмотрен специальный тег th, который расшифровывается как «table header» и обозначает ячейку-заголовок. Тег th аналогичен td, он так же должен располагаться внутри tr, для него стилями можно задавать все те же свойства.

По умолчанию текст внутри th выделяется жирным и выравнивается по центру ячейки.

В этом задании мы наконец-то добавим в нашу таблицу ячейки-заголовки и оформим их: добавим увеличенные отступы и более яркие рамки.

Пример:

table {
    border-collapse: collapse;
    border: 2px solid black;
}

td {
    padding: 5px;
    padding-right: 30px;
    border: 1px solid lightgray;
}

th {
    padding: 10px;
    border:1px solid black; /* стили для ячеек-заголовков */
}

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

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

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

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

Вот так:

<table>
  <caption>Текст</caption>
  ...
 </table>

Тег заголовка идёт первым внутри таблицы, но с помощью CSS можно переместить заголовок таблицы в любое место: сверху или снизу таблицы, по центру, справа или слева.

По вертикали заголовок таблицы перемещается CSS-свойством caption-side со значениямиtop и bottom, которые обозначают до и после таблицы соответственно.

По горизонтали заголовок таблицы выравнивается CSS-свойством text-align со значениями left, right и center.

Образец:

table {
    border-collapse: collapse;
    border: 2px solid black;
}

td {
    padding: 5px;
    padding-right: 30px;
    border: 1px solid lightgray;
}

th {
    padding: 10px;
    border: 1px solid black;
}

caption {
    caption-side: bottom;
    text-align: left;
    /* стили для заголовка таблицы */
}

Объединяем ячейки в строках

Мы подобрались к одному из самых сложных вопросов по работе с таблицами. Это объединение ячеек.

Когда вы объединяете ячейки в текстовом редакторе, например, Word, то программа многое делает за вас. В чистом HTML задача объединения сложнее, однако, не стоит пугаться, сам принцип объединения ячеек не так уж сложен, просто нужно больше внимательности.

Начнём с объединения ячеек по горизонтали. Чтобы объединить ячейки по горизонтали, необходимо использовать атрибут colspan у тегов th или td.

Когда вы задаёте ячейке атрибут colspan со значением 2, то ячейка как бы «растягивается» на ячейку справа, но та ячейка не исчезает, а отодвигается и в таблице появляется новый столбец. Чтобы удалить его, нужно удалить ячейку, которая находится справа от «растянутой».

Легче сделать и посмотреть, чем объяснять.

Объединяем ячейки в столбцах.

Объединение ячеек по вертикали немного сложнее. Оно осуществляется с помощью атрибута rowspan у тега td или th. Когда вы задаёте ячейке атрибут rowspan со значением 2, то ячейка как бы «растягивается» на следующую строку. При этом ячейка, которая была под «растянутой» отодвигается в своей же строке вправо, что добавляет в таблицу лишний столбец. Удалив ячейку, которая была под «растянутой» мы избавимся от этого столбца.

Закрепление colspan

Можно ли объединять более двух ячеек по горизонтали? Можно! При этом точно так же используется атрибут colspan. Однако, так как ячейка «растягивается» вправо больше, чем на одну соседнюю ячейку, то и лишних столбцов появляется больше.

Например, если установить colspan равным 4, то ячейка растянется на три соседние ячейки справа, а они в свою очередь сместятся, добавив в таблицу три столбца.

Комбо: colspan + rowspan

Можно растягивать ячейку одновременно и по вертикали, и по горизонтали. Для этого нужно задать ячейке два атрибута: rowspan и colspan.

Вытеснение соседних ячеек будет происходить так же, как и при обычном объединении ячеек. Правда, вытесненных ячеек окажется больше. Например, ячейка с rowspan="2" и colspan="2" вытеснит три соседних ячейки.

Этот случай из тех, которые легче объяснить на примере, чем на словах.

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

Готорвые задания можно посмотреть в посте "Готовые коды для тренировки"

Выравнивание содержимого в ячейках

Содержимое ячеек можно выравнивать по горизонтали и по вертикали с помощью CSS.

За выравнивание по горизонтали отвечает CSS-свойство text-align. Чаще всего используются значения left, center и right.

За выравнивание по вертикали отвечает CSS-свойство vertical-align. Чаще всего используются значения top, middle и bottom.

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

Чтобы задать выравнивание содержимого ячеек, надо в стилях указать:

td {
  vertical-align: значение;
  text-align: значение;
}

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

Добавим цвета

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

Цветами можно управлять с помощью этих свойств:

background-color — задаёт цвет фона,
color — цвет текста,
border-color — цвет рамок.

До этого мы использовали компактную форму для описания рамок: border: 1px solid lightgray. В этой записи цвет задаёт третья часть — lightgray.

Значения цветов в CSS задаются разными способами. Мы будем использовать ключевые слова для описания цвета.

Таким образом, чтобы задать цвета для ячейки в CSS, нужен такой код:

td {
  color: цвет;
  background-color: цвет;
  border: 1px solid цвет;
}

Конечно, раскрашивать можно и td, и th, и даже table.

Раскрашиваем строки

В предыдущем задании вы раскрасили ячейки и ячейки-заголовки с помощью CSS. Если задавать стили для тега, например, th или td, то они применятся ко всем тегам. В нашем примере все ячейки окрасились в светло-жёлтый, а все ячейки-заголовки в светло-голубой. Как быть, если стили нужно задать для какой-то определённой ячейки, группы ячеек, или строки? Можно использовать классы и применять стили для этих классов. Например, вот так:

.my-class {
  стили
}

Задаём размеры таблицы

По умолчанию ширина и высота таблицы зависит от содержимого и отступов внутри ячеек. Чем меньше содержимого, тем меньше размеры таблицы. С помощью CSS можно управлять размерами таблицы, задавать желаемую ширину и высоту. Также размерами можно управлять с помощью атрибутов таблицы, но мы рассмотрим только CSS.

Стоит отметить, что у таблицы есть минимальные размеры, которые зависят от содержания, меньше которых она не сожмётся, какое бы значение ширины или высоты ни задавалось.

Ширина таблицы задаётся с помощью CSS-свойства width, а высота с помощью свойства height, например:

table {
  width: 100px;
  height: 100px;
}

Размеры таблицы можно задавать как в абсолютных единицах, например, в пикселях — 20px, так и в относительных, в процентах — 20%. При использовании процентов размеры таблицы будут вычисляться с учётом размеров родительского элемента, в нашем случае окна мини-браузера.

Особое значение auto включает расчёт размеров по умолчанию. Например, width: auto; или height: auto;.

Важное замечание! Проценты при задании высоты обычно не работают.

Задаём размеры отдельных ячеек и столбцов.

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

Размеры ячеек задаются точно так же, как и размеры таблицы: с помощью CSS-свойств width и height.

Есть два варианта добавления стилей ячейкам:

Назначать ячейкам уникальные имена классов, например, class="cell-11", и применять стили для этих классов.
Использовать атрибут style, внутри которого можно писать CSS-код.

<td style="width: 100px;">
  ...
</td>

К счастью, редко нужно задавать размеры каждой ячейки. Обычно размеры ячеек прописывают, когда надо вручную установить ширину столбцов таблицы: для этого достаточно задать ширину для каждой ячейки из первой строки.Обязательно посмтрите мой пост -

HTML-разметка тела документа

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

Хотите освоить самые современные методы написания React приложений? Надоели простые проекты? Нужны курсы, книги, руководства, индивидуальные занятия по React и не только? Хотите стать разработчиком полного цикла, освоить стек MERN, или вы только начинаете свой путь в программировании, и не знаете с чего начать, то пишите через форму связи, подписывайтесь на мой канал в Телеге, вступайте в группу на Facebook.Пишите мне - kolesnikovy70 почта gmail.com

Страницы

Translate

Поиск по этому блогу

воскресенье, 27 марта 2016 г.

Формы.

Первая форма

Текстовое поле ввода

Идентификатор и значение по умолчанию

Подпись для поля ввода

Связываем подпись и поле по id

Добавим ещё одно поле

Поле для ввода пароля

Кнопка отправки формы

Многострочное поле ввода

Чекбокс или «галочка»

Переключатель или «радиобаттон»

Группа переключателей

Раскрывающийся список или «селект»

«Мультиселект»

Поле для загрузки файлов

Скрытое поле

Примеры форм.

HTML-Таблица.

HTML-Таблица.

Простейшая таблица.

Добавляем столбцы

Задаём рамки с помощью CSS

Улучшаем отображение рамок.

Горизонтальные и вертикальные рамки.

Отступы внутри ячеек

Отступы между ячейками

Ячейки-заголовки

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

Объединяем ячейки в строках

Объединяем ячейки в столбцах.

Закрепление colspan

Комбо: colspan + rowspan

Выравнивание содержимого в ячейках

Добавим цвета

Раскрашиваем строки

Задаём размеры таблицы

Задаём размеры отдельных ячеек и столбцов.

Ярлыки

Форма для связи

воскресенье, 27 марта 2016 г.