 Статьи каталога идей - Эксперты рекомендуют |
|
Категория: Эксперты рекомендуют
Автор: Антон Гаврилов E-mail: lazaward@ngs.ru WWW:  
|
Первый шаг
Суха теория, а древо жизни зеленеет... ((с) Не помню, кто сказал)Доброе время суток.
Итак, приступаем к созданию первого в нашей жизни сайта. Что нам для этого понадобится? Обязательно ведь что-нибудь да пригодится. Из чего состоит инструментарий начинающего вебмастера? Довольно часто на начальном этапе – из стандартного текстового редактора (в котором создается и редактируется сайт) и браузера (notepad & Internet Explorer). Если по поводу второго пункта у нас особых претензий не возникает, то с текстовыми редакторами давайте определимся.
В рамках этой статьи я сознательно призываю вас не работать в html-редакторах типа WYSIWYG (такая сложная аббревиатура означает в грубом переводе – что видишь – то и имеешь). Самый известный редактор такого типа, это, пожалуй, Macromedia Dreamweaver. Ну и пожалуй, Microsoft FrontPage. Насколько я знаю последняя версия дримвиера – 4. Используя редакторы такого типа, вы вряд ли научитесь работать с кодом создаваемой страницы. Не будете, так сказать чувствовать ее «изнутре» :). Хотя при наличии определенного опыта создавать страницы с помощью этих программных продуктов весьма можно :). Однако мы сейчас представляем себя в роли начинающего, гениального и широко известного создателя лучших проектов в сети, пока что и не слышавшего о этих вещах, или не имеющего денег на покупку коммерческих версий этих программных продуктов.
Ну а когда начинающий вебмастер станет широко известным, не будет же он пользоваться набившими всем оскомину Dreamvier/Frontpag? Конечно нет, он будет гордо использовать мега редактор собственного изготовления. Так что даже и смысла нет изучать такие вещи. Будем зреть в корень, одним словом. :)
Если вас мучает страх перед HTML, из которого построены все страницы в интернете, то поспешу вас успокоить – программировать вам не придется. HTML – это просто язык разметки текста. Так что ничего сногсшибательного там нет. Почему же тогда все не умеют делать сайты, да? А много людей эффективно используют возможность известного всем Word`a при форматировании и оформлении документов? По опыту своей работы я могу точно сказать – практически никто. Так что главное разобраться, что к чему и эффективно это что использовать к чему надо.
Тэк-с... вернемся к нашим редакторам. Что нам нужно от кандидата в помощники гениальных дизайнеров? Перечислим:
- Подсветка HTML синтаксиса.
- Хорошие возможность замены и поиска фрагментов текста.
- Вставка стандартных HTML фрагментов (таблицы, списки).
- Хорошо бы иметь внутренний браузер, или возможность запуска внешнего.
Пожалуй хватит для начала, мы же не портал для государственной думы собрались создавать, правильно?
Сейчас я перечислю несколько редакторов, которые удовлетворяют нашим скромным поначалу запросам. Однако, если вы уже пользуетесь и привыкли к иному редактору, не спешите менять его. Главное, чтобы в нем можно было работать непосредственно с HTML-кодом. Что нам подходит:
- Arachnophilia – мой первый редактор, в котором я работаю и сейчас. Отличается простотой и широкими возможностями по вставке стандартных фрагментов кода – таблицы, ссылки, графика, фреймы… Имеет встроенный броузер.
- SNK LightPad - замена блокнота для вебмастера. Честно говоря, я его не использую по одной причине – я привык к другому, менее удобному, но милому сердцу текстовому редактору (даже и не думайте, это не notepad :).
- EditPad – вот он, мой выбор. Сильно нахваливать не буду, так как особых возможностей в нем нет. Я его использую в паре с Арахнофилией. Когда нужно что-нибудь быстренько подправить.
Ну что? Выбрали себе редактор по душе? Если еще нет, то выбирайте и поехали дальше – создаем наш первый документ.
Наберите в редакторе следующий текст, или просто вырежьте отсюда.
|
<html> <head> <!-- заголовок документа, который будет отображаться в верхней строке браузера--> <title>Наш пробничек</title> </head> <body> <table width="90%" border="1" cellpadding="0" cellspacing="2" bgcolor="#f0f0f0"> <th> <h1> Первая страница нашего бизнес сайта. </h1> </th> <tr> <td> Тут у нас будет полная красота в конечном итоге:<br> Менюшки, счетчики, баннеры и в последнюю очередь, но первое по важности – СОДЕРЖАНИЕ! </td> </tr> </table> <br> <!-- наше авторство --> <table width="100%" border="1" cellpadding="0" cellspacing="2" bgcolor="#c0c0c0"> <tr> <td align="center"> Copyright и все-все-все права by МЫ. <br> 2002. </td> </tr> </table> </body> </html> |
Эх, лиха беда начало! Давайте сохраним этот файл под именем index.html в специально для этого сделанной папочке (вы ведь уже создали такую папку, так? :). И посмотрим, что получилось. Увидим примерно следующее:
| Наш пробничек - Microsoft Internet Explorer | ||||
|
||||
|
||||
| Готово |
Что мы имеем в итоге? Имеем три таблички, в которых будет что-то лежать. В одной меню, в другой текст страницы, а в третей наш гордый копирайт. Кстати. Видите, мы забыли выровнять верхнюю табличку по центру страницы? Сейчас исправим, но сначала я опишу, чего мы такого понаписали в HTML коде.
Всякий уважающий себя html документ должен начинаться и заканчиваться тегом (контейнером) html. В общем, все html-редактирование заключается в том, что мы содержание нашего будущего сайта распихиваем по разным контейнерам. Контейнеры (теги) бывают следующих типов – таблицы, теги разметки текста, теги для вставка объектов в страницу (графика, звук и т.д.). Начинается документ с <html>, заканчивается, т.е. закрывается тег </html>. Это главный тег-контейнер. В общем, приучите себя к мысли, что каждый тег должен быть закрыт. Кроме одного. Это элемент <br>, символ перевода строки. То есть если мы написали:
|
Вдруг, откуда ни возьмись, <br> возникает перевод строки |
Отобразится все это так :
|
Вдруг, откуда ни возьмись, |
Едем дальше. Видим тег - <head>. Это контейнер, в который мы положим служебную информацию о нашем документе. Будут там ключевые слова, краткое описание содержания страницы, автор страницы, указание роботам поисковых систем по индексации этой страницы и прочее, прочее, прочее… Пока что мы не будем забивать себе этим голову. В данный момент в теге <head> есть только один служебный тег - <title>. В нем мы указываем название документа, которое браузер будет отображать в заголовке своего окна.
Информация из тега <head> браузером не отображается. Кроме заголовка в <title>.
Ну вот, добрались до контейнера <body>. В нем находится все то, что мы хотим вывести на экран браузера клиента.
Пока что ничего сложного, правда? Однако дальше лежат страшные по своей громоздкости куски html-кода :). Приступим к препарированию.
<table> - тег таблицы.
<tr> - строка
<td> - ячейка
В тегах <td> и содержится информация для вывода на экран. Можно туда еще одну таблицу положить.
Пока не очень понятно? Посмотрим примерчик.
Итак, таблица 2*2
<table>
|
<tr> <tr> |
|
</tr> </tr> |
</table>
А вот таблица, где в верхней строке 2 ячейки, а в нижней 1. Видите параметр colspan. Он еще равен 2. Сие означает – растянуть ячейку на два столбца.
<table>
|
<tr> <tr> |
|
</tr> </tr> |
||||
</table>
Здесь немного другой случай. В первом столбце 1 ячейка, а во втором 2. На этой повлиял брат параметра colspan – rowspan. Он значит, говорит, что нужно растянуть ячейку на две строки.
<table>
|
<tr> <tr> |
|
</tr> </tr> |
</table>
Вот пример посложнее. Разберетесь сами?
<table>
|
<tr>
<tr> |
|
</tr>
</tr> |
|||||
</table>
Если у вас образовалась каша в голове, не расстраивайтесь – таблицы поначалу весьма трудно поддаются пониманию. Главное, чтобы лапши на ушах не было :). Таблицы - это самый мощный и архиважный механизм при разметке веб-страниц. Поэтому мы их сразу и изучим.
В теге <table > мы указали один параметр – border=1 это, как вы уже догадались, указание браузеру выводить рамку для таблицы толщиной в единичку. Если написать border=0 то рамки не будет.
Ну что, утомились? Я да, а завтра предстоит далекая поездка, посему закончим на этот раз.
До скорой встречи!
Автор статьи занимается удаленной разработкой сайтов. Особое внимание уделяется созданию сайтов для дистрибьютеров компании ZibyCom.| Страницы: 1 | комментарии : отправить статью по e-mail |
|
Статьи по теме:
|
Последние статьи:
|