Как создать простой HTML сайт.


Для того, чтобы создать свой первый сайт, или простую 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 нужно обязательно.
<img src="адрес" width="ширина" height="высота" alt="название" > - так вставляется изображение.
<a href="# адрес"> Страница 1 </a> - так делается ссылка на страницу.

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


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

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

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

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

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


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

Должно получиться вот так - простая HTML страница

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

<!DOCTYPE_ _> обязательная часть
<html> обьявление языка написания страницы
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> - кодировки сайта
<title>Здесь название страницы, отображаемое в верхнем левом углу браузера</title>
</head>
<body>
--- здесь располагают ХЕДЕР и меню сайта
-------- дальше контентная часть
это уже веб-страница, которую можно сохранить в файл с названием - ya.html и посмотреть в браузере.
--- внизу обычно ФУТЕР
</body>
</html> - обьявление окончания данной страницы

Стили в языке HTML при создании сайта.


Подробно о стилях CSS написано в последующей статье, а сейчас в двух словах:
Всем тегам нужно установить свои параметры. Точнее установить размеры, цвет, расположение по горизонтали и вертикали и т.д. Вот все эти параметры можно назвать стилями, а описывают их в отдельном файле, который часто называют style.css, но в данном примере некоторые стили будут описаны на самой странице,
между тегами <head> и </head>,
а обьявляться они будут между тегами <style> и </style>

Пример простой HTML страницы.


Теперь можно посмотреть на пример простой HTML страницы здесь

Возможно я повторюсь, но чтобы убедится что все работает и сделать это своими руками, сделайте следующее:

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

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

А построение более сложного проекта, созданного без использования таблиц, можно изучить на следующей странице, где описано создание сайта с использованием тега div


Поделитесь ссылкой на статью...


Всего комментариев - 4.    Можете оставить свой комментарий.

Boo   2013-03-13 11:24:25   сайт автора -

Исправьте, что ли.

админ   2013-03-13 20:22:43   сайт автора -

Для Boo - уточните, что именно исправить?

koctik   2013-04-15 17:16:25   сайт автора - http://php-bce.ru/

Создать самому сайт будет Вам не проблема, если знаете уже некоторые нюансы и основы HTML и CSS, останется побольше освоить серверный язык программирования РНР. Сначала надо попрактиковаться на своем компьютере (Денвером, уже имеется программа без установки) и после создания и проверки работы с нею, смело загружаем уже готовые свои проекты. Они будут такими же одинаковыми, в отображении, какие были и на компьютере.

Константин   2013-04-21 16:24:40   сайт автора - http://php-bce.ru/

Создать самому сайт будет Вам не проблема, если знаете уже некоторые нюансы и основы HTML и CSS, останется побольше освоить серверный язык программирования РНР. Сначала надо попрактиковаться на своем компьютере (Денвером, уже имеется программа без установки) и после создания и проверки работы с нею, смело загружаем уже готовые свои проекты. Они будут такими же одинаковыми, в отображении, какие были и на компьютере.


   Login *
   E-mail *
   URL (не обязательно)
- подписаться на сообщения        - я не спамер