Основы HTML. Таблицы. Часть 1.

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

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

Тег <table> и </table> служит для создания таблицы и в свою очередь служит контейнером для элементов, описывающих содержание таблицы. Таблица состоит из строк, для этого служит тег <tr> и </tr>. Строки, в свою очередь состоят из ячеек и задаются с помощью тегов <th> и </th> — для заголовочных ячеек, <td> и </td> — для ячеек-данных.

Синтаксис тега выглядит так:

<table>
<tr>
<td>контент</td>
</tr>
</table>

Рассмотрим атрибуты таблицы:

align="значение" — задает горизонтальное положение таблицы и может иметь следующие значения:

  • left — выравнивает таблицу по левому краю;
  • center — выравнивает таблицу по центру;
  • right — выравнивание таблицы по правому краю.

valign="значение" - задает вертикальное положение контента ячейки и может иметь следующие значения:

  • top — выравнивает контент ячейки по верхнему краю;
  • middle — выравнивает контент ячейки по центру, оно же является значением по умолчанию;
  • bottom — выравнивает контент ячейки по нижнему краю;
  • baseline — выравнивает контент ячейки по базовой линии.

width="ширина" — задает ширину таблицы, значение в пикселах или процентах. Значение используется, если оно не конфликтует с соседними значениями в соседних ячейках того же столбца.

height="высота" — задает высоту таблицы, значение в пикселах или процентах. Значение используется, если оно не конфликтует с соседними значениями в соседних ячейках того же столбца.

background="URL" - задает в качестве фона таблицы графический файл, изображение. URL — любой допустимый путь к изображению (относительный или абсолютный).

bgcolor="цвет" — задает цвет фона таблицы. Может использоваться совместно с background.

border="толщина" — задает толщину рамки таблицы, значение в пикселах. По умолчанию рамка не рисуется.

bordercolor="цвет" — задает цвет рамки таблицы.

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

cellspacing="значение" — задает расстояние между внешними границами ячеек. Значение в пикселах.

cols="значение" — задает какое количество столбцов будет в таблице. Значение в пикселах.

frame="значение" — задает прорисовку рамок вокруг таблицы. Параметр может иметь следующие значения:

  • box или border — рамка рисуется со всех четырех сторон;
  • void — таблица без внешних рамок;
  • above — рамка рисуется только с верхней стороны;
  • below — рамка рисуется только с нижней стороны;
  • lhs — рамка рисуется только с левой стороны;
  • rhs — рамка рисуется только с правой стороны;
  • hsides — рисуется нижняя и верхняя сторона рамки;
  • vsides — рисуется левая и правая сторона рамки.

Толщина границы рамки указывается с помощью параметра border. При отсутствии этого параметра рамки будут отсутствовать.

rules="значение" — задает границы между ячейками. Параметр может иметь следующие значения:

  • all — линия отображается вокруг каждой ячейки таблицы;
  • cols — линия отображается между колонками;
  • non — скрывает все линии внутри таблицы;
  • rows — линии только между строками таблицы;
  • groups — показывает линии между группами, которые образуются тегами <thead>, <tfoot>, <tbody>, <colgroup>.

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

Желаю успехов и хороших майских выходных. ;-)

Рубрика: Без рубрики | Метки: | Добавить комментарий

Основы HTML. Ссылки

linksСегодня хотел бы рассмотреть с Вами, как мы делаем «телепортацию» с одной страницы сайта на другую, или бросок вглубь к указанному фрагменту страницы, или переход на другой сайт. Блуждая по необъятным просторам интернета мы делаем переходы со страницы на страницу и делаем эти переходы с помощью ссылок.

Гиперссылка (далее ссылка) — являются ключевыми элементами html-документов и связывают между собой не малое количество web-страниц и web-сайтов в единую сеть.

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

Для создания ссылок предназначен тег <a></a>.

Синтаксис текстовой ссылки выглядит так: <a href="URL-адрес">text</a>

Параметр href="URL-адрес" — обязательный для ссылок с абсолютным адресом страницы, на которую будет осуществлен переход, по умолчанию новый документ загружается в текущее окно браузера. text — выступает в качестве текстового указателя. Читать далее

Рубрика: Без рубрики | Добавить комментарий

Основы HTML. Работа с изображениями

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

Изображение вставляется с помощью одинарного тега <img> (image (англ.) — изображение), и имеет один обязательный атрибут srs (source (англ.) — источник) — URL-адрес графического изображения, ссылка, т.е. путь к изображению.

Путь  к  изображению  может  лежать  как  с  Вашего  компьтера, например: Мазуренко Е.В.jpg (для удобства сохраняйте изображения в той же папке, где сохранен Ваш html-документ, тогда можно указать только имя файла, иначе необходимо прописывать весь путь), так и с сайта, на котором лежит изображение. Тогда путь необходимо указывать полностью. Например, я скопирую ссылку изображения, которое находится на моем блоге «С чего начать?»: Читать далее

Рубрика: Без рубрики | Метки: | Добавить комментарий

Основы HTML. Работа с текстом

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

Выделяется текст, определенный с помощью параграфа открывающийся тегом <р> и закрывающийся </р>.

Еще можно использовать тег переноса строк — <br>, как я делал на предыдущих примерах «Использование тега br», но не использовал параграф.

Что же еще можно выполнять с параграфами?

С помощью <p align="center"></p> параграф можно выравнивать по центру;
left — по левому краю страницы;
right — по правому краю страницы;
justify — по ширине страницы

Заменяю тег <br> на тег <p></p> и выравниваю параграфы так, как мне угодно:

Rabota_s_textom

Теперь смотрим, что получилось в режиме html:  Читать далее

Рубрика: Без рубрики | Метки: | Добавить комментарий