Разработка клиентских приложений Web-сайтов

Разработка web-страниц с помощью HTML 4.01

Показывать лекцию целиком

Презентацию к данной лекции Вы можете скачать здесь.

Основным инструментом в рамках данного курса является MS Visual Web Developer Express Edition 2008 (MS Visual Studio 2008). В качестве браузера используется MS Internet Explorer 8. На этой лекции мы вспомним часто встречающиеся синтаксические конструкции HTML. Предполагается, что слушатели знакомы со средой разработки.

Итак,

Пример 1. Создание невидимого заголовка.

Запустите MS Visual Web Developer Express Edition 2008. Создайте web-сайт с помощью команд: $$\to$$ Add.

При этом мы попадем в окно кода и увидите следующее:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>

</body>
</html>

Мы воспользуемся предложенным шаблоном, добавляя в него нужные элементы. Введенный нами код мы будем обозначать жирным шрифтом.

Невидимые заголовки используются поисковыми сайтами, такими, как http://www.yandex.ru в качестве краткой аннотации содержимого web-страницы.

Между открытым и закрытым тэгами <title> напишем любую фразу, например, "Это - моя первая web-страничка!":

<title>Это - моя первая web-страничка!</title>

Запустим отладку нажав на кнопку Start Debugging. Мы увидим следующее сообщение:

(рис 3.1)

Нажмем OK.

Наша web-страничка запустится:

Результат:

(рис 3.2)

В следующем примере мы создадим видимые заголовки с помощью тэгов h1-h6. Самый крупный шрифт получится при использовании тэгов h1, самый мелкий - h6.

Пример 2. Создание видимых заголовков

Создадим новую web-страничку. Между открытым и закрытым тэгами ):

<body>
<h1>От жажды умираю над ручьем,</h1>
<h1>Смеюсь сквозь слезы и тружусь играя, </h1>
<h2>Куда бы ни пошел, везде мой дом,</h2>
<h2>Чужбина мне - страна моя родная.</h2>
<h3>Мне из людей всего понятней тот, </h3>
<h3>Кто лебедицу вороном зовет.</h3>
<h4>Я сомневаюсь в явном, верю чуду.</h4>
<h4>Нагой, как червь, пышнее всех господ,</h4>
<h5> Я всеми принят, изгнан отовсюду.</h5>
<h6>/Франсуа Вийон/</h6>
</body>

Результат:

(рис 3.3)

Работая с тестовыми редакторами, например, такими, как MS Word, вы наверное, обратили внимание на то, что документ состоит из абзацев. Текст в абзацах можно выравнивать по левому краю, по правому краю, по центру и по ширине. Продемонстрируем создание абзацев на следующем примере.

Пример 3. Абзацы

Создадим новую web-страницу и введите следующий код (3_3.htm):

<body>
<p align="center">Если бы тени предметов зависели не от величины сих последних, а имели бы свой произвольный рост, 
то, может быть, вскоре не осталось бы на всем земном шаре ни одного светлого места.</p>

<p align="left">Всякий необходимо причиняет пользу, употреблённый на своём месте.
 Напротив того: упражнения лучшего танцмейстера в химии неуместны; советы опытного астронома в танцах глупы. </p>

<p align="right">Если у тебя спрошено будет: что полезнее, солнце или месяц? - ответствуй:
месяц. Ибо солнце светит днем, когда и без того светло; а месяц - ночью. Но, с другой стороны: солнце лучше тем, 
что светит и греет; а месяц
только светит, и то лишь в лунную ночь!</p>

<p align="justify">Рассуждай токмо о том, о чём понятия твои тебе сие дозволяют.
 Так: не зная законов языка ирокезского, можешь ли ты делать такое суждение по сему предмету,
 которое не было бы неосновательно и глупо? </p>

<h4>/Козьма Прутков/</h4>
</body>

Результат:

(рис 3.4)

Далее, мы познакомимся с методикой вставки графических изображений на web-страницу. Изображения добавляются с помощью тэга img.

Пример 4. Вставка графических изображений

Выберем графическое изображение с расширением .jpg, поместим его в каталог нашего проекта, переименуем его, назвав егоlhc.jpg . Создадим новую web-страницу и введем следующий код (3_4.htm):

<body>
<img src="lhc.jpg" width="300" alt="Большой адронный коллайдер" />
</body>

Результат:

(рис 3.5)

