суббота, 27 июля 2013 г.

Введение в HTML (часть 2)

Блочные элементы (block)

Блочные элементы отличаются от строчных тем, что они занимают на странице блок — прямоугольник с определёнными шириной и высотой, чем и обязаны своему названию. Блочный элемент, если его свойства не изменять через стили, вообще один в строке. Зато он может вмещать в себя много строк текста, как абзац (параграф). Абзац — это, кстати, блочный элемент <p>. У блока есть внешний отступ (margin), внутренний отступ (padding) и граница (border), но, в отличие от строчного элемента, все эти свойства работают со всех сторон — слева, справа, сверху и снизу.

2.75 КБ

Это кусочек картинки, которую обычно рисует Chrome Inspector (встроенный в браузер Google Chrome инструмент для анализа и отладки вёрстки). Синим цветом обозначены размеры содержимого блока. Когда в стилях задаётся ширина и высота блока, то задаётся она именно для содержимого. Зелёный цвет тут — внутренний отступ, то есть расстояние от границы блока до его содержимого. Жёлтый цвет — граница блока. Оранжевый — внешний отступ блока, то есть то, на сколько он отодвигнает от себя окружающий текст. Например, если у блока задана ширина 100 пикселей, padding 10 пикселей, граница 1 пиксел, и margin 10 пикселей, то содержимое блока будет занимать сто пикселей, сам блок будет выглядеть шириной 122 пикселя (100 ширина контента + 10 пикселей с каждой стороны + по 1 пикселю с каждой стороны граница), а занимать физически места по ширине будет 142 пикселя. То же самое касается и высоты блока.

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

Наиболее часто и повсеместно используемый блочный тэг — <div>. Обычно разным дивам указывают в свойствах разные классы, и с помощью CSS управляют отображением. Без дополнительных свойств <div> с текстом внутри выглядит как просто кусок текста.

Параграф <p> — тоже, в некотором роде, блочный элемент, хотя обладает определёнными особенностями, которые сложились исторически. Блочный он потому, что для <p> можно указывать отступы слева, справа, сверху и снизу, как для блока, однако, он себя немного по-другому ведёт, и внутрь него вообще нельзя помещать блочные элементы. Обычно <p> используют для оформления абзацев, и это правильно. Куски текста, разделённые пустыми строками между собой — это всё-таки не абзацы с точки зрения структуры. И пустые строки между абзацами правильнее делать не с помощью тэгов <br>, а с помощью указанию <p> стилями отступа сверху или снизу.

<hr> горизонтальная линия. Используется достаточно редко, в чистом виде — практически никогда. Обычно <hr> раскрашивают стилями при помощи CSS и используют в декоративных целях.

<ul>, <ol> и <dl> — списки. Они тоже представляют из себя блоки. Разница между первыми двумя только в том, что <ul> (unordered list) — список неупорядоченных элементов (элементы отмечаются точками или, как они правильно называются, буллитами), <ol> (ordered list) — упорядоченный список элементов (элементы пронумерованы). <dl> (definitions list) представляет собой список определений и обычно никогда не используется за ненадобностью.

Внутри списков находятся элементы списков в тэгах <li>, и никак иначе. Текст просто так засовывать в список нельзя, только в <li>! Элементы списка <li> — тоже блочные элементы. Внутри <dl> элементы называются <dt> и <dd>, к ним относится то же самое правило — текст в списке может быть только внутри них. У упорядоченного списка есть свойство start — номер элемента, с какого начинать, а у <li> внутри него — свойство value, для того, чтоб задать номер элемента.

Обычно списки используются именно так, как должны — для перечисления подряд каких-нибудь элементов. Однако, с помощью CSS из них можно делать множество разнообразных вещей, и можно легко превращать <ul> в <ol> и наоборот.

