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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<i>курсив</i>
<strong>жирный текст</strong>

<s>перечеркнутый текст</s>
<u>подчеркнутый текст</u>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<tr>

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

</tr>

<tr>

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

</tr>

</table>

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

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

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

Эти 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 страниц.

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

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

autogear.ru

Основные коды html | Создание сайта

Каждая веб-страница имеет общую структуру основных кодов html. Давайте и рассмотрим самые основные html-коды страниц сайта

Html-код самого простого сайта (веб-страницы):

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 3.2 Final//EN»><HTML><HEAD><TITLE>Название страницы</TITLE></HEAD><BODY>Текст страницы</BODY></HTML>

В самом коде сайта регистр букв значения не имеет, можно прописать как «HTML, BODY…» так и «html, body…».

Теги <!DOCTYPE…> и <HTML> служат для того чтобы код документа опознавался как html.

<HEAD> – говорит о том что начинается «голова» страницы – заголовок страницы и её техническая информация.

<TITLE>Название страницы</TITLE> – название страницы. Что написано между этими двумя тегами то и будет отображено в заголовке браузера.

</HEAD> – «голова» страницы закончилась.

Теги бывают открывающие <тег> и закрывающие </тег>. Есть теги, которые не нужно закрывать. Некоторые теги даже не закрытыми не вызывают ошибок, но всегда закрывайте если они должны закрываться.

<BODY>Текст страницы</BODY> – между этими тегами находится весь контент страницы – текст, картинки, ссылки и т.д.

</HTML> – документ закончился. Как правило, этот тег устанавливается в самом конце документа.

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

<h2>-<h6> – это заголовки.

Чем меньше цифра, тем крупнее будет шрифт в заголовке, можно настроить размер каждого вида заголовка. Считается что теги <h2>, <h3> самые «любимые» теги поисковиками, через эти теги поисковики определяют тему контента. Теги <h2>-<h6> обязательно должны закрываться.

Примеры:

<h3>Тег заголовка второго уровня</h3> - заголовок второго уровня

<h5>Заголовок четвертого уровня</h5> - заголовок четвертого уровня

Еще для форматирования текста часто служат теги – <b>, <strong>, <em>, <i>, <u>.

<b>Текст выделится жирным</b><strong>Текст выделится жирным<strong> – тег аналог <b><em>Наклонный текст</em> – аналог<i></i><u>Подчеркнутый текст</u><strike>Перечеркнутый текст</strike><big>Увеличенный</big> и <small>уменьшенный</small> текст по сравнению с текущим.<sup>Верхний индекс</sup> – X2 <sub>Нижний индекс</sub> – X2<tt>Моноширинный текст</tt> – как печатная машинка

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

<b><i><u>Жирный, наклонный и подчеркнутый текст</u></i></b>

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

Перевод строки и текстовые блоки

Теги заголовков (<h2>-</h6>) переводят после себя строку («жмут enter»), если иное не прописано в таблицах стилей. Когда вы пишите текст в «голом html» ваши переводы строки учитываться не будут, текст будет идти подряд до заголовков либо специальных тегов.

<br> – переводит строку. Закрывающий тег не нужен. Если вам нужен большой разрыв между строками можете использовать несколько таких тегов, например, <br><br><br><br><br> – пять переводов строки.

<hr> – горизонтальная разделительная линия:

Во многих тегах могут использоваться специальные атрибуты, например, в теге <hr> можно указать ее толщину: <hr size="1″>, чем больше цифра, тем толще линия.

Для форматирования текста также используются двусторонние теги <p>, <div>, <pre>.

<p>Текст</p> – Параграф<div></div> – По умолчанию также параграф, но создан для сложного форматирования места нахождения контента на странице, используется для верстки через таблицы стилей.

<pre></pre> – отформатированный шрифт. Между этими тегами текст выводится как на печатной машинке (с пробелами, переводами строки).

Вставка объектов

Чтобы вставить картинку нужно создать код:

http://site.ru/image.png - это адрес картинки.

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

<a href="http://site.ru/">Перейти на Site.ru</a>

Где http://site.ru/ - сайт, на который ведет ссылка, Перейти на Site.ru – название ссылки, так называемый анкор.

У ссылки есть несколько атрибутов, например target="_blank" – ссылка откроется в новом окне. Вместо текста ссылки можно вставить картинку, тогда код такой:

В коде ссылки стоит атрибут target="_blank" - ссылка откроется в новом окне, а в коде картинки border="0″ - у картинки не будет рамки.

Списки

Списки создаются следующими html- кодами:

<ul><li>Первый пункт списка</li><li>Второй пункт списка</li><li>Третий пункт списка</li></ul>

Таблицы

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

<table><tr><td>Содержание</td></tr></table>

