Отправляет email-рассылки с помощью сервиса Sendsay
  Все выпуски  

Пишем Форум на PHP & MySQL (веб-дизайн и программирование)


Информационный Канал Subscribe.Ru


Пишем Форум на PHP & MySQL

Пишем Форум на PHP & MySQL

 

(самоучитель по веб-дизайну и программированию)

 

Выпуск №2

 

Всем привет!

Сколько раз вы, путешествуя по страницам безграничного Интернета, желали создать нечто подобное, а возможно превосходящее все это по качеству и представлению. Возможно ли это? Конечно, Да. Главное не бойтесь экспериментировать, не бойтесь сделать такое, чего еще никто не видел. Новации в паутине важны настолько, что без них не было бы продвижения вперед, не усовершенствовались бы технологии и удобство в работе.

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

Проверка задания

 

Необходимо было отобразить слова первая и Интернет в слогане "Моя первая страница в Интернет" жирным шрифтом. Все очень просто. Тег <b> начинает тот текст, который должен быть жирным, а тег </b> завершает его, поэтому в нашу строку достаточно добавить две связки этого тега:

 

Листинг 2.1

<HTML>

Моя <b>первая</b> страница в <b>Интернете</b>

</HTML>

 

 

Экран компьютера

Моя первая страница в Интернет

 

История вторая "Проблема расположения информации"

 

Как вы думаете, как проще воспринимать информацию на экране: которая расположена хаотично, в один столбик или в определенном порядке и разложена по полочкам? Вообще говоря, для каких целей создается страничка.. в этом и ответ :) Ну да ладно, мы же с вами решили создать интернет форум-конференцию. И естественно вся информация на нем должна быть структурирована. В этом  нам помогают Таблицы.

 

Таблица - это, в общем случае, двумерный массив данных. Т.е это такая структура, которая состоит из строк и столбцов. И каждый элемент таблицы (ячейка) имеет свои свойства. Для создания таблиц используется тег <table>...</table> и внутренние теги создания строк <tr></tr> и столбцов <td></td>. Рассмотрим пример:

 

 

 

Листинг 2.2

<table border="1">

 <tr>

 

  <td>

  Информация 1 строки 1 столбца

  </td>

  

  <td>

  Информация 1 строки 2 столбца

  </td>

 

 </tr>

 <tr>

  <td>

  Информация 2 строки 1 столбца

  </td>

  <td>

  Информация 2 строки 2 столбца

  </td>

 </tr>

</table>

 

Теперь сохраните документ в любой папке под именем second.html и откройте его, нажав по нему 2 раза. Что же там отобразилось?

 

 

Экран компьютера

Информация 1 строки 1 столбца

Информация 1 строки 2 столбца

Информация 2 строки 1 столбца

Информация 2 строки 2 столбца

 

Все вполне предсказуемо. Только стоит пояснить составную часть тега <table> - [border="1"] Это утверждение указывает браузеру создать таблицу с границей! И ее размер составляет 1 единицу. Попробуйте поменять единицу на другое более высокое число, и вы увидите, что граница станет более выраженной :) Хотя я даже не представляю, когда могут потребоваться границы очень больших размеров.

А теперь ознакомимся с еще одним тегом <center></center> - все что будет расположено между ним - выведется на экран по центру окна браузера. Поставьте перед тегом <table> этот новый тег и посмотрите что произойдет:

 

Листинг 2.3

<center>

<table border="1">

 <tr>

 

  <td>

  Информация 1 строки 1 столбца

  </td>

  

  <td>

  Информация 1 строки 2 столбца

  </td>

 

 </tr>

 <tr>

  <td>

  Информация 2 строки 1 столбца

  </td>

  <td>

  Информация 2 строки 2 столбца

  </td>

 </tr>

</table>

</center>

Смотрите что у нас вышло:

Экран компьютера

Информация 1 строки 1 столбца

Информация 1 строки 2 столбца

Информация 2 строки 1 столбца

Информация 2 строки 2 столбца

Вот-вот.. таблица появилась ровно в центре экрана по горизонтали. Ну вот и отлично... На сегодня достаточно.

На прощание сегодня вам небольшое домашнее задание: Попробуйте сделать так, чтобы в нашей таблице появилась еще одна строка, но она состояла уже из трех столбцов, т.е мы бы получили составную таблицу. На следующей неделе обязательно узнаем правильный ответ а также прочитаем: Историю третью "Работаем со шрифтом" а также список ваших вопросов по Web-программированию, поступившим на адрес: address to question 2.1

 


http://subscribe.ru/
E-mail: ask@subscribe.ru
Отписаться
Убрать рекламу

В избранное