Заголовки <h1>, <h2>, <h3>, <h4>, <h5> и <h6> тоже являются блочными элементами. Они служат для своей цели — являются заголовками. <h1> — заголовок самый большой, верхнего уровня (заголовок книги, например), <h2> — заголовок поменьше (заголовок части книги), <h3> — ещё меньше (заголовок главы, например), и так далее, вплоть до <h6>, который едва ли больше обычного текста. Значение заголовков в большей степени семантическое. Можно, конечно, заголовки страницы делать с помощью <span> или <div>, а сами заголовки превратить в декоративные украшения, но так делать не рекомендуется. Дело в том, что поисковые системы анализируют код страницы не по тому, как он выглядит, а по структуре, выделяя заголовки не по размеру текста в элементе, а по собственно тэгу элемента. Поэтому для лучших результатов и правильного отображения страницы в результате поиска в поисковых системах заголовки следует использовать только как заголовки. Их, конечно, тоже можно средствами CSS делать какими угодно на вид.

<pre> — тэг используется для вывода неформатированного текста.

<blockquote> — редко используемый тэг, предназначен для вставки цитат.

Блоки в строке (inline-block)

Существует ещё один способ отображения блочных элементов, inline-block. В этом случае блоки не занимают каждый всю строку, а размещаются в одной строке друг за другом паравозиком, если не влезают — переносятся на следующую строку, и так далее. При этом у блочных элементов, для которых свойство отображения inline-block, так же можно регулировать высоту, ширину, все отступы, как для обычных блоков. Если блоки окажутся разной высоты, то они будут выстраиваться так, чтоб расположенный в них текст находился на одной линии с текстом, расположенным вне блоков в одной с ними строке.

1.29 КБ

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

src — ссылка на картинку, обязательное свойство,

alt — альтернативный текст, показывается на месте картинки, если её не удаётся загрузить. Рекомендуется всегда указывать alt у картинки, пусть даже пустой.

Прочие свойства <img>, задающие отступы слева, справа, сверху и снизу, а также режим обтекания, я рекомендую не использовать, заменяя их на аналогичные стили в CSS.

Таблицы

Таблицы служат для отображения табличных данных. Однако, гибкость настройки, удобство работы с ними и, главное, то, что таблицы отображаются практически одинаково во всех браузерах, даже довольно древних, позволяет верстальщикам вообще все страницы верстать таблицами. В среде профессиональных веб-программистов «табличная вёрстка» считается зазорной и показателем непрофессионализма, однако, для новичка в этом нет ничего постыдного. Тем не менее, следует помнить, что с точки зрения структуры документа таблицы — только для отображения таблиц, и рисовать таблицами меню, какие-нибудь кнопки, плашки, или всю веб-страницу не рекомендуется. Для этой цели лучше подходят <div>, а повторяющиеся элементы вроде меню или товаров в каталоге можно делать при помощи <ul> и <li>.

Таблицы имеют следующую структуру:

<table>
 <caption>заголовок таблицы</caption>
 <tbody>
  <tr>
   <th>заголовок столбца</th>
   <th>заголовок столбца</th>
  </tr>
  <tr>
   <td>ячейка таблицы</td>
   <td>ячейка таблицы</td>
  </tr>
  <tr>
   <td>ячейка таблицы</td>
   <td>ячейка таблицы</td>
  </tr>
 </tbody>
</table>

Итак, основной тэг таблицы — <table>. Внутри него текст может быть размещён только внутри ячеек таблицы, в противном случае он вывалится за её пределы и всё будет выглядеть очень криво. В тэге <table> можно задать некоторые атрибуты (свойства) таблицы, чаще всего используют следующие:

width — ширина таблицы в пикселах (width="300"). Если указана ширина со знаком процента (width="30%"), то ширина выражается в процентах. Рекомендуется вместо этого свойства использовать соответствующие стили CSS;

cellspacing — расстояние между ячейками в пикселях. Обычно все пишут cellspacing="0", чтоб ячейки прижимались вплотную друг к другу;

cellpadding — внутренний отступ от границы ячейки до её содержимого в пикселях. Обычно все пишут либо cellpadding="0", либо задают внутренний отступ в ячейках с помощью стилей CSS.

