рефераты конспекты курсовые дипломные лекции шпоры
- Раздел Программирование
- /
- Вид работы: Лабораторные Работы
- /
- Тело документа размещается между стартовым тегом <body>и конечным тегом </body>. Итак, общая структура html-документа имеет вид
Реферат Курсовая Конспект
Тело документа размещается между стартовым тегом <body>и конечным тегом </body>. Итак, общая структура html-документа имеет вид
Тело документа размещается между стартовым тегом <body>и конечным тегом </body>. Итак, общая структура 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 или Word 2003, то откройте эту программу и сразу же задайте команду «Сохранить как» в меню «Файл». В открывшемся диалоговом окне «Сохранение документа» в поле ввода «Тип файла» нужно выбрать значение «Документ 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 постоянно видоизменяется, появляются новые его версии. Видоизменяются и браузеры. Некоторые конструкции языка отдельными браузерами могут не поддерживаться. Поэтому все требует экспериментальной проверки.
Подготовительные операции.
Создайте в папке «Диск С:» новую папку «web-страницы», в которой вы будете постепенно накапливать результаты экспериментов при выполнения представленных упражнений. Откройте папку «Мой компьютер». Откроите папку «Диск С:». Выполните на свободном месте в окне открытой папки «Диск С:» щелчок правой кнопкой мыши. В открывшемся контекстном меню выберите команду «Создать»», а в открывшемся подменю - команду «Папка». Введите с клавиатуры в поле ввода появившегося значка новой папки название папки «web-страницы» и нажмите клавишу Enter.
На рабочем столе и в папке «web-страницы» создайте графические файлы рисунка и фонового узора в формате .gif или .jpg.
Это, например, можно сделать так. Откройте редактор Word. Задайте в программном окне Word команду «Рисунок» из меню «Вставка», и в открывшемся подменю - команду «Из файла». В диалоговом окне «Вставка рисунка» выберите папку «Popular» (она находится в папке «Clipart»). В окне Popular выделите подсветкой один из представленных графических файлов (например, графический файл Agrce.wmf) и щелкните кнопку «Добавить». В итоге в окно документа Word вы вставите соответствующий рисунок. Сохраните теперь этот документ с вставленным рисунком в файле непосредственно на рабочем столе, задав тип файла «Документ HTML». Вы увидите, что наряду с созданным файлом в формате html редактор Word сформирует и графический файл вставленного рисунка в формате .gif присвоив ему имя image1. Выделите подсветкой значок этого файла и комбинацией клавиш Ctrl-C скопируйте этот файл в буфер обмена. Затем откройте созданную в предыдущем упражнении папку «web- страницы» и в окне этой папки задайте команду «Вставить»» из меню «Правка».
Точно такую же процедуру выполните и при создании графического файла для фонового узора. В окне Word задайте команду вставки рисунка из файла, но в данном случае укажите в диалоговом окне «Вставка рисунка» папку «windows’», а в ней - один из графических файлов фоновых уборов (например, файл «Орнамент.bmp»). И в этом случае, при сохранении документа в формате html, Word преобразует вставленный графический файл из формата .bmp в формат .gif, присвоив имя файлу image2. Скопируйте и этот файл в папку «web- страницы».
Примечание. Если на нашем компьютере установлен один из графических редакторов, поддерживающих формат .gif (например, PhotoFinish 3.0), то можно поступить еще проще - открыть в окне этого редактора рисунок или фоновый узор в одном формате, а затем его же сохранить в файле, но уже в формате jpg.
Бегущая строка на html-странице
Для создания бегущей строки щелкните правой кнопкой мыши на свободном месте рабочего стола, выберите в открывшемся контекстном меню команду… <html> <head>Заголовки в html-страницах
Создайте html-страницу следующего вида: <html> <head>Горизонтальная линия
Вставьте в текст html-документа «Заголовки» после стартового тега body элемент <hr>. Сохраните сделанное изменение в файле и просмотрите… Добавьте в элемент hr атрибут color= “red” для преобразования этой… Измените толщину нижней горизонтальной линии, включив в состав нижнего тега hr атрибут size=50.Изменение общего дизайна html-страницы
Оформите фон страницы синим цветом, а цвет букв в строках заголовков оформите желтым цветом. Для этого в состав стартового тега body включите… <body bgcolor= “#0000ff” text= “#ffff00”> Проведите соответствующие эксперименты с html-страницей «Заголовки».Форматирование абзацев
Создайте новый файл html-страницы. В этот файл введите отрывок из рассказа М.Зощенко «Собачий нюх»: <html> <head>Вставка изображений
Вставьте в html-документ «Абзацы» графический файл Image1.gif из папки «Internet». Для этого перед конечным тегом </body> этого документа вставьте строку
<img src= “file:c:Internet|Image.gif”>.
Списки
Маркированные списки. Создайте новый html-файл следующего содержания:
<html>
<head>
<title>СПИСКИ</title>
</head>
<body>
<h2>МАРКИРОВАННЫЙ СПИСОК</h2>
<h3>На нашем огороде росли:</h3>
<ul>
<li>огурцы;
<li>помидоры;
<li>укроп.
</ul>
</body>
</html>
Откройте этот документ в окне браузера.
Нумерованные списки. В режиме «Источник» дополните предыдущий html- документ фрагментом:
<h2>Нумерованный список</h2>
<h3>Мои ближайшие планы:</h3>
<ol type= “1”>
<li>Написать статью в журнал;
<li>Посетить художественный музей;
<li>Подготовить к изданию сборник упражнений.
</ol>
Этот фрагмент должен находиться между конечными тегами </ul> и <body>. Просмотрите обновленный вариант документа.
Проведите эксперименты с нумерованным списком, задав разные способы нумерации при помощи атрибута type: type=“i” (нумерация римскими строчными символами), tуре=“I” (нумерация римскими прописными символами), type=“a” (нумерация латинскими строчными буквами) и type=“А” (нумерация латинскими прописными буквами).
Вложенные списки. Дополните html-документ еще одним фрагментом:
<h2>Вложенные списки</h2>
<h3>Мои планы на 2001 год:</h3>
<ul>
<li>В первом полугодии:
<ol type= “I”>
<li> Прочитать рассказ И.С. Тургенева «Му-Му»;
<li>Сходить с женой на рынок.
</ol>
<li>Во втором полугодии:
<ol type= “I”>
<li>Прочитать поэму Н.А. Некрасова «Мороз – красный нос»;
<li>Сходить в кинотеатр.
</ol>
<ul>
Таблицы
Создайте еще один файл под общим названием «Таблицы.html». Создайте в этом файле следующую html- страницу: <html> <head>Гиперссылки
Создайте новый файл html-документа следующего вида:
<html>
<head>
<title>Лабораторная работа по WWW</title>
</head>
<body>
<h1> ЛАБОРАТОРНАЯ РАБОТА</h1>
<h2><u>СОДЕРЖАНИЕ:</u></h2>
<A href= “file://c:windowsРабочий столБегущая строка.html”>
Бегущая строка</A>
<A href= “file://c:windowsРабочий столЗаголовки.html”>
Заголовки </A>
<A href= “file://c:windowsРабочий столабзац.html”>
Абзац</A>
<A href= “file://c:windowsРабочий столсписки.html”>
Списки</A>
<A href= “file://c:windowsРабочий столтаблицы.html”>
Таблицы</A>
</body>
</html>
Откройте этот документ в браузере. Выполните переход к выбранному разделу щелчком мышью по соответствующему разделу (пусть это будет раздел «Бегущая строка»).
Видоизмените html-страницу:
<html>
<head>
<title> ЛАБОРАТОРНАЯ РАБОТА ПО WWW</title>
</head>
<body>
<h1> ЛАБОРАТОРНАЯ РАБОТА </h1>
<h2><u>СОДЕРЖАНИЕ:</u></h2>
<p>Перейти к разделу
<A href= “file://c:windowsРабочий столБегущая строка.html”>
Бегущая строка</A>
<p>Перейти к разделу
<A href= “file://c:windowsРабочий столЗаголовки.html”>
Заголовки </A>
<p>Перейти к разделу
<A href= “file://c:windowsРабочий столабзац.html”>
Абзац</A>
<p>Перейти к разделу
<A href= “file://c:windowsРабочий столсписки.html”>
Списки</A>
<p>Перейти к разделу
<A href= “file://c:windowsРабочий столтаблицы.html”>
Таблицы</A>
</body>
</html>
В режиме «Источник» добавьте в текст html-страницы «Бегущая строка» перед конечным тегом </body> следующие строки:
<A href= “file://c:windowsРабочий столЛабораторная работа.html”>
<img src= “file://c:windowsРабочий столImage2.gif”></A>
В обновленной странице щелкните мышью на появившемся рисунке, и вы опять вернетесь на страницу с оглавлением работы.
Аналогичным образом создайте рисунки для гиперссылок и в других разделах выпускной работы для возвращения в оглавление из любого раздела.
В режиме источника в html-странице «Таблицы» сразу после стартового тега <body> вставьте метку переходи вида:
<a name= “Метка1”></a>
Перед конечным тегом </body> той же страницы введите следующую конструкцию для перехода к установленной метке:
<a href= “Метка1”>Переход в начало страницы</a>
Создайте на html-странице «Таблицы» описанным выше способом несколько меток (“”Метка2", «Метка3» и так далее) для организации переходов внутри этого документа. Сам переход к различным частям документа оформите в виде следующего «оглавления»:
<p>Переход к<a href= “#Метка2”>разделу А</a></p>
<p>Переход к<a href= “#Метка3”>разделу Б</a></p>,
где «Раздел А» и «Раздел Б» - названия соответствующий разделов страницы.
Карты
На рабочем столе Windows находится созданный заранее графический файл Fish.jpg с изображением золотой рыбки. У этой рыбки глаз имеет координаты 269, 119. Сделаем глаз этой рыбки (круг радиуса R=20 с координатами центра 269, 119) в качестве гиперссылки для перехода к файлу та6лицы.html.
Откройте html-страницу с оглавлением выпускной работы (выпускная работа.html) и в режиме источника дополните эту страницу следующим фрагментом:
<map name= “karta”>
<area alt= “круг” shape= “circle”
coords= “269,119,20” href= “file://c:windowsРабочий столтаблицы.html”>
</map>
<img src= “file://c:windowsРабочий столFish.jpg” usemap= “#karta” alt= “karta”>
Сохраните сделанные изменения в файле и просмотрите обновленный вид html-страницы. Подведите указатель мыши к глазу рыбки, и вы увидите, что указатель мыши превратится в указующий перст, а в строке состояния браузера полный путь для перехода. Щелкните мышью по глазу рыбки, и вы перейдете к разделу «Таблицы». Для возвращения в оглавление щелкните кнопку «Назад» на панели инструментов браузера.
Воспользуемся другими частями изображения рыбки для организации переходов к различным разделам лабораторной работы. Так, например, область нижнего плавничка (прямоугольник с координатами 163,121,220,155) можно использовать для перехода к файлу списки.html, а хвост рыбки, описываемый многоугольником с координатами вершин 23,44,146,37,174,63,174,89,96,124,31,53, - для перехода к файлу абзац.html. В итоге, фрагмент страницы с переходами к трем разделам выпускной работы будет иметь вид:
<map name= “karta”>
<area alt= “круг” shape= “circle”
coords= “269,119,20” href= “file://c:windowsРабочий столтаблицы.html”>
<area alt= “прямоугольник” shape= “rect”
coords= “163,121,220,155” href= “file://c:windowsРабочий столсписки.html”>
<area alt= “многоугольник” shape= “poly”
coords= “23,44,146,37,174,89,96,124,31,53” href= “file://c:windowsРабочий столабзац.html”>
</map>
<img src= “file://c:windowsРабочий столFish.jpg” usemap= “#karta” alt= “karta”>
Проведите соответствующие эксперименты с обновленным вариантом html-страницы.
Использование карты дня организация переходов внутри страницы. Вставьте сразу же после стартового тега <body> метку для перехода:
<a name= “verh”></a>
В фрагменте:
<area alt= “прямоугольник” shape= “rect”
coords= “163,121,220,155” href= “file://c:windowsРабочий столсписки.html”>
затем в атрибуте href измените ссылку - не на файл, а на метку. Поэкспериментируйте и с этим вариантом html-страницы.
Формы
Создание полей ввода. Создайте новый файл html-страницы следующего вида:
<html>
<head>
<title>Формы</title>
</head>
<body>
<h2>Формы</h2>
<h3>Поля ввода</h3>
<p><b><u>Фамилия</u></b>
<input type= “text”>
</body>
</html>
Откройте созданный файл в окне браузера.
Модернизируйте созданную html-страницу, включив в тег input атрибут value=”Фамилия И.О.” Просмотрите обновленный вариант страницы.
Флажки. Дополните созданную в предыдущем упражнении страницу «Формы» следующим фрагментом:
<hr>
<h3>Флажки</h3>
<p><b><u>Пол:<input type= “checkbox”> «Мужской»
<input type= “checkbox”> «Женский»
и проведите эксперименты с дополненной страницей.
Переключатели. Добавьте в html-страницу «Формы» следующий фрагмент:
<hr>
<h3>Переключатели</h3>
<p><b><u>Варианты действий:</u></b>
<p><input type= “radio” name= “s001”>
<input type= “text” value= “Сходить в театр”>
<p><input type= “radio” name= “s001”>
<input type= “text” value= “Сходить на рынок”>
<p><input type= “radio” name= “s001”>
<input type= “text” value= “Переписать лекцию”>
<p><input type= “radio” name= “s001” checked>
<input type= “text” value= “Лечь спать”>
Просмотрите обновленный вариант страницы.
Создание отдельных кнопок. Добавьте на страницу «Формы» фрагмент для построения трех типов кнопок - кнопки с рисунком, кнопки Enter для подтверждения ввода информации в форму и кнопки Reset для отмены ввода данных в форму.
<hr>
<h3>Отдельные кнопки</h3>
<input type= “image” src= “file://c:windowsРабочий столImage3.gif”>
<hr>
<input type= “submit” value= “Enter”>
<input type= “reset”>
Создание элемента «Список”. Дополните страницу «Формы» следующим фрагментом:
<hr>
<h3>Списки</h3>
<h3>Ваша профессия:
<select>
<option value=a>Инженер
<option value=b>Учитель
<option value=c>Врач
<option value=d>Ученый
</select></h3>
Создание областей для ввода текста. Дополните страницу «Формы» следующим фрагментом:
<hr>
<h2>Область ввода</h2>
<h3>Примечание:
<textarea name= “text001” rows=5 cols=30>
Область для ввода текста.
</textarea>
</h3>
Здесь экономится место на странице за счет того, что сколь угодно большой текст будет прокручиваться в окне фиксированного размера.
Фреймы
Деление области просмотра по вертикали пополам. Создайте новый файл с именем Фреймы.html следующего содержания:
<html>
<head>
<title>Фреймы</title>
</head>
<body>
<frameset cols=50%,50%>
<frame src= “file://c:windowsРабочий столФормы.html”>
<frame src= “file://c:windowsРабочий столТаблицы.html”>
</frameset>
</body></html>
Деление области просмотра по горизонтали. Видоизмените файл Фреймы.html к следующему виду:
<html>
<head>
<title>Фреймы</title>
</head>
<body>
<frameset rows=150,30%,*>
<frame src= “file://c:windowsРабочий столЛабораторная работа.html”>
<frame src= “file://c:windowsРабочий столФормы.html”>
<frame src= “file://c:windowsРабочий столТаблицы.html”>
</firameset>
</body></html>
Примечание. В данном примере для верхней горизонтальной области отведено 150 пикселов, для средней- тридцать процентов, а для нижней - все, что останется.
Деление области просмотра и по горизонтали, и по вертикали. Еще раз видоизмените файл Фреймы.html:
<html>
<head>
<title>Фреймы</title>
</head>
<body bgcolor= “white”>
<center><font size=6>ФРЕЙМЫ</font></center>
<hr color= “blue”>
<frameset rows=20%,60%,20%>
<frame src= “file://c:windowsРабочий столБегущая строка.html” noresize>
<frame src= “file://c:windowsРабочий столТаблицы.html”>
<frame src= “file://c:windowsРабочий столЗаголовки.html”scrolling= “yes”>
</frameset>
<frame src= “file://c:windowsРабочий столАбзац.html”>
</frameset>
</body>
</html>
Приложение 1. Название и коды цветов
– Конец работы –
Используемые теги: тело, документа, размещается, между, стартовым, body, конечным, body, Итак, Общая, структура, HTML-документа, имеет, вид0.167
Если Вам нужно дополнительный материал на эту тему, или Вы не нашли то, что искали, рекомендуем воспользоваться поиском по нашей базе работ: Тело документа размещается между стартовым тегом <body>и конечным тегом </body>. Итак, общая структура html-документа имеет вид
Что будем делать с полученным материалом:
Если этот материал оказался полезным для Вас, Вы можете сохранить его на свою страничку в социальных сетях:
| Твитнуть |
Хотите получать на электронную почту самые свежие новости?
Подпишитесь на Нашу рассылку
Реклама
Информация в виде рефератов, конспектов, лекций, курсовых и дипломных работ имеют своего автора, которому принадлежат права. Поэтому, прежде чем использовать какую либо информацию с этого сайта, убедитесь, что этим Вы не нарушаете чье либо право.
© copyright 1999 - 2024 allRefs.net. Все права защищены. Страница сгенерирована за: 0.24 сек.
Новости и инфо для студентов