Как создать свой первый сайт
Бесплатный хостинг, недорогой хостинг и хороший VPS-хостинг Проект успешно работает с августа 2005 года Как создать сайт Создаем простую html-страничку Страницы сайта могут быть созданы в любом текстовом редакторе при помощи языка разметки документа HTML. Откроем блокнот notepad и напишем: Это мой первый сайт. В тексте нашей первой html-страницы в угловых скобках заключен ярлык (или тег) языка HTML. Это тэг и он указывает на то, что в данном файле используется язык HTML. То есть все, что расположено между тегами и - написано на языке HTML. Большинство современных броузеров могут опознать документ и не содержащий тэгов и , но все же их употребление крайне желательно. Теперь запомним файл под именем index.html в новой папке, которую вы создали специально для файлов своего сайта (папку можно назвать, на пример, "site"). Откроем файл index.html с помощью броузера (на пример, Microsoft Internet Explorer). Мы увидим такую картинку: Рис. 1. Наша первая страница. В HTML существует множество других ярлыков (тэгов). В ярлыках можно использовать как строчные, так и прописные буквы. Тэги бывают открывающие и закрывающие (с косой чертой "/"). На пример, тег - закрывающий. Для некоторых тегов наличие парного закрывающего тега не обязательно. Как правило в html-страницах используется несколько обязательных тегов. Среди них ярлык (и закрывающий ) для описания заголовка html-страницы. Здесь можно указать название страницы. Название должно быть помещено между тегами
и . На пример:
Личная страница дизайнера Николаенко В стандартных броузерах заголовок будет показан в верхней части главной рамки основного окна, как на рис. 1. Поскольку тэг
располагается в самом начале html-файла, то при загрузке страницы в первую очередь загружается именно заголовок документа. Далее броузер загружает основное содержание страницы, что может занять некоторое время. Таким образом, некоторое время название страницы будет единственной информацией о ней, видимой посетителю сайта. После заголовка мы используем другую пару тэгов: и , между которыми располагается основной текст документа. Таким образом, html-код страницы выглядит сейчас так:
Личная страница дизайнера Николаенко Это мой первый сайт. Форматирование текста Для примера мы скопировали первый попавшийся текст на новостном портале и вставили этот текст в наш файл после тегов . В окне броузера мы видим сплошной неформатированный текст. Рис. 2 - Неформатированный текст. Текст гораздо лучше смотрится, если он разбит на абзацы. В html-документах для этого существует тэг
(и парный к нему
). Тэг
может задаваться с параметром горизонтального выравнивания align, который может иметь следующие значения: left - выравнивание по левой границе окна броузера. center - выравнивание по центру окна броузера. right - выравнивание по правой границе окна броузера. justify - выравнивание по ширине (растягивание по двум сторонам окна броузера). Если параметр align не указан, текст выравнивается по левому краю. Еще для форматирования текста чаще всего применяются парные тэги: и - отображает текст полужирным шрифтом. и - используется для выделения важных фрагментов (н.п. заголовков) текста. Броузеры обычно отображают текст между тэгами полужирным шрифтом. ... После форматирования текста наша страничка будет выглядеть вот так: Рис. 3 - Форматированный текст. В текст можно вставить также картинку(и). Отберите картинки или фотографии, которые планируете выложить на свой сайт, уменьшите их до желаемого размера в любом графическом редакторе и поместите уменьшенные картинки в папку site (можно даже создать для картинок сайта подпапку img или image). Для того, чтобы вставить в текст картинку, существует тэг
. На странице с текстом вставьте там, где хотите, чтобы была картинка, следующую строчку:
Рис. 4 - Картинка в тексте. Если вы хотите, чтобы картинка находилась справа или слева от текста, то для этого у тэга
существует параметр со следующими значениями: left - изображение прижимается к левому полю окна, текст обтекает изображение с правой стороны right - изображение прижимается к правому полю окна, текст обтекает изображение с левой стороны Если вы планируете разместить много фотографий (на пример, фото с отпуска или примеры своих работ) предлагаем сделать это с помощью готовых программ. Как это сделать описано здесь... [http://ho.com.ua/photo/] Связь между страницами В предыдущем абзаце в тексте встречалась ссылка (линк) на другой сайт. Для этого используется парный тэг и . На пример, так: здесь... Активная ссылка в тексте выделяется другим цветом и часто подчеркиванием. С помощью тэга можно также ссылаться не только на другие сайты, но и на страницы своего сайта. На пример, создадим вторую страницу и назовем ее photo.html. Создавать новые страницы можно просто копированием уже существующего файла, но с другим именем. Главное - аккуратно изменить не только текст новой страницы, но и ее заголовок (заключенный между тэгами и ). Разместим на новой странице какие-то картинки. Это можно сделать вручную или с помощью программ, описанных здесь... А на первой (главной) странице поставим ссылку на вторую страницу, для этого добавим такую строчку: Мои работы можно посмотреть здесь.... Вот что получится: Рис. 5. Ссылка в тексте. Здесь стоит отметить, что на сайте только одна страница может называться index.html - главная. Когда посетитель придет на ваш сайт, она загрузится первой. Если вы, на пример, создали фотогаллерю с помощью какой-то программы, то нужно проверить названия страниц и в случае необходимости переименовать их. Важно: изменяя имена html-файлов, нужно менять и ссылки на них в других страницах. Как выложить свой сайт в Интернет Теперь, когда работа над страницами будущего сайта закончена, и все файлы лежат в папке site, можно выложить их в Интернет. Для этого нужно подыскать для своего сайта место, т.е. хостинг (от англ. hosting - размещение web-сайта клиента на сервере Интернет-провайдера). Подробнее о хостинге для начинающих Для того, чтобы разместить свой сайт на Хостинге Обыкновенном , нужно зарегистрировать для него логин. Как это сделать, можно прочитать в нашем FAQ-е (от англ. ответы на часто задаваемые вопросы): Заказ хостинга (заполнение формы заявки) - помощь пользователю . Как быстро можно приступать к работе после заказа хостинга? После того, как ваш логин будет активирован, можно заливать файлы на сервер, используя ftp-соединение. Сделать это проще всего с помощью броузера, н.п. Internet Explorer'а. Ввведите в адресной строке броузера один из следующих адресов: ftp://LOGIN@sN.ho.ua, где LOGIN - ваш логин, а sN.ho.ua (s1.ho.ua, s2.ho.ua и т.п.) - имя сервера хостинга, на котором расположен ваш сайт. После этого в браузере появится окно, котрое запросит ваш пароль к FTP - введите его и вы получите доступ к вашей домашней директории на сервере. Рис. 6. Доступ по ftp с помощью броузера. Копировать файлы своего сайта нужно в папку htdocs. Но перед этим рекомендуем прочитать раздел FAQ " Редактирование и настройка сайта ". Рекомендуем также посетить форум пользователей Хостинга обыкновенного , где Вы можете задавать свои вопросы. Поиск дешевого хостинга - Каталог и обзор лучших хостингов.