Списки

Думаю Вам не нужно объяснять что такое список, я прав? Замечательно! Перейдём тогда сразу к делу. Тег <ul> устанавливает начало маркированного списка, и как Вы, наверное, уже догадались, тег </ul> – его конец. Что значит маркированный? Это значит что перед каждым элементом списка располагается маркер, он же буллит, – типографский знак, используемый для выделения элементов списка. Каждый элемент такого списка заключен между тегами <li> и </li>. У данного тега есть один собственный атрибут type, который может принимать 3 значения square (квадрат), disc (диск), circle (кольцо). По умолчанию для элемент списка устанавливается тип disc. Применение атрибута type для тега <li> позволяет установить тип для каждого из элементов списка в отдельности, для того, чтобы применить тип для всего списка, атрибут type нужно использовать для тега <ul>.
Рассмотрим код простого маркированного списка:

Который выглядит следующим образом:

• Первый элемент списка
• Второй элемент списка

Также в HTML существует такое понятие, как нумерованный список, который устанавливается с помощью тега <ol>. У данного тега есть три собственных атрибута:

• type – Устанавливает вид маркера списка.
• reversed – Нумерация в списке становится в обратном порядке (3,2,1).
• start – Число, с которого будет начинаться нумерованный список.

Атрибут type для тега <ol> может принимать следующие значения: A (заглавные латинские буквы), a (строчные латинские буквы), I (заглавные римские цифры), i (строчные римские цифры), 1 (арабские цифры). По умолчанию значение равно 1, т.е. арабские цифры. Элемент нумерованного списка располагается между тегами <li> и </li>, как и в случае с маркированным списком.
Код простого нумерованного списка:

1. Первый
2. Второй
3. Третий

На самом деле, списки. Применяются не только при выводе списка, как может показаться на первый взгляд. Зачастую меню сайта также выводят при помощи списка, при выводе рубрик на блогах также используют списки. Список может отображаться как вертикально, так и горизонтально. Но во втором случае силой одного HTML не обойтись. Список может быть как с маркером, так и без. Для этого на помощь приходит CSS (Cascading Style Sheets — каскадные таблицы стилей). Поэтому, дорогие читатели, пришло время, когда мы с Вами должны окунуться в изучение спецификаций CSS.
Ну что же, поздравляю! Теперь Вы знаете, что такое списки и как их применять на деле.

А теперь я постараюсь убедить Вас, в том, что CSS крайне необходим. Для этого нужно познакомится с неприметным на первый взгляд тегом <div>, который является блочным элементом и предназначен для выделения фрагмента документа с целью изменения вида содержимого. Во второй лекции, я говорил Вам про то, что можно верстать сайт таблицами, так вот, можно, но не нужно! Дело в том, что среди верстальщиков показателем мастерства является блочная вёрстка. Вы можете встретить высказывания “да таблицами я хоть черта сверстаю”, да, это так. Но это говорят в основном те, кто не смог освоить CSS, т.к. вид блока <div> управляется при помощи стилей. Но Вы ведь не такие, Вы лучше, и я это знаю!

“А как же таблицы?” – спросите Вы. Таблицы таблицами, они по прежнему имееют место в вёрстке, ведь согласитесь, использовать блоки для вывода таблицы успеваемости студентов, нелогично. Используя CSS и блочную вёрстку, Вы уменьшите вес страницы сайта, тем самым увеличив скорость загрузки Вашего сайта.
И так если Вы ещё не решились изучать CSS – вот мой последний аргумент: предположим, что сайт – это квартира, HTML – это стены, благодаря которым у Вас получаются комнаты, а CSS – это двери, обои, краска, картины, мебель, ковры – т.е. то, что придаёт Вашей квартире уникальности! Хотите чтобы Ваш сайт запомнился Вашим пользователям – сделайте его уникальным, и в этом Вам поможет CSS.

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

Вы только начинали работать на компьютере? Возникает много вопросов? Тогда советую посетить блог Pk-prosto.ru, который поможет ускорить Ваше обучение компьютеру. Вы быстро научитесь работать с WebMoney, самостоятельно создавать загрузочный диск и многое другое.

