Сегодня: 16 апреля 2024 г., вторник Время:

6 простых шагов, с помощью которых можно сделать сайт своими руками

Автор статьи: Евгений Андросов Дата публикации: 17.05.2009

Первый шаг. Выучить HTML.

Это просто! И это самый быстрый способ научиться делать сайты.
Язык HTML, несмотря на кажущуюся поначалу сложность, очень простой, можно даже сказать, примитивный. Он состоит из небольшого набора тегов (от англ. tag) - элементов языка разметки, таких как текст, иллюстрация, таблица и их атрибутов – параметров, определяющих дополнительные свойства тега.
Например, существует тег параграфа – размечающий текст и разбивающий его на параграфы, отделяемые один от другого пробелами. Пишется он так: <p> - открытие тега и </p> - его закрытие. У этого тега могут быть дополнительные свойства, такие как, например, выравнивание (по левому краю, правому или по центру). В данном случае тег пишется следующим образом: <p align=”left”>Текст параграфа </p>
Набор тегов и их атрибутов можно найти в любом справочнике или учебнике по HTML и их даже не надо заучивать: первое время смотрите в справочник, а затем они сами откладываются у вас в памяти.
Писать сайт на языке HTML можно в текстовом редакторе «Блокнот», который входит в набор стандартных программ любой операционной системы. Делаете в Блокноте текстовый файл, переименовываете его в файл index с расширением .html и главная страница вашего сайта готова!

Очень простой, но очень наглядный пример.

Вот текст, который нужно скопировать, вставить в Блокнот и сохранить его под именем index.html в какую-нибудь временную папку:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Ваш первый сайт</title>
</head>
<body>
<p align="center">Поздравляю! Это ваш первый сайт, который вы сделали своими руками!<br>Хотите пойти дальше и cделать настоящий сайт? Тогда читайте статью дальше. <br>
<a href="http://www.freeadvice.ru/view_article.php?id=9">Вернуться назад</a></p>
</body>
</html>

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

А если вы освоите программы Adobe Dreamweaver или Front Page, то писать такие страницы станет совсем просто, так как программы сами прописывают многие необходимые теги, а также добавляют все необходимые параметры.

Быстро и легко выучить HTML можно с помощью "ONLINE-УЧЕБНИКА по HTML", который я написал специально для тех, кто хочет создавать сайты, но не имеет опыта программирования или даже просто опыта работы на компьютере.

Второй шаг. Освоить таблицы стилей CSS.

Это не сложнее, чем освоить HTML.
С помощью стилей CSS вы сможете сделать свой сайт красивым и стильным.
Стили расширяют возможности тегов до бесконечного количества атрибутов, которые можно применить к каждому их них. Кроме того, можно задать стиль, например, всех тегов параграфа – один раз и для всего сайта. Это значительно упрощает работу с сайтом и позволяет быстро привести его к единому стилю.
В крайнем случае, владея HTML и CSS, можно просто скачать CSS-шаблон сайта, заменив в нем тексты и ссылки. Подобных шаблонов много в разделе "Сайтостроение" и они, что приятно, абсолютно бесплатны!
Подробнее о CSS в статье "Введение в CSS (каскадные таблицы стилей)".

Третий шаг. Освоить азы программы Photoshop...

...с помощью которой можно сделать дизайн сайта. Конечно, простой сайт может и не иметь дизайна, а состоять только из текста разных цветов, различных линий, таблиц, вставленных фотографий. Но, согласитесь, смотреть на красиво оформленный сайт всегда приятнее. В том числе и самим его создателям. Поэтому освоение веб-дизайна – шаг не обязательный, но очень желательный. Получить азы в освоении Фотошопа можно по книгам, которые продаются в каждом магазине, по бесплатным урокам, размещенным на многих сайтах в Интернете, посвященным этой уникальной программе, а можно, например, купив видео курс «Фотошоп с нуля». В последнем случае вы не просто постигнете азы, а гарантированно и притом быстро станете настоящим Фотошоп-мастером.

Четвертый шаг. Приобрести доменное имя.