<caption> необязательный тэг, в нём содержится название таблицы. Практически не используется.

<tbody> тэг, обозначающий собственно тело таблицы. Он тоже необязательный, но следует помнить, что браузер всё равно его сам доставит, если этого тэга не будет. Внутри этого тэга (или прямо внутри <table>) размещаются строки (rows) таблицы.

<tr> — строка таблицы. Внутри этого тэга размещаются ячейки таблицы.

<td> — ячейка таблицы. Этот элемент похож на блочный тем, что можно задавать ему ширину, высоту и все отступы стилями CSS. Кроме того, у <td> есть свои особенные свойства. Для того, чтоб объединить несколько ячеек по горизонтали, применяется свойство colspan. Например, для объединения трёх ячеек по горизонтали (в одном ряду) пишется так:

<td colspan="3"> ... </td>

Не следует забывать о том, что в других рядах должно быть по три ячейки на одну эту. Для объединения ячеек по вертикали используется свойство rowspan. В других рядах, на которые распространяется эта «высокая» ячейка, соответственно, должно быть на одну ячейку меньше. Пример таблицы с объединёнными ячейками:

<table>
 <tr>
  <td>обычная ячейка</td>
  <td>обычная ячейка</td>
 </tr>
 <tr>
  <td colspan="2">объединение ячеек по горизонтали</td>
 </tr>
 <tr>
  <td rowspan="2">объединение ячеек по вертикали</td>
  <td>1</td>
 </tr>
 <tr>
  <td>2</td>
 </tr>
</table>

Результат будет выглядеть примерно так:

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

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

<th> заголовок таблицы. Ведёт себя точно так же, как и тэг <td>, но отличается только тем, что шрифт в нём обычно жирный. Тэг <th> не обязательно размещать только в одном верхнем ряду, его можно засовывать в любой ряд таблицы вместо любой ячейки <td>. Смысл использования <th> вместо <td> точно такой же, какой и в использовании <h1> вместо <span> — с точки зрения структуры документа (то есть с семантической точки зрения) заголовок столбца правильнее должен быть оформлен в виде специального заголовочного тэга <th>, а не просто <td>.

Формы

Очень важный раздел HTML — это формы. Формы — это основной способ обратной связи и передачи данных от пользователя на веб-сервер. Загружать файлы, писать комментарии и статьи проще всего (и правильнее всего) через форму. Форму создаёт тэг <form>. Внутри него располагаются поля ввода, куда пользователь может вводить свои данные, и эти данные форма потом отправляет на веб-сервер. На одной странице может быть сколько угодно форм, в одной форме может быть сколько угодно полей ввода («сколько угодно» ограничивается разумными значениями. Один миллион, например, это уже вряд ли «сколько угодно», так как браузер вряд ли сможет отобразить такую страницу, а пара десятков или даже сотен — запросто). Поля ввода могут располагаться и вне форм, но формы тогда не смогут отправить данные, введённые в такие поля, на сервер.

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

action — адрес, на который форма будет отправлять данные;

method — POST или GET (можно маленькими буквами, по умолчанию — GET) — метод, которым форма будет отправлять данные. Метод GET — данные записываются в адресную строку после вопросительного знака и разделены амперсандом, например, так:

http://exapmle.com?var1=7&var2=ccc

В этом примере на сервер example.com отправляются методом GET параметры var1, равный 7, и var2, равный ccc. Соответственно, методом GET можно отправлять данные и без формы, просто вручную исправляя адресную строку в браузере. Количество данных, отправляемых методом GET, ограничено длиной адресной строки, что-то около порядка 2Кб.

Метод POST устроен несколько по иному, и отправляет данные не в адресной строке, а в специальной части запроса на сервер, для человека нигде не видимой, и потому для отправки данных методом POST требуются формы, без них никак. Зато «постом», то есть при помощи метода POST, можно заливать на сервер гораздо большие объёмы данных, ограниченные лишь настройками и возможностями сервера. Обычно это несколько мегабайт, но бывает и гораздо больше.