Сообщение HTML с нуля. Лекция 4 появились сначала на Блог Stafox'a.

Что такое формы?

Вы наверняка не раз встречали на сайтах поле поиска, так вот поиск – это форма, у которой один элемент. Формой называется то, что находится между тегом <form> и </form>. Форма служит для обмена информацией между пользователем и сервером. У тега <form> есть свои атрибуты:

• accept-charset – Устанавливает кодировку, в которой сервер может принимать и обрабатывать данные.
• action – Адрес программы или документа, который обрабатывает данные формы.
• autocomplete – Включает автозаполнение полей формы.
• enctype – Способ кодирования данных формы.
• method – Метод протокола HTTP.
• name – Имя формы.
• novalidate – Отменяет встроенную проверку данных формы на корректность ввода.
• target – Имя окна или фрейма, куда обработчик будет загружать возвращаемый результат.

Но форма не будет формой, если у неё нет хотя бы одного поля и кнопки, посредством которой  введённые  данные будут отправлены на сервер. Когда мы говорим “отправлены на сервер” – подразумевается страница-обработчик, на которой выполняются раздличные действия над полученной информацией. Для того, чтобы указать, какая страница будет обрабатывать данные нашей формы, используется атрибут action.
Следующий атрибут, который мы должны указать – это method. Он отвечает за то, в каком виде будут предоставленны данные странице-обработчику. Может принимать два значения GET и POST. Я обычно использую метод POST. Но подробнее об этом мы поговорим, когда начнём учить PHP с нуля.

Что внутри формы?

Сейчас давайте разберёмся с содержимым, которое расположено между внутри формы. Помимо обычных html-тегов (br, label, table, p, span, a, div) можно встретить следующие теги: <input>, <textarea>, и <select>. Давайте поговорим о них подробнее. Начнём с <textarea>.

Поле <textarea> представляет собой элемент формы для создания области, в которую можно вводить несколько строк текста. В отличие от тега <input> в текстовом поле допустимо делать переносы строк, они сохраняются при отправке данных на сервер. Между тегами <textarea> и </textarea> можно поместить любой текст, который будет отображаться внутри поля. У <textarea> 13 атрибутов:

• accesskey – Переход к полю с помощью сочетания клавиш.
• autofocus – Автоматическое получение фокуса.
• cols – Ширина поля в символах.
• disabled – Блокирует доступ и изменение элемента.
• form – Связывает текстовое поле с формой по её идентификатору.
• maxlength – Максимальное число введенных символов.
• name – Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.
• placeholder – Указывает замещающийся текст.
• readonly – Устанавливает, что поле не может изменяться пользователем.
• required – Обязательное для заполнения поле.
• rows – Высота поля в строках текста.
• tabindex – Порядок перехода между элементами при нажатии на клавишу Tab.
• wrap – Параметры переноса строк.

Теперь поговорим о теге <input>. Он имеет много атрибутов, но мы начнём с самого главного – с атрибута type, который имеет следующие значения.

Тип	Описание	Вид
button	Кнопка.
checkbox	Флажки. Позволяют выбрать более одного варианта из предложенных.	Пиво Чай Кофе
file	Поле для ввода имени файла, который пересылается на сервер.
hidden	Скрытое поле. Оно никак не отображается на веб-странице.
image	Поле с изображением. При нажатии на рисунок данные формы отправляются на сервер.
password	Обычное текстовое поле, но отличается от него тем, что все символы показываются звездочками. Предназначено для того, чтобы никто не подглядел вводимый пароль.
radio	Переключатели. Используются, когда следует выбрать один вариант из нескольких предложенных.	Пиво Чай Кофе
reset	Кнопка для возвращения данных формы в первоначальное значение.
submit	Кнопка для отправки данных формы на сервер.
text	Текстовое поле. Предназначено для ввода символов с помощью клавиатуры.

Вот список остальных атрибутов:

• accept – Устанавливает фильтр на типы файлов, которые вы можете отправить через поле загрузки файлов.
• accesskey – Переход к элементу с помощью комбинации клавиш.
• align –  Определяет выравнивание изображения.
• alt – Альтернативный текст для кнопки с изображением.
• autocomplete – Включает или отключает автозаполнение.
• border – Толщина рамки вокруг изображения.
• checked – Предварительно активированный переключатель или флажок.
• disabled – Блокирует доступ и изменение элемента.
• form – Связывает поле с формой по её идентификатору.
• formaction – Определяет адрес обработчика формы.
• formenctype – Устанавливает способ кодирования данных формы при их отправке на сервер.
• formmethod – Сообщает браузеру каким методом следует передавать данные формы на сервер.
• formnovalidate – Отменяет встроенную проверку данных на корректность.
• formtarget – Определяет окно или фрейм в которое будет загружаться результат, возвращаемый обработчиком формы.
• list – Указывает на список вариантов, которые можно выбирать при вводе текста.
• max – Верхнее значение для ввода числа или даты.
• maxlength – Максимальное количество символов разрешенных в тексте.
• min – Нижнее значение для ввода числа или даты.
• multiple – Позволяет загрузить несколько файлов одновременно.
• name – Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.
• pattern – Устанавливает шаблон ввода.
• placeholder – Выводит подсказывающий текст.
• readonly – Устанавливает, что поле не может изменяться пользователем.
• required – Обязательное для заполнения поле.
• size – Ширина текстового поля.
• src – Адрес графического файла для поля с изображением.
• step – Шаг приращения для числовых полей.
• tabindex – Определяет порядок перехода между элементами с помощью клавиши Tab.
• type – Сообщает браузеру, к какому типу относится элемент формы.
• value – Значение элемента.

Ещё один тег, который можно встретить в форме – <select>. Тег <select> позволяет создать элемент интерфейса в виде раскрывающегося списка, а также список с одним или множественным выбором, как показано далее. Конечный вид зависит от использования атрибута size тега <select>, который устанавливает высоту списка. Ширина списка определяется самым широким текстом, указанным в теге <option>, а также может изменяться с помощью стилей. Каждый пункт создается с помощью тега <option>, который должен быть вложен в контейнер <select>.

У тега <select> есть свои атрибуты:

• accesskey – Позволяет перейти к списку с помощью некоторого сочетания клавиш.
• autofocus – Устанавливает, что список получает фокус после загрузки страницы.
• disabled – Блокирует доступ и изменение элемента.
• form – Связывает список с формой.
• multiple – Позволяет одновременно выбирать сразу несколько элементов списка.
• name – Имя элемента для отправки на сервер или обращения через скрипты.
• required – Список обязателен для выбора перед отправкой формы.
• size – Количество отображаемых строк списка.
• tabindex – Определяет последовательность перехода между элементами при нажатии на клавишу Tab

В свою очередь тег <option> тоже имеет свои атрибуты:

• disabled – Заблокировать для доступа элемент списка.
• label – Указание метки пункта списка.
• selected – Заранее устанавливает определенный пункт списка выделенным.
• value – Значение пункта списка, которое будет отправлено на сервер или прочитано с помощью скриптов.

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

Что бы всё стало предельно ясно, вот код, в котором описана большая форма:

Визуальный пример по этой ссылке

При написании статьи некоторое описание тегов было взято с htmlbook.ru

Сообщение HTML с нуля. Лекция 3 появились сначала на Блог Stafox'a.

Здравствуйте дорогие читатели. Как я и обещал в предыдущей лекции сегодня расскажу о теге <body>, о всевозможных манипуляциях с изображениями и о работе с таблицами.

Что скрывает в себе тег body?

Тег <body> помимо своей основной функции, также применяется для определения цветов ссылок и текста на веб-странице.

Подобные действия в HTML 4 осуждаются и взамен для указания цветовой схемы рекомендуется использовать стили, применяя их к селектору BODY. Однако со стилями мы познакомимся позже.

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

• alink – Устанавливает цвет активной ссылки.
• background – Задает фоновый рисунок на веб-странице.
• bgcolor – Цвет фона веб-страницы.
• bgproperties – Определяет, прокручивать фон совместно с текстом или нет.
• bottommargin – Отступ от нижнего края окна браузера до контента.
• leftmargin – Отступ по горизонтали от левого края окна браузера до контента.
• link – Цвет ссылок на веб-странице.
• rightmargin – Отступ от правого края окна браузера до контента.
• scroll – Устанавливает, отображать полосы прокрутки или нет.
• text – Цвет текста в документе.
• topmargin – Отступ от верхнего края окна браузера до контента.
• vlink – Цвет посещенных ссылок.

