Синтаксис тэгов.
Большинство тегов имеют атрибуты, которые выглядят как имя = "значение"
Если значение атрибута состоит из символов A-Z или 0-9, то кавычки можно опускать. Кроме того, если имя тега совпадает со значением, то значение можно не писать. Это называется минимизированным синтаксисом атрибута.
Кроме тегов и простого текста в HTML могут быть, так называемые, символьные объекты или Escape последовательности. Они нужны для представления в документе символов, запрещенных синтаксически или физически. Например,
|
Символ на экране браузера |
Запись в тексте на HTML |
|
< |
< |
|
" |
& quote |
|
|
© |
Регистр букв для тегов и атрибутов не важен!
Любое количество пробелов и переходов на новую строку эквивалентно одному пробелу!
Обычная реакция браузера на ошибку – пропуск не понятных для него слов или тэгов. Это и хорошо и плохо. Так как, с одной стороны, в результате браузер постарается показать пользователю максимум текста, но, с другой стороны, в этот текст может попасть часть с тэгами и скриптами или не попасть собственно текст, если его браузер воспримет, например, как комментарий.
Стили.
Начиная с четвертой версии HTML, для профессинального составления документов рекомендуется пользоваться листами стилей. Цели, преследовавшиеся при создании листов стилей:
-
Листы стилей позволяют отделить содержимое гипертекста от его формата.
-
Для аппаратно совместимых компьютеров листы стилей позволяют задать больше многообразие форматов.
-
Лист стилей обеспечивает возможность повторного использования результата труда разработчика.
Задать стиль можно одним из следующих способов:
-
STYLE – атрибут любых тэгов-элементов BODY. Не рекомендуется часто использовать, т.к. он нарушает концепцию разделения содержимого и формата.
-
Элемент STYLE тэга HEAD. Первые две цели достигнуты, третья почти.
-
Атрибут STYLE тэга LINK указывает на внешний источник, содержащий лист стилей. Все три цели достигнуты.
Внимание! К концу курса у Вас должна получиться WEB-страничка. Рекомендуется создавать ее последовательно, добавляя текст и оформление в процессе изучения HTML. Далее в тексте методических указаний синим цветом изображены примеры. Можно скопировать текст примера в свой файл, сделать необходимые изменения, затем исследовать результат. Наконец, следует применить изучаемые конструкции самостоятельно.
-
HTML – общий подход, основная структура. Тэги <BR>, <P>, атрибут TITLE, тэг TITLE, атрибуты тэга BODY: BGCOLOR, BACKGROUND, LEFTMARGIN, RIGHTMARGIN, TOPMARGIN, BOTTOMMARGIN, BGPROPERTIES).
Цель: Знакомство с основной структурой HTML – документа. Некоторые тэги.
Задание: Пользуясь только текстовым редактором (например, встроенным в Win commander, или NotePad) составить текст, состоящий из обязательной структуры и тэгов. Просматривать результат браузером (Internet Explorer версии не ниже 4.0).
Последовательность выполнения:
-
Вызовите проводник (щелчок по кнопке «Пуск» правой кнопкой мыши, затем левой кнопкой мыши щелчок по слову «Проводник»). Создайте на диске D папку со своим именем.
-
Откройте блокнот и внесите следующий текст - обязательная структура HTML документа.
<HTML>
<HEAD>
<TITLE>мой сайт</TITLE>
</HEAD>
<BODY>
моя первая страничка
</BODY>
</HTML>
-
Сохраните текст из блокнота в виде файла с именем "index.htm". Для этого щелкните по пункту меню «Файл – сохранить», в появившемся окне перейдите в свою папку, введите имя файла, обязательно задайте тип файла "все файлы". Закройте блокнот.
-
Далее указываются действия, которые вам следует выполнять на каждом занятии со страничкой. В проводнике найдите свой файл с картинкой Internet Explorer. Если картинка другая, скорее всего вы ошиблись, набирая тип файла. Если это так, то переименуйте файл. Откройте файл двойным щелчком мыши. Запустится Internet Explorer, и в его окне вы увидите слова "моя первая страничка", а в заголовке окна – текст "мой сайт".
-
Теперь в меню найдите "вид – в виде HTML" (или view – source), щелкните – Вам будет показан исходный текст на HTML в блокноте. У вас одновременно работают Internet Explorer, проводник и блокнот.
-
Введите перед словом "первая" слово "замечательная". В меню блокнота щелкните по "файл – сохранить". Затем щелкните на панели задач на браузер с Вашей страничкой, в нем щелкните по "обновить" (refresh). Результат – текст на экране изменился: появилось слово "замечательная".
-
Ваша страничка – это содержимое тэга – контейнера <BODY>, поэтому далее вписывайте команды и текст в этот контейнер. Сначала изучите тэг «параграф или абзац». Каждый абзац изображается с новой строки, перед ним браузер делает пропуск. Заключите в контейнер <P> ранее набранный текст, кроме того введите еще несколько абзацев.
<P> На улице стояла прекрасная мокрая погода.</P>
<P> Капли падали ей на спинку, затекали под брюшко и за лапки, и это было восхитительно! </P>
-
Если в MSWord мы нажимаем на клавишу Enter для того, чтобы перейти к следующему абзацу или вставить пустую строку (что одно и то же), то здесь для того, чтобы заставить браузер перейти на новую строку требуется ввести команду <BR>. Очевидно, что это не контейнер! Обычно текст в документе браузер разрывает по своему усмотрению, учитывая размер окна, в котором воспроизводится текст. Тэг <BR> - это команда для браузера "в этом месте перейти на новую строку". В приведенном ниже примере первое предложение браузер покажет на одной строке, не смотря на то, что в блокноте текст набран на разных строках, а второе – на двух:
<P>Мама мыла раму,
а котик играл с клубком
</P>
<P>Мама мыла раму, <BR>
а котик играл с клубком <BR>
</P>
-
Изучим первый атрибут, то есть некоторую характеристику тэга. Вспомните, что атрибуты вносятся в тэг между угловыми скобками (см. теретический материал). Атрибут TITLE - это "всплывающая подсказка " (для Internet Explorer 4.0 и выше), может быть добавлен к любому тэгу. Внесите этот атрибут с разным текстом в тэги BODY, P и посмотрите на результат. Вы должны заметить, что когда мышка останавливается, на эране появляется всплывающая подсказка, одна из заданных вами. Внимание, тэг <BODY> в документе должен быть один, находиться он должен обязательно после тэга </HEAD> (если вы копируете текст из примеров, соблюдайте правила построения документа, описанные в пункте 2!).
<BODY TITLE= "стандартная подсказка">
….
<P TITLE="детское стихотворение">Мама на кухне стирала белье, <BR>
Котик усатый смотрел на нее.
</P>
-
Теперь вернемся к тэгу <TITLE>, уже имеющемуся в вашем документе. Это – тэг – заголовок окна документа. Допускается указывать только один заголовок. В тексте заголовка не должно быть абзацев, гиперссылок, разметок, что понятно, т.к. формат заголовка окна определяет операционная система, а не браузер! Измените заголовок Вашего окна, то есть измените текст, стоящий между <TITLE> и </TITLE>.
-
<BODY> - это тело документа. Несколько атрибутов позволяют задать общие характеристики для всей странички. Рассмотрим их по порядку. BGCOLOR – атрибут, задающий цвет фона документа в случае отсутствия картинки, или если картинка занимает не весь экран. Цвет задается либо словом, например, RED, либо в виде последовательности шестнадцатеричных цифр. Длина всей строки – 6 цифр. Причем первые две цифры определяют интенсивность красного цвета, вторые – зеленого, третьи – синего. Цифра 0 – нет цвета, цифра F – цвет наибольшей интенсивности. В примере задан синий цвет. Попробуйте найти нежные спокойные цвета для вашей страницы. Маленькая подсказка: скорее всего, вам потребуется интенсивность всех цветов задавать в диапазоне от СС до FF.
<BODY TITLE= "стандартная подсказка" BGCOLOR = "0000FF">
-
Рассмотрим еще атрибуты тэга BODY. LEFTMARGIN, RIGHTMARGIN, TOPMARGIN, BOTTOMMARGIN – атрибуты, определяющие отступы от края окна до текста слева, справа, сверху и снизу соответственно. Задайте разные значения у этих атрибутов, посмотрите на результат.
<BODY TITLE= "стандартная подсказка" BGCOLOR = "0000FF" LEFTMARGIN = 50 RIGHTMARGIN = 50 TOPMARGIN = 10 BOTTOMMARGIN = 10>
-
BACKGROUND – атрибут, указывающий файл-картинку, который будет использоваться в качестве фона документа. Допустимые форматы файлов – JPG и GIF. Файл должен находиться в Вашей папке, так что скопируйте его в эту папку.
<BODY TITLE= "стандартная подсказка" BGCOLOR = "0000FF" LEFTMARGIN = 50 RIGHTMARGIN = 50 TOPMARGIN = 10 BOTTOMMARGIN = 10 BACKGROUND="PIC.JPG">
-
BGPROPERTIES = FIXED - атрибут, фиксирующий (делающий неподвижной) картинку на фоне. Для того чтобы увидеть результат, надо сделать так, чтобы текст странички не умещался на одном экране. Проще всего добиться этого можно, скопировав содержимое документа несколько раз.
<BODY TITLE= "стандартная подсказка" BGCOLOR = "0000FF" LEFTMARGIN = 50 RIGHTMARGIN = 50 TOPMARGIN = 10 BOTTOMMARGIN = 10 BACKGROUND="PIC.JPG" BGPROPERTIES = FIXED >
-
Рекомендуется использовать непрерывный пробел (  Non-breaking spaces) вместо обычного пробела в тех случаях, когда Вы хотите предотвратить разнесение двух соседних слов на разные строки. Например, в выражении ‘Windows 2000’. Кроме того, набор из этих пробелов не сжимается браузером, таким образом, получаются большие пропуски между словами.
<P> Мы работаем в операционной системе Windows   2000. </P>
<P> Промежутки       между       словами</P>
-
Атрибуты тэга <FONT> задают размер шрифта и цвет. Обратите внимание на то, что размер задается в особых единицах измерения (число от 1 до 7). Цвет можно задавать и словом и в так называемой RGB нотации, т.е. шесть шестнадцатеричных цифр, по две обозначающих интенсивность цвета (красного, зеленого, синего). Устаревший тэг, далее мы научимся делать все это на современном уровне – с использованием таблиц стилей! Тэги FONT можно вкладывать друг в друга. Каждый последующий тэг временно отменяет атрибуты предыдущего.
<FONT COLOR=RED SIZE=5>
красный текст размера 5
<FONT COLOR=GREEN>
зеленый текст размера 5
</FONT>
красный текст размера 5
</FONT>
черный текст размера 3
<FONT COLOR=BLUE SIZE=7>
синий текст размера 7
</FONT>
-
Еще один атрибут для тэга <BODY>! Умалчиваемый цвет текста задается в атрибуте TEXT тэга BODY. Этот атрибут задает цвет для того текста, цвет которого не указан тэгами FONT.
<BODY TITLE= "стандартная подсказка" BGCOLOR = "0000FF" LEFTMARGIN = 50 RIGHTMARGIN = 50 TOPMARGIN = 10 BOTTOMMARGIN = 10 BACKGROUND="PIC.JPG" BGPROPERTIES = FIXED TEXT = "27CD99">
-
Список оформляется следующим образом. Сначала пишется тэг – контейнер <OL> </OL>, обозначающий нумерованный список, или <UL> </UL>, обозначающий маркированный список. Затем внутри этого контейнера пишется несколько тэгов – контейнеров <LI> </LI>, каждый из которых обозначает строку списка. Атрибутом TYPE можно задать вид нумерации. Можно определить начальный номер и т.д. Интересно, что в любой строке вы можете изменить тип нумерации!
<OL START=3>
<LI> первая строка в списке, возможно очень длинная,
но браузер сам свернет ее правильно.
<LI> вторая строка
</OL>
<BR> В кастрюлю отправились
<UL TYPE=DISK >
<LI> капуста
<LI> картошка
<LI> морковка
<LI> горох
<LI> петрушка
<LI> и свекла …
<LI> ОХ!
</UL>
-
Контейнер, вся информация в котором центрируется относительно окна браузера. Попробуйте центрировать какой-нибудь текст, список.
<CENTER>Раздел 1</CENTER>
-
Разделительная линия. Можно задать ее цвет и ширину. Вставьте несколько линий в разных местах вашего документа.
<HR SIZE=4>
-
Тэг <IMG> вставляет картинку в документ. Атрибут SRC задает имя файла – картинки. Файл с картинкой следует скопировать в свою папку! Можно попытаться растянуть или сжать картинку до указанного размера с помощью атрибутов WIDTH и HEIGHT. Рекомендуется задавать атрибут ALT, который содержит текст, показываемый и в качестве всплывающей подсказки и вместо картинки, если по какой-то причине она не может быть показана. Уточним последнее, рассмотрев некоторые особенности работы браузеров. Для ускорения получения файла по Internet, пользователи часто отключают передачу картинок и передачу звуковых вставок. В IE 5.0, например, это делается в меню «настройка – отображать рисунки». В полученном тексте, таким образом, вместо картинок браузер либо покажет специальный значок «неизвестная картинка», либо высветит Ваш альтернативный текст, что конечно же, предпочтительней! Атрибуты WIDTH и HEIGHT при совместном использовании позволяют программам просмотра зарезервировать место на экране для изображения еще до того, как они будут переданы по сети. Это позволяет пользователю начать чтение, пока передача данных еще продолжается. Эти атрибуты не предназначены для автоматического изменения размера изображения браузерами. Хотя некоторые браузеры могут масштабировать изображение в соответствии с атрибутами WIDTH и HEIGHT, не полагайтесь на это. Таким образом, они должны задавать реальный размер изображения. (Используйте подходящую программу для определения размеров в пикселях и масштабирования изображения, если это потребуется.)
-
Атрибут ALIGN может вывести картинку из уровня потока символов и оформить ее как отдельный блок, обтекаемый текстом. Без этого атрибута картинка как будто занимает место одной большой буквы. Значения атрибута ALIGN имеют следующий смысл: ALIGN=LEFT - перемещает изображение к текущему левому краю, временно изменяя этот край так, чтобы последующий текст расположился вдоль правой стороны изображения. ALIGN=RIGHT - перемещает изображение к текущему правому краю, временно изменяя этот край так, чтобы последующий текст переместился вдоль левой стороны изображения. Вставьте картинку в документ, как показано в примере. Не забудьте сначала скопировать файл – картинку в свою папку и изменить значение атрибута SRC на имя вашего файла – картинки. Убедитесь в том, что в первом способе картинка вставляется как буква в текст, а во втором – становится самостоятельным объектом, обтекаемым текстом.
<P> Текст, внутрь которого
<IMG SRC="SEA.JPG" ALT="здесь Вы видите море" WIDTH=100 HEIGHT=100>
вставлена картина.
</P>
<IMG SRC="SEA.JPG" ALT="здесь Вы снова видите море"
WIDTH=100 HEIGHT=100 ALIGN = LEFT>
<BR> Этот список расположен справа от картины
<UL TYPE=DISK >
<LI> дельфины
<LI> киты
<LI> акулы
<LI> спруты
<LI> чайки
<LI> черепахи
<LI> рыбы
</UL>
-
Замечание к тэгу BR. Теперь, когда у нас картинка на экране, возникает вопрос о том, где будет располагаться строка после принудительного разрыва. Атрибут CLEAR тэга BR указывает следующее: «если CLEAR=left, то произойдет разрыв строки, и браузер будет отыскивать, двигаясь вертикально вниз, строчку, на которой нет слева картинки, и только в ней продолжит текст». Аналогично получится для значения right (справа) и all (всюду). У тэга <BR> есть атрибут CLEAR, который требует перейти на новую строку так, чтобы с заданной стороны не было рисунка.
<IMG SRC=”SEA.JPG” ALT=”здесь Вы еще раз видите море”
WIDTH=300 HEIGHT=300 ALIGN = LEFT>
<BR> Этот список расположен справа от картины
<UL TYPE=DISK >
<LI> дельфины
<LI> киты
<LI> акулы
</UL>
<BR CLEAR=LEFT> А этот расположен ниже картины
<UL TYPE=DISK >
<LI> спруты
<LI> чайки
<LI> черепахи
<LI> рыбы
</UL>
-
Заголовок n-того уровня. Документ можно структурировать, разбив его на части с помощью заголовков от 1 до 6 уровня. Важно, что размер букв выбирается браузером самостоятельно, поэтому получается, что заголовки уровней 4-6 очень малы и трудно читаемы. Добавьте в ваш документ текст из примера ниже, но вместо многоточий введите некоторый свой текст.
<H1> Раздел 1. Технические характеристики автомобиля.</H1>
<H2> Глава 1. Двигатель.</H2>
…
<H2> Глава 2. Ходовая часть.</H2>
…
<H1> Раздел 2. Описание внешнего вида.</H1>
<H2> Глава 1. Модели кузова.</H2>
…
<H2> Глава 2. Передняя панель.</H2>
…
-
Таблица формируется следующим образом: сначала надо задать контейнер <TABLE>. Затем положить в него один или несколько контейнеров <TR>, каждый из которых задает строку таблицы. А в каждую строку можно положить некоторое количество тэгов - контейнеров <TH> или <TD>, которые обозначают ячейки таблицы, причем ТН – заголовочные ячейки, а <TD> - обычные данные. Можно перед первой строкой задать тэг - контейнер <CAPTION> - заголовок таблицы. Атрибут BORDER тэга TABLE задает ширину рамки таблицы. Вставьте в ваш документ таблицу, попробуйте добавить в таблицу строку, добавить колонку.
<TABLE BORDER=3>
<CAPTION> Список абонентов</CAPTION>
<TR> <TH> имя <TH> дата рождения <TH> где учится
<TR> <TD> Иванов П.И.<TD> 01.04.80 <TD> ВИ РГТУ
<TR> <TD> Петров Н.А.<TD> 23.09.81<TD> Юридический лицей
<TR> <TD> Сидоров Р.В.<TD> 13.08.82<TD> ----
</TABLE>
-
Объединение ячеек в HTML задается следующим образом: ячейка может занимать место нескольких ячеек по горизонтали, тогда у нее задается атрибут COLSPAN, значение которого равно количеству покрываемых ячеек вправо. Аналогично атрибут ROWSPAN задает количество покрываемых ячеек вниз. Попробуйте сделать объединение ячеек по горизонтали так, как указано в примере, и самостоятельно – по вертикали.
<TABLE BORDER=7>
<CAPTION> План по ремонту автомобильных дорог</CAPTION>
<TR><TH COLSPAN=3> 1 квартал </TH> <TH COLSPAN=3> 2 квартал </TH> </TR>
<TR>
<TD> январь</TD><TD> февраль </TD><TD> март </TD>
<TD> апрель </TD><TD> май </TD><TD> июнь </TD>
</TR>
<TR>
<TD>100</TD> <TD>120</TD><TD>130</TD>
<TD>150</TD> <TD>150</TD><TD>80</TD>
</TR>
</TABLE>
-
Бегущая строка вносит в документ некоторое оживление. Вы можете задавать размер этой строки, цвет фона, можете расположить на нее текст, один или несколько рисунков, гиперссылок. Атрибуты тэга задают стиль движения объекта, направление, количество повторов и т.п. Рассмотрим эти атрибуты: ALIGN – выравнивание в строке (возможные значения: left – по левому краю, right – по правому краю окна); BEHAVIOR – поведение (scroll – текст перемещается в одном направлении, slide – текст, достигнув конца окна, останавливается, alternate – текст отражается от краев окна); BGCOLOR – цвет фона (можно задавать, как обычно, или словами или в виде цифр); HEIGHT – высота строки, задаваемая или числом точек или в процентах; LOOP – количество повторов пробежек по экрану, если не указан, то повторяется бесконечно; SCROLLAMOUNT – величина шага, на который перемещается текст за один раз; SCROLLDELAY – задержка времени перед следующим шагом; VSPACE – отступ (пустое место) сверху и снизу текста от краев выделенной полосы; WIDTH – ширина полосы для бегущей строки. Попробуйте внести в бегущую строку текст, картинку (небольшую!), поменяйте атрибуты, добиваясь большей или меньшей скорости перемещения и т.д.
<MARQUEE ALIGN =LEFT BEHAVIOR=scroll BGCOLOR="FCAD6E"
HEIGHT =50 LOOP=10 SCROLLAMOUNT=5 SCROLLDELAY=1
VSPACE =10 WIDTH =500>
ПРИВЕТ!
</MARQUEE>
Вопросы: Hn, TABLE, TR, TD, TH, MARQUEE.
Основная структура HTML страницы. Тэг BODY, его место и атрибуты. Всплывающая подсказка. Абзац. Задание цвета фона и цвета текста. Фиксирование картинки на фоне.
Выделение цветом, списки, разделительные линии, центрирование, вставка картинок. Обеспечение свободного места слева, справа или с обех сторон.