 |
Главная Случайная страница Контакты | Мы поможем в написании вашей работы! | |
Тег <HTML> указывает на язык программирования HTML. Эта запись нужна потому, что Web-страницы могут создаваться и другими средствами
|
|
В разделе HEAD задаются базовые параметры страницы, посетитель при загрузке сайта их не видит. Исключение: название страницы выводятся на экран в самой верхней строке браузера, на синем фоне. Базовые параметры используются: браузерами при загрузке страницы на компьютер; поисковыми машинами при помещении данной страницы в список ссылок, создаваемых по запросу клиента; а также для других целей.
В разделе BODY размещается содержание станицы. Здесь все, что находится за пределами угловых скобок < >, выводится на экран.
2.3. Теперь сохраним сделанное в формате.html. Для этого сначала создадим папку, куда будем помещать все материалы создаваемого сайта. Создайте такую папку в месте, указанном преподавателем, и назовите ее произвольным именем (естественно, пользуясь английской клавиатурой).
2.4. Далее в папку сохраним созданную страницу (под именем Index или любым другим, набранным латинскими буквами).Перейдите опять в Блокнот, вызовите окно Файл → Сохранить как, и в строке Имя файла замените .txt на .html, а * на то имя, которое вы собираетесь дать создаваемой странице.В строке Тип файла поставьте Все файлы. При запуске файла включается браузер и демонстрируется содержимое страницы, пока это пустое окно.
2.5. Создайтезаголовок страницы, отображаемый в строке заголовка браузера. Для этого в разделе HEAD надо создать строку: <TITLE></TITLE>, и между этими тегами написать название страницы, наша страница будет называться: Казахская кухня. Сохраните сделанное изменение командой Файл → Сохранить или Ctrl + S. Теперь при запуске страницы в строке заголовка, на самом верху экрана, появляется ее название.
Название страницы, задаваемое тегом <TITLE> и наименование файла страницы – это разные вещи. Первое используется поисковыми системами для создания базы ссылок, второе входит в адрес URL и используется при доставке страницы пользователю.
В теге <TITLE> часто задают ключевые слова. Набор ключевых слов надо тщательно продумать с точки зрения возможных запросов пользователей. Иначе говоря: при наборе каких слов поисковая система будет загружать пользователю вашу страницу.
Теперь при запуске страницы в строке заголовка, на синей полосе в верхней части экрана, появляется ее название. Для того, чтобы посмотреть сделанное изменение, надо в Internet Explorer нажать кнопку Обновить.Для перехода обратно к программному коду надо применить команду Файл → Править в Блокнот. В старых версиях Explorer надо нажимать: Вид → Источник.
В дальнейшем все созданное надо сохранять в Блокноте, потом переходить в Internet Explorer и обновлять страницу. После чего через меню Вид переходить обратно в Блокнот (если используемая версия браузера позволяет это).
2.7. Создадим несколько параметров, не выводимых на экран. В HEAD запишите непарный тег с атрибутами: <META name=‘author’ contents=‘Имя Фамилия’ >, при этом поставьте свои имя и фамилию. Этот дескриптор создает имя автора для поисковой системы.
2.8. Далее там же запишем <META name=‘description’ contents=‘Страница создана при выполнении лабораторной работы по предмету …’ >, поставьте название предмета. Здесь после contents пишется то, что поисковая система будет приводить в качестве резюме при помещении вашей странице в список вместе с другими найденными страницами. Легко убедиться, что Meta-теги на экране не отображаются (кроме TITLE).
3. Разметка Web-страницы с помощью таблиц
Создание чего-либо обычно начинается с проектирования. Иногда сначала проект Web-страницы рисуют на бумаге. На практике разметку станицы создают с помощью таблиц. Таблицы в Web-дизайне имеют более широкое применение, чем в текстовых документах. Создаваемая нами страница будет иметь несложную структуру, изображенную на рисунке (линии по умолчанию будут невидимы).
Для создания таблиц используются четыре тега:
· <TABLE> </TABLE> – создает таблицу;
· <TR> </TR> – создает новую строку;
· <TH> </TH> – создает ячейку заголовка;
· <TD> </TD> – создает простую ячейку.
По умолчанию в ячейку заголовка пишется текст полужирного начертания с выравниванием по центру. В обычной ячейке текст не выделяется и имеет выравнивание по левому краю.
Для начинающего создать подобную структуру сложно, можно легко запутаться. Поэтому будем снабжать создаваемый программный код комментариями – замечаниями, недоступными для просмотра.
Комментарии вводятся следующим образом: <!—Текст комментария -->. Однако комментарии – это не секретный текст, при просмотре программного кода они становятся доступными.
3.1. После <BODY> напишите <TABLE width=100% border=1></TABLE>. Мы создали таблицу, внутри которой будет помещено все содержаниеWeb-страницы. Надписью border=1 задали толщину границ ячеек в 1 пиксель. Ширину таблицы задали в 100% экрана монитора. Не имеет значения, каков будет монитор у пользователя, таблица по ширине займет весь экран.
Не забывайте о том, что между тегами можно ставить пробелы и переводы строки. HTML их не чувствует, а для чтения программного кода операции удобно разделять переводом строки.
3.2. После <TABLE> напишите <TR><TH></TH></TR> – это будет шапка, где будет помещен красочный заголовок страницы. Обратите внимание на то, что в строке обязательно надо создать ячейку, даже если она одна. После </TR> создадим комментарий: <!—Шапка -->. Чтобыячейка отобразилась в окне браузера, надо в нее вписать какое-либо слово (между открывающим и закрывающим тегом). Сделайте это.
3.3. Создайте еще одну строку, это будет строка меню. В ней создайте три ячейки заголовка, в каждую впишите что-либо. К строке создайте комментарий: <!—Строка меню -->, и посмотрите что получилось.
3.4. Создайте еще одну строку для ячеек (простых) иллюстраций и текста, с двумя ячейками, впишите в ячейки что-либо.
3.5. Завершите разметку страницы созданием строки с одной простой ячейкой для нижней части, но сделайте выравнивание текста по центру: <TR><TD align=’center’></TD></TR>. Впишите в ячейку что-либо, сделайте комментарий,посмотрите что получилось.
По горизонтали получилось не то, что надо. Дело в том, что HTML стремится сделать все ячейки одинаковыми по ширине, причем к тому же примерно одинаковыми. Придать ячейкам разную ширину можно, но это сложный процесс. Проще создавать объединенные ячейки, занимающие несколько столбцов. Это делается командой COLSPAN.
3.6. Для ячеек шапки и низа поставьте атрибут colspan=3 (т.е. эти ячейки занимают три столбца каждая). Для текста поставьте colspan=2. Расположение ячеек должно стать таким, как на рисунке.
3.7. Команду border=1 уберите, границы ячеек нужны были только для наглядности.
4. Импорт и форматирование текста
4.1. В Блокноте откройте файл Казахская кухня, выделите начало текста до слов «Деликатесы из конины», и с помощью буфера обмена перенесите этот текст в раздел, отведенный для основного текста(то, что там было написано – удалите). При просмотре видно, что форматирование текста оставляет желать лучшего. По умолчанию HTML выставляет левое выравнивание без абзацев и каких-либо иных параметров.
4.2. Вернемся в Блокнот и установим абзацы. Для этого текст каждого имеющегося абзаца надо заключить между тегами <P> и </P>. Одновременно эти теги устанавливают шрифт обычного начертания. Для ускорения процесса можно их вводить через буфер обмена (сначала <P>, потом </P>).
Можно менять и другие параметры текста: шрифт, начертание, размер и др. Возможности изменения вида текста достаточно широкие, сравнимые с Microsoft Word. Но в Блокноте вместо щелчка по меню и кнопкам приходится ставить команды языка HTML, что, конечно, занимает больше времени. Чтобы не пришлось переделывать работу, периодически надо контролировать правильность введенных команд в Internet Explorer.
4.3. Для заголовка и первого абзаца установим центральное выравнивание, добавив в открывающий тег атрибут выравнивания по центру: <P align=center >. Для остальных абзацев сделаем выравнивание по ширине: <P align=justify > Разумеется, здесь тоже полезно использовать буфер обмена.
4.4. Теги и атрибуты можно применять сразу к нескольким абзацам. Перед открывающим тегом заголовка поставьте <FONT face=Arial>, после закрывающего тега 2-го абзаца поставьте </FONT>. Внутри обозначенной области шрифт Times New Roman сменился на Arial.
4.5. В HTML можно установить 6 уровней заголовков, что логически упорядочивает данные на Web-странице. Кроме того, от умелого использования заголовков зависит эффективность нахождения страницы в Интернете поисковыми роботами. Обычный текст соответствует 4 уровню; 1 уровень имеет самый крупный текст; 5 и 6 используются для сносок и примечаний. На странице рекомендуется использовать не более 3-х уровней.
Примените к заголовку второй уровень: <H2></H2>, к 1-му абзацу третий уровень: <H3></H3>, это будет подзаголовок. Теги заголовков надо ставить первыми, в самом начале и в конце абзаца. Второй абзац сделаем курсивным начертанием, поставив теги <I> и </I> внутри, после остальных команд.
Для правильного воспроизведения команд имеет значение порядок их применения. В Блокноте этот порядок легко установить экспериментально При других способах создания Web-страницы несоблюдение порядка может быть не так заметно, что вызовет трудности.
4.6. С помощью парного тега <BLOCKQUOTE> можно выделить любой абзац,за счет появления отступов справа и слева. Это хороший прием выделения текста. Примените к любому абзацу дескриптор <BLOCKQUOTE></BLOCKQUOTE>.
4.7. Теги могут применяться не только к абзацу, но и к отдельным словам и выражениям, даже к символам. В тексте выделите любые выражения, слова, символы жирным шрифтом: <B></B>, подчеркиванием: <U></U>. Измените размер шрифта для отдельных слов: <FONT size=6></FONT>, это крупный шрифт. В HTML номер шрифта не соответствует его кеглю (как в Word). Номер 6 – это 24-й кегль, а 1 – 8-й.
Списки – простой и эффективный способ упорядочивания материала в логической последовательности.
4.8. Нумерованный список создается с помощью двух пар тегов: <OL> и </OL> устанавливают начало и конец нумерованного списка, а <LI> и </LI> отмечают отдельные элементы списка. Найдите в тексте какое-либо из перечислений иограничьте его тегами <OL>, а каждое из слов – тегами <LI>. Посмотрите, получился ли список.
4.9. С помощью различных атрибутов можно установить нумерацию римскими цифрами и буквами, задать начало нумерации не с первого номера, пропустить номера в списке. Задайте <OL type=a>, посмотрите что получилось.
4.10. Маркированный список создается тегами <UL> и </UL>, элементы списка ограничиваются теми же <LI> и </LI>. Создайте маркированный список из слов 3-го абзаца Web-страницы, причем фразы по строкам нужно разместить следующим образом, вставив заглавные буквы и поменяв знаки препинания:
· В первую очередь … айран.
· Затем чай с молоком или сливками … куртом.
· Затем следовали закуски из конины … кабырга.
· На любом столе … пшеничной муки.
4.11. Многоуровневые списки создаются простым вложением тегов <OL>, <UL>, <LI> внутри имеющегося элемента списка, то есть области, ограниченной <LI> и </LI>. Создайте многоуровневый список из маркированного списка, поставив в отдельные строки перечисленные напитки и закуски.
4.12. Маркеры в списках могут быть разными, их можно задавать атрибутом type. Для одного из вложенных списков поставьте <UL type=square>.
Бегущая строка – анимационный эффект, при котором строка текста перемещается по станице. Это хороший способ привлечения внимания к короткому, но емкому сообщению. Эффект бегущей строки поддерживается только в Internet Explorer, в других браузерах строка будет неподвижной.
4.13. Теги бегущей строки: <MARQUEE> и </MARQUEE>. Поставьте их до и после слов подзаголовка: его история, обычаи и традиции. Эти слова выделятся в отдельную бегущую строку, по умолчанию она движется справа налево и бесконечно повторяется.
4.14. Параметры перемещения текста можно изменять соответствующими атрибутами. Дополните тег атрибутом <MARQUEE direction=right> – направление движения текста сменится на противоположное. Задайте loop=7 – теперь бегущая строка повторится 7 раз. У этого тега есть и другие интересные атрибуты.
5. Добавление графики
В Интернете применяются 3 растровых графических формата: JPEG, GIF и PNG. Используется также векторная FLASH-графика и анимация, создаваемая с помощью Flash-редакторов.
Используемая в Сети растровая графика проходит специальную подготовку в графических редакторах, чаще всего в Adobe Photoshop. Без этой подготовки иллюстрации в Сеть не попадут, даже если будут вставлены в программный код.
Графические файлы обычно имеют намного больший размер, чем текстовые, и они могут существенно увеличить время загрузки Web-страницы. Поэтому основная цель подготовки заключается в уменьшении размеров графического файла за счет снижения разрешения и глубины цветности. Другая цель – создание анимационных эффектов, украшающих публикацию.
Подготовку графики к Интернету имеет смысл рассматривать при изучении графических и анимационных редакторов, далее же говориться о работе с графикой средствами HTML.
5.1. Графика вставляется непарным тегом <IMG>, вставьте его в ячейку, предназначенную для иллюстраций (убрав то, что в ней было). В середине ячейки появляется значок рисунка без самого рисунка, он ставится, когда браузер не смог найти графический файл.
На странице можно разместить рисунки, из любой папки компьютера и даже те, которые находятся в Сети. Для этого надо правильно прописать путь доступа к ним. Но при указании пути доступа могут встретиться различные трудности, о которых разработчик сайта может даже и не знать. Поэтому обычно все рисунки переносят в папку Image, которую размещают в папке, где находятся компоненты сайта.
5.2. Пользуясь указаниями преподавателя, перенесите все необходимые рисунки в папку вашего сайта. Теперь вставьте рисунок KazKuh1, дополнив тег <IMG> атрибутом src= Images/KazKuh1.gif – должна появиться картинка. Src – обязательный атрибут, без него неясно, какой файл надо вставлять. Вставьте другую картинку: <IMG SRC=Images/KazKuh2.jpg. >
Для вставки рисунка необходимо указать его формат. Формат должен читаться браузером, что бывает не всегда, даже если это GIF или JPEG. Читаемый формат создается при подготовке рисунка для Web, что можно сделать во многих программах. В Photoshop надо применить команду Файл → Сохранить для Web. В открывшемся окне можно менять различные параметры, в том числе формат.
Не каждый графический файл может быть помещен на Web-страницу, а только подготовленный специальным образом.
5.3. Рисунки располагаются горизонтально, подобно соседним символам текста, и это расположение «съедает» очень много места на странице. Для вертикального расположения надо каждый рисунок расположить в своем абзаце, то есть до каждого тега <IMG …. > поставить <P>, а после – поставить </P>. Сделайте это.
5.4. Еще одно неудобство: рисунки попадают в центр ячейки, а лучше их располагать сверху. Для этого надо ячейку дополнить атрибутом: <TD valign=top>.
Для расположения содержимогоячейки по горизонтали используется атрибут ALIGN со значениями: left, center, right (соответственно влево, по центру, вправо). Для разположения содержимого по вертикали используется атрибут VALIGN со значениями: top, middle, boottom (соответственно вверху, по центру, внизу).
5.5. Страница будет лучше смотреться, если рисунки сделать одинаковыми по ширине. Сначала определим размеры рисунков. Щелкните правой кнопкой мыши по файлу KazKuh1.gif, выберите Свойства → Сводка. Рисунок имеет ширину 283 точки, высоту – 378 точек. Аналогично можно узнать, что KazKuh2.jpg имеет ширину 186 точек, высоту – 259 точек.
5.6. С помощью простых вычислений можно определить, каковы должна быть высота KazKuh2.jpg, если мы увеличим его ширину до 283 пикселей: (283:186) х 259 = 294 пикселя. Размеры любого графического файла можно скорректировать атрибутами width (длина)и height (высота). Поставьте в тег вызова KazKuh2.jpg атрибуты width=283 height=294.
5.7. Добавьте файл KazKuh3.jpg. Он оказался слишком велик. Поставьте ему ширину 283 пикселя, а необходимую высоту вычислите самостоятельно. Поставьте этому рисунку атрибут valign=bottom
5.8. Дополните рисунки рамками толщиной в 2 пикселя, поставив каждому атрибут border=2.
В виде рисунка можно вставить текст необычного начертания, выполненный в мало распространенной шрифтовой гарнитуре.
5.9. В самой верхней ячейке таблицы, в шапке, вставьте рисунок TextKazKuh. Задайте ему атрибут центрального выравнивания align=center. Добавьте еще атрибут альтернативного текста: alt=’Казахская кухня’. Обратите внимание на то, что значение атрибута, состоящее из нескольких слов, обязательно надо выделять апострофами: ‘’.
Для чего нужен альтернативный текст? Он читается поисковыми системами, а рисунки поисковая система не читает. Часто в шапке Web-страницы задаются самые главные, ключевые слова в виде красочного рисунка. Тогда без атрибута ALT сильно снижаются шансы страницы быть замеченной пользователем.
6. Работа с цветом и фоном
В HTML можно менять цвет текста, фона, различных объектов. Причем можно изменить цвет любого участка текста: от всего содержимого до отдельных символов. А фон можно задать как для всей страницы, так и для ее части.
Количество возможных цветов очень велико, оно соответствует цветовой модели RGB (red, green, blue). Двумя шестнадцатеричными цифрами задаются уровни яркости красного, зеленого или синего цвета. Цвет задается комбинацией из этих трех основных цветов, т.е. требуется шесть шестнадцатеричных цифр. Всего таким способом можно создать около 17 миллионов цветов.
16 цветов имеют собственные имена, их можно задавать по имени. Например: red – красный (# FF0000), blue – синий (#0000 FF), silver – серебряный, (# C0C0C0) – оливковый (#808000). В скобках приведены шестнадцатеричные коды этих цветов.Перед числовым кодом цвета всегда ставится знак #.
6.1. Раскрывающий тег <BODY> дополните атрибутом: bgcolor=#FFFF80, что соответствует светло-желтому цвету фона.
6.2. Для любых слов или выражений поменяйте цвет шрифта с черного на красный, поставив: <FONT color=red></FONT>.
6.4. Окрасьте светло-желтым цветом, фон бегущей строки и фон последней строки таблицы, поставив атрибут bgcolor=#FFFFD0 в теги <TR> и <MARQUEE>. А для фона строки меню выберите голубой цвет: bgcolor=# D0D0FF
6.5. Страницу можно украсить фоновым рисунком. Если рисунок меньше окна браузера, то он многократно копируется. Чтобы не мешать чтению, фоновый рисунок должен быть светлым, малоконтрастным, не очень сложным. Замените в теге BODY атрибут фонового цвета на атрибут фонового рисунка background и адрес файла ForFon: background=Images/ForFon.jpg.
7. Специальные символы
Специальные символы бывают двух видов.
1. Различные знаки, которые сложно или невозможно набрать прямо с клавиатуры. Одни из них имеют специальное и служебное назначение, другие представляют собой картинки, украшающие публикацию.
2. Знаки, используемые в языке HTML. Они нужны для того, чтобы на Web-странице можно было написать команды HTML в виде текста. При этом неправильно набранная команда и так появится на Web-странице в виде текста.
Команды специальных символов всегда начинаются с &, например: <, ×, &trac34. Для этих команд угловые скобки <> не ставятся.
Команды могут иметь именной и числовой код. Именной код присвоен командам выведения самых важных символов, например: > (>, больше), ¢ (€, евро), © (©, знак авторского права). Свой числовой код имеет любая команда выведения символа, включая буквы русского и английского алфавитов, цифры, различные знаки и пр. То есть числовой код позволяет вывести любой символ, установленный в компьютере. Числовой код записывается в следующем виде: &#номер символа.
7.1. При импорте текста HTML игнорирует множественные пробелы, между всеми словами остается только один пробел. Команда   вставляет неразрывные пробелы, каждый из которых в обязательном порядке присутствует на Web-странице. В начале любого абзаца поставьте подряд 5 раз символ  . Получится абзацный отступ первой строки.
7.2. Верхняя иллюстрация располагается слишком близко к строке меню. Для того, чтобы ее немного сдвинуть вниз, создайте в столбце картинок сверху еще одну строку с пробелом: <P> </P>.
7.3. В любом месте страницы поставьте знаки <>, algin=justify, &abcd. Все эти неправильно введенные команды HTML отобразятся в виде текста.
7.4. В нижней строке страницы наберите: ©Миреев В.А., аимеющийся там текст удалите. Отобразится копирайт автора этого текста.
7.5. Введем символ-иллюстрацию из специального шрифта. В шапке, после рисунка Казахская кухня создадим абзац текста с помощью следующего набора команд: <FONT face='Webdings' size='16'><P align=left>ä</P></FONT>. Написанное означает введение символов шрифта Webdings, 16 кегля, с левым выравниванием. Из этого шрифта набираем один символ с кодом 228. В результате в левом верхнем углу страницы отобразится картинка со столовыми приборами.
Таким образом, на страницу можно загрузить как рисунок, который выглядит как текст (см. пункт 5.9.), так и текст в виде рисунка.
7.6. Коды символов можно найти в Microsoft Word. Вызываем Word, создаем там пустой файл, после чего командами Вставка → Символ открываем окно, в котором можно найти все имеющиеся в данном компьютере знаки и их коды. Лучше выбирать распространенные шрифты, например Webdings, он имеется на всех компьютерах с ОС Windows.
8. Создание гиперссылок
Гиперссылки являются важнейшим элементом Web-страниц, они обеспечивают логическую структуру всемирной паутины WWW. Без гиперссылок Интернет в его нынешнем виде невозможен.
Гиперссылка создается парными тегами < A> и </ A>, между которыми заключен текст или картинка, служащие гиперссылкой. Адрес, на который ведет гиперссылка, задается атрибутом href: < A href=адрес>.
Гиперссылкой может служить:
· участок текста любого размера, от буквы до нескольких абзацев;
· баннер – графический или анимированный объект, ставший гиперссылкой.
Гиперссылка может вести на:
· закладку на текущей Web-странице;
· другую Web-страницу данного сайта, как правило на том же носителе;
· Web-страницу, находящуюся в Интернете, а также в локальной сети;
· мультимедийный ресурс в сети или на данном компьютере;
· документ FTP сервера;
· адрес электронной почты;
· сценарий на языке Java Script.
Есть и другие варианты гиперссылок.
8.1. В строке меню создадимгиперссылки на рецепты нескольких блюд. Для этого в каждой ячейке меню напишем соответствующие ссылки: <A>Рецепт 1</A>, <A>Рецепт 2</A>, <A>Рецепт 3</A> (вместо того, что там было). Но пока эти гиперссылки никуда не ведут, надо создать соответствующие страницы.
8.2. Скопируйте файл Kazyi.html в ту же папку, где находится ваша главная страница, после чего для ссылки Рецепт 1 поставьте атрибут адреса гиперссылки: <A href=Kazyi.html>. Надпись Рецепт 1 должна приобрести синий цвет и стать подчеркнутой (так по умолчанию обозначаются текстовые гиперссылки).
Но каждая страница должна тоже иметь ссылки куда-то, иначе она будет являться «тупиком», откуда не выбраться. Для страницы Kazyi.html сделаем обратную ссылку на Index.html.
8.3. В конце текста сделайте новую строку, придайте ей центральное выравнивание, и напишите: НА ГЛАВНУЮ. Поставьте также тег жирного начертания: <B>. Затем поставьте тег гиперссылки: <A href=Index.html>. Не забудьте, что после надписи должны идти завершающие теги, в порядке, обратном по отношению к открывающим: </A></B></P>.
8.4. Создайте еще одну страницу-рецепт для любого выбранного вами блюда. Раскройте код страницы Казы (см. пункт 2.6) и сотрите все, что содержится между тегом BODY и ссылкой на главную страницу.Раскройте файл Казахская кухня и скопируйте оттуда любой рецепт вместо стертого текста.
8.5. Сохраните файл в свою папку под другим именем в виде страницы html, так, как это описано в п. 2.4. В теге TITLE замените Казы на другое название.
8.6. Просмотрите созданную страницу. Отсутствуют абзацы, все абзазы надо обозначить тегами <P> и </P> (что удобнее сделать с использованием буфера обмена). Для названия блюда сделайте центральное выравнивание.
8.7. Пропишите ссылку Рецепт 2 на созданный файл так, как это описано в п. 8.2. Проверьте, работает ли созданная вами ссылка.
8.8. Аналогично создайте третью страницу для выбранного блюда. Ссылкой на нее будет надпись Рецепт 3.
8.9. С помощью атрибута target можно поменять способ открытия документа, указанного в гиперссылке. Добавьте в тег <A href=Kazyi.html target=blank>, тогда при открытии внешнего документа текушая страница не исчезает, и можно работать с двумя страницами.
8.10. Создадим гиперссылку – графический баннер с рисунка пельменей на страницу Pelmeni. Сначала эту страницу скопируйте к себе в папку. Затем найдите в HTML-коде страницы тег <IMG SRC=Images/KazKuh2.jpg. …>, управляющий вставкой рисунка пельменей и ограничьте его тегами создания гиперссылки <A …> </A>.
Рамка иллюстрации должна поменять свой цвет на сиреневый. По умолчанию все баннеры имеют такую рамку. Курсор на рисунке приобретает вид руки, при щелчке должна открыться страница Пельмени.
8.11. Однако с этой страницы никуда не ведет гиперссылка, получился тупик. Откройте страницу любого рецепта, вызовите ее код и скопируйте оттуда надпись НА ГЛАВНУЮ со всеми управляющими тегами.
8.12. Бывает так, чторазмер изображения велик и его включение в Web-страницу существенно замедлит загрузку документа. Тогда на этот файл создают гиперссылку.
Создайте ссылку на рисунок Baursaki.jpg. Скопируйте рисунок в свою папку, после чего создайте гиперссылку с элемента списка баурсаками на рисунок этого кушанья. Атрибуты не должны отличаться от ранее созданных гиперссылок. При щелчке по слову должен открываться рисунок. Чтобы вызванный рисунок служил иллюстрацией к тексту, дополните тег гиперссылки атрибутом target=blank.
8.13. Если страница длинная, то в ней можно создать систему навигации с переходом от одного участка к другому. Для создания закладки то место, куда ведет гиперссылка следует обозначить тегами гиперссылки с атрибутом name: <A name=#имя закладки> … </A>. Имя закладки может быть любым. Сама гиперссылка пишется обычным образом, но добавляется значок #: <A href=#имя закладки> … </A>.
В самом конце страницы заключите ©В.А.Миреев между тегами <A name=#chapter1> и </A>. В самом начале заключите ВВЕДЕНИЕ между тегами <A href=#chapter1> и </A>. При щелчке по слову ВВЕДЕНИЕ должно появляться окончание страницы.
8.14. Web-сайт обычно имеет ссылки на внешние ресурсы Интернета. Сделайте ссылку на главную страницу поисковой системы Яндекс. Для этого скопируйте в папку Images значок поисковика Yandex.gif и поместите его в конце страницы Index, после надписи ©В.А.Миреев. Снабдите этот значок гиперссылкой на Яндекс: <A href=http://www.yandex.ru>, разделите надпись и значок несколькими неразрывными пробелами.
Если компьютер подключен к Интернету, то при щелчке по значку, появится страница поисковика Яндекс. Для возвращения нажмите в меню Internet Explorer кнопку Назад.
8.15. Интересна ссылка на адрес электронной почты. Она запускает окно создания письма по адресу, указанному в этой ссылке. После значка Yandex наберите Написать письмо (тоже отделив несколькими пробелами).Поставьте к этой надписи гиперссылку <A href=mailto:[email protected]>. При щелчке запустится окно для создания письма, хотя вряд-ли такой адрес существует.
При создании сайта с помощью этой операции организуют возможность посетителю написать письмо на e-mail владельца сайта.
Дата публикования: 2015-10-09; Прочитано: 480 | Нарушение авторского права страницы | Мы поможем в написании вашей работы!