Перевод строки после каждого тега в коде ставится для удобства редактирования html-кода. Этот же код таблицы можно вставить так:

<table><tr><td>Содержание</td></tr></table>

Это основная структура станицы сайта. Зная азы, можно переходить и к более сложному.

mehelps.ru

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

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

Для этого понадобится готовый дизайн сайта собственного производства или скачанный из сети psd исходник. Его нужно раскроить для верстки html.
Блокнот, а именно NotePad++. Его можно скачать с официально сайта.
Файл index.html. Его можно создать в любой удобной папке на компьютере. Но лучше выдели отдельную папку для своего сайта и размести его там. У меня это папка c:\site\index.html
Файл c:\site\style.css. Это файл стилей, зачем он нужен станет понятно позже.
Папка c:\site\images. В эту папку нужно поместить все изображения нужные для будущего сайта.
Купить хостинг и домен если нужно сайт выложить в интернете

Для удобства я сделал архив с изображениями и уже готовыми пустыми файлами index.html и style.css. Скачай и распакуй архив в нужную тебе папку.

Для работы сайта в сети необходим веб-сервер. Сервер при обращении к домену или папке сайта без указания конкретного файла будет искать в ней index.html или index.php если не найдет отобразит список файлов папки.

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

Теперь нужно открыть файл index и style в NotePad++

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

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

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

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

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

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

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

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

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

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

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

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

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

Замени содержимое своего файла index.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), должно получится так:

Шапка сайта

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

<div> <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" /> </div>

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

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

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

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

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

<div> <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" /> </div>

Этот код:

<div> <div> <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> </ul> </div> <div></div> </div>

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

А в файл 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;}

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

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

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

<div> ...... </div>

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

<div>  <div> <h2>Кофе Американо</h2> <p>Драматизм, в первом приближении, начинает определенный синтез искусств. Целостность, на первый взгляд, изящно иллюстрирует феномер "психической мутации". Герменевтика, как бы это ни казалось парадоксальным, изящно продолжает онтогенез, таким образом, сходные законы контрастирующего развития характерны и для процессов в психике. </p> <p>Согласно теории "вчувствования", разработанной Теодором Липпсом, флегматик дает эйдос. Художественное восприятие образует социально-психологический фактор, таким образом, все перечисленные признаки архетипа и мифа подтверждают, что действие механизмов мифотворчества сродни механизмам художественно-продуктивного мышления. Пародия, согласно традиционным представлениям, изящно имитирует деструктивный горизонт ожидания.</p> <img src="/images/img1.png" alt="" title="" /> <img src="/images/img2.png" alt="" title="" /> <img src="/images/img3.png" alt="" title="" /> <p>Художественный ритуал, по определению, иллюстрирует метод кластерного анализа. Сангвиник, так или иначе, изменяем. Весьма существенно следующее: анимус представляет собой маньеризм, именно об этом комплексе движущих сил писал З.Фрейд в теории сублимации.</p> <p>Диалогичность готично образует художественный ритуал. Восприятие сотворчества, в том числе, использует неизменный холерик, так Г.Корф формулирует собственную антитезу. Беллетристика иллюстрирует принцип артистизма. </p> <p>Горизонт ожидания аккумулирует фактографический эдипов комплекс, таким образом, сходные законы контрастирующего развития характерны и для процессов в психике. Игровое начало, так или иначе, выстраивает конструктивный этикет, так Г.Корф формулирует собственную антитезу.</p> <p>Удожественный ритуал, по определению, иллюстрирует метод кластерного анализа. Сангвиник, так или иначе, изменяем. Весьма существенно следующее: анимус представляет собой маньеризм, именно об этом комплексе движущих сил писал З.Фрейд в теории сублимации.</p> </div>  <div> <div> <div></div> <div> <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><a href="#">Кофе Лунго</a></li> </ul> </div> <div></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>  <div> <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" /> </div>  <div> <div> <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> </ul> </div> <div></div> </div>  <div>  <div> <h2>Кофе Американо</h2> <p>Драматизм, в первом приближении, начинает определенный синтез искусств. Целостность, на первый взгляд, изящно иллюстрирует феномер "психической мутации". Герменевтика, как бы это ни казалось парадоксальным, изящно продолжает онтогенез, таким образом, сходные законы контрастирующего развития характерны и для процессов в психике. </p> <p>Согласно теории "вчувствования", разработанной Теодором Липпсом, флегматик дает эйдос. Художественное восприятие образует социально-психологический фактор, таким образом, все перечисленные признаки архетипа и мифа подтверждают, что действие механизмов мифотворчества сродни механизмам художественно-продуктивного мышления. Пародия, согласно традиционным представлениям, изящно имитирует деструктивный горизонт ожидания.</p> <img src="/images/img1.png" alt="" title="" /> <img src="/images/img2.png" alt="" title="" /> <img src="/images/img3.png" alt="" title="" /> <p>Художественный ритуал, по определению, иллюстрирует метод кластерного анализа. Сангвиник, так или иначе, изменяем. Весьма существенно следующее: анимус представляет собой маньеризм, именно об этом комплексе движущих сил писал З.Фрейд в теории сублимации.</p> <p>Диалогичность готично образует художественный ритуал. Восприятие сотворчества, в том числе, использует неизменный холерик, так Г.Корф формулирует собственную антитезу. Беллетристика иллюстрирует принцип артистизма. </p> <p>Горизонт ожидания аккумулирует фактографический эдипов комплекс, таким образом, сходные законы контрастирующего развития характерны и для процессов в психике. Игровое начало, так или иначе, выстраивает конструктивный этикет, так Г.Корф формулирует собственную антитезу.</p> <p>Удожественный ритуал, по определению, иллюстрирует метод кластерного анализа. Сангвиник, так или иначе, изменяем. Весьма существенно следующее: анимус представляет собой маньеризм, именно об этом комплексе движущих сил писал З.Фрейд в теории сублимации.</p> </div>  <div> <div> <div></div> <div> <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><a href="#">Кофе Лунго</a></li> </ul> </div> <div></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 h2 {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;}

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