С помощью таблиц можно создавать очень сложное форматирование web-страницы. В предлагаемом примере мы создадим таблицу, состоящую из одного столбца и пяти строк. В ячейках таблицы будет размещен текст.

Пример 5. Работа с таблицами

Создадим новую web-страницу и введем следующий код (3_5.htm):

<body>
<table border="3">
<tr>
    <td>За любовь к тебе пусть все осудят вокруг,</td>
</tr>
<tr>
    <td>Мне с невеждами спорить, поверь, недосуг.</td>
</tr>
<tr>
    <td>Лишь мужей исцеляет любовный напиток,</td>
</tr>
<tr>
    <td>А ханжам он приносит жестокий недуг.</td>
</tr>
</table>
<h4>/Амар Хайам/</h4>
</body>

Результат:

(рис 3.6)

В ячейках таблиц может размещаться что угодно, включая другие таблицы. В следующем примере мы разместим в ячейках таблицы уменьшенные изображения, связанные с изображениями в оригинальном размере. Иными словами, мы создадим небольшую картинную галерею.

Пример 6. Работа с таблицам и ссылками

Поместим в папку с вашим проектом двенадцать изображений с названиями от 1.jpg до 12.jpg (В нашем примере используются фотографии Большого адронного коллайдера). Создадим новую web-страничку и введите следующий код (3_6.htm):

<body>
<table border="0">
<tr>
<td><a href="1.jpg"><img src="1.jpg" width="250" alt="lhc" border="0" /></a></td>
<td><a href="2.jpg"><img src="2.jpg" width="250" alt="lhc" border="0" /></a></td>
<td><a href="3.jpg"><img src="3.jpg" width="250" alt="lhc" border="0" /></a></td>
<td><a href="4.jpg"><img src="4.jpg" width="250" alt="lhc" border="0" /></a></td>
</tr>

<tr>
<td><a href="5.jpg"><img src="5.jpg" width="250" alt="lhc" border="0" /></a></td>
<td><a href="6.jpg"><img src="6.jpg" width="250" alt="lhc" border="0" /></a></td>
<td><a href="7.jpg"><img src="7.jpg" width="250" alt="lhc" border="0" /></a></td>
<td><a href="8.jpg"><img src="8.jpg" width="250" alt="lhc" border="0" /></a></td>
</tr>

<tr>
<td><a href="9.jpg"><img src="9.jpg" width="250" alt="lhc" border="0" /></a></td>
<td><a href="10.jpg"><img src="10.jpg" width="250" alt="lhc" border="0" /></a></td>
<td><a href="11.jpg"><img src="11.jpg" width="250" alt="lhc" border="0" /></a></td>
<td><a href="12.jpg"><img src="12.jpg" width="250" alt="lhc" border="0" /></a></td>
</tr>

</table>

</body>

Результат:

(рис 3.7)

Отличительной особенностью web-страниц является наличие гиперссылок. В предлагаемом примере мы создадим шутливый тест. Тест будет состоять из трех web-страничек: question.htm, error.htm, correct.htm. Проанализируйте и усовершенствуйте данный тест.

Пример 7. Работа со ссылками

Создадим web-страничку question.htm

<body>
<h1>Сколько ног у страуса?</h1>
<h2><a href="error.htm">Одна нога</a></h2>
<h2><a href="correct.htm">Две ноги</a></h2>
<h2><a href="error.htm">Три ноги</a></h2>
</body>
(рис 3.8)

Создадим web-страничку error.htm

<body>
<h1>Подумай еще!</h1>
<h2><a href="question.htm">Назад!</a></h2>
</body>
(рис 3.9)

Создадим web-страничку correct.htm

<body>
<h1>Молодец!</h1>
</body>
(рис 3.10)

Краткие итоги

В ходе лекции мы вспомнили такие тэги, как невидимые заголовки, видимые заголовки, абзацы, изображения, таблицы и ссылки.

Набор для практики

Вопросы:

  • Назовите известные вам тэги
  • Чем отличается (X)HTML от HTML?
    •

    Упражнения:

  • Разработайте тест из десяти вопросов, в котором в качестве вариантов ответов используются графические изображения
  • Представьте, что вы - владелец туристического агентства. Разработайте рекламный web-сайт турбазы или гостиницы
    •
    Предыдущее занятие Следующее занятие
    Вернуться к учебному плану
    ^