- •Лабораторная работа № 1 ВвЕдение в нtml Предисловие
- •Подготовительные операции.
- •Бегущая строка на html-странице
- •Заголовки в html-страницах
- •Горизонтальная линия
- •Изменение общего дизайна html-страницы
- •Форматирование абзацев
- •Вставка изображений
- •Таблицы
- •Гиперссылки
- •Приложение 1. Название и коды цветов
Лабораторная работа № 1 ВвЕдение в нtml Предисловие
Язык html - язык публикаций во Всемирной паутинеWWWглобальной сетиInternet. Создаваемые с помощью этого языка web-страницы или web-сайты (наборы web-страниц одного автора) могут быть просмотрены на любом компьютере, подключенном к Internet, независимо от аппаратного и программного обеспечения этого компьютера.
Web-страницы просматриваются с помощью программ браузеров, которыми оснащаются компьютеры, подключаемые к Internet. К наиболее распространенным браузерам относятся браузер Internet Explorer, разработанный фирмой Microsoft, и браузер Netscape Navigator фирмы Netscape.
Язык html включает в себя определенный набор элементов. Элементы заключаются в угловые скобки-теги. Различают стартовые <элемент> и конечные </элемент> теги. У конечного тега перед элементом в угловых скобках помещается наклонная черта. Теги определяют границы действия элементов и отделяют элементы друг от друга.
Внутри стартового тега помещают также различные атрибуты, указывающие определенные параметры или свойства для указанного элемента. Символьные значения атрибутов обычно заключают в прямые кавычки. Атрибуты отделяют друг от друга пробелами. Некоторые элементы имеют только стартовый тег.
Любая web страница начинается со стартового тега <html> и заканчивается конечным тегом</html>.
Web-страница, или html-документ, состоят из двух частей - заголовочной части и тела документа.
Область заголовка документа располагается между стартовым тегом <head> и конечным тегом </head>.
Тело документа размещается между стартовым тегом <body>и конечным тегом </body>. Итак, общая структура html-документа имеет вид:
<html>
<head>
<title>Название документа</title>
<head>
<body>
Тело документа
</body>
</html>
Элемент <title>…</title> в заголовочной части используется для размещения заголовка web-страницы. Строка текста, расположенная внутри, отображается не в документе, а в строке заголовка браузера.
Файл web-страницы можно создать следующими способами.
Если на вашем компьютере установлен текстовый процессор Word 97 или Word2003, то откройте эту программу и сразу же задайте команду «Сохранить как» в меню «Файл». В открывшемся диалоговом окне «Сохранение документа» в поле ввода «Тип файла» нужно выбрать значение «Документ html». После щелчка по кнопке «Сохранить»» будет создан файл в указанную в поле ввода «Папка» папку и под тем именем, которое будет указано в поле ввода «Имя файла».
Щелкните правой кнопкой мыши на свободном месте рабочего стола. В появившемся контекстном меню выберите команду «Документ HTML».
Щелкните правой кнопкой мыши на свободном месте рабочего стола. В появившемся контекстном меню (при отсутствии команды «Документ HTML») выбирается команда «Текстовый документ». На рабочем столе появится значок файла текстового редактора «Блокнот». Выполните на этом значке щелчок правой кнопкой мыши. В открывшемся контекстном меню выберите команду «Переименовать». Затем выведите с клавиатуры имя файла с расширением имени html и нажмите клавишу Enter. Появится диалоговое окно «Переименование» с предостережением: «После смены расширения имени файла этот файл может оказаться недоступным. Изменить расширение?». Щелкните кнопку «Да» в этом диалоговом окне. Обратите внимание на изменение вида значка у созданного файла - это уже файл html-страницы.
Для открытия созданного файла web-страницы в браузере выполните двойной щелчок мышью на значке этого файла. Вполне естественно, что при этом окно документа браузера будет пустым - появится только заголовок открытого файла в строке заголовка.
При создании web-страницы мы будем пользоваться, в основном, только двумя командами браузера - командами «Источник» и «Обновить». Обе команды задаются из меню «Вид».
При задании команды «Источник» откроется окно редактора web-страницы с исходным текстом html документа.
Если вы открыли пустой файл, созданный с помощью редактора Word, то в режиме «Источник» в окне редактора вы увидите следующую информацию:
<HTML>
<HEAD>
<META HTTP-EQUIV= “Content - Type” CONTENT= “text/html;
charset=windows-1251”>
<META NAME= “Generator” CONTENT= “Microsoft Word 97”>
</HEAD>
<BODY>
<P ALIGN= “JUSTIFY”></P></BODY>
</HTML>
В данном случае Word уже практически заполнил за вас заголовочную часть web-страницы. Пока не вчитывайтесь в представленную на экране информацию. В тегах <meta> содержится некоторая служебная информация (указание названия приложения, с помощью которого был создан файл, описание типа и характеристик web-страницы, ее краткого описания содержания и т.д.). Вам остается заполнить только тело документа после уже введенного стартового тега <body>. Вполне естественно, что вам не потребуется ввод и конечных тегов </body> и </html>, поскольку они также уже введены.
По окончании ввода html-документа в окне редактора задайте команду «Сохранить» из меню «Файл». Затем окно редактора закройте командой «Выход» из меню «Файл». Для просмотра введенной html-страницы в окне браузера введите команду «Обновить» из меню «Вид».
Если вы создали пустой файл html-документа вторым способом - с помощью команды «Документ HTML» из контекстного меню, то при открытии этого файла в режиме браузера «Источник» в окне редактора будут введены только стартовый и конечный теги элемента html.
Наконец, если создан пустой файл html документа третьим способом - способом смены расширения имени файла, то при открытии этого файла в браузере в режиме «Источник» окно редактора будет пусто. То есть в этом случае надо будет вводитьhtml-документ полностью, начиная со стартового тега <html>.
Данная лабораторная работа состоит из двух частей. В первой части представлен набор упражнений для отработки навыков составления html-документов. Во второй части представлены справочные данные по языку html.
Примечание.Язык HTML постоянно видоизменяется, появляются новые его версии. Видоизменяются и браузеры. Некоторые конструкции языка отдельными браузерами могут не поддерживаться. Поэтому все требует экспериментальной проверки.