Команды для создания html сайта: HTML-команды для создания сайтов | Дропшиппинг

Содержание

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<table border=»1″>

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

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

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

HTML-атрибуты: таблица глобальных атрибутов

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

Значение атрибута заключается в кавычки "". Названия и значения атрибутов не чувствительны к регистру, но, тем не менее, рекомендуется набирать их в нижнем регистре.

Глобальные атрибуты

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

Таблица 1. Глобальные атрибуты HTML
Атрибут	Описание, принимаемое значение
`accesskey`	Генерирует сочетания клавиш для доступа к текущему элементу. Состоит из разделенного пробелами списка символов. Браузер в первую очередь выбирает те клавиши, которые существуют на раскладке клавиатуры. Применяется к следующим элементам: `<a>`, `<area>`, `<button>`, `<input>`, `<label>`, `<legend>`, `<textarea>`. Принимаемые значения: перечень названий клавиш.
`class`	Определяет имя класса для элемента (используется для определения класса в таблице стилей). Принимаемые значения: имя класса.
`contenteditable`	Определяет, может ли пользователь редактировать содержимое (контент). Позволяет преобразовать любое поле HTML в редактируемый элемент. Принимаемые значения: `true/false`.
`dir`	Определяет направление текста контента в элементах `<bdo>` и `<bdi>`. Принимаемые значения: `ltr/rtl/auto`.
`draggable`	Определяет, может ли пользователь перетащить элемент. Принимаемые значения: `true/false/auto`.
`hidden`	Указывает на то, что элемент должен быть скрыт. Принимаемые значения: `hidden`.
`id`	Определяет уникальный идентификатор элемента. Принимаемые значения: `id` — идентификатор элемента.
`lang`	Определяет код языка содержимого (контента) в элементе. Принимаемые значения: код языка.
`spellcheck`	Указывает, подлежит ли содержимое элемента проверке орфографии и грамматики. Принимаемые значения: `true/false`.
`style`	Указывает на код CSS, применяемую для оформления элемента. Принимаемые значения: код CSS.
`tabindex`	Определяет порядок перехода к элементу при помощи клавиши TAB. Принимаемые значения: порядковый номер.
`title`	Определяет дополнительную информацию об элементе, задавая всплывающую подсказку для страницы. Принимаемые значения: текст.
`translate`	Разрешает или запрещает перевод текста внутри элемента. Принимаемые значения: `yes/no`.

HTML 5.2. теги — HTML5BOOK.RU

Встроенное содержимое
`<picture></picture>`	контейнер для одного `<img>` и ноль или больше `<source>`	`inline`
`<source>`	местоположение и тип альтернативных медиаресурсов для элементов `<picture>`, `<video>`, `<audio>`	`none`
`<img>`	html-изображения	`inline`
`<iframe></iframe>`	создаёт встроенный фрейм	`block`
`<embed>`	встраивает внешний интерактивный контент или плагин	`inline-block`
`<object></object>`	контейнер для встраивания мультимедиа	`inline-block`
`<param>`	задаёт параметры для плагинов, встраиваемых с помощью элемента <object>	`none`
`<audio></audio>`	добавляет аудио-файлы	`inline-block`
`<video></video>`	добавляет видео-файлы	`inline-block`
`<track>`	субтитры для элементов <audio> и <video>	`none`
`<map></map>`	активные области на карте-изображении	`inline`
`<area>`	гиперссылка с текстом или активная область внутри карты-изображения	`inline`
`<a></a>`	гиперссылка	`inline`
`<em></em>`	выделяет важные фрагменты текста курсивом	`inline`
`<strong></strong>`	выделяет полужирным важный текст	`inline`
`<small></small>`	отображает текст шрифтом меньшего размера	`inline`
`<s></s>`	перечёркивает неактуальный текст	`inline`
`<cite></cite>`	источник цитирования	`inline`
`<q></q>`	краткая цитата	`inline`
`<dfn></dfn>`	выделяет термин курсивом	`inline`
`<abbr></abbr>`	аббревиатура или акроним	`none`
`<ruby></ruby>`	контейнер для Восточно-Азиатских символов и их расшифровки	`inline`
`<rb></rb>`	обертка для аннотации	`inline`
`<rp></rp>`	тег для скобок вокруг символов	`none`
`<rt></rt>`	расшифровка символов	`block`
`<rtc></rtc>`	обертка для дополнительной аннотации	`inline`
`<data></data>`	связывает содержимое с машиночитаемым переводом	`inline`
`<time></time>`	дата / время документа или статьи	`inline`
`<code></code>`	фрагмент программного кода	`inline`
`<var></var>`	выделяет переменные из программ	`inline`
`<samp></samp>`	результат выполнения сценария	`inline`
`<kbd></kbd>`	текст, вводимый пользователем с клавиатуры	`inline`
`<sub></sub>`	подстрочное написание символов	`inline`
`<sup></sup>`	надстрочное написание символов	`inline`
`<i></i>`	выделяет текст курсивом без акцента	`inline`
`<b></b>`	задает полужирное начертание отрывка текста, без дополнительного акцента	`inline`
`<u></u>`	выделяет отрывок текста подчёркиванием, без дополнительного акцента	`inline`
`<mark></mark>`	выделяет фрагменты текста желтым фоном	`inline`
`<bdi></bdi>`	изолирует текст, читаемый справа налево	`inline`
`<bdo></bdo>`	задаёт направление написания текста	`inline`
`<span></span>`	контейнер для строчных элементов	`inline`
`<br>`	перенос текста на новую строку	`none`
`<wbr>`	возможное место разрыва длинной строки	`none`
`<form></form>`	html-форма	`block`
`<label></label>`	текстовая метка для элемента <input>	`inline`
`<input>`	многофункциональные поля формы	`inline-block`
`<button></button>`	интерактивная кнопка	`inline-block`
`<select></select>`	элемент управления с выбором значений из предложенных вариантов <option>	`inline-block`
`<datalist></datalist>`	контейнер для выпадающего списка элемента <input> с <option>-значениями	`none`
`<optgroup></optgroup>`	контейнер с заголовком для группы элементов <option>	`block`
`<option></option>`	вариант (опция) в раскрывающемся списке	`block`
`<textarea>`	многострочное поле формы	`inline-block`
`<output></output>`	поле для вывода результата вычисления	`inline`
`<progress></progress>`	индикатор выполнения задачи	`inline-block`
`<meter></meter>`	индикатор измерения в заданном диапазоне	`inline-block`
`<fieldset></fieldset>`	группирует связанные элементы в форме	`block`
`<legend></legend>`	заголовок элементов формы, сгруппированных с помощью <fieldset>	`block`

Коды для создания сайта: обзор основных команд

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

Итак, начнем с того, что стоит ли делать сайт самостоятельно или все-таки необходимо обратиться к квалифицированным специалистам.

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

Cetera Labs — профессионалы высокого класса

Можно рассмотреть приоритеты создания веб-сайт с помощью профессионалов, на примере Cetera Labs. Эта компания способна преподнести огромный спектр услуг:

Инструменты создания сайтов

Браузер — это программа, которая предназначена для просмотров страниц в интернете, например в Опере или Мозилле. Когда щелкаете мышкой по странице, то браузер ссылается на страницу html, а тот в свое очередь обращается к серверу и перенаправляет (получив предварительно ответ на запрос) на необходимую страничку. Вот с помощью специальных команд (еще называются тегами) создаются веб-сайты.

Выделяют основные команды для сайта:

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

К созданию каждого сайта требуется подходить грамотно. Так как раньше упоминалось, требуется не просто навыки, но и специальное образование. Есть некие коды для создания сайта, с помощью которых и происходит само написание сайта на техническом языке. Распространенным является HTML код, с помощью которого и происходит основная работа над сайтом:

Абзац — при написании текста должен быть написан идеально.
Код активации ссылки.
Текст в рамке.
Обтекания блока текста рекламы.

Сделав обзор темы можно с легкостью сказать, если Вы только понаслышке знакомы с этими терминами, то следует обратиться только к профессиональным людям! Cetera Labs — это компания, которая гарантирует качество и надежность выполнения поставленных задач!

Закажите сайт у нас

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

Предлагаем ИНДИВИДУАЛЬНУЮ разработку сайтов с маркетинговым подходом и персональным отношением. Большое портфолио по корпоративным сайтам.

