Чтобы программа просмотра смогла найти Ваш графический файл, необходимо указать его местонахождение. Файл может находиться на том же сервере и в том же каталоге, в котором расположен сам HTML – документ, может быть на том же сервере, но в другом каталоге, а может находиться на другом сервере.
1. Если графический файл находится там же, где HTML – документ, то можно указать только имя этого файла:
<IMG SRC=”1.gif”>
где 1.gif имя файла, который будет отображен на страничке.
2. Если на том же сервере, но в другом каталоге, то указывается имя каталога и файла:
<IMG SRC=”pics/1.gif”>
где 1.gif имя файла, который будет отображен на страничке.
3. В случае, когда файл с изображением находится на другом сервере, необходимо указать URL, то есть полный адрес:
<IMG SRC=”URLf”>
<IMG SRC=”https://www.ssu.samara.ru/1.gif”>
где 1.gif имя файла, который будет отображен на страничке.
Упражнение №7
Найдите любую картинку и перепишите ее в каталог HTML. Затем разместите ее на «обоях», которые Вы использовали в предыдущем HTML – документе. Расположите картинку по центру. Ваш файл ind7.htm должен выглядеть так:
<HTML>
<HEAD>
<TITLE>Моя страничка</TITLE>
</HEAD>
<BODY background = “bg01.jpg”>
<center><img src= “kon.jpg”></center>
</BODY>
</HTML>
Таблицы
Таблицы являются стандартом HTML. В первом приближении таблица Web-страницы — это сетка для показа данных в строках и столбцах. Однако таблицы можно применять как средство обхода ограничений HTML. Например, в HTML нельзя точно разместить элементы по горизонтали, но, используя таблицы, можно добавлять столбцы для перемещения элементов. Результаты выглядят потрясающе.
Создание таблиц вручную — одна из наиболее сложных задач в HTML. Сначала формируете таблицу, затем первую строку, затем каждую ячейку с ее содержимым. Каждый элемент требует открывающего и закрывающего флагов разметки документа. Если Вы забыли один – единственный текстовый маркер, то Вашу страницу никто не сможет прочитать.
|
|
Таблица вставляется в HTML – документ парными тэгами <TABLE> и </TABLE>.
У тэга <TABLE> есть параметры:
BORDER — ширина бордюра
WIDTH — ширина таблицы
BGCOLOR — цвет фона под таблицей
Между тэгами могут располагаться следующие элементы:
1. <CAPTION> Название таблицы </CAPTION>
У флага CAPTION есть всего один параметр, определяющий положение названия таблицы — ALIGN. Он может принимать два значения:
Top — над таблицей
Bottom — под таблицей
2. <TR> Строка таблицы </TR>
У этого флага есть три параметра:
ALIGN — выравнивание внутри строки
LEFT
RIGHT
CENTER
VALIGN — вертикальное выравнивание внутри строки таблицы
TOP
BOTTOM
MIDDLE
BGCOLOR — цвет фона внутри строки
3. <TD> Столбец таблицы </TD>
Флаг столбца таблицы может иметь следующие параметры:
ALIGN — выравнивание
LEFT
RIGHT
CENTER
VALIGN — вертикальное выравнивание
TOP
BOTTOM
MIDDLE
COLSPAN, ROWSPAN — растягивание клетки на несколько столбцов, строк
BGCOLOR – цвет фона под столбцом
Упражнение №8
Давайте создадим в текстовом редакторе файл на языке HTML, назовем его ind8.htm и запишем в каталог HTML.
<HTML>
<HEAD>
<TITLE>Таблица</TITLE>
</HEAD>
<BODY>
<H2 ALIGN = Center> Самая простая таблица
</H2>
<TABLE BORDER>
<TR>
<TD> ячейка таблицы А:-)</TD>
<TD>ячейка таблицы В:-)</TD>
<TD>ячейка таблицы C:-)</TD>
</TR>
<TR>
|
|
<TD>ячейка таблицы D:-)</TD>
<TD>ячейка таблицы E:-)</TD>
<TD>ячейка таблицы F:-)</TD>
</TR>
</TABLE>
</BODY></HTML>
Открыв файл в программе просмотра, мы увидим пример самой простой таблицы:
Свяжем все вместе
Часть текста, название, участок изображения и пр. могут иметь ссылки на другой текст внутри этого же документа или на другой документ в сети Интернет. Это и называется гипертекстовой связью, гипертекстовой ссылкой. Изображение или участок текста, слово, с которым ассоциированы гиперсвязи, называется якорем или ссылкой. На экране якорь выделяется каким-либо образом на фоне остального текста — подчеркиванием и особым цветом, который устанавливается по умолчанию.
Чтобы превратить обычный документ в гипертекстовый, в него нужно вставить гипертекстовые связи. Для этого используют парные тэги
Параметр определяет, адрес ссылки, на которую будет совершен переход, если щелкнуть мышью по объекту, находящемуся между тегами (в данном случае объект обозначен многоточием)
До сих пор мы делали только отрывочные документы. Теперь мы сможем их связывать в логически построенный Web – сайт.
Упражнение №9.
Откройте файл ind1.htm в текстовом редакторе и отредактируйте его так, как показано ниже.
<HTML>
<HEAD>
<TITLE>Моя страничка </TITLE>
</HEAD>
<BODY bgcolor = black text = red link = yellow vlink = aqua alink = blue>
<H2> Отчет по лабораторной работе №4 </H2>
<ul>
<li><A HREFF= “ind1.htm”> Упражнение №1 </a>
<li><A HREFF= “ind2.htm”> Упражнение №2 </a>
<li><A HREFF= “ind3.htm”> Упражнение №3 </a>
|
|
<li><A HREFF= “ind4.htm”> Упражнение №4 </a>
<li><A HREFF= “ind5.htm”> Упражнение №5 </a>
<li><A HREFF= “ind6.htm”> Упражнение №6 </a>
<li><A HREFF= “ind7.htm”> Упражнение №7 </a>
<li><A HREFF= “ind8.htm”> Упражнение №8 </a>
</ul>
</BODY>
</HTML>
Сохраните файл как index.htm.
Теперь запустите программу просмотра и сравните изображение на экране с рисунком.
Проверьте работоспособность всех размещенных на сайте ссылок.
Поздравляю! Ваш первый шаг в создании сайтов сделан….