«TeachPro™ WEB-дизайн Мультимедиа Технологии и Дистанционное Обучение МОСКВА 2006 Мультимедийный самоучитель на CD-ROM: TeachPro™ WEB-дизайн/Под ред. Катхановой Ю.Ф., Гринберг Г.С., Антонова Г., Соловьева И., Суховерхова ...»

Примечание: вы можете вообще не определять сайт, если все используемые изображения у вас заранее собраны в одну директорию и при этом вы не собираетесь пользоваться встроенным FTP-клиентом, а созданные HTMLфайлы сохраняете в этой же директории. В данном случае важно сохранить файл до вставки первого изображения (иначе путь к изображению будет прописан некорректно). Следующий урок мы начнем с форматирования текста.

Форматирование текста. На данном уроке мы познакомимся с приемами работы с текстом. Как вы, наверное, уже заметили, что основа практически любой страницы — это текст. Создайте новую страницу и наберите в ней любой текст. Если текст уже готов и находится, в каком либо текстовом редакторе то его можно импортировать. Сохраните эту страницу дав ей какоелибо имя. Теперь переёдём к самому форматированию текста. Функции, которые необходимы для этого находятся в следующем меню Text. Здесь мы видим множество инструментов, которые предназначены для форматирования текста: это стили начертания, размеры шрифта, цвет и т. д. Но гараздо проще работать с отдельным меню которое всегда перед глазами. Такая возможность в Macromedia Dreamweaver предусмотрена она находится в меню window — Properties. Это меню форматирования текста. Сейчас оно находится в верхнем левом углу рабочего файла и закрывает текст. Его можно с помощью нажатия левой клавиши мыши перетащить в любое свободное место.

Теперь давайте подробнее остановимся на самом меню форматирования текста и его функциональных особенностях. Надо сказать, что во всех программах которые поддерживают функцию форматирования текста есть похожее меню. И если человек умеет хорошо работать в текстовом редакторе или в графическом, но с текстом то работа с текстом в Macromedia Dreamweaver у него не должна вызывать затруднений. Теперь непосредственно приступим к работе с текстом, будем его форматировать. Для начала его необходимо весь выделить или ту часть, с которой вы хотите работать.

Первое на чём остановимся это функция формат, изменение текста без измене5ния стиля начертания или просто говоря заголовок. Особенность работы с этим инструментом в Dreamweaver состоит в том, что он работает с текстом вообще, выделен тот или нет.

Следующее на чём мы остановимся это функция изменения стиля начертания текста без изменения его размеров. Следующая функция отвечает за размер текста. Подставляя цифровые значения в окошечко мы видим как изменяется текст. Следующая функция это цвет текста. Здесь мы видим два окошечка, в первом отображается палитра цветов, а во втором цифровое значение цвета. С помощью следующих двух кнопок тексту можно придать либо жирное начертание, либо наклонное. Следующие три кнопочки отвечают за расположение текста: селевого края, по центру, справного края. Снизу под инструментом выравнивания расположена функция маркирования текста.

Маркирование текста может быть цифровым или маркированным. О функциях расположенных в нижней левой части меню мы поговорим на одном из следующих уроках. Предназначены они для гиперссылок.

На этом уроке мы в крациях коснулись проблем по работе с текстом в программе Dreamweaver более полную и точную информацию можно узнать из следующих уроков.

непосредственной правки HTML-кода. Мы переключимся в промежуточный режим, когда виден документ и соответствующий ему документ, так нам будет удобнее разобраться, что где находится. Итак перед нами HTML-код в чистом виде. Вглядитесь в него, вы найдёте там фрагменты своего документа, а также массу чужеродных фрагментов заключённых в угловые скобки. Эти фрагменты называются тегами с их помощью производится гипертекстовая разметка. Тег состоит из названия заключённого в угловые скобки.

Название тегов могут писаться как строчными, так и прописными буквами.

У тегов есть вторая половина дополненная косой чертой и такие поры окружают текст документа, например заголовок окружён тегом Н1. это называют элементом, элемент и есть часть разметки. Например элемент Н помечает текст как заголовок. В браузере такой текст будет отличаться от остального. Давайте попробуем изменить разметку текста, вместо Н1 напишем Р. В панели свойств появляется сообщение что код был изменён и для отображения изменений нужно нажать кнопку refresh F5.

Нажимаем и видим что вместо заголовка получили обычный абзац текста.

Итак элемент состоит из открывающих тегов, данных и закрывающих тегов.

Назначение тегов обозначение границы элемента. Очень важно, что бы открывающему тегу соответствовал закрывающий. Бывают случаи когда элемент состоит только из открывающего тега, это случается когда элемент, предназначенный для разметки текста несёт самостоятельную нагрузку. Таким элементом является img src, обозначающий вставку изображения.

Элементы могут быть вложенными друг в друга пример элемент img вложен элемент р обозначающий абзац, можно вложить в этот абзац и другие элементы. Например, пометим несколько слов тегом n, эти слова выделились курсивом. Теги не могут пересекаться, вложенный элемент должен закрыться до того, как закроется элемент, в который он вложен. В случае возникновения ошибки программа сообщит об этом.

Некоторые теги помимо имени могут включать в себя атрибуты, которые содержат дополнительную информацию о элементе. Атрибут состоит из имен и атрибута и значения разделённого знаком равенства. Например, атрибут img содержит атрибут width отвечающий за ширину изображения. При изменении атрибута ширина картинки изменится. Итак, мы познакомились с основными элементами, из которых состоит HTML-код. В HTML есть свои законы которые находят своё отражение в структуре документа.

Разметка текста. На этом уроке мы вкратце коснемся понятия разметки гипертекстового документа. В настоящее время существует масса редакторов Web-страниц, которые не требуют от вас знаний основ HTML, например Macromedia Dreamweaver. Но для того чтобы уметь профессионально подготавливать гипертекстовые документы, вы должны знать их внутреннее строение, то есть код документа HTML.

HTML является стандартным языком, предназначенным для создания гипертекстовых документов в среде Веб. HTML-документы могут просматриваться различными типами Веб-браузеров, когда документ создан с использованием HTML. Веб-браузер может интерпретировать HTML для выделения различных элементов документа и первичной их обработки.

Использование HTML позволяет форматировать документы для их представления с использованием шрифтов, линий и других графических элементов на любой системе, их просматривающей. HTML позволяет вам формировать различную гипертекстовую информацию на основе структурированных документов. Обозреватель определяет сформированные ссылки и, через протокол передачи гипертекста HTTP, открывает доступ к вашему документу другим пользователям Интернет. Разумеется, для успешной реализации всего этого необходим софт, полностью совместимый с WWW и поддерживающий HTML.

HTML-документ — это обычный текстовой файл. Используя, например, обозреватель Netscape Navigator вы можете просмотреть результат вашей работы, просто загрузив в него созданный на основе синтаксиса HTML текстовой файл. Гипертекстовый язык предоставляет только информацию для чтения. Это означает, что редактировать Web-страницы может лишь тот, кто их создал, а не простой пользователь сети.

Термины гипертекста. Самый смак гипертекстового языка — это ссылки. В мировой паутине вы просто нажимаете на ссылку и мгновенно оказываетесь в другой точке земного шара на выбранной вами страничке. В языке описания гипертекстовых документов все тэги парные. В конечном тэге присутствует слеш, который сообщает обозревателю о завершении. Не все тэги совместимы с обозревателями. Если обозреватель не понимает тэг, то он его просто пропускает. Любой документ HTML имеет название. По названию вашего документа HTML другие обозреватели могут найти информацию. Место для названия всегда определено — оно находится вверху экрана, и отдельно от содержимого документа. Максимальная длина названия — 40 символов.

Форматирование. Форматирование может быть непосредственным или авторским. Если вы используете тэг, то форматирование считается авторским. Следующие тэги присущи непосредственному форматированию:

— параграф. — горизонтальная линия. — обрыв строки.

Заголовки и подзаголовки Язык HTML позволяет вам работать с шестью уровнями заголовков.

Первый заголовок — самый главный. На него обращается особое внимание.

Остальные заголовки могут быть оформлены, например, жирным шрифтом или прописными буквами. В HTML разбиение на строки не принципиально.

Это означает, что вы можете разбить строки вашего документа в любом его месте. Связано эго с тем, что в гипертекстовом документе идущие подряд отбивки превращаются в одну. Более подробную информацию можно будет узнать из следующих уроков, а на этом урок закончен спокойно находите и вставляете. Большой плюс: "Preview" (предварительный просмотр) работает во всех директориях, а не только в директории сайта.

После того, как вы выбрали картинку и нажали "Select", возможны два варианта развития событий. Выбранная картинка находится в рабочей директории сайта (или в одной из ее поддиректорий). В этом случае она спокойно вставится, и все. После вставки изображение автоматически оказывается выделенным, при этом меняется панель свойств объекта (не вылезает дополнительная, а просто меняется существующая!). Чтобы в дальнейшем изменить какие-то свойства, достаточно выделить нужное изображение и обратиться к этой панели. В верхнем углу панели отображается миниатюрная копия изображения, чтобы вы были уверены, что работаете именно с тем изображением, с которым собирались.

Справа от этой копии окошечко, в которое можно вписать значение параметра "пате" (название рисунка, используется поисковыми системами и браузером при кэшировании страниц). Еще правее — ширина и высота рисунка (изменять не рекомендуется, т.к. браузеры отвратительно масштабируют графику. Лучше отмасштабироватъ картинку в каком-нибудь графическом редакторе, и на сайт ее выкладывать с текущими размерами).

Удалять эти параметры тоже нежелательно — это уменьшит, конечно, размер кода, но в то же время увеличит время загрузки страницы, т.к. браузер не сможет корректно отформатировать текст, пока не загрузит графику. Далее идут параметры src (путь к рисунку) и link (следует заполнять, если рисунок является гиперссылкой).

Dreamweaver не вставляет автоматически рамку вокруг рисунка, являющегося ссылкой. Если вы хотите, чтобы рисунок был обведен рамкой определенной толщины, независимо от того, является он ссылкой или нет, следует установить соответствующее значение параметра border (поле border в правой нижней части панели). В правом верхнем углу панели доступны параметры align (выравнивание рисунка относительно текста) и alt (альтернативный текст). В левой нижней части панели можно сделать из своего рисунка image map -мультиссылку (просто выбираете соответствующую фигуру и рисуете части image map на картинке).

Название тэг целесообразно задавать не только для рисунков, фактически являющихся картами изображений, но и для любых картинок, часто повторяющихся на разных страницах вашего сайта (например, логотип) — если на всех страницах задать для одной и той же картинки одно и то же название тар, то браузер вообще не будет убирать ее с экрана при переходе между этими страницами, что ускоряет загрузку страниц.

Далее идут параметры hspace и vspace — вертикальный и горизонтальный отступ от текста. Далее target — задание окна, в котором будет открываться гиперссылка (для рисунка, не являющегося гиперссылкой, недоступно), далее параметр Low Src (копия рисунка с низким разрешением), поле border и кнопки настройки выравнивания абзаца (если рисунок находится не в теге-контейнере, а непосредственно в теле страницы, нажатие этих кнопок создает для рисунка тег-контейнер с соответствующим выравниванием). Правый нижний угол занимают кнопки "Refresh" (применить измененные параметры) и Edit (вызывает Fireworks — графический редактор, иногда поставляющийся вместе с Dreamweaver, но если рисунок не в формате png, то в Fireworks окажется довольно сложно его редактировать).

