Хід роботи. Тема: Работа с изображениями в html - документах

Тема: Работа с изображениями в html - документах

Мета:

Хід роботи

Для добавления изображения в html документ необходимо использовать тег <IMG>. Обязательно используется атрибут SRC, значением которого является путь к изображению и название изображения с его расширением. Для установки выравнивания изображения на странице, используется атрибут ALIGN со значениями left, Right, top, bottom, middle. Также можно установить ширину и высоту изображения атрибутами WIDTH и HEIGHT соответственно. Для установки отступа от текста используют атрибуты: VSPACE (по вертикали) и HSPACE (по горизонтали). Рамку установить можно с помощью атрибута BORDER. Атрибут ALT используется для комментариев, которые будут видны при отсутствии изображения по какой либо причине.

Пример использования изображений в документах html:

…

<Font color="##336699" ><div align="right"> <i><PRE>

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

</div></i></font></PRE>

<IMG src="images\1.jpg" width="220" height="230" hspace="20" vspace="20" align= "right" alt="Винчестер">

<Font color="##336699" fase="Arial"><p align="justify" >

НЖМД почти так же сложны как и микропроцессоры в рамках технологий, которых они используют, и в том, какой прогресс в понимании емкости, скорости и цены был произведен за последние двадцать лет. Одни из первых винчестеров для персональных компьютеров имели объем порядка <I>5-10</I> мегабайт и цену порядка<I> 100$ </I>за мегабайт.

Современные винчестеры имеют объемы, превышающие сотни гигабайт и цену, меньшую <I>1 </I>цента за мегабайт! Это показывает улучшение более чем на <I>1000000% </I>за последние <I>20 лет</I>.</p></font>

<Font color="##336699" fase="Arial"><div align="justify" >

Винчестер играет важную роль в следующих важных аспектах вашего компьютера: <ul> <li><B><U>Скорость: </B></U>Винчестер играет важную роль в общей производительности системы, намного большую, чем многие люди полагают. Скорость, с которой загружается компьютер и стартуют программы напрямую зависит от скорости винчестера. Также скорость винчестера критична для многозадачных ОС, для обработки больших размеров данных, таких, как работа с графикой, обработки видео и звука, работа с базами данных и т.д. </li><li><B><U>Размер: </B></U>Это звучит тривиально, но диск большего объема позволит хранить больше программ и данных </li> <li><B><U>Надежность: </B></U>Один из путей понимания ценности устройства это оценка ущерба в случае поломки. В таком

понимании, винчестер играет самую ценную роль в компьютере: в случае выхода его из строя, сам винчестер можно заменить по гарантии, а вот ваши данные - нет.</li></ul></div></font><p>

<Font size="5" color="##336699"><div align="justify" >Короткая история винчестеров</div></font>

<IMG src="images\2.jpg" width="350" height="300" hspace="20" vspace="20" align= "left" alt="История винчестеров">

<Font color="##336699" fase="Arial"><div align="justify" ><BR>

<B><I>Винчестеры</B></I> - это одни из самых важных, а также, самых интересных компонентов в компьютере. Они имеют долгую и интересную историю, берущую начало в начале 50-х годов прошлого столетия. Возможно, самое обворожительное, что можно увидеть в истории винчестеров, это то, как в последние два десятилетия инженеры улучшали НЖМД в сторону удобности использования, емкости, скорости, потребления энергии и т.д.<BR>

Этот превосходный график показывает эволюцию винчестеров IBM за последние <EM>15 </EM>лет. На графике предоставлены винчестеры разных форм-факторов, показано развитие в терминах емкости и предположение о будущем. <EM>250 Гб</EM> в ноутбуке в течении <EM>5 лет</EM>? Основываясь на предыдущей истории, есть неплохой шанс, что именно так и будет. <BR>

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

</div></font><BR></p>

…

 

…

устройство в материнской плате или в любом другом электронном компоненте компьютера, да и вообще в бытовой технике, — очень сложно. Для выявления таких шпионских "штучек" применяются различные методы, один из которых — "жёсткий" рентген.<BR>

<DIV align="center" >

<IMG src="images\5.jpg" hspace="20" vspace="20" alt="Рентген винчестера 1"> <BR><IMG src="images\6.jpg" hspace="20" vspace="20" alt="Рентген винчестера 2">

</DIV>

На рисунках представлены рентгеновские снимки гермоблока и платы управления жёсткого диска <I>Samsung SP1604N </I>(<S>эти рентген снимки получены в спецлаборатории ЗАО "Кордон", 2006 год</S>). В оригинале такой снимок имеет очень большое разрешение, что позволяет увидеть даже микро-вкрапления. С помощью такого снимка можно выявить

…

 

Вывод: на данной работе я научился добавлять изображения в документы html, с использованием тега <IMG> и его атрибутов ALIGN – выравнивание изображения на странице, WIDTH и HEIGHT - задание размеров изображения, VSPACE и HSPACE – отступ от текста, ALT – комментарий к изображению. Рассмотрел различные варианты размещения изображения на странице относительно к тексту.