КАК СОЗДАТЬ САИТ

Как создать свой сайт бесплатно

ГЛАВНАЯ

Здравствуйте, уважаемый посетитель!

Вы здесь, чтобы узнать, как сделать сайт самому, наполнить его посетителями, а может и заработать при этом денег? Тогда Вы оказались в нужном месте.

Как сделать сайт самому бесплатно

На вопрос "Как создать свой сайт бесплатно?" обычно можно услышать длинные рассуждения о знании html, javascript, php и прочих языков и технологий. Так ли это? И да, и нет. Вся прелесть в том, что создать сайт бесплатно самомуможно, даже не зная html. Достаточно найти подходящий конструктор сайтов, чтобы быстро сделать и разместить свой сайт в интернете.

"Тогда зачем всё остальное?" - спросите вы. Да затем, что когда эйфория от того, что у вас есть собственный сайт пройдет, вам захочется его улучшить, сделать живее и красивее, разрешить пользователям общаться между собой и с вами, да мало ли чего еще вам захочется сделать самому. Вот тогда вам и понадобятся технологии HTML, PHP, MySQL, JQUERY, AJAX.
Сложно ли сделать сайт?
Нет, если вы готовы уделить этому время. Создание сайта, как и все новое для нас, потребует от вас желания изучать что-то новое, пробовать на практике и не останавливаться на достигнутом. Все это занимает время. Но в результате, уже через месяц - другой вы сможете с гордостью сказать: "я сделал свой сайт".

CMS для сайта

CMS - это сокращение от слов content manager system. В переводе на русский - "система управления контентом". То же самое принято называть "Движок сайта". Используя CMS, вы можете управлять вашим сайтом из панели управления. Сможете добавлять новые и редактировать старые страницы сайта. Администрация хостинга бесплатно устанавливает своим клиентам популярные cms. Системы управления сайтами безусловно удобны и экономят массу времени. Но:

  • во-первых работу с ними также надо изучать,
  • во-вторых, не зная того же html вы сможете пользоваться только предоставляемыми шаблонами и рано или поздно встретите в интернете сайт с таким же дизайном, как и у вас (а то и не один),
  • в-третьих, вы можете пользоваться только теми готовыми модулями, которые предоставляет система, а если захочется что-то другое, то придется возвращаться к началу, т.е. к изучению html, css, php и далее по списку.

Поэтому CMS - это хорошо, но начинать с них не следует. Хотя, если вам срочно нужен сайт, то можно начать с какой-нибудь системы управления сайтами (например, Joomla).

Создать сайт на конструкторе

Конструкторы сайтов – популярный ныне инструмент для создания интернет ресурсов. Веб-разработчики довольно сильно критикуют такие платформы за недостаток функциональной гибкости по сравнению с профессиональными CMS. Тем не менее, они весьма востребованы.

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

Рассмотрим процесс запуска сайта с нуля на одном из наиболее популярных российских конструкторов - A5.ru:

  • Регистрация - вводим мэйл и номер телефона, после чего попадем в личный кабинет. Сервис предлагает создать сайт бесплатно. Ограничения триала по времени тут нет, но на других подобных сервисах оно, бывает, встречается.
  • Выбор шаблона - если не хотите собирать сайт с белого листа, то можете подобрать уже готовый шаблон под вашу тематику и изменять уже его.
  • Редактор - создать сайт на конструкторе можно просто перетаскивая загруженные картинки, добавляя текст и различного рода виджеты.
  • Платные услуги - разумеется, имеются некоторые дополнительные опции, вроде витрины интернет-магазина или добавления виджетов, не входящих в стандартный набор A5.ru. Но в целом, чтобы оценить весь предлагаемый инструментарий, платить действительно не придется.

Создать сайт самому на конструкторе A5.ru действительно несложно. Идеально для небольших проектов, но для реализации сложных задумок конструкторы категорически не подходят.

