Заглавная страница Избранные статьи Случайная статья Познавательные статьи Новые добавления Обратная связь FAQ Написать работу КАТЕГОРИИ:  Археология Биология Генетика География Информатика История Логика Маркетинг Математика Менеджмент Механика Педагогика Религия Социология Технологии Физика Философия Финансы Химия ЭкологияТОП 10 на сайте Приготовление дезинфицирующих растворов различной концентрацииТехника нижней прямой подачи мяча. Франко-прусская война (причины и последствия) Организация работы процедурного кабинета Смысловое и механическое запоминание, их место и роль в усвоении знаний Коммуникативные барьеры и пути их преодоления Обработка изделий медицинского назначения многократного применения Образцы текста публицистического стиля Четыре типа изменения баланса Задачи с ответами для Всероссийской олимпиады по праву 
Мы поможем в написании ваших работ! ЗНАЕТЕ ЛИ ВЫ?
Влияние общества на человека
Приготовление дезинфицирующих растворов различной концентрации Практические работы по географии для 6 класса Организация работы процедурного кабинета Изменения в неживой природе осенью Уборка процедурного кабинета Сольфеджио. Все правила по сольфеджио Балочные системы. Определение реакций опор и моментов защемления |
Базовые элементы языка и структура HTML документаСодержание книги
Поиск на нашем сайте
Базовым элементом языка разметки гипертекста является - ТЕГ (дескриптор, маркер). Тег всегда заключен между скобками < > и имеет следующий вид: <ТЕГ атрибут 1=ЗНАЧЕНИЕ... атрибут N=ЗНАЧЕНИЕ> Теги бывают одиночными и контейнерными. Контейнером называется пара: открывающий <ТЕГ> и закрывающий </ТЕГ>. <ТЕГ> Контейнер </ТЕГ> Открывающий тег служит для указания программе-броузеру начала какого-либо объекта или задания свойств объектов помещенных в контейнер. Закрывающий тег служит для указания программе-броузеру о конце объекта или окончания применения свойств, заданных в открывающем теге. Атрибуты тега задают значения свойств данного объекта или объектов помещенных в контейнер. Значения свойств, содержащие пробелы, берутся в кавычки, в остальных случаях кавычки можно опустить. HTML документ представляет собой обычный текстовый файл, содержащий маркированный тегами форматирования текст, а так же заданные специальными тегами ссылки на графические и прочие файлы мультимедиа, ссылки на другие документы HTML и ресурсы Internet. Документ HTML начинается открывающим тегом <HTML> и заканчивается закрывающим тегом </HTML>. Между данной парой контейнерных тегов располагаются две другие основные части HTML документа: заголовок заключенный в контейнер <HEAD>...</HEAD> и тело документа в контейнере <BODY>...</BODY>. Таким образом структура простого HTML документа выглядит примерно так: Структура HTML документа <HTML> - Начало документа <HEAD> <BODY> </HTML> - Конец документа
Основы HTML Ссылки в HTML документах Как было сказано выше, HTML-документ это обычный текстовый файл. Гипертекстовым его делают содержащиеся в нем ссылки на другие документы и ресурсы Internet. Рассмотрим, что такое ссылка, какие бывают типы ссылок и как их задать в документе. Ссылка состоит из двух компонентов: так называемого якоря (anchor) или элемента привязки и URL (Universal Resurse Locator) связанного с ним ресурса Internet. Относительный адрес это адрес ресурса относительно компьютера и каталога загрузки HTML-документа, если иной базовый адрес не указан в заголовке документа, тег <BASE> (См. раздел 2.3.). Относительный адрес задается в сокращенной форме (путь/файл). Например, если ваша начальная страница index.htm загружена броузером c httр://www.site.ru, то использование в ней относительной ссылки resume.htm означает загрузку httр://www.site.ru/resume.htm. Абсолютные адреса используются для привязки к ресурсам других узлов Internet и задаются полным форматом записи (httр://компьютер/путь/файл). Например:httр://www.sitename.ru/filename.htm. Что такое ссылка теперь вроде ясно. А какие они бывают и как задаются в HTML-документе? <A HREF="Ресурс" TARGET="имя окна" TITLE="Подсказка">Элемент - якорь</A> Атрибут HREF в открывающем теге задает ресурс который необходимо обработать броузеру при выборе на Web-странице, соответствующего ему якоря. Рассмотрим наиболее часто используемые ресурсы: <A HREF="URL"> - ссылки на другие документы HTML и файлы. Атрибут TITLE задает текстовую подсказку в стиле ToolTip, отображаемую броузером при позиционировании указателя-курсора в зоне элемента-якоря. Заключеный в контейнер элемент-якорь выделяется броузером особым образом (текст-цветом и подчеркиванием, графика-рамкой) при отображении на Web-странице. Можно задать свой способ выделения элемента-якоря в атрибутах тега <BODY> - тела документа (См. раздел 2.4.). <A HREF="httр://www.site.ru" TITLE="Переход на www.site.ru"> Заходите к нам на огонек </A> - абсолютная ссылка: переход на сайт www.site.ru, текстовый якорь - Заходите к нам на огонек, с подсказкой. <A HREF="/VW/cars.htm"> Модельный ряд VW </A> - относительная ссылка: открытие станицы cars.htm в подразделе VW относительно раздела основной страницы, текстовый якорь - Модельный ряд VW, без подсказки. <A HREF="mailtо:webmaster@freemail.ru">Связь с вебмастером</A> - загрузка интерфейса к почтовой системе пользователя с автозаполнением реквизитов получателя, текстовый якорь - Связь с вебмастером, без подсказки. <A HREF="ftр://ftp.site.ru/soft/driver.zip">Новый драйвер здесь</A> - доступ на FTP-сервере к файлу драйвера, текстовый якорь- Новый драйвер здесь, без подсказки. При использовании графического файла в качестве элемента-якоря необходимо вместо текста в контейнере <A>...</A> использовать конструкцию <IMG SRC="файл"> (См. раздел 3.2.). Например: <A HREF="/VW/passat.htm"><IMG SRC="/VW/CARS/passat.gif"></A> - относительная ссылка: открытие станицы passat.htm в подразделе VW относительно раздела основной страницы, графический якорь-passat.gif, без подсказки. Кроме вышеперечисленных ссылок существуют еще внутренние ссылки или закладки. Этот тип ссылок используется для удобства перемещения в пределах документа. Для использования в HTML-документе закладок необходимо задать имена тех областей документа, на которые необходимо ссылаться. Имя закладки в теле документа задается использованием атрибута NAME=ИмяЗакладки в контейнере <A>...</A>. Причем в данном случае текст, заключенный в контейнер, не является элементом-якорем (но выводится). Например для перехода на начало документа необходимо поместить там закладку: <A NAME=DocBegin>Начало документа<A> Внутренняя ссылка на закладку в документе имеет следующий формат: <A HREF="URL документа#ИМЯ">Элемент - якорь</A> Например для размещения в документе ссылки на внутреннюю закладку (содержащуюся в данном документе) необходимо применить: <A HREF="#DocBegin">Перейти к началу документа</A> А для размещения в документе ссылки на внешнюю закладку (например содержащуюся в файле Doc1.htm) необходимо применить: <A HREF="Doc1.htm#DocBegin">Перейти к началу документа Doc1.htm</A> В заключении надо описать еще один важный атрибут тега ссылки, это атрибут TARGET. Данный атрибут задает окно либо фрейм (См. раздел 4.2.) назначения для документа заданного атрибутом HREF. По умочанию загрузка происходит в текущее окно броузера, но можно указать имя нового или существующего окна, а так же одно из предопределенных имен объектов броузера: _blank, _self, _parent, _top. Например: <A HREF="sample/sample.htm" TARGET="new_win">Пример</A> - загрузка документа sample.htm в новое окно броузера с именем "new_win". Вот пожалуй и все что я могу вам рассказать о ссылках. Едем дальше? Заголовок HTML документа Заголовок является необязательной частью структуры HTML документа и служит для определения служебной информации и названия документа. В случае использования в документе контейнера заголовка <HEAD>...</HEAD> единственным обязательным его элементом является контейнер <TITLE>...</TITLE>, который задает имя документа. Именно это имя пользователь видит в заголовке окна броузера при просмотре Web-страниц в Internet. Все остальные элементы заголовка не отображаются броузером и служат для определения различных свойств документа, его взаимосвязи с другими Web-страницами и служебной информации для внешних программ. Попробуем разработать типовой заголовок для ваших документов на примере Web-страницы о автомобилях. Внимание! В этом и в дальнейших примерах используются выдуманные e-mail адреса! Пример 1. Формирование заголовка документа. [просмотр примера в окне] <HTML> Разложим теперь по полочкам все то, что мы написали в примере. Первый и обязательный элемент заголовка это контейнер <TITLE>...</TITLE>, задающий имя документа, отображаемое в шапке окна броузера. Далее следует последовательность <META> тегов, задающих так называемую мета (или внешнюю) информацию о документе. У <META> тегов наиболее часто используются следующие атрибуты:
В нашем примере первый <META HTTP-EQUIV="Content-Type"> тег описывает тип и кодировку содержимого документа.
Таким образом, тег <META NAME="Keywords" LANG=ru CONTENT=" "> задает список ключевых слов, содержащихся в документе, а тег <META NAME="Description" CONTENT=" "> является словесным описанием содержимого документа. Далее следует тег <BASE HREF="URL">, задающий базовый адрес данного документа. Это необходимо для поддержания работоспособности относительных ссылок, в случае миграции документа в Internet или изменения каталога его загрузки. Как уже говорилось выше, при отсутствии тега <BASE> относительные ссылки в документе определяются от адреса его загрузки. Завершает наш заголовок тег <LINK>. Данный тег не отображает информацию в окне броузера и предназначен для формирования различных типов отношений между документами и другими объектами. Данные отношения помогают разработчикам ориентироваться в структуре сложного документа и используются поисковыми системами. Рассмотрим, какие бывают отношения и как они задаются. У тега <LINK> наиболее часто используются следующие атрибуты:
Данный тег довольно редко используется, как правило его применение ограничивается привязкой листа стилей (stylesheet) к документу (См. раздел 3.6.), но в HTML-документах со сложной иерархической структурой иногда встречается множество тегов <LINK> с довольно запутанным синтаксисом. Наиболее понятные из них связи типа: следующий/предыдущий (next/prev), документ/автор (author), документ/оглавление (index). В нашем примере тег <LINK> использован для формирования связи документ/автор. Вот еще несколько примеров использования отношений в документах: <LINK REL=Prev HREF="chapter7.htm"> - означает что документ chapter7.htm предыдущий по отношению к документу (chapter8.htm) содержащему заданную данным тегом связь; <LINK REL=Next HREF="chapter9.htm"> - означает что документ chapter9.htm следующий по отношению к документу (chapter8.htm) содержащему заданную данным тегом связь; <LINK REV=Next HREF="chapter9.htm"> - обратное отношение, которое говорит о том, что документ (chapter10.htm), содержащий заданную данным тегом связь, является следующим для chapter9.htm; <LINK REL=stylesheet TYPE="text/css" MEDIA=print HREF="/style/PrnStyle.css"> - означает, что для печати текущего документа использовать лист стилей изstyle/PrnStyle.css; Ну вот и все. От заголовка переходим к телу. Тело HTML документа Тело HTML документа располагается после заголовка и ограничено контейнером <BODY>...</BODY>. Содержимое тела документа отображается в окне Web-броузера и состоит из маркированного тегами форматирования текста, таблиц, графических и прочих мультимедиа-элементов, ссылок на другие ресурсы и различных органов управления. В приведенном в предыдущей главе примере (Пример №1), тело документа состоит из одной единственной строки " В разработке ". Так как в контейнере <BODY> нами не были заданы атрибуты внешнего вида документа, то данный текст будет отображен в окне броузера в соответствии с пользовательскими установками. Для обеспечения соответствия между внешним видом документа в броузере пользователя и дизайном разработчика необходимо использовать специальные атрибуты тега <BODY>:
Для определения цветов в HTML применяются шестнадцатеричные коды RGB компонентов, но стандартные 16 цветов можно задавать по их общепринятым названиям:
Рассмотрим пример HTML документа, в котором вышеперечисленные атрибуты используются для определения внешнего вида элементов тела документа. Пример 2. Формирование тела документа. [просмотр примера в окне] <HTML> Не будем разбирать, что означают неизвестные нам пока теги (хотя просмотрев пример в окне, не трудно догадаться), но как задавать внешний вид элементов тела документа мы уже знаем. Зададимся теперь вопросами форматирования разнородного содержимого тела документа и перейдем к третьей главе. Основы форматирования Для придания презентабельного вида вашим документам в HTML есть масса средств, но как бы вы хорошо их не использовали, главное это: чувство стиля, наличие художественного воображения и умеренное использование всяческих "прибамбасов", замедляющих загрузку документов и раздражающих посетителей (не у всех хороший модем или провайдер). Форматирование текста Данные текстового формата по прежнему являются доминирующими в HTML документах (если конечно ваш сайт не относится к категории ХХХ или посвящен изобразительному искусству). Для форматирования текстовых данных в HTML применяются следующие теги: Теги управления абзацами <P ALIGN=CENTER/LEFT/RIGHT >...</P> - тег нового абзаца, используется в формате одиночного тега или контейнера. При использовании в форме одиночного тега концом абзаца считается начало следующего т.е следующий тег <P>. Атрибут ALIGN задает выравнивание элементов абзаца, значение по умолчанию LEFT
Теги управления переносом <BR>,<NOBR>...</NOBR>, <WBR> - теги управления разрывами и переносом строк в тексте документа. При разрыве строки межстрочный интервал не увеличивается.
|
||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|
Последнее изменение этой страницы: 2016-08-01; просмотров: 334; Нарушение авторского права страницы; Мы поможем в написании вашей работы! infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 3.144.40.182 (0.011 с.) |