Примечание: CSS и DHTML, весьма корректно реализованные в 3-ей версии Dreamweaver, позволяют применять к рисунку дополнительные эффекты (анимированное появление на странице, полное скрытие и появление по нажатию кнопки "Показать" и т.д.) и фильтры, реализуемые браузером (размытие, прожектора и др.), которые также могут накладываться в виде анимации, но это тоже отдельная песня.

На этом уроке мы сделаем простой веб-сайт в среде Macromedia Dreamweaver. На предыдущих уроках вы ознакомились с тем как можно форматировать текст и обрабатывать изображения, а также вы познакомились с понятием и HTML-кодом и основами разметки текста и из чего состоит вебсайт. Теперь все те знания которые были получены вами на прошлых урока нужно применить для создания простого сайта. С чего стоит начать? Для начала необходимо настроить свойства документа. Свойства документа находятся в меню modify > page properties. В начале в строке title необходимо написать имя будующего сайта. Следующая строка отвечает за изображение на заднем плане.

Следующая строка отвечает за цвет на заднем плане. Следующая строка отвечает за цвет текста. Нажмём кнопочку ОК и увидим результат изменений.

Теперь необходимо вставить текст, если текст скопирован и находится в буфере обмена то его можно вставить с помощью кнопки paste, которая находится в меню edit.

Текст появился в нашем документе. Теперь его необходимо отформатировать. Вызовем меню форматирования текста меню window > properties. Теперь необходимо определиться что мы хотим получить от текста, то есть где он должен располагаться. Расположение текста зададим по центру, а цвет и начертание текста оставим без изменений. Изменим всего лишь заголовок, для начала отделим его от основного текста. В случае если этого не сделать то даже если мы выделим нужный нам текст, то изменится всё равно весь текст. Предадим нашему заголовку необходимые начертания.

Теперь когда текст у нас отформатирован, неплохо бы добавить в наш сайт картинки. Для того чтобы вставить картинки в наш документ необходимо войти в меню window > objects и в появившемся меню с помощью кнопки insert imadge вставить в документ выбранную картинку. Лучше всего если эта картинка будет подготовлена в каком-нибудь другом редакторе например Adobe Photoshop, а не Macromedia Dreamweaver, потому как Dreamweaver очень плохо редактирует изображения. Здесь давайте остановимся ещё на одном вопросе касающимся веб-сайтов — это веб-безопасная палитра. Все изображения для веб-сайтов должны быть сделаны с применением веббезопасной палитры. Обозреватели microsoft Internet explorer и netscape novigator изменяют цветовую палитру любых изображений и выводят её на экран. Эти программы подстраивают палитру изображений под системную палитру. По этому дизайнеры используют набор 216 цветов.

Это означает, что если ваша картинка составлена из набора безопасных цветов, то в любом обозревателе она отобразится, так как видите её сами. Во всех современных редакторах есть пункт экспортирования изображения в веб.

Но с развитием Интернета система веб безопасной палитры потихоньку отходит на задний план и всё меньше применяется.

Так вот мои картинки уже обработаны с использованием веб-безопасной палитры и их остаётся только вставить после чего необходимо произвести их позиционирование. Само изображение можно перетаскивать мышкой в любое удобное место. Но более профессионально перемещать изображение с помощью специального инструмента.

присутствует несколько изображений, остальные изображения можно так же подгрузить и расположить их как нужно.

Как уже говорилось масштабирование изображения в Macromedia Dreamweaver проходит так же плохо как и редактирование и поэтому к этим операциям нужно прибегать крайне редко. Запомните, изображение нужно готовить в графическом редакторе. Ну вот наш сайт готов, есть текст, есть изображение, осталось только сохранить документ.

Сохраняется документ в Macromedia Dreamweaver стандартным образом меню file > Save as в появляющемся окне вводится имя и расширение файла.

Нажимаем кнопку сохранить и документ сохраняется как документ Internet explorer. Можно посмотреть что у нас в результате получилось. На этом пожалуй стоит остановиться.

Говорят, что любая новая технология становится по-настоящему массовой только тогда, когда появляется возможность пользоваться ею, не понимая, как она "устроена". Например, огромное количество людей смотрит телевизор, не имея ни малейшего представления о том, что такое телевизионный сигнал и как он преобразуется в картинку на экране. Компьютерные технологии в этом смысле, пожалуй, ещё не стали истинно массовыми.

Хотя, конечно, благодаря развитию программного обеспечения, сегодня пользователю компьютера уже не требуется тех знаний, что требовалось ещё несколько лет назад. Тем не менее, согласитесь, что управление компьютером по своей простоте всё-таки ещё уступает нажатию кнопок на телевизионном пульте.

Кроме того, стабильность работы компьютеров всё ещё далека от идеала, особенно в руках неумелого пользователя. А это значит, что углубленные знания всё ещё актуальны. К чему я это всё говорю? К тому, что Webтехнология ещё достаточно молода. Совсем недавно заниматься веб-дизайном не-технарю было весьма затруднительно. Нужно было обладать массой технических знаний, проделывать какие-то загадочные пассы, писать таинственные заклинания, чтобы всё это, наконец, заработало.

Информационное пространство было заполнено дискуссиями на тему "кто виноват и что делать", чтобы исчезли поля вокруг страницы, фон таблицы совпал с содержимым, а картинки встали вплотную друг к другу. И чтоб потом это работало и в Ескплорере и в Нетскейпе. О работе в HTML—редакторах, подобных дримвиверу, можно было говорить лишь с большой натяжкой, поскольку код, выдаваемый тогдашними редакторами был не очень высокого качества. Вся эта ловля блох, безусловно, была интересна только настоящим энтузиастам и не располагала, прямо скажем, к производительной профессиональной работе.

Сегодня, безусловно, всё несколько проще. Появились островки стабильности в этом бушующем море новых технологий. Стандарты несколько устаканились, накал браузерных войн ослаб, HTML—редакторы совершенствуются. Поэтому мы начали изучение веб-дизайна не с основ, а с практических вещей. Вы убедились, что можно получить некий продукт вебдизайнерства, не обладая, так сказать, глубоким знанием технологии.

Тем не менее, от технологии никуда не деться. И, уж извините меня за резкость, то, что достаточно для создания домашней странички Васи Пупкина, то для целеустремленного будущего веб-дизайнера — лишь затравка. Итак, пускай же HTMLи, URLи, CSS-ки и XMLи, наряду с прочими тегами и джаваскриптами войдут в вашу плоть и кровь. И пусть ни один мускул не дрогнет при этом на вашем лице.

Итак, если вы помните, в первых уроках предыдущей главы мы говорили о том, что основа веба — гипертекст — создается при помощи специального языка разметки HTML. Но что значит "язык разметки" — спросите вы. Тут нам опять нужен небольшой исторический экскурс.

В 1969 году человек по имени Чарльз Голдфарб, работавший в компании IBM, занимался созданием системы хранения юридических документов в электронном виде. Он задался вопросом: как, например, получить список заголовков документов или найти документы, написанные конкретным юристом. То есть, с одной стороны, система должна была выдавать цельные документы, с сохранением исходного форматирования, а с другой стороны, документ должен состоять из смысловых кусков: заголовок, автор, тема и т.д.

И тогда родился так называемый GML (Generalized Markup Language — универсальный язык разметки). Этот язык содержал специальные знаки, которые встраивались прямо в текст документа и отмечали, грубо говоря, какая часть текста что обозначает. То есть вводилась мета-информация, порусски говоря, информация об информации. Расстановка в тексте таких указателей и называется разметкой. Речь идёт исключительно о структурной разметке, позволяющей компьютеру в какой-то степени понять смысл текста.

Что делать с этим пониманием — это уже дело программы. Например, найдя в тексте имя автора, программа может вывести его на экран курсивным начертанием, а может показать биографию автора или список всех его произведений, в зависимости от поставленной перед программой задачи.

В середине 80-х, продолжая идеи GML, был создан SGML — стандартный универсальный язык разметки, который успешно используется до сих пор.

SGML не является сам по себе инструментом разметки текстов. Он лишь закрепляет общие правила создания таких инструментов. А разработка конкретных языков (так называемых SGML-приложений) состоит в определении синтаксиса создаваемого языка, т.е. фактически в определении набора элементов, на которые может быть разделен текст.

Понятно, что для книгоиздателей нужен один язык, в котором фигурируют такие элементы, как книга, автор, название и т.д., а, допустим, для сантехников — совсем другой, описывающий фитинги, вентили, прокладки и фановые трубы. HTML как раз и является одним из SGML-приложений, предназначенным для разметки гипертекста во всемирной паутине.

перемещаясь от одного интересующего нас фрагмента к другому. Ещё в папирусах и глиняных табличках, датированных 3000 годом до н. э. были обнаружены перекрестные указания на другие работы.

А в начале второго тысячелетия н. э. в печатных изданиях Библии использовались различные наборы пометок, отсылающих человека к схожим по тематике разделам. Для этого была разработана система адресации внутри священных текстов: каждая из книг Библии делится на главы, главы — на стихи, а стихи состоят из отдельных фраз. Такая структура значительно облегчала подготовку цитат и комментариев.

Итак, В 1990 году Тим Бернерс-Ли разработал в составе совей системы язык гипертекстовой разметки HTML и, естественно, он находился в полном согласии с идеологией SGML, т.е. размечал только структуру документа.

Визуальное же отображение было исключительно на совести браузеров. Если браузер отображал заголовок так-то, то автор документа никак не мог на это повлиять.

Развитием языка занимался специально Созданный в 1994 году Консорциум WorldWide Web. Имея в то время, по преимуществу, академический состав, консорциум подходил к развитию языка и утверждению новых стандартов очень основательно. В 1995 году началась работа над 3 версией HTML, где, наконец, должны были появиться мощные инструменты работы с отображением информации.

В соответствии с идеологией SGML оформление гипертекстовых документов должно было храниться в отдельных "таблицах стилей", где описывались правила отображения всех элементов документа. Дизайнер мог бы редактировать эти правила, не трогая сам документ, который по-прежнему содержал бы исключительно структурную разметку. То есть оформление содержания отделялось от самого содержания. Такое разделение имеет очень большое значение и глубокий философский смысл, что-то из области связи предмета с его наименованием. Но, не углубляясь в лингвистические дебри, отметим, что:

Во-первых, не "засоренное" оформлением содержание гораздо лучше поддается компьютерной обработке, поскольку оформление — это нечто из человеческой сферы. А во-вторых, мы можем прилаживать разное оформление к одному и тому же содержанию, в зависимости от ситуации. Один и тот же документ может быть показан на экране, распечатан на бумаге, прочитан вслух и так далее. При этом правила, так сказать, его материализации будут совершенно разные.

