Простая вёрстка в HTML. Урок №3.

* 27-12-2013, 10:26 * A_Protasov * Комментариев: 2

Рейтинг:

Простая вёрстка в HTML. Урок №3.

Вёрстка таблицами. Часть-1.

На прошлом занятие, мы с вами создали, почти пустую HTML страницу.  Сегодня мы начнем создавать каркас нашей будущей страницы. Но прежде чем мы начнем созидать, хотелось бы объяснить саму суть, что, как и почему мы это будем делать. На сегодняшний день все стилевые оформления страниц, делаются при помощи каскадных таблиц стилей, или проще говоря, CSS. Но до появления CSS все страницы и сайты создавались, только с помощью обычных таблиц и HTML. Хотя в интернете ещё до сих пор полным полно сайтов, которые созданных, на одних таблицах, или смешанный так сказать дизайн. Но что бы понять преимущества, CSS и полностью оценить его достоинства, то нельзя миновать путь, создавая структуру сайта и минуя таблицы.  Именно поэтому мы и будем создавать нашу, первую страничку при помощи обычных таблиц. Сразу скажу, наберитесь терпения и будьте внимательны, поскольку для новичков этот процесс немного сложный и путанный.

Код таблицы HTML.

<table style="width: 1024px; height: 100px; text-align: center; margin-left: auto; margin-right: auto;"
bgcolor="#00FFFF" bordercolor="#0000FF"  border="1" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td></td>
    </tr>
  </tbody>
</table>

 

Как устроена таблица в HTML.

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

<center><h1>Hello world!</h1></center>

И вставьте код таблицы между тегами <body></body>. Сохраните и запустите в браузере. Что мы видим узкую прямоугольную таблицу, с фоном и бордюром. В дальнейшем мы уберём бордюр и фон, но сейчас нам нужна визуализация, что бы мы, не запутались в своих творениях. Эта таблица послужит нам основным каркасом, в которую мы вложим ещё целую кучу таблиц, для шапки сайта, боковых колонок, основной части и нижней. А пока давайте изучим структуру данной таблицы.

<table style="width: 1024px; height: 100px; text-align: center; margin-left: auto; margin-right: auto;"

Начнём с верхней строки. Первое что мы видим после открытия кода <, это парный  тегtable, который сообщает браузеру, что он имеет дело с таблицей.  Дальше браузер получает информацию о стиле таблице, на это ему указывает style=" , где width: 1024px; это ширина таблицы, а height: 100px; высота, в дальнейшем мы её заменим, на проценты вот так height: 100%;.

Здесь text-align: center; мы указываем браузеру, как будет формироваться содержимое таблицы, в данном случае по центру. Что бы наша таблица, не прилипала к левому краю экрана монитора, Нам надо задать параметры, как он должен определить отступы, ведь мониторы у всех разные, вот тут нам поможет тег margin, который и расскажет что да как. А говорит он вот что margin-left: auto; margin-right: auto; отступы справа и с лева, определять автоматический, в зависимости от ширины экрана. Закрываем эту строку ",  и переходим к нижней части.

bgcolor="#00FFFF"  bordercolor="#0000FF"  border="1" cellpadding="0" cellspacing="0">

В этой строке нас встречает bgcolor="#00FFFF"  , этот тег задаёт цвет фона нашей таблицы, то есть если мы с него сейчас уберём код цвета bgcolor="" , наш фон станет белым, точнее прозрачным. Следующим идёт, bordercolor="#0000FF"  этот тег определяет цвет бордюра, а вот уже толщину бордюра определяет border="1", где значение 1 это его толщина в пикселях, если вместо 1 поставить 0, то и цвет и бордюр перестанут, отображается. Тег cellpadding="0", указывает расстояние от  рамки до содержимого, пока он имеет 0 значение, но возможно он нам понадобится. Расстояние между ячейками нам задаст cellspacing="0", который то же пока имеет 0 значение.

Далее идут парные теги <tbody> и <tr>, сейчас мы не будем заострять на них внимание, дабы не запутаться, поскольку к ним тоже можно задать параметры, а это мы сделаем в процессе вёрстки нашей таблицы. И вот перед нами парный тег <td></td>, это и есть контейнер, куда вставляется само содержимое таблицы, например вот так <td>Привет!</td>. Ну а ниже пошли все закрывающие теги, завершающие обзор таблицы.

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

До встречи в следующем уроке «Простая вёрстка в HTML. Урок №4.», «Вёрстка таблицами. Часть-2».


razdacha.jpg

Просмотров: 9 406
Последние новости блога
Закруглённые края блока CSS.
Сегодня мы поговорим о том, как создать красивый блок, с закруглёнными краями, при помощи CSS. Здесь мы будем использовать два блока, а значит, пропишем два стилевых класса. Первый класс назовем
Простая вёрстка в HTML.  Урок №2.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html;
Бесплатный видео-курс «Писарь».
Данный видео-курс «Писарь» - это абсолютно бесплатный комплекс, состоящий из восьми уроков общей продолжительностью 120 минут.1.Кто такой фрилансер и где его найти?В первой части
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
WralalapluplE
  • 0

29 декабря 2013 19:44 WralalapluplE

Будем ждать продолжения winked
.
SteesCosque
  • 0

10 января 2014 14:31 SteesCosque

Не пойму а зачем верстать таблицами если есть CSS?
.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.


Статистика

  • Рейтинг@Mail.ru