Html команды для создания сайтов

Аббревиатура HTML расшифровывается как HyperText Markup Language. HTML — это не язык программирования, это язык разметки сайта.

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

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

Основные команды HTML

Список HTML-команд очень большой. Но основных не так много. Для того чтобы начать писать код, вам нужен редактор. Можно использовать «Блокнот». Рекомендуется использовать Notepad++. Он выглядит вот так.

html команды для создания сайтов

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

В языке HTML есть закрывающиеся и незакрывающиеся теги. Также в этом языке существует понятие вложенности. Каждый объект в коде — это элемент. У элемента есть открывающий тег, закрывающий и содержимое. Более того, у тега есть свои дополнительные атрибуты со своими значениями.

На рисунке видно два тега <html> и </html>. Запомните, что открывающий и закрывающий пишутся одинаково, но отличаются только «/». Если тег не закрыть, то обработчик будет всё остальное считать продолжением именно этого элемента. Это очень важно. Особенно в ссылках. Их мы рассмотрим немного дальше.

Тег <html> обязательный. Его всегда нужно писать. А вот закрывать не обязательно. По стандартам надо, но если не закрыть, работать всё равно будет.

Есть и другие основные теги: head и body.

команды для создания сайта html в блокноте

Эти HTML-команды являются каркасом для страницы. Они обязательны. Они также закрываются.

Название тегов соответствует смыслу. Head — голова. В этом разделе указывается служебная и важная информация, которую не видно. Раздел body — тело документа. Здесь содержимое, которое отображается пользователю. Старайтесь закрывать теги сразу, чтобы потом не было путаницы.

html команды

В служебном разделе указывается:

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

Файл стилей подключается вот так:

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

Файл скриптов следующим образом:

<script type=»text/javascript» src=’main.js’></script>

У текста обязательно должен быть заголовок. Его указываем вот так:

<title>Заголовок страницы</title>

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

Теги для оформления текста

Текст нужно размещать в теге абзаца. Он обозначается как <p>Текст</p>. Для текста также можно использовать <span>Строка</span>.

Оформлять текст можно, как и в «Ворде»:

  • <i>курсив</i>
  • <strong>жирный текст</strong>
  • <s>перечеркнутый текст</s>
  • <u>подчеркнутый текст</u>

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

Использование заголовков

Есть и другие важные HTML-команды. Для создания сайтов обязательно используют заголовки. Они указываются при помощи тега <h1>Заголовок первого уровня</h1>. Существуют уровни от 1 до 6. Важно понимать, что в заголовках должна быть вложенность.

Пример на рисунке.

основные команды html

Имейте в виду, что рекомендуется использовать только один заголовок h1. При этом он должен совпадать с тегом <title>. Разумеется, вы можете указать 200 заголовков h1, но тогда к вам будут применены санкции со стороны поисковых систем.

Использование изображений

Изображения являются неотъемлемой частью веб-страниц. На примере показано, как можно вставить какую-нибудь фотографию.

html команды для сайта

Как видите, на примере детально показано, что и как называется.

Использование ссылок

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

Ссылка обозначается тегом <a>. Но его обязательно нужно закрывать. Кроме этого, у этого элемента есть обязательный атрибут href, в котором и указывается адрес ссылки.

html команды

В примере, указанном выше, видно, что вместо текста ссылки указана картинка. То есть можно ставить как текст, так и картинку.

Ссылки можно также форматировать при помощи классов стилей или обычных тегов (курсив, жирный, подчеркивание и перечеркивание).

Использование таблиц

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

Таблица создается следующим образом:

<table width=»100%» border=»1″>

<tr>

<td>Текст ячейки</td>

<td>Текст ячейки</td>

</tr>

<tr>

<td>Текст ячейки</td>

<td>Текст ячейки</td>

</tr>

</table>

Атрибут width указывает ширину таблицы. Она может быть в процентах или пикселях. Border указывает толщину рамки.

Структура указывается следующим образом. Тег tr является строкой. Тег td ячейкой. А всё вместе — это таблица.

список html команд

Таблицу можно выравнивать. Для этого используется атрибут align, который может принимать три значения: Left, Center, Right. Пример использования указан ниже.

html команды для таблицы

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

Использование списков

Используя HTML-команды, можно создать различные виды списков. Практически точно так же, как и в редакторе Word.

В языке Html существуют упорядоченные и неупорядоченные списки (маркированные). Пример такого списка.

<ul>

<li>Первое</li>

<li>Второе</li>

<li>Третье</li>

</ul>

Результат будет такой:

  • Первое
  • Второе
  • Третье

Тип списка

Код в языке HTML

В виде круга

<ul type=»disc»>
<li>…</li>
</ul>

В виде окружности

<ul type=»circle»>
<li>…</li>
</ul>

С квадратными маркерами

<ul type=»square»>
<li>…</li>
</ul>

Упорядоченные списки создаются точно так же, но только вместо <ul>, используем тег <ol>.

Здесь также можно задать тип вывода списка:

  • «1» – арабские числа 1, 2, 3 …
  • «A» – заглавные буквы A, B, C …
  • «a» – строчные буквы a, b, c …
  • «I» – большие римские числа I, II, III …
  • «i» – маленькие римские числа i, ii, iii …

Стандартно выводятся арабские цифры.

Поскольку это нумерованные списки, у них есть атрибут start, в котором указывается начальное значение списка. Например, можно выводить список начиная с 10-го или 20-го числа.

Использование стилей