Обучение созданию сайта

    • Начать надо с общего представления об устройстве сайта, для этого полезно изучить серию уроков Делаем сайт - первые шаги, а также узнать, что такое хостинг и домен.
    • После этого переходите к основе основ - языку HTML.
    • Теперь познакомьтесь с CSS - каскадными таблицами стилей. Знание CSS значительно упрощает верстку сайта и предоставляет гораздо больше возможностей, чем HTML.
    • Далее можно познакомиться с основами оптимизации и раскрутки сайта, а также со способами заработка на своем сайте. И, если у вас еще нет своего сайта, то самое время сделать его и разместить в интернете.
    • Javascript - сделает ваши страницы интерактивными, т.е. вы сможете осуществлять диалог с пользователем, а также сделать внешний вид ваших страниц более привлекательным (например, используя различные визуальные эффекты).
    • PHP - язык программирования, созданный для разработки динамических web-страниц. Этот язык позволит вам не только осуществлять диалог с пользователем, но и запоминать их. Вы знаете много примеров php-сценариев: отображение текущего времени на сайте, форумы, регистрации и авторизации и т.д.
    • Для того, чтобы использовать PHP во всей его силе вам потребуется познакомиться с базами данных (именно в них хранятся все данные о пользователях) и языком запросов SQL (он помогает выбирать из базы данных именно то, что вам нужно).
    • Если вы дойдете до этого пункта, то уже сами будете знать, что вам нужно дальше, да и нужно ли.

Все это совсем не сложно, бесплатно создать свой сайт можно, было бы желание, а успех обязательно придет. Так не откладывайте, начинайте создавать свой сайт уже сегодня. А все, что вам понадобится, вы найдете на страницах этого сайта.

Успехов Вам!!!

первые шаги

Серия этих уроков расчитана на "новичков", не знакомых с HTML. Из нее вы узнаете как делать сайты.

  • Урок 1. Как устроен сайт. Делаем первую страницу
  • Урок 2. Оформляем страницу и форматируем текст
  • Урок 3. Располагаем элементы на странице и добавляем картинки
  • Урок 4. Соединяем страницы между собой и оформляем контент
  • Урок 5. Размещаем сайт в интернете

Как делать сайты - основные принципы

  • Выбор редактора для создания сайта
  • Как угодить браузеру
  • Как залить сайт на сервер
  • Какие бывают сайты
  • Общая структура сайта
  • Основные этапы создания сайта
  • Понятие URL
  • Что такое и как зарегистрировать доменное имя
  • Что такое и как зарегистрировать хостинг
  • Что такое CMS - системы управления сайтом

Как делать сайты - табличная верстка

Эти два урока расчитаны на тех, кто знаком с HTML или изучил уроки html.

  • Урок 1. Переносим макет сайта в HTML.
  • Урок 2. Делаем шаблон будущего сайта.

Как делать сайты - блочная верстка

Эта серия уроков рассчитана на тех, кто знаком с HTML и CSS.

  • Урок 1. Блочная верстка сайта.
  • Урок 2. Оформляем страницу сайта.
  • Урок 3. Блочная верстка резинового сайта.

Урок 1. Как устроен сайт. Делаем первую страницу

Прежде чем создавать сайт, надо понять из чего собственно он состоит.

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

Теперь посмотрим на саму страничку сайта, например ту, которую вы видите сейчас. Из чего она состоит? Из картинок и текста. Значит, чтобы сделать страницу надо подобрать картинки, набрать текст и указать браузеру, как все это отобразить.

Да, именно браузер (Internet Explorer, Firefox или любой другой) отображает все страницы в интернете. Как он узнает, что именно эта страница предназначена для интернета? По ее расширению - html (например, страница index.txt - это просто страница с текстом, а index.html - это web-страница). Как браузер узнает, как именно отобразить ваши картинки и текст? Для этого служит язык разметки - HTML. Именно с его помощью вы и указываете браузеру, где отразить на странице картинку, а где текст.

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

Итак, от слов к делу.

Шаг 1.

Откройте блокнот (Notepad) и введите в новый документ следующий код:

   

      Моя первая страница 

      

      Всем привет!

Шаг 2.

Сохраните этот документ (Файл -> Сохранить как)

s_html

Укажите место хранения вашего файла (у меня - это диск D).
Имя файла - index.html
Тип файла - все файлы.

Шаг 3.

- Запустите браузер (Пуск -> Internet Explorer), в адресной строке укажите полный путь к созданному файлу index.html.
У меня он хранится на диске D, значит его полный путь D:\index.html, если бы он хранился в папке web на диске D, то его путь был бы - D:\web\index.html, иными словами вы должны указать через \ все папки на пути от диска к файлу.
- Щелкните по клавише Enter.

