Что понадобится для освоения HTML и создания web-страниц?
1. Любой браузер, т.е. программа для просмотра web-страниц (html-файлов), например браузер Internet Explorer.
2. Редактор текстовых файлов. Если на компьютере установлена система Windows, можно использовать редактор Блокнот (Notepad). А ещё есть специальные редакторы HTML-файлов. Широко используются два их типа:
1) редакторы типа WISIWIG ("что видишь, то и получишь"), например, Macromedia Dreamweaver, Microsoft Front Page. Работая с ними, сразу при разработке сайта будете видеть на экране web-страничку в том виде, какой она получится (в `режиме дизайна`);
2) редакторы HTML-текстов - HotDog, Ken Nesbitt Web Editor и др. При работе с ними пользователь видит только html-код и может изменять его записью тегов вручную, или вызывая команды меню для вставки нужных тегов.
Мы будем использовать редакторы Блокноти Macromedia Dreamweaver(он объединяет возможности 2х типов HTML-редакторов: позволяет работать и в режиме дизайна web-страницы, и в режиме html-кода).
II. Структура HTML-кода страницы
В html-странице выделяют заголовок (head) и тело (body) документа. Укрупнённая структура html-кода страницы такова (см. левый столбец таблицы):
| <html> | - корректно составленный html-код начинается с тега <html> |
| <head> </head> | - открывающийся тег <head> и закрывающий </head> формируют раздел заголовка. Между ними помещают теги названия документа ислужебнуюинформацию (описание документа) |
| <body> </body> | - основная часть html-файла – тело документа – находится между тегами <body>...</body> Между ними размещают те данные, что отображаются на web-странице в окне браузера |
| </html> | - заканчивается html-код страницы закрывающимся тегом </html> |
Итак, в заголовке html-страницы располагают служебные сведения о самой странице, многие из них не влияют на отображение web-страницы. Зато все данные, помещенные в тело страницы, выводятся на экран.
III. HTML-теги и атрибуты
ЗАДАНИЕ. Создадим простейшую web-страницу.
1. Запустите текстовый редактор Блокнот (Пуск /Программы /Стандартные /Блокнот) и введите следующий документ:
| <html> <head> <title>Пример 1</title> </head> <body> <p>Привет! Моя 1 страничка</p> </body> </html> |
2. Сохраните этот документ как web-страницу под именем 1.htm
Перед сохранением убедитесь, что сброшен флажок ô Скрывать расширения для зарегистрированных типов файлов (Пуск /Настройка /Панель управления /Свойства папки /Вид). Иначе Блокнот может автоматически добавить в конец имени файла расширение .txt (а не .html).
4. Откройте этот файл из программы Проводник (или из Internet Explorer).
5. Посмотрите, как отображается этот простой html-документ (web-страница):
Где отображается содержимое элемента <title>?
Где содержимое элемента </body>?
Как отображаются фразы "Привет" и "Моя 1 страничка", введенные в 2х отдельных строках? Почему? (потому что html-язык игнорирует нажатие Enter, а также нескольких пробелов при вводе текста документа).
Проверьте, что происходит при уменьшении ширины окна.
ВЫВОД: из примера видно - информация об оформлении документа задаётся метками, заключенными в знаки `<` и `>`. Такие метки называются тэги (англ. tag). Так, в примере выше тег <p>…</p> определяет отдельный абзац.
ЗАДАНИЕ. Использование тэгов с атрибутами.
1.Откройте в Блокноте файл 1.html. Добавим к тегам абзаца <p>..</p> атрибут align (задаёт тип выравнивания абзаца). Измените тело документа так:
| <html> <head> <title>Пример 2</title> </head> <body> <p>Абзац можно выравнивать влево,</p> <p align=center>можно по центру</p> <p align=right>или по правому краю.</p> </body> </html> |
2. Сохраните документ (Файл /Сохранить как) под именем выравнивание.htm
3. Запустите Internet Explorer и откройте там файл выравнивание.htm.
Посмотрите – как расположены абзацы на странице?
ВЫВОД: многие тэги кроме имени могут содержать атрибуты, они уточняют действие тэга. В примере 2 для тэга <p> использован атрибут align. Причем рядом в кавычках задают значения атрибута (например, "center"); именно они определяют особенности выполнения тегов.
Правила указания атрибутов:
- значение атрибута указывается в кавычках;
- атрибуты указываются лишь в открывающем теге;
- в составе тега может присутствовать несколько атрибутов.
Правила указания тэгов:
· большинство тегов парные, т.е. на каждую открывающийся тэг вида <tag> есть закрывающийся тэг с тем же именем, но с добавлением "/", т.е. </tag>
· при создании html-кода используйте в именах тегов только маленькими буквами (согласно спецификации XHTML 1.0).
· в имени тега пробелы недопустимы, также пробелы в значении атрибута тэга могут привести к ошибке. Но пробелы используют, чтобы отделить первый атрибут от имени тега, а также для разделения атрибутов.
· придерживайтесь требуемой структуры HTML-документа. Задавайте основные теги в правильном порядке и строгой иерархии.
Обязательные тэги
| <html>..</html> | Эта пара тэгов открывает и завершает html-документ |
| <head> … </head> | Эта пара тэгов указывает на начало и конец заголовка документа. В этот раздел, кроме названия документа (оно задаётся тэгами <title>), может входить много служебной информации. |
| <title> ... </title> | Все, что между этими тэгами, толкуется браузером как название документа и отображается в заголовке окна браузера. |
| <body> … </body> | Эта пара тегов указывает на начало и конец тела (содержания) html-документа, всё отображается на web-странице |
| <p> ... </p> | Все, что между этими тэгами, воспринимается как один абзац |
| <H1>...</H1> … <H6>...</H6> | Тэги вида <Hi> (где i - цифра от 1 до 6) описывают заголовки 6 разных уровней. Заголовок 1го уровня - самый крупный, 6го уровня - самый мелкий. |
Тэги <p> и <Hi> могут содержать атрибут align (означает "выровнять") с одним из значений: "left" – выравнивание абзаца по левому краю,"right" - по правому краю, "center" – по центру, "justify" – по ширине.
Непарные тэги.Есть непарный тэг <br>. Он используется, если нужно перейти на новую строку, не начиная нового абзаца. Пример:
<p> Это две строчки <br> одного абзаца</p>
В итоге на web-странице это предложение расположится так:
Это две строчки
одного абзаца
Горизонтальные линиивставляет тэг <HR>. Тэг имеет атрибуты:
size (задаёт толщину линии в пикс.), width (задаёт ширину линии в % от ширины экрана), align (задаёт выравнивание, имеет значения center, left или right), noshade – для создания черной полосы без тени.
ЗАДАНИЕ. Создайте коллекцию горизонтальных линий.
Откройте документ 1.htm в Блокноте. Между тегами <body>..</body> введите:
| <html> <head> <title>Пример 3</title> </head> <body> <H1>Коллекция горизонтальных линий</H1> <HR size=2 width=100%> <br> <HR size=4 width=50%> <br> <HR size=8 width=25%> <br> <HR size=16 width=12%> <br> </body> </html> |
Сохраните документ под именем линии.htm.
Запустите Internet Explorer и откройте там файл линии.htm