+7 (3012) 63-05-71

Создание сайта HTML


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


Основные HTML для написания сайта.


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


  • <html> - этот тег стоит в самом начале любой страницы, и обьявляет кодировки и саму страницу.
  • </html> - этим тегом обязательно заканчиваются все страницы, точнее обьявляют конец страницы.
  • <head> </head> - между этими тегами находится невидимая часть сайта, документация.
  • <title> </title> - между этими тегами пишется название вашего сайта.
  • <body> </body> - между этими тегами пишется ввесь контент сайта - наполнение страницы.
  • <table> <tr> <td> - это таблица, одна из самых важных конструкций при построении сайта.
  • <h> ... </h> <p> ... </p> <li> ... </li> - теги для написания заголовков, параграфов, списков для вставки текста.
  • <div> </div> - блочный элемент, на котором можно построить весь сайт, изучить свойства тега div нужно обязательно.
  • <a href="# адрес"> Страница 1 </a> - так делается ссылка на страницу.

Инструменты для верстки веб-сайта.


Для верстки сайта нужен редактор, в котором можно его верстать. Лучше всего для этой цели подойдет програма Adobe Dreamweaver, которую можно скачать в сети и установить на свой компьютер. С ее помощью открываются все файлы для редактирования.


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


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


Из каких частей состоит страница сайта?


Для начала создадим простую HTML страницу и назовем ее - index.html. Она будет главной и название должно быть только таким, все остальные страницы можно называть как угодно, но обязательно с расширением _ _.html и обычно создают папку для хранения изображений.


Состоит страница минимум из трех частей:


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

На пустой странице щелкните правой кнопкой мышки, выбираете меню "Создать" - "Текстовый документ", дальше меняете название файла на index.html, потом копируете код страницы с примера , открываете файл index.html с помощью блокнота, вставляете с буфера код, сохраняете, дальше открываете файл с помощью браузера Mozilla Firefox, и смотрите результат.