Работа с рисунками
Для того, чтобы вставить картинку в HTML-страницу, нужно вначале эту картинку подготовить в нужном формате: JPEG (JPG), GIF, PNG.
Чтобы поместить картинку на страницу, нужно прописать код: <img src="images/visitka.jpg">
Далее будут рассмотрены примеры с рисунками в HTML- документах.
Пример 1. pic1.htm. Вид электронного учебника показан на рисунке 1.14
<html>
<head>
<title>
Вставляем рисунки - файл рисунок4.htm
</title>
</head>
<body bgcolor="white">
<img src="рисунок4.jpg">
<p>
Это простейший html-файл с рисунком.
</P>
</body>
</html>
Рисунок 1.14 - pic1.htm
Пример 2. Текст, выводимый вместо изображения. Вид электронного учебника показан на рисунке 1.15
<html>
<head>
<title>
Текст, выводимый вместо изображения </title>
</head>
<body bgcolor="white">
<img src="рисунок4.jpeg" Alt="Текст, выводимый вместо изображения">
<p>
Это простейший html-файл с рисунком.
</P>
</body>
</html>
Рисунок 1.15 - Текст, выводимый вместо изображения.html
Пример 3. Задаем размеры рисунка. Вид электронного учебника показан на рисунке 1.16
<html> <head> <title>
Задаем размеры рисунка - файл size1.html </title>
</head>
<body bgcolor="white">
<h1>
Задаем размеры для рисунков.</h1>
<img src="рисунок4.jpg" vspace="5" hspace="15" width="200" height="150">
<img src="рисунок4.jpg" vspace="5" hspace="15">
<img src="рисунок4.jpg" vspace="5" hspace="15" width="80" height="300">
</body> </html>
Рисунок 1.16 - Задаем размеры рисунка.html
Пример 4. Задаем размеры рисунка. Вид электронного учебника показан на рисунке 1.17
<html> <head>
<title> Форматируем с помощью таблицы - файл table1.htm </title>
</head>
<body bgcolor="white">
<table border="2" width="100%">
<tr>
<td width="10%"><img src="рисунок4.jpg" width="200" height="248" cspace="5" hspace="15" alt="pic1.jpg (13212 bytes)"></td>
<td width="65%"><p align="center"><strong>Фотография</strong></p>
<p align="center"><font color="#808000"><font size="8"><b><tt>
Криштиану Роналду</tt></b></font>. </font></p>
<p>Все подробности на официальном сайте</td>
</tr>
<tr>
<td width="100%" colspan="2"><font size="2">С помощью таблиц можно разместить элементы страницы в окне брaузера самым произвольным образом.</font></td>
</tr></table></body></html>
Рисунок 1.17 - table1.html
Создание документа с фреймами
Далее будут рассмотрены примеры с таблицами в HTML- документах.
Пример 1. doc1. Вид электронного документа показан на рисунке 1.18
<html>
<head>
<title>Периферийные устройства</title>
</head>
<frameset cols=30%,70%>
<frame src="doc2.html">
<frame src="doc3.html" name="main">
<frameset>
</html>
Рисунок 1.18 – doc1.html
Пример 2. doc2. Вид электронного документа показан на рисунке 1.19
<html> <head>
<title>Периферийные устройства</title>
</head> <body>
<ul>
<li> Устройства ввода информации
<ol> <li> <a href="doc4.html" target="main" > Клавиатура </a>
<li> <a href="doc5.html" target="main" > Мышь </a>
<li> <a href="doc6.html" target="main" > Сканер </a> </ol>
<li>Устройства вывода иформации
<ol> <li> <a href="doc7.html" target="main">Монитор</a>
<li> <a href="doc8.html" target="main">Принтер</a> </ol>
</ul> </body> </html>
Рисунок 1.19 – doc2.html
Пример 3. doc3. Вид электронного документа показан на рисунке 1.20
<html> <head>
<title>Периферийные устройства</title>
</head>
<body>
<p>В персональных компьютерах устройства ввода и вывода информации играют особую роль. Именно они обеспечивают взаимодействие пользователя с ПК. От их состава и настройки во многом зависит возможность работы пользователя на ПК.</p>
</body> </html>
Рисунок 1.20 – doc3.html