Поделиться в соц. сетях:
Html команды для создания сайтов
Аббревиатура HTML расшифровывается как HyperText Markup Language. HTML — это не язык программирования, это язык разметки сайта.
Все браузеры умеют преобразовывать эту разметку в удобный вид для пользователя.
В этом языке используются специальные команды, называемые тегами. У каждого тега своя функция. Существует огромное количество тегов. В идеале нужно выучить все. Но для начинающего разработчика базовых знаний вполне достаточно.
Основные команды HTML
Список HTML-команд очень большой. Но основных не так много. Для того чтобы начать писать код, вам нужен редактор. Можно использовать «Блокнот». Рекомендуется использовать Notepad++. Он выглядит вот так.
Преимущество в том, что в специальных редакторах теги подсвечиваются определенным цветом, в зависимости от категории. Команды для создания сайта HTML в блокноте или любой другой программе одни и те же. Язык используется везде одинаковый. Среда разработки — это лишь инструмент.
В языке HTML есть закрывающиеся и незакрывающиеся теги. Также в этом языке существует понятие вложенности. Каждый объект в коде — это элемент. У элемента есть открывающий тег, закрывающий и содержимое. Более того, у тега есть свои дополнительные атрибуты со своими значениями.
На рисунке видно два тега <html> и </html>. Запомните, что открывающий и закрывающий пишутся одинаково, но отличаются только «/». Если тег не закрыть, то обработчик будет всё остальное считать продолжением именно этого элемента. Это очень важно. Особенно в ссылках. Их мы рассмотрим немного дальше.
Тег <html> обязательный. Его всегда нужно писать. А вот закрывать не обязательно. По стандартам надо, но если не закрыть, работать всё равно будет.
Есть и другие основные теги: head и body.
Эти HTML-команды являются каркасом для страницы. Они обязательны. Они также закрываются.
Название тегов соответствует смыслу. Head — голова. В этом разделе указывается служебная и важная информация, которую не видно. Раздел body — тело документа. Здесь содержимое, которое отображается пользователю. Старайтесь закрывать теги сразу, чтобы потом не было путаницы.
В служебном разделе указывается:
заголовок документа;
файлы стилей;
файлы скриптов;
мета-теги;
указания для поисковых систем;
указания для роботов;
любая другая информация, которая может использоваться программистами, но не пользователям.
Файл стилей подключается вот так:
<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-команды. Для создания сайтов обязательно используют заголовки. Они указываются при помощи тега <h2>Заголовок первого уровня</h2>. Существуют уровни от 1 до 6. Важно понимать, что в заголовках должна быть вложенность.
Пример на рисунке.
Имейте в виду, что рекомендуется использовать только один заголовок h2. При этом он должен совпадать с тегом <title>. Разумеется, вы можете указать 200 заголовков h2, но тогда к вам будут применены санкции со стороны поисковых систем.
Использование изображений
Изображения являются неотъемлемой частью веб-страниц. На примере показано, как можно вставить какую-нибудь фотографию.
Как видите, на примере детально показано, что и как называется.
Использование ссылок
Если вы учите HTML-команды, то знать тег-ссылки вы просто обязаны. Это один из главнейших элементов, который составляет Всемирную паутину.
Ссылка обозначается тегом <a>. Но его обязательно нужно закрывать. Кроме этого, у этого элемента есть обязательный атрибут href, в котором и указывается адрес ссылки.
В примере, указанном выше, видно, что вместо текста ссылки указана картинка. То есть можно ставить как текст, так и картинку.
Ссылки можно также форматировать при помощи классов стилей или обычных тегов (курсив, жирный, подчеркивание и перечеркивание).
Использование таблиц
Таблицы используются также очень часто. Изначально они предназначались для представления информации в удобном виде. Но затем верстальщики их использовали для размещения различных элементов страницы.
Таблица создается следующим образом:
<table width=»100%» border=»1″>
<tr>
<td>Текст ячейки</td>
<td>Текст ячейки</td>
</tr>
<tr>
<td>Текст ячейки</td>
<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. Нужны эти знаки для того, чтобы говорить определенному куску контента (например тексту) каким он должен быть и как он должен себя вести. Благодаря таким тегам мы можем сделать текст больше, меньше, жирнее, изменить цвет, поставить фон, создать ссылку, поставить картинки, влепить текст в таблицу и многое другое.
Теги бывают парные и одиночные, но одиночных на самом деле очень мало (сегодня мы пройдем один из них). Все парные теги действуют по принципу: Сначала ставится открывающий тег, потом идет контент, а потом ставится закрывающий, причем закрывающий ставится точно также как и открывающий, только с добавлением слэша (/). Тогда контент, который находится внутри изменится в соответствии с командой, которую ему дали, например сменить цвет.
На практике это выглядит так
<tag>Контент</tag>
Но главное следить за правильностью, потому что если вы что-то забудете или неправильно поставите, то вы не увидите ожидаемый результат. Приведу пример неправильного оформления
<tag>Какой-то текст<tag>  <tag>Еще один какой-то текст  <tag Новый текст</tag> 
Несколько тегов могут применяться к одному контенту, в таком случае их нужно использовать по принципу матрёшки:
<p> <tag1> <tag2> Текст <tag2> <tag1> <p>
Абзац (P)
Начнем мы пожалуй с тега абзаца. Обозначается он буквой латинской буквой <p> (Paragraph — параграф) и, как вы уже поняли, заключается в угловые скобки. Также как и большинство тэгов этот является парным, то есть текст обрамляется этими значениями. Для чего он вообще нужен? Да чтобы отделять текст абзацами.
Давайте напишем какой-нибудь текст в нашем подготовленном документе, только три разных куска текста мы заключим в абзацы.
<html> <head> <title>Мой первый сайт</title> </head> <body> <p>Сегодня мы научимся пользоваться несколькими важными тегами, которые пригодятся вам в сайтостроении, даже если вы будете делать свой ресурс на движках</p> <p>На забудьте закрывать тэги. Если вы открыли его, но не закрыли (или закрыли неправильно), то он будет работать, но распространится на всё следующее содержимое. Поэтому внимательно следите, чтобы всё было правильно.</p> <p>А сегодня в завтрашний день не все могут смотреть. Вернее смотреть могут не только лишь все. Мало, кто может это делать.</p> </body> </html>
Таким образом мы получим документ, разделенный на абзацы. А ведь если вы помните, то в прошлом уроке обычным переносом ничего не удалось сделать. В общем вы итоге у вас должно получиться так.
Переход на новую строку (BR)
Мы можем перейти на новый абзац, а что если нам этот абзац не нужен? Что если нам нужно сделать один или несколько переходов на новую строку? В этом нам поможет тэг <br> (Break). Он несколько отличается от предыдущих тем, что он одинарный, а не парный. Ну оно не ясно, он служит аналогом клавиши «Enter» в обычном текстовом редакторе. Ставится он в любом месте, когда вам нужно перенести строку.
Давайте в каждом абзаце, после каждого четвертого слова сделаем по одному пропуску, а между вторым и третьим абзацем сделаем сделаем два. И посмотрим насколько он уйдет вниз. Должно получиться что-то вроде этого.
Выделение текста
Давайте с вами также научимся выделять какие-то фрагменты текста жирным и курсивом. В этом вам помогут два парных тэга:
<strong></strong> — жирный
<em></em> — курсив
Теперь просто попробуйте обрамить этими тэгами куски текста в разных местах, сохраните документ и обновите в браузере (или запустите заново).
Теперь обратите внимание, что первый абзац у нас стал выделен жирным, а второй абзац курсивом. Третий абзац мы не трогали вообще, поэтому он остался без изменений.
Заголовки (h2-H6)
Я думаю не надо объяснять что такое заголовки. Но надо упомянуть, что в html существует 6 видов таких заголовков. Самый большой как правило ставится всего один раз на странице, а дальше по убывающей по степени вложенности. Например заголовок первого уровня может содержать в себе несколько заголовков второго уровня, а каждый заголовок второго уровня может содержать по нескольку заголовков 3-го уровня, и т.д.
Заголовки обозначаются следующими парными тегами:
<h2>Первый уровень</h2> <h3>Второй уровень</h3> <h4>Третий уровень</h4> <h5>Четвертый уровень</h5> <h5>Пятый уровень</h5> <h6>Шестой уровень</h6>
Попробуйте скопировать это в документ между тэгами body и сохранить в формате html и вы увидите, что у вас получилось. А должно у вас получиться, как на рисунке ниже.
koskomp.ru
Основные команды HTML
Список HTML-команд очень большой. Но основных не так много. Для того чтобы начать писать код, вам нужен редактор. Можно использовать «Блокнот». Рекомендуется использовать Notepad++. Он выглядит вот так.
Преимущество в том, что в специальных редакторах теги подсвечиваются определенным цветом, в зависимости от категории. Команды для создания сайта HTML в блокноте или любой другой программе одни и те же. Язык используется везде одинаковый. Среда разработки — это лишь инструмент.
В языке HTML есть закрывающиеся и незакрывающиеся теги. Также в этом языке существует понятие вложенности. Каждый объект в коде — это элемент. У элемента есть открывающий тег, закрывающий и содержимое. Более того, у тега есть свои дополнительные атрибуты со своими значениями.
На рисунке видно два тега <html> и </html>. Запомните, что открывающий и закрывающий пишутся одинаково, но отличаются только «/». Если тег не закрыть, то обработчик будет всё остальное считать продолжением именно этого элемента. Это очень важно. Особенно в ссылках. Их мы рассмотрим немного дальше.
Тег <html> обязательный. Его всегда нужно писать. А вот закрывать не обязательно. По стандартам надо, но если не закрыть, работать всё равно будет.
Есть и другие основные теги: head и body.
Эти HTML-команды являются каркасом для страницы. Они обязательны. Они также закрываются.
Название тегов соответствует смыслу. Head — голова. В этом разделе указывается служебная и важная информация, которую не видно. Раздел body — тело документа. Здесь содержимое, которое отображается пользователю. Старайтесь закрывать теги сразу, чтобы потом не было путаницы.
В служебном разделе указывается:
заголовок документа;
файлы стилей;
файлы скриптов;
мета-теги;
указания для поисковых систем;
указания для роботов;
любая другая информация, которая может использоваться программистами, но не пользователям.
Файл стилей подключается вот так:
<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-команды. Для создания сайтов обязательно используют заголовки. Они указываются при помощи тега <h2>Заголовок первого уровня</h2>. Существуют уровни от 1 до 6. Важно понимать, что в заголовках должна быть вложенность.
Пример на рисунке.
Имейте в виду, что рекомендуется использовать только один заголовок h2. При этом он должен совпадать с тегом <title>. Разумеется, вы можете указать 200 заголовков h2, но тогда к вам будут применены санкции со стороны поисковых систем.
Использование изображений
Изображения являются неотъемлемой частью веб-страниц. На примере показано, как можно вставить какую-нибудь фотографию.
Как видите, на примере детально показано, что и как называется.
Использование ссылок
Если вы учите HTML-команды, то знать тег-ссылки вы просто обязаны. Это один из главнейших элементов, который составляет Всемирную паутину.
Ссылка обозначается тегом <a>. Но его обязательно нужно закрывать. Кроме этого, у этого элемента есть обязательный атрибут href, в котором и указывается адрес ссылки.
В примере, указанном выше, видно, что вместо текста ссылки указана картинка. То есть можно ставить как текст, так и картинку.
Ссылки можно также форматировать при помощи классов стилей или обычных тегов (курсив, жирный, подчеркивание и перечеркивание).
Использование таблиц
Таблицы используются также очень часто. Изначально они предназначались для представления информации в удобном виде. Но затем верстальщики их использовали для размещения различных элементов страницы.
Таблица создается следующим образом:
<table width=»100%» border=»1″>
<tr>
<td>Текст ячейки</td>
<td>Текст ячейки</td>
</tr>
<tr>
<td>Текст ячейки</td>
<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 страниц.
Указывать только для одной страницы можно следующим образом.
Данный способ использовать не рекомендуется.
fb.ru
Термины
Приведем некоторые термины, которые вам будут встречаться далее.
WWW — общеизвестная аббревиатура World Wide Web, синоним Интернета.
Web — сокращенное название World Wide Web.
Веб-страница (Web Page) — отдельный документ (текстовый файл, подготовленный специальным образом), хранящийся в Интернете.
Веб-браузер — программное обеспечение, необходимое для вывода на экран веб-страницы.
Сайт (site) — набор веб-страниц, принадлежащих одному владельцу.
Домашняя страница (Home Page) — главная (титульная) страница сайта.
URL — унифицированный указатель ресурсов (Uniform Resource Locator), используется для указания адреса страницы в WWW.
Веб-сервер — компьютер со специальным программым обеспечением, на котором должны помещаться веб-страницы, для того, чтобы их можно было увидеть в Интернете.
Что такое гипертекст?
Основное достоинство WWW состоит в создании гипертекстовых документов, и если вас заинтересовал какой либо пункт в таком документе, то достаточно «ткнуть» в него курсором для получения нужной информации. Также в одном документе возможно делать ссылки на другие, написанные другими авторами или даже расположенные на другом сервере. Одно из главных преимуществ WWW над другими средствами поиска и передачи информации — «многосредность». В WWW можно увидеть на одной странице одновременно текст и изображение, звук и анимацию. Очень кратко об истории гипертекста можно прочитать на сайте Артемия Лебедева.
Что такое HTML?
HTML расшифровывается как Hyper Text Markup Language, т.е. язык разметки гипертекста. Это стандарт, в соответствии с которым веб-документы отображаются браузерами. Как ясно из названия, HTML — это метод разметки простого текста таким образом, чтобы браузер отображал информацию в нужном формате. Файлы, содержащие текст с html-разметкой, должны иметь расширение htm или html.
Команды языка HTML называются тегами (tag), они указывают, какую операцию необходимо выполнить, например, вывести на экран текст, нарисовать линию или использовать графику. Содержащиеся в тексте теги могут изменять шрифты, стили и создавать специальные эффекты. Это позволяет обеспечить интересный графический интерфейс при отображении стандартного текстового файла. Кроме изменения стиля текста, HTML также сообщает браузеру, когда некий текст на странице должен считаться гипертекстовой ссылкой, в каком месте вставить графические и специальные элементы, команды отправки почты и другие специальные возможности.
HTML не является языком программирования в полном смысле слова. У него специфический формат, который является мировым стандартом. Этот стандарт называется Document Type Definition (Определение типа документа), или DTD. Первым DTD-стандартом на HTML, представленным в Интернете, была версия 1.0. Затем была создана версия 2.0 для WWW, более продуманная. Сейчас стандартом является HTML версии 4.0.
Структура команд языка HTML
Команды (теги) языка HTML заключаются в угловые скобки:
<название_команды> — начало команды
поле действия команды
</название_команды> — конец команды
Стандарт языка HTML требует обязательного присутствия тега «конец команды», кроме особо оговоренных случаев.
Самой первой командой html-документа является команда <html>, соответственно самой последней командой будет — </html> (произносится«не html»).
А в целом, структура html-документа имеет следующий вид:
т.е. четко выделяются два раздела: <head> («голова») и <body> («тело»).
ЗАМЕЧАНИЕ. Язык HTML не чувствителен к регистру. Команды языка могут набираться как прописными так и строчными буквами, т.е. команда<body> эквивалентна команде <BODY> или <Body>.
Если браузер не поддерживает команду, он ее просто игнорирует.
Самой первой строкой html-документа является служебная команда, которая позволяет броузеру идентифицировать тип документа (DOCTYPE), как документ в стандарте HTML 4.0, определенном IETF (Internet Engineering Task Force). В этой строке также указывается соответствующий DTD (Document Type Declaration — описание типа документа): документ есть PUBLIC (т.е. не зависит от системных установок) и язык документа — русский (RU).
<!DOCTYPE HTML PUBLIC «-//IETF//DTD HTML 4.0//RU»>
В головной части html-документа располагается команда, выводящая название страницы в заголовок окна браузера (синяя полоса в самом верху окна):
<title>Название страницы</title>
Собственно текст, который должен быть в html-документе, помещается между командами <body> и </body>, например:
<html>
<head>
<title>Пример HTML-текста</title>
</head>
<body>
Добро пожаловать в HTML!
</body>
</html>
Для того, чтобы увидеть как будет выглядеть этот пример в браузере, необходимо все скопировать в Блокнот, сохранить файл под именем primer.htm, а затем в Проводнике щелкнуть мышью по названию файла — в результате этого данный html-документ автоматически откроется в окне Internet Explorer:

Атрибуты
Команды могут иметь параметры, которые называются атрибутами. Атрибуты модифицируют исполнение команды, ставятся сразу после названия команды, внутри угловых скобок, и имеют следующий формат:
АТРИБУТ=»значение_атрибута»
Если значение_атрибута состоит из одного слова, то ставить кавычки не обязательно. Если же значение_атрибута содержит пробелы или небуквенные символы, то кавычки обязательны.
Если команда имеет несколько атрибутов, то они разделяются пробелами:
<название_команды
атрибут1=»значение_атрибута1″
атрибут2=»значение_атрибута2″>
В качестве примера атрибутов рассмотрим команду <meta>, которая задает кодировку Windows для букв русского алфавита и располагается строго внутри раздела <head>:
<html>
<head>
<meta HTTP-EQUIV=»content-type» CONTENT=»text/html; charset=Windows-1251″>
<title>Пример атрибутов</title>
</head>
<body>
…
</body>
</html>
Если же команду <meta> пропустить, то возможны ситуации, когда на экране браузера вместо русских букв будут «кракозябры». А при использовании этой команды такого не произойдет!
Html-редакторы
Все html-документы записываются как обычный текст, поэтому могут быть созданы и отредактированы в любом текстовом редакторе, например, в Блокноте. Но гораздо удобнее использовать специализированные html-редакторы, например UltraEdit (лицензионный) или Smart Web Builder(бесплатный).
В этих редакторах все команды языка HTML отображаются одним цветом, а атрибуты команд — другим. Тогда как просто текст будет черного цвета. Благодаря этому, если в названии команды (или атрибута) будет допущена ошибка, оно отобразится черным цветом, как обычный текст.
Цвет в html-документе
Команда <body> имеет несколько атрибутов.
Атрибут bgcolor= позволяет задать цвет фона страницы:
<body bgcolor=»yellow»>
Эта страница имеет желтый фон.
</body>
Задание цвета можно производить двумя способами:
Заданием имени выбранного цвета.
Заданием номера цвета в виде соотношения оттенков красного, зеленого и синего (Red-Green-Blue=RGB).
RGB-номер цвета задается либо тремя двухзначными шестнадцатиричными (HEX) числами (перед номером обязательно ставится знак #), либо с помощью встроенной функции rgb(), каждый из трех аргументов которой может меняться от 0 до 255, например: rgb(153,102,255). Каждое число из интервала [00–FF] ([0–255]) определяет интенсивность соответствующего цвета.
Например, номер цвета «#FF0000″=rgb(255,0,0) соответствует красному цвету (Red), так как имеет максимальную интенсивность для красной составляющей, а зеленая и голубая составляющие имеют значения равные нулю. Аналогично, номер «#00FF00″=rgb(0,255,0) соответствует зеленому цвету (Green), а номер «#0000FF»=rgb(0,0,255) — синему (Blue).
Существуют 16 стандартных имен цветов, поддерживаемыми Windows:
Black = «#000000» Green = «#008000»
Silver = «#C0C0C0» Lime = «#00FF00»
Gray = «#808080» Olive = «#808000»
White = «#FFFFFF» Yellow = «#FFFF00»
Maroon = «#800000» Navy = «#000080»
Red = «#FF0000» Blue = «#0000FF»
Purple = «#800080» Teal = «#008080»
Fuchsia = «#FF00FF» Aqua = «#00FFFF»
Помимо этих 16 имен цветов, существует еще расширенная таблица цветов. Названия цветов из этой таблицы использовать можно, но все же надежнее задавать RGB-номер. Дело в том, что хотя задание Red-Green-Blue теоретически позволяет выводить «миллион» цветов, на самом деле все определяется видеокартой и монитором, которые использует клиент.
При создании изображения для публикации в Интернете главной проблемой является правильная передача цветов на разных типах компьютеров, мониторов и браузеров. Когда браузер не в состоянии правильным образом передать тот или иной цвет, он подбирает другой цвет или смешивает несколько соседних цветов. Иногда цвет может быть заменен на что-то совершенно неподходящее. Поэтому была разработана так называемая«безопасная» палитра цветов. При использовании цветов из этой палитры вы можете быть уверены в том, что каждый цвет будет передан правильным образом и без искажений. Любой из 216 цветов «безопасной» палитры может быть использован для графики, текста и фонов. Палитра состоит из 32 сочетаний 6 оттенков красного, зеленого и синего.
Заголовки
Язык HTML имеет шесть уровней заголовков, имеющих номера с 1 по 6 (заголовок первого уровня является заголовком самого большого размера). По сравнению с нормальным текстом, заголовки выделяются жирным шрифтом автоматически.
Синтаксис заголовков:
<h2 align=center>Самый большой заголовок, расположенный по центру</h2>
<h5 align=right>Средний по размеру заголовок, расположенный как?</h5>
<h6>Самый маленький заголовок</h6>
здесь h — собственно команда задания заголовка (Header), а число от 1 до 6, определяет размер заголовка,
align= — атрибут, задающий расположение заголовка на экране:
align=left — разместить слева (принято по умолчанию, т.е. можно не указывать)
align=center — разместить по центру окна
align=right — разместить справа в окне браузера.
Абзацы
Команда задания абзаца <p> также имеет атрибут align=, который, кроме указанных выше трех значений, может иметь еще значение justify:
<p align=justify>
устанавливающее выравнивание правого края текста на экране (как это сделано в данном тексте).
В отличие от документов, созданных в редакторе Word, в html-документах прерывания строк не существенны. Обрыв строки может происходить на любом пробеле в вашем исходном файле, при просмотре это прерывание будет проигнорировано. Например:

<h2 align=center>Глава 1</h2>
<p>Добро пожаловать в HTML!
Здесь будет рассказано, как надо и как не надо делать веб-страницы.
<p align=right>Это не так сложно.

В исходном файле два предложения первого абзаца находятся на двух разных строках. Браузер игнорирует это перерывание строки и начинает новый абзац только после команды <p>:
Глава 1 Добро пожаловать в HTML! Здесь будет рассказано, как надо и как не надо делать веб-страницы. Это не так сложно.
Однако, чтобы сохранить удобочитаемость в исходных html-файлах, рекомендуется заголовки размещать на отдельных строках, а абзацы отделять пустыми строками (в дополнение к команде <p>).
Прерывание строки
Используя команду <br> можно перейти на новую строку, не начиная нового абзаца (в большинстве браузеров абзацы выделяются дополнительными пустыми строками). Например, строка
Факультет<br>на котором мы учимся
будет выглядеть на экране так:
Факультет на котором мы учимся
Неразрывный пробел
Поскольку браузер игнорирует перерывание строки в html-файле, где на самом деле закончится одна строка на экране и начнется другая — зависит от размера шрифта на экране у клиента. Кроме того, браузер игнорирует и любое количество пробелов между словами — все пробелы заменяются одним. Поэтому, если требуется поставить подряд несколько пробелов, применяется так называемый символьный примитив «неразрывный пробел», который начинается амперсандом (&) и заканчивается точкой с запятой:   (сокращение от Non Break SPace).
Символьные примитивы чувствительны к регистру: НЕЛЬЗЯ использовать &Nbsp; вместо  .
Например, строка
Факультет     на котором мы учимся
будет выглядеть на экране так:
Факультет на котором мы учимся
Так как браузер обрывает строку на пробеле, то возможна ситуация, когда, например, инициалы останутся на одной строке, а фамилия «переедет» на другую. Чтобы этого не происходило, между инициалами и фамилией обязательно следует ставить неразрывный пробел.
В русской типографике существуют жёсткие правила расстановки символа неразрывного пробела.
Символ неразрывного пробела (обозначим его как •) ставится в следующих случаях.
Перед тире:
Это•— пример
т.е. тире не имеет права начинать строку, если это не начало предложения с прямой речью.
Между двумя инициалами и инициалами и фамилией:
И.•И.•Иванов
т.е. вариант совсем без пробелов: И.И.Иванов — категорически недопустим!
Между знаком номера (№) или параграфа (§) и идущими следом цифрами:
№•7, §•3
и здесь вариант без пробела: №7 — типичнейшая грубейшая ошибка!
Между числом и идущей следом единицей измерения:
XVIII•в., 10•кг, 2000•г.
Между сокращённым обозначением и фамилией:
г-н•Петров
После географических сокращений:
г.•Новосибирск, р.•Обь
Сдвиг текста
Для вывода на экран текста с небольшим сдвигом вправо (от левого края экрана), например стихов, применяются команды <blockquote> и</blockquote>:
<blockquote> Факультет<br>на котором мы учимся </blockquote>
будет выглядеть на экране так:
Факультет на котором мы учимся
Cписки
Сегодня списки можно увидеть почти на каждой веб-странице. Существует несколько форматов списков, позволяющих выделить определенные фрагменты информации в стандартном тексте. В обычном абзаце текст переносится со строки на строку. Текст в списках выглядит по-другому. Пункты списка отступают от полей, отделены от остальных абзацев текста и, кроме того, маркированы или нумерованы.
При правильном использовании списки делают большие объемы информации легко читаемыми и хорошо заметными. Списки могут быть вложены друг в друга, образуя сложную структуру. Вы можете, например, использовать список для организации ссылок.
Существует три основных типа списков: маркированные (ненумерованные), нумерованные и списки определений. Они сходны в том, что все они располагают каждый пункт на новой строке, и вы можете выделить нужный текст. Главное различие перечисленных типов состоит в способе нумерации и структуре.
Маркированный список
Наиболее часто используется ненумерованный, или маркированный список. Каждый пункт такого списка начинается с миниатюрной пиктограммы.
Маркированный список задается командами <ul> и </ul> (Unordered List), а пункты списка между командами — с помощью команды <li> (List Item).
Например, список
<h5>Системы счисления</h5>
<ul>
<li>Непозиционные
<li>Позиционные
</ul>
будет выглядеть так:
Системы счисления
Непозиционные
Позиционные
Команда задания списка <ul> имеет атрибут type=, который устанавливает вид маркера у элементов списка:
<ul type=disc> — черный кружок (значение по умолчанию)
<ul type=circle> — светлый кружок
<ul type=square> — квадратик
Если один список вложен в другой, то вид маркера меняется автоматически:
<h5>Системы счисления</h5>
<ul type=square>
<li>Непозиционные
<ul>
<li>Древнеегипетская
<li>Римская
<li>Старославянская
</ul>
<li>Позиционные
<ul>
<li>Вавилонская
<li>Индийская
</ul>
</ul>
На экране это выглядит так:
Системы счисления
Непозиционные
Древнеегипетская
Римская
Старославянская
Позиционные
Вавилонская
Индийская
Нумерованный список
Нумерованный список очень напоминает маркированный. Единственным отличием является то, что в нумерованном списке перед каждым пунктом вместо графических маркеров автоматически помещаются последовательные номера или буквы. Благодаря этому вам не придется вручную набирать номер каждого пункта списка.
Нумерованный список задается с помощью команд <ol> (Ordered List) и </ol>. Как и в маркированном списке, каждый пункт задается командой <li>, например:
<h5>Системы счисления</h5>
<ol>
<li>Непозиционные
<li>Позиционные
</ol>
будет выглядеть так:
Системы счисления
Непозиционные
Позиционные
Как видите, в исходном файле номеров (1, 2) рядом с элементами списка нет.
По умолчанию списки HTML автоматически нумеруются с помощью арабских цифр — 1, 2, 3 и т. д. Вы можете задать другой способ нумерации, например буквы (прописные или строчные) или римские цифры. Чтобы изменить стандартный тип нумерации, добавьте в команду <ol> атрибут type=.
Ниже приведены пять возможных способов нумерации:
<ol type=1>: стандартная цифровая нумерация — 1, 2, 3, …
<ol type=A>: прописные буквы — A, B, C, D, …
<ol type=a>: строчные буквы — a, b, c, d, …
<ol type=I>: римские цифры — I, II, III, IV, V, …
<ol type=i>: строчные римские цифры — i, ii, iii, iv, v, …
Если необходимо, чтобы нумерация списка начиналась с определенного номера, надо добавить в команду <ol> еще атрибут start=, например,<ol start=10>.
Вложенный список
<h5>Системы счисления</h5>
<ol type=I>
<li>Непозиционные
<ol type=a>
<li>Древнеегипетская
<li>Римская
<li>Старославянская
</ol>
<li>Позиционные
<ol type=i start=4>
<li>Вавилонская
<li>Индийская
</ol>
</ol>
на экране выглядит так:
Системы счисления
Непозиционные
Древнеегипетская
Римская
Старославянская
Позиционные
Вавилонская
Индийская
Список определений
Хотя списки определений используются не так часто, как маркированные или нумерованные списки, они также могут быть полезны в некоторых случаях. В списке определений для каждого пункта предоставляется не одна, а две строки, что может быть полезно когда вы приводите дополнительную информацию.
Списки определений выглядят несколько иначе, чем другие типы списков. Для задания собственно списка применяются команды <dl> (Definition List) и </dl>. Для описания каждого пункта списка в этом случае применяется две команды, а не одна. Команда <dt> (Definition Term) задает отдельный элемент, то есть определяемый термин, а команда <dd> (Definition Description) — остальную информацию, которая выводится на следующей строке с отступом. Вторая строка информации называется определением.
Пример списка определений:
<dl>
<dt>ММФ
<dd>Механико-математический факультет.
<dt>ФИТ
<dd>Факультет информационных технологий.
</dl>
на экране выглядит так:
megaobuchalka.ru
1. Искать адекватных фрилансеров с похожим стилем мышления и взглядами — так больше шансов что сработаетесь. Объединяться не только по работе за деньги, но и придумать себе дополнительное сотрудничество, например, какой-нибудь совместный Open Source проект, или коммерческий продукт — и тем и другим может быть плагин/тема для WordPress или что-то подобное. Например, тема в двух вариантах — бесплатная Lite для WordPress.org и промо себя любимых, платная Pro для ThemeForest. Такая дополнительная работа позволит всегда быть в одной лодке и теснее работать на общее благо, это отразится и на коммерческих проектах. Кроме того, это всегда бонус и для клиента — например, в заказах по WordPress клиент видит, что я и мои ребята висим на WordPress.org как разработчики плагинов/тем, один у нас вообще в ядро WP контрибьютит. Это большой плюс в карму.
2. Не увеличивать команду без надобности. 1 человек фронтенд, 2й — бекенд. Дизайнер на первых порах лучше проектно. Расти строго по мере острой необходимости, хотя новых людей надо искать заранее и тестировать в реальной работе. То есть, должно быть постоянное «ядро» команды, и еще несколько на подхвате. Поначалу они на подхвате (и работают себе самостоятельно в остальное время), со временем кто-то из них переместится в ядро, по мере роста.
3. Со студиями/агентствами надо работать в обратном направлении. У многих из них часто бывают завалы и нехватка собственного ресурса, вы должны быть подрядчиками у них, а не наоборот.
4. Бюджеты. Самое главное 🙂 Кто-то умный когда-то сказал:
The kind of clients we attract is directly related to our rates
Что означает, что качество клиентов прямо зависит от ваших цен. И второе, из опыта — геморроя плюс-минус одинаково в проекте с бюджетом 200$, и в проекте с бюджетом $2000. Времени и усилий на поиск/привлечение клиента тратится столько же. И чаще всего те, кто платит $2000 больше ценят время, работу, и не имеют мозг без острой на то необходимости (см. цитату выше).
5. Снижать стоимость привлечения клиента (под стоимостью подразумевается и время, и деньги). Повторные / постоянные клиенты — наше все. Оставлять клиентов на поддержке, делать так чтобы они обращались повторно с доработками / развитием своих проектов, приходили с новыми заказами, советовали другим. Например, я вчера закончил интересный проект для повторного клиента. Первым заказом были небольшие фиксы платного шаблона, 2 часа работы / $60, через биржу. Спустя некоторое время он обратился уже за целым сайтом для бизнеса своего отца. Адекватный бюджет. Сделали, запустили вчера. У него уже опять готов список новых фич для этого сайта, через месяц где-то вернется с ними и снова загрузит работой. Имея хотя бы с десяток таких клиентов, можно заполнить половину рабочего времени, не тратя время на поиски новых клиентов. И гемора с ними нет, и с оплатами никаких проблем, и т.д.
6. Для того, чтобы п.5 в реальности происходил, недостаточно просто делать работу вовремя и хорошо. Нужно клиенту помогать, обучать его, советовать. Недавно был случай — клиент пришел со стандартной задачей пофиксить платный шаблон под его требования. Поковырявшись в этом ужасе и задав кучу правильных вопросов стало понятно, что этот шаблон ему вообще не подходит для этих задач. Проект был переориентирован в разработку с нуля, из $120 бюджет сменился на совсем другие цифры. Задача ведь не просто кнопки понажимать и что-то там накодить, а помочь клиенту решить его задачи. Ему результат в целом важен, а не количество строк кода, которые вы написали, или насколько правильно этот код отформатирован.
7. Снижать себестоимость разработки. Накапливать типовые решения, код, который можно (и нужно) использовать повторно. В случае с готовыми CMS (а это самый распространенный формат работы) — покупать девелоперские неограниченные лицензии на те плагины, которые существенно экономят время. Мы, например, купив однажды ACF Pro для WordPress существенно уменьшили себе объем работы на каждом проекте. Сейчас будем брать Gravity Forms или Ninja Forms для того, чтобы решить вопрос с формами и кастомными фронтендами, которые жрут кучу времени и сил в разработке даже со своими наработками. Плюс какие-то мелкие решения, которые часто нужны.
8. Написать для себя стратегию развития. Четко понимать, куда хотим прийти и в какие сроки (плюс-минус), четко определить, что делать, что двигает в этом направлении, а что нет. Тогда будет шанс из кучки фрилансеров вырасти в студию или что-то в этом роде. Без стратегического видения фриланс — это белка в колесе и замкнутый круг. Вечная погоня за небольшими деньгами «на пожрать и отложить на отпуск». Стратегия может быть разной, например, «вырасти в студию», «создать свои коммерческие проекты / онлайн-сервисы», «стать богом в одной конкретной сфере и собирать сливки со всех фриланс бирж — получать самые жирные проекты в этой нише» и т.д.
toster.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>
<h2 align=»center»>Сайт об автомобилях.</h2>
<p>Добро пожаловать на наш автомобильный сайт. Здесь Вы найдете много интересных и полезных статей об <strong>автомобилях</strong>. На сайте есть описания многих импортных и отечественных автомобилей.</p>
</body>
</html>
Далее сохраним созданную web-страницу в файл с именем index.html. При этом в диалоговом окне сохранения файла необходимо задать кодировку UTF-8 и заключить имя файла в кавычки, иначе Блокнот добавит к нему расширение txt, и наш файл получит имя index.htm.txt:
Теперь осталось открыть созданный файл в браузере и посмотреть на результат. Для этого можно воспользоваться поставляемым в составе Windows браузером Microsoft Internet Explorer, либо любым другим установленным на вашем компьютере браузером, щелкнув два раза мышкой по файлу index.html или перетаскиванием файла на значок браузера. Открываем и видим примерно такой результат:
Таким образом, мы создали Web-страницу в Блокноте, хоть и немного невзрачную, но уже содержащую большой заголовок и абзац текста, который автоматически разбивается на строки и содержит фрагмент, выделенный полужирным шрифтом.
Что такое тег?
Теперь поговорим подробнее о структуре страницы. Рассмотрим фрагмент: <h2 align=»center»>Сайт об автомобилях</h2>. Здесь мы видим текст, который отображается на странице как заголовок, заключенный в теги <h2> и </h2>. Что же такое тег в html языке?
Тег HTML —  это обычные слова и символы, заключенные в угловые скобки, например <h2>, <p>, <body>. Так тег <h2> является открывающим тегом, тег </h2> закрывающим тегом, а текст между ними называется содержимым тега. Также тег <h2> и тег </h2> называются парными тегами. Вместе открывающий тег плюс содержимое плюс закрывающий тег образуют элемент html-документа. Бывают еще элементы состоящие из одного открывающего тега:
Так парный тег <h2> определяет элемент заголовка первого уровня. Всего существует шесть уровней заголовков, это элементы <h2> — <h6>.
Элементы бывают блочные и строчные (текстовые). Блочные элементы осуществляют структурное форматирование страницы. Блочные элементы всегда отображаются на странице с новой строки и имеют отступ от соседних элементов. Строчные элементы осуществляют непосредственное форматирование текста или логическое форматирование. Элемент <h2> является блочным элементом.
Далее идет парный тег <p>, который создает на HTML-странице абзац. Содержимое данного тега станет текстом этого абзаца. Элемент <p> также является блочным элементом и как мы видим он начинается с новой строки и между заголовком <h2> и абзацем есть отступ.
Внутри абзаца встречается парный тег <strong>, который выводит свое содержимое полужирным шрифтом. Данный тег <strong> вложен внутрь содержимого тега <p>. Это значит, что содержимое тега <strong> будет отображаться как часть абзаца. Такие вложенные теги называются дочерними, а теги в которые вложены другие теги называются родительскими. Таким образом, тег <strong> является дочерним, а тег <p> — родительским. Такая вложенность тегов встречается в HTML сплошь и рядом.
При вложении тегов следует придерживаться одному правилу, порядок следования закрывающих тегов должен быть обратным порядку следования открывающих тегов. Т.е. теги и их содержимое должны полностью вкладываться в другие теги. Если нарушить это правило, то WEB-страница может отобразиться не правильно.
Кстати, элемент <strong> является строчным элементом. И как мы видим никаких переносов строк, ни отступов при отображении этого элемента не осуществляется. И очень важно упомянуть, по правилам языка html строчные элементы не могут иметь вложенных тегов.
Вы могли заметить, что открывающий тег <h2> кроме названия содержит еще какой-то текст: align=»center». Это атрибут тега, который задает его параметры. Каждый атрибут имеет имя, после которого идет знак =, и далее идет его значение взятое в кавычки:
В наше конкретном случае, атрибут align тега <h2> задает выравнивание текста. Так значение center указывает браузеру, что содержимое тега <h2> необходимо выровнять по центру.
Атрибуты бывают обязательными и необязательными. Обязательные атрибуты должны содержаться в теги в обязательном порядке. А необязательные атрибуты могут быть опущены, тогда они принимают значение по умолчанию.
Структура 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
Некоторые основные теги html для создания своего сайта
От автора: если вы решили заняться сайтостроением, то вам нужно знать хотя бы основные теги html. Это те базовые знания, которое помогут вам создать свой первый простой сайт.
В этой статье постараюсь описать основные теги языка html. Всего их более сотни, но действительно важных и постоянно нужных не так много. Самые главные теги
html — это глобальный тег-контейнер, в который помещается все содержимое веб-страницы. Он является парным, впрочем, как и большинство описываемых далее тегов. Если и будут попадаться одинарные, то я об этом скажу.
head — содержит разную информацию, которая никак не будет выводиться на странице, но от нее непосредственно зависит внешний вид информации. Например, в head прописывается кодировка, подключается таблица стилей и файлы javascript. То есть здесь указывается все, что нужно для корректной работы странички. Следующие четыре тега прописываются именно в head.
link — с помощью этого одинарного тега подключаются внешние файлы. Например, иконка или таблица стилей.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
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
Узнать подробнее
<a href = «адрес, куда перейти»>анкор</a></p>
<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
Узнать подробнее
PSD to HTML
Верстка сайта на HTML5 и CSS3 с нуля
Смотреть
СОЗДАНИЕ WEB-СТРАНИЦ И WEB-САЙТОВ

СОЗДАНИЕ WEB-СТРАНИЦ И WEB-САЙТОВ

Изучаемые темы:

1. Создание Web-страниц.
2. Размещение Web-страниц в Интернете.
3. Создание Web-страниц и Web-сайтов с помощью MS FrontPage 2002.

Тема № 1
СОЗДАНИЕ WEB-СТРАНИЦ

Вопросы: 1. Общие сведения о создании Web-страниц.
2. Создание и оформление Web-страниц.

1. Общие сведения о создании Web-страниц

Собрание страниц, объединенных некоторой общей тематикой и помещенных, как правило, на одном компьютере, называют Web-узлом или сайтом. Узлы Web подобны книгам, а Web-страницы — страницам этих книг. Компьютеры, на которых размещаются сайты, а также программы, обеспечивающие поддержку сайтов, называются серверами. На одном сервере может размещаться множество Web-узлов или сайтов.
Чтобы опубликовать в Интернете страницу, содержащую некоторую информацию, используется специально разработанный для этого язык HTML.
HTML – HyperText Markup Language (Язык разметки гипертекста) представляет собой довольно простой набор команд, описывающих структуру документа. Этот язык разметки позволяет выделить в документе отдельные логические части – заголовки, абзацы, таблицы, списки-перечисления и т.д., но не задает конкретные атрибуты форматирования. Конкретный вид форматирования определяет сам браузер при чтении документа, и именно браузер обеспечивает наилучшее отображение Web-документа на вашем экране.
Создавать Web-страницы можно с помощью специальных программ-редакторов, автоматически генерирующих код HTML, работа с которыми не требует знания языка разметки. Однако эти программы часто ограничены в своих возможностях, содержат ошибки и нередко создают плохой HTML-код, который работает не на всех платформах. Поэтому, если вы хотите серьезно освоить Web-дизайн и понять принципы создания Web-страниц, вам не обойтись без знания основ языка HTML, тем более что создавать Web-страницы на нем совсем не трудно.
Язык HTML существует в нескольких вариантах или спецификациях. Как и версии программных продуктов, спецификации пронумерованы: 2.0, 3.0, 3.2, 4.0. Каждая последующая спецификация представляет собой расширение и дополнение предыдущей таблицы, списки-перечисления и т.д., но не задает конкретные атрибуты форматирования. Конкретный вид форматирования определяет сам браузер при чтении документа, и именно браузер обеспечивает наилучшее отображение Web-документа на вашем экране.
Документ в окне с кодом HTML — это текстовый документ специального формата. Все файлы этого формата имеют расширение .html или .htm. В документе HTML обычный текст сочетается с элементами разметки, заключенными в угловые скобки < и >, например <html>, <head>, <title>, </title>. Такие элементы разметки называются тэгами. Тэги бывают одиночными, открывающими и закрывающими и состоят из следующих друг за другом в определенном порядке элементов:
•       левой угловой скобки <;
•       необязательного символа слэш /, который означает, что тэг является конечным тэгом, закрывающим некоторую структуру, например, </title>. В этом смысле можно читать символ / как конец некоторого элемента разметки, например, строки или абзаца;
•       имени тэга, например, html;
•       необязательных атрибутов. Тэг может быть без атрибутов или сопровождаться одним или несколькими атрибутами, например, align=»center«;
•       правой угловой скобки >.
Таким образом, открывающий тэг <html>, стоящий вначале документа HTML и означающий его начало, состоит из имени html и двух угловых скобок < >, а тэг </html>, находящийся в конце Web-документа, кроме указанных элементов содержит также символ слэш /, означающий закрывающий тэг и указывающий на конец документа. Тэг <div align=»center«>, означающий разделение документа на части, содержит, кроме имени div, атрибут align со значением «center«, означающий выравнивание по центру.
В тэгах могут использоваться только символы латинского алфавита, а в значениях атрибутов — любые символы. Если в качестве значений атрибута используются, например, символы кириллицы, то они должны быть заключены в кавычки, например name=»Раздел 1″.
Язык HTML не различает большие и малые буквы, так что тэги <HEAD>, <head> и <Head> эквивалентны. Далее мы будем использовать написание тэгов в нижнем регистре.
Большинство тэгов спарены: за открывающим тэгом следует соответствующий ему закрывающий тэг, а между ними содержится текст или другие тэги.
В таких случаях два тэга и часть документа, заключенная между ними, образует блок, называемый элементом HTML. Некоторые тэги, например <hr>, являются одиночными, и для них закрывающий тэг не применяется. Такие тэги сами по себе являются элементами HTML.
Большинство тэгов могут иметь один или несколько атрибутов - параметров, дающих дополнительную информацию о том, как браузер должен обрабатывать текущий тэг. Однако атрибутов может и не быть вовсе. Атрибут тэга состоит из имени, например, align, знака равенства = и значения, которое задается строкой символов, например, «center«:align=»center«. Значения атрибутов обычно заключаются в кавычки. Однако если эти значения используют только символы латинского алфавита, цифры и дефисы, то кавычки можно опустить, например: align=center.
Каждый HTML-документ имеет определенную структуру, которая выглядит следующим образом:
<html>
<head>
…
</head>
<body>
…
</body>
</html>
Структура HTML-документа содержит следующие обязательные элементы:
• тэги <html> и </html>, которые отмечают начало и конец документа;
•       заголовок, ограниченный тэгами <head> и </head>;
•       тело, ограниченное тэгами <body>…</body>.
В заголовке, ограниченном тэгами <head> и </head>, с помощью тэгов <title>…</title> определяется название документа, которое должно описывать его содержимое и обычно содержит не более 5-6 слов. Это название отображается браузерами в строке заголовка рабочего окна программы, а роботы, составляющие индексы для поисковых систем, идентифицируют документ, используя его название.
Кроме элемента <title>…</title>, заголовок может содержать элементы <meta>…</meta>. Открывающий тэг <meta> включает пары имя=значение, описывающие свойства документа, например, авторство, список ключевых слов и т.д. Эти данные используются также поисковыми серверами при индексации документов.

2. Создание и оформление Web-страниц

Для создания Web-страниц понадобится любой браузер — Internet Explorer или Netscape Communicator, а лучше оба, так как многие элементы HTML по-разному отображаются в разных программах просмотра и весьма желательно контролировать эту разницу. Кроме того, нужен любой текстовой редактор, например, Блокнот из Windows. Программа Блокнот нужна для подготовки HTML-файлов, а браузер — для просмотра и контроля сделанного. С помощью этих инструментов мы создадим сайт на своем локальном компьютере, после чего поместим его на один из WWW-серверов в Интернете, сделав, таким образом, ваши Web-страницы доступными всему миру.
В качестве примера создадим сайт лицея. Цель сайта — рассказать миру о лицее, сфере его деятельности, интересов, найти друзей, партнеров, спонсоров.
Для файлов нашего сайта нужна отдельная папка.
Создайте папку с именем Web на жестком диске вашего компьютера.
Теперь запустим программу Блокнот и приступим к работе.
Вы можете использовать любой другой текстовый редактор. Однако в этом случае следует сохранять файл как простой текст, чтобы избежать включения в Web-документ посторонних символов форматирования.
Сначала введем в окне программы Блокнот тэги, определяющие структуру любого HTML-документа. Напомним, что в HTML-коде допускается использовать любой регистр символов — верхний или нижний.
Введите с клавиатуры следующие основные тэги, поместив каждый из них, кроме закрывающего тэга </title>, в новой строке.
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Для ввода парных тэгов вы можете использовать операции копирования и вставки через буфер обмена Windows с последующим добавлением символа слэш /.
Напомним, что первый <html> и последний </html> тэги означают соответственно начало и конец документа, элемент <head>…</head> определяет заголовок Web-страницы, элемент <body>…</body> — тело документа, а в элементе <title></title> мы сейчас укажем название Web-страницы.
Между открывающим <title> и закрывающим </title> тэгами вставьте название документа – Лицей № 1548. Этот элемент должен выглядеть следующим образом:
<title>Лицей № 1548</title>
Напомним, что название Web-страницы должно быть коротким и в максимальной степени отображать ее содержание.
Наша следующая задача — вставить в тело документа между тэгами <body>…</body> короткий текст-приветствие посетителям Web-страницы.
Вставьте пустую строку между тэгами <body> и </body> и введите в ней следующий текст:
Добро пожаловать на страничку лицея № 1548! Здесь Вы узнаете о нашей деятельности, о наших интересах и увлечениях, о наших успехах и достижениях
Для каждой Web-страницы вы можете определить цвет фона и цвет текста. Это выполняется с помощью атрибутов bgcolor и text открывающего тэга <body>. Для определения цвета как значения атрибутов существует два варианта:
• словесное указание имени цвета, например, white (белый). В языке HTML предусмотрено шестнадцать таких имен;
• цифровое обозначение в шестнадцатеричной записи, например, «#ffffff» — белый, которое указывает, каким образом цвет формируется из основных цветов — красного, зеленого, синего.
Конечно, словесное указание цвета более удобно и понятно. С другой стороны, численные обозначения дают больше возможностей, так как позволяют указать практически любой из 16777215 оттенков, тогда как словесные обозначения ограничены только шестнадцатью цветами.
Используем в качестве примера для фона нашей Web-страницы синий цвет (blue), а для текста — желтый (yellow).
Вставьте в открывающий тэг <body> атрибуты bgcolor=blue и text=yellow. Этот тэг должен принять вид:
<body bgcolor=blue text=yellow>
Ваш текстовый файл должен выглядеть примерно так:
<html>
<head>
<title>Лицей № 1548</title>
</head>
<body bgcolor=blue text=yellow>
Добро пожаловать на страничку лицея № 1548! Здесь Вы узнаете о нашей деятельности, о наших интересах и увлечениях, о наших успехах и достижениях
</body>
</html>
Теперь документ следует сохранить. Откройте ранее созданную папку Web, введите имя файла licey1548.html и нажмите кнопку Сохранить.
Обратите внимание: вы обязательно должны указать расширение имени файла .html или .htm, чтобы браузер смог его открыть.
Возможно, в вашем браузере размер шрифта текста будет крупнее или мельче, чем на рисунке. В таком случае выберите команду меню Вид • Размер текста • Средний в браузере Internet Explorer или Вид • Увеличить шрифт, Вид • Уменьшить шрифт в браузере Netscape Communicator, чтобы установить средний размер шрифта.
Следует иметь в виду, что разные браузеры могут по-разному отображать содержимое одного и того же HTML-файла. Поэтому при создании Web-страниц желательно всегда просматривать результат в обоих наиболее популярных браузерах — Internet Explorer и Netscape Communicator. В таком случае вы будете уверены, что посетитель вашего сайта увидит именно то, что вы хотите ему показать.
Так как в элементе <body></body> мы ввели текст без разбивки на абзацы, то в браузере он отображается в виде одного абзаца и выровнен влево. Теперь следует придать тексту более наглядный вид.

2.1. Форматирование текста

Чтобы наша Web-страница выглядела более привлекательно, разделим текст на абзацы и выделим заголовок. HTML имеет шесть уровней заголовков разделов документа, пронумерованных цифрами от 1 до 6. Заголовки объявляются парой тэгов с номерами, соответствующими уровню, например, <h1></h1> - заголовок раздела первого уровня, а <h6></h6> - заголовок раздела шестого уровня. От нормального текста заголовки отличаются размером и толщиной букв. Заголовок первого уровня h1 отображается обычно очень крупным шрифтом, в то время как заголовок шестого уровня h6 — очень мелким.
Не следует путать заголовки разделов документа с рассмотренным ранее заголовком документа, определяемым элементом <head></head>.
В качестве заголовка текста используем первое предложение — Добро пожаловать на страничку лицея 1548! Для этого достаточно ограничить его тэгами <h1> и </h1>.
Вставьте в текст файла licey1548.html тэги <h1> и </h1> так, чтобы они ограничивали первое предложение текста, и этот фрагмент кода принял следующий вид:
<h2>Добро пожаловать на страничку лицея 1548!</h2>
Сохраните файл, выбрав команду Сохранить меню Файл программы Блокнот.
Операцию сохранения необходимо всегда выполнять перед просмотром документа, так как браузер открывает файл для просмотра, загружая его в оперативную память компьютера с диска. Если после редактирования кода HTML вы не сохраните файл, то никаких изменений в браузере не увидите.
Нажмите клавишу F5 или кнопку Обновить на панели инструментов рабочего окна программы Internet Explorer или аналогичную кнопку Обновить в Netscape Communicator. Файл licey1548.html будет перезагружен, и вы увидите в окне браузера, как выглядит заголовок первого уровня.
Используя шесть уровней заголовков, которые предоставляет в ваше распоряжение язык HTML, можно создать легко читаемый документ с интуитивно ясной структурой. Помните, что ваш документ всегда будет читаться значительно лучше, если в нем будет четкое разделение на разделы и подразделы.
По умолчанию заголовок выравнивается по левому краю страницы. Но его можно также выровнять по правому краю или центрировать. Для правостороннего выравнивания в тэге <h1> используется атрибут align=right, а для центрирования — align=center. Допускается также явное указание левостороннего выравнивания — align=left.
Добавьте в тэг <h1> атрибут align=center, чтобы центрировать заголовок. Этот элемент должен принять следующий вид:
<h2 align=center>Добро пожаловать на страничку лицея 1548!</h2>
Теперь займемся остальным текстом. Увеличим его размер и оформим текст полужирным курсивным начертанием. Для установки полужирного начертания используются парные тэги <b></b>.
Вставьте в файле licey1548.html открывающий <b> и закрывающий </b> тэги так, чтобы они ограничили текст Здесь вы узнаете… . Этот элемент должен принять следующий вид:
<b> Здесь Вы узнаете о нашей деятельности, о наших интересах и увлечениях, о наших успехах и достижениях </b>
Курсивное начертание устанавливается с помощью тэгов <i></i>.
Вставьте в исходный код HTML тэг <i> и </i> так, чтобы отредактированный элемент принял следующий вид:
<b><i>Здесь Вы узнаете о нашей деятельности, о наших интересах и увлечениях, о наших успехах и достижениях</i></b>
Элементы разметки могут быть вложенными, как в данной структуре, где элемент <i>…</i> вложен в элемент <b>…</b>. Современные браузеры способны правильно обрабатывать вложенные тэги. Поэтому вам необходимо следить за тем, чтобы не нарушался порядок вложения. Работа браузера окажется затрудненной, если вложенность будет нарушена. Например, такая запись будет неправильной: <b><i>…</b></i>. Соблюдение вложенности — очень важная часть общей культуры написания HTML-кода.
С помощью пары тэгов <u></u> можно установить подчеркнутое начертание текстового фрагмента, который ограничивают данные тэги, а с помощью пары тэгов <tt></tt> -отобразить текст телетайпным шрифтом.
После того, как вы просмотрите полученный результат, увеличим размер шрифта текста. Это можно сделать разными способами.
Тэги <big></big> увеличивают размер шрифта текста, заключенного между ними.
Добавьте в начало и конец вышеуказанного фрагмента кода соответственно тэги <big> и </big> так, чтобы элемент принял следующий вид:
<big><b><i> Здесь Вы узнаете о нашей деятельности, о наших интересах и увлечениях, о наших успехах и достижениях </i></b></big>
С помощью тэгов <small></small> вы можете уменьшить размер шрифта текста по сравнению с исходным.
Другой способ указания размера шрифта — с помощью тэгов <font></font> с атрибутом size. В качестве значений этого атрибута используются целые числа от 1 до 7. Причем значение 1 соответствует минимальному размеру шрифта, а значение 7 — максимальному.
В качестве значения атрибута size можно также использовать числа от 1 до 7 со знаком + (плюс) или — (минус). В этом случае размер шрифта соответственно увеличивается или уменьшается, по сравнению с исходным, например, тэги <font size=+1></font> увеличат размер шрифта, по сравнению с текущим, на один порядок.
В тэгах <font></font> может использоваться также атрибут color для указания цвета шрифта, ограниченного тэгами текста. Значения этого атрибута такие же, как и для рассмотренных ранее атрибутов, описывающих цвет фона и текста документа.
По умолчанию абзац с текстом Здесь Вы узнаете… выровнен влево. Центрируем его по горизонтали с помощью тэгов <center></center>. Вы можете также выровнять абзац по правому краю страницы с помощью тэгов <right></right> или по левому — с помощью тэгов <left></left>.
Вставьте тэги <center></center>, ограничив ими указанный абзац так, чтобы код HTML принял следующий вид:
<html>
<head>
<title>Лицей № 1548</title>
</head>
<body bgcolor=blue text=yellow>
<h2 align=center>Добро пожаловать на страничку лицея № 1548!</h2>
<center><font size=5><b><i>Здесь Вы узнаете о нашей деятельности, о наших интересах и увлечениях, о наших успехах и достижениях</i></b></font><center>
</body>
</html>
В окне браузера документ будет выглядеть примерно так, как это показано на рис. 1.
Язык HTML допускает два подхода к шрифтовому выделению фрагментов текста. С одной стороны, можно прямо указать, что шрифт на некотором участке текста может быть полужирным или курсивным, т.е. явно указать начертание шрифта текста, как мы это делали в данном опыте. С другой стороны, можно пометить любой фрагмент текста, как имеющий некий, отличный от нормального, логический стиль, предоставив интерпретацию этого стиля браузеру. Таким образом, логический стиль указывает роль текстового фрагмента, например, большую значимость по сравнению с обычным текстом или то, что данный фрагмент является цитатой. В своей работе вы можете использовать следующие тэги, определяющие логические стили. Проверьте, как они работают в разных браузерах.
<dfn></dfn> - применяется для определения слова. Текст обычно выводится курсивом.
<em></em> — для выделения слов и усиления. Отображается курсивом.
<cite></cite> — для выделения названий книг, фильмов, спектаклей и т.д. Выводится курсивом.
<code></code> — для фрагментов кода программ. Показывается на экране шрифтом фиксированной ширины.
<kbd></kbd> - используется для текста, который пользователь вводит с клавиатуры. В разных браузерах может отображаться разными шрифтами.
<samp></samp> — служит для отображения сообщений программ. Выводится шрифтом фиксированной ширины.
<strong></strong> — для особо важных фрагментов. Обычно выделяется полужирным начертанием.
<var></var> - используется для указания, что часть текста или слово является символьной переменной, т.е. текстом, который может быть заменен различными выражениями. Отображается курсивом.

2.2. Вставка иллюстраций

На каждую Web-страницу можно поместить любое количество иллюстраций. Вы можете использовать готовые графические изображения или создать их сами. Здесь мы посмотрим, как вставить в Web-документ уже готовый рисунок.
Графические изображения, которые вы вставляете в свои Web-документы, должны быть созданы в таком графическом формате, который поддерживается браузером. Стандартные форматы Web-графики — GIF, JPG и PNG. Размеры их файлов минимальны по сравнению с другими форматами, что значительно сокращает время загрузки из сети.
Вставим на первую страницу нашего сайта рисунок МИР.JPG, который обычно находится в папке Windows, т.е. той папке, в которой установлена операционная система Windows. Прежде всего, этот файл следует скопировать в папку Web, которую мы создали для хранения файлов сайта.
Скопируйте файл МИР.JPG или любой другой файл с расширением .JPG или .GIF из папки Windows в папку Web.
Для вставки изображения в Web-документ используется одиночный тэг <img> с атрибутом src, значение которого соответствует имени вставляемого файла или его адресу в Интернете. С помощью необязательного атрибута <border> можно включить отображение рамки вокруг рисунка. Значение 1 для этого атрибута создаст рамку толщиной 1 пиксел. Таким образом, тэг, вставляющий рисунок, должен выглядеть следующим образом:
<img src=МИР.JPG border=1>
Вставим его после заголовка Добро пожаловать на страничку лицея № 1548!
Операционная система Windows не различает регистр букв в названиях имен файлов, но операционные системы семейства Unix различают его, поэтому следует тщательно следить за тем, чтобы имя файла в тэге указывалось с соблюдением регистра. Начинающие Web-дизайнеры часто недоумевают: почему рисунок был виден на странице при тестировании на локальном компьютере и не появляется при загрузке страниц с удаленного сервера. А все дело в том, что они указали Мир.jpg, а на диске хранится МИР.JPG.
Вставьте пустую строку после элемента <h1 align=center>Добро пожаловать на страничку лицея № 1548!</h1> и введите в ней тэг <img src=МИР.JPG border=1> для включения изображения в документ.
Чтобы выровнять рисунок по центру, следует, воспользовавшись тэгами <center></center>, записать строку кода HTML, вставляющего рисунок, следующим образом:
<center><img src=МИР.JPG border=1</center>
Ограничим размер рисунка по ширине 300 пикселами, а по высоте – 400 пикселами:
<center><img src= МИР.JPG border=1 Widht=300 height=400></center>
В результате текстовый файл должен выглядеть так, как это показано на рис. 2. В окне браузера документ будет выглядеть примерно как на рис. 3.

2.3. Создание списков

Для наглядного представления информации на Web-страницах часто используются списки. Списки могут быть нумерованными и ненумерованными. Создадим новую страницу нашего сайта, на которой вставим ненумерованный список.
Создайте структуру Web-документа, напечатав основные тэги:
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
В качестве заголовка документа в тэге <title></title> введите: Чем мы занимаемся?:
<title>Чем мы занимаемся?</title>
Такой же заголовок для списка введите в теле документа между тэгами <body> и </body>, использовав для его отображения тэги <h2></h2> с атрибутом align=center, выравнивающим заголовок по центру страницы:
<h3 align=center>Чем мы занимаемся?</h3>
Самостоятельно подберите цвет фона страницы и цвет текста, указав соответствующие значения для атрибутов bgcolor и text в открывающемся тэге <body>, например, так:
<body bgcolor=aqua text=navy>
Помните, однако, что цвет текста должен быть таким, чтобы текст хорошо читался на выбранном фоне. Если атрибуты цвета не указывать, то по умолчанию текст будет отображаться черным цветом на белом фоне.
Теперь вставим на страницу ненумерованный список с информацией о сфере деятельности нашего лицея. Ненумерованные списки создаются с помощью пары тэгов <ul></ul>, которые ограничивают список.
Между ними располагается столько элементов, начинающихся с тэга <li>, сколько элементов в списке.
Вставьте пустую строку под строкой с кодом <h2 align=center>Чем мы занимаемся?</h2> и введите в теле документа следующий код:
<ul>
<li>Изучением фундаментальных курсов физико-математических дисциплин.
<li>Изучением курсов дисциплин, составляющих основу современной теоретической и прикладной экономики.
<li>Изучением цикла гуманитарных дисциплин.
<li>Изучением сценического искусства.
</ul>
Обратите внимание: тэг <li> может использоваться как одиночный, т.е. без парного, закрывающего тэга </li>.
Полный HTML-код документа должен иметь следующий вид:
<html>
<head>
<title>Чем мы занимаемся?</title>
</head>
<body bgcolor=aqua text=navy>
<h3 align=center>Чем мы занимаемся?</h3>
<ul>
<li>Изучением фундаментальных курсов физико-математических дисциплин.
<li>Изучение курсов дисциплин, составляющих основу современной теоретической и прикладной экономики.
<li>Изучением цикла гуманитарных дисциплин.
<li>Изучением сценического искусства.
</ul>
</body>
</html>
Когда ввод кода будет закончен, сохраните документ в папке Web под именем spisok.html.
Воспользовавшись командой Открыть меню Файл в браузере Internet Explorer или командой Открыть страницу меню Файл в браузере Netscape Communicator, откройте файл spisok.html из папки Web.
На экране (рис. 4) Вы увидите, что каждый элемент ненумерованного списка выделяется специальным маркером.
В нумерованном списке каждый элемент будет отмечаться его порядковым номером. Для создания нумерованных списков используются тэги <оl></оl>, между которыми помещаются элементы <li>.

2.4. Создание форм

Очевидно, что познакомившиеся на Web-странице с информацией о лицее и заинтересовавшиеся ею посетители сайта захотят задать вопросы, обсудить общие проблемы, предложить сотрудничество. Чтобы ускорить и облегчить им процедуру связи, достаточно поместить на данной странице специальную форму, заполнив которую, посетитель сайта передаст информацию, которую он посчитает нужным послать.
Подобные формы широко используются на Интернет-сайтах для сбора различных сведений, регистрации пользователя, формирования запроса и т.д. Такая форма может содержать поля для ввода данных, поля списков, открывающиеся списки, флажки и переключатели для выбора значений и другие элементы управления. После заполнения формы пользователем специальная программа-обработчик или, как ее еще называют, скрипт, обрабатывает полученные данные и передает их по назначению.
Посмотрим, как вставить в Web-документ простую форму, которая позволит пользователю напечатать свое сообщение прямо на Web-странице и автоматически отправить его по электронной почте лицею. Но сначала вставим в HTML-документ spisok.html текст с приглашением заполнить форму, поместив его под списком. Текст приглашения следует выделить в отдельный абзац, ограничив его парой тэгов <р></р>, и выровнять по центру с помощью атрибута align=center.
Вставьте пустую строку между закрывающим тэгом </ul> и закрывающим тэгом </body> и введите в этой строке следующий код:
<р align=center>Ecли у Вас есть вопросы или предложения, напишите нам:</р>
Каждая форма начинается тэгом <form> и заканчивается тэгом </form>. HTML-документ может содержать в себе несколько форм, однако они не должны находиться одна внутри другой. Текст и тэги могут размещаться внутри формы без ограничений. Открывающий тэг <form> должен содержать обязательный атрибут action, который определяет, где находится программа-обработчик, или адрес сервера, который будет обрабатывать форму. Так как сообщение, написанное посетителем сайта, будет отправляться по электронной почте, то значение этого атрибута должно содержать адрес E-mail владельца сайта, например: action=»mailto: licey1548.narod.ru«.
Еще один атрибут тэга <form> — method — определяет, каким образом или с помощью какого протокола данные из формы будут переданы программе-обработчику. Так как будет использована электронная почта, то значение этого атрибута должно быть post:method=post. Таким образом, элемент <form>…</form> будет иметь примерно такой вид:
<form action=»mailto: [email protected]» method=post></form>
Добавьте в документе spisok.html пустую строку перед закрывающим тэгом </body> и введите указанный код.
Теперь нам нужно поместить в форме многострочное текстовое поле для ввода сообщения. Для этого служат тэги <textarea></textarea>. В качестве атрибутов открывающего тэга <textarea> необходимо указать количество строк (rows) и колонок (cols), a также имя (name), под которым содержимое текстового поля ввода будет передано программе-обработчику, например:
<textarea rows=5 cols=40 name=Comments></textarea>
Такой элемент создаст текстовое поле ввода высотой 5 строк и шириной 40 символов. Введенный посетителем сайта текст будет передан обработчику под именем Comments (Комментарии). Чтобы центрировать текстовое поле относительно краев страницы, следует ограничить его тэгами <center></center>.
Вставьте пустую строку перед закрывающим тэгом </form> и введите следующий элемент, создающий текстовое поле:
<center><textarea rows=5 cols=40 name=Comments></textarea></center>
Здесь для центрирования текстового поля мы использовали тэги <center></center>, a не атрибут align=center тэга <р>, так как данный атрибут предназначен преимущественно для выравнивания текстовых фрагментов, и некоторые браузеры, например, Netscape Communicator, могут игнорировать данный атрибут для поля формы.
Чтобы запустить процесс передачи данных из формы обработчику, нужен какой-то элемент управления, например, кнопка. Создать такой элемент управления очень легко с помощью одиночного тэга <input> с атрибутом type. Если нужно создать кнопку, то значение этого атрибута должно быть submit (передать):
<input type=submit>
Такой элемент по умолчанию выведет на Web-странице кнопку с надписью Подача запроса. Чтобы изменить надпись на кнопке, достаточно включить в данный тэг атрибут value с нужным вам значением, например: value=»Отправить». Напомним, что значения атрибутов, в которых используются символы, отличные от латинских, следует обязательно заключать в кавычки.
Вставьте пустую строку перед закрывающим тэгом </form> и введите в ней следующий код, создающий кнопку в новом абзаце и выравнивающий ее по центру страницы:
<p><center><input type=submit value=»Oтправить»></center></p>
В результате элемент <form>…</form> должен принять следующий вид:
<form action=»mailto:[email protected]» method=post>
<center><textarea rows=5 cols=40 name=Comments></textarea><center> <p><center><input type=submit value=»Отправить»></center></р></form>
Напомним еще раз, что в качестве значения атрибута action, в открывающем тэге <form> следует указать ваш адрес электронной почты.

2.5. Вставка гипертекстовых ссылок

Аббревиатура HTML означает «Язык разметки гипертекста». Что же такое гипертекст?
В отличие от простого текста, который можно читать только от начала к концу, гипертекст позволяет осуществлять мгновенный переход от одного фрагмента текста к другому. Справочные системы многих программных продуктов построены именно по принципу гипертекста. При щелчке левой кнопкой мыши на некотором выделенном цветом и подчеркнутом фрагменте текущего документа — гипертекстовой ссылке - происходит переход к заранее назначенному документу или фрагменту документа. На Web-страницах гипертекстовые ссылки широко используются для перехода к определенному фрагменту текущей страницы, к следующей или любой странице сайта или к документу другого сайта.
Для задания перехода по гиперссылке в языке HTML используются тэги <а></а> с атрибутом href, значением которого является адрес перехода. В качестве адреса может использоваться имя файла другого документа или URL-адрес.
Каждый компьютер, подключенный к Интернету, имеет свой уникальный адрес, который может быть представлен или в числовом виде, например, 204.146.46.133, или определенным сочетанием символов, например, www.microsoft.com. Поскольку каждый компьютер имеет свою уникальную структуру каталогов и файлов, то и каждая страница Web также имеет уникальный адрес, называемый URL (Uniform Resource Locator — Унифицированный указатель ресурсов). Как видно из названия, URL может указывать не только на страницы Web, но также и на другие ресурсы Интернета, например, FTP (File Transfer Protocol — Протокол передачи файлов) — хранилища файлов. В самом общем виде URL включает в себя указатель на протокол, который применяется для доступа к ресурсу — http, ftp и др. — и символьный адрес компьютера в сочетании с именем конкретного файла в структуре каталогов этого компьютера. Например, URL-адрес http://www.chat.ru/user/faq.html состоит из указателя на протокол http, который применяется для доступа к Web, имени компьютера www.chat.ru и имени файла-документа faq.html, который находится в каталоге user.
Из сказанного следует, что каждой Web-странице соответствует свой HTML-файл. Однако вы можете заметить, что во многих URL-адресах отсутствует имя файла, например, http://www.microsoft.com. Тем не менее, в окне браузера все же появляется конкретная страница. Дело в том, что администраторы Web-серверов могут указать на своих узлах некоторые HTML-файлы, которые выводятся по умолчанию, если имя файла в URL явно не задано. Обычно эти файлы имеют имена index.html или index.htm.
Посмотрим, как создать переход по ссылке с конца текущего документа spisok.html на первую страницу нашего сайта, т.е. к файлу licey1548.html. Чтобы сообщить посетителю сайта о возможности вернуться к первой странице, необходимо предусмотреть между открывающим <а> и закрывающим </а> тэгами соответствующий текст, например:
<а href=»licey1548.html»>Ha первую страницу</а>
Обратите внимание, что адрес ссылки должен быть заключен в кавычки, так как некоторые браузеры могут не понять его без кавычек.
Чтобы ссылка На первую страницу была центрирована, следует ограничить элемент <а>…</а> тэгами <center> и </center>.
Вставьте в файле spisok.html пустую строку перед закрывающим тэгом </body> и введите в ней следующий код:
<center><a href=»licey1548.html»>Ha первую страницу</а></сеnter>
Теперь создадим гиперссылку для перехода с первой страницы – licey1548.html — на вторую — spisok.html. Для ссылки логичней всего будет использовать текстовый фрагмент о нашей деятельности, так как список на второй странице раскрывает содержание именно этого фрагмента текста. Поэтому нам нужно в файле licey1548.html поместить открывающий тэг <а> с атрибутом href=»spisok.html« перед фрагментом текста о нашей деятельности, а закрывающий тэг </а> — после него.
Для этого:
Откройте в программе Блокнот файл licey1548.html.
Отредактируйте этот файл, вставив тэг <а href=»spisok.html«> перед текстом о нашей деятельности, а закрывающий тэг </а> — после него. Код HTML в файле licey1548.html должен принять следующий вид:
<html>
<head>
<title>Лицей № 1548</title>
</head>
<body bgcolor=blue text=yellow>
<h2 align=center>Добро пожаловать на страничку лицея № 1548!</h2>
<center><img src=МИР.JPG border=1><a></center>
<p>Здесь Вы узнаете <а href=»spisok.html»>о нашей деятельности</a>, о наших интересах и увлечениях, о наших успехах и достижениях</р>
</body>
</html>
Очень вероятно, что когда вы просмотрите результат в браузере, вы обнаружите, что ссылка о нашей деятельности видна очень плохо или вообще не видна. Это связано с тем, что цвет, которым браузер отображает непросмотренные ссылки, совпадает с цветом фона вашего документа. В таком случае цвет ссылок следует изменить, воспользовавшись атрибутами link и vlink тэга <body>. Атрибут link определяет цвет непросмотренной ссылки, а vlink — просмотренной. Еще один атрибут — alink определяет цвет ссылки в момент, когда на ней установлен указатель мыши и нажата левая кнопка.
Если вы устанавливаете какой-либо из атрибутов: bgcolor, text, link, vlink, alink — то устанавливайте их все. Иначе, например, установленный вами фоновый цвет может совпасть с цветом текста, установленным пользователем в браузере.
Установим для непросмотренной ссылки белый цвет (white), для просмотренной — светло-зеленый (lime), а для ссылки в момент щелчка мышью — красный (red), добавив в тэг <body> атрибуты link=white, vlink=lime, alink=red так, чтобы этот тэг имел следующий вид:
<body bgcolor=blue text=yellow link=white, vlink=lime, alink=red>
Вставить переход в документе можно не только с текстовой ссылки, но также и с рисунка. Посмотрим, как вставить переход с рисунка на вторую страницу.
Для создания такой ссылки достаточно в файле licey1548.html вставить открывающий тэг <а href=»spisok.html«> перед тэгом <img src=МИР.JPG border=1> и закрывающий тэг </а> после него.
Отредактируйте файл licey1548.html так, чтобы окончательный HTML-код документа имел следующий вид:
<html>
<head>
<title>Лицей № 1548</title>
</head>
<body bgcolor=blue text=yellow link=white vlink=lime, alink=red>
<body bgcolor=blue text=yellow>
<h2 align=center>Добро пожаловать на страничку лицея № 1548!</h2>
<center><img src=МИР.JPG border=1><a></center>
<p>Здесь Вы узнаете <а href=»spisok.html»>о нашей деятельности</a>, о наших интересах и увлечениях, о наших успехах и достижениях</р>
</body>
</html>
Создавая ссылки на страницы нашего сайта, мы использовали в качестве адреса имя файла. При таком указании адреса браузер всегда ищет файл в текущем каталоге. Если бы нужный файл — spisok.html — находился, предположим, в подкаталоге Doc текущего каталога, то в адресе необходимо было бы указать путь к нему от текущего каталога: <а href=»Doc\spisok.html«>. Такая ссылка, в которой адрес указывается относительно текущего каталога на том же компьютере, называется относительной.
Вы можете также использовать в ссылках полный URL-адрес, указывающий на файл, находящийся в определенном каталоге определенного компьютера в сети. Такая ссылка называется абсолютной. В то время как относительные ссылки указывают на файлы, расположенные на том же самом компьютере, абсолютные ссылки служат для представления адресов документов на других компьютерах в Интернете.

2.6. Создание таблиц

До сих пор мы создавали документы, в которых текст располагался в одной колонке. На практике иногда бывает необходимо расположить текст в двух или трех колонках. Помочь в этом может таблица. Кроме того, таблица, состоящая из одной ячейки, может эффектно выделить фрагмент текста, на который вы хотите обратить внимание посетителя сайта. Очень удобно чередовать в ячейках таблицы рисунки и текст. Ну и, конечно же, таблица нужна для отображения информации в табличном виде. Часто таблица используется для представления меню.
Создадим в новом файле таблицу из одной колонки, в ячейках которой, как в меню, представим ссылки на имеющиеся и другие, еще не созданные страницы сайта. Ведь сайт может содержать десятки страниц. Поэтому очень важно иметь возможность быстро выбирать нужную страницу из меню. Это меню мы затем поместим у левого края экрана так, чтобы оно постоянно оставалось в поле зрения пользователя.
Создайте новый текстовый файл, выбрав в меню Файл программы Блокнот команду Создать.
Введите основные тэги, создающие структуру документа. В заголовке документа укажите Меню. Цвет фона и текста документа самостоятельно выберите такими, чтобы ссылки были хорошо видны:
<html>
<head>
<title>Meню</title>
</head>
<body bgcolor=silver>
</body>
</html>
Каждая таблица начинается тэгом <table> и заканчивается тэгом </table>. Строки таблицы образуются парой тэгов <tr></tr>, между которыми располагаются пары тэгов <td></td>. Каждая пара этих тэгов образует один столбец. Между открывающим <td> и закрывающим </td> тэгами помещается текст или любое другое содержимое ячейки.
Учитывая сказанное, код HTML, описывающий нашу таблицу, состоящую из одного столбца и содержащую пункты меню с названиями страниц сайта, должен иметь следующий вид:
<table>
<tr><td>Главная страница</td></tr>
<tr><td>Чем мы занимаемся?</td></tr>
<tr><td>О нашем лицее</td></tr>
<tr><td>Новости</td></tr>
<tr><td>Учебный процесс</td></tr>
<tr><td>Связь с лицеем</td></tr>
</table>
Вставьте пустую строку между открывающим <body> и закрывающим </body> тэгами и, начиная с нее, введите указанный код.
Созданная нами таблица располагается у левого края экрана. Это положение можно изменить, использовав в открывающем тэге <table> атрибут align=center для выравнивания таблицы по центру или атрибут align=right — для выравнивания по правому краю окна браузера. Пункты меню расположены один под другим, а края таблицы и ячеек не видны. Это связано с тем, что по умолчанию рамка и ячейки таблицы не показываются. Чтобы включить их отображение, следует использовать в тэге <table> атрибут border, указав в качестве его значения толщину рамки в пикселах.
Добавьте в тэг <table> атрибут border=1, чтобы показать рамку и ячейки таблицы толщиной 1 пиксел:
<table border=1>
Размер таблицы обычно устанавливается браузером автоматически так, чтобы отображалось все ее содержимое. Однако вы можете установить фиксированную ширину таблицы в пикселах с помощью атрибута width.
Установите для таблицы ширину 140 пикселов, добавив атрибут width=140 в открывающий тэг <table> так, чтобы он принял вид:
<table border=1 width=140>
В окне браузера ширина таблицы уменьшится так, что в большинстве ячеек текст будет отображаться в двух строках.
При использовании для формирования столбцов таблицы тэгов <td></td> данные в ячейках представляются шрифтом нормального текста и по умолчанию выравниваются по левому краю ячеек. Если же требуется выделить данные в ячейках, например, заголовки столбцов или строк таблицы, то вместо тэгов <td></td> удобно использовать тэги <th></th>. Текст в элементах <th></th> обычно выделяется полужирным начертанием и выравнивается по центру ячеек.
Наше меню будет выглядеть лучше, если его пункты будут центрированы в ячейках и выделены полужирным шрифтом. Поэтому заменим в HTML-коде элементы <td></td> элементами <th></th>.
Отредактируйте файл menu.html, заменив тэги <td> и </td> соответственно тэгами <th> и </th>. Код HTML должен принять следующий вид:
<html>
<head>
<title>Меню</title>
</head>
<body bgcolor=silver>
<table border=1 width=140>
<table>
<tr><th>Главная страница</th></tr>
<tr><th>Чем мы занимаемся?</th></tr>
<tr><th>О нашем лицее</th></tr>
<tr><th>Новости</th></tr>
<tr><th>Учебный процесс</th></tr>
<tr><th>Связь с лицеем</th></tr>
</table>
</body>
</html>
В тэгах <td> и <th> вы можете использовать следующие атрибуты:
align — для горизонтального выравнивания содержимого ячеек по центру (center), левому (left) и правому (right) краям ячейки;
width — для указания ширины ячейки в пикселах;
height — для определения высоты ячейки;
valign — для вертикального выравнивания данных в ячейке по верхнему (top) и нижнему (bottom) краям и середине (middle) ячейки; по умолчанию valign=middle.
Вы можете также изменить цвет любой ячейки, столбца, строки или всей таблицы, вставив атрибут bgcolor соответственно в тэг <th>, <tr> или <table>.
Нам осталось теперь создать ссылки двух первых пунктов меню на соответствующие страницы нашего сайта. Так как остальные страницы еще не созданы, то ограничимся этими двумя ссылками. Как и прежде, воспользуемся тэгами <а></а> с атрибутом href. В качестве значения этого атрибута для первого пункта меню — Главная страница — следует указать файл licey1548.html, т.е. href=»licey1548.html«, а для второго — Чем мы занимаемся? — файл spisok.html т.е. href=»spisok.html«.
Обычно при переходе по ссылке новый документ отображается в том же окне, что и исходный, в котором была ссылка. Чтобы отобразить его в другом окне, необходимо в открывающем тэге <а> использовать атрибут target, параметром которого должно быть имя того окна, в которое будет загружен документ. Укажем это имя как значение атрибута target в ссылке: target=»frame«. Web-страница будет загружаться в то же окно браузера, в котором находится ссылка, а атрибут target позволит загружать документ в другое окно.
Отредактируйте в файле menu.html строки кода, содержащие названия пунктов меню Главная страница и Чем мы занимаемся?, вставив вышеуказанные ссылки соответственно на файлы licey1548.html и spisok.html так, чтобы эти строки приняли следующий вид:
<tr><th><a href=»licey1548.html» target=»frame»>Главная страница</а></th></tr>
<tr><th><a href=»spisok.html» target=»frame»>Чем мы занимаемся?</а></th></tr>
Окончательный вид файла menu.html с HTML-кодом примет следующий вид:
<html>
<head>
<title>Меню<title>
</head>
<body>
<table border=1 width=140>
<tr><th><a href=»licey1548.html» target=»frame»>Главная страница</а></th></tr>
<tr><th><a href=»spisok.html» target=»frame»>Чем мы занимаемся?</а></th></tr>
<tr><th>О нашем лицее</th></tr>
<tr><th>Новости</th></tr>
<tr><th>Учебный процесс</th></tr>
<tr><th>Связь с лицеем</th></tr>
</table>
</body>
</html>
Сохраните документ в папке Web под именем menu.html, выбрав из меню Файл программы Блокнот команду Сохранить. В браузере этот файл будет выглядеть так, как это представлено на рис. 5.

2.7. Создание фреймов

Значительно улучшить внешний вид и функциональность сайта можно, используя фреймы. С помощью фреймов экран разделяется на несколько окон, в каждом из которых отображается содержимое отдельной страницы. Используя подобным образом технологию фреймов, можно одновременно загрузить в одно окно браузера несколько Web-страниц.
Размер фрейма может изменяться пользователем прямо на экране с помощью мыши. Каждый фрейм имеет собственный адрес, что позволяет отображать его, независимо от других фреймов, и собственное имя, позволяющее переходить к нему из других фреймов. Такие свойства фреймов позволяют размещать в одном фрейме информацию, которую автор считает необходимым постоянно показывать пользователю. Это может быть логотип фирмы, набор управляющих кнопок, меню и т.д. С помощью фреймов можно создавать также окна запросов, когда в одном фрейме находится собственно запрос, а в другом — его результаты.
Посмотрим, как с помощью фреймов поместить в окне браузера меню для перехода на другие страницы сайта и сами страницы.
Для описания фреймов используется специальный HTML-файл.
В окне программы Блокнот (Notepad) создайте новый файл.
Введите основные тэги, кроме тэгов <body></body>, которые в файле, описывающем фреймы, не используются. В тэгах <title></title> заголовка укажите – Лицей № 1548:
<head>
<title>Лицей № 1548</title>
</head>
</html>
Вместо тэгов <body></body> в файле, описывающем фреймы, используется пара тэгов <frameset></frameset> с атрибутами rows или cols, определяющими, как делится экран — по горизонтали или по вертикали. В качестве значений этих атрибутов можно использовать числовое значение высоты или ширины фрейма в пикселах или в процентах от 1% до 100%. Например, если вы хотите разделить окно браузера по горизонтали на два равных по размеру фрейма, то код HTML должен быть таким:
<frameset row=»50%,50%»>
Обратите внимание: значения атрибутов отделяются один от другого запятой.
Чтобы разделить окно браузера по вертикали на два фрейма шириной 200 и 600 пикселов, следует написать:
<frameset cols=»200,600″>
Однако фактическая ширина и высота окна фрейма зависит от текущего разрешения монитора. Поэтому, если у пользователя установлено разрешение, например, 1024х768 пикселов, т.е. ширина экрана — 1024 пиксела, то часть экрана может остаться незаполненной. В связи с этим рекомендуется задавать размеры фреймов в процентах так, чтобы их сумма была равна 100%. Если все же необходимо для одного из окон указать фиксированный размер в пикселах, то размер другого окна можно не указывать, заменив его значение символом *. В этом случае браузер сам подберет нужный размер для второго окна.
Создадим для отображения нашего сайта два вертикальных фрейма. Для первого фрейма, в котором будет выводиться меню, установим фиксированную ширину — 160 пикселов, а размер второго предоставим определить браузеру, заменив его звездочкой *.
В окне программы Блокнот (Notepad) вставьте пустую строку после закрывающего тэга </head> и введите следующий код:
<frameset cols=»160,*»>
</frameset>
Таким образом, мы указали, что окно браузера должно быть разделено по вертикали на два фрейма. Для описания каждого фрейма в отдельности используются одиночные тэги <frame>, которые должны находиться внутри элемента <frameset>…</frameset>. Обязательным атрибутом тэга <frame> является src, значение его — адрес документа, который должен находиться в данном фрейме. Так как в первом фрейме будет находиться файл menu.html, то данный тэг следует записать так:
<frame src=»menu.html»>
Вставьте в окне программы Блокнот (Notepad) пустую строку после открывающего тэга <frameset> и введите указанный тэг.
Во второй фрейм должен загружаться файл licey1548.html, поэтому второй тэг <frame> будет таким:
<frame src=»licey1548.html»>
Чтобы во второй фрейм могли загружаться также и все остальные страницы сайта — spisok.html и другие, которые, возможно, будут созданы, — необходимо с помощью атрибута name присвоить данному фрейму имя, которое, будучи указано в ссылках любого документа в качестве значения атрибута target, определит, в какой именно фрейм следует загрузить документ. Напомним, что в общем случае, при переходе по ссылке новый документ открывается в том же окне. Именно для того, чтобы при переходе по ссылкам нашего меню страницы открывались не в первом фрейме, в котором расположено меню, а во втором, мы использовали в предыдущем вопросе в ссылках меню атрибут target со значением «frame«: target=»frame«, где «frame» -это имя второго фрейма. И теперь имя «frame» следует присвоить второму фрейму, в котором должен открываться файл licey1548.html. Поэтому второй тэг <frame> в окончательном виде должен быть записан так:
<frame src=»licey1548.html» name=»frame»>
Введите этот код, вставив пустую строку перед закрывающим тэгом </frameset>.
Сохраните файл в папке Web под именем index.html.
Имя index.html должно обязательно присваиваться файлу с главной страницей каждого сайта. Именно этот файл открывается по умолчанию при обращении к Web-узлу, если не указано другое имя файла. На некоторых сайтах имя главной страницы может быть index.htm, a index.html отображается не как страница, а как папка с именами файлов. Это надо уточнять у администратора узла.
Окончательный код файла index.html в окне программы Блокнот должен быть следующим:
<head>
<title>Лицей № 1548</title>
</head>
<frameset cols=»160,*»>
<frame src=»menu.html»>
<frame src=»licey1548.html» name=»frame»>
</frameset>
</html>
Вид файла index.html в браузере показан на рис. 6.
Фреймы — удобное и эффективное средство для размещения информации на Web-страницах. Однако, используя его, не следует терять чувства меры. Слишком большое количество окон на экране не улучшает восприятие информации. Не располагайте на экране более трех фреймов и старайтесь не применять их без необходимости.

2.8. Анимация на Web-страницах

Для пользователей Интернета уже давно стали привычными появляющиеся почти на каждой Web-странице «живые» мультипликационные картинки. Это и понятно: анимация привлекает внимание гораздо сильнее, чем статические картинки, и, кроме того, на небольшой площади можно поместить значительно больше информации за счет чередующихся кадров.
Анимация — это демонстрирующаяся в быстром темпе последовательность кадров, каждый из которых несколько отличается от предшествовавшего ему и следующего за ним. Каждый кадр отображается в течение определенного промежутка времени. Если кадров достаточное количество и время их отображения невелико, то создается иллюзия движения.
В настоящее время существует несколько технологий создания анимации для WWW: анимационный (animated) GIF, Flash, Java и JavaScript.
Из этих технологий анимационный GIF является, пожалуй, самым простым в создании, и практически любой современный браузер может его показать. Формат GIF позволяет размещать в одном файле несколько кадров или фреймов (frames) с изображениями для их последовательного вывода на экран. В отличие от обычного фильма, где длительность анимации определяется скоростью воспроизведения, для каждого кадра GIF-анимации может быть задана длительность его показа на экране, а для всей анимации может быть указано количество повторений. Кроме того, в отличие от обычного фильма, изображения, содержащиеся в кадрах GIF-анимации, не обязательно должны быть одного размера. Для изображения каждого кадра или слоя анимации вы можете установить индивидуальный размер и расположить его по своему усмотрению, независимо от других слоев. Анимационные GIF-файлы могут быть легко подготовлены в программе Adobe ImageReady. Увидеть анимацию такого типа можно, например, на сайте по адресу http://ani.newmail.ru/gallery.
Готовые бесплатные анимационные картинки для использования на своих Web-страницах вы можете найти, например, по адресам:
www.webman.ru/animation/main.htm
http://shpak.narod.ru/collection1.htm
http://www.animation-central.com
http://www.animationlibrary.com
http://www.animationcity.net
В отличие от GIF-анимации, которая позволяет размещать в файле только изображения, Flash-технология предоставляет возможность объединить в одном формате анимацию, звук, текст, графику и, кроме того, элементы интерактивности, которые дают возможность пользователю или посетителю сайта определенным образом изменять данные на Web-странице, превращая его из наблюдателя в активного участника. Интерактивными элементами сайта могут быть игры, например, карточные, рулетка, тир, крестики-нолики, «морской бой»; онлайновые обучающие программы, викторины, тесты, калькуляторы и т.п. Примеры такой анимации вы увидите на сайтах www.legus.ru/, www.flasher.ru/, www.avestadesign.ru/. Создается подобная анимация с помощью программы Macromedia Flash. К сожалению, для просмотра Flash-анимации вам, скорее всего, придется установить дополнительный подключаемый модуль (Plug-in) для вашего браузера. Именно по этой причине не имеет смысла создавать сайты, которые предназначены для широкого круга лиц. Так как многие люди просто не смогут увидеть Flash-анимацию, а установить дополнительный подключаемый модуль не захотят или просто не смогут.
Еще один способ создания анимации — посредством программирования на языках Java и JavaScript. Эти языки позволяют разрабатывать программы, встроенные в документы HTML и называемые апплетами, которые выполняются браузерами на компьютерах пользователей. И, конечно же, возможности Java и JavaScript значительно шире, чем подготовка анимационных картинок. Он позволяет создавать масштабные Интернет-приложения. Примеры Java-апплетов можно увидеть на сайтах http://reality.sgi.com/, www.bulletproof.com/. Создание анимации с помощью Java и JavaScript, также нельзя назвать подходящим для серьезных сайтов, так как пользователи очень часто отключают поддержку Java и JavaScript в своих браузерах по соображениям безопасности. Так как с помощью программ на указанных языках, можно скопировать или испортить файлы на вашем компьютере.
Учитывая все вышесказанное, можно сказать, что самый простой, надежный и эффективный способ разместить анимацию на своих Web-страницах — это использование формата GIF.

Контрольные вопросы

1.      Что такое Web-узел и Web-страница?
2.      Что представляет собой язык HTML?
3.      Что значит тэг? Какие бывают тэги? Порядок записи элементов тэгов.
4.      Какие обязательные элементы входят в структуру HTML-документа?
5.      Как определить цвет фона и цвет текста Web-страницы?
6.      Как определить уровень заголовков Web-страницы средствами языка HTML?
7.
Базовые команды HTML
Базовые команды HTML
В этом разделе рассматриваются некоторые основные команды HTML и объясняются шаги, необходимые для подготовки документа для просмотра через мир Широкая сеть (www) с помощью Netscape Navigator или Internet Explorer.
HTML использует теги для связи с клиентом (браузером), как отображать текст и изображения. Теги содержатся в < > символы. В большинстве случаев вы начинаете с начального тега, вставляйте слово или слова, которые будут затронуты этим тегом, и в В конце строки слова (слов) вы помещаете закрывающий тег.
Например, чтобы создать заголовок для документа, вы должны сделать следующее:
Мой первый HTML-документ
Закрывающий тег обычно содержит «/» перед директива, указывающая на прекращение действия.
HTML-теги не чувствительны к регистру, хотя URL-адреса, как правило, чувствительны к регистру. В большинстве случаев (за исключением предварительно отформатированного текста) HTML сворачивает множество пробелов в одно и не читает пустые строки. Однако, когда вы пишете свой текст, вы должны оставить несколько пустых строки между абзацами, чтобы редактировать исходный HTML-код документ проще.
HTML-тег
Хотя в настоящее время требуется не для всех клиентов, тег сигнализирует о точке, с которой текст должен начать интерпретироваться как HTML-код. Вероятно, неплохо было бы включить его во все свои документы сейчас, поэтому вам не нужно возвращаться к своим файлам и добавлять это позже.
Тег обычно помещается в первую строку ваш документ. В конце документа вы должны закрыть тег.
Головная бирка
Как и заголовок заметки, заголовок HTML-документа содержит особую информацию, например название.Глава документ разграничен тегами и соответственно.
Для целей этого класса только тег заголовка ниже, должен быть включен в заголовок документа. Типичная головная секция может выглядеть как
Мой первый HTML-документ
Заголовки
Тег заголовка позволяет указать Заголовок документа в окно вашего браузера. Когда люди создают горячие списки, это название что они видят в своем списке после добавления вашего документа.В формат:
Мой первый HTML-документ
Помните, заголовок обычно не появляется в документе сам, но в поле заголовка или в строке вверху окна.
Бирка на теле
Как и следовало ожидать, теги тела и определить начало и конец основной части вашего документа. Все ваш текст, изображения и ссылки будут в теле документа.
Тело должно начинаться после головы.Типичная страница может начать как
Мой первый HTML-документ
Заголовки
Есть до шести уровней заголовков, которые можно использовать в вашем документ, от h2 до h6. Заголовок 1 — это самый большой заголовок, и они становятся все меньше через заголовок 6. Ниже представлены все шесть заголовков и как они обычно появляются по отношению к одному Другая.

Это тег заголовка 1

Это тег заголовка 2

Это тег заголовка 2

Это тег заголовка 3

Это тег заголовка 3

Это тег заголовка 4

Это тег заголовка 4

Это тег заголовка 5

Это тег заголовка 5

Это тег заголовка 6

Это тег заголовка 6
Заголовки
, как вы заметили, различаются не только по размеру, но и полужирным шрифтом и вставлять пустую строку до и после них.Это важно использовать заголовки только для заголовков, а не только для текста полужирный (мы рассмотрим полужирный тег позже).
Пункты
В HTML тег абзаца
следует помещать в конец каждый абзац «нормального» текста (определение нормального поскольку с ним еще не связан тег).
вызывает разрыв строки и добавляет пробел в конце строка

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

это пример предварительно отформатированного текстовый тег
А вот как отображается:
это пример предварительно отформатированного текстовый тег
Жирный и курсив
Вы можете выделить текст, используя полужирный шрифт и курсив. теги или упор и сильные теги.
Также есть тег подчеркивания, но большинство людей не используют это, поскольку текст, на который есть ссылка, часто подчеркивается.Потенциал за путаницу и архаичность подчеркивания в целом сделайте это плохим маркером для выделения.
При использовании этих тегов вы обычно не можете (и, вероятно, должны нет) иметь текст, который выделен как полужирным, так и курсивным шрифтом; последний тег встречается обычно отображаемый тег. Например, если у вас был тег полужирным шрифтом, за которым сразу же следовал курсивный тег, отмеченное слово будет выделено курсивом.
Физические теги
Это тег жирным шрифтом .
Так выглядит полужирным шрифтом .
Это тег курсив .
Так выглядит курсивом .
Логические теги
Это сильно подчеркнуто ярлык.
Это сильно подчеркнутый тег .
Это тег выделенный .
Это выделенный тег .
Есть тонкое различие между вышеупомянутым «физическим» теги, которые просто изменяют отображаемый шрифт, и «логический» стили, которые используются (или в конечном итоге будут) для создания типов акцентировать внимание на конкретном клиенте (например, с помощью тега сделает текст красным). Хотя оба стиля подходят, имейте в виду, что различия в этих двух типах тегов могут быть более очевидными, если достижения в HTML.
Списки
В HTML есть простой способ пронумеровать, ненумеровать и списки определений.Кроме того, вы можете вкладывать списки в списки.
При использовании списков вы не можете контролировать количество места между номером маркера или списка HTML автоматически делает это для тебя. Вы также (пока) не контролируете, какой тип bullet будет использоваться, поскольку каждый браузер отличается.
Ненумерованные списки
Ненумерованные списки начинаются с тега
, за которыми следуют фактические элементы списка, отмеченные значком
тег.Список заканчивается закрывающим тегом
.
Например, вот ненумерованный список из трех пунктов:

элемент списка 1
элемент списка 2
элемент списка 3

Вот как будет отображаться этот список:
элемент списка 1
элемент списка 2
элемент списка 3
Нумерованные списки
Вот тот же список в формате нумерованного списка:

элемент списка 1
элемент списка 2
элемент списка 3

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

Это термин
Это определение
И еще одно определение
Другой термин
Другое определение

А вот как это будет отображаться
Это термин
Это определение.
И еще одно определение.
Другой термин
Другое определение
Вложенные списки
Наконец, вот вложенный список в ненумерованный список (мы мог просто иметь вложенный список внутри пронумерованного список).

элемент списка 1

вложенный элемент 1
вложенный элемент 2

элемент списка 2

вложенный элемент 1
вложенный элемент 2

элемент списка 3

вложенный элемент 1
вложенный элемент 2

Вот как будет отображаться этот список:
элемент списка 1
вложенный элемент 1
вложенный элемент 2
элемент списка 2
вложенный элемент 1
вложенный элемент 2
элемент списка 3
вложенный элемент 1
вложенный элемент 2
Цитата
Тег цитаты делает отступ для текста (как слева, так и справа) внутри тегов.Тег цитаты выглядит так:

...

и отображается так:
Текст в кавычках часто используется для отступа больших блоков текст, например цитаты. Текст будет с отступом до встречается конечный тег. Опять же, обратите внимание, что текст здесь с отступом на левом и правом полях.
Центр
Вы можете центрировать текст, изображения и заголовки с помощью центрального тега:
Это предложение по центру
Это предложение по центру.
Центральный тег автоматически вставляет разрыв строки после закрывающий центральный тег.
Горизонтальная линейка
Чтобы разделить разделы в документе, вы можете вставить тег горизонтальной линейки
. Горизонтальная линейка отображается как следует:
Адреса
Тег
обычно появляется в конце документ и чаще всего используется для обозначения информации на связавшись с автором или учреждением, предоставившим это Информация.Все, что содержится в адресном теге, отображается в курсив. Адресный тег — еще один пример логического тега, и хотя в настоящее время он ничего не делает, кроме отображения текста в курсивом, это может измениться по мере продвижения кода HTML.
Вот пример того, как может выглядеть адрес:
<адрес> Введение в HTML / Пэт Андрогет / [email protected]

И это будет выглядеть так:

Введение в HTML / Пэт Андрогет / Pat_Androget @ ncsu.edu
Комментарии
Можно включать комментарии в исходный HTML-документ. которые не отображаются при просмотре через браузер. Это самое полезно для предупреждений и специальных инструкций на будущее редакторы вашего документа.
Комментарии принимают форму:

Комментарий может даже разрывать строки

Зачеркнутый
Если хотите, есть зачеркнутый ярлык, отображает текст с зачеркиванием.
~~Зачеркнутый текст~~
отображается как
Это зачеркнутый текст
Специальные символы
Наконец, если вы часто используете символы, составляющие HTML теги (например, < > и &), или вы используете специальные символы не в стандарте ascii, вам придется использовать специальные теги. Вот коды:
& aacute; .... E & acirc; .... E & aelig; .... E &могила; .... E & amp; .... & &кольцо; .... E & atilde; .... E & auml; .... E & ccedil; .... E & eacute; .... E & ecirc; .... E & egrave; .... E & eth; .... E & euml; .... E & gt; ....> & iacute; .... E & icirc; .... E & igrave; .... E & iuml; .... E & lt; .... <& ntilde; .... E & oacute; .... E & ocirc; .... E & ograve; .... E & oslash; .... E & otilde; .... E & ouml; .... E & quot; .... "& szlig; .... & thorn; .... & uacute; .... E & ucirc; .... E & ugrave; .... E & uuml; .... E & yacute; .... & yuml; ....
Вернуться на Домой
HTML и CSS - W3C
HTML (гипертекст Язык разметки) и CSS (каскадные таблицы стилей) - это два основных технологий для построения сети страниц.HTML предоставляет структуру страницы, CSS - (визуальная и звуковая) макет, для разнообразие устройств. Наряду с графикой и скриптами, HTML и CSS являются основой для создания веб-страниц и Интернет Приложения. Узнайте больше ниже о:
Что такое HTML?
HTML - это язык для описания структуры сети страниц.HTML дает авторам возможность:
Публикуйте онлайн-документы с заголовками, текст, таблицы, списки, фотографии и т. д.
Получить онлайн-информацию через гипертекстовые ссылки, одним щелчком кнопка.
Дизайн бланков для проведения сделок с удаленными службами, для использования в поиск информации, изготовление бронирование, заказ продуктов и т. д.
Включите электронные таблицы, видеоклипы, аудиоклипы и другие приложения прямо в своих документах.
В HTML авторы описывают структуру страниц с разметкой . элемента языковой метки части содержания, такие как «абзац», «Список», «таблица» и т. Д.
Что такое XHTML?
XHTML - это вариант HTML, в котором используется синтаксис XML, расширяемый язык разметки.XHTML имеет все одинаковые элементы (для абзацев, и т. д.) как вариант HTML, но синтаксис немного отличается. Поскольку XHTML - это XML-приложение, вы можете использовать другой XML инструменты с ним (такие как XSLT, язык для преобразования содержимого XML).
Что такое CSS?
CSS - это язык для описания представления Веб-страницы, включая цвета, макет и шрифты.Это позволяет адаптировать презентацию к различным типам устройств, таким как большие экраны, маленькие экраны или принтеры. CSS не зависит от HTML и может использоваться с любой разметкой на основе XML язык. Отделение HTML от CSS упрощает обслуживание сайтов, делиться таблицы стилей на всех страницах и адаптировать страницы в разные среды. Это упомянуто как разделение структуры (или: содержание) из презентации.
Что такое веб-шрифты?
WebFonts - это технология, которая позволяет людям использовать шрифты по запросу через Интернет, не требуя установки в операционной системе.W3C имеет опыт загрузки шрифтов через HTML, CSS2 и SVG. До недавнего времени загружаемые шрифты не были распространены в Интернете из-за отсутствия совместимый формат шрифта. Компания WebFonts планирует решить эту проблему путем создания поддерживаемого отраслью открытого формата шрифтов для Интернета (называемого «WOFF»).
Примеры
Следующий очень простой пример часть HTML-документа показывает, как для создания ссылки в абзаце.Когда отображается на экране (или в речи синтезатор), текст ссылки будет окончательным отчет"; когда кто-то активирует ссылку, браузер получит ресурс идентифицировано «Http://www.example.com/report»:
Для получения дополнительной информации см. окончательный отчет .

Атрибут класса на начальный тег абзаца («
») может быть используется, среди прочего, для добавления стиля.Для например, выделить курсивом текст всех абзацы с классом moreinfo, один можно написать в CSS:
p.moreinfo {font-style: italic}
Поместив это правило в отдельный файл, стиль может быть общим для любого количества HTML-документы.
Дополнительная информация
Для получения дополнительной информации о HTML и CSS, см. руководства по HTML и CSS.
Для расширенных преобразований документов и макет за пределами CSS, см. XSLT & XSL-FO.
HTML | PyCharm
PyCharm обеспечивает мощную поддержку HTML, которая включает синтаксис и подсветку ошибок, форматирование в соответствии со стилем кода, проверку структуры, завершение кода, предварительный просмотр на лету во время сеанса отладки (Live Edit) или на специальной вкладке предварительного просмотра в редактор кода и многое другое.
Спецификация HTML настраивается с помощью предпочтения уровня языка HTML по умолчанию в разделе "Языки и платформы" | Страница "Схемы и DTD" в настройках IDE Ctrl + Alt + S . По умолчанию предполагается, что спецификация HTML 5.0 от W3C.
Создание файла HTML
В главном меню выберите, а затем выберите файл HTML из списка. PyCharm создает файл-заглушку на основе шаблона файла HTML и открывает его в редакторе.
Создание ссылок в файле HTML
Внутри тега

	Black = «#000000»		Green = «#008000»
	Silver = «#C0C0C0»		Lime = «#00FF00»
	Gray = «#808080»		Olive = «#808000»
	White = «#FFFFFF»		Yellow = «#FFFF00»
	Maroon = «#800000»		Navy = «#000080»
	Red = «#FF0000»		Blue = «#0000FF»
	Purple = «#800080»		Teal = «#008080»
	Fuchsia = «#FF00FF»		Aqua = «#00FFFF»