Файл: Разработка сайта кинотеатра «Мороз».pdf

color

<br>

Данный элемент осуществляет перевод строки, то есть практически аналогичен нажатию Enter в текстовом редакторе. После того, как в браузерах появилась возможность обтекания изобра- жения текстом (cм. атрибут ALIGN элемента IMG), понадобился дополнительный атрибут CLEAR. Элемент не имеет конечного тега.

Атрибуты

Clear. Указывает на необходимость завершения обтекания изображения текстом. Может принимать следующие значения:

• all – завершить обтекание изображения текстом.

• left – завершить обтекание текстом изображения, выровненного по левому краю.

• right – завершить обтекание текстом изображения, выровненного по правому краю.

<blockquote>

Тег <blockquote> предназначен для включения в документ длинных цитат, создавая отступы с обеих сторон текста (обычно задает отступ в 40 px) и отделяясь от остального текста пустыми строками. Требует обязательный парный закрывающий тег </blockquote>.

Списки

Нумерованные списки (упорядоченные).

<ol> – ordered list – задает нумерованные списки <li> – list item – элемент списка (</li> можно не использовать).

Маркированные списки

<ul> – unordered list type = "circle" "disk" "square"

Списки определений

Форматирование текста

Для форматирования текста, то есть задания шрифта, его цвета и размера используется тег <font>. При этом требуется также указывать и закрывающий тег </font>.

Физические стили

<b>полужирный текст</b> – полужирный текст

<i>курсив (италик)</i> –курсив (италик)

<tt>пишущая машинка</tt> (teletype) – пишущая машинка

<u>подчеркивание</u> –подчеркивание

<strike>зачеркнутый текст</strike> –зачеркнутый текст

^{верхний индекс} –верхний индекс

_{нижний индекс} –нижний индекс

Логические стили

<strong>полужирный текст</strong> – полужирный текст

<em>курсив (италик)</em> –курсив (италик)

<code>программный код</code> – программный код

<samp>sample – пример (моноширинный шрифт)</samp> – sample – пример (моноширин-ный шрифт)

<var>variable – переменная (часто курсив)</var> –variable – переменная (часто курсив)<kbd>keyboard (моноширинный или bold)</kbd> – keyboard (моноширинный или bold) <cite>cite – цитата (курсив)</cite> –cite – цитата (курсив)

<dfn>definition – определение (курсив)</dfn> –definition – определение (курсив)

Стилевое форматирование

Стилевое форматирование текста задается с помощью каскадных таблиц стилей (CSS).

2.4 Теги для работы с графикой в HTML - документе

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

Картинка, может быть и фоном, т.е. фон сайта не обязательно должен быть просто белым или черным, но фон нужно правильно подобрать, чтобы избежать «слияние» текста с изображением – его будет невозможно прочитать.

Вставка изображения в документ html. Для вставки графических элементов служит тэг <IMG>.

Пример в сайте:

<img src="Картинки/3 сейчас.jpeg" width="89" height="116" />

Видим соответствующий тег и параметры изображения (высота, ширина)

Графика должна быть подготовлена предварительно в каком-либо графическом редакторе, либо получена с помощью цифрового аппарата или сканера, а можно просто взять уже готовое изображение. По возможности следует использовать графические файлы небольших размеров, дабы уменьшить время загрузки страницы браузером. Вряд ли стоит использовать на одной странице графические изображения размером, превышающим в сумме 100 kB. Такая страница будет грузиться очень долго у большинства пользователей и далеко не каждый дождется конца загрузки. Графика должна быть представлена в виде файлов с расширениями .jpg .gif. Многие пользователи отключают в своих браузерах поддержку графики, дабы увеличить скорость работы в Интернете. Атрибут Alt позволяет создать текст, который при необходимости должен быть отображен вместо графики. Чтобы вставить графику в текст html-страницы надо указать имя и место хранения соответствующего файла. Если файл находится в той же папке, что и страница, то достаточно указать имя файла с расширением. Если графический файл находится в другой папке, то, помимо имени файла с расширением необходимо указывать путь к этому файлу. Для выравнивания изображения по центу используется тэг <CENTER>, для размещения на новой строке - тэг  <BR>

