Форматирование текста и графики на веб-страницахДля начала познакомимся с теми элементами, которые придают тексту некоторую структуру (теги заголовков и параграфов – абзацев). Для задания заголовков в HTML предусмотрено несколько видов тегов: < h1> < /h1>, < h2> < /h2>, < h3> < /h3>, < h4> < /h4>, < h5> < /h5>, < h6> < /h6>;. Текст, помещённый в конструкцию < h1> < /h1>;, будет самым большим. Текст, помещённый в конструкцию < h6> < /h6>;, будет, соответственно, самым маленьким. Если не использовать никаких дополнительных атрибутов, текст, помещённый в теги формирования заголовков, будет начинаться с новой строки и выравниваться по левому краю. Чтобы разместитьзаголовкипо-другому, следует задействовать атрибут align либо с параметром «center» (align=«center»–разместить по центру), либо с параметром «right» (align=«right» –разместить по правому краю), либо с параметром «justify» (align=«justify» –поширине). Используя теги заголовков, помните, что они отвечают только за формирование заголовков. Не нужно использовать их для переносов обычного текста, поскольку для этих действий существуют специальные конструкции – тегиформирования параграфов. Параграфы формируются посредством использования конструкции < p> < /p>;. Текст, заключённый в эти теги, также как и заголовки, можно выровнять по правому краю, по ширине или по центру. Для этого используется всё тот же атрибут align. Также отступ между параграфами можно сделать больше, вставив между ними пустую конструкцию < p> < /p>, или используя тег принудительного переноса. За принудительный перевод строки отвечает тег < br>;. Его можно использовать для разбивки любого текста и формирования отступов. Весь текст, который будет следовать за < br>;, будет перенесён на новую строку. Обратите внимание, что по умолчанию текст в html-документе размещается в одной строке. Рассмотрим подробнее, как с учетом приобретенных знаний создать простейшую веб-страницу, на которой будет заголовок и выравненный по ширине текст (см. рис. 2.3.)
Рис. 2.3. Размещение текста на странице Текст данной страницы набирается либо в блокноте – неспециализированном текстовом редакторе, который не поддерживает форматирование, либо в специализированном редакторе веб-страниц. Обратите внимание, что сохранить страницу надо с расширением.html. Для этого в меню «Файл» выберите команду «Сохранить как» (см. рис. 2.4.)
Рис. 2.4. Сохранение веб-страницы
Для отделения разделов и добавления более строгой разбивки можно использовать горизонтальную линию. За её вставку отвечает тег < hr>;. Помимо имени этот тег имеет и ряд атрибутов. Так, чтобы изменить цвет линии, необходимо использовать атрибут color. Например, запись color=" red" поменяет цвет линии на красный. Идентична этому запись color=" #FF0000", устанавливающая всё тот же красный цвет. Помимо цвета у линии можно менять размер (атрибут size, например size=" 10"), расположение (атрибут align), ширину (атрибут width, например width=" 20"). Также можно сделать так, чтобы линия изображалась сплошной, а не контурной, используя атрибут noshade без значения. Для форматирования шрифта оформляемого текста возможно использовать тег < font> < /font>. Тег < font> представляет собой контейнер для изменения характеристик шрифта, таких как размер (атрибут size), цвет (атрибут color) и гарнитура (атрибут face). Кроме того, для оформления текста будем использовать соответствующие теги манипуляции, которые можно разделить на две группы: теги, управляющие формой отображения (например, толщиной текста, подчёркиванием или зачёркиванием), и теги, характеризующие тип информации (например, назначение цитирования или заключение текста в скобки) (см. табл. 2.2). Все эти теги не имеют собственных атрибутов, разве что атрибуты общего назначения (например, id или name). Эти структуры обязательно должны иметь открывающий и закрывающий теги и не должны пересекаться. При этом можноодин и тот жетекст сделать одновременно и подчёркнутым, и жирным. Для этого достаточно применить последовательность тегов, не забывая о том, что они должны обладать свойством вложенности и не должны перекрывать друг друга. Например, запись < b> < u> мой текст < /u> < /b>. Таблица 2.2. Теги управления текстом
Следует отметить, что тег < pre> < /pre>, не приведённый в таблице 2.2. первой, и ко второй группе. Эта конструкция отвечает за отображение уже отформатированного текста. Здесь каждый перенос — это действительно перенос, а значит можно не использовать тег < br>;. Все пробелы и знаки табуляции, заданные внутри конструкции < pre> < /pre>, также учитываются и отображаются. В заключение работы с текстом рассмотрим вывод служебных символов языка HTML. Например, за отображение двойных кавычек отвечает запись & quot; за знак < запись & lt; а за знак > запись & gt; Если в HTML-код необходимо вставить комментарии, то следует использовать конструкцию <! -- -->;. Любой текст, помещённый в эту конструкцию, будет проигнорирован браузером. Для вставки изображений в электронную страницу используется тег < img>;. Используя его, вы можете поместить на страницу изображения с расширениями.gif (поддерживает прозрачность и анимацию),.png (поддерживает прозрачность) и.jpeg (без прозрачности и анимации). Однако, выбирая первые два формата, помните, что не все браузеры поддерживают прозрачность и анимационные эффекты. Поэтому, не удивляйтесь, если некоторые рисунки будут выглядеть не так, как вы рассчитывали. Для того чтобы привязать к тегу < img> изображение, необходимо использовать обязательный атрибут src, который определяет адрес файла с изображением. Если изображение находится в папке с html-файлом, запись будет выглядеть примерно следующим образом: < imgsrc=" img.jpeg" >;, где значение атрибута src – путьдо файла с изображением. Этот путь может быть не только до изображения, находящегося в файловой системе вашего компьютера, но и до любого изображения, находящегося в сети Интернет (аналогично определению гиперссылки на Интернет-ресурс). Также картинка может стать ссылкой на другие страницы, если поместить её в тег < a> < /a>, например, < a href=" paragraf.html" > < imgsrc=" img.jpeg" /> < /a>. Ещё одним свойством тега < img> является отображение описательного текста к картинке. То есть текста, который будет показываться, если произошла ошибка при загрузке изображения или если браузер не поддерживает отображение картинок. За это отвечает необязательный атрибут alt. Ему присваивается некоторая запись, например, alt =«это ссылка на страницу Х». У тега < img> есть ещё необязательные атрибуты. Они отвечают за размер изображения, обтекание текста, формирование рамки и др. Все они, вместе с вышеуказанными параметрами, представлены в табл.2.3. Таблица 2.3. Атрибуты тега img
Помимо атрибутов, указанных в таблице 2.3., в теге img можно использовать атрибуты общего назначения, такие как name или id. Преобразуем созданную ранее страницу к следующему виду (см. рис. 2.5)
< html> < head> < title> Монитор< /title> < /head> < body bgcolor=" gold" > < h1 align =" center" > Монитор< /h1> < hr size=" 2" > < br> < p align=" justify" > < font size=" 3" color=" blue" > < imgsrc=" 1.gif" width=" 100" align=" left" > Монитор является основным устройством вывода информации. Размеры монитора определяются длиной диагонали экрана и измеряются в дюймах. Другой параметр, характеризующий работу вмонитора - разрешение. Для количественного описания разрешения используют пиксел (pixel - от pictureelement, по-русски - точка). Режимы разрешения различаются количеством пикселов, укладывающихся по горизонтали и вертикали экрана. На мониторах общего назначения обычно устанавливают режимы: 640x480, 800x600, 1024x768 или 1280x1024 пикселов. По физическим принципам, лежащим в основе конструкций дисплеев, они делятся на мониторы с электронно-лучевой трубкой и к жидкокристаллическим дисплеям. У первых формирование изображения производится на внутренней поверхности экрана, покрытого слоем люминофора - вещества, светящегося под воздействием электронного луча, генерируемого специальной " электронной пушкой" и управляемого системами горизонтальной и вертикальной развертки. Жидкокристаллический экран состоит из крошечных сегментов, заполненных специальным веществом, способным менять отражательную способность под воздействием очень слабого электрического поля, создаваемого электродами, подходящими к каждому сегменту. < /font> < /p> < /body> < /html> Рис. 2.5. Оформление веб-страницы с изображением
Для формирования списков необходимо наличие отступов и специальных значков (например, «•» в начале), которые отделяли бы специальный текст от обычного. Теги параграфа и принудительный перенос не дают подобной наглядности. В этой связи в HTML существуют специальные теги, отвечающие за формирование списков. За вставку нумерованного списка отвечает конструкция < ol> < /ol>;. Но одних этих тегов недостаточно. Это лишь основа для будущей иерархии. Чтобы появились пункты необходимо использовать внутри тегов < ol> < /ol> конструкции < li> < /li>;. Если же необходимо задать заголовок для списка, внутри конструкции < ol> < /ol> используют теги < lh> < /lh> (l ist h eader). По умолчанию нумерация элементов начинается с цифры 1. Однако в языке HTML предусмотрено ещё четыре способа задания типа нумерации, которые можно переопределить атрибутом type тега ol: A (прописные буквы, начиная с A, B, C и далее), a (строчные буквы, начиная с a, b, c и далее), I (римские цифры, начиная с I, II, III и далее), i (строчные римские цифры, начиная с i, ii, iii и далее). Этот же атрибут можно использовать и для тега li, если вы хотите переопределить тип нумерации. Ещё одним очень важным моментом в организации списков, является возможность переопределять начало отсчёта. Например, необходимо задать отсчёт не с 1, а с 5 или 10. Для этого можно использовать атрибут start тега < ul> с присваиваемым ему значением (например, < ulstart=" 10" >) или атрибут value тега < li> (например, < livalue=" 5" >). В первом случае нумерация изменится, начиная с первого элемента списка. Во втором случае нумерация изменится, начиная с того li, в котором определено значение атрибута li. Создадим нумерованный список устройств ввода с римской нумерацией, начинающейся с трех (см. рис. 2.6).
Рисунок 2.6. Нумерованный список
За вставку ненумерованного списка отвечает конструкция < ul> < /ul>;. Эти теги, как и в примере с нумерованным списком, являются основой. Внутри них также нужно использовать конструкции < li> < /li>;, чтобы получить отдельные пункты. В случае с ненумерованным списком у тега ul можно использовать атрибут type со следующими параметрами: circle (круг), square (квадрат) и disc (диск). Этот параметр отвечает за вид значка, который будет помещаться перед текстом очередного пункта. Ещё одним параметром тега ul является атрибут compact, который используется без присваивания значения. С таким определением список будет выглядеть чуть меньше основного текста. Создадим ненумерованный список назначения устройствкомпьютера, обозначив каждое значение окружностью (см. рис. 2.7).
Рисунок 2.7. Ненумерованный список
Список терминов и определений используется в том случае, если вы решили завести на сайте словарь или глоссарий. Этот список в отличиеотпредыдущих представляет собой две строки. Он формируется посредством использования тегов < dl> < /dl>;. Дальше необходимо определить термин (d efinition t erm) используя конструкцию < dt> < /dt>;, затем — описание термина (d efinition d ata), используя конструкцию < dd> < /dd>;. В подобных словарях неплохо использовать теги форматирования, обеспечивающие полужирный текст или курсив, чтобы придать тексту наглядность. Создадим список терминов, выделив сами понятия полужирным, а их определения курсивом (см. рис. 2.8.). Рисунок 2.8. Список терминов Вопросы и задания для самостоятельной работы 1. Систематизируйте теги, позволяющие форматировать веб-страницу, абзац, строку (заголовок), символ? 2. Какими общими атрибутами обладают все теги? 3. Каким образом можно добиться того, чтобы в окне браузера отображались специальные символы? 4. Какой тег отвечает за вставку изображения в страницу? Какими атрибутами он обладает? 5. Какие теги отвечают за формирование нумерованного списка? Какими атрибутами обладают эти теги? Для чего используются? 6. Какие теги отвечают за формирование ненумерованного списка? Какими атрибутами обладают эти теги? Для чего используются? 7. Какие теги отвечают за формирование списка терминов и определений? Какими атрибутами обладают эти теги? Для чего используются? 8. Каким образом можно организовать вложенный список? Создайте многоуровневый список для устройств ввода, вывода, передачи и обработки информации. 9. Для создания списков можно использовать тег < menu> < /menu>;. Узнайте о нем подробнее. Когда он используется и для чего? В чём его принципиальные отличия? Какими атрибутами обладает? 10. При помощи списка терминов и определений, создайте словарь по web-дизайну (минимум 10 терминов с описанием). 11. Создайте собственную web-страницу по теме (согласно вашему варианту), удовлетворяющую следующим требованиям: наличие фона, заголовков двух уровней, главный заголовок, отделяется линиями, основные термины в тексте должны быть выделены, сам текст разбит на абзацы, выравненные по ширине.Вставьте не менее двух иллюстрацийс разными видами выравнивания и подписями. Создайте на странице любой вид списка.
|
