align
advertisement
Язык разметки гипертекста (HTML) - это набор платформеннонезависимых стилей, которые определяют различные компоненты документа World Wide Web. Конкретные стили указываются при помощи специальных тэгов разметки. Этот язык изобрел Тим Бернерс-Ли (Tim Berners-Lee), сотрудник Европейской лаборатории физики частиц в Женеве (CERM). HTMLдокументы представляют собой обычные текстовые (ASCII) файлы, которые могут создаваться в любом текстовом редакторе (например, vi на рабочих станциях UNIX или Notepad на ПК с системой Windows). Для этой цели также можно использовать любой текстовый процессор, сохраняя документы в формате "текст с разбиением на строки". Кроме того, существует специализированное ПО, называемое HTML-редакторами. Инструментарий для авторских разработок Существует множество HTML-редакторов, которые работают по принципу полного соответствия (WYSIWYG). Такими, например, являются программы HotMetal Pro, Front Page и Adobe PageMill. Изучив основы работы с тэгами языка HTML, можно попробовать воспользоваться одним из них. Прежде чем определить, насколько полезным в вашей работе будет использование WYSIWYG-редактора, неплохо было бы в достаточной степени освоить язык HTML для самостоятельного создания Web-документов. Начав работу с WYSIWYG-программой, можно воспользоваться простым текстовым редактором для создания общего HTML-кода. Тэг Каждый HTML-документ содержит различные структурные компоненты (элементы), определяемые тэгами. Примерами таких элементов являются заголовки, таблицы, абзацы и списки. Элементы могут включать в себя текст, другие элементы, или же и то, и другое. HTML-тэги состоят из левой угловой скобки (<), имени тэга и правой угловой скобки (>). Тэги обычно бывают парными (например, <р> и </р>), что позволяет указывать на начало и конец инструкции. Тэг, завершающий действие инструкции, выглядит так же, как и начальный, за исключением того, что перед его именем внутри скобок стоит косая черта (/) . Некоторые элементы могут также включать дополнительную информацию в виде атрибутов начального тэга. Например, изображения можно выравнивать (по верхнему или нижнему краю, а также по центру), включая соответствующий атрибут в HTML-код, описывающий изображения. Примечание: Язык HTML не зависит от регистра символов. <TITLE> эквивалентно <title> или <TiTlE>. Не все тэги поддерживаются всеми Web-навигаторами. Если навигатор не поддерживает какого-либо тэга, то обычно он просто пропускает его. Необходимые элементы Каждый документ в формате HTML должен содержась определенный набор стандартных тэгов. Документ состоит из заголовка и тела документа. Заголовок содержит название документа, а тело - его непосредственный текст состоящий из абзацев, списков и других элементов. Программы-навигаторы созданы в соответствии со спецификациями HTML и SGML (Simple General Markup Language) и ожидают, что документы будут содержать определенную специфическую информацию. Минимальный HTML-документ требует использования следующих тэгов: <HTML> <HEAD> <ТIТLЕ>Мой документ HTML</TITLE> </HEAD> <BODY> <Н1>Заголовок</Н1> <Р>Это первый абзац</Р> <Р>Это второй абзац</Р> </BODY> </HTML> В этом примере необходимыми элементами являются лишь тэги <HTML>, <HEAD>, <TITLE> и <BODY>, a также соответствующие им завершающие тэги. Имеет смысл создать файл-шаблон с этими тэгами, поскольку их придется включать в каждый HTML-файл. Чтобы в текстовом виде просмотреть HTML-файл, информацию которого отображает программа-навигатор, выберите в меню этой программы команду ViewSourse (или ее эквивалент Просмотр HTML-кода). Содержимое файла, со всеми HTML-тэгами, будет отображено в новом окне. Это является хорошим способом увидеть использование HTML и изучить методы и конструкции этого языка. Конечно, код на HTML может и не быть технически правильным. Познакомившись с HTML и просмотрев различные печатные и электронные справочники по этой теме, вы научитесь отличать "хороший" HTML-код от "плохого". <HTML> Этот элемент сообщает программе-навигатору, что файл содержит информацию, закодированную при помощи языка HTML. На это также указывает расширение файла .html, которое необходимо использовать. Если имена файлов в вашей системе ограничены форматом 8.3, то есть 8 символов имени и 3 символа расширения, например, bright id.htm, в качестве расширения файла используйте -htm. <HEAD> Элемент <HEAD> (голова) указывает на фрагмент HTML-документа, который содержит его название. Оно отображается в виде части окна навигатора. <TITLE> Элемент <TITLE> содержит непосредственно название документа и определяет глобальный контекст его содержимого. Оно отображается в каком-либо месте окна программы-навигатора (обычно в верхней части), однако не в текстовой области. Название документа также является тем именем, которое отображается в списке избранных страниц или закладок навигатора, а также используется при WAlS-поиске на сервере. Следовательно, его текст должен быть содержательным, уникальным и кратким. Название документа должно иметь длину не более 64 символов. <BODY> Самая большая часть HTML-документа - это часть <BODY> (тело), содержащая собственно информацию документа. Эта часть HTML-кода отображается в текстовой области окна программы-навигатора. В теле документа используются тэги, перечисленные ниже. Заголовки В языке HTML существует шесть уровней заголовков с номерами от 1 до 6. Заголовок 1 является заголовком самого верхнего уровня и отображается крупнее остальных. В целом же, для заголовков используются шрифты более увеличенного размера и жирного начертания, нежели основной текст документа. Первый заголовок в любом документе должен помечаться тэгом Элемент заголовка имеет следующий синтаксис: <Нх>Текст заголовка</Нх> где х определяет уровень заголовка от 1 до 6. Разумеется, в HTML- документе не следует пропускать уровни заголовков или нарушать порядок их следования. Например, не нужно начинать документ с заголовка третьего уровня (<НЗ>), а после него использовать заголовок первого уровня (<Н1>). Пример: <h1>Домашние животные</h1> Рассказываем о домашних животных вообще <h2>Собаки</h2> Общее о собаках <h3>Овчарки</h3> … FONT Элемент <FONT> пишется после тэга <BODY> и определяет размер, цвет и гарнитуру шрифта для всей странички. Атрибуты: Указывает либо число в диапазоне от 1 до 7, указывающее размер шрифта, либо относительное значение, например, +1, указывающее, на сколько шрифт должен быть крупнее окружающего. Значение SIZE=3 принято по умолчанию и для большинства браузеров означает размер, равный 12 пунктам. COLOR Указывает цвет шрифта. Например, COLOR="#009F00" задает темно-зеленый цвет. SIZE FACE Указывает гарнитуру шрифта. Например, FACE="Times New Roman" задает тип шрифта Times New Roman. Абзацы В отличие от тех документов, которые готовятся с помощью большинства текстовых процессоров, символы перевода строк в HTMLфайлах не имеют значения. Не нужно беспокоиться о том, какую длину будут иметь строки текста, хотя лучше не создавать строк длиннее 72 символов. Перенос по словам может происходить в любом месте исходного файла. Несколько последовательных пробелов преобразуются программойнавигатором в один пробел. Обычный абзац может выглядеть следующим образом: <P>Winc, оказывает содействие организациям любого уровня при размещении их информации в сети Интернет. Мы подобрали специальный коллектив профессионалов, технических писателей, художников и программистов, чтобы предложить вам высококачественный дизайн WWW-страниц и их талантливую планировку. Мы также гордимся своими глубокими познаниями, которые позволяют сделать World Wide Web жизненно важным средством маркетинга и отвечают нынешним требованиям бизнеса. </Р> В приведенном выше исходном файле между предложениями вставлен переход к новой строке. Web-навигатор пропускает этот символ и начинает новый абзац только лишь тогда, когда встречает тэг <Р>. Поэтому приведенный выше текст появится в виде одного абзаца. Примечание: Начало нового абзаца следует указывать при помощи тэга <Р>. Навигатор игнорирует все отступы и пустые строки, которые имеют место в исходном тексте. Без тэгов <Р> документ превращается в один большой абзац. Исключением является только текст, помеченный как "форматированный", что будет рассмотрено ниже. Для того, чтобы сделать документ удобным для чтения, размещайте заголовки на отдельных строках, используйте одну или несколько пустых строк перед началом нового раздела, отделяйте абзацы пустыми строками (в дополнение к тэгам <Р>) . Ваши действия окажутся полезными при редактировании файлов (программа-навигатор пропустит лишние пробелы, поскольку в ней используется свой собственный набор правил, не зависящий от пробелов, включенных в исходный файл). Примечание: При желании закрывающий тэг </Р> можно пропустить. Программа-навигатор, встречая тэг <Р>, автоматически считает его завершением предыдущего абзаца. Используйте тэги <Р> и </Р> в качестве контейнера, позволяющего центрировать абзацы путем включения в исходный файл атрибута выравнивания ALIGN = , как это показано в следующем примере: <Р ALIGN=CENTER> Тест на центрирование абзаца. </Р> Эта строка будет отображена как: Тест на центрирование абзаца. Списки HTML поддерживает списки трех видов: ненумерованные, нумерованные и списки определений. Можно создавать и вложенные списки, однако эту функцию следует использовать умеренно, поскольку слишком большое число вложенных элементов может затруднить чтение документа. Ненумерованные списки Для создания ненумерованного маркированного списка: 1. Начните список с открывающего тэга <UL> (тэг ненумерованного списка). 2. Введите тэг <LI> (элемент списка), за которым следует отдельный элемент; закрывающий тэг </LI> не требуется. 3. Закончите список закрывающим тэгом </UL>. Вот пример списка из трех пунктов: <UL> <LI> Книги <LI> Газеты <LI> Журналы </UL> Этот список будет отображаться следующим образом: Книги Газеты Журналы Элементы <LI> могут содержать несколько абзацев. Абзацы необходимо указывать при помощи тэга <Р>. <UL> <LI> Строка 1<BR> <LI> Строка 2<BR> <LI> Строка 3 </UL> <P> <LI>Строка 4<BR> <LI>Строка 5<BR> <LI>Строка 6 </UL> <P> <LI>Строка 7<BR> <UL> <LI>Строка 8<BR> <LI>Строка 9<BR> <LI>Строка 10 </UL> </UL> Нумерованные списки Нумерованные списки, также называемые упорядоченными, идентичны ненумерованным, за исключением того, что вместо тэга <UL> используется тэг <OL>. Элементы списка выделяются при помощи того же тэга <LI>. Следующий HTML-код: <OL> <LI> Аудио <LI> Видео <LI> CD-Rom </OL> приводит к выводу следующего текста: 1. Аудио 2. Видео 3. CD-Rom Атрибуты: TYPE Указывает на тип маркера. START Допустимые значения для ненумерованных списков: - disk - закрашенный шарик - circle - "пустой шарик - square – квадратик Допустимые значения для нумерованных списков: - A - заглавные буквы - a - строчные буквы - I - прописные римские цифры - i - строчные римские цифры - 1 - арабские цифры Указывает на начальное значение нумерованного списка Вложенные списки Списки могут быть вложенными. В одном элементе списка может содержаться несколько абзацев, каждый из которых будет включать вложенный список. Вот пример вложенного списка: <UL> <LI> Трое подчиненных: <UL> <Ll> Коля <LI>Таня <LI> Миша </UL> <LI> Иванов и Петров: <UL> <LI> Иван Петров <LI> Петр Иванов </UL> </UL> Этот вложенный список будет отображаться следующим образом: Трое подчиненных: Коля Таня Миша Иванов и Петров: Иван Петров Петр Иванов Принудительные переводы строки С помощью тэга <BR> выполняется переход к новой строке, причем дополнительного пространства между строками не образуется. Использование элементов <Р> для коротких строк типа почтовых адресов приводит к появлению нежелательных промежутков. Например, при использовании тэга <BR>: 410073, Саратов<BR> Ул. Горького, 40<BR> СОУНБ<BR> результат будет следующим: 410073, Саратов Ул. Горького, 40 СОУНБ <br><br><br> Интервал в три строки Тэг <B> Использование Используется для отображения текста шрифтом полужирного начертания <I> <TT> BIG Используется для отображения текста курсивом Используется для отображения текста шрифтом пишущей машинки, т.е. шрифтом фиксированной ширины. Используется для отображения текста более крупным размером SMALL Используется для отображения текста более мелким размером U Используется для отображения текста с подчеркиванием Пример: <b>Жирный текст</b> <i>Наклонный текст</i> <b><i>Жирный наклонный текст</i></b> <big>большой</big> и <small>маленький</small> текст <u>Подчеркнутый</u> текст Ссылки Основное достоинство языка HTML заключается в возможности связывать текст и изображения одного документа с другим документом или его разделим. Программой-навигатором указанный текст или изображение выделяются определенным цветом (текст дополнительно подчеркивается), обращая внимание пользователя на то, что в данном фрагменте документа располагается гипертекстовая ссылка. Часто этот термин сокращается до "гиперссылка" или просто "ссылка". Единственным HTML-тэгом, который используется для обозначения гипертекстовых связей, является тэг <А>. Это название произошло от слова "anchor" ("якорь"). Для того, чтобы вставить якорь в документ: 1. Начните якорь с <А (после А введите пробел). 2. Укажите документ, на который выполняется ссылка, введя параметр HREF" "имя_файла", и поставьте после этого закрывающую угловую скобку (>), 3. Введите текст, который будет служить гипертекстовой ссылкой в текущем документе. 4. Введите завершающий тэг якоря: </А> (пробел перед ним не требуется). Пример: <a href="http://library.sgu.ru/sounb">Саратовская областная универсальная научная библиотека</a> <a href="mailto:library@freeline.ru">Щелкните, чтобы послать письмо!</a> Этот элемент в первом случае делает фразу "Саратовская областная универсальная научная библиотека" ссылкой на сайт СОУНБ. Ссьлки_ mail to Отправление электронной почты какому-либо конкретному человеку или по определенному адресу можно упростить, вставив в гиперссылку атрибут MAILTO. Встроенные изображения Большинство программ-навигаторов имеет возможность показывать включенные в документ изображения (изображения, расположенные рядом с текстом) в одном из следующих трех форматов: •X Bitmap (XBM) •GIF •JPEG На обработку каждого изображения требуется время, что замедляет первоначальное отображение страницы. К выбору изображений и определению их количества на странице следует относиться аккуратно. Чтобы включить в документ введите: <img src=имя изображения> встроенное изображение, Если файл изображения имеет формат GIF, имя файла в имени изображения должно оканчиваться на .gif. Имена файлов изображений JPEG — на .jpeg или .jpg. Атрибуты размеров изображения В тэги <IMG> следует включать два атрибута, сообщающие программенавигатору размер изображений при их загрузке с текстом документа. Атрибуты HEIGHT (высота) и WIDTH (ширина) позволяют навигатору отвести для изображений соответствующее пространство по мере загрузки оставшейся части файла (размер изображения в пикселях можно узнать при помощи программы обработки изображений, например Adobe Photoshop). Определение атрибутов изображении также позволит ускорить загрузку изображений, поскольку. Web-навигатору на клиентском рабочем месте не придется вычислять их размер. Например, для того, чтобы включить в файл логотип компании, с указанием размеров изображения, введите: <IMG SRC=logo,gif HEIGHT=100 WIDTH=65> Кроме того, можно задать размеры в процентном соотношении относительно экрана компьютера. Выравнивание изображений Существуют гибкие средства для управления способом включения изображений в HTML-документ. Изображения могут быть отделены от текста, выровнены по правому или по левому краю или же отцентрированы. Их также можно выравнивать относительно текста. Попробуйте различные варианты, чтобы увидеть, какой из них лучше подойдет для представления ваших данных. Выравнивание текста относительно изображения По умолчанию текст выравнивается относительно нижней части изображения. Также изображения можно выровнять относительно верхней части абзаца или его центра, установив для атрибута ALIGN значения ТОР или CENTER соответственно. Примечание: Некоторые навигаторы выравнивают относительно изображения только одну строку абзаца, а остальной текст выводят рядом с его нижней частью. Изображения, не связанные с текстом Чтобы вывести изображение, с которым не связано никакого текста (например, логотип компании), разместите его в отдельном абзаце. Воспользуйтесь атрибутом ALIGN для абзаца, чтобы Задать для изображения требуемое выравнивание (по центру, левому или правому краю окна Webнавигатора) <P ALIGN=CENTER> <IMG SRC ="logo.gif"> В этом примере изображение будет расположено по центру, а следующий за ним текст будет выравниваться влево Цвет фона По умолчанию Web-навигаторы отображают текст черным цветом на сером фоне. Однако при желании можно изменить оба этих параметра. Некоторые авторы HTML-документов выбирают цвет фона и приводят его в соответствие с измененным цветом отображаемого текста. Всегда просматривайте результаты подобных изменений и убедитесь в том, что страница сохранит читаемость. Например, многие находят, что красный текст трудно воспринимается на черном фоне. Цвет текста, ссылок, просмотренных ссылок и активных ссылок можно изменять при помощи соответствующих атрибутов тэга <BODY>. Например, введите: <BODY BGCOLOR="#000000" TEXT="#FFFFFF" LINK="#9690CC"> Это приведет к созданию черного фона (BGCOLOR) белого текста (TEXT) и серебристых ссылок (LINK). Шестизначная комбинация цифр и букв представляет цвета, определяя их значения в системе RGB (красный, зеленый, синий). Эти шесть символов на самом деле являются последовательностью трех двузначных чисел, представляющих насыщенность красного, зеленого и синего цветов шестнадцатеричными значениями в диапазоне 00-FF. Например, 000000 представляет черный (цвет полностью отсутствует), FFOOOO — ярко- красный, a FFFFFF — белый (полностью насыщенный всеми тремя цветами). Внешние изображения/ звуки и анимация Когда пользователь активизирует ссылку, содержащую слово или встроенную в документ уменьшенную версию изображения, может возникнуть необходимость в открытии отдельного документа. Это называется "внешним изображением" (external image), и полезно в тех случаях, когда не следует увеличивать время загрузки основного документа, встраивая в него крупные изображения. Например, чтобы увидеть фото библиотеки введите: <a href="library.jpg>Фото</a> Кроме того,, для ссылки на крупное изображение можно использовать изображение меньшего размера. Введите: <А HREF="Biglmage.gif"> <1MG SRC="Smalllmage.gif"></A> Пользователь увидит небольшое изображение (Smalllmage.gif) щелкнув на нем, откроет файл с увеличенным изображением (Biglmage.gif). и, Таблицы Элемент Описание <TABLE>...</TABLE> Определяет HTML-таблицу. При наличии атрибута BORDER Web-навигатор будет отображать таблицу с рамкой. <CAPTION>. . .</САРТION> <TR>...</TR> <TH>...</ТН> <TD>...</TD> Определяет поле подписи для названия таблицы. По умолчанию название отцентрировано в верхней части таблицы. Чтобы расположить название под таблицей, можно воспользоваться атрибутом ALIGN = BOTTOM. Замечание: в названии могут использоваться любые тэги разметки. Определяет строку таблицы. Для всей строки можно задать принимаемые по умолчанию атрибуты горизонтального ALIGN (LEFT, CENTER, RIGHT) и/или вертикального VALIGN (TOP, MIDDLE, BOTTOM) выравнивания Определяет ячейку с заголовком. По умолчанию текст в этой ячейке отцентрирован и выделен шрифтом полужирного начертания. Ячейки заголовка могут содержать также и другие атрибуты, определяющие характеристики отображения ячейки и ее содержимого. Определяет ячейку с данными таблицы. По умолчанию текст в этой ячейке по горизонтали выровнен влево, а по вертикали-отцентрирован. Ячейки данных могут содержать и другие атрибуты, определяющие характеристики отображения ячейки и ее содержимого. Элемент ТABLE Элемент TABLE является контейнером, определяющим таблицу. Все прочие элементы таблицы должны быть вложенными в него. Допускается также вложение таблиц одна в другую, т.е. содержимым ячейки может быть другая таблица. Пример: <table border=2 cols=2> <tr> <th>Заголовок столбца 1</th><th>Заголовок столбца 2</th> </tr> <tr> <td>Ячейка столбца 1, ряд 1</td><td>Ячейка столбца 2, ряд 1</td> </tr> <tr> <td> Ячейка столбца 1, ряд 2</td><td> Ячейка столбца 2, ряд 2</td> </tr> </table> Заголовок столбца 1 Ячейка столбца 1, ряд 1 Ячейка столбца 1, ряд 2 Заголовок столбца 2 Ячейка столбца 2, ряд 1 Ячейка столбца 2, ряд 2 Атрибуты элемента TABLE: Указывает ширину таблицы. Для указания ширины можно использовать как WIDTH ALIGN BGCOLOR BORDER абсолютные значения (например, пиксели), так и относительные (в процентах от ширины окна браузера). Указывает выравнивание всей таблицы в окне браузера Может принимать следующие значения: - center - выравнивает по центру - left - выравнивает по левому краю (принят по умолчанию) - right - выравнивает по правому краю Указывает цвет фона таблицы Указывает ширину рамки вокруг таблицы в пикселях. Если значение установлено в 0, то рамки вокруг ячеек не рисуются. Задает расстояние между соседними ячейками таблицы CELLSPACING CELLPADDING Задает отступ между внутренней границей ячейки и ее содержимым. BACKGROUND Задает адрес фонового рисунка для таблицы BORDERCOLOR Задает цвет рамки Элемент TR Этот элемент является контейнером для группы ячеек в строке. Все ячейки в таблице должны находиться внутри элементов TR. Количество строк в таблице соответствует числу элементов TR. Пример: <table> <tr> … строка 1 <tr> … строка 2 </table> Атрибуты элемента TR: Определяет горизонтальное выравнивание данных и текста во всех ячейках ALIGN CHAR VALIGN строки. Допустимые значения: - center - выравнивает по центру - left - выравнивает по левому краю (принят по умолчанию) - right - выравнивает по правому краю - justify – выравнивает по обоим краям (по ширине ячейки) - char – выравнивает относительно указанного символа Определяет символ, относительно которого следует выравнивать текст определяет выравнивание по вертикали во всех ячейках строки. Допустимые значения: - top – выравнивание по верхнему краю ячейки - middle – выравнивание по центру ячейки - bottom – выравнивание по нижнему краю ячейки Задает адрес фонового рисунка для строки таблицы BACKGROUND BORDERCOLOR Задает цвет рамки Элементы TH и TD Эти элементы служат для обозначения ячейки. Причем TH используется для ячеек-заголовков, а TD – для ячеек-данных. Если не указано иначе, но текст, расположенный в TH, будет выводиться жирным шрифтом с выравниванием по центру, а в TD – нормальным начертанием с выравниванием по левому краю. Эти элементы всегда должны быть вложенными в контейнер TR. Пример: <table> <tr><th>строка 1, заголовок 1</th><th>строка 1, заголовок 2</th></tr> <tr><td>строка 2, данные 1</td><td>строка 2, данные 2</td></tr> </table> Атрибуты элемента TH, TD: Определяет протяженность ячейки в длину, т.е. на сколько столбцов данная COLSPAN ROWSPAN WIDTH ячейка протягивается Определяет протяженность ячейки в высоту, т.е. на сколько строк данная ячейка распространяется. Задает рекомендуемую ширину ячейки (либо в пикселях, либо в процентах)
