И уж тем более иметь представление об основах 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-х основных структурных элементов:
- Тег <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-страницы, в который вставлена эта таблица - одна таблица имеет право размещаться внутри другой таблицы. Тогда в случае определения ее ширины в процентах, ширина будет вычисляться от ширины того свободного пространства в который таблица помещена.
- Тег <tr> - он открывает ряд в котором содержатся ячейки столбцов. В завершении описания всех ячеек столбцов этот тег так же требует обязательного закрытия </tr>. В открывающем теге так же возможны операторы описания свойств, но чаще всего их не используют - они как правило тут избыточны.
- Тег <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 |
Для удобства читаемости кода обычно каждый новый тег начинают с новой строки
Комментариев нет:
Отправить комментарий