Рассмотрим как это выглядит на примере.

Как вы заметили, цвет указывается в непревычной для вас форме, в данном примере цвет указан в шестнадцатиричном значении. На начальном этапе вместо использования таких страшных обозначений цвета (#FF9900, #336699, #FFFFFF) можно ограничится названием цвета на английском языке (black, brown, red, darkred, yellow, green, blue, white и т.д.). Однако рано или поздно вам придётся впустить в свою жизнь обозначение цветов в HEX. А может вам больше понравится CMYK или HSV. Для того чтобы определится что вам больше по душе предлагаю заглянуть в wiki. А я в свою очередь хочу поделиться с вами программой ColorPix, которая поможет вам узнать код любого понравившегося вам цвета.

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

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

Как вы видите, применён ещё один атрибут –  bgproperties, он может принимать только значение fixed, это означает, что фон будет зафиксирован, и прокручиваться будет только контент.

Манипуляции с изображениями

Просматривая разные сайты, вы часто встречаете на страницах изображения, и наверняка вопрос “Как вставить картинку на сайт?” мучает вас ещё с того момента, как вы узнали, как создать ссылку.

Для того чтобы вставить изображение используется тег <img>. Этот тег имеет единственный обязательный атрибут src, который определяет адрес файла с картинкой. Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив тег <img> в контейнер <a>. При этом вокруг изображения в некоторых браузерах отображается рамка, которую можно убрать, добавив атрибут border=”0″ в тег <img>. Также изображение можно маштабировать, указав в атрибутах width и height, желаемый размер. Атрибут alt содержит описание изображения, которое выводится до загрузки изображения. Для того чтобы задать позицию изображения (слева, справа, по центру) используется атрибут align, который может принимать пять значений: bottom, left, middle, right, top.

• bottom – Выравнивание нижней границы изображения по окружающему тексту.
• left – Выравнивает изображение по левому краю окна.
• middle – Выравнивание середины изображения по базовой линии текущей строки.
• right – Выравнивает изображение по правому краю окна.
• top – Верхняя граница изображения выравнивается по самому высокому элементу текущей строки.

Вот полный список атрибутов тега <img>:

• align – Определяет как рисунок будет выравниваться по краю и способ обтекания текстом.
• alt – Альтернативный текст для изображения.
• border – Толщина рамки вокруг изображения.
• height – Высота изображения.
• hspace – Горизонтальный отступ от изображения до окружающего контента.
• ismap – Говорит браузеру, что картинка является серверной картой-изображением.
• longdesc – Указывает адрес документа, где содержится аннотация к картинке.
• src – Путь к графическому файлу.
• vspace – Вертикальный отступ от изображения до окружающего контента.
• width – Ширина изображения.
• usemap – Ссылка на тег <map>, содержащий координаты для клиентской карты-изображения.

А теперь взяглянем на код примера размещения изображения-ссылки и маштабированного изображения:

А вот непосредственно сам пример. Самостоятельно попробуйте осуществить выравнивание изображения.

Работа с таблицами

Я думаю слово “таблица” вам прекрасно знакомо. Вероятно, вы сталкивались с таблицами ранее: в учебниках, в газетах, в Microsoft Word. Таблицы также присутствуют и в HTML. Они играют здесь двойную роль: с одной стороны, это теги для создания таблиц с информацией, с другой стороны таблицы могут служить для разметки страницы на сектора. Ниже приведу рисунок, чтобы всё стало ясно.

Элемент <table> служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов <tr> и <td>. Также вы можете встретить тег <th> – аналогичен тегу <td>, используется для обозначения заголовочных ячеек.

Приведу атрибуты тега <table>, которые могут пригодится вам при создании таблицы:

• ALIGN – Задает выравнивание таблицы по краю окна браузера. Допустимые значения: left — выравнивание таблицы по левому краю, center — по центру и right — по правому краю.
• BGCOLOR – Устанавливает цвет фона таблицы.
• BORDER – Устанавливает толщину рамки в пикселах. По умолчанию рамка изображается трехмерной, но если используется параметр bordercolor тега <TABLE>, то вид рамки меняется. Когда в теге <TABLE> используется параметр border без аргументов (<table border>), то браузер отображает рамку толщиной один пиксел.
• BORDERCOLOR – Устанавливает цвет рамки таблицы. Рамка обычно рисуется как трехмерная, добавление параметров bordercolor и border к тегу <TABLE> создают однотонную линию.
• CELLPADDING – Определяет расстояние между границей ячейки и ее содержимым. Этот параметр добавляет пустое пространство к ячейке, увеличивая тем самым ее размеры. Без параметра cellpadding текст в таблице «налипает» на рамку, снижая тем самым его восприятие. Добавление же cellpadding позволяет улучшить читабельность текста. При отсутствии границ особого значения этот параметр не имеет, но может помочь, когда требуется установить пустой промежуток между ячейками.
• CELLSPACING – Задает расстояние между внешними границами ячеек. Если установлен параметр border, толщина границы принимается в расчет и входит в общее значение.
• HEIGHT – Устанавливает высоту таблицы. В спецификации HTML 4 этого параметра нет, однако браузеры в большинстве случаев понимают его, если он установлен у тега <TABLE>. Если высота таблицы не указана, то берется суммарное значение параметра height у тега <TD>, в противном случае высота вычисляется на основе содержимого таблицы.
• WIDTH – Задает ширину таблицы. Если общая ширина содержимого превышает указанную ширину таблицы, то браузер будет пытаться «втиснуться» в заданные размеры за счет форматирования текста. В случае, когда это невозможно, например, в таблице находятся изображения, параметр width будет проигнорирован, и новая ширина таблицы будет вычислена на основе ее содержимого. Как и в случае с высотой, если ширина явно не указана, то она будет вычисляться на основе содержимого таблицы.

У тега <td> также есть свои атрибуты:

• ALIGN – Задает выравнивание содержимого ячейки по горизонтали. Возможные значения: left — выравнивание по левому краю, center — по центру и right — по правому краю.
• BGCOLOR – Устанавливает цвет фона ячейки. Используя этот параметр совместно с атрибутом bgcolor тега <TABLE> можно получить разнообразные эффекты в таблице.
• BORDERCOLOR – Устанавливает цвет рамки вокруг ячейки. Рамка показывается, когда установлен параметр border с ненулевым значением у тега <TABLE>.
• COLSPAN – Устанавливает число ячеек, которые должны быть объединены по горизонтали. Этот параметр имеет смысл для таблиц, состоящих из нескольких строк. Например, как для таблицы, показанной ниже, где используется горизонтальное объединение ячеек.
• HEIGHT – Браузер сам устанавливает высоту таблицы и ее ячеек исходя из их содержимого. Однако при использовании параметра height высота ячеек будет изменена. Здесь возможны два варианта. Если значение height меньше, чем содержимое ячейки, то этот параметр будет проигнорирован. В случае, когда установлена высота ячейки, превышающая ее содержимое, добавляется пустое пространство по вертикали.
• NOWRAP – Добавление параметра nowrap к тегу <TD> заставляет текст внутри ячейки отображаться без переносов, одной сплошной строкой. Неправильное использование этого атрибута может привести к тому, что таблица будет слишком широкой и не поместится целиком на веб-страницу. Как следствие, появится горизонтальная полоса прокрутки. В любом случае, пользоваться подобной таблицей будет неудобно, из-за чего применение параметра nowrap осуждается в спецификации HTML 4.
• ROWSPAN – Устанавливает число ячеек, которые должны быть объединены по вертикали. Этот параметр имеет смысл для таблиц, состоящих из нескольких строк. Например, как для таблицы, показанной ниже, где применяется вертикальное объединение ячеек.
• VALIGN – Устанавливает вертикальное выравнивание содержимого ячейки. По умолчанию контент ячейки располагается по ее вертикали в центре. Возможные значения: top — выравнивание по верхнему краю строки, middle — выравнивание по середине, bottom — выравнивание по нижнему краю, baseline — выравнивание по базовой линии, при этом происходит привязка содержимого ячейки к одной линии.
• WIDTH – Задает ширину ячейки. Суммарное значение ширины всех ячеек может превышать общую ширину таблицы только в том случае, если содержимое ячейки превышает указанную ширину.

Рассмотрим первый случай, когда нам необходимо создать таблицу, в которой некоторые ячейки будут объединены:

Демонстрация примера тут.

Второй вариант применения таблиц – это разбиение страниц на блоки. В настоящее время данный способ не очень приветствуется, в большинстве случаев – критикуется. Мнение большинства совпадает с моим. Два года я верстал с помощью таблиц и меня всё устраивало. Однако попробывав блочную вёрстку, я полностью отказался от табличной. Блочная вёрстка это совсем другой уровень, но об этом позже. Но для расширения знаний, будет полезно научиться табличной вёрстке. Да и будет с чем сравнивать в будущем.

А вот и результат.

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

При написании данной статьи описание некоторых тегов было взято c htmlbook.ru/html/

Сообщение HTML с нуля. Лекция 2 появились сначала на Блог Stafox'a.

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

• из чего состоит структура html-документа
• как создать ссылку
• какие существуют теги для выделения текста

Из чего состоит структура HTML-документа

Свои первые знания о языке html я черпал из уроков Алленовой Натальи. И в одном из своих уроков она показала хороший наглядный легкозапоминающийся пример структуры html-документа. Я попробую изобразить нечто похожее:

Вот как выглядит код самой простой html-страницы:

Для того, чтобы создать свою html страницу, нужно вставить вышеуказанный код в блокнот, нажать Файл → Сохранить как… В поле “имя файла” указать ваше_название страницы.html, а в поле “тип файла” указать Все файлы. Нажать Сохранить.

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

Тег <html> сообщает о том, что начинается структура html-документа, </html> – что заканчивается. Между тегами <head></head> хранится в большей части информация для браузера и поисковых систем. В тегах <title></title> содержится заголовок нашей страницы. Тег <body> говорит о том, что далее идёт информация предназначенная для пользователя, </body> же естесственно говорит о том, что информация для пользователя заканчивается.

Теперь немного поясню. Все теги (тэг – элемент языка разметки гипертекста) делятся на два типа “одиночные” и “закрывающиеся”. Кроме того теги заключаются в следующие символы < и >,  именно они отличают тег <html> от обычного текста html. Рассмотрим несколько самых простых “одиночных” тегов:

<br> – тег, который отвечает за перенос на новую строку, в том месте, где установлен данный тег. Рассмотрим код с использованием этого тега.

Результат можно посмотреть здесь.

<hr> – тег, который рисует горизонатльную линию. Этот тег относится к блочным элементам, линия всегда начинается с новой строки. Имеет 5 атрибутов:

• align – Определяет выравнивание линии. Может принимать значение left, center, right.
• color – Задаёт цвет линии.
• noshade – Рисует линию без трехмерных эффектов.
• size – Задаёт толщину линии.
• width – Задаёт ширину линии.

Код с использованием тега <hr>:

Визуальный пример находится здесь.

Ещё один “одиночный” тег – это <meta>. Данный тег спользуются для хранения информации предназначенной для браузеров и поисковых систем. Поисковые системы обращаются к метатегам для получения описания сайта, ключевых слов и других данных. Разрешено использовать неограниченное число метатегов, все они должны находится между <head> и </head>. Параметры любого метатега имеют вид «имя=значение», который определяется ключевыми словами content, name или http-equiv. Т.к. метатеги предназначены для машин, никакого визуального изменения они не вносят, поэтому я приведу лишь исходный код:

Эта строка говорит о том, что создатель страницы считает, что на странице используется кодировка UTF-8. В HTML5 всё стало проще, для того, чтобы указать кодировку, достаточно лишь следующей строки:

Cуществуют и другие одиночные теги (<area>, <base>, <br>, <col>, <command>, <embed>, <hr>, <img>, <input>, <keygen>, <link>, <meta>, <param>, <source>, <track>, <wbr>), но с ними я познакомлю вас чуть позже.

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

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

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

Как создать ссылку

Следующее, о чём я должен рассказать, это то как устанавливать ссылку. Ведь сайт это множество перелинкованных между собой страниц. Ссылка устанавливается с помощью “закрывающегося” тега <a>, у которого есть 12 атрибутов:

• accesskey – активирует ссылку с помощью комбинации клавиш.
• charset – указывает кодировку текста, на который ведет ссылка. *
• coords – устанавливает координаты активной области. *
• href – задает адрес документа, на который следует перейти.
• hreflang – идентифицирует язык текста по ссылке.
• name – устанавливает имя якоря внутри документа (в HTML5 следует использовать id). *
• rel – отношения между ссылаемым и текущим документами.
• rev – отношения между текущим и ссылаемым документами. *
• shape – задает форму активной области ссылки для изображений. *
• tabindex – определяет последовательность перехода между ссылками при нажатии на кнопку <Tab>.
• target – тип окна, в котором браузер будет загружать документ. Может принимать значения

_blank – загружает страницу в новом окне браузера.
_self – загружает страницу в текущем окне (значение по умолчанию).
_parent – загружает страницу во фрейме-родителе, если фреймов нет, то этот параметр работает как _self.
_top – отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то этот параметр работает как _self.

• title – добавляет всплывающую подсказку к тексту ссылки.

* – в HTML5 является устаревшим атрибутом

Рассмотрим код страницы с простой текстовой ссылкой:

Результат можно просмотреть кликнув по этой ссылке.

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

Теги для выделения текста

Существует несколько способов выделить текст на странице. Сделать это можно с помощью стилей, а можно с помощью тегов. Нас (пока) интересует второй вариант.

<b></b> – устанавливает жирное начертание шрифта.

<i></i> – устанавливает курсивное начертание шрифта.

<u></u> – добавляет подчеркивание к тексту.

<em></em> – предназначен для акцентирования текста. Браузеры отображают такой текст курсивным начертанием.

<strike></strike> – перечёркивает текст. Данный тег исключён из HTML5 вместо него рекомендуется использовать <s></s>

<tt></tt> – отображает текст моноширинным текстом. Исключён из HTML5.

 – отображает шрифт в виде верхнего индекса. Шрифт при этом отображается выше базовой линии текста и уменьшенного размера.

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

<strong></strong> – предназначен для акцентирования текста. Браузеры отображают такой текст жирным начертанием.

<small></small> – уменьшает размер шрифта на единицу по сравнению с обычным текстом. В HTML размер шрифта измеряется в условных единицах от 1 до 7, средний размер текста, используемый по умолчанию, принят 3. Тег <small> уменьшает текст на одну условную единицу. Допускается применение вложенных тегов <small>, при этом размер шрифта будет меньше на 1 с каждым вложенным уровнем, но не может быть меньше, чем 1.

<big></big> – увеличивает размер шрифта на единицу по сравнению с обычным текстом. В HTML размер шрифта измеряется в условных единицах от 1 до 7, средний размер текста, используемый по умолчанию, принят 3. Таким образом, добавление тега <big> увеличивает текст на одну условную единицу. Допускается применение вложенных тегов <big>, при этом размер шрифта будет больше с каждым уровнем.

<q></q> – используется для выделения в тексте цитат. Содержимое контейнера автоматически отображается в браузере в кавычках.

<blockquote></blockquote> – предназначен для выделения длинных цитат внутри документа. Текст, обозначенный этим тегом, традиционно отображается как выровненный блок с отступами слева и справа (примерно по 40 пикселов), а также с отбивкой сверху и снизу.

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

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

<h1>..<h6></h6>..</h1> – HTML предлагает шесть заголовков разного уровня, которые показывают относительную важность секции, расположенной после заголовка. Так, тег <h1> представляет собой наиболее важный заголовок первого уровня, а тег <h6> служит для обозначения заголовка шестого уровня и является наименее значительным. По умолчанию, заголовок первого уровня отображается самым крупным шрифтом жирного начертания, заголовки последующего уровня по размеру меньше. Теги <h1>,…,<h6> относятся к блочным элементам, они всегда начинаются с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него добавляется пустое пространство. Тег имеет атрибут align, который определяет выравнивание заголовка, может принимать значения left – выравнивание заголовка по левому краю, center –  выравнивание по центру, right – выравнивание по правому краю, justify – выравнивание по ширине (одновременно по правому и левому краю). Это значение работает только для заголовка, длина которого более, чем одна строка.

<font></font> – представляет собой контейнер для изменения характеристик шрифта, таких как размер, цвет и гарнитура. Хотя этот тег до сих пор поддерживается всеми браузерами, он считается устаревшим и от его использования рекомендуется отказаться в пользу стилей. Тег имеет 3 атрибута: color – устанавливает цвет текста, face – определяет гарнитуру шрифта, size – задает размер шрифта в условных единицах.

<cite></cite> – помечает текст как цитату или сноску на другой материал. Такое выделение удобно для изменения стиля текста через CSS, а также применяется для разделения кода HTML на структурные элементы. Браузеры обычно устанавливают текст внутри контейнера <cite> курсивом.

<abbr></abbr> – указывает, что последовательность символов является аббревиатурой. С помощью атрибута title дается расшифровка сокращения, что позволяет понимать аббревиатуру тем людям, которые с ней не знакомы. Кроме того, поисковые системы индексируют полнотекстовый вариант сокращения, что может использоваться для повышения рейтинга документа.

По умолчанию, текст заключенный в контейнере <abbr> подчеркивается пунктирной линией.

Ниже приведу код, в котором я использовал все эти теги:

</p>HTML is the language for describing the structure of Web pages. HTML gives authors the means to:</p>
<blockquote>
Publish online documents with headings, text, tables, lists, photos, etc.<br>
Retrieve online information via hypertext links, at the click of a button.<br>
Design forms for conducting transactions with remote services, for use in searching for information, making reservations, ordering products, etc. <br>
Include spread-sheets, video clips, sound clips, and other applications directly in their documents. <br>
</blockquote>
With HTML, authors describe the structure of pages using markup. The elements of the language label pieces of content such as <i>“paragraph,” “list,” “table,” and so on</i>.
<h2>What is XHTML?</h2>

<p> XHTML is a <u>variant of HTML</u> that uses the syntax of XML, the Extensible Markup Language. XHTML has all the same elements (for paragraphs, etc.) as the HTML variant, but the syntax is slightly different. Because XHTML is an XML application, you can use other XML ^tools with it (such as XSLT, a language for transforming XML content).</p>
<h3>What is CSS?</h3>

<p>CSS is the language for describing the presentation of Web pages, including colors, layout, and fonts. It allows to adapt the presentation to different types of devices, such as large screens, small screens, or printers. <big>CSS</big> is <small>independent</small> of HTML and can be used with any XML-based markup <s>язык</s> language. The separation of HTML from CSS makes it easier to maintain sites, share style sheets across pages, and tailor pages to different environments. This is referred to as the separation of structure (or: content) from presentation. </p>
<h4>What is WebFonts?</h4>

<q><cite>WebFonts</cite> is a technology that enables people to use fonts on demand over the Web without requiring installation in the operating system. W3C has experience in downloadable fonts through <strong>HTML, CSS2, and SVG</strong>. Until recently, downloadable fonts have not been common on the Web due to the lack of an interoperable font format. The WebFonts effort plans to address that through the creation of an industry-supported, open font format _{for the Web} <font face="Tahoma" color="#336699" size="5">(called "WOFF")</font>.</q>
</body>
</html>
[/php]

А вот и визуальный результат.

Лекция подошла к концу, надеюсь приобретённые знания вам пригодятся! В следующей лекции я расскажу вам о том, что в себе хранит тег <body>, научимся выполнять всевозможные манипуляции с изображениями, и познакомимся с таблицами.

При написании данной статьи описание некоторых тегов было взято отсюда http://htmlbook.ru/html/

Сообщение HTML с нуля. Лекция 1 появились сначала на Блог Stafox'a.