Назначение языка HTML. Стандарт HTML и спецификация XHTML
Здравствуйте уважаемые начинающие веб-мастера. Начинаем изучать языки программирования.
И начнём мы их изучать с html.
Сразу скажу, что в конце курса Вы уже сможете самостоятельно написать сайт на чистом html, и выложить его в интернет. Но я всё же порекомендую не торопиться, и после html, познакомиться с css.
Тогда и сайт Вы сделаете покруче, и сможете исправлять внешний вид сайта, созданного на готовой CMS(система управления контентом).
Изучение языка программирования, и изучение иностранного языка — это далеко не одно и тоже, и оно гораздо легче. Более того, это не страшно, а очень увлекательно.
Просто непонятное всегда пугает, но я вам обещаю, что после первых же занятий, пройдут все страхи.
Учиться мы будем при помощи редактора , который Вам нужно установить на свой компьютер.
В этом редакторе файлов, можно написать код, и тут-же посмотреть, как отобразит его браузер. Очень удобно.
Давайте, сначала я Вам немного расскажу, что из себя представляет HTML, и это будет скучная часть нашего курса, а затем займёмся интереснейшей практикой. Там уж, точно, скучно не будет.
НТМL (HyperText Markup Language) дословно — язык разметки гипертекста. С помощью его создаются веб-страницы.
И если, совокупность просто страниц, объединённых одной тематикой, в нашем понимании — книга, или даже, лучше сказать, толстый журнал, то совокупность веб-страниц объединённых одним доменным именем — это и есть сайт.
Каждая веб-страница имеет свой уникальный текст, написанный Вами, и заключенный в html-код.
Код — это команды браузеру, как отображать тот или иной элемент. Допустим, написали Вы слово, а вот в каком виде оно будет на экране, зависит от того, в какой код вы его заключите.
Код html состоит из следующих элементов:
2. Атрибуты тегов.
3. Значения атрибутов.
Давайте рассмотрим их по порядку.
Тег html — это основной элемент кода. Пишется он так:
Как видите, состоит он из двух частей. Первые угловые скобки — это открывающая часть, а вторые, со слешем — закрывающая.
Между этими двумя частями, пишется весь остальной код страницы, которая будет отображаться на экране.
Тег сообщает браузеру, что это html-документ, и является основным (родительским) тегом для всех остальных элементов.
В остальных тегах, элементах кода, в угловых скобках пишется буква, или слово, которое будет являться названием тега и определит, какой элемент будет этим тегом выведен на экран.
Например, если поставить в угловых скобках букву h1 , то на экране выведется текст в виде заголовка.
Здравствуйте
То есть шрифт слова «Здравствуйте», будет крупнее и жирнее остального текста.
Если в угловые скобки поставить букву p , то текст заключённый в тег, будет выведен в виде абзаца.
Здравствуйте
То есть, шрифт будет обычный, но всё, что написано после этого тега, будет начинаться с новой строки.
И таких букв, и даже слов, определяющих вид команды, в html несколько десятков, хотя в частом использовании находятся не больше 10-15 тегов.
Более подробно, каждый из них, мы рассмотрим по ходу
Следующие — это атрибуты тегов. Часто используемых, тоже не более десятка. А в последнее время и того меньше, так как все функции атрибутов перенесены в css.
Но об этом попозже, а пока всё же узнаем, что такое атрибут, так как некоторые из них не потеряли актуальности и не потеряют никогда.
Атрибут — это дополнительная команда. Пишется он в открывающей части тега. Например, захочется вам сделать заголовок цветным, тогда в открывающую часть тега h1 , нужно вставить атрибут color
И сразу переходим к значениям атрибутов. Дело в том, что атрибут обязательно должен быть со значением. То есть, дали вы команду, что заголовок должен быть цветным, значит нужно указать, какой будет цвет.
Это указание и будет значением атрибута. Выглядит оно так:
Это красный цвет.
Точно так же, но при помощи других атрибутов, можно задавать размер текста, отступы, выравнивания, и много чего ещё.
Хотя, оформление всё больше переходит к CSS, а атрибуты оформления постепенно устаревают и выходят из практики.
А сейчас делаем вывод из всего вышесказанного:
Язык HTML — это язык, который понимают браузеры. Нам он необходим для того, чтоб общаться с браузером, или можно сказать, управлять им, то есть давать ему команды на то, как воспринимать и отображать на экране то, что мы напишем.
Хочу добавить, что теги, атрибуты, и их значения, легко запоминаются во время практических занятий, чем и будут по сути все последующие статьи.
Там сразу видишь тег, узнаёшь его значение, в каком случае и каком месте он применяется, какими знаками сопровождается, и как пишется, так что сейчас я не буду показывать Вам все теги и атрибуты, увидим всё на практике.
Полный список тегов и атрибутов html, если кому то интересно, всегда можно посмотреть в . .
Хотя, если вы не собираетесь профессионально заниматься программированием, будет достаточно знать несколько (около десятка) основных тегов и несколько же атрибутов.
Ну, и всё, пожалуй. Мало? А больше пока и не надо. Остальное будем узнавать в процессе обучения на конкретных примерах.
Думаю, на примерах будет лучше усваиваться. Наша цель сделать сайт и понять, как же всё это работает, так что вперёд на практику.
Перемена
Только сядешь за учёбу — так обязательно какая-то падла разбудит!!!
В школе учитель говорит ученикам:
— Кто из вас окончательно считает себя тупицей? Встаньте.
После долгой паузы поднимается один ученик:
— Так ты считаешь себя тупицей?
— Ну не совсем, но как — то неловко, что вы стоите один.
Интернет представляет собой всемирную сеть, объединяющую компьютерные сети по всему миру на базе единых стандартных соглашений (протоколов) о способах обмена информациейи единой системой адресации.
К настоящему времени сеть Интернет получила беспрецедентное распространение. По оценкам экспертов Интернет объединяет более 100 миллионов компьютеров. Услугами Интернет пользуется свыше300 миллионов человек в 170 странах мира.
С функциональной точки зрения Интернет представляет собой:
ü недорогое быстродействующее средство общения между абонентами по всему миру;
ü не имеющее аналогов хранилище информации по любым областям знаний;
ü новую перспективную среду длядеятельности.
Влияние Интернет распространяется не только на технологическую область компьютерных коммуникаций, оно имеет также социальную направленность и пронизывает все общество по мере того, как все более широкое распространение получают оперативные средства получения знаний, электронной коммерции.
Самым распространенным и востребованным сегодня является такой сервис Интернет, как WWW (World Wide Web − всемирная паутина). Информацияв WWW представлена в виде так называемых гипертекстовых (или, более широко, гипермедийных) документов,которые могут содержать отформатированный текст, графику, аудио- и видеофрагменты.Основной особенностью гипертекстовых документов является наличие активных зон, чувствительных к щелчку мыши.Активными могут быть фрагменты текста, целые изображения и их части;щелчок по активной зоне вызывает загрузку связанного с этой зоной (целевого) документа.
Чтобы научиться размещать материалы в Интернет, прежде всего необходимо познакомиться с языком разметки гипертекста HTML (H yperT ext M arkup L anguage)
Основы языка HTML
Язык разметки гипертекстовых документов HTML представляет собой совокупностькоманд, называемых тегами(от английского tag ).Встречающиеся в тексте документа HTML-теги интерпретируются браузером при отображении документа.
Просмотр HTML-документов осуществляется с помощью программ-браузеров (от английского browser ), которые отображают документ в соответствии с HTML-разметкой и обеспечивают навигацию по гиперссылкам. Наиболее распространенными являются браузеры Microsoft Internet Explorer фирмы Microsoft Corporation и Netscape Navigator фирмы Netscape Communications Corporation .
Поскольку HTML-документ представляет собой текстовый файл, его можно подготовить в простейшем текстовом редакторе, например, в блокноте (Notepad ), но это очень трудоемко. Чаще используют специализированные редакторы, предназначенные именно для подготовки HTML-документов, которые позволяют вставлять теги с помощью кнопок панелей инструментов либо команд меню, и задавать атрибуты тегов в диалоговых окнах, например, Macromedia Dreamweaver, Microsoft FrontPage , HomeSite и др.
HTML-документ может быть получен преобразованием в HTML-формат, например, из формата документов пакета Microsoft Office. Надо отметить, что при таком преобразовании исходный текст HTML-документа получается крайне избыточным и нуждается в коррекции.Значительно эффективнее пользоваться специальными HTML - редакторами.
Синтаксис HTML-тегов
HTML-тег записывается в угловых скобках (символы)и состоит из имени, за которым может следовать список атрибутов (для большинства тегов необязательный). Имена и атрибуты представляют собой английские слова и аббревиатуры.
Теги условно можно разделить на две группы:
Парные теги (называемые также контейнерами ) имеют два компонента: открывающий (начальный) и закрывающий (конечный); закрывающий компонент имеет то же название, но при записи перед названием ставится косая черта(символ / ). Между открывающим и закрывающим компонентами может располагаться текст документа и другие теги. Фрагмент документа, расположенный между открывающим и закрывающим элементом тега-контейнера форматируется браузером согласно смыслу тега.Например, текст, расположенный между тегамии , будет выведен полужирным начертанием (название тега - от английского bold ). Парные теги могут быть вложены друг в друга, но не должны пересекаться.
Непарные
теги (называемые также автономными
) не имеют конечного компонента.При их интерпретации в отображаемый документ вставляется тот или иной объект. Например, тег , встречающийся в тексте HTML-документа, вызывает вставку графического изображения из файла pict.gif .
Атрибуты в списке отделяются друг от друга одним или несколькими пробелами, либо символами табуляции, либо символами перевода строки;последовательность записи атрибутов несущественна. Подавляющее большинство атрибутов употребляются в виде парыназвание атрибута = значение атрибута . В случае, когда значение атрибута представляет собой более чем одно слово либо одно число, его следует заключить в одинарные или двойные кавычки. В закрывающих компонентах тегов атрибуты не указываются.
Вот пример тега с атрибутами:
|
Название тега Название атрибута |
|
Значение атрибута |
|
Название атрибута |
|
Значение атрибута |
Встретив такой тег в HTML-документе, браузер интерпретирует его, выводя следующий за тегом текст символами, увеличенными относительно базового размера(SIZE=+2) и красного цвета (COLOR=RED); это форматирование текста применяется до тех пор, пока не встретится закрывающий тег.
Регистр символов в записи тегов и атрибутов значения не имеет.
Структура HTML-документа
HTML-документ заключается в теги и.Между этими тегами располагаются две секции:секция заголовка (между тегами и) и секция тела документа (между тегами и).Секция заголовка содержит описание параметров, используемых при отображении документа, но не отражающихся непосредственно в окне браузера.Секция тела документа содержит основной текст, предназначенный для отображения браузером, теги форматирования, размещения рисунков, таблиц, гиперссылок и т.д.
HTML -код простейшего документа, пригодного для размещений в Интернет, выглядит так:
< TITLE > Наша первая страничкаTITLE >
Самый простой HTML- документ
Данный кодможет быть набран в текстовом редакторе Блокнот и сохранен как файл с расширением. htm или. html − в этом случай документ откроется в браузере, установленном на вашем компьютере по умолчанию. Браузер отобразит этот документ, выведя в своем окне строку "Самый простой HTML-документ", расположенную в секции тела документа. Фраза "Наша первая страничка" будет отображаться в строке заголовка браузера.
Раздел HEAD
Секция заголовка обычно содержит теги, незаметные для пользователя, но тем не менее способные активно влиять не внешний вид документа.
|
Тег |
Назначение |
|
Определяет имя всего документа. Имя, как правило, отображается в заголовке окна браузера. Данный элемент обязателен для любого HTML-документа и может быть указан не более одного раза. |
|
|
Указывает базовый адрес текущего документа (URL), который станет отправной точкой для расчета относительных адресов внутри документа. Элемент не имеет конечного тэга. Обязательно присутствие хотя бы одного из аргументов: HREF - определяет базовый адрес (URL) текущего документа. TARGET - определяет имя фрейма, которое будет использоваться в гиперссылках по умолчанию. Это может вам пригодиться, если вы хотите открывать все ссылки документа в другом фрейме. |
|
|
< STYLE TYPE= "text /css " > |
Используется для вставки в документ каскадных таблиц стилей (CSS − Cascade Style Sheet). TYPE − обязательный атрибут, значением которого, как правило, является "text /css ". |
|
< МЕТА …> |
Элемент МЕТА используется для технического описания документа. С помощью этого элемента в заголовок документа внедряется дополнительная полезная информация, невидимая для пользователя, но порой просто незаменимая для правильной индексации вашей страницы роботами поисковых серверов. Элемент не имеет конечного тега. NAME - определяет имя мета-записи. Существует множество предопределенных имен, некоторые из которых вы можете увидеть в указанном ниже примере. CONTENT - присваивает значение мета-записи, определенной в параметре NAME. |
Раздел BODY
Этот раздел включает в себя основное содержание веб-страницы − текст документа, изображения, таблицы и т.п. Элемент BODY должен встречаться в документе не более одного раза и может включать следующие атрибуты:
|
Синтаксис атрибута |
Назначение |
|
MARGINHEIGHT=число |
Определяет ширину (в пикселях) верхнего и нижнего полей документа. Работает только в браузерах Netscape |
|
TOPMARGIN= число |
Определяет ширину (в пикселях) верхнего и нижнего полей документа. Работает только в браузерах Internet Explorer |
|
MARGINWIDTH= число |
Определяет ширину (в пикселях) левого и правого полей документа. Работает только в браузерах Netscape |
|
LEFTMARGIN= число |
Определяет ширину (в пикселях) левого и правого полей документа. Работает только в браузерах Internet Explorer |
|
BACKGROUND= URL |
Определяет изображение для "заливки" фона (фонового рисунка). Значение задается в абсолютного или относительного адреса изображения (см. раздел Размещение рисунков) |
|
BGCOLOR=цвет |
Определяет цвет фона документа. Microsoft Internet Explorer поддерживает 16 стандартных имен цветов (aqua , black , blue , fuchsia , gray , green , lime , maroon , navy , olive , purple , red , silver , teal , yellow , white ) Другим способом является использование кода цвета в виде шестиразрядного шестнадцатеричного числа, задающее интенсивность красной (первые две цифры), зеленой (следующие две цифры) и синей (последние две цифры) составляющей. Интенсивность каждой составляющей в шестнадцатеричной форме изменяется от 00 до FF. При задании цвета в качестве значения атрибута некоторого тега перед шестнадцатеричным числом ставится символ#. Например, запись COLOR ="#0000 FF " означает синий цвет Несмотря на принципиальную возможность задать миллионы цветов, надо учитывать, что браузеры отображают лишь 256 цветов, причем у каждого браузера своя цветовая палитра.В этой палитре браузер подберет цвет, наиболее близкий к заданному |
|
TEXT=цвет |
Определяет цвет текста в документе |
|
LINK=цвет |
Определяет цвет гиперссылок в документе |
|
ALINK=цвет |
Определяет цвет подсветки гиперссылок вмомент нажатия |
|
VLINK |
Определяет цвет гиперссылок на уже просмотренные документы |
Форматирование текста
Форматирование символов
Все теги форматирования символов имеют как открывающий, так и закрывающий компонент и действуют на заключенные между ними текст.
Основным является тег ... FONT>, обязательно использующийся с одним или несколькими атрибутами, изменяющими размер, цвет и гарнитуру шрифта:
|
Синтаксис атрибута |
Назначение |
|
SIZE = значение |
Размер задается либо в форме абсолютного значения (число от 1 до 7),либо относительно размера основного шрифта (в форме +nили -n). |
|
COLOR = цвет |
Цвет |
|
FACE = список шрифтов |
Гарнитуры для отображения текста; названия перечисляются в порядке предпочтения через запятую, например, FACE =" Verdana , Helvetica , Arial , Sans - Serif " Можно указывать и одну из гарнитур, но следует учитывать, что данный шрифт может быть не установлен на компьютере пользователя, и "экзотические" шрифты отображаться браузером не будут |
Кроме того, используются теги, позволяющие изменить начертание символов:
. .. (от английского bold) − полужирный шрифт;
.. . (от английского italic) − курсив;
... (от английского TeleType) − моноширинный шрифт;
... (от английского u nderline) − подчеркнутый;
... S > (от английского s trikethrough ) − перечеркнутый;
... (от английского s ubscript ) − нижний индекс;
... (от английского superscript ) − верхний индекс.
Текст, заключенный между тегами
и(от английского preformatted ), отображается так, как он был отформатирован предварительно, со всеми пробелами и переносами строк.
Форматирование абзацев
Текст выводится в окно браузера слово за словом, при достижении правой границы окна очередное слово автоматически переносится на новую строку. Даже если в коде страницы было введено несколько пробелов или текст записывался с новой строки, при просмотре в браузере эти действия отображены не будут. Поэтому чтобы вывести в тексте ряд последовательных пробелов или несколько пустых строк, приходится применять различные теги.
Тег
(от английского break
)разрывает текстовый поток и вставляет новую строку без образования нового абзаца.Несколько последовательных тегов
интерпретируются как несколько пустых строк.Межстрочный интервал одинарный.Закрывающего компонента тег не имеет, как и атрибутов.
Тег(от английского paragraph )начинает абзац;новый абзац отделяется от предыдущего двойным межстрочным интервалом.Абзац пустым быть не может, то есть несколько последовательных тегов
интерпретируются как один (в отличие от тега
).Закрывающий компонент
не обязателен, так как предыдущий абзац заканчивается там, где начинается новый.Тег имеет необязательный атрибут ALIGN, указывающий на вид выравнивания абзаца, который может принимать значенияLEFT, CENTER, RIGHT и JUSTIFY , задающие выравнивание соответственно по левому краю, центру, правому краю и по ширине. По центру будет выровнен и текст, заключенный в теги
...Если закрывающий компонент
опустить, то заданный тип выравнивания сохраняется до следующего тега, задающего выравнивание, или до конца документа.
HTML позволяет создавать форматировать абзацы как нумерованные или маркированные списки. Фрагмент текста, представляющий собой список, заключается в теги:
упорядоченный (нумерованный) список (от английского ordered list )
неупорядоченный (маркированный) список (от английского unordered list )
Каждый элемент упорядоченного или неупорядоченного списка заключается в теги ... (от английского list item ). При выводе текста каждый элемент списка будет располагаться с новой строки, обозначенной номером или маркером. Кроме того, у списка может быть заголовок, который задается тегом (от английского l ist h eader ). Закрывающие теги и не обязательны.
|
Нумерованный список |
Маркированный список |
|
|
Элемент кода |
< O L> Первый элемент Второй элемент Третий элемент |
< U L> Первый элемент Второй элемент Третий элемент U L> |
|
Отображение в браузере |
Заголовок 1. Первый элемент 2. Второй элемент 3. Третий элемент |
Заголовок · Первый элемент · Второй элемент · Третий элемент |
Многоуровневый список может быть организован посредством комбинации нумерованных и маркированных списков.
Тегимеет необязательные атрибуты:
|
Синтаксис атрибута |
Назначение |
|
|
TYPE = формат |
формат нумерации может иметь значения: |
|
|
арабские цифры (по умолчанию) |
||
|
прописные буквы |
||
|
строчные буквы |
||
|
большие римские цифры |
||
|
маленькие римские цифры |
||
|
START = значение |
первый номер в списке (по умолчанию 1) |
|
Тегимеет необязательный атрибут
|
Синтаксис атрибута |
Назначение |
|
|
TYPE = формат |
формат маркера может иметь значения: |
|
|
Disc |
диск (по умолчанию) |
|
|
Circle |
окружность |
|
|
Square |
Квадрат |
|
Абзацы можно оформить и в видезаголовков уровня (от
n
=1 до
n
=6), для этого используют теги вида
Теги
, ... ,
могут иметь атрибут выравниванияALIGNсо значениямиLEFT,RIGHT и CENTER.
Размещение рисунков
Изображения, которые демонстрируются браузером при просмотре веб-страницы, хранятся в отдельных файлах формата gif , jpg (jpeg ) или png , а в коде страницы делается ссылка на нужный файл. Для этого используется непарный тег , имеющий один обязательный и ряд необязательных атрибутов..
|
Обязательный атрибут: |
|
|
SRC = url |
Адрес графического файла (относительный или абсолютный) |
|
ALT = текст |
Альтернативный текст, выводимый в режиме браузера без загрузки изображений (обязательно заключается в кавычки) |
|
BORDER = значение |
Толщина обрамляющей рамки в пикселях, 0 означает отсутствие рамки (по умолчанию) |
|
BORDERCOLOR = цвет |
Задает цвет обрамляющей рамки |
|
HEIGHT = значение |
Высота изображения в пикселях(по умолчанию оригинальная) либо в процентах от высоты окна браузера |
|
WIDTH = значение |
Ширина изображения в пикселях(по умолчанию оригинальная) либо в процентах от ширины окна браузера |
|
HSPACE = значение |
Свободное пространство слева и справа от изображения в пикселях |
|
VSPACE = значение |
Свободное пространство сверху и снизу от изображения в пикселях |
|
ALIGN = значение |
Выравнивание изображения по горизонтали. Если заданы значения LEFT либо RIGHT , изображение соответствующим образом будет выровнено по горизонтали,задание этих значений обеспечивает обтекание изображения текстом |
Рассмотрим подробнее абсолютный и относительный способы адресации файла.
Адресация в абсолютной форме используется при ссылках на ресурсы, находящиеся на других серверах. Универсальный адрес, определяющий местонахождение информационного ресурса, носит название URL (Uniform Resource Locator - унифицированный адрес ресурса). URL состоит из двух частей, разделенных двоеточием. Первая часть указывает на тип сетевого протокола, который зависит от типа ресурса. Например, если ресурс располагается на WWW-сервере,это протокол http .Вторая часть включает в себя имя компьютера (сервера) в доменной системе имен и (если требуется) путевое имя файла. При записи путевого имени названия каталогов разделяются прямой косой чертой (символ / ), в именах файлов и каталогов различаются прописные и строчные буквы , пробелы не допускаются. Вот примеры URL:
http://www. vshu . kirov .ru/ site / images / picture 1. jpg
http://195.21.123.13:8110
ftp://everything.com/soft/prog.zip
mailto:This email address is being protected from spambots. You need JavaScript enabled to view it.
Последний URL, указывающий на протокол mailto и адрес электронной почты, не ссылается ни на какой информационный ресурс; это единственный тип URL, при записи которого не ставятся после двоеточия две косые черты.
Адресация рисунков в абсолютной форме при создании веб-сайта практически не используется.
Адресация в относительной форме используется при ссылках на ресурсы, находящиеся на том же сервере. При записи пути к файлу названия каталогов разделяются прямой косой чертой (символ / ), переход по каталогам файловой системы на один уровень вверх обозначается двумя точками (символы .. ). Чтобы было понятнее, представим себе компьютер, например, с такой структурой каталогов, содержащих HTML-файлы:
SHAPE\* MERGEFORMAT
|
MySite |
|
Pa ges |
|
Ima ges |
|
Page1.htm Page2.htm Pict1.jpg Pict2.jpg |
|
Index.htm Picture.jpg |
В этом случае возможны, например, такие варианты записи тега IMG :
ü < IMG SRC = Picture . jpg > (изображение Picture . jpg располагается на страничке Index . htm )
ü < IMG SRC = Images / Pict 1. jpg > (изображение Pict 1. jpg располагается на страничке Index . htm )
ü < IMG SRC =../ Picture . jpg > (изображение Picture . jpg располагается на страничке Page 1. htm )
ü < IMG SRC =../ Images / Pict 1. jpg > (изображение Pict 1. jpg располагается на страничке Page 1. htm )
Несмотря на то, что формально обязательным является только атрибут SRC,на практике необходимо указывать и альтернативный текст (атрибут ALT), так как многие работают с браузером в режиме без загрузки изображений.
Высоту и ширину области, в которой демонстрируется рисунок, задают при помощи атрибутов width и height в пикселях или в процентах к размеру экрана. В том случае, когда задается один из этих атрибутов, рисунок масштабируется таким образом, чтобы его высота или ширина соответствовали заданной. Второй размер устанавливается автоматически, в соответствующей пропорции. Применение только одного из атрибутов изменяет оба размера рисунка.
Если задать явно оба атрибута, то рисунок будет масштабироваться по двум осям в соответствии с заданными размерами. Атрибуты height и width меняют не время загрузки изображения, а только его вид (размер) на экране.
Гиперссылки
Гиперссылкой называют объект (текст, изображение, фрагмент изображения), при щелчке мышью по которому происходит переход к новому документу или фрагменту документа. Именно гиперссылки позволяют организовать переходы между любыми размещенными в сети Интернет документами.
Текстовые гиперссылки
Связь между HTML-документами и фрагментами документов организуется с помощью тега ... (от английского a nchor - якорь ).
Тегупотребляется как для создания ссылки на другой документ, так и для ссылки на фрагмент документа.
|
Обязательный атрибут: |
|
|
HREF = url |
Адрес целевого документа (может быть представлен в абсолютной и относительной форме) |
|
Основные необязательные атрибуты: |
|
|
NAME="имя " |
Помечает находящийся между < A > и A > фрагмент документа как возможный объект для ссылки. В качестве значения нужно латиницей написать любое слово-указатель, уникальное для данного документа. Например, тег Раздел1 создает так называемую метку (закладку) для перехода к разделу 1. В этом случае можно ссылаться на помеченную область простым указанием ее имени после имени документа (перед именем метки ставится #). Так, <
A
HREF
="
Index
.
html
#
part
1">К разделу 1
A
>
отправит вас в раздел "
part
1" файла
Index
.
html
, а |
|
TARGET = "имя" |
Имя кадра (фрейма) или окна для вывода целевого документа. Этот атрибут используется только совместно с параметром HREF. В качестве значения необходимо задать либо имя одного из существующих фреймов, либо одно из следующих зарезервированных имен: _self
- указывает, что определенный в параметре HREF документ должен отображаться в текущем фрейме; _blank - указывает, что документ должен отображаться в новом окне |
|
TITLE= "текст " |
Выводит всплывающую подсказку при наведении указателя мыши на гиперссылку |
Текст и изображения, размещенные между тегамистановятся активной зоной документа, чувствительной к щелчку мыши, который вызывает загрузку целевого документа. Текст гиперссылки выделяется подчеркиванием и цветами, указанными как значение атрибутов LINK, A LINK, V LINK тега (либо цветом по умолчанию).
Гиперссылки-картинки
Чтобы сделать гиперссылкой целое изображение, также применяется тег ... ., только вместо текста (или вместе с текстом) между < A > и A > располагается тег < IMG …> со всеми соответствующими атрибутами.
Например , .
Карта гиперссылок
Тег позволяет сделать активной зоной текстовый фрагмент или изображение целиком ; для того же, чтобы разные фрагменты одного изображения ссылались на разные целевые документы, придется использовать тег, реализующий изображение-карту.
У тега-контейнера единственным обязательным атрибутом является NAME , значением которого будет имя (например, NAME=" mymap " , которое должно быть использовано при описании атрибута USEMAP тега IMG, описывающего изображение, призванного служить картой (при этом к имени карты приписывается слева # − USEMAP ="# mymap ")
Внутри контейнера каждой чувствительной к перемещению мыши зоне изображения должен соответствовать тег с атрибутами:
|
Синтаксис атрибута |
Назначение |
|
COORDS = список |
Список через запятую координат активной зоны (зависит от типа заданной формы зоны) |
|
HREF = url |
|
|
SHAPE = форма |
Определяет форму активной зоны. Возможные значения этого атрибута: circle (окружность – задается координатами центра и радиусом в пикселях); rect (прямоугольник - задается координатами левого верхнего и правого нижнего угла); poly (многоугольник - задается координатами своих вершин) Координаты во всех случаях отсчитываются от верхнего левого угла изображения в пикселях, ось Х направлена вправо, ось Y − вниз. |
|
NOREF |
иногда бывает нужно указать, что данная зона (заданная атрибутом SHAPE и координатами COORDS) не является активной, реакции на щелчок мыши нет |
Таблицы
Таблицы в HTML-документах используются не столько для того, чтобы располагать данные в обрамленных ячейках, сколько с целью расположения фрагментов текста и изображений друг относительно друга.
Таблицы в HTML строятся построчно. Все табличные данные заключаются в теги
; описание каждого ряда ячеек (строк) заключается в теги ...
; содержимое каждой ячейки заключается в теги ...
(обычные ячейки) или
Таким образом, для описания, например, таблицы из двух строк, каждая из которых содержит по две ячейки, придется создать следующую конструкцию:
Ячейки таблицы могут содержать текст, изображения, вложенные таблицы и т.д. Не следует оставлять ячейки таблицы незаполненными; если какая-то ячейка должна выглядеть пустой, поместите в нее неразрывный пробел.
Помещаемый в ячейки таблицы текст по умолчанию автоматически размещается браузером; текст выводится слово за словом; при достижении правой границы ячейки очередное слово переносится на новую строку.
Ячейки таблицы могут охватывать несколько строк или столбцов;при описании таких ячеек используется атрибуты ROWSPAN (ячейка, тег которой содержит данный атрибут, "растягивается" на указанное количество строк) и COLSPAN (ячейка "растягивается" на несколько столбцов). Приведем пример организации таблицы с объединенными ячейками:
< TR >
< TD ROWSPAN=2> 1-1 TD >
Теги, описывающие таблицы, имеют целый ряд необязательных атрибутов.
Атрибуты тегазадают параметры таблицы в целом:
|
Синтаксис атрибута |
Назначение |
|||
|
ALIGN = значение |
Выравнивание относительно текстового потока;возможны значенияleft, right и center |
|||
|
BACKGROUND = url |
Фоновое изображение для всей таблицы |
|||
|
BGCOLOR = цвет |
Фоновый цвет |
|||
|
BORDERCOLOR = цвет |
Цвет границы |
|||
|
BORDERCOLORDARK = цвет |
Окрашивает в заданный цвет правый и нижний край основной рамки и левый и верхний край каждой ячейки |
|||
|
BORDERCOLORLIGHT = цвет |
Окрашивает в заданный цвет левый и верхний край основной рамки и соответственно правый и нижний край каждой ячейки |
|||
|
CELLPADDING = значение |
Расстояние от границ ячейки до ее содержимого в пикселях |
|||
|
CELLSPACING = значение |
Расстояние между ячейками в пикселях |
|||
|
HSPACE = значение |
Свободное пространство слева и справа от таблицы в пикселях |
|||
|
VSPACE = значение |
Свободное пространство сверху и снизу от таблицы в пикселях |
|||
|
WIDTH = значение |
Ширина таблицы (задается в пикселях или в процентах от текущей ширины окна браузера) |
|||
Атрибуты тегазадают параметры данного ряда (при возникновении противоречий атрибуты, заданные в теге, отменяются). Выравнивание содержимого ячеек;возможны значенияleft, right и center
BACKGROUND = url
Фоновое изображение для ячеек данного ряда таблицы
BGCOLOR = цвет
Фоновый цвет для ячеек данного ряда
BORDER = значение
Толщина рамки, обрамляющей ячейки данного ряда;BORDER=0 обозначает невидимую рамку
VALIGN = значение
Вертикальное выравнивание содержимого ячеек;возможны значения top, center и bottom
Атрибуты тега задают параметры данной ячейки(при возникновении противоречий атрибуты, заданные в тегах и, отменяются).
|
Синтаксис атрибута |
Назначение |
|
ALIGN = значение |
Выравнивание содержимого ячейки; возможны значенияleft, right и center |
|
BACKGROUND = ur l |
Фоновое изображение для ячейки таблицы |
|
BGCOLOR = цвет |
Фоновый цвет для ячейки |
|
BORDER = значение |
Толщина рамки, обрамляющей ячейку |
|
VALIGN = значение |
Вертикальное выравнивание содержимого ячейки;возможны значения top, center и bottom |
|
WIDTH = значение |
Ширина ячейки в пикселях или в процентах от ширины таблицы |
|
ROWSPAN= значение |
Указывает количество строк, охватываемых ячейкой |
|
COLSPAN = значение |
Указывает количество столбцов, охватываемых ячейкой |
При работе с таблицами учтите, что указанное значение атрибута WIDTHво многих случаях лишь "принимается к сведению" браузером. Заданные пропорции в точности выдерживаются редко, браузер старается отобразить таблицу как можно лучше (в его понимании).
Бегущая строка
Использование бегущей строки на веб-странице делает ее более динамичной, позволяет создать эффект движения объекта. Создается бегущая строка с помощью тега < MARQUEE > … MARQUEE >.
Между < MARQUEE > и MARQUEE > могут располагаться текстовые фрагменты и рисунки. Текст может быть отформатирован с помощью соответствующих тегов, а рисунок вставляется с использованием .
|
Синтаксис атрибута |
Назначение |
|
BGCOLOR =цвет |
Фоновый цвет. Если фон задан, то браузер рисует на экране цветную полосу, вдоль которой движется текст или картинка. |
|
HEIGHT = значение |
Высота фоновой полосы. Значение указывается в пикселях или в процентах от высоты окна браузера. Например, если указать атрибут HEIGHT=25%, то полоса бегущей строки будет занимать четверть высоты окна |
|
WIDTH = значение |
Ширина полосы бегущей строки, указывается в пикселях или в процентах от ширины окна браузера |
|
DIRECTION= значение |
Направление движения строки: left − налево (по умолчанию), right − направо, up − вверх, down − вниз |
|
BEHAVIOR = значение |
Атрибут управляет поведением бегущей строки: scroll (по умолчанию) − дойдя до края окна, строка уходит из поля зрения, а затем появляется с противоположной стороны; slide − строка появляется из-за края окна, достигает противоположного и останавливается; alternate − строка движется вправо или влево, «отражаясь» от краев окна и меняя направление движения |
|
HSPACE = смещение в пикселях |
Сдвиг полосы бегущей строки по горизонтали вправо |
|
VSPACE = вы co т a в пикселях |
Создание пустого пространства выше и ниже полосы |
|
LOOP = значение |
Количество переходов строки по экрану |
|
SCROOLAMOUNT = значение |
Число пикселей, которые проходит строка за каждый шаг. Режим по умолчанию соответствует примерно 10 пкс/шаг. Данный атрибут позволяет регулировать скорость движения строки |
|
SCROLLDELAY = значение |
Определяет временной интервал (в миллисекундах) между шагами, с помощью этого атрибута можно заставить строку двигаться рывками |
|
TRUESPEED |
При установке этого флага (атрибута без значения) будет использовано заданное значение SCROLLDELAY. Если флаг не установлен значение SCROLLDELAY <= 59 будет округлено до 60 |
Горизонтальная линия
Горизонтальная линия задается тэгом
Определяет длину линии в пикселях или процентах от ширины окна браузера
SIZE = значение
Определяет толщину линии в пикселях
ALIGN = значение
Определяет выравнивание горизонтальной линии. Параметр может принимать следующие значения:
left - по левому краю,
right - по правому краю,
center - по центру (используется по умолчанию)
NOSHADE
Определяет способ закраски линии как сплошной. Параметр является флагом и не требует указания значения. Без данного параметра линия отображается объемной
COLOR = цвет
Определяет цвет линии (действует только в Internet Explorer )
Интернет - это огромное объединение компьютерных сетей в планетарном масштабе. А если учесть, что обитатели Международной Космической Станции пользуются услугами электронной почты, то становится ясно, что Интернет уже шагнул за пределы планеты. Очень часто Интернет ошибочно отождествляют с самой популярной и масштабной его частью - всемирной путиной, которая в английском языке получила наименование WWW (World Wide Web). По сути дела, паутина - просто огромное количество взаимосвязанных документов. Ключевое слово - взаимосвязанных , т. е. текст Web-страницы органично вставляются гиперссылки, которые служат механизмом соединения с другими Web-страницами. Честно говоря, рассказывать на словах о механизме гиперссылок достаточно трудно, но тот, кто хоть раз посетил какой-либо Web-сайт, тот сразу поймет все их значение.
Именно гиперссылки, позволяющие связывать друг с другом самые различные документы из Сети, создали ту удивительную общность, которая и является теперь визитной карточкой всемирной паутины. Гиперссылки используют для отыскания документа его уникальный адрес во всемирной паутине, который также называется URL (Universal Resource Locator).
Как мы знаем, основное предназначение Web-страниц - отображать информацию, доносить ее до пользователя. При этом существует ряд функциональных «ограничений. Ведь заранее неизвестно, какой именно компьютер используется пользователем, просматривающим Web-страницу. Нельзя заранее предсказать, какое разрешение у его монитора, или какие размеры окна просмотра он установил. Да что там, мы не можем заранее знать, какая Используется операционная система или даже платформа. Web-страницы должны практически одинаково отображаться и на Intel-машинах, и на Макинтошах и на телевизионных Web-приставках. Неизвестно, какие шрифты установлены и используются в операционной системе пользователя, неизвестно, какая глубина цвета поддерживается его видеокартой. Все эти неизвестности должны были бы послужить большим барьером для создания общего языка. Но этого не случилось.
Дело в том, что еще на заре компьютерной эры, в 1986 году, международной организацией по стандартизации ISO (International Organization for Standardization) был разработан язык разметки документов SGML (Standard Generalized Markup Language), который предусматривал практически все возможные случаи отображения информации. Как на бумаге, так и на мониторах. Естественно, чтобы учесть все возможные случаи, была разработана действительно мощная система. Казалось, для Web-страниц это идеальный вариант. Однако только описание правил этого языка занимало сотни страниц. Следовательно, на разработку программ, которые могли бы отображать страницы, созданные на основе такого языка, ушло бы очень много времени. Поэтому для нужд Интернета было выбрано некоторое подмножество этого языка, которое получило самостоятельное наименование - HTML (HyperText Markup Language), т. е. язык разметки гипертекстовых документов.
Это язык разметки, как следует из названия, т. е. в файле Web-страницы информация находится вперемешку с инструкциями по ее отображению. По сути, это обычный текстовый файл. Но читать его самостоятельно трудно, так как инструкции по отображению информации мешают читать сам текст. А графику тем более нельзя увидеть.
Web-страницы, которые все написаны на HTML, просматриваются при помощи специализированных программ, которые обычно называют браузерами. Это калька с англоязычного термина. Прямой перевод на русский язык, т. е. Программы-обозреватели, почему-то не прижился. Что ж, будем называть их устоявшимся термином. Основная задача браузера - по запросу пользователя отыскивать требуемый документ в Интернете и адекватно отображать его, т. е. браузер анализирует инструкции, написанные на языке HTML, а затем отображает информацию, находящуюся на Web-странице, пользуясь этими инструкциями. Отсюда вывод - если мы хотим создавать собственные Web-страницы, то жизненно необходимо знать язык HTML.
Конечно, можно писать код Web-страницы вручную, пользуясь каким-нибудь простеньким текстовым редактором, таким, например, как тривиальный Блокнот. Однако, это не самое приятное времяпровождение. Сейчас существует огромное множество визуальных редакторов Web-страниц, которые позволяют простым и естественным образом размещать информацию, не заботясь о ее переводе в HTML. Казалось бы, если все так замечательно, то зачем изучать HTML самостоятельно? Оказывается, при создании HTML-кода эти редакторы в некоторых случаях пишут неверный, частично неверный или избыточный код. Иногда просто не получается добиться именно того результата, который необходим, и надо знать язык HTML, чтобы быть в состоянии преодолеть встречающиеся препятствия.
Также следует упомянуть о последствиях так называемой "браузерной войны". Дело в том, что в самом начале развития WWW лидерство на рынке занял браузер Netscape Navigator от Netscape. Фирма Microsoft изначально не смогла правильно оценить будущего потенциала WWW, и браузер Netscape Navigator благополучно занял почти весь рынок. Но когда менеджмент Microsoft донял, что они упустили, в ход пошла вся тяжелая артиллерия. Срочно был создан браузер Internejt Explorer, и началась браузерная война. В целях продвижения собственного браузера каждая из конкурирующих фирм немного "улучшала" стандарт HTML, т. е. добавляла в него конструкции, которые мог правильно обрабатывать только собственный браузер. Конечно, WWW Consortium, организация, курирующая развитие интернет-технологий, некоторые из этих новшеств включала в последующие версии стандартов, но конкуренты не останавливались на достигнутом. Более того, в рамках все той же браузерной войны, Microsoft вживила свой браузер в операционную систему Windows 9x. Закончилось вся эта эпопея, как мы помним, судебным разбирательством, в котором ставший в одночасье известным всему миру судья Джонсон обязал Microsoft вывести браузер Internet Explorer из состава операционных систем.
Но к тому времени задача-минимум была выполнена. Браузер Internet Explorer занял около половины объема рынка браузеров. Так закончилась "браузерная война". Или, если быть точным, перешла из "горячей" фазы в "холодную". Но отголоски этого противостояния до сих пор аукаются разработчикам Web-страниц, так как необходимо проверять, как выглядит разрабатываемая страница в каждом браузере. Более того, некоторые визуальные HTML-редакторы прямо ориентированы на тот или иной браузер, и, следовательно, при их использовании разработчик тоже будет ориентироваться только на один браузер или ограничивать функциональность и наполнение Web-страниц, упрощая их структуру практически до предела.
Но выход есть. Код, генерируемый визуальным редактором, практически всегда необходимо править вручную. А для этого, повторюсь, стоит знать язык HTML. Без знания HTML просто нельзя создавать Web-страницы хорошего качества. В любой технологии есть свои подводные камни, и если мы не знаем основы этой технологии, мы обязательно на них наткнемся. Для того, чтобы добиться максимально адекватного соответствия создаваемой Web-страницы первоначальному замыслу, действительно просто необходимо изучать язык HTML. Чему, собственно, и посвящена эта книга. Если кто еще не догадался
Несмотря на то, что Web-страницы появляются на экране компьютера в отформатированном виде, язык HTML не предназначен для форматирования документов, поскольку жесткое задание оформления и точное позиционирование элементов текста на странице приводит к ограничениям, недопустимым в Интернете.
Так, например, когда мы форматируем текст с помощью текстового процессора Word, мы однозначно определяем, как должен выглядеть этот текст при печати на совершенно определенном принтере и на бумаге заданного формата. Когда документ размещен в Интернете, невозможно предсказать, какой компьютер будет использован для его просмотра, да и будет ли вообще у этого компьютера монитор.
Может быть, текст появится на экране компьютера, работающего в системе Windows в окне одного из современных броузеров. Может быть, это будет текстовый броузер (неспособный отображать графику), работающий в системе MS-DOS. Возможно, текст документа вообще не будет отображаться на экране, а будет воспроизводиться вслух с помощью синтезатора речи. Для слепого пользователя документ может выводиться на специальное устройство шрифтом Брайля.
В связи с необходимостью подготавливать документы для столь разнообразных устройств, язык HTML не предназначен для описания формата документа. Он служит для функциональной разметки документа, то есть позволяет определить назначение фрагментов текста.
Например, если в тексте встречается заголовок, то код HTML просто указывает, что соответствующий фрагмент является заголовком. Получив такой код, программа просмотра (броузер) сама «решает», что ей делать с заголовком. Возможно, она отобразит его более крупным шрифтом, а может быть выровняет по центру экрана. Возможно, что синтезатор речи, воспроизводящий текст Документа, использует код заголовка для того, чтобы повысить громкость и сделать необходимую интонационную паузу.
Язык HTML все-таки имеет некоторые команды форматирования, но общий курс на разделение содержания и оформления документа выдерживается четко. В последней версии HTML (4.0) использовать команды форматирования, как правило, не рекомендуется.
Коды языка HTML, с помощью которых выполняется разметка исходного текста, называются тегами. Тег - это набор символов. Все теги начинаются с символа «меньше» (< ) и заканчиваются символом «больше» (> ). Пару этих символов иногда называют угловыми скобками. После открывающей угловой скобки идет ключевое слово, определяющее тег.
Каждый тег в языке HTML имеет специальное назначение. Регистр букв в названиях тегов не имеет значения - можно использовать как строчные, так и прописные буквы, хотя общепринято использовать прописные буквы, чтобы теги отличались от обычного текста документа.
Как правило, один тег HTML воздействует только на часть документа, например на абзац. В таких случаях используют парные теги: открывающий и закрывающий. Открывающий тег создает эффект, а закрывающий - прекращает его действие. Закрывающие теги начинаются с символа косой черты (/ ).
Некоторые теги дают разовый эффект в месте своего появления. В этом случае необходимости в закрывающем теге нет, и он не употребляется.
Если по ошибке в теге указано ключевое слово, отсутствующее в языке HTML, то тег игнорируется целиком.
При отображении документа в браузере сами теги не отображаются, но влияют на способ отображения документа.
Атрибуты тегов
Открывающие теги часто могут содержать атрибуты, влияющие на эффект, создаваемый тегом. Атрибуты - это дополнительные ключевые слова, отделенные от ключевого слова тега и друг от друга пробелами.
Некоторые атрибуты требуют указания значения атрибута. Это значение отделяется от ключевого слова знаком равенства (= ). Значение атрибута должно заключаться в кавычки, но во многих случаях эти кавычки могут опускаться без какого-либо вреда.
Закрывающие теги никогда не содержат атрибутов.
Комментарии
В языках программирования общепринята возможность использования комментариев - текстовых строк, не являющихся частью программы, а служащих для пояснения. Язык HTML тоже имеет такую возможность.
Комментарии в языке HTML начинаются со специального тега . Комментарий может содержать любые символы, кроме символа «больше» (> ), и, таким образом, не может включать в себя теги.
Примеры тегов HTML:
3. Сам текст документа располагается в теле документа. Тело документа располагается между тегами и .
Четыре перечисленных парных тега определяют основную структуру документа HTML. Они встречаются (или их наличие подразумевается) во всех документах HTML.
На практике определить местоположение этих структурных основных тегов можно и при их отсутствии. Поэтому, если теги
,
и
, а также соответствующие им закрывающие теги опущены, то программа - броузер может сама определить то место, где они должны были находиться. Тег
конец контейнера заголовка
начало контейнера тела страницы… тело (всё содержимое) страницы
конец контейнера тела страницы
конец контейнера HTML-документа
указанная вами строка-название будет выводиться в заголовке окна браузера, когда данная страничка будет в нём просматриваться, а также (уже после размещения страницы в Интернете) в списках, выдаваемых поисковыми серверами.
- такой полутэг используется для добавления комментариев на страничке, т. е. для полезных пояснений, которые не показываются в браузере.