Ещё отличительные особенности GET и POST заключаются в том, про программисты серверных приложений (хотя бы на том же языке программирования PHP) говорят о «состоянии сервера», и метод GET передаёт данные, которые не меняют состояние сервера (например, осуществляется поиск или фильтрация данных), а запросы, отправленные методом POST, меняют состояние сервера — сохраняется комментарий или статья, оставляется голос в голосовании, происходит авторизация пользователя, и так далее. Эта идеологическая тонкость совершенна неочевидна для верстальщика на HTML, но если в перспективе предстоит писать джаваскрипты или серверные приложения, то лучше сразу иметь это в виду. Серверное приложение — это программа, работающая на сервере, в данном случае на веб-сервере. Клиентское приложение — это программа, работающая на компьютере пользователя, в частности, это браузер. Так как джаваскрипты исполняются в браузере, то они считаются также клиентскими приложениями.

Для того, чтоб можно было отправлять на сервер файлы, необходимо дополнительно указать у формы атрибут enctype="multipart/form-data", иначе файлы на сервер не отправятся. Файлы всегда загружаются методом POST.

В форме всё многообразие разных полей для ввода данных описывается всего тремя тэгами: <input>, <select> и <textarea>, причём <select> и <textarea> описывают всего по одной разновидности полей ввода. Всё остальное многообразие — это тэг <input> с разным значением свойства type. В любом тэге должно быть задано свойство name. С таким именем параметра значение будет передано формой на сервер. Например:

<form action="test" method="get">
 <input type="text" name="dzadza">
 <input type="submit">
</form>
1.77 КБ

Вот такая форма отправит на страницу test методом GET параметр dzadza, имеющий значение, которое ввёл пользователь:

test?dzadza=123+test

У тэга <input> может быть задано свойство value, оно будет определять значение элемента формы по умолчанию.

<input type="text"> — обычное текстовое поле ввода, как на картинке выше.

<input type="password"> — поле ввода пароля. Любой введённый туда символ экранируется и выглядит как чёрный кружочек или звёздочка.

<input type="checkbox"> — чекбокс. Нажат он или нет, определяется свойством checked. Обычно пишут checked="checked" на всякий случай. В том случае, если чекбокс отмечен, то форма отправит параметр с названием, заданным в свойстве name чекбокса и значением, заданным в value, если чекбокс не отмечен, то форма при сабмите не отправит этот параметр вообще. Если value не задано, то по умолчанию оно имеет значение «on», но это зависит от браузера, лучше проставлять заранее value="1", например. На всякий случай.

<input type="radio"> — радиокнопка или радиобаттон. Инпутов такого типа с одним именем должно быть несколько, на значение у них должно быть разное. Форма при сабмите отправит то, значение, которое было выбрано. Вот пример:

<form action="test" method="get"> 
 <input type="radio" name="r" value="1"> 
 <input type="radio" name="r" value="2"> 
 <input type="radio" name="r" value="3" checked="checked"> 
 <input type="submit"> 
</form>
1.46 КБ

Такая форма при сабмите отправит на страницу test методом GET значение параметра r, равное трём. Если выбрать среднюю радиокнопку, а потом нажать Submit, то r уже будет передано равным 2. Не нужно беспокоиться о том, что внезапно пользователь может выбрать два разных значения одновременно — браузер не позволяет это делать, и когда пользователь нажимает на один <input type="radio">, то с ранее выбранного <input type="radio"> с таким же значением name выделение снимается.

<input type="file"> — элемент загрузки файла. По соображениям безопасности не может иметь значения value. Выглядит в каждом браузере по-своему, но обычно это имя файла и кнопка, по нажатию на которую открывается диалог выбора файла.

<input type="hidden"> — невидимый элемент, значение. Обычно применяется для передачи из формы служебных параметров.

<input type="submit"> — кнопка, при нажатии на которую форма отправляет данные. Значение value этого элемента — надпись на кнопке.

