Основы HTML содержат основные правила языка HTML, описание структуры HTML-страницы, отношения в структуре HTML-документа между HTML-элементами.
HTML-документ - это обычный текстовый документ, может быть создан как в обычном текстовом редакторе (Блокнот) , так и в специализированном, с подсветкой кода (Notepad++, Visual Studio Code и т.п.) . HTML-документ имеет расширение.html .
HTML-документ состоит из дерева HTML-элементов и текста. Каждый элемент обозначается в исходном документе начальным (открывающим) и конечным (закрывающим) тегом (за редким исключением).
Начальный тег показывает, где начинается элемент, конечный - где заканчивается. Закрывающий тег образуется путем добавления слэша / перед именем тега: … . Между начальным и закрывающим тегами находится содержимое тега - контент.
Одиночные теги не могут хранить в себе содержимого напрямую, оно прописывается как значение атрибута, например, тег создаст кнопку с текстом Кнопка внутри.
Теги могут вкладываться друг в друга, например,
Текст
. При вложении следует соблюдать порядок их закрытия (принцип «матрёшки») , например, следующая запись будет неверной:Текст
.HTML-элементы могут иметь атрибуты (глобальные, применяемые для всех HTML-элементов, и собственные). Атрибуты прописываются в открывающем теге элемента и содержат имя и значение, указываемые в формате имя атрибута="значение" . Атрибуты позволяют изменять свойства и поведение элемента, для которого они заданы.
Каждому элементу можно присвоить несколько значений class и только одно значение id . Множественные значения class записываются через пробел, . Значения class и id должны состоять только из букв, цифр, дефисов и нижних подчеркиваний и должны начинаться только с букв или цифр.
Браузер просматривает (интерпретирует) HTML-документ, выстраивая его структуру (DOM) и отображая ее в соответствии с инструкциями, включенными в этот файл (таблицы стилей, скрипты). Если разметка правильная, то в окне браузера будет отображена HTML-страница, содержащая HTML-элементы - заголовки, таблицы, изображения и т.д.
Процесс интерпретации (парсинг) начинается прежде, чем веб-страница полностью загружена в браузер. Браузеры обрабатывают HTML-документы последовательно, с самого начала, при этом обрабатывая CSS и соотнося таблицы стилей с элементами страницы.
HTML-документ состоит из двух разделов - заголовка — между тегами … и содержательной части — между тегами … .
Структура веб-страницы 1. Структура HTML-документаЯзык HTML следует правилам, которые содержатся в файле объявления типа документа (Document Type Definition, или DTD) . DTD представляет собой XML-документ, определяющий, какие теги, атрибуты и их значения действительны для конкретного типа HTML. Для каждой версии HTML есть свой DTD.
DOCTYPE отвечает за корректное отображение веб-страницы браузером. DOCTYPE определяет не только версию HTML (например, html), но и соответствующий DTD-файл в Интернете.
...
Элементы, находящиеся внутри тега , образуют дерево документа, так называемую объектную модель документа, DOM (document object model) . При этом элемент является корневым элементом.
Рис. 1. Простейшая структура веб-страницы
Чтобы разобраться во взаимодействии элементов веб-страницы, необходимо рассмотреть так называемые «родственные отношения» между элементами. Отношения между множественными вложенными элементами подразделяются на родительские, дочерние и сестринские.
Предок - элемент, который заключает в себе другие элементы. На рисунке 1 предком для всех элементов является . В то же время элемент является предком для всех содержащихся в нем тегов: ,
, , и т.д.
Потомок - элемент, расположенный внутри одного или более типов элементов. Например, является потомком , а элемент
Является потомком одновременно для и .
Родительский элемент - элемент, связанный с другими элементами более низкого уровня, и находящийся на дереве выше их. На рисунке 1 и . Тег
Является родительским только для .
Дочерний элемент - элемент, непосредственно подчиненный другому элементу более высокого уровня. На рисунке 1 только элементы , ,
И являются дочерними по отношению к .
Сестринский элемент - элемент, имеющий общий родительский элемент с рассматриваемым, так называемые элементы одного уровня. На рисунке 1 и — элементы одного уровня, так же как и элементы , и
Являются между собой сестринскими.
1.1. Элемент 1.2. ЭлементРаздел ... содержит техническую информацию о странице: заголовок, описание, ключевые слова для поисковых машин, кодировку и т.д. Введенная в нем информация не отображается в окне браузера, однако содержит данные, которые указывают браузеру, как следует обрабатывать страницу.
1.2.1. ЭлементОбязательным тегом раздела является тег . Текст, размещенный внутри этого тега, отображается в строке заголовка веб-браузера. Длина заголовка должна быть не более 60 символов, чтобы полностью поместиться в заголовке. Текст заголовка должен содержать максимально полное описание содержимого веб-страницы.
1.2.2. ЭлементНеобязательным тегом раздела является одинарный тег . С его помощью можно задать описание содержимого страницы и ключевые слова для поисковых машин, автора HTML-документа и прочие свойства метаданных. Элемент может содержать несколько элементов , потому что в зависимости от используемых атрибутов они несут различную информацию.
Описание содержимого страницы и ключевые слова одновременно можно указывать на нескольких языках, например, на русском и английском:
С помощью тега можно запретить или разрешить индексацию веб-страницы поисковыми машинами:
Для автоматической перезагрузки страницы через заданный промежуток времени нужно воспользоваться значением refresh:
Страница будет перезагружена через 30 секунд. Чтобы перебросить посетителя на другую страницу, нужно указать URL-адрес в параметре url:
Содержимое
мета
-
тега
«title»< /title>
< /head>
Основное содержимое страницы< /body>
< /html>
Вот как, к примеру, бы мог выглядеть HTML-код мета-тега Description для ключевого слова “Туры в Одессу”:
Обратите внимание, что в этом описании повторяется ключевое слово “Туры в Одессу”, а также указывается на очевидные выгоды: клиент будет иметь возможность отдыхать, не беспокоясь о деталях поездки - вы будете заботиться о них.
Размещайте ваши самые важные ключевые слова и фразы в начале каждого мета-тега Description и старайтесь иметь различные описания для каждой страницы вашего сайта. Использование одних и тех же описаний в мета-теге Description на каждой странице еще хуже, чем вообще оставить их пустыми.
Помните, что не заполненный мета-тег Description может явиться источником серьезных проблем при определении рейтинга вашего сайта.
Мета-тег Description должен быть использован на каждой странице сайта, так как он остается полезным дополнением к уникальному контенту самой страницы. Мета-теги Description не должны повторять заголовок страницы, а должны содержать краткое описание темы, рассматриваемой на странице.
Всегда старайтесь, чтобы наиболее важные идеи, которые вы пытаетесь донести до пользователей, находились в начале описания и содержали ключевые слова , а также, чтобы описание точно отображало содержимое страницы.
Следует помнить, что каждая страница вашего сайта должна содержать свой уникальный и точный мета-тег Description , так как дублирование мета-тега Description на страницах сайта всегда оценивалось отрицательно поисковыми системами.
Как только ваш сайт полностью проиндексирован Google , вы можете проверить случаи дубликата мета-тегов в Google Webmaster tools , например.
Несмотря на то, что мета-тег Description не является одним из основных критериев при SEO , вы все равно должны уделять максимум внимания на качество содержания мета-тега Description . Вам необходимо составить одно или два предложения, так описывающих вашу страницу, что посетителям захочется зайти на ваш сайт, а не на сайт конкурентов.
Хорошо написанные и уникальные мета-теги Description на каждой странице вашего сайта будут способствовать увеличению количества кликов по вашей ссылке.
Рекомендации от Google по использованию мета-тега DescriptionМЕТА-ТЕГ Description |
Придумайте краткое описание для каждой страницы Метатег дает поисковой системе краткое описание содержимого страницы . Если в теге мы использовали одну фразу, то в мы уже можем написать пару предложений или небольшой параграф. В наборе инструментов для веб-мастеров Google есть удобный инструмент для анализа контента, который поможет вам подсказкой, если ваши метатеги слишком длинны/коротки или слишком часто повторяются (та же функция доступна для тегов ). Так же как и тег , метатег размещается внутри тега html-страницы. Значение метатега для оптимизации поиска Метатеги описания важны потому, что Google может использовать их при создании сниппетов к вашему сайту . Заметьте, мы говорим “может”, потому что Google может выбрать для сниппета другой подходящий текст с вашего сайта, если он более релевантен запросу пользователя. Так же Google может использовать описание вашего сайта из проекта Open Directory, если ваш сайт в него включен. Добавление метатегов поможет Google и в том случае, если поисковый робот не может самостоятельно найти подходящий текст для сниппета. В центральном Блоге для Веб-мастеров есть полезная статья об улучшении сниппетов с помощью метатегов . Слова в сниппете выделяются жирным, если они соответствуют поисковому запросу пользователя. Таким образом, пользователь получает представление о том, что ожидает его на вашей странице. |
ПРАКТИЧЕСКИЕ СОВЕТЫ |
Кратко и точно опишите содержание страницы Постарайтесь сделать описание страницы интересным и содержательным для пользователей, которые увидят его в качестве сниппета на странице поиска. Не советуем:
Создайте уникальное описание для каждой страницы Уникальное описание каждой страницы полезно как для поисковой системы, так и для пользователей: например, если в результатах поиска появятся несколько страниц вашего домена (в особенности при поиске с оператором site:). Если на вашем сайте тысячи и миллионы страниц, то проставить описания вручную чаще всего невозможно. В этом случае вы можете автоматически создать описание каждой страницы на основании ее содержимого. Не советуем: |
Мета-теги — это необязательные атрибуты, размещенные в заголовке страницы, между тегами и , которые никак не отображаются браузером (за исключением содержимого тега ). Мета-теги могут содержать описание html-страницы, ключевые слова к ней, информацию об авторе, управляющие команды для браузера и поисковых роботов, а также прочую служебную информацию, не предназначенную для посетителей. Мета-теги для сайта играют очень важную роль. Их добавление в html-документ могут существенно помочь сайту в его жизни.
Всегда применяйте только те мета-теги, которые реально нужны для работы веб-сайта. Не следует загромождать область лишними инструкциями, т.к. любая ошибка здесь может привести к печальным последствиям.
Функции мета-теговНа данный момент не существует их четкой стандартизации, однако функции мета-тегов достаточно разнообразны. Можно выделить несколько основных направлений использования мета-тегов:
- мета-теги могут идентифицировать авторство веб-документа, его адрес, частоту его обновлений;
- мета-теги используются поисковыми роботами для индексации и создания заголовков гипертекстовых документов;
- мета-теги влияют на режим отображения веб-страниц.
Мета-теги можно разделить на две основные группы — это NAME и HTTP-EQUIV . Группа NAME отвечает за текстовую информацию о веб-документе, его авторе, а также - формирует рекомендации для поисковых роботов. Мета-теги, относящиеся к группе HTTP-EQUIV фактически эквивалентны гипертекстовым заголовкам, они формируют заголовок веб-страницы и определяют его обработку, а также управляют действиями браузеров и используются для формирования информации, выдаваемой обычными заголовками.
Элемент meta принимает следующие атрибуты: content, http-equiv, name, charset и scheme.
Name | Имя метатега, также косвенно устанавливает его предназначение. Примеры: include, keywords, description, author, revised, generator и др. |
content | Устанавливает значение атрибута, заданного с помощью name или http-equiv. |
scheme (устарел) | Указывает полезную информацию о схеме или название самой схемы, которая должна быть использована для интерпретации значения свойства (то есть значения атрибута «content»). Не применяется в HTML5. |
charset | Новый атрибут, показывает кодировку документа в HTML5. Пример: |
http-equiv | Формирует заголовок страницы и определяет его обработку. Как правило, управляет действиями браузеров и используется для формирования информации, выдаваемой обычными заголовками. Например HTTP-EQUIV может использоваться для управления кэшированием, обновлением страницы, автоматической загрузки другой страницы. |
Keywords поисковые системы используют для того, чтобы определить релевантность страницы тому или иному запросу. При формировании данного значения необходимо использовать только те слова, которые обязательно встречаются в самом документе. Использование тех слов, которых нет на странице, не рекомендуется. Ключевые слова нужно добавлять по одному, через запятую, в единственном числе. Рекомендованное количество слов в «keywords» - не более десяти. Кроме того, выявлено, что разбивка этого значения на несколько строк влияет на оценку ссылки поисковыми машинами. Некоторые поисковые системы не индексируют сайты, в которых в значении «keywords» повторяется одно и то же слово для увеличения позиции в списке результатов.
Если раньше «keywords» имел определённую роль в ранжировании сайта, то в последнее время поисковые системы относятся к нему нейтрально.
HTML-код с «keywords» :
keywords Основное содержимое страницы
«description» (описание страницы)Description используется при создании краткого описания конкретной страницы Вашего сайта. Практически все поисковые системы учитывают его при индексации, а также при создании аннотации в выдаче по запросу. При отсутствии «description» поисковые системы выдают в аннотации первую строку документа или отрывок, содержащий ключевые слова. Отображается после ссылки при поиске страниц в поисковике, поэтому желательно не просто указывать краткое описание документа, но сделать его содержание привлекательным рекламным сообщением.
Таким образом, правильный description обязательно должен содержать ключевое слово, коротко и точно описывать то, о чём данная веб-страница. «Description» вместе с «title» образуют очень важную пару значений, от которых зависит то, перейдёт пользователь из поисковой выдачи на веб-страницу или нет! Поэтому «description» и «title» нужно прописывать для каждой веб-страницы!
HTML-код с «description» :
description Основное содержимое страницы
«Author» и «Copyright»Эти значения, как правило, не используются одновременно. Функция author и copyright - идентификация автора или принадлежности контента на странице. «Author» содержит имя автора веб-страницы, но в случае, если веб-сайт принадлежит какой-либо организации, целесообразнее использовать значение «Copyright».
HTML-код с «author» :
Примеры применения метатегов Основное содержимое страницы
«Robots»Robots - формирует информацию о гипертекстовых документах, которая поступает к роботам поисковых систем.
У «robots» могут быть следующие значения:
- index - страница должна быть проиндексирована;
- noindex - страница не индексируется;
- follow - гиперссылки на странице учитываются;
- nofollow - гиперссылки на странице не учитываются
- all - включает значения index и follow, включен по умолчанию;
- none - включает значения noindex и nofollow.
HTML-код с «robots» :
Примеры применения метатегов Основное содержимое страницы
Группа значений атрибута HTTP-EQUIV «Content-Type»Content-Type определяет тип документа и его кодировку.
HTML-код с «Content-Type» :
Примеры применения метатегов Основное содержимое страницы
В HTML5 указание кодировки упрощено:
«refresh»
Refresh - задержка времени (в секундах) перед тем, как браузер обновит страницу. Кроме того, может использоваться автоматическая загрузка другой html-страницы с заданным адресом (url).
HTML-код с «refresh» :
Основное содержимое страницы
Браузер поймет эту запись, как через 5 секунд загрузить новую страницу, указанную в параметре URL, в данном случае это переход на сайт сайт. Значение «refresh» позволяет создавать перенаправление (редирект) на другой сайт. Если URL не указан, произойдет автоматическое обновление текущей страницы через количество секунд, заданных в атрибуте content .
Обратите внимание, что кавычки в указании URL-адреса перед http не ставятся. |
HTML-код с «content-language» :
Язык документа Основное содержимое страницы
В HTML5 указание языка упрощено:
В этом уроке перечислены не все метатеги, которые вы можете встретить при изучении веб-ремесла. Остальные специфичны и вы познакомитесь с ними в дальнейшем при изучении наших уроков. Из всех же вышеперечисленных к использованию на каждой странице вашего сайта рекомендуются метатеги и их атрибуты приведенные в следующем примере:
Пример HTML: Попробуй сам Заголовок страницы Основное содержимое страницы Задачи Итоговое заданиеНа этом уроке вы познакомились с наиболее важными метатегами основным предназначением которых является предоставление структурированных метаданных о веб-странице.
Пришло время повторить изученное и выполнить четыре несложных задания:
Ключевые слова- Реши сам »
С помощью одинарного тега задайте ключевые слова: "HTML,CSS,JavaScript" для текущей веб-страницы.
Ключевые слова
Ключевые слова
Метатеги (англ. meta tags) - предназначены для предоставления структурированных метаданных о веб-странице.
Функция - это особым образом написанный и оформленный фрагмент кода JavaScript, который можно вызвать из любого Web-сценария на данной Web-странице (повторно используемый код, как его часто называют). Так что, если какой-то фрагмент кода встречается в нескольких местах нашего Web-сценария, лучше всего оформить его в виде функции.
Собственно код, ради которого и была создана функция , называется телом функции. Каждая функция, кроме того, должна иметь уникальное имя, по которому к ней можно будет обратиться. Функция также может принимать один или несколько параметров и возвращать результат, который можно использовать в выражениях.
Объявление функцийПрежде чем функция будет использована где-то в Web-сценарии, ее нужно объявить. Функцию объявляют с помощью ключевого слова function:
function ([])
Имя функции, как уже говорилось, должно быть уникально в пределах Web-страницы. Для имен функций действуют те же правила, что и для имен переменных.
Список параметров представляет собой набор переменных, в которые при вызове функции будут помещены значения переданных ей параметров. (О вызове функций будет рассказано далее.) Мы можем придумать для этих переменных любые имена - все равно они будут использованы только внутри тела функции. Это так называемые формальные параметры функции.
Список параметров функции помещают в круглые скобки и ставят после ее имени; сами параметры отделяют друг от друга запятыми. Если функция не требует параметров, следует указать пустые скобки - это обязательно.
В пределах тела функции над принятыми ею параметрами (если они есть) и другими данными выполняются некоторые действия и, возможно, вырабатывается результат. Оператор возврата return возвращает результат из функции в выражение, из которого она была вызвана:
return ;
Здесь переменная должна содержать возвращаемое значение, а выражение должно его вычислять.
Пример объявления функции:
function divide(a, b) {
var c;
c = a / b;
return c;
}
Данная функция принимает два параметра - a и b, - после чего делит a на b и возвращает частное от этого деления.
Эту функцию можно записать компактнее:
function divide(a, b) {
return a / b;
}
Или даже так, в одну строку:
function divide(a, b) { return a / b; }
JavaScript позволяет нам создавать так называемые необязательные параметры функций - параметры, которые при вызове можно не указывать, после чего они примут некоторое значение по умолчанию. Вот пример функции с необязательным параметром b, имеющим значение по умолчанию 2:
function divide(a, b) {
if (typeof(b) == "undefined") b = 2;
return a / b;
}
Понятно, что мы должны как-то выяснить, был ли при вызове функции указан параметр b. Для этого мы используем оператор получения типа typeof (он был описан ранее). Если параметр b не был указан, данный оператор вернет строку "undefined"; тогда мы создадим переменную с именем b, как и у необязательного параметра, и присвоим ей число 2 - значение этого параметра по умолчанию, - которое и будет использовано в теле функции. Если возвращенное оператором значение иное, значит, параметр b был указан при вызове, и мы используем значение, которое было передано с ним.
Функции и переменные. Локальные переменныеОбъявленные ранее функции создают внутри своего тела собственные переменные. Это так называемые локальные переменные. Такие переменные доступны только внутри тела функции, в котором они объявлены. При завершении выполнения функции все объявленные в ней локальные переменные уничтожаются.
Разумеется, любая функция может обращаться к любой переменной, объявленной вне ее тела (переменной уровня Web-страницы). При этом нужно помнить об одной вещи. Если существуют две переменные с одинаковыми именами, одна - уровня Web-страницы, другая - локальная, то при обращении по этому имени будет получен доступ к локальной переменной. Одноименная переменная уровня Web-страницы будет "замаскирована" своей локальной "тезкой".
Вызов функцийПосле объявления функции ее можно вызвать из любого Web-сценария, присутствующего на этой же Web-странице. Формат вызова функции:
([])
Здесь указывается имя нужной функции и в круглых скобках перечисляются фактические параметры, над которыми нужно выполнить соответствующие действия. Функция вернет результат, который можно присвоить переменной или использовать в выражении.
ВНИМАНИЕ!
При вызове функции подставляйте именно фактические параметры, а не формальные, указанные в объявлении функции.
Вот пример вызова объявленной нами ранее функции divide:
d = divide(3, 2);
Здесь мы подставили в выражение вызова функции фактические параметры - константы 3 и 2.
А здесь мы выполняем вызов функции с переменными в качестве фактических параметров:
s = 4 * divide(x, r) + y;
Если функция имеет необязательные параметры и нас удовлетворяют их значения по умолчанию, мы можем при вызове не указывать эти параметры, все или некоторые из них. Например, функцию divide со вторым необязательным параметром мы можем вызвать так:
s = divide(4);
Тогда в переменной s окажется число 2 - результат деления 4 (значение первого параметра) на 2 (значение второго, необязательного, параметра по умолчанию).
Если функция не возвращает результат, то ее вызывают так:
initVars(1, 2, 3, 6);
Более того, так можно вызвать и функцию, возвращающую результат, который в этом случае будет отброшен. Такой способ вызова может быть полезен, если результат, возвращаемый функцией, не нужен для работы Web-сценария.
Если функция не принимает параметров, при ее вызове все равно нужно указать пустые скобки, иначе возникнет ошибка выполнения Web-сценария:
s = computeValue();
Функции могут вызывать друг друга. Вот пример:
function cmp(c, d, e) {
var f;
f = divide(c, d) + e;
return f;
}
Здесь мы использовали в функции cmp вызов объявленной ранее функции divide.
Присваивание функций. Функциональный тип данныхJavaScript позволяет выполнять над функциями один фокус - присваивать функции переменным.
Пример:
var someFunc;
someFunc = cmp;
Здесь мы присвоили переменной someFunc объявленную ранее функцию cmp. Заметим, что в этом случае справа от оператора присваивания указывают только имя функции без скобок и параметров.
Впоследствии мы можем вызывать данную функцию, обратившись к переменной, которой она была присвоена:
c = someFunc(1, 2, 3);
Здесь мы вызвали функцию cmp через переменную someFunc.
Переменная, которой была присвоена функция, хранит данные, относящиеся к функциональному типу. Это еще один тип данных, поддерживаемый JavaScript.
А можно сделать и так:
var someFunc = function(c, d, e) {
var f;
f = divide(c, d) + e;
return f;
}
Здесь мы объявили функцию и сразу же присвоили ее переменной. Как видим, имени объявляемой функции мы не указали - в данном случае оно не нужно.
А еще JavaScript позволяет нам указать функцию в качестве параметра другой функции. Для примера давайте рассмотрим фрагмент JavaScript-кода нашего второго Web-сценария:
ceLinks.on("mouseover", function(e, t) {
Ext.get(t).addClass("hovered");
});
Здесь второй параметр функции on (вообще-то, это не функция
, а метод объекта, но об этом потом) - другая функция, объявленная там же. Эта функция принимает два параметра и содержит одно выражение.
В следующих главах, изучая библиотеку Ext Core, мы будем часто сталкиваться с функциями , которые присваиваются переменным и передаются в качестве параметра другим функциям. Настолько часто, что скоро привыкнем к этому.
Без преувеличения можно сказать, что получение информации посредством Интернет-страниц(WEB-pages,html-pages) наиболее популярен.Для создания подобных документов необходимо иметь хотя бы общее представление о структуре html - файла.HTML (HyperText Makeup Language - язык создания гипертекстовых документов) - стандарный сервис сети Интернет, принятый WWW- консорциумом (W3C).На сегодняшний день последней является 4-я версия стандарта(подробнее - http://www.w3c.org/),переработанная и до полненая по сравнению с версией 3.2
Данный документ не является ни переводом какого-либо стандарта, ни сопутствующим комментарием, его цель - предоставление общих знаний о формате HTML и путях его создания.
2.1 Что такое HTML ?
На самом деле,если вы
откроете файл с расширением htm (или html) в любом текстовом редакторе, вы
увидите,что это не что иное, как... обычный текст, правда "испорченный"
какими-то словами в угловых скобках.Эти "ненужные" слова и представляют
собой средства разметки текста, которые понимает программа, работающая с
html-файлами(такую программу называют браузер).Похожий принцип построения
докуметов не нов, и встречается,например, в текстовом процессоре TeX.
То есть html - это обычный текст (информация) плюс управляющие элем
енты - тэги (удобное представление этой самой информации).
Одсюда
следует, что для того, чтобы создать гипертекст,нужно всего лишь знать
как, куда и в каком количестве "вносить" эти управляющие элементы.
2.2 Тэги.
Тэги - (от англ. tag) это средство,
позволяюшее браузеру предоста вить имеющуюся у вас информацию в виде,
удобном для восприятия, пои ска, чтения.Это в своем роде язык
программирования, определяющий,как будет выглядеть на экране следующая
строка, что нужно выделить, а что - наоборот - столь очевидно,что нет
необходимости это подчеркивать.
Тэгом считается определенное выражение,
помещенное в скобки вида . Весьма условно тэги можно разделить на
граничные и унарные.Унарные тэги представляют собой очевидные операции,
предписывающие браузеру совершить определенное действие по постижению
данного тэга при обра ботке html - документа.Пример - наиболее часто
употребляемый тэг
- переход на другую строку, весь следующий за
ним гипертекст браузер будет представлять, начиная с новой строки.Унарные
тэги не относятся к определенным участкам текста,а,скорее всего, к всей
последующей части документа.С граничными тегами сложнее, но надо
учитывать, что их много больше, нежели унарных.Граничные тэги определяют,
как будет выглядеть на экране пользователя часть текста,определеная этими
элементами, причем в начальном тэге можно указывать различные
параметры,опреде ленные данному тэгу, в конечном тэге эти параметры
присутствовать не должны(браузером они игнорируются).
- Здесь
- a - управляющее слово, показывающие, что текст вплоть до тега ,будет являться гипертекстовой ссылкой (то есть указнием браузеру просмотреть определенный html - документ при совершении управляющего действия (шелчка мыши) над "ограниченным" текстом)
- href="..." - параметр, определяющий,какой документ будет просмотрен (это может быть как файл на локальной или удаленной машинах,так и просто IP-адрес удаленной(с условием,что эта машина предоставляет http - сервис))
Некоторые параметры определены по умолчанию браузером, некоторые- пользователем браузера,но есть и такие,определять которые необходимо при создании страницы(пример - тотже параметр href тэга ).
Из всего вышесказанного следует, что,зная наиболее употребляемые тэги и их параметры, любой пользователь легко может редактировать и создавать гипертекст.При этом необходимо учитывать, что тэги могут включать в себя другие тэги, а так же необходимо иметь представление о структуре html - документов.
2.3 Структура HTML - документов. Структура гипертекстовых файлов черезвычайно проста.HTML-документ должен начинаться тэгом и заканчиваться .Информация вне этих тэгов игнорируется,либо выдается в нелицеприятном виде. Помимо этого все, огражденное тегами и делится на две части:
- заголовок
(меньшая часть)
Ограничивается тэгами и .Содежит, как правило мета-информацию,то есть дополнительные данные о странице, и заголовок страницы,выносимый как правило в заголовок окна браузера(в оконной графической системе).
Рассматривать представление мета-информации в данном тексте не имеет смысла,поскольку она не играет никакой роли при визуализации страницы.Заголовок определяется тэгами и ,эго присутствие необязательно,но желательно.Тэги и параметров не имеют.Эта часть документа может отсутствовать.
- основная часть документа
(тело)
Ограничивается тэгами и .Определяет то,что выводится в главном окне браузера.Здесь сосредотачивается вся несомая страницей информация.Так же может отсутствовать при использовании фреймов.- Тэг имеет следующие (необязательные) параметры:
- background="img.gif" - на задний план документа помещается изображение из файла img.gif
- bgcolor="RED" - цвет заднего плана, если преведущий параметр не определен(о представлении цвета в HTML смотрите следующую часть главы)
- text="BLACK" - цвет текста документа
- link="RED" - цвет гиперссылок документа
- vlink="WHITE" - цвет гиперссылок,уже посещенных пользователем
и другие.
Заголовок . . Тело документа. .
Области и не пересекаются.Любая информация вне них,но внутри -области инорируется, если не несет с собой управляющий характер(например, является java-скриптом).2.4 Представление цвета в HTML. Цвет в гипердокументах представляется в виде трех двухбайтных составляющих, записанных в шестнадцатиричной системе счисления.Каждая сотавляющаая определяет количество базисного цвета (по системе RGB) в данном.То есть вы можете в одном из параметров тэга вместо "WHITE" указать "#ffffff", где # указывает,что следующее число шестнадцатиричное, а каждая из световых компонент (напомню, здесь используется аддитивная модель цветопередачи) имеет значение ff, то есть участвует в формировании цвета полностью.Соответствено базисные цвета могут быть представлены: #ff0000 RED красный #00ff00 GREEN зеленй #0000ff BLUE синий Наиболее часто используемые сочетания трех компонент занесены в таблицу, имеющуюся в любом справочнике по HTML.Каждая из комбинаций имеет определенное название, распознаваемое браузером.Именно в таком виде определялись цвета в примере с тэгом .
2.5 Основные тэги HTML. В этой части главы будут кратко описаны наиболее часто встречаемые тэги гипертекстового языка.Более подробно они описаны в спецификации и разного рода справочной и учебной литературе.
- Тэги, оределяющие отображение текста
- размер шрифта - определяет следующий до закрывающего тэга текст как заголовок первого уровня (размер букв - максимально допустимый) - .. - .. размер букв изменяется пропорционально - .. в сторону допустимого минимума - .. - размер букв -минимально допустимый - максимально допустимый шрифт - минимально допустимый шрифт (Границы допустимости шрифтов задаются браузером, используя среднее значение, определяемое,как правило, пользователем)
- вид надписи - (italic
) наклонный шрифт
- (bold
) шрифт с выделением толщиной символов
- (underline
) подчеркнутый текст
- (teletype) a-la телетайпное сообщение
- мигающая надпись
Форматированный вывод текста (широко использует MS Word 8)
Кроме того существует тэг, определяющий тип шрифта, размер и цвет -- где
face - тип шрифта (не стоит увлекаться экзотическими шрифтами, поскольку они могут отсутствовать в системе клиента)
size - размер (варьируется от 1 до 6) в относительных единицах.Его также можно задавать относительно,например: size=+1 (увеличить текущее логическое значение на 1)
color - задает цвет шрифта. - форматирование текста (и других элементов) - выравнивание по центру - выравнивание по левой границе - выравнивание по правой границе
- Теги,отвечающие за формирование списков -
-
- - Эти два тэга определяют ограничиваемую область как
список с соответствующим отступом от левой границы
документа
-
- - определяет следующую информацию как новый элемент списка.
Выделяется различными фигурками (пунктами)
Списки могут быть вложенными, то есть элементом одного из списков может быть другой список. - Тэги общего характера
- -
Вставка в документ графической информации.(Злоупотребление этим
тэгом снижает посещаемость страницы!)
- Параметры:
- src="имя-файла" - указание, какой файл будет включен. Современные нетекстовые браузеры опрерируют изображениями в форматах GIF89, JPEG, animated GIF, реже - PNG и XPM.
- alt="текстовой-аналог" - применяется в случае, если у клиента отключена загрузка графических изображений.
- width - Ширина изображения в пикселах (может не соответствовать реальному).
- height - Высота изображения в пикселах.
- - разделяющая части документа линия.Параметр width определяет длину как в абсолютных(пикселах), так и в относительных единицах(процентах).
- тэг начала новой строки.- code>.
- - тэг гипертекстовых
ссылок.Может адресовать документы в:
- глобальной сети
Параметр href содержит полный (с адресои ЭВМ, содержащий данный файл) путь и имя файла. - файл на данной машине
(необязательно html-документ)
Параметр href содержит путь к файлу относительно текущего каталога и имя файла. - метку в текущем документе
Параметр href содержит символ # и имя метки.Например, для метки 001 ссылка выглядит как .Метки задаются тем же тэгом, но с другим параметром , где name - имя метки (# - не используется!).Примет для 001 -
- глобальной сети
- -
Вставка в документ графической информации.(Злоупотребление этим
тэгом снижает посещаемость страницы!)
2.6 Работа с таблицами в HTML. Таблицы в HTML - это один из мощных инструментов представления информа ции.Они описываются набором тегов, почти каждый из которых имеет свои параметры.Рассмотрим основные:
- объявление таблицы и определение некоторых параметров
bgcolor - цвет фона таблицы
width - ширина таблицы в абсолютных и относительных единицах
border - ширина рамки таблицы (в пикселах)
cellpadding - отступ от границ при визуализации табличного контента (в пикселах)
cellspacing - промежуток между ячейками таблицы (в пикселах)- - заголовок таблицы.Как правило, применяется после объявления таблицы
- - заголовок каждого столбца.
- объявление строковых элементов таблицы.Используется в паре с тэгом , определяющим вертикальныеразделяющие линии при визуализации таблицы.То есть область, ограничиваемая тэгом включает в себя одну или несколько областей, ограниченых тегом , определяющим, что будет находится в каждой ячейке на данной строке. Пример: HTML - решение: Нужно построить таблицу: 1 1 3 1 1 32 2 3 - Последние три тэга имеют ряд параметров:
- colspan=.. - "растянуть" данную ячейку в ширину на указанное целое число ячеек. (неприменимо к tr)
- rowspan=.. - аналогично, но действие происходит по вертикали.
- bgcolor=.. - задание цвета фона для каждой ячейки
2.7 Фрэймы. Фрэймы - это окна независимого просмотра различных html - документов. Иногда бывает очень удобно организовать навигацию по странице в виде меню в отдельном фрейме, и основного окна, где будет представлятся вся информация, определяемая действиями пользователя в области меню.Здесь окно нужно понимать как часть рабочей области браузера, а не как отде льное от нее окно в среде Windows или X11 (хотя при помощи JavaScripts возможно и такое).Поясню действие фреймов на примере:
Создадим 2 фрэйма: меню и информационное окно.
Основной html-файл будет выглядеть так:index.htm
- - определяет следующую информацию как новый элемент списка.
Выделяется различными фигурками (пунктами)