Разработка Web-сайтов. Тема - тэги HTML для форматирования графических
изображений, вставки таблицы.
Задание № 4: Добавьте в документ proba.htm атрибуты тэгов, с помощью которых
можно отформатировать графическое изображение; в файле автобиография.htm сделайте картинку фоном документа, вставьте в него таблицу.
1. Скопируйте в свою папку Создание Web-сайта вторую картинку или фотографию, имеющую имя файла *. jpg (например, море. jpg ) или другие файлы форматов. bmp,.gif.
2. Откройте документ автобиография. htm из своей папки и с помощью текстового редактора Блокнот. Допечатайте в тэге <BODY> атрибуты для того, чтобы сделать понравившуюся картинку фоном документа:
<HTML>
<HEAD>
<TITLE>Автобиография</TITLE>
</HEAD>
<BODY TEXT=”#0000FF” BGCOLOR=”#00FFFF” BACKGROUND=”море.jpg” >
<CENTER>
<H2> <FONT COLOR="#FF00FF"> Моя автобиография. </FONT> </H2>
</CENTER>
<P ALIGN="JUSTIFY">
Я родилась (родился) в г. Светлом в 1989 году 1 апреля. Мою маму зовут Ольга, а папу Сергей. Ещё у меня есть братишка Вовка:))) и …
</P>
<A HREF=”PROBA.HTM”>Продолжим знакомство:)))</A>
3. Допечатайте тэги для вставки таблицы, состоящей из двух строк и трех столбцов, задайте цвет строкам, впечатайте цифровую информацию в ячейки:
<TABLE>
<TR BGCOLOR="#FFCC33"> <TD>1x1</TD> <TD>1x2</TD> <TD>1x3</TD> </TR>
<TR BGCOLOR="#00CC00"> <TD>2x1</TD> <TD>2x2</TD> <TD>2x3</TD> </TR>
</TABLE>
</BODY>
</HTML>
4. С помощью гиперссылки «Продолжим знакомство» откройте Web-страницу Первое знакомство с тэгами HTML. Сверните это окно на Панель задач.
5.. В текстовом редакторе Блокнот командой Файл – Открыть выведите на экран свой документ proba.htm; после внесения каждого вида изменений в документе выполняйте команду Файл – Сохранить.
6.. Допечатайте тэг <IMG SRC="МОЯ ФОТОГРАФИЯ.JPG"> атрибутом для выравнивания картинки по левому краю экрана и обтекания её текстом справа:
<HTML>
<HEAD>
<TITLE>Первое знакомство с тэгами HTML</TITLE>
</HEAD>
<BODY TEXT=”#0000FF” BGCOLOR=”#808080”>
<CENTER>
<H1>Моя личная страница.</H1>
<H2> <FONT COLOR="#FF0000"> Давайте познакомимся. </FONT></H2>
<IMG SRC="МОЯ ФОТОГРАФИЯ.JPG" ALIGN="LEFT" >
7. Допечатайте атрибут для задания ширины картинки:
<IMG SRC="МОЯ ФОТОГРАФИЯ.JPG" ALIGN="LEFT" WIDTH="400" >
8. Допечатайте атрибут для задания высоты картинки:
<IMG SRC="МОЯ ФОТОГРАФИЯ.JPG" ALIGN="LEFT" WIDTH="400" HEIGHT="400" >
9. Допечатайте атрибут для задания расстояния между текстом и рисунком (по горизонтали), в пикселях:
<IMG SRC="МОЯ ФОТОГРАФИЯ.JPG" ALIGN="LEFT" WIDTH="400" HEIGHT="400" HSPACE="30" >
10. Допечатайте атрибут для задания расстояния между текстом и рисунком (по вертикали): <IMG SRC="МОЯ ФОТОГРАФИЯ.JPG" ALIGN="LEFT" WIDTH="400" HEIGHT="400"HSPACE="30" VSPACE="20" >
11. Допечатайте атрибут для создания рамки вокруг картинки: <IMG SRC="МОЯ ФОТОГРАФИЯ.JPG" ALIGN="LEFT" WIDTH="400" HEIGHT="400"HSPACE="30" VSPACE="20" BORDER="2" >
12. Допечатайте атрибут для создания всплывающей подсказки к картинке: <IMG SRC="МОЯ ФОТОГРАФИЯ.JPG" ALIGN="LEFT" WIDTH="400" HEIGHT="400"HSPACE="30" VSPACE="20" BORDER="2" ALT="Моя фотография" >
<H3>Немного о себе:</H3>
</CENTER>
<HR SIZE="5" COLOR="#FFD800">
<OL>
<LI>Моё имя…</LI>
<LI>Мой адрес…</LI>
<LI>Контактные координаты…</LI>
</OL>
<HR>
<P ALIGN="JUSTIFY">
Я совсем недавно начал(а) знакомиться с виртуальной жизнью.
Мне тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они смогли посмотреть мои фотографии,
<A HREF=”АВТОБИОГРАФИЯ.HTM”>почитать обо мне</A>, черкнуть пару строчек в мою гостевую книгу. А может и просто случайный посетитель вдруг захочет познакомиться со мной и у меня появится ещё один виртуальный друг?:)
</P>
<HR SIZE="5" COLOR="#FFD800">
<UL>
<LI>До встречи.</LI>
<UL><LI>Спасибо за внимание.</LI></UL>
<UL><UL><LI>Продолжение следует!</LI></UL></UL>
</UL>
<HR>
<FONT COLOR="#00FFFF">Обычный текст</FONT>
<BR>
<FONT COLOR="#FFFF00"><B>Жирный</B></FONT>
<BR>
<FONT COLOR="#000000"><I>Курсив</I></FONT>
<BR>
<FONT COLOR="#00FF00"><U>Подчеркнутый</U></FONT>
<BR>
<FONT COLOR="#FF00FF"><B><I><U>Жирный подчеркнутый курсив</B></I></U></FONT>
<HR SIZE="5" COLOR="#FFD800"></BODY>
</HTML>
Сохраните изменения в файле proba.htm.