Своя страничка в Инете от и до

Автор статьи: Андрей Каролик ©
Сайт Автора: dal.net.ru
E-mail Автора: andrusha@sl.ru
Дата публикации: 6.08.2005

Интернет - это не только информационный фонтан, но и масса возможностей реализовать себя. Одна из которых - состряпать свою собственную страничку. Что именно там будет: ты на горшке, тузик на диване или любимая игрушка детства - дело сугубо личное. Я же поведаю, как использовать html-редакторы и какие из них предпочесть. Ну и, конечно же, расскажу, как и куда потом все это деть.


Что такое HTML?

HTML в переводе с пингвинского означает язык разметки гипертекста (HyperText Markup Language). Сразу развею миф, что html - язык программирования. Нет, это именно язык разметки, а не программирования. Html-документ представляет собой обычный текстовой ASCII-файл с командами форматирования - тегами (tags), содержащими информацию о компоновке документа: стиля текста, заголовках, абзацах, списках, гиперссылках и т.д. Можно, конечно, набирать теги и вручную, что и делают многие бывалые в html-е, но начинающим стоит начать с html-редакторов. Существует множество программ, предназначенных для создания html-документа или преобразования уже готовых документов в html-формат, в народе они обзываются html-редакторами. Html-редакторы избавят тебя от необходимости вручную вводить теги. Некоторые редакторы также позволяют делать проверку синтаксиса html. Типа проверки орфографии и синтаксиса в Word-е, только проверяется правильность написания и открытия/закрытия тегов. Но об этом ниже. Сам html-документ имеет расширение *.html или *.htm. Разницы никакой, просто первое пошло от юниксовых тачек, а второе от виндовых.

Какой HTML редактор?

На сегодняшний день существует много html-редакторов, и начинающим юзверям на первое время подойдет любой. Я рекомендую Macromedia Dreamweaver или Allaire HomeSite. Обе программы прекрасно сделаны и обладают практически одинаковыми возможностями. Но Dreamweaver ориентирован на более профессиональную категорию пользователей и более наворочен по сравнению с HomeSite. В его библиотеке полно всяческих шаблонов, апплетов, примеров, схем и готовых решений. На первое время тебе это просто не нужно. А навороченность только выйдет боком. Поэтому начни с HomeSite, а проблем с дальнейшим переходом на Dreamweaver у тебя не возникнет, так как у Dreamweaver полная совместимость с HomeSite, Flash, Fireworks и т.д.

HomeSite

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

Кроме обычных тегов программа умеет генерить html-код для скриптов, ява-скриптов и апплетов. Очень удобно для начинающих, т.к. эта фича дает тебе вполне рабочий результат, но избавляет от напрягов с кодингом. В первый раз сложно запомнить, как именно пишутся теги, какие параметры находятся внутри каждого отдельно взятого тега, какие являются закрывающимися, а какие нет и т.д. Html-редактор поможет с этим справиться.

Но то, что программа сама все за тебя генерит, вовсе не означает, что ты не можешь вмешиваться в процесс написания кода. В любой момент в окне Edit (текстовой режим редактирования) ты можешь править код вручную, а результат смотреть в окне Browse. После того как сгенеришь какую-нибудь фишку, обязательно загляни в исходник и посмотри, что там получилось в виде кода. Попробуй что-нибудь изменить и опять посмотри, что получится. Не бойся экспериментировать. Только постоянно практикуясь, ты сможешь что-нибудь реально понять. Если тебе нравится копаться в исходнике, то для тебя окно Design. Оно позволяет делать изменения визуально (визуальный режим редактирования). То есть аналогично Browse, но с возможностью править. Очень удобно. Сначала ты набиваешь пагу в текстовом режиме редактирования, периодически просматривая в окне Browse, как она будет выглядеть в браузере. А в конце подметаешь внешний вид в визуальном режиме редактирования.

Ни нада дилать ашипки