Это уникальное имя сайта, по которому оно будет идентифицироваться в глобальной сети Интернет. В любой стране мира, набрав адрес, состоящий из вашего доменного имени и домена, определяющего принадлежность к той или иной стране или зоне, люди попадут именно на ваш сайт. Его название вы придумываете сами, а можете и не придумывать, а просто и со вкусом назвать сайт своим собственным именем или фамилией, например, www.sasha.ru или www.ivanov.com. Но… Есть одно но: сегодня сайтов в Интернете многие миллионы и многие миллионы имен уже заняты. Поэтому, когда вы будете думать над именем своего сайта, заготовьте варианты. Прежде, чем регистрировать имя сайта, система в обязательном порядке проверяет, нет ли уже таких имен и выдает вам ответ. Если имя занято, вводите следующее из списка вариантов и так далее, пока очередной ваш вариант не окажется наконец свободным.
В России доменные имена зон RU, SU, NET, COM, ORG, BIZ, INFO, CC, TV, ME, TEL, регистрирует «Региональный сетевой информационный центр», но подобные функции делегированы и крупным хостинг-провайдерам. Кстати, многие из них бесплатно или со скидками регистрируют для вас доменное имя, если вы оплачиваете хостинг на определенное время. Об этом в следующем шаге.

Пятый шаг. Заключить контракт на хостинг.

Хостинг – это дисковое пространство на сервере хостинг-провайдера, к которому существует постоянный, беспроблемный доступ из Интернета, а также прилагается специальное программное обеспечение, позволяющее реализовывать многие возможности архитектуры сайта, обеспечивать его безопасность, осуществлять резервное копирование файлов, просматривать статистику посещаемости сайта и вести контроль его трафика. В комплекте с возможностью разместить сайт, обычно идет возможность работать с собственным почтовым сервером и иметь почтовый адрес не такой, как у всех простых пользователей, типа sasha1978@mail.ru, а красивый и соответствующий названию вашего сайта, типа sasha@ivanov.ru.
В принципе, разместить сайт и обеспечить к нему доступ пользователей Интернета можно и на своем компьютере, но это довольно сложно для начинающего и хлопотно даже для опытного пользователя: нужно устанавливать сервер (специальное программное обеспечение), настраивать его, обеспечивать его безопасность, бороться с атаками хакеров и их последствиями. А кроме того, ваш компьютер должен работать всегда – 24 часа в сутки, 7 дней в неделю! Согласитесь, это сложно и неудобно. Проще заплатить 1,5 – 3 тысячи рублей за годовое обслуживание хостинга, получить в подарок доменное имя и не знать никаких хлопот.
Можно разместиться и на бесплатном хостинге, адреса которых вы легко можете найти в Интернете по поисковому запросу «бесплатный хостинг». Но все бесплатное, в лучшем случае ненадежное, а в худшем вы можете просто потерять свой сайт. Единственный бесплатный вариант, о котором я не слышал плохих отзывов (но сам не пользовался, поэтому советовать не буду) – это сервис «Яндекс-народ».
Из платных хостинг-провайдеров могу смело рекомендовать хостинги «Агава» и «Мастерхост». Во-первых, я пользуюсь сам их услугами и особых проблем с ними не было, во-вторых, они самые крупные на просторах рунета, а это уже какая-никакая гарантия надежности.

Шестой шаг. Научиться работать с ftp-протоколом и закачивать сайт на сервер хостинг-провайдера.

Файлы сайта, обычно, закачиваются на сервер по ftp-протоколу. Ничего сложного в этом нет. Если вы делали сайт с помощью программы Adobe Dreamweaver, то в нее встроена функция работы с хостинг-сервером по протоколу ftp и все, что вам нужно, ввести данные вашего сервера – пароль, логин, адрес (которые вам дает провайдер при заключении контракта на хостинг) и нажать пару кнопок.
Если вы пошли по простейшему пути и сделали сайт в Блокноте, нужно установить какой-нибудь файловый менеджер. Лично я рекомендую программу Total Commander. Она проста и надежна. Точно так же прописываете полученные от провайдера данные входа на ftp и затем переносите файлы сайта простым копированием с вашего диска на диск провайдера, в папку, соответствующую корневой директории вашего сайта. Обычно, это папка www. Именно она считается корневым каталогом сайта.
Если, кроме главной страницы, у вас есть еще несколько других, помещаете их туда же. Фотографии, рисунки и картинки, которые вы вставите в страницы сайта, должны быть скопированы как отдельные файлы в корневую директорию сайта, либо в отдельно созданную папку для имиджей в корневой директории. При этом надо не забыть исправить пути имиджей в теле страниц сайта в соответствии с тем, где у вас будут храниться эти имиджи. Например, если файлы лежат в корневой директории, то путь будет следующий:
<img src="image1.jpg">
А если файлы помещены в отдельную папку с названием "img", то путь будет:
<img src="img/image1.jpg">
То же самое касается и любых других файлов: флеш-объектов, java-скриптов, которые вы можете сами и не создавать, а найти, скачать и вставить в свой сайт в виде готовых решений.
ВНИМАНИЕ: файл index.html должен начинаться НЕ С ЗАГЛАВНОЙ, а с маленькой буквы. В противном случае web-сервер не понимает название файла и не знает, какой из файлов загружать первым. Набирая адрес вы все время будете видеть ошибку 403, а не главную страницу вашего сайта.

