Теги, управляющие формой отображения

Теги <ВIG> и <SMALL> — изменение размеров шрифта

Атрибут СОLОR

Если вы хотите сделать свою страницу более красочной, можете воспользоваться атрибутом СОLОR в теге FONТ, и тогда единственным ограничением будет цветовая палитра на компьютере пользователя.

Теги, управляющие формой отображения, приведены в таблице.

Создание списков в HTML

Неупорядоченные списки — тег <UL>

Ненумерованный список. Ненумерованный список предназначен для создания текста типа:

· первый элемент списка;

· второй элемент списка;

· третий элемент списка.

Записывается данный список в виде последовательности:

<UL>

<LI>первый элемент списка

<LI>второй элемент списка

<LI>третий элемент списка

</UL>

Упорядоченные списки — тег <OL>

Нумерованные списки. Тег <OL> вместе с атрибутом ТYРЕ= в HTML 3.2 позволяет создавать нумерованные списки, используя в качестве номеров не только обычные числа, но и строчные и прописные буквы, а также строчные и прописные римские цифры. При необходимости можно даже смешивать эти типы нумерации в одном списке:

<ОL ТYРЕ=l> Тег создает список с нумерацией

в формате 1., 2., 3., 4. и т.д.

<ОL ТYРЕ=А> Тег создает список с нумерацией

в формате А., В., С., D. и т.д.

<OL ТYРЕ=а> Тег создает список с нумерацией

в формате а., b., с., d. и т.д.

<ОL ТYРЕ=I> Тег создает список с нумерацией

в формате I., II., III., IV. и т.д.

Комментарии в языке HTML

При разметке документов HTML возникает необходимость в использовании комментариев, которые браузер не выводит на экран, но другой специалист, редактирующий данный документ, может прочитать. Комментарии HTML начинаются с символа "<!--" и оканчиваются символом "-->". Гипертекстовые ссылки

Для записи гипертекстовой ссылки используется тег <А>, который называют "якорь" (аnchor). Якорь имеет несколько атрибутов, главным из которых является НREF. <А НREF="http://www.intuit.ru/index.htm">Отображаемое название гипертекстовой ссылки</А>,

Вставка графики: Пример вставки изображения:

<IMG SRC="image.gif" ALT="ИЗОБРАЖЕНИЯ">

Для обозначения изображения как гипертекстовой метки используется:

<А НREF="адрес файла или изображения"> <IMG SRC="image.gif"></А>

Таблицы:

Рассмотрим следующий пример.

Программа

<TABLE border=1> <TR> <!-- Первая строка --> <TD>(1,1)</TD> <!-- Первая ячейка --> <TD>(1,2)</TD> <!-- Вторая ячейка --> </TR> <TR> <!-- Вторая строка --> <TD>(2,1)</TD> <!-- Первая ячейка --> <TD>(2,2)</TD> <!-- Вторая ячейка --> </TR> </TABLE>

 

17. Язык HTML. Табличная верстка сайта

 

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

По принципам использования средств разметки HTML различают логическую разметку и презентационную (физическую). Например, курсивный текст можно получить как с помощью тега <i>, так и с помощью тега <em>. В первом случае курсив задаётся явным образом, а во втором на текст производится логическое ударение, которое обычно отображается курсивом. Иными словами, при первом подходе ориентируются на внешний вид, а во втором — на логическое предназначение. Преимуществом второго подхода является независимость вёрстки от используемого типа устройств и дизайна веб-страниц. Если придерживаться логической разметки, то можно использовать один и тот же вариант вёрстки для экрана, печати и КПК, регулируя внешний вид с помощью отдельных файлов стилей.

Вёрстка с помощью таблиц [править]

Браузеры преднамеренно расценивают таблицу как один объект, из-за чего содержимое таблицы не отображается до тех пор, пока оно целиком не будет загружено на локальный компьютер.^[3] При использовании таблицы в качестве каркаса для размещения элементов веб-страницы, её исходное преимущество обращается в недостаток, поскольку приводит к задержке вывода содержимого. Следует учитывать также и растущий объем веб-страниц при активном использовании таблиц, особенно в случае их вложенности друг в друга. Всё это приводит к тому, что табличная верстка вызывает ненужные задержки вывода информации в браузере.

Проблема возникает при множественной вложенности таблиц, что характерно для достижения определённых эффектов на веб-странице. Рост количества таблиц повышает шанс возникновения ошибок при вёрстке, увеличивает размер документов и снижает скорость загрузки файлов. Применение визуальных редакторов, вроде Adobe Dreamweaver или Microsoft FrontPage, для создания и правки документов облегчает работу с таблицами, но из-за обилия их параметров и в этом случае разработчики не застрахованы от появления ошибок и лишней работы, связанной с индивидуальным редактированием каждой таблицы.

Кроме того, использование таблиц для целей оформления не соответствует концепции семантичной вёрстки, подразумевающей использование элементов (тегов) в соответствии с их смыслом, семантическим значением. Элемент <table> и сопутствующие (<tr>,<th>,<td> и др.) предназначены для разметки табличной информации (т. е. такой, в которой имеется смысловая связь между элементами, принадлежащими одному столбцу или одной строке). W3C, как разработчик языка HTML, призывает использовать HTML для логической разметки информации, а оформление (в т. ч. позиционирование различных блоков) описывать отдельно от (X)HTML-разметки (с помощью CSS, например).