Очень ценной функцией является проверка орфографии и правильности написания и закрытия тегов. Орфография, правда, проверяется только на английском, но тоже иногда не помешает. А вот проверка правильности написания и закрытия тегов на первое время будет твоей козырной фичей, особенно если будешь править код вручную. Когда код состоит из 5 предложений, ошибки - не проблема. Но когда он состоит из нескольких листингов - становится напряжно. Даже самый простенький незакрытый тег можно искать несколько минут. Программа же найдет его за считанные секунды. Топай в Tools -> Validate Document. Результат проверки появляется в виде отчета на нижней вкладке Validation.

Еще можно выделить возможность глобальной замены и глобальной правки по всем документам проекта. То есть твоя пага будет представлять собой один проект, а внешне отображаться древовидной структурой в том случае, если она состоит из нескольких хтмл-ек. И если в каждом файле есть одинаковый кусок, например, меню, то не нужно будет при изменении меню править каждый файл. Просто топай в Search -> Extended Replace. Там вводи требуемый кусок, на что его заменить и в каких файлах/папках/проектах его заменять.

Когда ты, наконец, закончишь "кодить", сохрани всю эту радость привычной комбинацией File -> Save as. Файл титульной (заглавной) странички надо назвать index, тогда по умолчанию он будет грузиться первым. Расширение либо *.htm, либо *.html - не принципиально. Осталось только выложить свое богатство в iNet. Для этого тебе понадобится место, куда выложить, и фтп клиент (FTP Client).

Куда выложить?

Тут существуют три пути решения проблемы. Либо используй место, которое выделяет твой провайдер, обычно это не более 2-3 Мб дискового пространства на его сервере. Либо купи себе хостинг, тогда объем выложенной информации будет пропорционально увеличивать сумму за хостинг. Хотя обычно предлагается фиксированный объем дискового пространства независимо от того, весь ты его займешь или только часть. Третий вариант - используй бесплатный хостинг. Чаще всего прибегают к первому. Почему? Хостинг твоего прова тебе доступен по определению - это бесплатная услуга. Так почему бы ею не воспользоваться? В отличие от бесплатного хостинга, тут ты всегда сможешь требовать работоспособности своей странички и быть уверенным, что она упадет только тогда, когда упадет весь сервак провайдера. Тебе дадут адрес хостинга, логин и пароль. Можешь воспользоваться и бесплатными хостингами, но их плюсы и минусы я оценить не могу, места в Х мало :). Осталось только закачать.

Как закачать?

Чтобы что-то куда-то закачать, нормальные чуваки используют ftp-клиенты. Аналогично html-редакторам их существует бесчисленное множество. Я советую использовать CuteFTP. Софтина очень простая и обладает всеми необходимыми функциями. Более профессиональный вариант - SecureCRT. Эта прога вроде бы шароварная, но ты ведь помнишь об astalavista.box.sk? Кроме того, работать она будет даже в шароварном варианте, просто постоянно будет показывать надоедливый баннер, а при истечении 30 дней начнет предлагать зарегистрироваться.

Сразу после запуска открывается Site Manager. Тыкай в Add Site, получишь следующее:

Хоть глаза и разбегаются, по существу тебе потребуется заполнить только четыре поля:

Site Label - просто название для себя, чтобы отличать потом от других.

Host Address - адрес хостинга.

User ID - логин.

Password - пароль.

Теперь жми OK, и дело в шляпе. Ты создал ярлычок для коннекта. Дважды на нем ткни, и коннект пойдет. В результате ты попадешь на свой хостинг. Ты при этом, естественно, должен быть в Инете :). Отображение подобно проводнику в стеклянных, только слева - это панель твоего винта, а справа - сам хостинг. Можешь заливать, можешь сливать. Делается либо двойным кликом на переносимый файл, либо перетягиванием с одной половины на другую. Удачи в переливании и веб-мастерстве :).