<input type="reset"> — кнопка, при нажатии на которую все значения элементов формы сбрасываются на те, что были в самом начале.

<select> — выпадающий список. Внутри тэга <select> размещаются тэги <option> — это элементы выпадающего списка. Тэги <option> могут быть выделены в группы при помощи тэгов <optgroup> — группы опций. В свойство label тэга <optgroup> заключается название группы опций. Наличие <optgroup> не обязательно, часть <option> может быть в группах, часть — нет. <optgroup> не могут быть вложенными. У тэга <option> должно быть обязательно указано свойство value — значение этого свойства будет значением самого селекта. Текст, заключённый в тэг <option>, показывается в выпадающем списке как. Для того, чтоб задать какое-то значение выбранным по умолчанию, у тэга <option> проставляется свойство selected (обычно пишут selected="selected"). Пример тэга <select>:

<select name="param2">
 <optgroup label="Группа опций">
  <option value="1">Опция 1 в группе</option>
  <option value="2">Опция 2 в группе</option>
 </optgroup>
 <option value="3">Опция 3</option>
 <option value="4" selected="selected">Выбранная по умолчанию опция</option>
 <option value="5">Ещё одна опция</option>
</select>

<textarea> — этот тэг нужен для того, чтоб сделать большое многострочное поле для ввода текста. В отличие от обычного <input type="text">, который только однострочный, и переносы строк в котором никак не представлены. Дополнительные свойства, которые есть у <textarea> — это ширина в символах cols и количество строк rows, однако, эти свойства обычно никто не пишет, а высоту и ширину у <textarea> задают через стили CSS.

<label> — подпись к элементу формы. Более того, <label> может быть подписью вообще к чему угодно. Этот тэг прицепляется к тому элементу, подписью для которого является, через свойство id элемента и свойство for тэга <label>. Например:

<input type="checkbox" value="1" id="cb" /> <label for="cb">подпись к чекбоксу</label>

Самое полезное своство тэга <label> — при нажатии на <label> срабатывает и нажатие на чекбокс, что упрощает жизнь пользователю — пользователь может тыкать в подпись и не целиться курсором в сам чекбокс. Поэтому использование лабелов для чекбоксов должно быть обязательно, и хорошим тоном вёрстки считается задание лабелов для всех элементов формы.

<fieldset> — редко используемый тэг для того, чтоб рисовать рамку с подписью вокруг какого-нибудь содержимого, необязательно элементов формы. Это блочный элемент. Основное отличие от <div> — у <fieldset> внутри можно разместить тэг <legend>, содержимое которого будет показано как заголовок у <fieldset>.

Фреймы

Фреймы позволяют загрузить на веб-страницу кусок другой веб-страницы. Эта технология считается устаревшей и ей никто не пользуется. Единственный сохранившийся тэг, который используется, в основном, для баннеров рекламных систем — <iframe>. Он относится к разряду inline-block-элементов. Сейчас на смену тэгам <iframe> и вообще всем фреймам пришла технология AJAX, о ней я планирую рассказать в соответствующем разделе.

Справочная информация и ссылки

  1. http://www.w3.org/TR/html5/syntax.html — синтаксис HTML 5
  2. http://www.w3schools.com/tags/ref_entities.asp — HTML special characters
  3. http://www.w3schools.com/tags/tag_meta.asp — тэг meta
  4. http://ru.wikipedia.org/wiki/Элементы_HTML — краткий справочник тэгов
  5. http://ru.wikipedia.org/wiki/Форма_(HTML) — формы в HTML.
  6. http://www.w3schools.com/tags/tag_select.asp — элемент <select>

5 комментариев:

  1. млин, ты зачем распечатал маны по хтмлу?:)

    ОтветитьУдалить
  2. Спасибо, Дима. Мне как раз вот именно это и нужно было: коротко и ясно. Все прочитал

    ОтветитьУдалить
    Ответы
    1. Пожалуйста. Рад, что тебе пригодилось!

      Удалить

Ублюдочный Гугл поломал форму комментариев. Извините.