HTML-команды для сайта весьма разнообразны, но все они подчиняются стилям. Стили можно указывать в виде файла в разделе head: <link rel = “stylesheet” href = “style.css” type = “text/css”> или прописать сразу готовый стиль.

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

Представьте, что у вас 20 страниц HTML и вы решили сделать заголовок на 2 пикселя больше. Если у вас всё в файле стилей, то правку внести нужно только там. Если везде индивидуально, то обновлять придется все 20 страниц.

Указывать только для одной страницы можно следующим образом.

html команды для стилей

Данный способ использовать не рекомендуется.

fb.ru

Язык HTML и его теги

Первая версия языка HTML появилась еще в 1992 году. На момент 2013 года разрабатывается спецификация новой версии HTML под номером 5. Разработкой данной спецификации занимается организация World Wide Web Consortium, или сокращенно W3C. Организация W3C занимается разработкой и других Web-стандартов. Ознакомится с этими стандартами вы можете на их сайте www.w3.org. Кстати, Многие Web-браузеры уже поддерживают некоторые возможности HTML 5.

Предлагаю начать изучение языка HTML сразу с примера. Поэтому давайте создадим нашу первую Web-страничку. Для создания WEB-страниц подойдет любой текстовый редактор. Я предлагаю для начала воспользоваться встроенным в Windows Блокнотом (Notepad) (вообще в дальнейшем для редактирования html-кода я советую использовать бесплатный текстовый редактор Notepead++). Найти его можно: «Пуск->Все программы->Стандартные->Блокнот». Давайте создадим страничку  об автомобилях. Итак, откроем Блокнот и наберем в нем текст:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>
<title>Пример Web-страницы</title>
</head>
<body>
<h1 align=»center»>Сайт об автомобилях.</h1>
<p>Добро пожаловать на наш автомобильный сайт. Здесь Вы найдете много интересных и полезных статей об <strong>автомобилях</strong>. На сайте есть описания многих импортных и отечественных автомобилей.</p>
</body>
</html>

Далее сохраним созданную web-страницу в файл с именем index.html. При этом в диалоговом окне сохранения файла необходимо задать кодировку UTF-8 и заключить имя файла в кавычки, иначе Блокнот добавит к нему расширение txt, и наш файл получит имя index.htm.txt:

Создание web-страницы в блокноте

Теперь осталось открыть созданный файл в браузере и посмотреть на результат. Для этого можно воспользоваться поставляемым в составе Windows браузером Microsoft Internet Explorer, либо любым другим установленным на вашем компьютере браузером, щелкнув два раза мышкой по файлу index.html или перетаскиванием файла на значок браузера. Открываем и видим примерно такой результат:

простая web-страница

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

Что такое тег?

Теперь поговорим подробнее о структуре страницы. Рассмотрим фрагмент: <h1 align=»center»>Сайт об автомобилях</h1>. Здесь мы видим текст, который отображается на странице как заголовок, заключенный в теги <h1> и </h1>. Что же такое тег в html языке?

Тег HTML —  это обычные слова и символы, заключенные в угловые скобки, например <h1>, <p>, <body>. Так тег <h1> является открывающим тегом, тег </h1> закрывающим тегом, а текст между ними называется содержимым тега. Также тег <h1> и тег </h1> называются парными тегами. Вместе открывающий тег плюс содержимое плюс закрывающий тег образуют элемент html-документа. Бывают еще  элементы состоящие из одного открывающего тега:

html тег

Так парный тег <h1> определяет элемент заголовка первого уровня. Всего существует шесть уровней заголовков, это элементы <h1> — <h6>.

Элементы бывают блочные и строчные (текстовые). Блочные элементы осуществляют структурное форматирование страницы. Блочные элементы всегда отображаются на странице с новой строки и имеют отступ от соседних элементов. Строчные элементы осуществляют непосредственное форматирование текста или логическое форматирование. Элемент <h1> является блочным элементом.

Далее идет парный тег <p>, который создает на HTML-странице абзац. Содержимое данного тега станет текстом этого абзаца. Элемент <p> также является блочным элементом и как мы видим он начинается с новой строки и между заголовком <h1> и абзацем есть отступ.

Внутри абзаца встречается парный тег <strong>, который выводит свое содержимое полужирным шрифтом. Данный тег <strong> вложен внутрь содержимого тега <p>. Это значит, что содержимое тега <strong> будет отображаться как часть абзаца. Такие вложенные теги называются дочерними, а теги в которые вложены другие теги называются родительскими. Таким образом, тег <strong> является дочерним, а тег <p> — родительским. Такая вложенность тегов встречается в HTML сплошь и рядом.

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

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

Вы могли заметить, что открывающий тег <h1> кроме названия содержит еще какой-то текст: align=»center». Это атрибут тега, который задает его параметры. Каждый атрибут имеет имя, после которого идет знак =, и далее идет его значение взятое в кавычки:

html тег. атрибут

В наше конкретном случае, атрибут align тега <h1> задает выравнивание текста. Так значение center указывает браузеру, что содержимое тега <h1> необходимо выровнять по центру.

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

Структура WEB — страницы. Основные html теги.

Для корректного отображения страницы в браузере, в html-коде обязательно наличие следующих парных тегов: <html>, <head> и <body>.

Во-первых весь ваш html-код должен быть заключен в теги <html> и </html>. Они сообщают браузеру, что страница содержит html-код.

Кроме этого в коде страницы должны быть разделы заголовка и тела документа. Раздел заголовка, или его еще называют шапка, состоит из парного тега <head> и его содержимого. В этом разделе помещают сведения о параметрах страницы, не отображаемые на экране и нужные только браузеру. В нашем примере раздел заголовка такой:

<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>
<title>Пример Web-страницы</title>
</head>

 Тело документа выделяется с помощью тегов <body> и </body>. Сюда помещается весь контент страницы, то что будет отображаться в браузере.

Подводя итог вышесказанному, любая html-страница имеет следующую структуру:

<html>
<head>
…служебная информация…
</head>
<body>
…содержимое WEB-страницы…
</body>
</html>

Метаданные html страницы

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

<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>

и

<title>Пример Web-страницы</title>

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

Следующий метатег <meta> сообщает браузеру кодировку нашего документа. В данном случае мы создали нашу web-страницу в кодировке utf-8. Информацию о кодировке мы передали браузеру с помощью атрибута content тега <meta>. Очень важно задавать кодировку, чтобы браузер корректно отображал содержимое нашей страницы. Если вы заметили, то тег <meta> не имеет закрывающего тега. Это так называемый одиночный тег, или элемент состоящий из одного открывающего тега.  Вообще с помощью тега <meta> можно задавать множество параметров важных как для браузера, так и для поисковиков.

webcodius.ru

Доброго времени суток. Как правило в современном мире сайты создаются либо на CMS либо в бесплатных или платных конструкторах. Но все же, в начале времен 1990-2000 годы сайты создавались преимущественно на HTML, без использования каких-либо обращений к базе данных. Различные программы, позволяющие редактировать HTML + CSS в реальном времени, например, Dreamweaver — появились только в самом конце 20-го века. Поэтому сайты создавались в блокноте и других подобных редакторов. Хоть сейчас и существует множество удобных способов сделать качественный ресурс, создание сайта при помощи блокнота позволяет выучить основы построения страницы и основы HTML в целом.

Итак, для того, чтобы создать сайт через блокнот вам нужно для начала создать HTML файл. Сделать это можно следующим образом:
Заходите в меню Пуск -> Все программы -> Стандартные -> Блокнот

Создание сайта в блокноте
И сразу же сохраним его в HTML формате:  В блокноте нажмите: Файл -> Сохранить как

Сохраняем файл в формате HTML
И напишите название файла, к примеру, index.html

Сохраняем файл в формате HTML

Теперь мы можем приступать непосредственно к созданию HTML верстки в блокноте. Для начала, напишем основную разметку HTML кода, вы можете ее сразу скопировать и вставить, чтобы не тратить время попусту.

<!DOCTYPE html PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">  <html>  <head>  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  <title>Мой самый прекрасный сайт</title>  </head>  <body>  <h1>Мой первый сайт</h1>  <p>Еще совсем чуть-чуть, и я научусь делать самые лучшие сайты на свете.</p>  </body>  </html>

По сути это основные элементы, из которых и состоит любой веб-ресурс. Все, что находится в скобках называется HTML-тегом или просто тегом. Все HTML теги открываются, содержат в себе какую-то информацию и затем закрываются. Есть и другие теги, которым не нужен закрывающий тег, но о них мы поговорим позже. Сейчас нам куда интересней ответ на вопрос «как же создать сайт в блокноте?».

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

nz4.ru

Структура html документа

Скопируй код в файл index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">  <html>   <head>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">   <title>Заголовок страницы для браузера</title>   <link rel="stylesheet" href="/style.css" type="text/css" />   </head>   <body>   <h1>Заголовок страницы</h1>   <!-- Комментарий -->   <p>Абзац.</p>      </body>  </html>

Теперь открой его в браузере, должно получится так:

Вставить код в блокнот Так выглядит сайт html в браузере

В кратце опишу что значат эти теги. Если хочешь подробнее разобраться то по googl-и как говорится информации на эту тему море.

Указываем браузеру по какому стандарту нужно отображать страницу:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Тег html говорит о том где начинается и заканчивается html документ

<html>...</html>

Тег head необходим для размещения служебной информации, тут подключаются стили, скрипты и размещена meta информация страницы. Посетители сайта не видят содержимого этого тега.

<head>...</head>

Тег body содержит разметку страницы, содержимое этого тега видят посетители сайта.

<body>...</body>

Верстка или создание сайта на html

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

Итак что будем верстать:

макет сайта

Фон и основной каркас сайта

Замени содержимое своего файла index.html на следующее:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">  <html>  <head>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">   <title>Мой первый сайт на html</title>   <link rel="stylesheet" href="/style.css" type="text/css" />  </head>  <body>  	<!-- Основной блок сайта -->  	<div id="basic">  	  	</div>  </body>  </html>

И добавь в style.css такой код:

/*Каркас сайта*/  body {padding:0px; margin:0; background:#4c281e; font-size:14px; font-family:Arial, Sans-serif;}  #basic {width:960px; min-height:950px; margin:0 auto; padding:20px 20px 20px 20px; background:#fff;}  img {border:0;}  a {color:#ff9c00;}  a:hover {text-decoration:none;}

Обнови страницу с сайтом в браузере (F5), должно получится так:

Каркас html сайта

Шапка сайта

Добавьте в тег div с идентификатором basic следующий код:

 <!-- Шапка сайта -->  	<div id="head-site">  	<a href="/"><img src="/images/logo.png" alt="Кофейня" title="Кофейня" /></a>  	<img src="/images/telefon.png" alt="+7 (3537) 25-60-60" title="+7 (3537) 25-60-60" class="telefon" />  </div>

Что бы получилось следующее:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">  <html>  <head>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">   <title>Мой первый сайт на html</title>   <link rel="stylesheet" href="/style.css" type="text/css" />  </head>  <body>  	<!-- Основной блок сайта -->  	<div id="basic">  	  		<!-- Шапка сайта -->  		<div id="head-site">  			<a href="#"><img src="/images/logo.png" alt="Кофейня" title="Кофейня" /></a>  			<img src="/images/telefon.png" alt="+7 (3537) 25-60-60" title="+7 (3537) 25-60-60" class="telefon" />  		</div>  		  	</div>  </body>  </html>

И добавляем в файл css строки:

/*Шапка сайта*/  li.none-bg {background:none!important;}  .telefon {float:right;}

Верхнее меню сайта

Что бы на нашем html сайте появилось навигационное меню, которое изображено в макете добавить в index.html после:

<!-- Шапка сайта -->  			<div id="head-site">  			<a href="#"><img src="/images/logo.png" alt="Кофейня" title="Кофейня" /></a>  			<img src="/images/telefon.png" alt="+7 (3537) 25-60-60" title="+7 (3537) 25-60-60" class="telefon" />  		</div>

Этот код:

<!-- Верхнее меню сайта -->  	<div id="menu-top">   <div class="bg-1">   <ul>   <li><a href="#">О нас</a></li>   <li><a href="#">Ассортимент</a></li>   <li><a href="#">Отзывы</a></li>   <li><a href="#">Забронировать столик</a></li>   <li><a href="#">Наши клиенты</a></li>   <li class="none-bg"><a href="#">Контакты</a></li>   </ul>   </div>   <div class="bg-2"></div>  	</div>

Что бы получилось так:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">  <html>  <head>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">   <title>Мой первый сайт на html</title>   <link rel="stylesheet" href="/style.css" type="text/css" />  </head>  <body>   <!-- Основной блок сайта -->   <div id="basic">      	<!-- Шапка сайта -->   <div id="head-site">   <a href="#"><img src="/images/logo.png" alt="Кофейня" title="Кофейня" /></a>   <img src="/images/telefon.png" alt="+7 (3537) 25-60-60" title="+7 (3537) 25-60-60" class="telefon" />   </div>      <!-- Верхнее меню сайта -->   <div id="menu-top">   <div class="bg-1">   <ul>   <li><a href="#">О нас</a></li>   <li><a href="#">Ассортимент</a></li>   <li><a href="#">Отзывы</a></li>   <li><a href="#">Забронировать столик</a></li>   <li><a href="#">Наши клиенты</a></li>   <li class="none-bg"><a href="#">Контакты</a></li>   </ul>   </div>   <div class="bg-2"></div>   </div>      </div>  </body>  </html>

А в файл style.css:

/*Верхнее меню сайта*/  #top-menu {width:960px; height:74px; }  .bg-1 {width:950px; height:64px; background:#4c281e url(images/m1.png) repeat-x; padding:0 0 0 10px;}  .bg-2 {width:940px; height:8px; background:#ff9c00; margin:0 auto;}  .bg-1 ul {margin:0; padding:0; list-style:none;}  .bg-1 ul li {float:left; background:url(images/m2.png) no-repeat right center; padding:0 2px 0 0;}  .bg-1 ul li a {display:block; height:40px; padding:24px 27px 0 27px; color:#ff9c00; text-decoration:none; text-transform:uppercase;}  .bg-1 ul li a:hover {color:#fff; background:#ff9c00;}

Теперь сайт имеет логотип телефон и меню при наведении на которое меняется фон:

Логотип, меню и телефон html сайта

Левое меню и контент 

Пришло время сделать левое меню и блок с контентом. Для этого копируем код и тщательно изучаем, что к чему. После блока:

<!-- Верхнее меню сайта -->  <div id="menu-top">  ......  </div>

Добавляем следующее:

<!-- Левое меню и Контент -->  			<div id="content">  			  			<!-- Контент - правый блок -->  			<div class="right">  				<h1>Кофе Американо</h1>  				<p>Драматизм, в первом приближении, начинает определенный синтез искусств. Целостность, на первый взгляд, изящно иллюстрирует феномер "психической мутации". Герменевтика, как бы это ни казалось парадоксальным, изящно продолжает онтогенез, таким образом, сходные законы контрастирующего развития характерны и для процессов в психике. </p>    				<p>Согласно теории "вчувствования", разработанной Теодором Липпсом, флегматик дает эйдос. Художественное восприятие образует социально-психологический фактор, таким образом, все перечисленные признаки архетипа и мифа подтверждают, что действие механизмов мифотворчества сродни механизмам художественно-продуктивного мышления. Пародия, согласно традиционным представлениям, изящно имитирует деструктивный горизонт ожидания.</p>  				  				<img src="/images/img1.png" alt="" title="" style="margin-right:40px;" />  				<img src="/images/img2.png" alt="" title="" style="margin-right:40px;" />  				<img src="/images/img3.png" alt="" title="" />    				<p>Художественный ритуал, по определению, иллюстрирует метод кластерного анализа. Сангвиник, так или иначе, изменяем. Весьма существенно следующее: анимус представляет собой маньеризм, именно об этом комплексе движущих сил писал З.Фрейд в теории сублимации.</p>    				<p>Диалогичность готично образует художественный ритуал. Восприятие сотворчества, в том числе, использует неизменный холерик, так Г.Корф формулирует собственную антитезу. Беллетристика иллюстрирует принцип артистизма. </p>    				<p>Горизонт ожидания аккумулирует фактографический эдипов комплекс, таким образом, сходные законы контрастирующего развития характерны и для процессов в психике. Игровое начало, так или иначе, выстраивает конструктивный этикет, так Г.Корф формулирует собственную антитезу.</p>    				<p>Удожественный ритуал, по определению, иллюстрирует метод кластерного анализа. Сангвиник, так или иначе, изменяем. Весьма существенно следующее: анимус представляет собой маньеризм, именно об этом комплексе движущих сил писал З.Фрейд в теории сублимации.</p>  			</div>  			  			<!-- Левое меню - левый блок блок -->  			<div class="left">  				<div id="left-menu">  					<div class="block-nad-menu"></div>  					<div class="block-menu">  					<ul>  					<li><a href="#">Кофе Айриш</a></li>  					<li><a href="#">Кофе Американо</a></li>  					<li><a href="#">Кофе Глясе</a></li>  					<li><a href="#">Кофе Диппио</a></li>  					<li><a href="#">Кофе Капучино</a></li>  					<li><a href="#">Кофе Кон Панна</a></li>  					<li><a href="#">Кофе Коретто</a></li>  					<li><a href="#">Кофе Латте</a></li>  					<li class="none-bg"><a href="#">Кофе Лунго</a></li>  					</ul>  					</div>  					<div class="block-pod-menu"></div>  				</div>  			  			</div>  		  		</div>

Файл index.html будет выглядеть вот так:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">  <html>  <head>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">   <title>Мой первый сайт на html</title>   <link rel="stylesheet" href="/style.css" type="text/css" />  </head>  <body>   <!-- Основной блок сайта -->   <div id="basic">      	<!-- Шапка сайта -->   <div id="head-site">   <a href="#"><img src="/images/logo.png" alt="Кофейня" title="Кофейня" /></a>   <img src="/images/telefon.png" alt="+7 (3537) 25-60-60" title="+7 (3537) 25-60-60" class="telefon" />   </div>      <!-- Верхнее меню сайта -->   <div id="menu-top">   <div class="bg-1">   <ul>   <li><a href="#">О нас</a></li>   <li><a href="#">Ассортимент</a></li>   <li><a href="#">Отзывы</a></li>   <li><a href="#">Забронировать столик</a></li>   <li><a href="#">Наши клиенты</a></li>   <li class="none-bg"><a href="#">Контакты</a></li>   </ul>   </div>   <div class="bg-2"></div>   </div>      <!-- Левое меню и Контент -->   <div id="content">      	<!-- Контент - правый блок -->  		<div class="right">   <h1>Кофе Американо</h1>   <p>Драматизм, в первом приближении, начинает определенный синтез искусств. Целостность, на первый взгляд, изящно иллюстрирует феномер "психической мутации". Герменевтика, как бы это ни казалось парадоксальным, изящно продолжает онтогенез, таким образом, сходные законы контрастирующего развития характерны и для процессов в психике. </p>      <p>Согласно теории "вчувствования", разработанной Теодором Липпсом, флегматик дает эйдос. Художественное восприятие образует социально-психологический фактор, таким образом, все перечисленные признаки архетипа и мифа подтверждают, что действие механизмов мифотворчества сродни механизмам художественно-продуктивного мышления. Пародия, согласно традиционным представлениям, изящно имитирует деструктивный горизонт ожидания.</p>      <img src="/images/img1.png" alt="" title="" style="margin-right:40px;" />   <img src="/images/img2.png" alt="" title="" style="margin-right:40px;" />   <img src="/images/img3.png" alt="" title="" />      <p>Художественный ритуал, по определению, иллюстрирует метод кластерного анализа. Сангвиник, так или иначе, изменяем. Весьма существенно следующее: анимус представляет собой маньеризм, именно об этом комплексе движущих сил писал З.Фрейд в теории сублимации.</p>      <p>Диалогичность готично образует художественный ритуал. Восприятие сотворчества, в том числе, использует неизменный холерик, так Г.Корф формулирует собственную антитезу. Беллетристика иллюстрирует принцип артистизма. </p>      <p>Горизонт ожидания аккумулирует фактографический эдипов комплекс, таким образом, сходные законы контрастирующего развития характерны и для процессов в психике. Игровое начало, так или иначе, выстраивает конструктивный этикет, так Г.Корф формулирует собственную антитезу.</p>      <p>Удожественный ритуал, по определению, иллюстрирует метод кластерного анализа. Сангвиник, так или иначе, изменяем. Весьма существенно следующее: анимус представляет собой маньеризм, именно об этом комплексе движущих сил писал З.Фрейд в теории сублимации.</p>     		</div>  		   		<!-- Левое меню - левый блок блок -->  		<div class="left">  			<div id="left-menu">  				<div class="block-nad-menu"></div>  				<div class="block-menu">  				<ul>  				<li><a href="#">Кофе Айриш</a></li>  				<li><a href="#">Кофе Американо</a></li>  				<li><a href="#">Кофе Глясе</a></li>  				<li><a href="#">Кофе Диппио</a></li>  				<li><a href="#">Кофе Капучино</a></li>  				<li><a href="#">Кофе Кон Панна</a></li>  				<li><a href="#">Кофе Коретто</a></li>  				<li><a href="#">Кофе Латте</a></li>  				<li class="none-bg"><a href="#">Кофе Лунго</a></li>  				</ul>  				</div>  			<div class="block-pod-menu"></div>  			</div>     		</div>      </div>      </div>  </body>  </html>

И в конец файла css копируем:

/*Левое меню и Контент*/  #content {width:960px; padding:20px 0 0 0; }  .right { float:right; width:690px; padding:0 0 0 20px; text-align:justify;}  .right h1 {text-transform:uppercase; color:#4c281e; font-weight:normal; margin-top:0;}  .left {width:250px; float:left;}  .block-nad-menu {width:240px; height:10px; background:#ff9c00;}  .block-pod-menu {width:240px; margin:0 0 0 10px; height:10px; background:#4c281e;}  .block-menu {width:240px; border-left:10px solid #ff9c00; background:#4c281e;}  .left ul {margin:0; padding:10px 0 0 0; list-style:none;}  .left ul li {background:url(images/m3.png) no-repeat bottom left;}  .left ul li a {display:block; width:195px; color:#fff; text-decoration:none; padding:10px 5px 10px 40px; background: url(images/marker.png) no-repeat 10px 8px;}  .left ul li a:hover {background:#ff9c00 url(images/marker.png) no-repeat 10px 8px;}  li.none-bg {background:none!important;}

Если все сделано правильно получится сайт как на картинке ниже:

Создание html сайта в блокноте

Подвал сайта

После блока:

<!-- Левое меню - левый блок блок -->  <div class="left">  ...  </div>

Вставляем:

<div class="myclr"></div>  		  		<!-- Подвал -->  		<div id="podval">  			<div class="yellow"></div>  			<div class="p1">ООО “Кофейня” 2015г.<br/>  			г. Москва, ул Революционная 1а</div>  			<div class="p3"><img src="/images/stat.png" alt="" title="" /></div>  			<div class="p2">Создание сайтов веб-студия <a href="#">«Парампампам»</a></div>  			  		</div>  		<div class="myclr"></div>

Теперь весь файл index.html выглядит вот так:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">  <html>  <head>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">   <title>Мой первый сайт на html</title>   <link rel="stylesheet" href="/style.css" type="text/css" />  </head>  <body>  	<!-- Основной блок сайта -->  	<div id="basic">  	  		<!-- Шапка сайта -->  		<div id="head-site">  			<a href="#"><img src="/images/logo.png" alt="Кофейня" title="Кофейня" /></a>  			<img src="/images/telefon.png" alt="+7 (3537) 25-60-60" title="+7 (3537) 25-60-60" class="telefon" />  		</div>  		  		<!-- Верхнее меню сайта -->  		<div id="menu-top">  		<div class="bg-1">  			<ul>  			<li><a href="#">О нас</a></li>  			<li><a href="#">Ассортимент</a></li>  			<li><a href="#">Отзывы</a></li>  			<li><a href="#">Забронировать столик</a></li>  			<li><a href="#">Наши клиенты</a></li>  			<li class="none-bg"><a href="#">Контакты</a></li>  			</ul>  		</div>  		<div class="bg-2"></div>  		</div>  		  		<!-- Левое меню и Контент -->  		<div id="content">  		  			<!-- Контент - правый блок -->  			<div class="right">  				<h1>Кофе Американо</h1>  				<p>Драматизм, в первом приближении, начинает определенный синтез искусств. Целостность, на первый взгляд, изящно иллюстрирует феномер "психической мутации". Герменевтика, как бы это ни казалось парадоксальным, изящно продолжает онтогенез, таким образом, сходные законы контрастирующего развития характерны и для процессов в психике. </p>    				<p>Согласно теории "вчувствования", разработанной Теодором Липпсом, флегматик дает эйдос. Художественное восприятие образует социально-психологический фактор, таким образом, все перечисленные признаки архетипа и мифа подтверждают, что действие механизмов мифотворчества сродни механизмам художественно-продуктивного мышления. Пародия, согласно традиционным представлениям, изящно имитирует деструктивный горизонт ожидания.</p>  				  				<img src="/images/img1.png" alt="" title="" style="margin-right:40px;" />  				<img src="/images/img2.png" alt="" title="" style="margin-right:40px;" />  				<img src="/images/img3.png" alt="" title="" />    				<p>Художественный ритуал, по определению, иллюстрирует метод кластерного анализа. Сангвиник, так или иначе, изменяем. Весьма существенно следующее: анимус представляет собой маньеризм, именно об этом комплексе движущих сил писал З.Фрейд в теории сублимации.</p>    				<p>Диалогичность готично образует художественный ритуал. Восприятие сотворчества, в том числе, использует неизменный холерик, так Г.Корф формулирует собственную антитезу. Беллетристика иллюстрирует принцип артистизма. </p>    				<p>Горизонт ожидания аккумулирует фактографический эдипов комплекс, таким образом, сходные законы контрастирующего развития характерны и для процессов в психике. Игровое начало, так или иначе, выстраивает конструктивный этикет, так Г.Корф формулирует собственную антитезу.</p>    				<p>Удожественный ритуал, по определению, иллюстрирует метод кластерного анализа. Сангвиник, так или иначе, изменяем. Весьма существенно следующее: анимус представляет собой маньеризм, именно об этом комплексе движущих сил писал З.Фрейд в теории сублимации.</p>  			  			</div>  			  			<!-- Левое меню - левый блок блок -->  			<div class="left">  				<div id="left-menu">  					<div class="block-nad-menu"></div>  					<div class="block-menu">  					<ul>  					<li><a href="#">Кофе Айриш</a></li>  					<li><a href="#">Кофе Американо</a></li>  					<li><a href="#">Кофе Глясе</a></li>  					<li><a href="#">Кофе Диппио</a></li>  					<li><a href="#">Кофе Капучино</a></li>  					<li><a href="#">Кофе Кон Панна</a></li>  					<li><a href="#">Кофе Коретто</a></li>  					<li><a href="#">Кофе Латте</a></li>  					<li class="none-bg"><a href="#">Кофе Лунго</a></li>  					</ul>  					</div>  					<div class="block-pod-menu"></div>  				</div>  			  			</div>  		  		</div>  		  		<div class="myclr"></div>  		  		<!-- Подвал -->  		<div id="podval">  			<div class="yellow"></div>  			<div class="p1">ООО “Кофейня” 2015г.<br/>  			г. Москва, ул Революционная 1а</div>  			<div class="p3"><img src="/images/stat.png" alt="" title="" /></div>  			<div class="p2">Создание сайтов веб-студия <a href="#">«Парампампам»</a></div>  		</div>  		<div class="myclr"></div>  		  	</div>  </body>  </html>

В файл css добавляем код в самый низ:

/*Подвал*/  .myclr {clear:both; float:none; width:100%; height:1px;}  #podval {border-top:10px solid #4c281e; margin-top:20px;}  .yellow {width:940px; height:5px; margin:0 auto; background:#ff9c00;}  .p1 {float:left; width:300px; padding:15px 0 0 0;}  .p2 {float:right; width:200px; text-align:right; padding:15px 20px 0 0;}  .p3 {float:right; width:30px; padding:15px 0 0 0;}

Теперь весь файл style.css выглядит следующим образом:

/*Каркас сайта*/  body {padding:0px; margin:0; background:#4c281e; font-size:14px; font-family:Arial, Sans-serif;}  #basic {width:960px; min-height:500px; margin:0 auto; padding:20px 20px 20px 20px; background:#fff;}  img {border:0;}  a {color:#ff9c00;}  a:hover {text-decoration:none;}    /*Шапка сайта*/  #head-site {height:70px;}  li.none-bg {background:none!important;}  .telefon {float:right;}    /*Верхнее меню сайта*/  #top-menu {width:960px; height:74px; }  .bg-1 {width:950px; height:64px; background:#4c281e url(images/m1.png) repeat-x; padding:0 0 0 10px;}  .bg-2 {width:940px; height:8px; background:#ff9c00; margin:0 auto;}  .bg-1 ul {margin:0; padding:0; list-style:none;}  .bg-1 ul li {float:left; background:url(images/m2.png) no-repeat right center; padding:0 2px 0 0;}  .bg-1 ul li a {display:block; height:40px; padding:24px 27px 0 27px; color:#ff9c00; text-decoration:none; text-transform:uppercase;}  .bg-1 ul li a:hover {color:#fff; background:#ff9c00;}    /*Левое меню и Контент*/  #content {width:960px; padding:20px 0 0 0; }    /*Контент - правый блок*/  .right { float:right; width:690px; padding:0 0 0 20px; text-align:justify;}  .right h1 {text-transform:uppercase; color:#4c281e; font-weight:normal; margin-top:0;}    /*Левое меню - левый блок*/  .left {width:250px; float:left;}  .block-nad-menu {width:240px; height:10px; background:#ff9c00;}  .block-pod-menu {width:240px; margin:0 0 0 10px; height:10px; background:#4c281e;}  .block-menu {width:240px; border-left:10px solid #ff9c00; background:#4c281e;}  .left ul {margin:0; padding:10px 0 0 0; list-style:none;}  .left ul li {background:url(images/m3.png) no-repeat bottom left;}  .left ul li a {display:block; width:195px; color:#fff; text-decoration:none; padding:10px 5px 10px 40px; background: url(images/marker.png) no-repeat 10px 8px;}  .left ul li a:hover {background:#ff9c00 url(images/marker.png) no-repeat 10px 8px;}      /*Подвал*/  .myclr {clear:both; float:none; width:100%; height:1px;}  #podval {border-top:10px solid #4c281e; margin-top:20px;}  .yellow {width:940px; height:5px; margin:0 auto; background:#ff9c00;}  .p1 {float:left; width:300px; padding:15px 0 0 0;}  .p2 {float:right; width:200px; text-align:right; padding:15px 20px 0 0;}  .p3 {float:right; width:30px; padding:15px 0 0 0;}

А сам сайт вот так:

сайт на html в блокноте готов

 

Другие страницы сайта и ссылки меню

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

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

  • o-nas.html — О нас
  • assortiment.html — Ассортимент
  • otzivi.html — Отзывы
  • zabronirovat-stolik.html — Забронировать столик
  • nashi-klienty.html — Наши клиенты
  • kontakty.html — Контакты

То же самое нужно сделать и с левым меню.

  • kofe-ayrish.html — Кофе Айриш
  • kofe-amerikano.html — Кофе Американо
  • kofe-glyase.html — Кофе Глясе
  • kofe-dippio.html — Кофе Диппио
  • kofe-kapuchino.html — Кофе Капучино
  • kofe-kon-panna.html — Кофе Кон Панна
  • kofe-koretto.html — Кофе Коретто
  • kofe-latte.html — Кофе Латте
  • kofe-lungo.html — Кофе Лунго

Теперь открываем index.html в NotePad++ и добавляем нужные ссылки соответствующему меню, что бы получилось так:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">  <html>  <head>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">   <title>Мой первый сайт на html</title>   <link rel="stylesheet" href="/style.css" type="text/css" />  </head>  <body>  	<!-- Основной блок сайта -->  	<div id="basic">  	  		<!-- Шапка сайта -->  		<div id="head-site">  			<a href="#"><img src="/images/logo.png" alt="Кофейня" title="Кофейня" /></a>  			<img src="/images/telefon.png" alt="+7 (3537) 25-60-60" title="+7 (3537) 25-60-60" class="telefon" />  		</div>  		  		<!-- Верхнее меню сайта -->  		<div id="menu-top">  		<div class="bg-1">  			<ul>  			<li><a href="/o-nas.html">О нас</a></li>  			<li><a href="/assortiment.html">Ассортимент</a></li>  			<li><a href="/otzivi.html">otzivi.html</a></li>  			<li><a href="/zabronirovat-stolik.html">Забронировать столик</a></li>  			<li><a href="/nashi-klienty.html">Наши клиенты</a></li>  			<li class="none-bg"><a href="/kontakty.html">Контакты</a></li>  			</ul>  		</div>  		<div class="bg-2"></div>  		</div>  		  		<!-- Левое меню и Контент -->  		<div id="content">  		  			<!-- Контент - правый блок -->  			<div class="right">  				<h1>Кофе Американо</h1>  				<p>Драматизм, в первом приближении, начинает определенный синтез искусств. Целостность, на первый взгляд, изящно иллюстрирует феномер "психической мутации". Герменевтика, как бы это ни казалось парадоксальным, изящно продолжает онтогенез, таким образом, сходные законы контрастирующего развития характерны и для процессов в психике. </p>    				<p>Согласно теории "вчувствования", разработанной Теодором Липпсом, флегматик дает эйдос. Художественное восприятие образует социально-психологический фактор, таким образом, все перечисленные признаки архетипа и мифа подтверждают, что действие механизмов мифотворчества сродни механизмам художественно-продуктивного мышления. Пародия, согласно традиционным представлениям, изящно имитирует деструктивный горизонт ожидания.</p>  				  				<img src="/images/img1.png" alt="" title="" style="margin-right:40px;" />  				<img src="/images/img2.png" alt="" title="" style="margin-right:40px;" />  				<img src="/images/img3.png" alt="" title="" />    				<p>Художественный ритуал, по определению, иллюстрирует метод кластерного анализа. Сангвиник, так или иначе, изменяем. Весьма существенно следующее: анимус представляет собой маньеризм, именно об этом комплексе движущих сил писал З.Фрейд в теории сублимации.</p>    				<p>Диалогичность готично образует художественный ритуал. Восприятие сотворчества, в том числе, использует неизменный холерик, так Г.Корф формулирует собственную антитезу. Беллетристика иллюстрирует принцип артистизма. </p>    				<p>Горизонт ожидания аккумулирует фактографический эдипов комплекс, таким образом, сходные законы контрастирующего развития характерны и для процессов в психике. Игровое начало, так или иначе, выстраивает конструктивный этикет, так Г.Корф формулирует собственную антитезу.</p>    				<p>Удожественный ритуал, по определению, иллюстрирует метод кластерного анализа. Сангвиник, так или иначе, изменяем. Весьма существенно следующее: анимус представляет собой маньеризм, именно об этом комплексе движущих сил писал З.Фрейд в теории сублимации.</p>  			  			</div>  			  			<!-- Левое меню - левый блок блок -->  			<div class="left">  				<div id="left-menu">  					<div class="block-nad-menu"></div>  					<div class="block-menu">  					<ul>  					<li><a href="/kofe-ayrish.html">Кофе Айриш</a></li>  					<li><a href="/kofe-amerikano.html">Кофе Американо</a></li>  					<li><a href="/kofe-glyase.html">Кофе Глясе</a></li>  					<li><a href="/kofe-dippio.html">Кофе Диппио</a></li>  					<li><a href="/kofe-kapuchino.html">Кофе Капучино</a></li>  					<li><a href="/kofe-kon-panna.html">Кофе Кон Панна</a></li>  					<li><a href="/kofe-koretto.html">Кофе Коретто</a></li>  					<li><a href="/kofe-latte.html">Кофе Латте</a></li>  					<li class="none-bg"><a href="/kofe-lungo.html">Кофе Лунго</a></li>  					</ul>  					</div>  					<div class="block-pod-menu"></div>  				</div>  			  			</div>  		  		</div>  		<div class="myclr"></div>  		  		<!-- Подвал -->  		<div id="podval">  			<div class="yellow"></div>  			<div class="p1">ООО “Кофейня” 2015г.<br/>  			г. Москва, ул Революционная 1а</div>  			<div class="p3"><img src="/images/stat.png" alt="" title="" /></div>  			<div class="p2">Создание сайтов веб-студия <a href="#">«Парампампам»</a></div>  			  		</div>  		<div class="myclr"></div>  		  	</div>  </body>  </html>

Теперь жми «Сохранить» потом «Файл > Сохранить как» и сохраняй для каждой ссылки файл с соответствующим именем в папке с файлами сайта. Вот что получилось у меня:

Ссылки меню и страницы html сайта

Все сайт готов. Осталось только поменять в каждой странице контент. 

У такого сайта не смотря на его простоту есть очень большой недостаток. Что бы поменять один пункт меню или элемент дизайна придется это делать это в каждом сайте. Когда страниц больше 10 начинается страшная путаница при его обслуживании. Так что создание сайта html в блокноте советую делать только для очень маленьких сайтов или одно-страничных LandingPage. А для полноценных сайтов осваивать CMS (они не так сложны как кажется).

www.opengs.ru

You May Also Like

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.