first_page

Ну вот - ваша первая страница готова. Если ее разместить на хостинге (компьютер, предоставляющий услуги по размещению и отображению вашего сайта, впрочем, об этом будет отдельный разговор), то весь мир увидит вашу страничку.

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

Посмотрите на код, который мы вводили в блокноте. Это и есть структура любого html-документа. Все, что находится между < и > называется тег.

Между < и > находится имя тега и его параметры (если они есть).

В основном все теги парные, т.е. один открывающий <>, а другой - закрывающий </>. Такая пара тегов называется контейнером. А все, что находится между ними - содержимым контейнера. Действия тегов распространяются только на их содержимое.

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

Разберем структуру документа подробнее:

помещается все, что вы хотите разместить (картинки и текст).

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

На этом первый урок закончен. Вы научились создавать web-страничку. В следующем уроке вы научитесь оформлять текст.

Урок 2. Оформляем страницу и форматируем текст

Сначала пару слов о текстовом редакторе, которым вы пользуетесь. Конечно, вы можете это делать в блокноте, но гораздоо удобнее пользоваться Notepad++. В нем весь html подсвечивается другим цветом, что облегчает восприятие и поиск ошибок.

А теперь вернемся к основной теме. Откройте созданную на прошлом уроке html-страницу в блокноте или в Notepad.

Сейчас в ней написана фраза "Привет всем!", она черного цвета, располагается слева на белом фоне. А если мы хотим, чтобы она была посередине, крупным желтым шрифтом и на синем фоне? Для этого у тегов предусмотрены специальные атрибуты. Проще это объяснить на практике.

Шаг 1. Меняем фон html-страницы и цвет текста

Для этого добавим в наш код, в тег следующие атрибуты - bgcolor="blue" text="yellow". Здесь bgcolor - атрибут, отвечающий за цвет фона страницы, а blue - его значение (в нашем случае - голубой, но можете сделать и красный - red, и зеленый - green, и любой другой). Атрибут text задает цвет текста документа, его значение yellow - желтый.

 

    

        Моя первая страница  

     

   

        Всем привет! 

     

Запустите браузер (как в шаге 3 первого урока), теперь ваша страница выглядит так:

Согласитесь, что синий фон слишком яркий, хорошо бы сделать его побледнее. Для этого давайте немного поговорим о способах задания цвета.

В HTML существуют два способа задания цвета: по имени (им воспользовались мы) и указанием шестнадцатеричного кода цвета.

С именными цветами (их 156) все просто, смотрим в соответствующую таблицу html цветов , выбираем понравившийся и пишем его имя в значение атрибута (например, bgcolor="blue").

Но гораздо больший выбор предоставляет второй способ. Здесь мы можем выбирать из миллиона цветов, указав его шестнадцатеричный код. Этот код представляет собой 6 цифр и начинается с символа "#". Не будем вдаваться в подробности как формируется код цвета, укажем лишь на то, что получить его можно, например, в программе Photoshop. О том, как это делать читайте на странице Цвета для web. А пока пользуйтесь теми, которые указаны в примерах.

Итак, поменяем цвет в атрибуте bgcolor на нежно-голубой, а цвет текста - на менее яркий.

 

     

        Моя первая страница  

     

    

        Всем привет! 

     

Обновите html-страницу (Ctrl+F5) и посмотрите на результат.

Шаг 2. Форматируем текст

Обратите внимание, что атрибуты, указанные в теге распространяют свое действие на весь документ, т.е. весь введенный вами текст будет теперь сиреневого цвета, что не очень удобно. Поэтому лучше убрать атрибут text из тега, тогда цвет текста будет установлен по умолчанию, т.е. черный. А задавать цвет различных частей текста лучше в самом тексте.

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

 

    

        Моя первая страница  

     

    

 

Это заголовок первого уровня

 

 

            Это простой текст. 

            Этот выделен полужирным начертанием.

         
 

         А этот курсивом.

 

Это заголовок второго уровня

 

 

          

             Это текст Arial, размер шрифта - 5 

         

Это заголовок третьего уровня

 

 

        

         Этот текст Verdana, размер шрифта - 2 

         

      

Обновите html-страницу (Ctrl+F5) и посмотрите на результат.

Разберем код подробнее:

 

