 |
|
|
Архитектура Астрономия Аудит Биология Ботаника Бухгалтерский учёт Войное дело Генетика География Геология Дизайн Искусство История Кино Кулинария Культура Литература Математика Медицина Металлургия Мифология Музыка Психология Религия Спорт Строительство Техника Транспорт Туризм Усадьба Физика Фотография Химия Экология Электричество Электроника Энергетика |
Изображения в HTML-документе.
Как интересный журнал или проспект теряет в своей привлекательности без цветных иллюстраций, так любой HTML-документ кажется сухим и невзрачным без использования графики. Значение графических изображений в аспекте создания электронных документов нельзя переоценить: реклама и коммерческие предложения компаний и юридических лиц становятся более выразительными и яркими, иллюстрации и схемы способны превратить скучный перечень услуг или расценок в интересный информативный материал, любой художественный рассказ или произведение будет восприниматься легче и естественнее при наличии картинок или фотографий. Встроить изображение в HTML-документ очень просто. Для этого нужно только иметь это самое изображение в формате GIF (файл с расширением *.gif ) или JPEG (файл с расширением *.jpg или *.jpeg ) и одну строчку в HTML-тексте. Допустим, нам нужно включить в документ изображение, записанное в файл picture.gif находящийся в одном каталоге с HTML-документом. Тогда строчка будет вот такая: <IMG SRC="имя файла"> Здесь слово IMG (Image) означает изображение, а параметр SRC (Source)-источник. <IMG SRC="picture.gif"> В качестве источника необходимо указать имя файла с изображением. Разумеется, если файл находится в другой, нежели страница, директории, то надо указать его местоположение. Изображение будет размещено в том месте на странице, где находится ярлык.Метка <IMG SRC="[имя файла]"> может также включать атрибут ALT="[текст]",например: <img src="C:\Documents and Settings\All Users\Документы\Мои рисунки\Образцы рисунков\Закат.jpg" ALT="Картинка">Встретив такую метку, браузер покажет на экране текст Картинка и начнет загружать на его место картинку из файла picture.gif. Атрибут ALT может оказаться необходимым для старых браузеров, которые не поддерживают изображений, а также на случай, если у браузера отключена автоматическая загрузка изображений (при медленном подключении к Интернет это делается для экономии времени). Файл, содержащий изображение, может находиться в другом каталоге или даже на другом сервере. В этом случае стоит указать его полное имя. Параметры HSPACE и VSPACE-определяет размер горизонтального и вертикального отступов от встраиваемого изображения до текста. Формат записи значений-в пикселях. По умолчанию, значения обоих типов отступа равно нулю. Параметры тэга <IMG> может включать следующие атрибуты:
Пример 3. <html> <title> Пример </title> <body bgcolor="Red"><h1><font color="green"> Электронные услуги в здравоохранении. </h1> <font color="red"> <img src="C:\Documents and Settings\All Users\Документы\Мои рисунки\Образцы рисунков\Закат.jpg" align="left" border="1" width=50% ><нspace="20" vspace="20"><b>Базовые услуги Электронного правительства в соответствие с основными сферами жизнедеятельности граждан. Социальная защита и занятость населения. Образование, наука и здравоохранение.</b></br></BODY></html>
Теперь о фоновой картинке. Фоном может быть как большой графический файл (учтите - в этом случае страничка будет грузиться дольше) так и его фрагмент, что более разумно. При использовании последнего он будет автоматически размножен Вашим Обозревателем, поэтому подбирайте фрагмент хорошо стыкующимся. Вставить в страницу фоновую картинку можно так: <BODY BACKGROUND="images.gif"> Параметру BACKGROUND присвоено значение images.gif - это имя графического файла с расширением (поддерживаются *.jpg, *.gif, *.png). Естественно оно может быть другим. Предпологается, что графический файл расположен в одной папке с Вашим документом, иначе нужно указать к нему путь. Разберемся с путями на примере файла images.gif. Пример 4. <html> <title>Пример </title> <body BACKGROUND="C:\Documents and Settings\003\Рабочий стол\13.JPG"><h1><font color="green"> Электронные услуги в здравоохранении.</h1></font> <font color="red"> <img src="C:\Documents and Settings\003\Рабочий стол\123.jpg" align="left" border="1" width=50% ><Hspace="20" vspace="20"><b> Базовые услуги Электронного правительства в соответствие с основными сферами жизнедеятельности граждан. Социальная защита и занятость населения. Образование, наука и здравоохранение.</b></br></BODY></html>
Таблицы. Одним из наиболее мощных и гибких средств представления информационных данных в HTML по праву являются таблицы. В HTML таблицы являются не только удобным средством структурирования информации. Сегодня таблица становиться основой большинство электронных документов, структура которых может включать самые разнообразные элементы HTML. Таблица начинается с метки <TABLE> и заканчивается меткой </TABLE>. Любая таблица состоит из ряда (тэг-контейнер <TR>…</TR>, Table Row), содержащего определенное количество ячеек (тэг-контейнер <TD>…<TD>, Table Data). Тэг <TD> предназначен для указания данных в таблице, а для размещения заголовков в ячейке используется тэг <TH>…</TH> (Table Header). Метка <TABLE> может включать несколько атрибутов:
Таблица может иметь заголовок (<CAPTION> ... </CAPTION>), хотя заголовок не является обязательным. Метка <CAPTION> может включать атрибут ALIGN. Допустимые значения: <CAPTION ALIGN=TOP> (заголовок помещается над таблицей) и <CAPTION ALIGN=BOTTOM> (заголовок помещается под таблицей). Каждая строка таблицы начинается с метки <TR> и заканчивается меткой </TR>. Метка <TR> может включать следующие атрибуты:
Каждая ячейка таблицы начинается с метки <TD> и заканчивается меткой </TD>. Метка <TD> может включать следующие атрибуты:
Пример 5. <HTML> <HEAD> <TITLE>Пример </TITLE> </HEAD> <body bgcolor="#FFFFFF" Text="black" Link="#00FF00" Alink="#00FF00" Vlink="blue" Lftmargin="40" Rightmargin="40" Marginwidth="40"> <table align="center" border="3" cellspacing="0" cellpadding="5" width="80%" Height="150"> <tr Align="center" bgcolor="#CECECE"> <th Colspan="2"> <i><b><h1> Медицинский Университет Астана </h1></i></b></th> </tr> <tr> <td align="center" rowspan="5"><i><b><h1>Факультеты </h1></i></b></td> <td align="center">лечебный</td> </tr> <tr> <td align="center">педиатрический </td> </tr> <tr> <td align="center"> медико-профилактическое дело</td> </tr> <tr> <td align="center">стоматологический</td> </tr> <tr> <td align="center">фармацевтический</td> </tr> </table></ body></html
Пример 3. <HTML> <HEAD> <TITLE>Пример </TITLE> </HEAD> <body bgcolor="gold" Text="black" Link="#00FF00" Alink="#00FF00" Vlink="blue" Lftmargin="40" Rightmargin="40" Marginwidth="40"> <table align="center" border="3" cellspacing="0" cellpadding="5" width="80%" Height="150"> <tr Align="center" bgcolor="#CECECE"> <th Colspan="2"> <i><b><h1> Медицинский Университет Астана </h1></i></b> <br>Факультеты</h1></th></tr> <tr><td align="center" rowspan="5"><i><b><h1> <img src="C:\Users\Admin\Desktop\78\ Доктор.bmp"> </h1></i></b></td> <td align="center">Общая медицина</td></tr> <tr><td align="center">Общественное здравоохранение</td></tr> <tr><td align="center"> Фармация</td></tr> <tr><td align="center">Cтоматология</td></tr> <tr><td align="center">Медико-профилактическое дело</td></tr> </table></body></HTML>
Поиск по сайту: |