Добавление фона в документ html. Если белый фон страницы вас не устраивает, то с помощью атрибута BACKGROUND тэга <BODY>, можно снабдить страницу любым графическим фоном. Т.к. браузер автоматически размещает копии изображения таким образом, чтобы заполнить всю страницу, то изображение, применяемое для формирования фона можно делать небольшим по размеру.

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

Рамка придает изображению четкость и определенность. Для создания рамки служит атрибут BORDER тэга <IMG>. Используя этот атрибут можно указать толщину линии рамки в пикселях. Если указать нулевое значение, то рамка отображаться не будет.

Обтекание графики текстом в документе html. Если хотите, чтобы графический рисунок органически вписывался в дизайн вашей Вэб-страницы, то в этом вам поможет атрибут ALIGN тэга <IMG>. Этот атрибут допускает задание двух значений - left right. Значение left заставляет браузер помещать изображение слева от текста, а right - справа от него. Если надо, чтобы форматированию подвергался только определенный фрагмент текста, следует применить тэг BR с атрибутом CLEAR, указывающими позицию в тексте, начиная с которой действие механизма обтекания графики текстом отменяется. Значения left, right, all атрибута CLEAR позволяют определить, с какой стороны - левой, правой, обеих - текст далее будет свободен от графики. Следует заметить, что если атрибут ALIGN уже был применен вами для выравнивания текста относительно графики в пределах конкретной Вэб-страницы, установить параметр обтекания графики текстом вам не удастся. Атрибут ALIGN дает возможность разместить текст между двумя графическими изображениями. В этом случае тэги, описывающие изображения, должны быть расположены над текстом, который будет заключен между ними.

Выравнивание текста html-страницы.Атрибут ALIGN тэга <IMG>, принимающий значения top, middle, bottom позволяет задавать вертикальное положение текста относительно границ графического изображения. По умолчанию браузер выравнивает текст по нижней кромке изображения. Если в строке текста включено несколько изображений, то выравнивание может привести к неожиданным эффектам. Следует учесть и тот факт, что если атрибут ALIGN уже был применен для задания параметра обтекания графики текстом, установить признак выравнивания текста относительно графики в пределах конкретной страницы не удастся.

Пустая область вокруг изображения html-страницы. Графические изображения в Вэб-браузере имеют, по умолчанию, пустую рамку в несколько пикселей, которая отделяет их от текста. Для увеличения пустой области вокруг изображения служат атрибуты HSPACE, VSPACE тэга <IMG>. Текст, отделенный от графики лучше усваивается, а пустая область между соседними изображениями предотвращает толкование их в виде единого целого. Атрибут HSPACE задает ширину чистой области СЛЕВА И СПРАВА от изображения. Атрибут VSPACE задает ширину чистой области СВЕРХУ И СНИЗУ от изображения.

Горизонтальная линейка html-страницы. Для построения горизонтальной линейки служит дескриптор <HR>. По умолчанию браузер строит линейку толщиной в 2 пикселя. Для изменения ширины и длины линейки служат атрибуты SIZE, WIDTH. По умолчанию браузер выравнивает линейку посреди страницы. Для изменения выравнивания надо воспользоваться атрибутом ALIGN.

Атрибут NOSHADE устраняет эффект объемности линейки. Списки с графическими маркерами html-страницы. С помощью маленьких изображений можно строить списки. Такие списки с графическими маркерами заметно оживляют внешний вид страницы. Размеры изображений должны соответствовать параметрам форматирования текста. Чтобы воспользоваться графическими маркерами, надо применить атрибут ALIGN, присвоив ему одно из значений - top, middle, bottom, позволяющих соответствующим образом выровнять строку текста элемента списка по вертикали относительно границ маркера. Улучшить внешний вид данных посредством задания ширины чистой полосы, отделяющей маркер от текста элемента списка, поможет атрибут HSPACE.

