среда, 2 мая 2012 г.

Рисунки на WEB-страничке



<IMG> — элемент для создания ссылки на графический файл (image). Он не содержит конечного тега — вся необходимая информация задается при помощи атрибутов. Этот элемент является универсальным: с его помощью можно использовать изображения в гиперссылках, вставлять картинки в таблицы, просто размещать рисунки на Web-странице, решать задачи дизайна и т.д.
Необходимым атрибутом является src — указатель на файл графики:
src="Ссылка на файл". Например: <IMG src="cat5-web.jpg> — обычный рисунок, <IMG src="1c5.gif"> — анимированный рисунок.




Очень полезным и обязательным атрибутом является атрибут alt. Он позволяет выводить текст в тех местах, где должны располагаться рисунки. Страница может загружаться достаточно долго, и пока графические файлы на подходе, пользователь должен видеть, какие изображения он сможет получить.
Например: <IMG src="cat5-web.jpg alt="Фотография маленького котенка" >. <IMG src="1c5.gif" alt="Большая черная кошка, которая гуляет сама по себе">




Высоту и ширину области, в которой демонстрируется рисунок, задают при помощь атрибутов height — высота и width — ширина.
Например: <IMG src="bos2.gif" width="76" height="121">
<img src="bos2.gif" width="176">. Обратите внимание, что во втором случае изменен размер рисунка (мы изменили ширину, высота будет изменена автоматически). При этом происходит потеря качества изображения, поэтому желательно задавать эти атрибуты в соответствии с реальными размерами рисунка.




Атрибут border задает рамку вокруг объекта, например, border="2'— ширина рамки задается в пикселях и в нашем примере равна 2.
Например: <IMG src="1c5.gif" border="2" alt="Большая черная кошка, которая гуляет сама по себе">.




Полностью тег IMG должен выглядеть следующим образом:
<IMG src="bos2.gif" width="76" height="121" alt="Портрет маленьгого джентельмена">
Если вы хотите использовать рисунок в качестве обоев странички, то в теге <BODY> используем атрибут background с указанием адреса рисунка обоев.
Например: <BODY background="wood.jpg">


Управление цветом в HTML



Стандартные цвета


Аквамарин
aqua
#00FFFF
Белый
white
#FFFFFF
Желтый
yellow
#FFFF00
Зеленый
green
#008000
Золотистый
gold
#FFD700
Индиго
indigo
#4B0080
Каштановый
maroon
#800000
Красный
red
#FF0000
Оливковый
oliv
#808000
Пурпурный
purple
#800080
Светло-зеленый
lime
#00FF00
Серебристый
silver
#C0C0C0
Серый
gray
#808080
Сизый
teal
#008080
Синий
blue
#0000FF
Ультрамарин
navy
#000080
Фиолетовый
violet
#EE80EE
Фуксиновый
fuchsia
#FF00FF
Черный
black
#000000


Градации красного


КодЦветКодЦвет
#010000#800000
#100000#900000
#200000#A00000
#300000#B00000
#400000#C00000
#500000#D00000
#600000#E00000
#700000#FF0000

Градации зеленого


КодЦветКодЦвет
#000100#008000
#001000#009000
#002000#00A000
#003000#00B000
#004000#00C000
#005000#00D000
#006000#00E000
#007000#00FF00


Градации синего


КодЦветКодЦвет
#000001#000080
#000010#000090
#000020#0000A0
#000030#0000B0
#000040#0000C0
#000050#0000D0
#000060#0000E0
#000070#0000FF


Градации оранжевого


КодЦвет
#FFB0001
#FFA8002
#FFA0003
#FF98004
#FF90005
#FF88006
#FF80007
#FF78008
#FF70009
#FF680010
#FF600011
#FF580012


Использование цвета при офoрмлении страницы

Цвет шрифта можно задать с помощью атрибута color в теге <FONT>, например:
<FONT color="FF5800"> Это цветной текст 1 </font>   
<FONT color="blue"> Это цветной текст 2 </font>




Чтобы задать цвет фона страницы используется атрибут color внутри тега <BODY>, например:
<BODY color=" red">

среда, 25 апреля 2012 г.

История HTML

Язык HTML был разработан Тимом Бернерс-Ли во время его работы в CERN и распространен браузером Mosaic, разработанным в NCSA. В 1990-х годах он добился особенных успехов благодаря быстрому росту Web. В это время HTML был расширен и дополнен. В Web очень важно использование одних и тех же соглашений HTML авторами Web-страниц и производителями. Это явилось причиной совместной работы над спецификациями языка HTML. HTML 2.0 был разработан под эгидой Internet Engineering Task Force (IETF) для упорядочения общепринятых положений в конце 1994 года. HTML+ (1993) и HTML 3.0 (1995) - это более богатые версии языка HTML. Несмотря на то, что в обычных дискуссиях согласие никогда не было достигнуто, эти черновики привели к принятию ряда новых свойств. Усилия Рабочей группы World Wide Web Consortium по HTML в упорядочении общепринятых положений в 1996 привели к версии HTML 3.2 (январь 1997). Большинство людей признают, что документы HTML должны работать в различных браузерах и на разных платформах. Достижение совместимости снижает расходы авторов, поскольку они могут разрабатывать только одну версию документа. В противном случае возникает еще больший риск, что Web будет представлять собой смесь личных несовместимых форматов, что в конечном счете приведет к снижению коммерческого потенциала Web для всех участников. В каждой версии HTML предпринималась попытка отразить все большее число соглашений между работниками и пользователями этой индустрии, чтобы усилия авторов не были потрачены впустую, а их документы не стали бы нечитаемыми в короткий срок. Язык HTML разрабатывался с той точки зрения, что все типы устройств должны иметь возможность использовать информацию в Web: персональные компьютеры с графическими дисплеями с различным разрешением и числом цветов, сотовые телефоны, переносные устройства, устройства для вывода и ввода речи, компьютеры с высокой и низкой частотой и т.д.

