Интегрированные изображения IUPUI

Логотип Web by Design
Главная Учебники Ресурсы почет резюме

За основами HTML

Содержание

Original:http://www.iupui.edu/~webtrain/tutorials/beyond.html

Исходная информация

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

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

ПРИМЕЧАНИЕ. Если вы решите попробовать некоторые из этих методов HTML, вам не нужно размещать разрывы строк, которые могут быть указаны в этих примерах кодирования HTML; Примеры в этом раздаточном материале могут показывать разрывы строк только из-за форматирования самого раздаточного материала.

Вернуться к началу

Цветовые эффекты

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

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

См. Примеры цветов, которые можно использовать всеми веб-браузерами.

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

«Браузер-безопасные» цвета - это те, которые остаются верными на вычислительных платформах и просматриваются в 256 цветах, 16- или 24-битных настройках цвета. Другие цвета могут быть pixelate (появляются точками) или полосой (ленты, а не смешанные, цветные). Безопасные для браузера цвета всегда представляют собой комбинации 00, 33, 66, 99, cc, ff. Все цвета, указанные в диаграммах оттенков и значений выше, являются безопасными для браузера цветами.

Вместо использования тега <body> вы можете добавить любую комбинацию опций для цвета ссылок, текста, ссылок и посещенных (последующих) ссылок.

ПРИМЕЧАНИЕ. Эти параметры могут быть помещены в любую последовательность после «тела» в теге.

Тег с параметрами будет следовать этому формату: <body bgcolor = "# xxxxxx" text = "# xxxxxx" link = "# xxxxxx" vlink = "# xxxxxx"> где "xxxxxx" - это значение rgb.

Вернуться к началу

Обои

Любое изображение, которое можно просмотреть на домашней странице, также можно использовать в качестве «обоев». Это еще один вариант, который можно использовать с тегом body. Тег с этой опцией будет читать: <body background = "name.gif"> где "name.gif" - это имя вашего файла изображения. Вы должны выбрать тонкий фон с несколькими цветами, который не мешает презентации вашей информации.

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

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

Фоновое изображение будет автоматически разбиваться по ширине и высоте вашей домашней страницы. Например, это изображение заполнит пространство за вашей домашней страницей. Плитка позволяет использовать гораздо меньшую графику, чем вам нужно будет заполнить страницу; Таким образом, ваша страница загружается быстрее. Большинство обоев - около 100x100 пикселей; Минимальный размер для наиболее эффективной обработки - 64 x 32 (wxh).

СЕКРЕТНЫЙ СОВЕТ: Получите доступ к своим сокровищницам и не стесняйтесь хранить те, которые вам нравятся: обои , фотографии , графика или анимированная графика.

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

Вернуться к началу

Специальные текстовые эффекты

Вы можете влиять как на цвет, так и на размер текста, используя тег <font>. Два варианта, которые вы можете использовать с шрифтом, - это цвет и размер. Как и в случае с любым вариантом, вы можете использовать их отдельно или вместе в зависимости от желаемого эффекта.

Текстовые цвета

Чтобы изменить цвет слова или фразы, вы можете использовать опцию «color». Например,

<Font color="xxx">HOT! ГОРЯЧИЙ! HOT!</FONT>

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

Хотя есть много цветов, которые теперь можно назвать по имени и общепризнанные как Internet Explorer, так и Netscape, есть только шестнадцать цветов, которые являются стандартными HTML и распознаются W3C (отображается в следующем абзаце).