Преобразование формата изображения html-документа. Если картинка хранится в файле с расширением отличным от .gif или .jpg, то вам необходимо будет выполнить преобразование формата изображения в нужный. Для этого можно воспользоваться средствами одной из программ редактирования графики, например Adobe Photoshop или Corel PhotoPaint. Более подробно работа непосредственно с графикой рассматривается на ветке сайта"Графика". Изображения GIF (Graphics Interchange Format) могут содержать 256 цветов и используются, в основном, для отображения рисунков. Кроме того, этот формат обладает средствами поддержки анимации и прозрачности. Изображения JPEG (JPG) (Joint Photographic Experts Group) содержат более 16 млн. цветов. Данный формат используется для хранения фотографий и крупных изображений. Как правило, в процессе конвертации файла в формат .gif или .jpg его размер уменьшается, что способствует увеличению скорости загрузки картинки.

Задание размеров изображения html-документа. Задание размеров графического изображения явно (с помощью атрибутов WIDTH, HEIGHT) позволяет браузеру загружать картинку с большей скоростью, т.к. он не тратит время на дополнительные вычисления. Чтобы задать размер изображения, его, понятное дело, надо знать. Узнать размер можно, практически, в любом графическом редакторе. Если вы пользуетесь хорошим html-редактором, то он автоматически вставляет размер изображения в текст страницы при выборе соответствующего графического файла. Еще одним существенным плюсом задания размеров "вручную" есть тот факт, что пользователи, отключившие в своих браузерах средства обработки графики, увидят ваше творение именно в том виде, в каком оно замышлялось, поскольку область Веб-страницы, предусматривающие размещение в них графических изображений определенных размеров, останутся в неприкосновенности.

Увеличение размеров изображения html-документа. Задавая явно размеры изображения можно увеличить его размеры. Таким образом можно получить большое изображение не увеличивая объем графического файла и времени, требуемого для его загрузки. Задавая размеры изображения, указывайте нужные значения в пикселях или процентах относительно текущих габаритов окна браузера. Следует заметить, что не следует злоупотреблять увеличением размеров, т.к. в этом случае картинка становится "зернистой" и теряет свое качество. Если значение новых размеров задавать в пикселях, надо использовать оба атрибута WIDTH, HEIGHT. Чтобы избежать искажений, необходимо соблюдать пропорцию. Если же значения вводятся в процентах относительно размеров окна браузера, достаточно задать любое значение (ширину или высоту), - остальное браузер пересчитает автоматически.

Уменьшение изображения html-документа. Аналогичным способом можно уменьшать изображения. Однако здесь существует немаловажный недостаток. Время, необходимое для загрузки картинки остается то же. Т.е. картинка грузится своего "настоящего" размера, просто она "вжимается" в те рамки, которые вы явно указываете атрибутами WIDTH, HEIGHT. Таким образом, чтобы уменьшить размеры изображения, надо воспользоваться средствами одной из программ редактирования графики, например Adobe Photoshop или Corel PhotoPaint. После завершения редактирования рекомендую сохранить внесенные изменения в новом файле. Таким образом, вы всегда сможете воспользоваться исходным изображением.

Уменьшение разрешения html изображения. Уменьшение разрешения изображения позволяет сократить объем графического файла, а значит и время его загрузки браузером. Однако, следует учитывать тот факт, что уменьшение разрешения ведет к потере качества изображения. Большинство мониторов отображают графику с разрешением 72 пикселя на дюйм. Такое разрешение вполне приемлемо, если пользователи не собираются получать с изображения печатные копии.

Чтобы уменьшить разрешение изображения можно воспользоваться средствами одной из программ редактирования графики, например Adobe Photoshop или Corel PhotoPaint. Атрибут LOWSRC позволяет воспроизвести в окне браузера изображение низкого разрешения в течение времени пересылки на компьютер пользователя исходного высококачественного изображения. Прежде чем воспользоваться данным атрибутом, вы должны создать картинку с низким разрешением. В html-коде надо использовать атрибуты WIDTH, HEIGHT для задания высоты и ширины изображения высокого разрешения, т.к. в противном случае в окне браузера оба изображения будут воспроизведены в формате, отвечающем упрощенной версии.