Вот и все! Делать сайты просто. Свой первый сайт www.an24.ru я сделал буквально через две недели после того, как стал заниматься вопросом создания сайтов. Правда, я изучал видео курс Евгения Попова «Все основы Онлайн-бизнеса в видеоформате», где все эти шаги были подробно рассказаны и показаны, но можно, конечно, обойтись и без видео курсов. Главное, что от вас требуется – это желание! Только оно способно сделать из обычного рядового пользователя Интернета настоящего профессионала, которому по плечу любые задачи; из человека, бесцельно бродящего по сайтам, сделать Интернет-бизнесмена, извлекающего из Интернета выгоду и получающего удовольствие от этого процесса.
Чего вам и желаю!

С уважением,
Евгений Андросов

Последние статьи раздела «Компьютеры & Интернет»:

Какую компьютерную мышь выбрать
Мониторинг и профилактика компьютера
Одноразовая почта
Что такое IP-адрес и для чего он нужен
Интеллектуальная собственность в сети Интернет
Компьютерная графика как искусство (продолжение)
Компьютерная графика как искусство
Зубные щетки и пылесосы в трехмерном пространстве
Wi-Fi или 3G
Раскрутка сайта

Комментарии статьи:

Комментарий добавил(а): Different
Дата: 02.05.2012

От себя добавлю - учите JavaScript. С его помощью можно творить чудеса даже на самом простой статическом сайте на narod.ru Демо: http://js4.ru

Комментарий добавил(а): Павел
Дата: 03.02.2012

Если для развития инфобизнеса нужен сайт, я его закажу у профессионалов - дизайн-студии или фрилансеров, которые это умеют делать КАЧЕСТВЕННО. Самодел чаще всего сделан отвратительно и скорее будет отталкивать клиентов от вашего бизнеса, нежели привлекать. Даже используя уроки разрекламированного Е.Попова, не получится сделать сайт высокого уровня сразу же, в одно мгновение. Для этого придется много учиться и практиковаться, подсматривать решения у тех же гуру (дизайн студий и фрилансеров), тратить кучу своего времени на освоение технических нюансов. Совершенно не понимаю зачем это нужно, скажем, писателю или директору мясокомбината. И если в первом случае гораздо проще воспользоваться каким-либо бесплатным сервисом, типа narod.ru, то во втором случае это практически 100% дизайн-студия или фрилансер. Опять же не стоит забывать, что сайт - это лицо вашего бизнеса в интернете. От того как оно "выглядит" и насколько удобно им пользоваться зависит уровень доверия к вашему бизнесу со стороны потенциальных клиентов.

Комментарий добавил(а): Евгений Андросов
Дата: 17.11.2011

Екатерина, а какой по-вашему самый легкий путь? Заплатить денег и получить готовый сайт? Безусловно, нет ничего легче. Но речь-то шла о том, как сделать сайт СВОИМИ РУКАМИ. Без знания основ это сделать невозможно, а все, о чем я написал - именно основы.

Комментарий добавил(а): Екатерина
Дата: 17.11.2011

Я считаю эту статью насмешкой- "вот и все" здесь звучит неубедительно. Вы показали читателям не самый легкий путь, а самый правильный.

Комментарий добавил(а): Евгений Андросов
Дата: 10.04.2010

Надежда! Цвет текста или заголовка задается с помощью стилей. Например:
<h1 style="color:#FFFF33;">Текст заголовка</h1>
Таким образом можно выделить желтым цветом только один конкретный заголовок. А можно в таблице стилей прописать цвет, который будет применяться ко всем заголовкам сайта в тегах <h1>. В таблице стилей прописываете:
h1 {color:#FFFF33; } и все теги h1 у вас будут желтого цвета.

Комментарий добавил(а): Надежда
Дата: 10.04.2010

Здравствуйте! А как сделать заголовок цветным? я вставляю код желтого цвета,а у меня все равно черный... подскажите пожалуйста!

Комментарий добавил(а): Андрей
Дата: 07.02.2010

о пробелах..< html> или <title> тут текст или charset= windows- 1251" > программа как поймёт?

Комментарий добавил(а): Евгений Андросов
Дата: 07.02.2010

Андрей! Я не совсем понял, что вы имеете ввиду. Уточните, пожалуйста.

Комментарий добавил(а): Андрей
Дата: 07.02.2010

Совсем не сказано о пробелах между знаками, это важно? Если да, исправте пожалуйста.

Добавить комментарий

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