Подвал сайта

После блока:

<div> ... </div>

Вставляем:

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

Теперь весь файл index.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 h2 {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;}

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

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

Получился сайт, но при клике на ссылки меню ничего не происходит. Поэтому нам нужно придумать название страниц, прописать их в 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>  <div> <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" /> </div>  <div> <div> <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><a href="/kontakty.html">Контакты</a></li> </ul> </div> <div></div> </div>  <div>  <div> <h2>Кофе Американо</h2> <p>Драматизм, в первом приближении, начинает определенный синтез искусств. Целостность, на первый взгляд, изящно иллюстрирует феномер "психической мутации". Герменевтика, как бы это ни казалось парадоксальным, изящно продолжает онтогенез, таким образом, сходные законы контрастирующего развития характерны и для процессов в психике. </p> <p>Согласно теории "вчувствования", разработанной Теодором Липпсом, флегматик дает эйдос. Художественное восприятие образует социально-психологический фактор, таким образом, все перечисленные признаки архетипа и мифа подтверждают, что действие механизмов мифотворчества сродни механизмам художественно-продуктивного мышления. Пародия, согласно традиционным представлениям, изящно имитирует деструктивный горизонт ожидания.</p> <img src="/images/img1.png" alt="" title="" /> <img src="/images/img2.png" alt="" title="" /> <img src="/images/img3.png" alt="" title="" /> <p>Художественный ритуал, по определению, иллюстрирует метод кластерного анализа. Сангвиник, так или иначе, изменяем. Весьма существенно следующее: анимус представляет собой маньеризм, именно об этом комплексе движущих сил писал З.Фрейд в теории сублимации.</p> <p>Диалогичность готично образует художественный ритуал. Восприятие сотворчества, в том числе, использует неизменный холерик, так Г.Корф формулирует собственную антитезу. Беллетристика иллюстрирует принцип артистизма. </p> <p>Горизонт ожидания аккумулирует фактографический эдипов комплекс, таким образом, сходные законы контрастирующего развития характерны и для процессов в психике. Игровое начало, так или иначе, выстраивает конструктивный этикет, так Г.Корф формулирует собственную антитезу.</p> <p>Удожественный ритуал, по определению, иллюстрирует метод кластерного анализа. Сангвиник, так или иначе, изменяем. Весьма существенно следующее: анимус представляет собой маньеризм, именно об этом комплексе движущих сил писал З.Фрейд в теории сублимации.</p> </div>  <div> <div> <div></div> <div> <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><a href="/kofe-lungo.html">Кофе Лунго</a></li> </ul> </div> <div></div> </div> </div> </div> <div></div>  <div> <div></div> <div>ООО “Кофейня” 2015г.<br/> г. Москва, ул Революционная 1а</div> <div><img src="/images/stat.png" alt="" title="" /></div> <div>Создание сайтов веб-студия <a href="#">«Парампампам»</a></div> </div> <div></div> </div> </body> </html>

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

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

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

www.opengs.ru

Некоторые основные теги html для создания своего сайта

От автора: если вы решили заняться сайтостроением, то вам нужно знать хотя бы основные теги html. Это те базовые знания, которое помогут вам создать свой первый простой сайт.

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

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

head — содержит разную информацию, которая никак не будет выводиться на странице, но от нее непосредственно зависит внешний вид информации. Например, в head прописывается кодировка, подключается таблица стилей и файлы javascript. То есть здесь указывается все, что нужно для корректной работы странички. Следующие четыре тега прописываются именно в head.

