Создаем, программируем, шлифуем и раскручиваем web-caйт. Серия Быстро и легко - Алексеев Ю.М.
Скачать (прямая ссылка):
' '¦ F-
28
Быстро и легко создаем, программируем и раскручиваем УУеЬгсайт
вающим </а> тегами. Это может быть фрагмент текста или HTML-код, соответствую-
11 їй і і рисунку. "' ¦'. :'' . '
Давайте создадим текстовую ссылку, в которой указателем будет слово обеспечит на нашей Web-странице, а адресной ,частью - имя созданного документа со списком услуг список.гпті.
> Ниже тега<Ъооу> HTML-кода найдите слово обеспечит. '
> Замените слово обеспечит на HTML-код со ссылкой на список услуг фирмы АТЛАНТ: 'Іїі>-1.:и.МГ>',іт№.»Л
<а href="список.Мт1">обеспечит</а>: •
Адресная часть заключена в кавычки, так как некоторые браузеры могут ее некорректно' обрабатывать без кавычек. . .
HTML-код документа со ссылкой представленнаї^с. 1.21. . . ¦ ¦"
файя правка формат вил справка
<htnil> <head>
<tiUe>KoMiinHifflATJIAHT</titltf>-
</head>
<bodybgcolor=blue text=red bnckgroiiiKr=BACKGRND,GIF> <hl aIigH=caitei>KoMnaHiM АТЛАНТ</1і1> <cmteixiiiig src=HLPBELL. GIF borda=Lx/centet> <ceiita'><font size=3xi>KoMnaHi»i АТЛАНТ, <a Iu ef=,'crnicoK.htnil''>o6ecneliiir;-/a>
вас компьютерами и программными продуктами на любой
Bicyc.</iX/fontX/cai(a>
<body>
<html>
.-Пі її -л,.
Рис. 1.21. HTML-код с текстовой ссылкой
SU ZtW :Чі>
Следует отметить, что вы можете установить нужный цвет указате-. ля ссыпки. Атрибут link тега <body> определяет цвет непросмотренной ссылки, vlink - просмотренной ссылки. Еще один атрибут a link задает цвет ссылки в момент, когда на ней установлен указатель мыши и нажата левая кнопка.
Теперь проверим работу со ссылкой в браузере.
> Сохраните HTML-документ надиске;'*4 ^';>?**
> Перейдите к программе Microsoft Internet Explorer.
...... uttp'p- ''t
> В поле ввода Адрес (Address) окна программы введите полный путь к файлу с HTML-кодом атлант.МтІ.
Ik:
ГЛАВА 1. Первая Web-страница за несколько минут
29
> Нажмите клавишу В окне браузера появится созданная Web-страница, в'
которой слово обеспечит выделено цветом и подчеркиванием (Рис. 1.22). Это означает, что данное слово указывает на ссылку. -<•;„';..;. > ;:;}*'>»"'4».
^UM1|d1|M!> АТЛАНI H
Файл Правка Вид Навранное Сервис Справка
cawebvaradht.hbnl
Компания АТЛАНТ
Компания АТЛАНТ обеспечит але компьютерами и программными продуктаминалюбої вкус, к
[ffi готово ~
\ J MyCo[T(IUlI
-/''.," -•V Рис. 7.22. Web-страница с текстовой ссылкой
> Подведите указатель мыши к ссылке обеспечит. Указатель мыши изменится на .
> Щелкните мышью на ссылке. В окне браузера появится Web-страница со списком услуг фирмы АТЛАНТ (Рис. 1.19). ' . . ,.
Теперь вставим в документ ссылку, в которой указателем будет рисунок, а адресной частью - снова имя документа со списком услуг список.html.
> Перейдите к редактору Блокнот (Notepad).
V В HTML-документе замените элемент <img src = HLPBELL.GXF border=l>,
который связан с рисунком, на фрагмент HTML-кода, чтобы данное изображение выполняло роль ссылки:
<а Ьге?="список.МтІ"><ітд src=HLPBEI,L.GIF border=lx/a>
HTML-документ со ссылкой в виде рисунка изображен на Рис. 1.23.
Файа Правка Формат Вии Справка
<html> . ,- \ ' • ,"
<head> . • ' . vy сг-у.к:. ; -.
<Ше>Компання ATJIAHlV/utte»
•-'head-
<bodybgcolor=blue text=iedbacfcsaound=BACKGRND.GIF> „.,
<hl а'іі»р^«іЛ«г>КомпанмАТЛАНТ</1і1> ''
<center><a luef="enncoK.htoil"><um src=HLPBELL. GIF barda=lx/a>
<centaxfont 8Іге=5хі>Компаши АТЛАНТ
<аІжеі=,'сгаісок.ІШіи">обеспечіітг'/а>
вас компьютерами и программными продуктами на любой
8Kyc.</ix/fontx/center>
</body> , . - '
<huul> '
;/center>
Рис. 1.23. HTML-документ с графической ссылкой
30 _ Быстро и легко создаем, программируем ' и 'раскручиваем Web-сайТ-Осталось проверить • работу 1 с Графической ссылкой в браузере. V' :\ Л ^i-V.
> Сохраните HTML-документ на диске.
\ . .-'і .
* Перейдите к программе Microsoft Internet Explorer. .
> В поле ввода'Адрес (Address) окна-'г^і^аШіЧв^Я^олМ'-ітугь' к файлу с HTML-кодом атлант.МшІ. ' "
> Нажмите клавиптуРЩ. В окне браузера появится основная Web-страница (Рис. 1.22). ¦
¦ > Подведите указатель мыши к изображению звонка. Указатель мыши изменится на ^J. Это означает, что данный рисунок является указателем ссылки.- : ¦.
.> Щелкните мышью на звонке. В окне браузера появится Web-страница со списком услуг фирмы АТЛАНТ (Рис. 1.19).
В заключение напомним, что если документ, на который нужно сослаться, расположен .-на другом компьютере, то в качестве адресной части нужно указать его электронный адрес, например http://www.triumph.ru. При щелчке мышью на такой ссылке Web- . страница будет загружаться из Интернета по указанному адресу. . ¦ • ' ¦
Знмсми^о M^. Вставляем таблицу
При создании Web-страниц часто необходимо по-разному размещать фрагменты текста и рисунки относительно друг друга, например, в различных колонках. Для задания вза- . имного расположения элементов страницы, представления табличной информации, создания меню следует использовать знакомстве расскажем, как создавать таблицы, устанавливать их границы, форматировать содержимое ячеек, сопоставлять ссылки элементам таблицы.