четверг, 27 марта 2014 г.

HTML для хомячков | текст, таблицы

          За последнее время несколько раз столкнулся со следующей проблемой: Приглашаю в соавторы людей (например в проекты "Electronica" или "NEANE Records - Лента Новостей") из числа ведущих собственные, и вдруг оказывается, что они слабо знакомы с основным языком интернета - HTML - на котором воплощены все страницы всех сайтов без исключения, и который в тех или иных основах очень желательно знать при создании в сети собственных публикаций - в своем блоге или на персональном сайте - это просто необходимо представлять себе в XXI веке. Как говаривал в свое время незабвенный Владимир Ильич Ленин : «Каждая кухарка должна научиться управлять государством», и это само по себе в день настоящий актуально как никогда, так и к пользователям интернета в той же мере - даже если ты кухарка постящая в блоге любимых котиков день ото дня все одних и тех же, знать основы HTML тебе и твоим котикам не помешает - это и качество публикаций в Котоблоге повысит и быть может в какой-то момент станет причиной понимания того, что можно и чем-то более умным заняться - со знанием-то HTML!!!

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

          Подобные соображения подтолкнули меня к написанию одной статейки, которая быть может будет иметь продолжение, а может и нет. Но пользу Вам принести должна.

          По сути HTML - язык свойств и координат. То, что тексту можно задавать определенные свойства, Вы наверное уже знаете. Что бы жирным написать, надо некоторую часть текста заключить между открывающим и закрывающим тегом <b>. Вот, как пример, <b>жирный текст</b> - эта конструкция в составе HTML-страницы будет для посетителя сайта выглядеть просто набранной жирным шрифтом фразой.

жирный текст

          Аналогичные конструкции с использованием тегов <i>, <u>, <s> реализуют наклонный, подчеркнутый или зачеркнутый текст и могут использоваться вместе при соблюдении правила вложенность, то есть порядок открывающих тегов и закрывающих должны быть противоположны друг другу: <b><i><u>фраза будет отображена жирным наклонным подчеркнутым шрифтом</u></i></b>.

фраза будет отображена жирным наклонным подчеркнутым шрифтом

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

http://neanerecords.blogspot.ru/2014/03/symphony1.html ( кликнуть по ссылке )

          Это удобно реализовать с помощью так называемых "таблиц". В HTML таблицы строятся из 3-х основных структурных элементов:

  1. Тег <table> и соответствующий ему закрывающий тег </table>. Любая таблица с него начинается и им заканчивается. Все остальное в таблице должно располагаться между этими тегами. Внутри угловых скобок открывающего тега <table> могут быть разного рода операторы описывающие свойства таблицы: <table width="800" height="400" cellpadding="0" cellspacing="0" bgcolor="#204080" bordercolor="#306090" border="1">.
    • width - ширина (если не указаны единицы измерения, то исчисляется в экранных пикселях);
    • height - высота (аналогично),
    • cellpadding - отступы между границами ячеек таблицы и их содержимым ("0" - текст или фотографии идут впритык к границе ячейки, по умолчанию браузеры задают один пиксель);
    • cellspacing - отступы между ячейками таблицы ("0" - ячейки идут впритык друг к другу, по умолчанию браузеры задают один пиксель);
    • bgcolor - цвет фона таблицы в 16-ричной системе RGB (если не указан, то отсутствует - фон таблицы будет прозрачным);
    • bordercolor - цвет границ таблицы и ее ячеек в 16-ричной системе RGB (если не указан, то отсутствует - границы будут невидимые);
    • border - толщина границ таблицы и ее ячеек в экранных пикселях.

    Разумеется некоторые свойства можно опустить - не упоминать вовсе. Но некоторые нужны. В частности cellpadding="0" cellspacing="0" (с нулевым значением или другим каким-то по ситуации) приходится использовать всегда, потому, что в противном случае браузеры будут задавать нежелательные отступы и не позволять емко и рационально разместить в ячейках таблицы контент - фотографии и текст. Значение ширины таблицы можно указывать в процентах: width="100%" тогда браузер автоматически рассчитает общую ширину таблицы в зависимости от того, где она размещена - это может быть процентное отношение к ширине экрана компьютера того или иного пользователя, либо процентное отношение к ширине другого структурного элемента HTML-страницы, в который вставлена эта таблица - одна таблица имеет право размещаться внутри другой таблицы. Тогда в случае определения ее ширины в процентах, ширина будет вычисляться от ширины того свободного пространства в который таблица помещена.

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

  3. Тег <td> - он определяет свойства и вмещает содержимое ячейки столбца. Содержимое ячейки (текст или фотографии, а может быть видео или аудио-плеер - что угодно) находится между открывающим и закрывающим тегом, например <td width="25%" height="100" align="center" valign="top">фамилия, имя, отчество</td>. Отдельно стоит сказать об операторах свойств тега <td>:
    • width - ширина ячейки может быть задана в пикселях или в процентах от общей ширины таблицы;
    • height - высота - величина условная, в процентах как правило не задается - только в пикселях, но является минимально-ориентировочной и растягивает весь ряд вниз при переполнении контентом;
    • align - ориентирует содержимое ячейки по правому, левому краю или по середине (возможные значения: left, right, center, justify - последнее применимо только к тексту и растягивает текстовой абзац во всю ширину ячейки, превращая его по внешнему виду в кирпич; по-умолчания отрабатывается значение left);
    • valign - ориентирует содержимое ячейки по вертикали (возможные значения: top, middle, bottom; по умолчанию отрабатывается значение middle).

    Так же допустимо задание отдельного цвета для каждой ячейки, но сделать ячейку без заливки (прозрачную) при заданном цвете фона в теге <table> уже не удастся. Так же не удастся изменить простыми методами ширину границы ячейки - определяется в теге <table>, но можно задать ей другой цвет.

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