Возможности и применение HTML

В HTML 4.0 вводятся механизмы таблиц стилей, скриптов, кадров, внедрения объектов, улучшенная поддержка разных направлений письма и направления справа налево, таблицы с большим количеством возможностей и новые свойства форм, обеспечивая лучшие возможности доступа для людей с физическими недостатками. Эта версия HTML разработана с помощью экспертов в области интернационализации, так что документы можно писать на любом языке и легко передавать их по всему миру. Это достигается за счет использования , относящегося к интернационализации HTML. Важным шагом стало принятие стандарта ISO/IEC:10646 в качестве набора символов для документов HTML. Это наиболее содержательный стандарт в мире, в котором решены вопросы представления национальных символов, направления письма, пунктуации и других языковых вопросов. HTML теперь предоставляет лучшую поддержку различных языков в одном документе. Это обеспечивает более эффективное индексирование документов для поисковых машин, типографию высшего качества, преобразование текста в речь, более удобные переносы и т.д. Поскольку сообщество Web растет, и возможности и умения его членов различаются, очень важно, чтобы основные технологии соответствовали потребностям. Язык HTML разработан так, чтобы сделать Web-страницы более доступными для пользователей с физическими недостатками. В HTML 4.0 имеются следующие дополнения, продиктованные соображениями доступности: • усилено разделение структуры и представления документа, что побуждает использовать таблицы стилей вместо элементов и атрибутов представления языка HTML. • улучшены формы, включена возможность назначения клавиш доступа, возможность семантической группировки управляющих элементов формы, семантической группировки вариантов в тэге SELECT и активные метки. • добавлена возможность разметки текстового описания включенного объекта (с помощью элемента OBJECT). • введен новый механизм действия изображений-карт на стороне клиента (элемент MAP), который позволяет авторам интегрировать изображения и текстовые ссылки. • альтернативный текст для изображений, включаемых с помощью элемента IMG, обязателен. • добавлена поддержка атрибутов title и lang во всех элементах. • добавлена поддержка элементов ABBR и ACRONYM. • более широкий диапазон целевых устройств (телетайп, шрифт Бройля и т.д.) для использования в таблицах стилей. • улучшены таблицы, включена поддержка заголовков, групп столбцов и механизмов для упрощения невизуального представления документа. • добавлены длинные описания таблиц, изображений, кадров и т.д. Авторы, разрабатывающие страницы с учетом доступности, получат не только эту возможность, но также и некоторые другие: хорошо разработанные документы HTML с разделенными структурой и представлением будут легче адаптироваться к новым технологиям.

Начало работы


Для начала Вам нужно выбрать редактор. Cyщecтвyeт двa типa peдaктopoв: WYSIWYG (What-You- See-Is What-You-Get Что-ты-видишь-то-и-получаешь) и peдaктopы, paбoтaющиe нaпpямyю c HTML-кoдoм. Ecли Вы нe имeeтe ни мaлeйшeгo пpeдcтaвлeния o HTML, тo для начала вaм пoдoйдyт peдaктopы пepвoй гpyппы, нaпpимep: Front Page, Word В это случае я вам помочь ни чем не могу, читайте HLP-файлы этих программ. Ecли хотите научиться paбoтaть c HTML-кoдoм нaпpямyю, а речь в данном учебнике пойдет как раз об этом, воспользуйтесь - HTMLPad2000, Notepad, Bred2. Bred2 в отличии от стандартного Notepad`а обладает множеством разных настроек - ToolBar, StatusBar, MultiUndo, есть подсветка HTML тегов, автозамена, автоматическая регистрация расширений (*.txt, *.ini, ...), а лимит текста - не менее 1Mb. И это далеко не все его возможности. Вашему вниманию предлогаеться русская версия. Теперь расскажу немного о тегах - знаках, распологающихся в скобках. Большинство тегов имеют открывающийся элемент <> и закрывающийся . Между ними и находяться коды, которые распознает Обозреватель. HTML-документ всегда начинаться отрывающимся тегом и заканчиваться закрывающим . Дальше идет заголовок . Между этими тегами всегда должна находиться информация о кодировки страницы, в нашем случае , и теги опредиляющие название страницы . Только теперь между тегами содержимого документа можно распологать свою информацию, рисунки, видеофайлы, аудиофайлы... Размеры графического файла (в пикселях) по горизонтали и по вертикали, а также выпадающую подсказку можно не указывать, но тогда страничка грузиться дольше, не забывайте об этом. И еще - большие картинки Обозреватель может игнорировать, если Вы не укажите их размеры.


Cкачать эти программы:
Интерфейс BRED2
Интерфейс Notepad