Но пока консорциум работал над этой замечательной идеей (которая, в конце концов, была реализована, но несколько позже), Web распространялся со скоростью пожара. Началась и его коммерциализация. Появился браузер Netscape Navigator, в котором, для привлечения пользователей, был поддержан ряд элементов, не имевших никакого отношения к структуре, зато позволявших управлять внешним видом документа.

Эти новшества были восприняты далекими от науки пользователями "на ура", популярность браузера стала расти, а с выходом на браузерный рынок в конце 95 года корпорации Microsoft со своим Internet Explorer'ом разгорелась настоящая браузерная война, когда каждый производитель, стремясь обойти конкурента, добавлял в свой браузер разные фирменные фишки, типа бегущей строки или мигающего текста.

Всё это грозило закончиться появлением двух абсолютно несовместимых версий HTML и вообще было весьма далеко от первоначальной идеи гипертекста. В конце концов, проект HTML3 был заморожен и выпущен стандарт HTML 3.2, который, фактически, зафиксировал современное состояние браузеров, более-менее приведя в порядок появившиеся к тому времени новшества.

В 1997 году появился стандарт HTML 4, который унаследовал большинство недостатков своих предшественников, но во многом шагнул вперед. В частности, в нем, наконец-то были поддержаны таблицы стилей, позволившие аккуратному веб-дизайнеру более-менее приблизиться к светлой идее разделения оформления и содержания.

По всей видимости, HTML исчерпал возможности своего развития. На смену ему потихонечку движется язык XML, свободный от родовых болезней своего предшественника. Но об этом мы поговорим позже. HTML всё ещё остается главным инструментом веб-дизайнера, а актуальность свою он потеряет и вовсе не скоро, поскольку миллиарды созданных за эти годы HTML-страниц в ближайшее время никуда не денутся.

Не пора ли нам от теории перейти к практике? Мы много поговорили о том, как и для чего возник язык HTML, какими извилистыми путями шло его развитие. Теперь пришло время посмотреть ему в глаза и в ужасе отшатнуться.

Или же наоборот, с замиранием сердца припасть к этому живительному источнику гипертекстовых страничек. Выглядит HTML-код примерно вот так.

Как говорил Карлсон: "Тебе страшно? Мне нет". Вы можете сами посмотреть код любой заинтересовавшей Вас страницы.

