Итак, на первых трех уроках Вы познакомились с Web-порталом, основными понятиями Web-технологий,
Теперь займемся изучением языка HTML и созданием первой собственной Web-страницы. Как вы уже знаете из первого урока, служба World Wide Web (WWW или Web) представляет собой миллионы связанных между собой документов ─ Web-страниц. Web-страница ─ это документ (например, текстовый), размеченный с помощью специальных элементов HTML ─ тегов, или html-тегов, языка. Такие страницы часто называют html-страницами. Они имеют расширение .html или .htm. Например: about.html или about.htm
Специальные программы ─ браузеры служат для интерпретации html-тегов и отображения содержимого Web-страниц. На экран html-теги не выводятся, они только указывают браузеру, как отображать содержимое документа.
Вы всегда можете посмотреть html-код любой страницы в браузере. Для этого в верхнем меню браузера Internet Explorer найдите пункт Вид | Просмотр HTML-кода.
Иными словами, в браузер встроен интерпретатор языка HTML. Интерпретаторы, встроенные в различные браузеры, работают неодинаково, и одна и та же html-страница может отображаться в них по-разному.
Что же такое HTML ─ Hyper Text Markup Language? Это язык гипертекстовой разметки, разработанный специально для создания Web-документов. Отметим два важных момента:
1)HTML не является языком программирования! В нем нет логических последовательностей. Это именно язык разметки документов (текста).
2) HTML определяет логическую структуру документа.
Разметка документа осуществляется с помощью тегов (англ. tag ─ отметка).
Теги html бывают двух типов ─ контейнерные и одиночные ─ и заключаются в угловые скобки <Имя_тега>
Контейнерные теги состоят из пары ─ открывающий и закрывающий тег. Перед именем закрывающего тега необходимо ставить косую черту "/" (прямой слэш). <Имя_тега> Содержимое, обрабатываемое данным тегом </Имя_тега>.
Одиночный тег состоит только из открывающего и не требует закрывающего.
1. Войдите в сеть под своим именем. Откройте свою папку, создайте новую под именем html.
2. Откройте простейший текстовый редактор, который позволяет писать "чистый" html-код: Пуск | Программы | Стандартные | Блокнот.
3. Создайте контейнерные и одиночные теги: в окне блокнота напишите:
4. <h1> Это моя первая Web-страница </h1> <hr>, где <h1> и </h1> ─ контейнерные теги (в данном случае текст между этих тегов браузер выведет крупным и жирным шрифтом), а <hr> ─ одиночный тег (браузер выведет горизонтальную линию после текста).
5. Сохраните свою первую web-страничку: выберите Файл | Сохранить как. В поле Папка выберите свою папку, выберите папку html, в поле Имя файла наберите my.html, нажмите Сохранить. Закройте Блокнот. Посмотрите, что получилось: откройте свою папку, откройте папку html, откройте my.html.
6. Создайте вложенный тэг: выберите Вид | Просмотр HTML-кода, вставьте в выражение контейнерные теги <i> </i>, у Вас должно получиться: <h1> Это моя <i> первая </i> Web-страница </h1> <hr>, нажмите Сохранить, сверните Блокнот, а в окне браузера нажмите Обновить. Слово первая ─ получилось курсивом, благодаря контейнерному тегу <i></i>. Следите за вложенностью тегов! Контейнерный тег, открытый первым, закрывают последним, тег, открытый вторым, закрывают вторым от конца, и т. д.
7. Разместите текст по центру: откройте Вид | Просмотр HTML-кода, отредактируйте текст, у Вас должно получиться, примерно так: <h1 align="center"> Это <i> первая </i> Web-страница <br> Гольцман Юли! </h1> <hr> Потренировались? Закройте все окна.
8. Теперь приступим к более серьезным вещам. А для начала общие понятия:
html-документ ─ это один большой контейнер, который начинается с тега <html> и заканчивается тегом </html>. Контейнер HTML или гипертекстовый документ состоит из двух других вложенных контейнеров:
<head> Заголовка документа </head>
<body> Тела документа </body>
9. Создайте HTML документ: откройте Блокнот и введите код:
<html>
<head>
<title>Первый HTML документ</title>
</head>
<body>
<h3>
Пример
простого документа Гольцман Юли </h3>
<hr>
Формы HTML-документов
<ul>
<li>Классическая
<li>Фреймовая
</ul>
<hr>
</body>
</html>
10. Сохраните документ: выберите Файл | Сохранить как, в поле Папка выберите свою папку, выберите папку html, в поле Имя файла наберите doc.html, нажмите Сохранить. Закройте Блокнот.
11. Посмотрите, что у Вас получилось: выберите свою папку, выберите папку html и откройте doc.html.
12. Найдите в окне браузера название страницы: Первый HTML документ
13. Отредактируйте цвет фона (bgcolor) и текста (text): откройте Вид | Просмотр HTML-кода, исправьте тэг <body>, у Вас должно получиться:
┘
<body bgcolor="#66ccff" text="#0000ff">
┘
14. Нажмите сохранить, сверните Блокнот, а в окне браузера нажмите Обновить. Получился голубой фон и синий текст? Если нет, возвращаемся на п.12.
15. Измените, размер заголовка и разместите его по центру:
┘
<h1 align="center">
Пример простого документа Гольцман Юли
</h1>
┘
16. Нажмите Сохранить. Обновите документ в браузере.
17. Измените цвет заголовка:
┘
<h1 align="center">
<font color=" #000099"> Пример простого документа Гольцман Юли </font>
</h1>
┘
18. Нажмите Сохранить. Обновите документ в браузере.
19. Создание ссылок с помощью тега <a href=■URL путь к файлу■> Ваш текст </a>. Создайте ссылку на первую страницу my.html., на свой сайт на www.narod.ru и на поисковик www.yahoo.com: откройте Блокнот и перед закрывающим тегом </body> вставьте следующий код:
┘
<a href=■my.html■> Web-страница </a> <br>
<a href=■www.narod.ru■> Web-сайт </a> <br>
<a href=■www.yahoo.com■> Yahoo! </a> <br>
┘
20. Сделайте текст внутри тегов ссылки полужирным с помощью тега <b> Ваш текст </b> и разными цветами: см. п.16. Сохраните, и обновите страницу в браузере.
21. Для вставки рисунка в HTML документ используется одиночный тэг <img>. Полное написание следующее: <img src=■путь к изображению■ width=■ширина■ height=■высота■ alt=■подпись к изображению■ border=■рамка■>. Зайдите в сетевую папку: Мой компьютер| Temp на PDC | doc_for_marketing | images, скопируйте любой рисунок в свою папку html. Откройте Блокнот и перед закрывающим тегом </body> вставьте следующий код, например Вы взяли рисунок flower.jpg:
┘
<img src=■flower.jpg■ width=■400■ height=■300■ alt=■Фиолетовый цветок■ border=■2■>
┘
22. Сохраните, и обновите страницу в браузере.
23. Выровняйте рисунок по правому краю: исправьте предыдущий код:
┘
<img src=■flower.jpg■ width=■400■ height=■300■ alt=■Фиолетовый цветок■ border=■2■ align="right">
┘
24. Сохраните, и обновите страницу в браузере. Закройте все окна.
25. Создание таблицы в html: Для описания таблиц используется тег <table>. Создание строки таблицы ─ тег <tr>. Тег <tr> (Таble Row, строка таблицы) создает строку таблицы. Весь текст, другие теги и атрибуты, которые требуется поместить в одну строку, должны размещаться между тегами <tr></tr>. Определение ячеек таблицы ─ тег <td>. Внутри строки таблицы обычно размещаются ячейки с данными. Каждая ячейка, содержащая текст или изображение, должна быть окружена тегами <td></td>. Число тегов <td></td> в строке определяет число ячеек. Создайте таблицу: перед закрывающим тегом </body> напишите код:
┘
<table width="200" height="100" border="1"
align="center" bgcolor="#FFFF80">
Пример таблицы "Я люблю"
<tr>
<td>1.</td>
<td>Помидоры</td>
</tr>
<tr>
<td>2.</td>
<td>Молоко</td>
</tr>
</table>
26. Сохраните, и обновите страницу в браузере. Закройте все окна.
27. Создание фреймов: фрейм ─ это рамка вокруг картинки, окошко или страница. Вводя тег <frame>, дизайнер НТМL-страницы разделяет экран браузера на части. В результате человек, просматривающий страницу, может изучать только одну ее часть, независимо от остального содержимого. Откройте Пуск | Программы| Стандартные | Блокнот и напишите код:
<frameset rows="100%,*" cols="50%,*">
<frame name="frame 1" src="my.html">
<frame name="frame 2" src="doc.html">
</frameset>
28. Сохраните файл см. п.9 под именем frame.html
29. Посмотрите, что у Вас получилось.