Вот пример типичной таблицы 4x3 (4 столбца x 3 ряда).

<table width="700" cellpadding="0" cellspacing="10">
 <tr>
  <td width="25%">содержимое ячейки A1</td>
  <td width="25%">содержимое ячейки A2</td>
  <td width="25%">содержимое ячейки A3</td>
  <td width="25%">содержимое ячейки A4</td>
 </tr>
 <tr>
  <td>содержимое ячейки B1</td>
  <td>содержимое ячейки B2</td>
  <td>содержимое ячейки B3</td>
  <td>содержимое ячейки B4</td>
 </tr>
 <tr>
  <td>содержимое ячейки C1</td>
  <td>содержимое ячейки C2</td>
  <td>содержимое ячейки C3</td>
  <td>содержимое ячейки C4</td>
 </tr>
</table>

... и как оно отрабатывается браузером

содержимое ячейки A1 содержимое ячейки A2 содержимое ячейки A3 содержимое ячейки A4
содержимое ячейки B1 содержимое ячейки B2 содержимое ячейки B3 содержимое ячейки B4
содержимое ячейки C1 содержимое ячейки C2 содержимое ячейки C3 содержимое ячейки C4

          Можно добавить в описание таблицы в теге <table> цвет фона, границ ячеек и их толщину, переопределить зазор между ними, вот таким, например, образом:

<table width="700" cellpadding="10" cellspacing="10" bgcolor="#204080"
 bordercolor="#306090" border="1">
 <tr>
  <td width="25%">содержимое ячейки A1</td>
  <td width="25%">содержимое ячейки A2</td>
  <td width="25%">содержимое ячейки A3</td>
  <td width="25%">содержимое ячейки A4</td>
 </tr>
 <tr>
  <td>содержимое ячейки B1</td>
  <td>содержимое ячейки B2</td>
  <td>содержимое ячейки B3</td>
  <td>содержимое ячейки B4</td>
 </tr>
 <tr>
  <td>содержимое ячейки C1</td>
  <td>содержимое ячейки C2</td>
  <td>содержимое ячейки C3</td>
  <td>содержимое ячейки C4</td>
 </tr>
</table>

... и мы получим таблицу несколько иного вида:

содержимое ячейки A1 содержимое ячейки A2 содержимое ячейки A3 содержимое ячейки A4
содержимое ячейки B1 содержимое ячейки B2 содержимое ячейки B3 содержимое ячейки B4
содержимое ячейки C1 содержимое ячейки C2 содержимое ячейки C3 содержимое ячейки C4

          Для удобства читаемости кода обычно каждый новый тег начинают с новой строки

Отправить комментарий