Использовать эти теги с их атрибутами вы можете в любом месте текста, выделяя, как предложения, так и отдельные слова, и даже буквы. Главное помнить два правила:

1. Если есть открывающий тег, то должен быть и закрывающий.

2. Соблюдайте порядок вложенности тегов. Тег, который открыт первым, должен быть закрыт последним. Например,

-Так неправильно!
-Так правильно

На этом второй урок закончен. Вы научились работать с текстом. На следующем уроке вы научитесь украшать html-страничку картинками и располагать элементы на странице.

Урок 3. Располагаем элементы на странице и добавляем картинки

Располагаем элементы на странице.

В начале этого урока мы снова поговорим о структуре сайта. Связано это с тем, что сегодня мы будем вставлять картинки на нашу страницу и необходимо понять, где мы будем их хранить. Скоро вы убедитесь, что это важно.

Наш сайт сейчас состоит из одной html-страницы, сегодня к ней добавятся картинки, в следующем уроке - еще пару страниц. В принципе все это можно хранить в одной папке, но представьте, что этих страниц у вас стало много, и к каждой прилагается картинка, а то и не одна. Кроме того, развиваясь и обучаясь, вы можете захотеть использовать и другие web-технологии, например, css, javascript, php. Если все это складывать в одну папку, то вскоре вы и сами не разберетесь, что здесь к чему. Поэтому организуем сразу правильную структуру хранения для нашего сайта.

Шаг 1.

На любом диске вашего компьютера заведите папку и назовите ее, например site.

В этой папке создайте папку под названием images (здесь мы будем хранить картинки) и страницу index.html.

У вас должна получиться следующая структура:

strДля начала нам этого достаточно. Имейте в виду, что все последующие примеры будут правильно работать именно для такой структуры папок. Если у вас они расположены по-другому, то вам придется кое-что менять в коде.

Шаг 2.

С помощью HTML можно осуществить верстку сайта двумя способами - табличным и блочным. В основе первого лежит таблица (теги ), в основе второго - блоки (теги

). Сегодня мы рассмотрим первый способ.

А делать мы будем вот такую страницу.                                                                               Давайте посмотрим из чего она состоит:

main_pagetable_page

Вот мы и разделили нашу страницу на структурные элементы. Как известно, таблица состоит из строк и столбцов, образуя ячейки. Наша страничка, как видно из рисунка, состоит из 5 строк и 2 столбцов. Каждый элемент нашей страницы будет располагаться в своей ячейке таблицы.

Для продолжения вам понадобятся картинки, скачайте их здесь и положите в папку images, которую создали ранее (только картинки, а не папку с ними).

Теперь можно перенести все это в HTML.

Шаг 3.

Откройте в блокноте, созданную сегодня страничку index.html и наберите в ней (или скопируйте) основу html-страницы, т.е.

- 
    
    Моя первая страница  
    
    
    
-

Теперь в теги вставим каркас таблицы, а именно

- 
   
     Моя первая страница  
   
   
   
-

Здесь теги означают начало и конец таблицы, а теги - строки в ней. У нас 5 строк, а потому и 5 пары тегов строк.

Далее. У нас 2 столбца, за обозначение столбцов отвечают теги  , но посмотрите на картинку, где их действительно два? Только в четвертой строке (где блок новостей и контент), в эту строку мы и поместим две пары тегов столбцов. А в остальных строках столбец один, как бы включающий в себя два. На такой случай у тега  есть атрибут colspan, объединяющий столько столбцов, сколько необходимо. В нашем случае их 2, так и напишемcolspan="2".

Теперь ваша страница должна выглядеть так.

- 
   
     Моя первая страница
Здесь будет шапка сайта
Здесь будет меню сайта
Здесь будет шапка блока новостей
Здесь - блок новостей Здесь - контент
Здесь - низ сайта

Если сейчас вы посмотрите на нашу страничку в браузере, то увидите, что она очень маленькая. Это связано с тем, что у нашей таблицы нет размера, она меняется в зависимости от содержимого. Не очень удобно. Давайте зададим размеры. За это отвечают два атрибута: width - за ширину, height - за высоту.