link — с помощью этого одинарного тега подключаются внешние файлы. Например, иконка или таблица стилей.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

script — подключает файлы с расширением js (javascript).

title — задает название страницы, ее заголовок, который будет виден в поисковиках и в браузере.

meta — одинарный тег, в котором прописывается служебная информация, такая, как кодировка или ключевые слова.

body — тело страницы. Контейнер для всего содержимого, которое будет непосредственно выведено на веб-страничку.

Теги для текста, списки

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

blockquote — большая цитата, которая можете содержать в себе другие теги для ее оформления. Может состоять, например, из нескольких абзацев.

h2 — h6 — теги для выделения заголовков на веб-странице. h2 – самый главный и далее по убыванию важности.

Рис. 1. Заголовки в html.

q — маленькая цитата.

b, strong — выделяет текст жирным. Второй тег также придает словам особую важность.

em, i — выделение курсивом.

sub, sup — выводит текст в нижнем/верхнем индексе, заодно уменьшая немного размер шрифта.

ol — в html это тег нумерованного списка, пунктам которого будут присваиваться порядковые номера.

ul — маркированный список. Его пункты просто отмечаются маркером, внешний вид которого можно изменить. Маркированный список делают тогда, когда нет нужно в строгом перечислении каких-то пунктов.

li — парный тег, в который помещается один пункт маркированного или нумерованного списка. То есть ul или ol выступает лишь в роли контейнера.

Рис.2. Маркированный и немаркированный списки.

Ссылки

Для ссылок в html есть отдельный тег — <a>, который имеет один обязательный атрибут:

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

<a href = "адрес, куда перейти">анкор</a></p>

Картинки

Картинки в html вставляются с помощью одинарного тега <img>. Обязательным атрибутом является src (source), то есть путь к самой картинке. Остальные параметры (размер, позиционирование, эффекты) лучше настраивать через css.

Таблицы

table — тег-контейнер, в который помещается вся таблица.

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

td — ячейка таблицы. Вот к ней как раз и можно применить какие-то стили, размер, в нее можно вписать информацию, вставить картинку или видео.

Пустые блочные и строчные контейнеры

div — пустой блочный контейнер, не выполняющий больше никаких функций. До сих пор с его помощью, например, верстают боковую колонку на сайте.

span — аналогично с дивов это пустой контейнер, но не блочный, а строчный. Чаще всего применяется для выделения отдельных кусков текста и применения к ним каких-то интересных стилей.

Мультимедиа

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

Формы

form — в этот тег помещается вся форма (обычно для регистрации, заказа чего-то). Имеет атрибуты, связывающие ее с PHP, иначе она не будет работать.

input — основной одинарный тег, который позволяет вставить в форму различные поля (для ввода текста, телефона, выбора даты рождения).

textarea — большое текстовое поле. Обычно в него можно вписать отзыв или комментарий.

Рис. 3. Простая форма, созданная с помощью тегов form и input.

HTML5

Хотелось бы также упомянуть несколько современных тегов, которые появились в HTML5.

header — шапка сайта, статьи или какого-то раздела.

footer — подвал сайта, статьи или какого-то раздела.

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

figure — позволяет группировать элементы. Самый распространенный пример – картинка и описание для нее.

section — раздел сайта (обычно со своим заголовком).

article — независимая статья, новость или заметка.

nav — главная навигация сайта.

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

В статье были описаны лишь самые распространенные элементы. Полный список тегов html c описанием можно посмотреть в каком-нибудь словаре. Самый популярный в рунете – htmlbook.

Один раз прочитав статью вы не запомните все перечисленные теги. Намного лучше они запоминаются при реальной работе над сайтом. Это были основные теги для создания сайта html. Заходите на наш блог и вы найдете гораздо больше информации по созданию собственного сайта своими руками.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Учебник по основам HTML для начинающих

Прямо сейчас изучи HTML с нуля!

Смотреть курс

webformyself.com

Тег | htmlbook.ru

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS

Спецификация

HTML:

3.2

4.01

5.0

XHTML:

1.0

1.1

Описание

Создает команду в виде переключателя, флажка или обычной кнопки. Тег <command> должен располагаться внутри <menu>, в противном случае он не будет показан.

Синтаксис

Атрибуты

checked Активирует команду. Доступно только если type установлен как radio или checkbox. disabled Задает, доступна команда или нет. icon Адрес картинки, которая показывается как команда. label Название команды. radiogroup Задает имя группы переключателей. Доступно только если type установлен как radio. type Определяет тип команды (checkbox, command, radio). По умолчанию command.

Закрывающий тег

Не нужен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Тег COMMAND</title> </head> <body> <menu> <command label="Выполнить директиву №1"> <command label="Выполнить директиву №2"> <command label="Выполнить директиву №3"> </menu> </body> </html>

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

htmlbook.ru