«Распорки» [править]

При использовании таблиц широко известным приемом стало применение распорок — прозрачных изображений высотой в один пиксель. Само изображение не отображается на веб-странице, но его можно масштабировать в любых пределах. Получается невидимая палочка определённой ширины или высоты, которая не дает ячейкам таблицы сблизиться меньше, чем на заданное расстояние. Распорки особенно были актуальны для браузера Netscape, который не показывал фон ячейки, если в ней ничего не размещалось. Чтобы избавиться от указанной особенности и помещали в ячейку маленький прозрачный рисунок в формате GIF.

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

Верстальщик [править]

Вёрсткой веб-страниц занимаются верстальщики. В общем случае в задачу верстальщика входят:

· создание кода веб-страницы с помощью соответствующего языка разметки. Таковыми могут быть, например, HTML, XHTML, XML.

· оформление ранее созданного кода страницы с помощью встроенных средств языка разметки, либо же с помощью каскадных таблиц стилей CSS

При этом он часто пользуется следующим ПО:

· текстовый редактор или редактор HTML для написания и редактирования кода

· графическая программа для так называемой «нарезки» графического макета, полученного верстальщиком от веб-дизайнера

А также иногда прибегает к помощи:

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

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

Использование WYSIWYG редакторов и программ автоматической верстки часто осуждается^[4][5] из-за низкого качества получаемого кода. Тем не менее, зачастую для пользователей их использование удобнее ручного кодирования, а также не требуют глубокого знания HTML, и поэтому широко используются.

 

18. Растровые и векторные изображения. Типы файлов

 

 

Растровая графика

В растровой графике изображения состоят из разноцветных точек (пикселей), которые в совокупности формируют рисунок. На размер файла влияют размер изображения (количество пикселей по горизонтали и вертикали) и количество цветов. Растровую графику используется в разработке электронных (мультимедийных) и полиграфических изданий, поскольку она позволяет эффективно и реалистично представить объект. Иллюстрации, выполненные средствами растровой графики, редко создают вручную, с помощью компьютерных программ. Чаще всего используют сканирование изображений, подготовленных художником на бумаге или фотографии. В последнее время для ввода растровых изображений используют цифровые фото и видеокамеры. Поэтому, большинство растровых графических редакторов ориентировали на обработку изображений. Большие объемы данных - главная проблема в использовании растровых изображений. Одной из проблем растровой графики является невозможность детализации изображения. Увеличивая изображение увидим, что пиксели стали крупнее. Никаких дополнительных деталей при увеличении растрового изображения увидеть невозможно.
Наиболее популярными программами для работы с растровой графикой есть Adobe Photoshop, Corel Photo-Paint, Jasc Software Paint Shop Pro, Microsoft PhotoDraw, Adobe PhotoDeluxe, Corel Painter.

Векторная графика

Графические изображения, создаваемые в программах для работы с векторной графикой, основанные на математических описаниях векторов, а не на описании координат точек. Основу таких изображений (кривые и прямые линии) называют векторами. Поскольку при изображении объектов на графических изображениях используют векторы, описанные математическими формулами, то отдельные элементы изображения, которые получаются такими программами, можно легко перечислять, увеличивать или уменьшать без потери качества изображения. Для перемещения объекта на изображении достаточно перетащить мышкой. Компьютер автоматически вычисляет размер и новое местонахождение объекта изображения. Идея векторизации изображения заключается в описании элементов изображения с помощью математических формул. Изображения раскладываются на простые объекты - примитивы. Примитивы создаются на основе ключевых точек, которые определяются в виде набора чисел. Программа воспроизводит картинку, ключевых точек.
Векторную графику применяют в создании схематических изображений - в рекламных агентствах, дизайнерских бюро, редакциях для чертежей, проектно-конструкторских работ. Объекты векторной графики хранятся в памяти компьютера в виде набора параметров. Для изображения одного объекта достаточно 20-30 байтов оперативной памяти.
Наиболее популярными программами для работы с векторной графикой является CorelDraw Grafics, Suite, Adobe Illustrator, Macromedia Free Hand.

Графическихе файлы. Форматы

Как и любые другие данные в компьютере графические изображения хранятся в виде файлов, имеющих определенную организацию данных, оптимальную для конкретной программы.
Формат графического файла определяет структуру файла и способ хранения данных. Знание файловых форматов и их возможностей является важнейшим ключевым фактором при работе по подготовке изданий, создании изображений для web-страниц и электронных публикаций, а также для редактирования исходных изображений. Графические файлы, используемые для записи изображений, можно разделить на три категории:

• форматы сохраняющие изображение в растровом виде (расширение файлов. Bmp,. Tiff,. Pxs,. Psd,. Jpeg,. Png,. Gif);
• форматы сохраняют изображение в векторном виде (расширение файлов. Wmf,. Dxf);
• форматы универсальные (метафайлы), такие, совмещающие векторное и растровое изображение (расширения файлов. Eps,. Pict,. Cdr,. Ai).

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

 

 

19. Цветовые модели в компьютерной графике