Для этого (будем рассматривать на примере Internet Explorer'а) нужно зайти в меню View и выбрать пункт Source. HTML-файлы — это текстовые файлы. Это значит, что если просмотреть содержимое файла каким либо его текстовым редактором, только не Word'ом, а, например, Блокнотом, Notepad'ом, потому что Word — это своего рода браузер, который зачастую показывает нам не исходное содержимое файла, а неким образом его форматирует; так вот, если открыть текстовый файл Notepad'ом, то мы увидим там нечто более-менее членораздельное. Я не уверен, что можно назвать членораздельным для Вас то, что Вы видите, но всё-таки, если Вы присмотритесь, то увидите не какие-то непонятные закорючки, а некоторые английские слова. В противоположность текстовым существуют так называемые бинарные файлы.

Попробуйте открыть Notepad'ом какую-нибудь картинку. Эти закорючки понятны только компьютеру. Человеку тут делать нечего: ни понять, ни отредактировать здесь мы ничего не можем. Кстати, Word'овские файлы doc, казалось бы, должны быть текстовыми. Но давайте попробуем открыть такой этом залог успешного освоения Вами веб-дизайна. Программистам в этом смысле живется труднее: Программы обычно компилируются в бинарный код, те самые закорючки, по которым невозможно понять, как программа была написана. Поэтому для компилируемых программ существует понятие "исходника", т.е. текста программы, который написал программист.

К пользователю, как правило, попадает уже откомпилированная программа, а исходники, представляющие, на самом деле, большую ценность, разработчики держат у себя и никому не показывают. Хотя есть и исключение — программы с открытым исходным кодом, но это отдельная песня. Это целая, можно сказать, философия.

Итак, да простят меня программисты за не вполне корректное сравнение, HTML — в отличие от программ — сам себе исходник. Это, в частности, обусловлено требованием универсальности: если программы пишутся под определенную операционную систему, то текст "понятен" абсолютно любому компьютеру.

Теперь о порядке работы. Было бы жестоко из нежных объятий Dreamweaver'а сразу бросать Вас в омут чисто текстовых редакторов. Поэтому поначалу мы будем продолжать пользоваться нашим привычным инструментом, но HTML будем писать вручную, благо Dreamweaver, как и большинство других редакторов, позволяет помимо работы в визуальном режиме, работать и в режиме ручной правки HTML-кода. Переключение осуществляется с помощью кнопок на панели инструментов. Нажимаем кнопку Code View и можем теперь редактировать наш HTML-код.

Затем мы плавно перейдем на полностью ручную работу в текстовом редакторе. Результат будем смотреть сразу в браузере. Это, конечно, занятие не для слабонервных, но что может быть прекрасней, чем почувствовать себя крутым HTML-верстальщиком, пишущим код вручную?!

Любой язык имеет синтаксис, т.е. набор правил построения фраз, позволяющий определить осмысленные предложения в этом языке. С изучения этих правил мы и начнем изучение языка HTML. Для начала откроем наш Dremweaver и создадим какой-нибудь несложный HTML-документ в привычном нам визуальном режиме. Посмотрим, какой HTML-код соответствует нашему документу.

Как Вы помните, переключение в режим просмотра HTML-кода производится с помощью кнопки Code View. В Dremweaver'е есть ещё один режим, очень удобный, особенно когда у Вас большой монитор. Это "промежуточный" режим который показывает одновременно и код, и соответствующий ему документ. Так гораздо проще разобраться, где у нас что:

мы отмечаем некий фрагмент в визуальном режиме и тут же видим этот фрагмент в режиме HTML-кода. Итак, вы можете заметить, что HTML содержит наш исходный текст в чистом виде и, кроме того, массу каких-то непонятных слов, заключенных в угловые скобки. Эти непонятные конструкции и есть основные строительные блоки нашего языка. Называются они тэгами. Тег состоит из названия тега, заключенного в угловые скобки.

Названия тегов могут быть написаны как строчными, так и прописными буквами — это не важно.

Если вы присмотритесь повнимательнее, то заметите, что многие теги имеют свою "вторую половину", дополненную косой чертой. И такие "пары" окружают фрагменты нашего "содержательного" текста. Например, заголовок окружен тегами и, абзац окружен тегами. Такая конструкция называется Элементом. Элемент — это и есть единица разметки.

Элемент состоит из Открывающего тэга, данных (т.е. содержательной информации) и закрывающего тега. Таким образом, назначение тегов состоит в обозначении границ элементов.

Давайте попробуем изменить разметку текста: например, заголовок вместо элемента заключим в элемент. Когда мы что-то меняем в коде, то изменения не сразу отображаются в визуальном режиме, а в панели свойств появляется сообщение, что мы изменили код и, дабы увидеть изменения, необходимо нажать кнопку "refresh" или клавишу "F5".

Вместо заголовка мы получили обычный абзац текста. Поздравляю! Вы сделали первый шаг к ручному редактированию HTML-кода. При разметке текста на элементы очень важно, чтобы открывающему тегу соответствовал такой же закрывающий. Если бы мы изменили открывающий тег на, а закрывающий оставили — это было бы грубейшей ошибкой.

Dreamweaver способен "отлавливать" такие ошибки и сообщать нам об этом.

Бывают элементы, для которых указывать закрывающий тег не обязательно.

Таким элементом, например, является элемент P. Конец первого абзаца может быть обозначен началом второго.

Бывают элементы, которые вообще не могут иметь закрывающего тега, состоит только из открывающего. Это случается, когда элемент предназначен не для разметки текста, а несет самостоятельную смысловую нагрузку.

Например изображение, элемент. Элементы могут быть вложены друг в друга. Например, элемент вложен в элемент. Это значит, что картинка находится внутри абзаца. Мы можем вложить в этот абзац и другие элементы.

Например, давайте какой-нибудь фрагмент текста заключим в элемент. Этот фрагмент выделился курсивом. Элементы не должны не должны при этом "пересекаться": если элемент открылся внутри элемента, то закрыться он должен также внутри. Если же мы закроем элемент "снаружи" его родительского элемента, это будет грубейшей ошибкой, о чём Dreamweaver нам так же сообщит. Вот, он сообщает, что у нас имеются пересекающиеся теги. Некоторые теги помимо имени могут включать в себя атрибуты, содержащие дополнительную информацию о данном конкретном элементе. Атрибут состоит из имени атрибута и значения, разделенных знаком равенства. Например, тег содержит атрибут width, отвечающий за ширину изображения.

Мы можем изменить значение этого атрибута, и ширина картинки изменится. Особыми атрибутами являются id и class. Эти атрибуты применимы почти к любому элементу. Id позволяет дать элементу некоторое уникальное имя и таким образом выделить его из ряда аналогичных элементов. Это имя затем может использоваться:

Во-первых, для нестандартного оформления конкретного элемента(например, у нас есть 2 абзаца — одинаковые элементы, выглядят,соответственно, одинаково; присвоив им имена с помощью атрибута id, мы можем контролировать оформление каждого из них по отдельности).

Во-вторых, id может использоваться в качестве цели в гиперссылке, т.е. мы можем ссылаться не просто на страницу, а на конкретное её место. В-третьих, для программистских нужд (для определенных манипуляций с конкретным элементом). Class, в отличие от id, не должен быть уникальным. Он задает принадлежность одного или нескольких элементов к определенному классу.

Классы используются в основном для оформительских нужд.

Например, мы можем пометить несколько абзацев как принадлежащих к одному классу. Сейчас у нас этот и этот абзацы принадлежат к одному классу и мы можем теперь одним махом изменить их оформление. Помимо тегов в HTML используются так называемые "подстановки" (entities). Они нужны в двух случаях: для вставки в документ клавиатуре (например, "правильных" кавычек) и для вставки символов, имеющих в HTML служебное значение.

Например, если нам нужна угловая скобка и мы напишем её в коде как есть, то, естественно, это будет воспринято браузером как тег. В данном случае вместо угловых скобок нужно указать специальные подстановки, которые будут восприняты браузером, как угловые скобки.

Подстановки имеют следующий вид: &код; Код может быть либо мнемоническим, специальные слова, либо числовым, когда мы просто указываем номер символа. Числовой код предваряется "решеткой".

Существует огромное количество мнемонических кодов, для самых разных символов, но с помощью числового кода мы можем указать абсолютно любой символ, имеющийся в данном шрифте, даже такой, для которого не существует мнемонического кода.

Итак, элементы, теги, атрибуты и подстановки — это основные "кирпичики", из которых строится HTML-документ. Но в любом строительстве мы должны придерживаться некоторых базовых правил:

сначала заложить фундамент, возвести стены, накрыть строение крышей и т.д.

В строительстве HTML-документа также есть свои законы, которые находят отражение в структуре документа. С разметкой текста мы более-менее разобрались. Вы убедились, что в основе документа лежит ваш текст, разбитый на элементы с помощью тегов. Однако вы можете видеть ещё ряд элементов, непонятно к чему относящихся. Располагаются они строго определенным образом.

Начинается документ с такой строки:. Это так называемая декларация версии HTML. Дело в том, что, как Вы помните, за недолгую, но насыщенную историю своего развития, HTML вышел в нескольких версиях. Чтобы браузер мог правильно показать данный документ, он должен знать, на каком из HTML-ей он написан. В данном случае в этой строке указано, что мы имеем дело с HTML версии 4.01. После декларации начинается сам документ. Он заключен в элемент. Мы видим открывающий тег, и в конце документа находится закрывающий.

Внутри элемента располагаются друг за другом два обязательных элемента: и, следом за ним,., т.е.

заголовок, содержит служебную информацию, не отображаемую в окне браузера, например, элемент содержит название документа, которое выводится в заголовке окна. — это тело документа — оно в себя включает содержимое нашего документа, т.е. то, что мы видим в окошке браузера.

Если всё это изобразить графически, то получится следующая схема.

Интересно заметить, что с точки зрения спецификации минимальный HTMLдокумент должен содержать только два элемента: декларацию версии HTML и элемент TITLE — название документа. Все остальные элементы, строго говоря, являются опциональными. Правда, понятно, что информационная ценность такого документа будет весьма сомнительна.

Дальше мы будем двигаться последовательно, рассматривая группы элементов тег за тегом, изучая их назначение, особенности использования и атрибуты.

Начнем мы не совсем последовательно, не с заголовка, а с тела документа, ибо, не освоившись с "содержательными" элементами, переходить к мета-тегам, фреймам и кодировкам может быть небезопасно для Вашего психического здоровья.

Однако помните, что тело документа всегда идёт только после заголовка.

Итак, элемент BODY. Не будем нажимать на правильное английское произношение, пусть будет просто Боди. Этот элемент включает в себя содержание нашего документа. Например, то, что мы видим в окне привычного нам визуального браузера. Или, например, читается вслух аудиобраузером (говорят, существуют на свете и такие). Строго говоря, по спецификации, открывающий и закрывающий теги для элемента BODY указывать необязательно, т.е. он может присутствовать только своим содержимым: подразумеваться, но не указываться явно. То же самое, кстати, относится и к элементам HEAD и HTML. Т.е. мы можем их теги поудалять, и с точки зрения спецификации такой документ будет вполне корректным. На практике, впрочем, эти теги обычно присутствуют в документе, хотя бы для того, чтобы удобнее было читать HTML-код. Элемент BODY может присутствовать в документе только один раз.

Элементы, входящие в состав BODY, составляющие содержимое документа, бывают двух типов: блоковые или блочные элементы (по-английски это называется block-level) и текстовые элементы (inline или text-level). Это требует пояснения. Блочные элементы являются более крупными, если так можно сказать, образованиями. С их помощью содержимое делится на большие логические куски. Откроем, например, какую-нибудь страничку и посмотрим: заголовок является блочным элементом, абзац является блочным элементом.

Текстовые же элементы служат для "тонкой настройки", т.е. работа ведется внутри текста: например, внутри абзаца мы можем какую-то часть его отметить в качестве гиперссылки. Или вставить внутрь текста картинку.

Конкретные элементы мы будем рассматривать в последующих уроках, а здесь нам важно усвоить разницу между блочными и текстовыми элементами.

Помимо описанной смысловой разницы эти типы отличаются ещё тем, что они могут в себе содержать: блочные элементы (в данном случае — элемент абзаца "P") могут включать в себя просто текст, текстовые элементы. Например, элемент IMG (картинку), элемент EM, элемент STRONG.

Кроме того, блочные элементы могут содержать в себе другие блочные элементы. Это случается не так уж и часто. Например, существует элемент FORM, для ввода пользователем каких либо данных. Этот элемент является блочным (он окружен пунктирной рамкой) и может содержать в себе другие блочные элементы.

Например, заголовок, абзац. Дальше пошли текстовые элементы, относящиеся непосредственно к форме. Текстовые же элементы, в отличие от блочных, например, элемент EM, могут содержать в себе только текст или другие текстовые элементы. Блочные элементы внутри текстовых появляться не могут. Еще одно различие между блочными и текстовыми элементами, наиболее заметное невооруженным глазом, заключается в том, что блочные элементы всегда начинают новую строку, а текстовые появляются прямо посреди текста. Чтобы у Вас голова окончательно не пошла кругом, изобразим всё это схематически.

Итак, чтобы разбить содержимое на крупные логические куски, мы пользуемся блочными элементами. Блоки могут содержать (а могут и не содержать) в себе другие блочные элементы (как, например, форма содержала абзац и заголовок). Так же блочные элементы могут содержать в себе текстовые элементы и просто текст. При выводе на экран блоки начинаются с новой строки. Текстовые элементы не начинают новой строки, т.е. как бы плавно встраиваются в общее течение содержания. Текстовые элементы могут содержать (а могут и нет) в себе текст или другие текстовые элементы и не могут содержать блочные элементы.

бессмысленным, однако таким образом мы можем расширять границы языка HTML и фактически создавать новые элементы. Из прошлого урока Вы помните, что любой элемент можно отнести к определенному классу. Если нам нужен какой-нибудь нестандартный элемент, например, для указания в тексте неприличных слов, мы заключаем эти слова в элемент SPAN, задаем ему какой-нибудь соответствующий класс и затем, с помощью таблиц стилей, можем эти элементы каким-либо образом "оживлять". Таблицы стилей мы будем изучать позже, суть в том, что с их помощью мы можем, например, выделить все эти слова красивыми большими красными буквами или, наоборот, скрыть их в документе. А несложными программными средствами можно делать и более интересные вещи: например, выяснить процентное содержание этих слов в тексте документа.

И в заключение поговорим о возможных атрибутах элемента BODY.

Вообще говоря, в 4 версии HTML все атрибуты этого элемента кроме стандартных id и class (и некоторых других) являются нерекомендованными к использованию, т.к. все они относятся к оформлению, а оформление должно осуществляться через таблицы стилей. Тем не менее, браузеры до сих пор понимают эти атрибуты. Мы рассмотрим их вкратце. Итак, атрибут bgcolor отвечает за цвет фона страницы.

Цвет указывается в виде шестнадцатеричного числа (об этом мы поговорим, когда будем изучать таблицы стилей). Вот появился у элемента этот атрибут, и цвет фона изменился. Атрибут background позволяет задать для фона не просто цвет, а некоторое изображение. Выбираем картинку, и она заполнила весь фон. Давайте пока этот атрибут лучше удалим. Атрибут text задает цвет основного текста. Указывается в таком же виде, как и цвет фона. Атрибут link отвечает за цвет гиперссылок. Если у нас будет в тексте какая-нибудь гиперссылка, то она предстанет в этом цвете. Атрибут vlink задает цвет ссылок, по которой мы уже "ходили", которые посещали, а атрибут alink — цвет гиперссылки, на которую мы собираемся в данный момент перейти, т.е.

фактически это цвет ссылки в момент, когда мы по ней щёлкаем мышкой.

Marginheight и topmargin задают размер верхнего и нижнего полей документа.

Они абсолютно идентичны, но один был сделан для браузера Netscape Navigator, а другой — для Internet Explorer.

Это типичное "наследие тёмных времен" — можете представить себе, как жилось дизайнерам, когда одинаковые, по сути, элементы в разных браузерах назывались по-разному. Между прочим, сделать так, чтобы поля были одинаковыми в Нетскейпе и в Эксплорере было весьма затруднительно. Это было одной из актуальных тем вебдизайнерского общения, и пути решения этой проблемы отличались невероятной изощренностью. Marginwidth и leftmargin — это то же самое, только для боковых полей.

Вот, собственно, и всё об элементе BODY, о теле документа. Дальше мы перейдем к рассмотрению элементов, которые составляют это тело.

остаются в виде единичных пробелов. Если мы хотим получить на экране подобную картину, мы должны воспользоваться специальными HTMLэлементами для принудительного перевода строк, для вставки нескольких пробелов подряд, либо использовать специальный элемент PRE, который отображает в браузере текст в таком виде, в каком он имеется в исходнике.

Ещё один тонкий момент: с какой стороны от тегов ставить пробелы.

Например, если мы хотим выделить некоторые слова каким-нибудь текстовым элементом, то правильнее ставить пробелы с внешней стороны элемента, т.е.

перед открывающим и после закрывающего тега.

Теперь перейдем к рассмотрению собственно элементов. Большая группа элементов, названных phrase elements, элементы фразы, служит для придания некоторого специального значения фрагментам текста. Элементы эти, конечно же, являются текстовыми (не блочными) и могут включать как собственно текст, так и другие текстовые элементы. Открывающий и закрывающий теги для этих элементов являются обязательными.

Элемент EM (emphasis) делает акцент на данном фрагменте текста. Обычно выделяется курсивным начертанием. Элемент STRONG делает более сильный акцент. Обычно выделяется полужирным начертанием. Как Вы помните, элементы могут вкладываться друг в друга. Мы можем, например, скомбинировать эти два элемента. Элемент CITE отмечает ссылки или сноски к другим источникам, источники цитат. Об элементе Q мы поговорим попозже. В принципе, он выделяет саму цитату, в отличие от элемента CITE, который описывает именно источник цитаты. Важно понять, что CITE не является элементом для расстановки гиперссылок, он просто придает тексту определенное значение.

Если мы хотим сделать имя автора гиперссылкой, мы должны добавить соответствующий элемент. Если бы Диоген жил чуть попозже или Интернет появился бы чуть пораньше, то мы могли бы зайти по этой ссылке, почерпнуть новые интересные мысли философа, пообщаться с ним в чате. Следующий элемент — CODE — служит для обозначения компьютерного кода, как правило, текста программ. Если мы хотим показать какой-то фрагмент программы, мы должны его заключить в элемент CODE. Напишем вот такую "высоко интеллектуальную" программу… Программисты, я думаю, оценят.

Как видите, переводы строк браузер не воспринимает, поэтому не дурно было бы элемент CODE заключить ещё и в элемент PRE.

Далее, элемент SAMP (от слова sample). В отличие от CODE, он обозначает текст, выводимый в результате работы программы, выглядит так же, как и элемент CODE. Элемент KBD обозначает текст, который пользователь должен ввести с клавиатуры. Обычно используется в разного рода инструкциях, документации. Оформляется так же, как CODE и SAMP, при этом выделяется полужирным начертанием.

Последний вот такой "компьютерный" элемент (наберитесь терпения) — это элемент VAR. Предназначен для обозначения переменных. В данном случае имеется в виду, что вместо "filename" вы должны в реальной работе написать название файла. Последние два элемента — это ABBR и ACRONYM (отмечает аббревиатуры и акронимы). Аббревиатура — это стяжение нескольких слов, означающих единое понятие, в одно слово.

Акроним — это аббревиатура, составленная только из первых букв входящих в неё слов. Внешне похожей на предыдущую группу является группа так называемых font-style элементов, т.е. элементов для форматирования фрагментов текста. Поскольку эти элементы не предназначены для структурной разметки, а только для оформления, их использования следует по возможности избегать, а для форматирования пользоваться таблицами стилей. Элемент I — italic — задает курсивное начертание текста. Элемент B — bold — даёт полужирное начертание.

Элемент BIG увеличивает размер шрифта. К сожалению, в Dreamweaver'е мы этого не увидим, нужно открыть нашу страничку в браузере. Вы видите: текст стал слегка побольше.

Противоположный ему элемент — SMALL — уменьшает текст. Элемент TT (teletype) — выводит текст моноширинным шрифтом, в котором все символы имеют одинаковую ширину. Таким шрифтом оформляются уже знакомые Вам элементы CODE, SAMP и т.д. Элемент S или его синоним STRIKE позволяют зачеркнуть какую-то часть текста. Элемент U подчеркивает текст. Этим элементом лучше не злоупотреблять, потому что у пользователей Интернета подчеркивание достаточно прочно ассоциируется с гиперссылками. По подчёркнутому тексту сразу хочется кликнуть мышкой.

И ещё один элемент, очень популярный в своё время, но сейчас, к счастью, перешедший в разряд нерекомендованных — элемент FONT (шрифт).

Позволяет задавать размер, цвет и гарнитуру шрифта. До появления таблиц стилей это был единственный механизм управления параметрами шрифта.

Понятно, что к структурной разметке этот элемент не имеет никакого отношения. У элемента FONT есть три атрибута: size, который отвечает за размер шрифта. Размер задается числом от 1 — самый маленький до 7 — самый большой. Другой вариант задания размера шрифта — увеличение или уменьшение кегля относительно текущего. Т.е. мы можем шрифт слегка увеличить или слегка уменьшить с помощью всё тех же семи чисел, но добавляя знаки + или -.

Другой атрибут — color — позволяет задавать цвет. И замечательный атрибут face, который позволяет указывать гарнитуру шрифта. На практике с этим атрибутом связано большое количество проблем, т.к. указанный шрифт может отсутствовать на компьютере пользователя, либо, что ещё хуже, присутствовать, но не содержать нужных символов. Тогда пользователь имеет все шансы увидеть нечто подобное. Если нам так уж нужно как-то особо оформить фрагмент текста, не выделяя его никаким логическим элементом (что само по себе не очень правильно), то правильнее пользоваться "просто текстовым элементом" SPAN и задавать его оформление через таблицу стилей.

А в данном случае было бы правильнее использовать элемент заголовка.

Последний элемент в этой группе — BASEFONT. Он состоит только из открывающего тега, не имеет содержимого и задает базовый размер шрифта для всего документа с помощью атрибута size. Размер задается всё в тех же числах, значением по умолчанию является 3. На заголовки и текст, заключенный в таблицы, действие этого элемента не распространяется.

Рассмотрение других элементов мы продолжим в следующем уроке.

Продолжаем изучение элементов разметки текста. Элемент P (paragraph) служит для разбиения текста на абзацы. Открывающий тег для этого элемента является обязательным, а закрывающий — необязательным. Элемент этот, естественно, является блочным, но при этом может включать только текст и текстовые элементы. Другие блоки он включать в себя не может. По умолчанию абзацы отделяются от других блоков увеличенным интервалом, в отличие от традиционного набора, где абзацы выделяются красной строкой.

Элемент P имеет атрибут align, отвечающий за выравнивание текста в абзаце. Атрибут является нерекомендованным, правильнее контролировать выравнивание через таблицы стилей. Атрибут align может принимать значения: left (по левому краю), right (по правому краю), center(по центру), justify (по правому и левому краям).

Вертикальными чёрточками мы будем обозначать в дальнейшем альтернативные варианты. Значением по умолчанию является left. Т.е. если мы не указываем этот атрибут или браузер не может понять его значение (старые браузеры, например, не понимают равномерное выравнивание justify), то текст выравнивается по левому краю.

Для начала новой строки служит элемент BR (от слова brake, line brake — перевод строки). Не следует путать этот элемент с элементом P. Элемент BR является текстовым элементом. Он не начинает нового абзаца, а просто заставляет браузер перевести строчку до того, как он сделает это сам, дойдя до правого края страницы. Визуально элемент не приводит к увеличению интервала между строками. Состоит только из открывающего тега. Если нужно сделать несколько переводов строк, то нужно вставить соответствующее количество элементов BR. Имеет атрибут clear, который определяет поведение текста, обтекающего изображение. Допустим, текст обтекает некоторое изображение, и мы хотим где-то вставить переводы строк.

По умолчанию текст продолжает обтекать картинку.

Но если мы поставим атрибут clear, то текст окажется под картинкой.

Принимает значения: none (когда текст продолжает обтекание). left (когда обтекание прекращается в случае, если картинка выровнена по левому краю, как раз как в нашем случае). Если бы картинка была выровнена по правому продолжалось бы. Для этого случая атрибут должен иметь значение right. И, наконец, значение all, когда обтекание прекращается в любом случае, вне зависимости от выравнивания картинки.

Бывают случаи, когда нам нужно наоборот, запретить браузеру перевод строки в определенном месте. Браузер осуществляет перевод строк по словам, т.е. нам нужно отметить некоторый пробел как пробел, в котором перенос осуществляться не может. Для этого пробел заменяется на специальную подстановку , которая расшифровывается как non-breaking space и интерпретируется браузером как неразрывный пробел. Теперь, если перенос и осуществится, то уж никак не в этом месте.

Для обозначения заголовков разделов и подразделов документа предназначены 6 элементов с H1 по H6 (от слова heading — заголовок, рубрика). Эти элементы соответствуют 6 уровням "важности".разделов. H1 — самый важный, верхнего уровня, H6 — наименее важный. Эти элементы обязаны иметь как открывающий, так и закрывающий теги. Даже если документ не имеет разделов, у него, как правило, есть хотя бы один заголовок — его название. Обычно заголовки отображаются увеличенным кеглем: H1 — самый большой, а дальше идёт постепенное уменьшение.

Элементы заголовков являются блочными, однако, как и абзац, могут содержать только текст и текстовые элементы. Имеют атрибут align, аналогичный такому же атрибуту элемента P. Заодно покажем, как align работает на параграфе. Уже упоминавшийся элемент PRE (от слова preformatted — предварительно отформатированный) заставляет браузер выводить текст точно в том виде, в каком он фигурирует в HTML-коде, со всеми пробелами и переводами сток. Выводится обычно "моноширинным" шрифтом.

PRE является блочным элементом, должен иметь как открывающий, так и закрывающий теги. Может включать текст и текстовые элементы за исключением элементов изображений IMG, встроенных объектов OBJECT, а также элементов, изменяющих размер шрифта: BIG, SMALL и некоторых других.

Для обозначения верхних и нижних индексов служат элементы SUP (superscript) и SUB (subscript). Элементы являются текстовыми, должны содержать как открывающий, так и закрывающий теги. Вот пример нижних и верхних индексов. Элементы могут включать в себя текст или другие текстовые элементы. Для выделения цитат предназначены два элемента:

блочный BLOCKQUOTE и текстовый Q. Оба элемента обязаны иметь как открывающий, так и закрывающий теги. BLOCKQUOTE предназначен для больших цитат, которые можно выделить в отдельный блок. Может включать текст, текстовые элементы и другие блочные элементы. Отображается обычно в виде абзаца с увеличенными отступами по бокам.

Текстовый элемент Q предназначен для цитат внутри текста. Согласно спецификации браузеры должны автоматически окружать такие цитаты кавычками. На практике же пока не все браузеры делают это или делают неправильно. Проблема с кавычками заключается в том, что в разных языках правила их использования разнятся. В русском, например, используются "елочки", а в английском — "лапки". Для учета таких вот национальных особенностей в спецификации предусмотрен атрибут lang, который задает язык для подобных элементов. Т.е. теоретически если мы напишем вот так, то должны отобразиться "елочки", а если мы зададим английский язык, то "лапки".

Но пока, если браузеры и ставят кавычки, то ограничиваются примитивным знаком дюйма. Следовательно, пока этот элемент приходится считать малоприменимым и просто ставить кавычки в тексте вручную, с помощью специальных подстановок. BLOCKQUOTE и Q имеют атрибут cite, который должен содержать ссылку на источник цитаты. В браузере, как видите, этот источник нигде не отображается, он нужен только для структурной разметки.

И в заключение несколько слов о переносах. Браузеры пока не умеют автоматически расставлять переносы, как текстовые редакторы или программы верстки, и переносят текст только по словам. Мы можем поставить в нужном месте слова дефис, и тогда браузер сможет сделать в этом месте перенос. Но, поскольку никто не гарантирует идентичного отображения нашей страницы во всех браузерах, может оказаться, что слово помещается в строку, перенос в этом месте не нужен, а посреди слова будет красоваться наш дефис.

Более правильный способ — использовать подстановку ­, которая указывает браузеру место, где можно сделать перенос. Когда он не нужен, слово отобразится слитно, а когда нужен — браузер автоматически должен поставить дефис и перенести оставшуюся часть слова на другую строку.

Получается, что, испещрив все слова в нужных местах этими символами, мы получим в документе правильные переносы. Впрочем, на практике, к сожалению (а может, к счастью), мало кто этим занимается.

Итак, мы рассмотрели элементы P (абзац), BR (перевод строки), подстановку (неразрывный пробел), элементы заголовков, элемент PRE для предварительно отформатированного текста, элементы для верхних и нижних индексов SUP и SUB, элементы для выделения цитат BLOCKQUOTE и Q и подстановку ­ для расстановки переносов.

В HTML имеется несколько механизмов упорядочивания данных в списки или перечни, по-английски lists. Существуют нумерованные списки, ненумерованные списки и списки определений, терминов. Списки могут вкладываться друг в друга, образуя как бы подразделы. Причем вложенные списки не обязательно должны быть одного типа, т.е., например, нумерованный список может содержать в себе ненумерованный. Для создания нумерованных списков служит элемент OL (ordeRed list), для ненумерованных — UL (unordeRed list). Элементы должны иметь открывающий и закрывающий теги. Эти элементы являются блочными.

Вообще, эти элементы представляют собой лишь контейнеры для пунктов списка и поэтому не могут содержать ничего, кроме элементов для обозначения этих пунктов — LI (list item — элемент списка). Элемент LI, обозначающий пункт списка, может содержать текст и текстовые элементы.

Закрывающий тег у него может отсутствовать. Этот элемент должен пунктов вложить элемент списка (например, вложим сюда ненумерованный список) и, естественно, проставить его пункты. Вот как это будет выглядеть.

Количество таких вложений практически не ограничено. Все атрибуты этих элементов являются нерекомендованными. Элемент OL имеет атрибут start, указывающий, с какого числа начинать нумерацию, если это число должно отличаться от 1. Например, по какой-то причине мы хотим начать нумерацию с 10. Пожалуйста. Мало того, элемент LI имеет атрибут value, позволяющий задать значение конкретному пункту списка. С помощью этого атрибута мы можем пронумеровать список совершенно невообразимым образом. В какихто случаях это действительно бывает нужно. Все три элемента имеют атрибут type, позволяющий изменить внешний вид маркеров списка.

Возможные значения этого атрибута разные для нумерованных и ненумерованных списков. Для ненумерованных это может быть: disc (залитый кружочек). Давайте посмотрим, как он выглядит. Сircle (контурный кружок) И square (квадратик). Контурного квадратика почему-то не предусмотрено.

Значение по умолчанию зависит от уровня вложенности списка. Например, ненумерованный список первого уровня по умолчанию имеет тип disc, второго уровня — circle, третьего и ниже — square. Для нумерованных списков предусмотрены следующие типы: 1 (арабские цифры). То, что мы видим по умолчанию.

Строчная a (латинские буквы в нижнем регистре). Прописная A (латинские буквы в верхнем регистре). Строчная i (римские цифры в нижнем регистре). И, наконец, прописная I (римские цифры в верхнем регистре). Мы можем менять тип как для всего списка, так и для отдельных пунктов. Например, создать такое вот приятное разнообразие.

Еще раз оговорюсь, что все эти атрибуты являются нерекомендованными, то же самое можно и нужно делать через таблицы стилей. Помимо нумерованных и ненумерованных списков существует специальная группа элементов для списков определений. Создается список с помощью элемента DL (definition list — список определений) и включенных в него пар DT () — DD. DL является блочным элементом, должен иметь оба тега — открывающий и закрывающий и может содержать только элементы DT и DD — очень похоже на списки, на элементы OL и UL. DT (definition term) отмечает определяемый термин. Может содержать текст и текстовые элементы.

Закрывающий тег может отсутствовать. DD (definition description) — содержит собственно определение термина. Может включать текст и текстовые элементы, а также блочные элементы. Закрывающий тег необязателен.

В спецификации приведено ещё одно интересное назначение этих элементов: для описания диалогов (DT в этом случае содержит имя персоны, а DD — его или её речь). Давайте же создадим небольшой словарик. Заключаем всё в элемент, определяем термины. И их определения. Вот как это будет выглядеть. Из соображений совместимости поддерживаются ещё два устаревших элемента: MENU и DIR. Отображаются они точно так же, как ненумерованный список UL и именно UL и нужно использовать вместо них.

Как вы помните, возможность связывать отдельные фрагменты информации перекрестными ссылками является главной особенностью гипертекста. Собственно, гиперссылки — это основное, что отличает представления информации.

Гиперссылка связывает две точки и имеет определенное направление:

"отправная точка", т.е. фрагмент информации, помеченный в качестве ссылки, ведёт, указывает на "пункт назначения", т.е. другой фрагмент, расположенный где-либо в Интернете. Когда пользователь активирует ссылку (например, кликает по ней мышкой или переходит с помощью клавиатуры или с помощью голосовых команд), то браузер переходит по этой ссылке, то есть показывает пользователю информацию, расположенную в "пункте назначения". "Пунктом назначения" не обязательно должна быть HTMLTeachPro Web-дизайн страница. Это может быть самая разная информация: изображения (например, часто дают маленькое изображение, которое является ссылкой на его более крупную версию), звуковые файлы, программы, ну и конечно гипертекстовые страницы или даже отдельные элементы на них.

Соответственно, и поведение браузера при переходе по гиперссылке будет разным. Если это HTML-страница, она будет показана пользователю; если адрес электронной почты, то при переходе по такой ссылке будет запущена почтовая программа и создано новое письмо; если программа, то будет предложено сохранить её на диск… Ну и так далее.

Для разметки гиперссылок используется элемент. Это текстовый элемент. Должен содержать как открывающий, так и закрывающий теги.

Содержимым этого элемента могут быть текст и текстовые элементы, в том числе и изображения. Ссылки не могут вкладываться друг в друга, т.е. внутри одного элемента не должно быть других элементов.

Такая вот разметка будет неправильной. Помеченный как гиперссылка текст обычно оформляется синим цветом и подчеркиванием. Это, конечно, не догма, но, чтобы пользователь мог легко находить в тексте ссылки и не путать их с другим каким-либо оформлением, следует более-менее придерживаться принятого способа обозначения ссылок. А также не использовать его в других целях. Нет ничего неприятнее в Интернете, чем подчеркнутый текст, не являющийся ссылкой. Если ссылкой является изображение, оно по умолчанию обычно обводится синей рамкой. Но об этом мы поговорим при изучении изображений.

Немаловажным является вопрос, какую часть текста делать гиперссылкой.

Однозначно можно сказать, что не следует делать гиперссылок вроде "нажмите здесь". Это абсолютно бессмысленно. Подчеркнутый текст и так говорит пользователю, что на него нужно кликнуть. Это всё равно, что писать "нажмите здесь" на всех в мире кнопках. Тем более, что "нажимают" только пользователи визуальных браузеров. Достаточно совсем небольшого опыта работы в сети, чтобы выработался условный рефлекс на подчеркнутый текст.

Именно поэтому так важно то, о чём мы говорили выше: не оригинальничать в оформлении ссылок.

Их подчеркивание — не чья-то прихоть, а необходимое условие формирования в сознании пользователя стереотипа, помогающего ему ориентироваться в гипертекстовой среде. Что же тогда следует заключать в элемент ? Прежде всего, это должны быть информационно значимые слова. Ссылка не должна быть слишком длинной. Не нужно заключать в элемент целые предложения. Гораздо лучше заключить в него наиболее важную часть предложения. Такие ссылки будут более заметны в тексте и пользователю будет легче "зацепиться" за них взглядом. Хотя, конечно, нет правил без исключений. Существуют, например, сайты, представляющие из себя каталоги ссылок, где 90% страницы заняты именно ссылками.

Но это — отдельный случай. Теперь подробнее о том, как же, собственно, нам сделать некий фрагмент нашего документа гиперссылкой, а точнее говоря, сделать его "отправной точкой" гиперссылки. Как вы помните, его нужно заключить в элемент, но этого ещё не достаточно. Элементу нужно задать атрибут href. Значением этого атрибута будет как раз адрес "пункта назначения", т.е. документа, на который эта ссылка ведет.

Адрес этот может быть абсолютным или относительным. Что это значит?

Абсолютный адрес — это URL. Надеюсь, вы помните, что это такое: Uniform Resource Locator, адрес, однозначно определяющий расположение документа в Интернете. При этом "адрес отправителя", т.е. страницы, с которой ведёт ссылка, не имеет никакого значения. Так же как не важно, из какого почтового отделения вы отправляете письмо. Для ссылок на страницы вне вашего сайта это единственный способ. Однако если документ находится на этом же сайте, можно использовать так называемые относительные ссылки. В таких ссылках путь к "пункту назначения" прокладывается от "исходного" документа, т.е. от того, в котором находится ссылка.

Допустим, у нас в документе index.HTML находится ссылка на документ about.HTML. Документы эти, как видите, лежат в одной папке. В этом случае в ссылке нам достаточно указать только название файла. Если "пункт назначения" находится в подпапке, то нам уже нужно указать имя этой папки, слэш, имя файла. Может быть и такая структура, что нам нужно подняться из текущей папки на уровень выше, зайти в другую папку, и в ней уже находится наш "целевой" документ. Тогда мы ставим в ссылке две точки — это обозначает подъем на один уровень. И затем, опять же, пишем название папки и файла.

Тем, кто работал с командной строкой DOS, буде такие найдутся, всё это должно быть хорошо знакомо. Сайт с относительными ссылками будет работать вне зависимости от того, где он находится: на домене таком или сяком, или вообще у вас на винчестере.

Главное, чтобы сохранялась его структура, т.е. взаимное расположение папок и файлов. К полюсам относительных ссылок относится и некоторое сокращение объёма файлов. Если у вас на странице достаточно много ссылок и от каждой отрезать "лишний" хвост абсолютной ссылки, то экономия может получиться довольно существенная. "Исходной точкой" для относительных ссылок можно принудительно сделать не текущий документ, а любой другой.

Для этого предназначен элемент, у которого в атрибуте href можно задать эту самую "исходную точку".

Например, перенести туда доменное имя. Тогда все ссылки можно делать относительными, они будут относительно этого доменного имени. Получится нечто среднее между абсолютными и относительными ссылками. Ссылка в конечном счёте будет абсолютной, но мы получим экономию на длине адресов. Как упоминалось выше, ссылка может вести на конкретное место HTML-страницы. В этом случае в атрибуте href, в адресе, после имени файла ставится решетка и некое название метки, имя целевого элемента.

Каким же образом мы можем поставить в определенном месте документа такую метку? Для этого используется всё тот же элемент. Вот он.Только в данном случае мы вместо атрибута href применяем атрибут name, значением которого как раз является имя метки, на которую мы можем затем ссылаться.

Для этих имён меток существует ряд правил. Во-первых, они, естественно, должны быть уникальны в пределах документа, то есть не должно быть двух меток с одинаковыми именами, иначе будет не понятно, на какую из них ведёт ссылка. Во-вторых, в них не стоит использовать какие-либо символы кроме латинских букв и цифр. И последнее замечание — по поводу регистра.

Согласно спецификации атрибут name чувствителен к регистру, т.е. одно и то же имя, написанное строчными или прописными буквами, должно считаться разными именами. На практике же большинство браузеров эту разницу регистров не учитывают, поэтому желательно называть метки действительно по-разному. Некоторые браузеры не понимают пустого элемента A, то есть, если бы мы написали вот таким образом, что содержимого у нас не было бы, некоторые браузеры могли бы это не воспринять. Поэтому следует по возможности заключать в этот элемент какие-то данные. Итак, если элемент A имеет атрибут href, то он становится отправной точкой ссылки, а если атрибут name — то пунктом назначения. Один и тот же элемент может иметь и атрибут href, и атрибут name, т.е. быть и "пунктом назначения" для других ссылок и в тоже время сам ссылаться на другой ресурс.

Есть ещё один способ задания имён меток помимо элемента A с атрибутом name. Вы помните, что практически любому элементу можно задать атрибут id. Так вот на этот самый id и можно ссылаться, так же, как на элемент A с атрибутом name. В данном случае мы достигли того же результата, только без использования фактически не нужного здесь элемента A. К сожалению, некоторые старые браузеры этот атрибут id не понимают. Вы, наверное, заметили, что здесь мы ссылаемся на определенное место этого же самого документа, а не какого-то внешнего. Ссылка наверху страницы ссылается на некоторое место внизу страницы. В таком случае писать в ссылке имя страницы не нужно, достаточно решетки и имени целевого элемента, как, собственно, и было в оригинале. Ссылки внутри одной страницы — это как раз типичный пример использования ссылок на именованные элементы.

И последнее о таких ссылках: при всей их полезности они таят в себе некоторое противоречие. Порцией гипертекста является всё-таки страница. И переход по ссылке подразумевает переход на другую страницу, другой файл.

Возможность перехода на отдельное место страницы нарушает эту логику. Все ссылки выглядят одинаково, и пользователь не знает, куда он сейчас попадёт:

на другую страницу или останется на этой, но перейдёт в другое её место.

Кнопка back, которая служит для возврата на предыдущую страницу, в данном случае должна вернуть пользователя то ли к предыдущему месту на текущей странице, то ли всё-таки на предыдущую страницу. Для опытного пользователя, конечно, всё это не составляет проблемы: он видит в адресе решетку и понимает, что происходит. Но многие пользователи не знают ничего ни об адресах, ни об именах элементов. Они просто кликают по ссылке и попадают… не совсем понятно куда.

Часто рядом с таким вот "целевыми элементами" ставят ссылку наверх страницы, чтобы пользователь мог по крайней мере вернуться к шапке документа и понять, где же он находится. Одним словом, механизм таких вот "локальных" ссылок, полезный сам по себе, скорее всего, просто не очень продуман пока с точки зрения интерфейса. Ну и о других атрибутах. Ссылка может иметь атрибут title, содержащий некую дополнительную информацию.

Эта информация может отображается, например, в виде так называемых всплывающих подсказок.

Ещё один атрибут — target — указывает "окно", в котором должна открыться ссылка. Подробнее об этом мы поговорим при изучении так называемых "фреймов", а сейчас нас может заинтересовать значение этого атрибута "_blank", при котором ссылка открывается в новом окне.

Без преувеличения можно сказать, что таблицы в HTML — это больше, чем таблицы. Вообще, надо сказать, HTML полон таких вот странных примеров использования вещей "не по назначению", приспосабливания их для решения каких-то задач ввиду отсутствия нормальных механизмов решения этих задач.

И таблицы — один из наиболее характерных примеров. Помимо вывода собственно табличной информации они долгое время использовались (да и сейчас продолжают использоваться) для создания средствами HTML какоголибо более-менее вразумительного макета. Дело в том, что HTML предполагает последовательную загрузку: пришла порция текста — отобразилась в браузере, пришла следующая — отобразилась дальше. И так, пока не загрузится вся страница.

При медленном соединении это особенно актуально: Вы можете начинать чтение, пока остаток страницы догружается. Естественно, никакая верстка при этом невозможна: пока мы не получим весь текст, непонятно, как его верстать:

может быть там осталось две строчки, а может — 10 страниц. А вдруг там внизу окажется какая-нибудь огромная картинка? Поэтому изначально в HTML вообще не было заложено никаких механизмов верстки: гипертекст аккуратненько заполнял всё окно браузера. Но когда появились механизмы отображения таблиц, кто-то подумал: а почему бы не заключить в таблицу всё содержимое страницы?

Ну и пошло-поехало. Так вот и вбивались гвоздики в крышку гроба HTMLя как языка исключительно структурной разметки: таблицами стали размечать вовсе не табличную информацию. Сейчас многие подобные несуразности уходят в историю, появились и более правильные, чем таблицы, механизмы позиционирования информации на странице (через таблицы стилей). Помимо теоретической неправильности такого использования таблиц, оно имеет и практические недостатки. Главный из них: браузер не может отобразить таблицу, не дождавшись всего помещённого в неё текста. Т.е. мы лишаем пользователя чудесной возможности начинать просмотр страницы, не дожидаясь её полной загрузки.

массу факторов, влияющих её внешний вид. Информация должна быть пригодна к восприятию в самых разных условиях. И вместо того, чтобы искать способы "запереть" размер шрифта или задать ширину страницы, следует разрабатывать дизайн таким образом, чтобы он нормально смотрелся при разной ширине страницы и разном размере шрифта.

Итак, таблицы… Создаются они с помощью элемента. Элемент блочный, закрывающий тег — обязательный. Имеет нерекомендованный атрибут align, определяющий положение таблицы в документе. Может принимать значения: right — выравнивание по правому краю, center — выравнивание по центру и left — значение по умолчанию — выравнивание по левому краю. Также имеет атрибут width, позволяющий задать ширину таблицы и, собственно, выстраивать некий макет.

Ширина задается либо жестко — в пикселях, либо в процентах от ширины окна браузера (в этом случае к значению атрибута приписывается знак процента). Теперь наша таблица растягивается в соответствии с шириной окна.

Она может иметь ширину 100% или любой другой процент. Тут опять же есть тонкости: если заданная ширина ячейки не позволяет вместить содержимое (например, в ячейке находится большая картинка или длинное слово), то, не взирая на заданную ширину, ячейка растянется так, чтобы вместить всё содержимое. Если ширина таблицы вообще не задана, то браузер сам определяет её, исходя из содержимого. Внутри себя элемент TABLE может содержать собственно ячейки таблицы (об этом — буквально через секунду), а также элемент. Причем этот элемент должен размещаться до ячеек, т.е. сразу после открывающего тега. Этот элемент задает подпись к таблице. Этот элемент может иметь нерекомендованный атрибут align, определяющий положение подписи относительно таблицы. Может принимать значения: top (над таблицей), bottom (под таблицей), left (слева) или right (справа).

А теперь самое интересное — собственно, содержимое таблицы. Оно может распределяться по 3 группам. Первая группа — шапка таблицы — элемент. Обычно это первая строка (или строки) таблицы, содержащая заголовки столбцов. Вторая группа — "подвал" таблицы — элемент — это те же самые заголовки, только расположенные в конце таблицы. И, наконец, третья группа — собственно "тело" таблицы — элемент К шапке и подвалу мы вернемся позже, тем более, что это вещи пока довольно экзотические, а сейчас рассмотрим тело таблицы. Элемент этот, вообще говоря, является элементом подразумеваемым, так же как или. Т.е. если у вас в таблице нет шапки и подвала, а одно только "тело", то явно указывать не обязательно. Содержимое таблицы состоит из строк, разбитых на ячейки. Вот таким образом. Устроить таблицы наоборот, "поколоночно", невозможно, хотя в каких-то случаях это было бы удобнее.

Итак, строка… Задается с помощью элемента (table row — строка таблицы). Закрывать этот элемент необязательно. Строка содержит ячейки, задаваемые элементами и. Закрывающие теги у этих элементов также необязательны. Какая же разница между td и th? — это ячейка с данными, а — ячейка с "названием" строки или столбца. Например, если у нас, как в данном случае, есть ячейки, содержащие фамилии людей, и есть ячейки, содержащие некоторые данные по этим людям, то фамилии следует заключать не в, а в. В визуальных браузерах обычно выделяется полужирным начертанием и выравниванием по центру ячейки.

О выравниваниях мы поговорим позже. С помощью атрибута width можно указывать ширину ячеек, однако, как и в случае таблицы в целом, указание ширины носит для браузера скорее рекомендательный характер. Широкое содержимое всё равно при необходимости "растянет" ячейку, а некоторые браузеры могут наоборот, сужать их до размеров содержимого, не глядя на указанный атрибут. Ещё у ячеек есть атрибут height, задающий высоту, но он работает ещё менее четко, чем width, и надеяться с его помощью корректно задавать высоты ячеек не стоит. Для этого приходится пользоваться разными ухищрениями, о которых речь пойдёт дальше.

Если нужно внутри ячейки запретить перенос по словам, можно задать этой ячейке атрибут nowrap. Ему не присваивается никакого значения, просто пишется такое слово. Это значит, что содержимое ячейки должно вытягиваться в одну строчку. Однако механизм этот не очень надежен.

Например, если задана ширина ячейки, то перенос всё-таки осуществится.

Надёжнее пользоваться элементом. Этот элемент часто применяется и в других случаях. Все, что заключено в него, выводится в одну строку, без переносов.

Несколько ячеек можно объединять в одну. Для этого служат атрибуты colspan и rowspan. Разберём на простом примере. Допустим, мы хотим объединить несколько ячеек по горизонтали. Скажем, первую и вторую. Для горизонтального объединения служит элемент colspan. Значением этого атрибута является количество объединяемых ячеек, включая и первую ячейку.

В данном случае их будет две. Соответственно, вторую ячейку мы удаляем, так как она у нас слилась с первой. И вот, что у нас получилось. Мы можем объединить и три ячейки. В таком случае у нас всю верхнюю строку займет одна ячейка. Rowspan объединяет ячейки "по вертикали". Берет ячейки не из соседних столбцов, а из соседних строк. Можно, конечно, захватить для объединения ячейки и больше, чем из одной строки. Можно одновременно применять и colspan, и rowspan.

Естественно, мы не можем объединять ячейки какой-нибудь "буквой Г".

При объединении ячеек нужно быть очень внимательным, чтобы не запутаться, где у нас сколько элементов TD. Например, в данном случае мы имеем три строки по три ячейки. Но первая ячейка объединяет две по горизонтали и две по вертикали. Соответственно, в первой строке остается одна неприсоединенная ячейка. Во второй строке две первых ячейки относятся к первой строке, то есть остается также одна ячейка. Ну а третья строка не тронута. Справедливости ради надо сказать, что составлять таблицы, конечно, удобнее в HTML-редакторе, а писать их вручную — не самое эффективное занятие. Но надо уметь по крайней мере разобраться в коде, чтобы найти ошибку, если таблица "разъехалась", а редактор найти эту ошибку не может.

Ячейки таблиц могут содержать вложенные таблицы. Особенно это актуально как раз для "неправильного" использования таблиц — для создания макета страницы. Вот таким необычным образом несчастные дизайнеры вынуждены реализовывать свои смелые идеи.

Теперь вернемся к шапке и подвалу — элементам и. И шапка, и, как это ни удивительно, подвал в HTML-е должны идти до тела таблицы. Однако это перестает казаться удивительным, если разобраться, для чего они нужны. Правда, браузеры пока толком не поддерживают все эти замечательные функции, но замысел здесь следующий: во-первых, реализовать скролиинг содержимого таблицы независимо от шапки и подвала (такая возможность есть, например, в Экселе:

вы проматываете содержимое большой таблицы, при этом названия столбцов остаются у вас перед глазами), вовторых, при распечатке длинных таблиц, не помещающихся на одной печатной странице, шапка и подвал могут автоматически выводится на каждой странице.

Теперь поговорим об оформлении таблиц. Опять же оговорюсь, что правильнее контролировать оформление через таблицы стилей, но перечисленные ниже атрибуты всё ещё поддерживаются браузерами. Прежде всего, конечно, какие у нас есть механизмы раскрашивания, прошу прощения за грубое слово, таблиц? Таких механизмов два: атрибут bgcolor, задающий фоновой цвет. Если мы применяем этот атрибут к таблице, то она вся заливается этим цветом. Либо мы можем задать цвет фона отдельных ячеек. Тогда нужно проставить атрибут соответствующим элементам TD. Вот таким, например, образом. Итак, атрибут bgcolor может быть установлен как для всей таблицы, так и выборочно, для отдельных её ячеек.

Второй механизм — атрибут background, позволяющий задать в качестве фона не цвет, а некое графическое изображение. Значением атрибута является адрес файла фоновой картинки. Об этом мы подробнее поговорим при изучении изображений. Вот такая красота. Теперь остановимся на выравнивании. Содержимое любой ячейки может выравниваться тем или иным образом по горизонтали и по вертикали.

Горизонтальное выравнивание контролирует знакомый вам атрибут align.

Он может принимать значения left, center, right, justify. Все эти значения Вам уже должны быть знакомы. По умолчанию обычно ячейки с данными выравниваются по левому краю, ячейки-заголовки — по центру. Как раз с помощью атрибута align мы можем их выравнивание изменить (например, выровнять возраст по центру).

За вертикальное выравнивание отвечает атрибут valign. По умолчанию содержимое вертикально выравнивается по центру. Мы можем это изменить.

Вот этот атрибут, который может принимать значения top (выравнивание по верхнему краю), bottom (выравнивание по нижнему краю) или middle -это то, что мы видим по умолчанию — выравнивание по центру.

Следующий инструмент оформления таблиц — это расстояние между ячейками таблицы и между их содержимым. Для этого предназначены два атрибута: cellspacing и cellpadding. Cellspacing задает расстояние между ячейками таблицы. Cellpadding задает отступ от границы ячейки до её содержимого. Значения эти задаются разом для всей таблицы. Таблицы стилей позволяют задавать значения и для отдельных ячеек. Обратите внимание, что в промежутки, образованные атрибутом cellspacing, просвечивает фон таблицы.

Это позволяет нам имитировать разные интересные обводки (например вот такие, или такие) варьируя cellspacing, цвет таблицы и ячеек. Очень часто, особенно при использовании таблиц для создания макетов, значения этих атрибутов (так же как и толщину рамки) обнуляют, чтобы содержимое ячеек вплотную прилегало друг к другу. Таблица тогда фактически не видна, а видно только, каким образом сверстан текст.

Граница (рамка, обводка) таблицы и её ячеек контролируются атрибутами border, frame и rules. Border задает ширину рамки таблицы в пикселях. Как видите, это рамка самой таблицы, а не ячеек. Атрибут frame указывает, с каких сторон таблицы нужно рисовать границу, а с каких — нет. Значения могут быть следующие: void (рамка не отображается), box, border (все стороны — это значение по умолчанию), above (только верхняя граница), below (только нижняя граница), hsides (верхняя и нижняя границы), vsides (левая и правая), lhs (только левая), rhs (только правая). Вроде, ничего не забыл.

Rules отвечает не за внешнюю границу таблицы, а за границы между ячейками. Тут возможных значений чуть меньше: none (границ между ячейками нет), all (значение по умолчанию — изображаются все границы), rows (видны границы только между строками), cols (только между столбцами) и, наконец, groups (границы проводятся только между группами строк, то есть шапкой, телом, подвалом).

Вы, наверное, давно ждёте этого урока, изнывая от всех этих тегов и элементов. Ну когда же можно будет навести красоту и поместить среди всех этих блоков текста, заголовков и таблиц потрясающую воображение картину, которая одна скажет зрителю всё лучше, чем десять тысяч чудесно структурированных гипертекстовых слов?! Что ж, ликуйте: вот вам элемент. Элемент этот состоит только из открывающего тега. Главный его атрибут — src — задаёт имя файла изображения. Поскольку картинка — это не текст, сам по себе текстовый HTML-файл не может содержать в себе картинку. Он может только ссылаться на неё, т.е. иметь некоторую метку, говорящую браузеру, что "вот в этом месте должна быть вон та картинка".

Из этого следует, во-первых, что картинки лежат отдельно от HTMLфайлов, а во-вторых, что атрибут src принимает значения, аналогичные значениям href атрибута. Т.е. мы фактически ставим ссылку на изображение, а элемент заставляет браузер самостоятельно "сходить" по этой ссылке, получить картинку и отобразить её в указанном месте нашего документа. Соответственно, всё, что было сказано относительно гиперссылок, справедливо и для изображений: адрес картинки может быть относительный или абсолютный.

Как вы знаете, изображения могут быть в формате GIF или jpg. Сейчас многие браузеры поддерживают также формат png, обладающий рядом замечательных свойств. Многие, но не все. Поэтому универсальными форматами веб-графики по-прежнему остаются GIF и jpg. Атрибут alt позволяет задать описание изображения. Значение этого атрибута больше, чем кажется. Изображение само по себе — это некий чуждый гипертексту элемент, менее универсальный: в отличие от текста, воспринять изображение можно только визуально. Соответственно, для невизуальных браузеров, а также различных автоматических систем, поисковых, например, содержание изображений остается тайной за семью печатями.

Мало того, в визуальных браузерах также есть возможность отключить показ графических элементов (с целью экономии времени или трафика — объема скачиваемой информации). Тогда на месте изображений появляются прямоугольники с alt-текстом. Это позволяет нам продолжать пользоваться сайтом даже с отключенной графикой. Итак, атрибут alt позволяет создать "текстовую" версию изображения. Если на картинке изображен текст, то сам бог велел этот текст продублировать в атрибуте alt. Если что-то содержательное, то дать краткое описание этого содержания.

А вот если картинка выполняет чисто декоративную функцию, то alt-текст следует оставить пустым, не забивать страницу лишней информацией. Вряд ли слушателю звукового браузера будет интересно узнать, что между заголовком и картинкой располагается какая-то линеечка. У изображений имеются атрибуты width и height, задающие ширину и высоту изображения. Это может показаться странным, но значения этих атрибутов могут не совпадать с шириной и высотой самого изображения. И браузер худо-бедно растянет изображение под заданный формат (менее качественно, конечно, чем графический редактор, но растянет).

Однако атрибуты эти созданы в основном не для деформации изображений (хотя иногда такая деформация очень даже бывает нужна), а для того, чтобы браузер мог зарезервировать на странице место нужного размера и загружать следующий текст, не дожидаясь загрузки картинки. Дело в том, что пока картинка не начала загружаться, браузер не знает её размера.

Это приводит к тому, что если эти атрибуты не заданы, то уже загруженный текст страницы "переверстывается" на ходу по мере загрузки картинок.

Выглядит это, прямо скажем, не ахти. А в некоторых старых браузерах даже останавливалась дальнейшая загрузка текста, пока не с сервера не "приходило" изображение. В свете сказанного рекомендуется всегда явно указывать размеры всех изображений на странице.

Что касается умышленной деформации, то она позволяет делать некоторые фокусы. Например, в своё время дизайнер по имени Дэвид Сигель придумал т.н. "графическую распорку". Это изображение в формате GIF размером 1x пиксель, прозрачное. На странице такое изображение не видно. Теперь, вставляя в нужном месте документа это изображение и задавая ему нужный размер с помощью атрибутов width и height, мы можем точно управлять пустыми пространствами на нашей странице. Например, ячейка таблицы, в которую заключена такая "распорка" уже не сожмётся меньше размера этой распорки. С точки зрения содержания это, конечно, полный нонсенс, но до появления таблиц стилей распорки были вообще одним из основных механизмов управления размещением информации на странице: отступы, межстрочные интервалы и т.д., всё это имитировалось с помощью распорок.

Другой фокус: если нам нужно изобразить нечто вытянутое в одном из двух измерений, например, какую-нибудь тень, нам достаточно взять "сечение" этого предмета шириной 1 пиксель и вытянуть его с помощью атрибута width настолько, насколько нам нужно. При этом, как вы понимаете, мы существенно экономим на объеме графических файлов. Другие атрибуты изображения: hspace и vspace задают поле вокруг изображения. Соседняя с картинкой информация (текст или другие картинки) может прилегать к ней вплотную, а может отстоять на некоторое расстояние. Hspace задаёт это расстояние по горизонтали, а vspace — по вертикали. Особенно это актуально как раз при обтекании картинки текстом, поскольку текст, обтекающий картинку вплотную в большинстве случаев смотрится неудовлетворительно.

Теперь о самом этом обтекании. Задается оно атрибутом align. Вообще элемент является текстовым и не начинает новой строки. Следующие за ним тексты или изображения по умолчанию примыкают к нему справа, но выравниваются по нижнему краю. Иногда такой вариант не подходит. С помощью атрибута align мы можем задать следующие варианты: bottom (это то, что мы имеем по умолчанию: текст выравнивается с изображением по нижнему краю), top (текст выравнивается по верху картинки), middle (текст выравнивается по центру картинки).

Пока об обтекании картинки текстом речи не идёт: вторая строка текста окажется под картинкой. Если же нам нужно встроить картинку в текст, то атрибут должен принять одно из значений left (картинка слева, текст обтекает её справа) или right (картинка выравнивается по правому краю, текст обтекает её слева). Обтекать картинку может не только текст, но и, например, другие изображения меньшего размера. Таким образом можно элегантно создавать конструкции, для которых, на первый взгляд, необходима таблица. Здесь же мы добиваемся того же эффекта без таблиц.

Здесь нам невредно будет вспомнить элемент с его атрибутом clear.

Как вы помните, если мы поставим перенос строки в текст, обтекающий изображение (или даже два переноса), то перенос осуществится, но обтекание продолжится и с новой строки. С помощью атрибута clear мы можем прекратить обтекание и перенести новую строку под изображение, причем сделать это на выбор: только в случае, если текст обтекает картинку справа (clear=left), слева (clear=right) или в любом случае (clear=all). Относится это не только к тексту, но и к "обтекающим" изображениям.

Вначале мы говорили, что элемент похож на элемент. Ещё одно их сходство — это атрибут name. Правда, назначение этого атрибута в данном случае несколько иное: использовать его в качестве "пункта назначения" ссылки не получится, а нужен он для разных программистских нужд, для манипулирования изображением. Правда, атрибут этот несколько устарел, т.к.

изображению, как и любому другому элементу, может быть присвоено имя с помощью универсального атрибута id. Атрибут border задает ширину рамки вокруг изображения. Атрибут, естественно, устаревший в пользу таблиц стилей, но тут есть одна тонкость: когда у нас в документе просто стоит изображение, его рамка по умолчанию равна нулю, и беспокоиться нам не о чем. Но вот если изображение является гиперссылкой, а это происходит довольно часто, то по умолчанию вокруг него появляется синяя рамка.

Выглядит это обычно довольно несуразно. Соответственно, для изображенийссылок, заключенных в элемент, нам необходимо задать нулевую ширину рамки. Можно сделать это либо с помощью таблиц стилей, либо с помощью атрибута border, задав его значение равным нулю.

Теперь рассмотрим ещё один хитрый механизм. Как сделать изображение гиперссылкой, вы знаете, но можно, оказывается сделать гиперссылкой часть изображения, причём произвольной формы. И таких "частей" на одном изображении может быть несколько. Таким образом мы можем обойти прямоугольность картинки и сделать ссылки какой-то необычной формы.

Делается это с помощью так называемых Image maps (карт изображений).

Карты эти задаются отдельно от изображений с помощью специального элемента. Элемент этот имеет обязательный атрибут name, по которому его сможет найти изображение. Закрывающий тег — обязателен.

должны укладываться в размер изображения. Способ их задания зависит от формы области. Для прямоугольника это две пары координат: x и y верхнего левого угла и x и y правого нижнего угла.

В данном случае будет создана квадратная область размером 100х пикселей. Для окружности задаются координаты центра и радиус. В данном случае будет создана окружность радиусом 20 пикселей с центром в точке, отстоящей на 50 пикселей от верхнего края и на 50 — от левого. Ну а для многоугольника перечисляются через пробел координаты всех его точек.

Следующий атрибут элемента — href — полностью аналогичен атрибуту href гиперссылки, то есть задаёт собственно ссылку.

Наконец, знакомый вам по изображениям атрибут alt позволяет задать altтексты не для всей картинки, а для каждой из таких областей. Вероятно, у вас уже зашевелились волосы на голове от всех этих игреков, но, конечно, никто не заставляет вас корпеть с измерителем над картинкой. Существуют специальные программы, где вы размечаете все эти области с помощью специальных инструментов, а вам уже выдается готовый HTML-код.