Примеры сайтов на HTML -> Комментарии на сайте

Как сделать сайт на html

Разнообразие и доступность CMS - систем управления сайтом, большинство которых распространяются бесплатно, привело к тому, что сегодня сделать сайт на HTML (HyperText Markup Language) пытаются только новички, начинающие изучать верстку сайтов и делающие первые шаги в обучении web-мастерству.

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

Преимущества сайтов на HTML

Отсутствие обновлений. Вы можете просто сделать сайт на HTML, загрузить его на бесплатный хостинг и забыть о нем. Вам не придется тратить время на обновление CMS и латание найденных в нем уязвимостей.
Легкость переноса. Чтобы перенести сайт, достаточно просто скопировать файлы в директорию другого хостинга.
Безопасность. Файлы HTML просто не могут содержать в себе «дыр».
Не требовательность к ресурсам сервера. Вы можете использовать бесплатный или самый дешевый хостинг, не поддерживающий PHP и базы данных.

Недостатки сайтов на HTML

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

Как сделать сайт на HTML

Сверстать сайт на HTML очень просто. Для этого понадобится только текстовый блокнот, который имеется в любой версии Windows.
Откройте блокнот и сохраните его как index.html.
Затем вставьте в него следующий код:

<html>
<head>
<title>Название сайта на HTML</title>
<meta name="description" content="Краткое описание сайта в 200-250 символов"></head>
<body>
<h1>Название статьи</h1>
<p>Первый абзац статьи</p>
<h2>Подзаголовок</h2>
<p>Второй абзац статьи</p>
</body>
</html>

Если вы планировать сделать сайт-одностраничник, то с этой задачей вы уже справились. Рассмотрим получившийся код подробнее.
<html></html> - обязательные теги (элементы разметки гипертекста), которыми должна начинаться и заканчиваться любая страница сайта,
<head></head> - «верхушка» документа, содержащая информацию не отображающуюся на странице,
<title></title> - заголовок страницы, выводящийся в верхней строке браузера,
<body></body> - теги, обрамляющие основную информацию, выводимую в окно браузера,
<p></p> - теги для обозначения абзацев в тексте,
<h1></h1>, <h2></h2>…<h6></h6> - теги для обозначения заголовков и подзаголовков статьи.

Чаще всего сайты состоят из нескольких страниц, навигация между которыми осуществляется ссылками. Файл index.html – это главная страница, на которую необходимо добавить ссылки на другие документы.

Как сделать ссылку в HTML

Создайте еще несколько HTML-документов и сохраните их с расширением .html и произвольным названием латинскими буквами, например, article.html, company.html и my.html.

Чтобы добавить HTML ссылки на главную страницу сайта, вставьте в index.html код

<a href="article.html">Статья</a><br />
<a href="company.html">О компании</a><br />
<a href="my.html">О нас</a>

Код должен находиться между тегами <body></body>. К примеру, вы можете разместить его после последнего тега <p></p>.

Тег <a href></a> состоит из анкора и адреса ссылки. Анкор - это видимый текст, указывающий посетителю на содержимое документа, на который ссылается страница. В атрибуте href указывается адрес документа, который должен соответствовать названию и местоположению html-документа.

Адрес ссылки, анкор

Как добавить комментарии на сайте HTML

Существует несколько способов добавить комментарии на сайт HTML. Самый простой из них – это использование виджетов социальных сетей. Такие виджеты не индексируются поисковыми системами и позволяют оставлять комментарии только уже зарегистрированным пользователям.

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

Примеры сайтов на HTML

Найти примеры сайтов на HTML довольно затруднительно, так как такие web-ресурсы не содержат никаких отличительных меток. Поэтому просто приведем примеры сайтов на HTML ниже.

http://belkosta.narod.ru/ - простой сайт с практически отсутствующим дизайном. Состоит из нескольких страниц, связанных между собой при помощи расположенного под статьей меню. Отсутствие излишних декоративных элементов делает его весьма удобным для чтения.

http://faceh0r.narod.ru/ - отличный пример сайта на HTML, имитирующего блоговую структуру. Главная страница правится вручную каждый раз, когда на сайте появляется новый контент.

Сложно ли сделать сайт на HTML

Ознакомившись с этой статьей, вы научились создавать простые html-документы и сайты. Однако данной информации недостаточно, чтобы сделать свои web-проекты более эффектными и функциональными. Каскадные таблицы стилей CSS и основы PHP помогут вам создавать гораздо более сложные проекты с нуля.

Каскадные таблицы стилей CSS

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

Таблицы стилей CSS обычно находятся в отдельном файле, который называется style или styles и имеет расширение css.

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

<link href="style.css" rel="stylesheet" type="text/css" />

Эта команда укажет html документу откуда брать стили оформления для того или иного элемента.

Давайте теперь рассмотрим как работают каскадные таблицы стилей CSS.

Например, вы хотите, чтобы весь текст, заключенный в теги <p> был прописан шрифтом times new roman размером 14 пунктов. Для этого нужно создать текстовый документ, назвать его style и дать расширение css, создайте его в корневой директории сайта. После этого не забудте прописать команду, указанную выше, после мета-тегов. Теперь открываем файл style.css с помощью блокнота и пишем следующее:

p { font-family:"Times New Roman"; font-size:14px}

Затем сохраняете изменения и открываете свою html страницу с помощью браузера. Вы увидите, что текст заключенный в теги <p> теперь написан шрифтом, который вы задали в таблице CSS.

А как же быть, если вы хотите определенный абзац написать другим шрифтом. Это можно сделать, используя классы в таблице стилей CSS. Например, один из абзацов нужно сделать 12 шрифтом, а остальные оставить как было. Для этого в теге этого абзаца пропишите следующее:

<p class="text">

Название класса вы можете написать любое, главное на английском языке, у меня как вы видите класс называется text. После этого открываем нашу таблицу стилей и создаем в ней тег <p> класса text:

p.text { font-family:"Times New Roman"; font-size:12px}

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

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

Меню сайта

Создание и продвижение сайтов

Как сделать сайт на html