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

Создание сайта от А до Я

  Все выпуски  

Создание сайта от А до Я


 
Создание и продвижение сайтов
Создание сайтов
Этапы создания сайта
Визитная карточка
Корпоративный сайт
Интернет-магазин
Портал
Поисковое продвижение
Контекстная реклама
Работа с аудиторией
Контент-поддержка
Администрирование
Хостинг
Наши партнеры
Проекты
Персонально
Поддержка
Контакты
Заказать
Создание сайта
Продвижение сайта
Форумы и комьюнити
Доход от сайта
Организация удаленной работы
Форум
Колдовство над тегами
Мы начинаем разбирать тот код, который использовали в прошлой статье, параллельно изучая, что же мы делаем и какую информацию браузеру передаем.

<html>

</html>

Этими тегами начинается и заканчивается наш документ. Этот тег говорит браузеру, что документ, который он открывает – документ html, а не, допустим, документа того же блокнота.

<html>
<head></head>
<body></body>
</html>

Head – буквально голова, а body – тело. Это две матрешки, которые вкладываются в одну большую – в html - и говорят они браузеру, что в данном месте лежит информация о самой странице (в голове), а вот здесь лежит информация о том, что, собственно, является содержимым страницы (тело). Без этих тегов не обходится ни один html –документ.

В голове у нас информация о том, как называется страница, а в теле – таблица с текстом. Разбираемся подробнее.

Если вы читаете все статьи данного раздела подряд, то Блокнот с кодом вашей странички у вас так и остался открыт. Если же нет – кликайте правой кнопкой по ярлыку вашей страницы на рабочем столе и выбирайте – открыть с помощью Блокнота.
Продолжаем.

<head>
<title>Ваша первая страничка</title>
</head>

Попробуйте поменять слова «Ваша первая страничка» на что-нибудь другое. ФАЙЛ – СОХРАНИТЬ. Теперь кликайте на ярлык вашей страницы (нажмите F5, если она у вас открыта). Вверху браузера вы увидите текст, который вы написали между тегами <title> и </title>. Из этого делаем логичный вывод – этот текст формирует заголовок браузера или «тайтл» - говорит название нашего документа, характеризует его.

Ближе к телу. Как мы уже сказали выше, в теле у нас – таблица. Давайте посмотрим, как делается таблица в html. Вспоминаем матрешку.

<body>
<table>

</table>
<body>

Тег table – сообщил браузеру о том, что в данном месте начинается и заканчивается таблица.

<table>
<tr>
<td>

</td>
</tr>
</table>

Вот так выглядит элементарная таблица, состоящая из одной строки и одного столбца – то есть одной ячейки. Браузеру говорит о том, что здесь начинается и заканчивается строка – тег <tr> и </tr>. Браузеру говорит о том, что здесь начинается и заканчивается ячейка – тег <td> и </td>. Посмотрите внимательней – это же классическая матрешка, не так ли На месте многоточия должно быть содержимое таблицы.

У таблицы в нашем примере две строки и два столбца. Поэтому матрешка-таблица содержит внутри две матрешки-строки, а в каждой из матрешек-строк - по две матрешки-ячейки, формирующие столбцы.

<body>
<table>
<tr></tr>
<tr></tr>
</table>
<body>

Матрешки-строки. Браузеру говорит о том, что здесь начинается и заканчивается строка – тег <tr> и </tr>

<body>
<table>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
</table>
<body>

Матрешки-ячейки. Браузеру говорит о том, что здесь начинается и заканчивается ячейка –тег <td> и </td>.

Обратите внимание – сколько ячеек у нас в первой строке таблицы – столько же должно быть ячеек и во второй строке – чтобы у нас формировались столбики. Для того, чтобы браузер растянул ячейку на два столбца нужно задать ячейке специальный параметр, но это уже гораздо сложнее – и это вы сможете сами изучить, если захотите. Контент-менеджеру такие тонкости знать не обязательно.

Колдуем? Конечно, колдуем. Для начала посмотрим на наш исходный код.
<table border="1" cellspacing="10" cellpadding="10"> - попробуйте поменять цифры, сохраняя файл блокнота и обновляя страницу в браузере (F5). Обязательно попробуйте выставить значение параметра “0”.Нравится ли вам то, что вы видите? Я думаю, что да. И еще я думаю, что так проще всего понять значения параметров border- ширина обводки таблицы, cellspacing – расстояние между элементами – таблицей и ячейками и самими ячейками, cellpadding – расстояние от границы ячейки до ее содержимого.

Превратим таблицу из двух столбцов сначала в таблицу из трех столбцов, а потом в таблицу из трех строк, в новые ячейки добавьте произвольный текст. Попробуйте сами.
Ниже два кода, что примерно может получиться.
Первый код – три столбца...




HTML или PHP
Ну, зная PHP, и не зная HTML - сайт сделать сложно. А наоборот - вполне.
Поэтому, если вашей задачей является "делать сайты" - то без HTML - никак...

RSS каталоги
RSS каталоги У кого нибудь есть база RSS каталогов для РУнета? Расскажите пожалуйста как они работают и какакя отдача...

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

НАШИ ПРОЕКТЫ

 
Написать автору
(c) webadvance.ru
тел. (495) 784-21-06
 

В избранное