Если вы читаете эту статью, значит у вас установленна специальная программа - броузер. Всего каких то лет 5-6 назад, интернет сообществу было известно 2-3 броузера не более, сейчас же обстановка сильно изменилась и нам уже доступно достаточное разнообразие этих программ, для просмотра интернет страничек, да и вообще какого либо содержимого web ресурса. Каких броузеров только нет, и Opera и Internet Explorer, Mozilla и Google Hrome... список можно продолжать и продолжать, но в чём собственно суть того, что я хочу описать в этой статье о кроссброузерности? Дело в том, что каждый разработчик программ для просмотра интернет страниц, следует своим правилам и своим приоритетам в плане правильной, с точки зрения визуализации интернет содержимого. Не все производители придерживаются одной какой то грамотной линии, действительной для всех разработчиков. Вот отсюда и выходит, что отображает один броузер, другой броузер отображает этот же элемент сайта по своему или не отображает совсем.
И из этого и следует объяснение понятия кроссброузерности - это построение кода сайта, соответствующим правилам всех основных (и наиболее популярных у пользователей глобальной сети) броузеров.
Если какой то элемент или способ вывода той или иной части сайта (страницы) может отображаться не одинаково во всех броузерах, то такой способ вёрстки сайта не применяется, а применяется только те способы, которые выводят визуально содержимое сайта во всех броузерах максимально приближённо к единому "эталону". Надеюсь вы чётко поняли, из моих пояснений, что такое кроссброузерность.
Что такое Валидация и для чего она нужна?
Английское слово Validation в различных ключевых моментах переводится по разному. В нашем случае, перевод будет уместен как - сверка, с обязательным и идеальным стандартом и выполнение определённых, заявленных жёстких требований.
В сайтостроении этот термин означает - соответствие созданного web документа, требованиям спецификации и стандартам консорциума W3C (www.w3c.org) при поддержке разработчиков браузеров.
Есть определённые жёсткие стандарты в построении веб документов средствами html и css. Разработчики браузеров иногда пренебрегают этими требованиями и из за этого в разных браузерах, один и тот же элемент сайта, визуально смотрится совершенно по разному.
Сам процесс загрузки страницы браузером происходит приблизительно следующим образом:
- загружается содержимое страницы
- проверяются соответствия элементов html и css кода данного web документа стандартам валидации... этого браузера!
- если есть НЕсоответсвия, браузер исправляет их, подстраивая под свои стандарты, на которые запрограммировали их разработчики. При большом количестве "ошибок" браузер какое то время может быть не доступен, так как в это время он занимаеться исправлением. Это время обычно мгновенно, но всё складывается из мгновений и нарастает как снежный ком в длительные ожидания.
- полученные данные кешируются на компьютере и выводятся на монитор.
И вот что бы не было таких ожиданий и есть стандарт валидации - W3C.
Урок HTML №6 - атрибут заголовка таблицы
Тег <th>.....</th> применяется для ячеек первой строки таблицы, практически это "шапка" таблицы. По умолчанию, содержимое данного тега отображается браузером жирным шрифтом и располагается по центру ячейки. По сути, это таже ячейка, но с дополнительными стилевыми параметрами, которые уже предустановлены по умолчанию, это жирный шрифт с горизонтальным и вертикальным выравниванием по середине. Но которые можно дополнительно изменять.
Давайте рассмотрим этот урок на практике, для этого как всегда создадим .html документ с следующим кодом таблицы:
<table border="1px" height="100px" width="450px">
<tr>
<th>Заголовок</th>
<th>Заголовок</th>
<th>Заголовок</th>
</tr>
<tr>
<td>Текст</td>
<td>Текст</td>
<td>Текст</td>
</tr>
<tr>
<td>Текст</td>
<td>Текст</td>
<td>Текст</td>
</tr>
</table>
, где
height="100px" - общая высота таблицы
width="450px - общая ширина таблицы
border="1px" - толщина рамки таблицы
В итоге получим:
Урок №4 - атрибуты таблицы colspan и rowspan
Иногда при вёрстке HTML страницы, необходимо объеденить некоторые ячейки в таблице, в одно целое. Ну например такая ситуация, в HTML коде страницы, какой либо объект дизайна располагается в 3х ячейках одной и той же строки HTML таблицы. Но вы ещё хотите добавить одну строку выше, но поместить в неё только одну ячейку. Если это попытаться реализовать обычными средствами вёрстки таблицы, то у нас получится следующее...
Это код таблицы в Notepad++ *где исходя из раннее пройденных нами уроков:
border="1" - толщина рамки таблицы
width="200px" - ширина таблицы (если не указана высота таблицы,то она по умолчанию автоматически устанавливается "по содержимому")
<table border="1" width="200px">
<tr>
<td>4 ячейка</td>
</tr>
<tr>
<td>1 ячейка</td>
<td>2 ячейка</td>
<td>3 ячейка</td>
</tr>
</table>
Это то что у нас получится в броузере исходя из вышенаписанного:
В броузере будет такой результат: СМОТРЕТЬ
Итог как видим, корявый внешний вид и не грамотное отображение таблицы. Так как же нам поступить в этой ситуации? Для этого есть теги ячеек таблицы, colspan и rowspan.