Наша картинка шапки имеет размеры 780 Х 165, их мы и зададим для соответствующей ячейки. Строка меню должна иметь такую же ширину, а высоту - как у соответствующей картинки, т.е. 38. Ширина шапки блока новостей равна также 780, а высота - 33 (как у соответствующей картинки). Ширина блока новостей и контента должны в сумме давать те же 780 (отведем 200 на новости, а 580 - на контент), а высоту зададим 320 (просто для удобства). Строка низа сайта аналогична строке с меню, т.е. 780 Х 38.

 
   
     Моя первая страница
Здесь будет шапка сайта
Здесь будет меню
Здесь будет шапка блока новостей
Здесь - блок новостей Здесь - контент
Здесь - низ сайта

Теперь самое время вставить вместо слов "Здесь будет шапка" саму картинку шапки и сделать так для всех осталных ячеек, но есть один нюанс. В остальных блоках мы собираемся что-то писать поверх картинок, т.е. наши картинки должны быть в них фоном. Для этого у столбцов существует атрибут background, в качестве значения которого мы и укажем соответствующие картинки.

Наши картинки лежит в папке images. Поэтому путь к ним будет выглядеть так: background="images/имя картинки". Если у вас другая структура хранения страниц и картинок, то вам следует указать ваш путь к картинке.

Наконец, у блока новостей и контента нет фоновых картинок, поэтому в них используем уже знакомый тег bgcolor, где укажем номер цвета.

Моя первая страница

Здесь будет меню
Здесь будет шапка блока новостей
Здесь - блок новостей Здесь - контент
Здесь - низ сайта

Откройте страницу в браузере и посмотрите, что получилось.

Уже лучше, но есть недочеты, разберем их:

 

 

 

 

 

 

 

Теперь ваша страница должна выглядеть так.

Главная

главная || шаблоны || контакты
Шаблон сайта - это готовый дизайн для Вашего сайта. Другими словами, шаблон сайта это набор графических элементов, из которых, как из “кубиков”, строится внешний вид страниц Вашего сайта. Шаблоны сайтов довольно просты в использовании и не требуют специальных навыков для работы с ними, поэтому подойдут как для начинающих веб-мастеров, так и для профессионалов. В большинстве случаев, для работы с шаблоном сайта, необходимы только лишь базовые знания HTML (верстка). Знания HTML необходимы для того, чтобы наполнить страницы сайта содержанием: добавить текст, ссылки, картинки и т.д. Здесь - контент
Copyright © 2009

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

Для того, чтобы это исправить, нам придется в каждой ячейке с текстом поместить еще по одной таблице. Да, в любой столбец можно вставлять другие таблицы и задавать им свои атрибуты. Это совсем не сложно, ведь все эти таблицы будут иметь одну строку и один столбец и одинаковые параметры отступов.

Структура этих таблиц будет следующая:

Здесь содержимое тегов td основной таблицы

Параметру cellpadding можно присвоить разные значения для разных таблиц. Так для таблицы меню присвоимcellpadding="5", для таблицы блока меню - cellpadding="10", а для контента - cellpadding="15".

Окончательный код вашей страницы должен выглядеть так:

Главная

главная || шаблоны || контакты
Шаблон сайта - это готовый дизайн для Вашего сайта. Другими словами, шаблон сайта это набор графических элементов, из которых, как из “кубиков”, строится внешний вид страниц Вашего сайта. Шаблоны сайтов довольно просты в использовании и не требуют специальных навыков для работы с ними, поэтому подойдут как для начинающих веб-мастеров, так и для профессионалов. В большинстве случаев, для работы с шаблоном сайта, необходимы только лишь базовые знания HTML (верстка). Знания HTML необходимы для того, чтобы наполнить страницы сайта содержанием: добавить текст, ссылки, картинки и т.д.
Здесь - контент
Copyright © 2009

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

Шаг 4.

В нашем меню указанны названия трех страниц: главная, шаблоны и контакты. Главная - это наша index.html, с нее начинается загрузка вашего сайта. По умолчанию при наборе в адресной строке названия сайта среди всех страниц этого сайта ищется страница с названием index и загружается.

Создайте еще две страницы pattern.html и kontact.html, скопируйте в них код из index.html и сохраните в нашей папке site. В тегах этих страниц напишите соответственно "шаблоны" и "контакты".

На этом третий урок закончен. В следующем уроке вы научитесь соединять наши страницы между собой и оформлять контент.

Translate »