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

Создание сайтов (HTML CSS PHP MySQL JavaScript ActionScript)

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Рассылка которая делает сайты..." на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Декабрь 2012   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Автор
webonlife

Статистика

242 подписчиков
+35 за неделю
←   Все выпуски   →

Создание сайтов (HTML CSS PHP MySQL JavaScript ActionScript) Начинаем создавать сайт, таблицы


Начинаем создавать сайт

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

Я, чтоб не создавать новый аккаунт под этот сайт, размещу его в подкаталоге этого сайта. Так вы сможете на него заходить и видеть результат. Вы каталог для него можете создать прямо в каталоге "htdocs". Итак, назовем каталог "bee" (из англ. "пчела"). В нем создадим файл index.html. Теперь вы можете на него зайти, набрав в адресной строке браузера (если вы Apache включили) строку "localhost/bee".

Когда мы зайдем на главную страницу нашего сайта то обнаружим что там просто белый фон, что и не удивительно так как код страницы пока отсутствует. Напишем этот код (Пояснения будут в виде комментариев):

<!DOCTYPE html><!-- Указывает тип документа. В нашем случае это HTML5 -->
<html> <!-- Это контейнер который включает все содержимое веб-страницы. -->
<head> <!-- Это контейнер который включает в себя разную служебную информацию. В нем также можно размещать разные скрипты (JavaScript) и стили (CSS). -->
<title>МЕД И ПЧЕЛЫ</title> <!-- Это контейнер в котором указывается имя страницы (отображается на вкладке страницы браузера) -->
</head>
<body> <!-- Это контейнер который включает в себя все, что будет отображаться в браузере с помощью тегов или без них-->
</body>
</html>

Сохраняем изменения в файле index.html, обновляем страницу в браузере и видим все тот же белый фон)). Но изменения есть, теперь мы имеем название страницы которое выводится в имени вкладки браузера. Только это мы с вами уже проходили, это чтоб повторить перед тем как двигаться дальше. А сейчас займемся изучением нового материала.

Таблицы в HTML (контейнер <table>)

Обратите внимание на то как на большинстве сайтов расположена информация. В основном это такие себе колонки ну или ячейки. Такое построение легко достигается с помощью таблиц. Сейчас говорят что таблицы - это устаревшее а нужно использовать блочную верстку страниц в div-ах. Я согласен что не стоит использовать устаревшие технологии но блочную верстку пока еще до совершенства не довели и близко... При блочной верстке тратится намного больше времени и сил, кроме того трудно добиться одинакового отображения страниц в разных браузерах, вложенность блоков часто не работает... С таблицами этих проблем нет, они одинаково отображаются в разных браузерах, ими легче пользоваться чем блоками и в таблицы можно вложить сколь угодно таблиц и других блочных элементов. Мне кажется что технология не может устареть если ей нет достойной альтернативы)). По выше указанным причинам мы сначала освоим таблицы.

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

<table bgcolor="lime" border="3" bordercolor="red">
<tr>
<td>В таблице информация для пользователя располагается в столбцах, в них можно разместить как блочные так и строчные элементы, блочные можно вкладывать друг в друга.</td>
<td>Если ширина и высота таблицы или ее элементов не указаны то эти значения берутся автоматически исходя из вложенности элементов и содержания каждого столбца.</td>
</tr>
<tr>
<td>Ширину, высоту, цвет фона, текста, цвет и ширину границ таблицы и ее элементов мы обсудим в следующем уроке, когда начнем изучать стили.</td>
<td></td>
</tr>
</table>

В таблице информация для пользователя располагается в столбцах, в них можно разместить как блочные так и строчные элементы, блочные можно вкладывать друг в друга. Если ширина и высота таблицы или ее элементов не указаны то эти значения берутся автоматически исходя из вложенности элементов и содержания каждого столбца.
Ширину, высоту, цвет фона, текста, цвет и ширину границ таблицы и ее элементов мы обсудим в следующем уроке, когда начнем изучать стили.  

Теперь запомним необходимые нам атрибуты тегов строки и столбца таблицы. Они обозначают как располагаются ячейки внутри таблицы относительно друг друга. Чтобы легче понять как это работает, запомните две простые вещи: столбец может быть только прямоугольником (для особо придирчивых - квадрат является частным случаем прямоугольника =) ), для ячейки указывается какой промежуток она занимает в столбцах и строках. Атрибуту colspan присваивается значение количества столбцов, с которыми столбец должен соседствовать, атрибуту rowspan присваивается значение количества строк, с которыми столбец должен соседствовать. Посмотрим это на примере:

<table bgcolor="lime" border="3" bordercolor="red"><!-- Открываем таблицу -->
<tr><!-- Открываем строку -->
<td colspan="2">><!-- Открываем столбец и указываем, что он соседствует с двумя столбцами -- >
</td><!-- Закрываем столбец -->
<td rowspan="3">><!-- Открываем столбец и указываем, что он соседствует с тремя строками -- >
</td><!-- Закрываем столбец -->
</tr><!-- Закрываем строку -->
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table> <!-- Закрываем таблицу -->


  
  
  

Если у кого-то не отображаются ячейки в таблице, вставьте в них по одному символу или символ пробела ( ). В следующем уроке мы создадим таблицу нужную для нашего сайта, сайт будет состоять уже больше чем из одной страницы. Также мы наконец начнем изучать стили =). Всем удачи!

Читать далее

В избранное