создав «Мои карты» (если вы авторизованы). Создайте подробную карту «Как до меня добраться» для приезжающих на вокзал Екатеринбурга друзей.
Для добавления меток используйте кнопку "Добавить метку" 
. Выберите на карте нужное место и щелкните по нему; в появившейся форме введите название и описание точки; нажмите "ОК". В этот момент точку можно отредактировать или передвинуть на другое место, можно также добавить еще несколько точек; после
нанесения всех точек в левом столбце введите название и описание карты, затем нажмите "Сохранить карту". Если вы авторизованы как пользователь Яндекса, то вам будет предложен выбор "показывать всем", "только по ссылке" или "только мне", который позволит скрыть конфиденциальную информацию, если это необходимо.
После нажатия «Сохранить карту», вы можете получить ссылку на нее и код для вставки в ваш сайт или блог, а с помощью кода разместить изображение карты, например, в Живом журнале.
Тот, кому вы отправите полученный адрес, увидит карту вместе с нанесенными на нее точками, но не сможет их изменить.
Задание 17. Ссылку на карту отправьте себе по почте.
ЛАБОРАТОРНАЯ РАБОТА №20. Технологии создания Web-страниц средствами HTML-конструирования
HTML – язык логической, структурной разметки документов, включающий возможность определения таких элементов, как гипертекстовых ссылок, заголовков, абзацев, списков, а также графических изображений и веб-форм.
Первое, что нам нужно усвоить: хтмл (html) - это то, что мы сейчас изучаем. Второе, что нам нужно усвоить: html не является языком программирования, он предназначен для разметки текстовых документов (т.е. с помощью него мы размечаем текст, таблицы, картинки и т.д. на нашей странице). То, как будут выглядеть картинки, текст и другие элементы на вашей странице, и как они будут располагаться относительно друг друга, определяют метки (tags или тэги).
Задание 1.
Порядок прежде всего, поэтому перед началом работы создайте в своей папке отдельную папку ПЕРВЫЕ ШАГИ для будущей страницы.
Теперь откройте блокнот (пуск – программы – стандартные – блокнот) и наберите туда следующий текст:
177
<html> <head>
<title>Мой первый шаг </title> </head>
<body>Здравствуйте, это моя первая страница. <br>
Добро пожаловать! :) </body>
</html>
Сохраните этот документ, присвоив ему имя index.html (Файл - Сохранить Как, дальше вводите имя своего документа)
Обязательные теги, это такие теги, которые вы всегда должны прописывать для каждой своей страницы.
<html> Этот тэг должен открывать документ. </html> Этот тэг должен закрывать документ <head> </head> - голова документа
<body> </body> - тело документа
Все тэги, расположенные между <head> </head>, это что-то вроде служебной информации. Например <title>- заголовок.
Все тэги, расположенные между <body> </body> - непосредственное содержание документа.
Теперь откроем браузер Internet Explorer (не закрывайте блокнот, он нам еще пригодится), и откроем в браузере наш документ: Файл - Открыть - кнопка Обзор
- Наш документ index.html.
Если мы чего-то изменим в нашем *.html документе (в блокноте), то, чтобы посмотреть, как это выглядит в нашем браузере, надо не забывать нажимать в браузере кнопку ОБНОВИТЬ. Если изменений не видно, то это значит, что вы где-то что-то неправильно написали, или забыли сохранить документ.
Задание 2.
Давайте окрасим слова Добро Пожаловать в красный. Добавьте к этой строчке команды, как представлено ниже:
<font color="#CC0000"> Добро пожаловать! :) </font>
Color – параметр (атрибут) для тэга font, он отвечает, в данном случае, за цвет заключенного в контейнер текста.
Если цвет текста в <body> не задавать, то весь текст страницы по умолчанию будет черным.
Задание 3.
Давайте сделаем текст синим, кроме текста, для которого мы специально прописали <font></font>. Цвет фона устанавливается в уже знакомом нам тэге <body>. Для наглядности установим черный цвет. Тогда ваша программа будет иметь вид:
<html>
<head>
<title>Мой первый шаг </title> </head>
<body text="#336699" bgcolor="#000000">
Здравствуйте, это моя первая страница. <br>
178
<font color="#CC0000"> Добро пожаловать!</font> :) </body>
</html>
Обратите внимание: мы одновременно можем прописать в тэге <body> и цвет текста в документе, и цвет фона
Задание 4.
Спомощью параграфов мы можем центрировать текст: <p align="center">текст</p>
Спомощью параграфов мы можем выровнять текст по левому краю: <p align="left">текст</p>
По правому краю документа: <p align="right">текст</p>
По обоим краям документа (по ширине): <p align="justify">текст</p>
Теперь введем параграфы в наш документ и дополним текст. Внесите измене-
ния в ваш текст: <html> <head>
<title>Мой первый шаг </title> </head>
<body text="#336699" bgcolor="#000000">
<p align="center">
Здравствуйте, это моя первая страница. <br>
<font color="#CC0000"> Добро пожаловать!</font> :) </p>
<p align="justify">
Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появится еще один виртуальный друг? :)
</p>
</body>
</html>
Задание 5.
Существуют шесть уровней заголовков: <H1> текст </H1>
<H2> текст </H2> <H3> текст </H3> <H4> текст </H4> <H5> текст </H5> <H6> текст </H6>
Итак, h1 – самый важный, h6 – наименее важный. Вводя заголовки в текст, вы позволяете вашему посетителю более легко ориентироваться на странице.
179
Но, если вы хотите выделить большой фрагмент текста, то заголовки для этого использовать нельзя. Для этого предназначен атрибут size тэга <font></font>, который устанавливает желаемый размер шрифта:
<font size="+4"> текст </font> <font size="+3"> текст </font> <font size="+2"> текст </font> <font size="+1"> текст </font> <font size="+0"> текст </font> <font size="-1"> текст </font> <font size="-2"> текст </font>
С помощью face мы можем задать тип шрифта. Какие же типы шрифтов являются стандартными, и по идее должны находиться на компьютере каждого пользо-
вателя - это: Times; Times New Roman; Arial; Helvetica; Courier; Verdana; Tahoma; Comic Sans; Garamond.
Давайте теперь изменим наш документ. <html>
<head>
<title>Мой первый шаг </title> </head>
<body text="#336699" bgcolor="#000000">
<H3>
<p align="center">
Здравствуйте, это моя первая страница. <br>
<font color="#CC0000"> Добро пожаловать!</font> :) </p></H3> <p align="justify">
Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появится
<font size="+3"> еще один виртуальный друг? :)</font>
</p>
<font face="arial"> пример шрифта Arial</font> </body>
</html>
Задание 6.
Чтобы вставлять картинки в документ необходимо добавить: <img src="*.*">
Для вашего удобства скопируйте картинки (из папки указанной преподавателем) в ту же папку, что и документ.
Задание 7.
Измените текст нашей программы и вставьте 2 картинки. <html>
<head>
<title>Мой первый шаг </title>
180
</head>
<body text="#336699" bgcolor="#000000"> <H3>
<p align="center">
Здравствуйте, это моя первая страница. <br>
<img src="черепаха.gif"> <br>
<font color="#CC0000"> Добро пожаловать!</font> :) </p></H3> <p align="justify">
Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появится
<font size="+3"> еще один виртуальный друг? :)</font> </p>
<img src="машина.jpg"> <br>
<font face="arial"> пример шрифта Arial</font> </body>
</html>
Задание 8.
Сохраните документ (теперь достаточно просто Файл – Сохранить). Просмотрите его в браузере (если он был открыт, то достаточно просто нажать кнопку ОБНОВИТЬ).
Наша страничка может состоять из нескольких документов. Один из них главный (index.html) - он открывается первым и должен обязательно лежать на вашем сайте в интернете. При помощи ссылок мы связываем эти документы. Так с главной страницы по ссылкам мы можем перейти на страницу с фотографиями, с этой страницы мы можем перейти обратно на главную страницу, или, допустим, на страницу с нашими стихотворениями, и т.д.
Ссылкой на эти другие документы (части нашей странички) может быть текст (фраза, слово), а может быть и картинка.
Задание 9.
Для начала создадим ссылку на пока не существующий документ:
……………
<br>
<font face="arial"> пример шрифта Arial</font>
<br>
<a href="primer.html">посмотреть далее</a>
</body>
</html>
Сохраните документ (теперь достаточно просто Файл – Сохранить).
Задание 10.
181
Создадим новый документ (Файл - Создать). Сохраним его primer.html (Файл
– Сохранить как…) в той же папке, где находится наш главный документ index.html.
В этом документе мы создадим таблицу. Таблица задается тэгом: <table></table>
Таблица состоит из строк и столбцов (ячеек), поэтому нам надо еще указать и
их.
<tr></tr> - строчка таблицы <td></td> - столбец (ячейка) таблицы
Итак, теперь нам надо задать свою таблицу: <html>
<head>
<title>Мой второй шаг </title> </head>
<body>
<table>
<tr>
<td>1x1</td>
<td>1x2</td>
<td>1x3</td>
</tr>
<tr>
<td>2x1</td>
<td>2x2</td>
<td>2x3</td>
</tr>
</table>
</body>
</html>
Задание 11.
Фон задается атрибутом bgcolor="цвет_фона". Фон можно задать для таблицы в целом, для ряда, для ячейки (в пределе одного ряда). В нашем случае мы задаем фон для каждой ячейки. Измените соответствующие строки:
<table>
<tr>
<td bgcolor="#FFCC33">1x1</td> <td bgcolor="#336699">1x2</td> <td bgcolor="#FFCC33">1x3</td> </tr>
<tr>
182
<td bgcolor="#336699">2x1</td> <td bgcolor="#FFCC33">2x2</td> <td bgcolor="#336699">2x3</td> </tr>
</table>
Сохраните документ (теперь достаточно просто Файл – Сохранить). Просмотрите его в браузере.
Задание 12.
Самостоятельно измените цвета ячеек. Коды находятся в файле Таблица цве-
тов.htm
Задание 13.
Вы можете задать высоту и ширину для всей таблицы, атрибутами height и width.
Зададим в нашем примере не только высоту и ширину, но и сразу выровняем содержимое ячеек по центру.
……………….
<table>
<tr>
<td height="35" width="50" bgcolor="#FFCC33"> <center> 1x1 </center> </td> <td width="50" bgcolor="#336699"> <center> 1x2 </center> </td>
<td width="50" bgcolor="#FFCC33"> <center>1x3 </center> </td> </tr>
<tr>
<td height="35" width="50" bgcolor="#336699"> <center> 2x1 </center> </td> <td width="50" bgcolor="#FFCC33"> <center> 2x2 </center> </td>
<td width="50" bgcolor="#336699"> <center> 2x3 </center> </td> </tr>
</table>
………………..
Задание 14.
Линия задается тэгом <Hr> и не требует закрывающего тэга:
(1)<Hr align="right"> (center или left)
(2)<Hr width="30%"> (ширина линии в процентах/пикселях)
(3)<Hr size="6"> (толщина линии)
(4)<Hr NoShade> (отмена объемности)
(5)<Hr color="cc0000"> (цвет линии)
Добавьте после таблицы линию:
…………
</table>
<Hr align="left" width="30%" size="6" color="cc0000">
</body>
………….
Задание 15.
HTML допускает задание в документах списков двух типов:
Маркированный список
Каждый элемент этого списка браузер предваряет меткой в начале строки, а са-
ми строки смещает вправо.
183