Цвета, признанные стандартом HTML, следующие: черный (#000000), зеленый (#008000), серебристый (#C0C0C0), лайм (#00FF00), серый (# 808080), оливковый (#808000), белый (#FFFFFF) (#0000FF), Синий (#0000FF), Фиолетовый (# 800080), Тил (#008080), Фуксия (#FF00FF), и Aqua (#00FFFF).

ПРИМЕЧАНИЕ. Будьте осторожны при использовании синего цвета, поскольку многие читатели из предыдущих дней Netscape предполагают, что синий цвет указывает ссылку, на которую они могут щелкнуть.

Текст супер / подстрочный текст

Для надстрочных символов: <sup> 1 </ sup>. Пример «надстрочного»:

См. Данте 2

Для подстрочных символов: <sub> 2 </ sub>. Пример «нижнего индекса»:

H 2 O

Предварительно отформатированный / интервал

Как вы знаете, HTML не распознает функции обработки текста, такие как множественные пробелы, вкладки и возврат каретки. Текст, содержащийся в теге <pre> ... </ pre>, сохраняет свой интервал. Таким образом, этот тег хорош для использования, когда у вас есть простые столбчатые столбцы или уникальный интервал. Недостатком использования этого тега для интервала является то, что он изменит шрифт на курьерский стиль.

Например, чтобы создать следующий эффект, вы помещаете соответствующие пробелы перед каждой строкой в ​​свой HTML-документ, но приложите все стихотворение в контейнере «pre»:

  У Мэри был маленький ягненок 
     Его шерсть была белой, как снег 
       И везде, куда Мария 
          Ягненок обязательно ушел. 

Текст моноширинной / пишущей машинки

Текст, содержащийся в тегах <tt> ... </ tt>, будет моноширинным. Например:

Введите этот текст.

Выравнивание текста

Для выравнивания текста:

<center> Школа сестринского дела в Индиане </center>

Например:

Школа медсестер Университета Индианы

Вы также можете выравнивать абзацы текста, например, я сделал с этим: <p align = "right">

Подчеркивание текста

Будьте осторожны при выборе использования подчеркнутого текста, поскольку некоторые читатели связывают его с гипертекстовыми ссылками. Однако, когда вы решите, что вы должны использовать подчеркивание, код HTML:

<U> важно! </U>

Например: Это важно!

Стили списка элементов

Вы можете изменить стиль номера элемента списка в нумерованном списке, а также стиль символа элемента списка в неупорядоченном списке. Вы также можете указать значение стартового номера упорядоченного списка. Стили числа, используемые с упорядоченным списком, - A (верхняя альфа), a (нижняя альфа), I (верхний римский), i (нижний римский) и 1 (арабские числа). Выбор, используемый с неупорядоченным списком, - это диск, круг и квадрат. Обратите внимание, что в примерах вы помещаете стиль или значение типа в тег <UL> или <OL>, а не в каждый элемент списка.

Типы «Число»:

<ol type ="A">
<li> Яблоки
<li> Груши
<Li> Киви
</ol >

Это приведет к:
  1. яблоки
  2. груши
  3. Киви
Типы «Число»:

<ol start = "13">
<li> Яблоки
<li> Груши
<Li> Киви
</ol>

Это приведет к:
  1. яблоки
  2. груши
  3. Киви
Типы пули:

<Ul type = "square">
<li> Бананы
<li> Апельсины
<Li> Грейпфрут
</UL>

Это приведет к:
  • бананы
  • апельсины
  • Грейпфрут

Блокировать котировки

Блокирует отступы с отступом как слева, так и справа и используются при цитировании длинных фрагментов информации. Например:

<Blockquote> <p> Четыре балла и семь лет назад наши отцы вывели на этот континент новую нацию, задуманную свободой и посвященную предложению о том, что все люди созданы равными. </ P>
<P> <em> из адреса Геттисбурга <br>
А. Линкольн </em> </p> </blockquote>

Это приведет к:

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

От Геттисбергского Адрес
А. Линкольн

Вернуться к началу

Якорный тег

Вы уже научились создавать ссылку с помощью тега привязки, например <A HREF="http://www.iupui.edu"> Главная страница IUPUI </A>. И вы знаете, что то, что появляется внутри метки привязки, является «доступным для кликов». Один тип графического изображения, обычно называемый «клик-образным» изображением, - это просто две графики, одна маленькая и одна большая, используемые в сочетании с тегом привязки. Когда вы нажимаете на меньшее изображение, оно «кажется, растет» на большее изображение.

Например, эта строка кода:

Для полноразмерного просмотра нажмите на изображение: <A HREF="alps.jpg"><IMG SRC = "alps_small.jpg" BORDER = "0" WIDTH = "181" HEIGHT = "121" ALT = "Фото Альп"></a>

Результат (если у вас есть два файла в вашем каталоге) в следующем:

Для полноразмерного просмотра нажмите на изображение:
Альпы

Обратите внимание, что код включает опцию «BORDER = 0». Вы можете использовать параметр границы в любом теге <IMG> для управления шириной (или наличием) границы. Особенно эффективно устанавливать границу равной нулю при создании изображения с кликом, чтобы граница не отвлекала ваше изображение (иначе ваше изображение с кликом будет иметь цветную рамку вокруг него).

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

<P> <A HREF="http://www.iupui.edu/"> <IMG SRC="http://www.iupui.edu/it/images/iupui3.gif" HEIGHT = "108" WIDTH = «73» ALT = «Логотип IUPUI»> Вернуться на главную страницу IUPUI </A></P>

Приведем изображение ниже. Обратите внимание на границу вокруг изображения; Если бы мы установили BORDER = "0", не было бы границы:

Логотип IUPUI Вернуться на главную страницу IUPUI

Чтобы использовать собственный рисунок под названием «back.gif», ваш HTML-код будет читать:

<P> <A HREF="../home.html"> <IMG SRC = "back.gif" HEIGHT = "20" WIDTH = "22" BORDER = "0" ALT = "Back Button"> Back </ A> </ P>

Отобразится:

Кнопка назад назад

ПРИМЕЧАНИЕ. Единственное, на что нужно обратить внимание, это согласованное расстояние между вашим изображением и следующим текстом; Часто сложно отделить структуру кодирования от фактического отображения в браузере. В предыдущем примере, например, изображение «back.gif» и слово «Назад» сливаются друг с другом.

Еще одним примером такой же структуры HTML является создание ссылки, которая позволит вашему читателю легко отправлять вам сообщение по электронной почте. ПРИМЕЧАНИЕ. Возможность отправлять электронную почту по ссылке такого типа зависит от того, как читатель установил настройки электронной почты браузера.

Эта привязанная гипертекстовая ссылка вызывает почту:

<P><A HREF="mailto:cholling@iupui.edu"> Отправьте мне E-mail! </A></P>

И приводит к:

Вышли мне электронное письмо!

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

<A HREF="jazz.mid"> Играть в джаз!</A>

Теперь вы можете попробовать !:

Играйте в джаз!

Вернуться к началу

Ismaps

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

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

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

<IMG SRC = "fortissimo.gif" USEMAP = "# map" ALT = "Map Image" BORDER = "0" WIDTH = "196" HEIGHT = "303">

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

<Map NAME = "map">
<Area shape = rect coords = "5, 5,64, 141" HREF = "http://www.iupui.edu/~webtrain/tutorials/beyond_rocks.html">
<Area shape = rect coords = "91, 5,127, 196" HREF = "http://www.iupui.edu/~webtrain/tutorials/beyond_waterfall.html">
<Area shape = rect coords = "125, 5,189, 169" HREF = "http://www.iupui.edu/~webtrain/tutorials/beyond_tree.html">
<Area shape = rect coords = "47, 248,131, 255" HREF = "http://www.iupui.edu/~webtrain/tutorials/beyond_rainbow.html">
<Area shape = rect coords = "6, 258,40, 293" HREF = "http://www.iupui.edu/~webtrain/tutorials/beyond_rocks.html">
<Area shape = rect coords = "13, 197,148, 224" HREF = "http://www.iupui.edu/~webtrain/tutorials/beyond_water.html">
<Area shape = rect coords = "88, 274,126, 297" HREF = "http://www.iupui.edu/~webtrain/tutorials/beyond_grass.html">
<Area shape = rect coords = "123, 265,192, 300" HREF = "http://www.iupui.edu/~webtrain/tutorials/beyond_grass.html">
<Area shape = rect coords = "151, 239,188, 249" HREF = "http://www.iupui.edu/~webtrain/tutorials/beyond_rocks.html">
</ Карта>

Исходные стороны на стороне сервера полагаются на конфигурацию веб-сервера для создания определения и направлений ismap. Дополнительную информацию о создании сетевой карты на стороне сервера см. В руководстве по ISMAP.

Вернуться к началу

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

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

<DL>
<DT><B> Фермер Браун </B>
<DD>Адрес: 123 Outpost Lane, Фармтаун, США 12345
<DT><EM> Свеча Сьюзи </EM>
<DD>Адрес: 897 Pickwick Street, Smalltown, США 98765
</DL>

Это приведет к:

Фермер Браун
Адрес: 123 Outpost Lane, Фармтаун, США 12345
Сьюзи Свеча
Адрес: 897 Pickwick Street, Smalltown, США 98765

Вернуться к началу

Специальные символы

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

Полный список кодов символов см. В таблице сущностей . Коды существуют как именованные объекты, так и десятичные сущности.

& Lt;
<
& GT;
>
& Амп;
&
& # 8482;
& Копировать;
©
& Frac14;
¼
& Frac12;
½
& # 150;
- (en dash)
& ACIRC; *
â
& AUML; *
ä
& Atilde; *
ã
& # 174;
®
& Aacute; *
á
& Quot;
"
-
- (em dash)
& # 133;
... (эллипсы)
* Замените букву «a» буквой для получения обводки
* Замените «a» буквой для получения умлаута
* Замените «a» буквой, чтобы получить тильду
* Заменить «а» буквой, чтобы получить острый

Вернуться к началу

Графические советы и подсказки

Вернуться к началу

Использование звука

Вернуться к началу

Создание таблиц

Таблицы могут использоваться для самых разных вещей. Будьте изобретательны в использовании таблиц на домашних страницах: календари, диаграммы, списки с вкладками и «панели кнопок». Таблицы должны содержать эти три основных тега:

<TABLE> ... </TABLE>
<TR> ... </TR>
<TD> ... </TD>

Эти основные теги (таблица <TABLE>, строка таблицы <TR> и ячейка таблицы <TD>) могут быть дополнены параметрами. Параметры для использования с тегом <TABLE> включают следующее: «x» - это числовая переменная (чем больше число, тем больше расстояние):

Чтобы разместить над столом таблицу с центрированным столом:

<CAPTION> Текст здесь </CAPTION>

Или поочередно, размещены в центре ниже таблицы:

<CAPTION ALIGN = "bottom"> Текст здесь </CAPTION>

Параметры для использования с тегами ячейки таблицы и заголовка (<TD> и <TH>) определяют, сколько строк или столбцов должна занимать данная ячейка. Внутри самой ячейки содержимое может быть отформатировано с использованием стандартных тегов HTML, таких как <EM>, <B> или <BR>.

Пример кода таблицы может выглядеть так:

<CENTER>
<TABLE BORDER = "1" CELLPADDING = "5" CELLSPACING = "2">
<CAPTION><EM> Вещи, оставшиеся на Луне </EM></CAPTION>
<TR>
<TH COLSPAN = "2"> Общая информация </TH>
</ TR>
<TR>
<TD> Moon Rover </TD>
<TD> Флаг США </TD>
</TR>
<TR>
<TD> Footprint </ TD>
<TD> Сны </TD>
</TR>
<TR>
<TD> Страхи </ TD>
<TD> & NBSP; </TD>
</TR>
</Table>
</CENTER>

Пример кода выше привел бы к следующей таблице:

Вещи, оставленные на Луне
пустяки
Луноход Флаг США
след Мечты
Боится

См. Примеры дополнительных таблиц

Вернуться к началу

Открытие второго окна браузера

Часто вы можете «заставить» открыть второе окно браузера, чтобы ваш читатель не потерял свое место в исходном документе. Это может быть достигнуто путем вставки цели в ваш якорь. Например, если вы просматриваете мою страницу (http://www.iupui.edu/~webtrain) и хотите создать ссылку, чтобы ваш читатель был отправлен на домашнюю страницу IUPUI Office for Professional Development в течение секунды Окно, ваш якорный код будет выглядеть так:

<A HREF="http://www.profdev.iupui.edu" TARGET="Resource Window"> Офис для профессионального развития </A>

Вернуться к началу

Горизонтальные правила

Горизонтальные правила полезны для отображения разрывов раздела. Однако следует соблюдать осторожность при работе с горизонтальными правилами, поскольку, по сути, они говорят читателю: «Прекратите читать здесь!» И остальная часть вашей страницы может не отображаться.

Самый простой способ использования горизонтального правила - без каких-либо атрибутов: <HR>. Это создает простую строку правила по ширине окна вашего браузера. Атрибуты, которые могут использоваться с тегом горизонтального правила, включают в себя: align, noshade, size и width.

Например,

<HR NOSHADE>

Создает твердое правило, а не традиционную двухцветную «канавку»:


Typing:

<HR SIZE = "10">

Создает правило шириной 10 пикселей (высокий):


Вернуться к началу

Относительная и абсолютная адресация

Вы можете услышать термины «относительная» или «абсолютная» адресация. Вот два примера адресов, каждый из которых ссылается на один и тот же файл изображения:

<IMG SRC = http://server.iupui.edu/staff0/jsmith/graphics/bl_ball.gif">
<IMG SRC ="./graphics/bl_ball.gif">

Первый пример - абсолютный адрес; Он идентифицирует полный путь на сервере для доступа к файлу: bl_ball.gif. Этот тип адресации, как правило, не самый лучший, поскольку он делает предположение, что файл «bl_ball.gif» всегда будет находиться в том же каталоге в том же месте на машине с именем server.iupui.edu, с теми же именами в каталоге , Изображение и сервер, не говоря уже о пути к тому, чтобы попасть в это конкретное место.

Второй пример вызывает одно и то же изображение «bl_ball.gif», но его местоположение относится к файлу, относящемуся к нему. В этом примере домашний файл находится в личном домашнем каталоге (~ jsmith); Файл .gif находится в поддиректории графики. Относительный путь говорит браузеру, что он должен начинаться в текущем каталоге ( . ), Затем перейдите в поддиректорию графики, где он найдет файл «bl_ball.gif». Если по какой-то причине пользовательский идентификатор изменится на jdoe, он все равно начнет поиск «bl_ball.gif» в каталоге, вызывающем файл, и найдет его, если останется в подкаталоге с именем graphics.

Вернуться к началу

Метаданные

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

В документах HTML метаданные обычно встречаются в тегах <HEAD> ... </ HEAD>. Примерами являются:

Автор и адрес электронной почты автора
<META NAME = "Автор" CONTENT = "Cynthia D. Hollingsworth, cholling@iupui.edu">
Информация для поисковых систем, которые рассматривают описательные данные
<META NAME = "описание" CONTENT = "Комплексный ресурс для веб-дизайна и разработки">
Ключевые слова контента для поисковых систем
<META NAME = "ключевые слова" CONTENT = "HTML, web, дизайн, разработка, изображения, цвет">
Перенаправить веб-страницу на другой URL (где «x» равно количеству времени за секунды до перенаправления)
<META HTTP-EQUIV = "обновить" CONTENT = "5; URL = http: //www.iupui.edu/~profdev">
ПРИМЕЧАНИЕ. За закрытыми кавычками нет времени обновления или в начале перенаправленного URL; Время и URL - одна фраза.

Вернуться к началу

Веб-счетчики в IUPUI

Факультет IUPUI, персонал и студенты могут разместить счетчик на вашей домашней странице. Для получения дополнительной информации см . Страницу веб-мастера IU для создания счетчиков.

Вернуться к началу

Разное

Фрукты
Киви яблоки
груши бананы
апельсины
link to sample page link to sample page link to sample page link to sample page link to sample page link to sample page link to sample page link to sample page link to sample page

Главная Вернуться домой

Alid HTML 4.01 Переходный Действительный CSS