Лабораторные работы по HTML.

Лабораторная работа № 1

Задание 1. Создание простейших файлов HTML

Чтобы создать свой файл HTML, сделайте следующее:

1. Создайте папку HTML, в которой мы будем сохранять созданные Web-страницы.
2. Запустите стандартную программу Блокнот (Notepad).
3. Наберите в окне редактора простейший текст файла HTML:

Расписание занятий на вторник

4. Сохраните файл под именем RASP.HTM.
5. Для просмотра созданной Web-страницы загрузите броузер Microsoft Internet Explorer.
6. Откройте в меню броузера Файл (File), Открыть (Open), Просмотр(Обзор - Browse) и найдите в папке KURS файл RASP.HTM и загрузите его. Убедитесь, что название Web-страницы (Учебный файл HTML) отразилось в верхней статусной строке броузера.

Задание 2. Управление расположением текста на экране

Информация.

При отображении HTML-документов броузеры автоматически размещают текст на экране, не принимая во внимание встречающиеся в файле переводы строк и идущие подряд пробелов.

1. При необходимости выполните п.п. 5-6 задания 1.
2. Откройте первоисточник Web-страницы – в меню броузера Вид (View), Источник (В виде HTML) откроется окно со стандартной программой Блокнот (Notepad), в котором ваша Web-страница представлена в командах HTML.
3. Внесите изменения в текст файла HTML, расположив слова "Расписание", "занятий", "на вторник" на разных строках:

Расписание

занятий

на вторник

4. Сохраните внесенные изменения в файле RASP.HTM, с помощью команд Файл (File), Сохранить (Save). Закройте программу Блокнот (Notepad).
5. Просмотрите с помощью  броузера Microsoft Internet Explorer новую полученную Web-страницу используя  клавишу F5 или с помощью команд Вид(View), Обновить (Refresh). Изменилось ли изображение текста на экране?

Примечание

В дальнейшем после внесения изменений в Web-страницу всегда выполняйте п.п.4-5.

Задание 3. Тэги перевода строки и абзаца

Информация.

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

Тэг перевода строки
отделяет строку от последующего текста или графики. Тэг абзаца

тоже отделяет строку, но еще добавляет пустую строку, которая зрительно выделяет абзаца. Оба тэга являются одноэлементными.

1. Внесите изменения в текст файла HTML:

Расписание

занятий

на вторник

2. 4. Сохраните внесенные изменения в файле RASP.HTM.

6. Просмотрите с помощью  броузера Microsoft Internet Explorer новую полученную Web-страницу. Как изменилось изображение текста на экране?

Задание 4. Выделение фрагментов текста

Информация.

Тэги выделения фрагментов текста позволяют управлять отображением отдельных символов и слов. Существует три тэга выделения фрагментов текста:

… для выделения полужирным,

… для выделения курсивом,

… для выделения подчеркиванием.

1. Внесите изменения в файл RASP.HTM:

 Расписание занятий  на вторник

2. Посмотрите новую полученную Web-страницу.

Возможно использование комбинированных шрифтов:

Расписание  занятий на вторник

Но при этом необходимо помнить следующее правило записи комбинированных тэгов:

Задание 5. Использование стилей заголовка

Информация.

Существует два способа управления размером текста, изображаемого броузером:

• использование стилей заголовка,
• задание размера основного документа или размера текущего шрифта.

Используется шесть тэгов заголовков (от Н1 до Н6). Каждому тэгу соответствует конкретный стиль, заданный в параметрах настройки броузера. Стиль Н1 – самый крупный.

1. Внесите изменения в файл RASP.HTM:

 Расписание

2. Посмотрите новую полученную Web-страницу.

Задание 5. Задание размера текущего шрифта.

Информация.

Тэг шрифта позволяет задавать размер текущего шрифта в отдельных местах текста. Диапазон установки текущего шрифта – от 1 до 7.

1. Внесите изменения в файл RASP.HTM:

 Расписание  

занятий на вторник

2. Самостоятельно измените размер шрифта для текста "занятия на вторник", используя тэг .
3. Измените текст HTML-документа, используя тэги выделения фрагментов текста и тэги перевода строки и абзаца.

Задание 6. Гарнитура и цвет шрифта

Информация.

Тэг предоставляет возможности управления размером, начертанием и цветом текста. Изменение гарнитуры шрифта выполняется простым добавлением к тэгу атрибута FACE. Например, для изображения текста шрифтом Arial необходимо записать .

Для изменения цвета шрифта в тэге можно использовать атрибут COLOR="X".

Вместо Х надо подставить либо название цвета (в кавычках), либо его шестнадцатеричное значение. При задании цвета шестнадцатеричным числом можно представить этот цвет разложенным на три составляющие:

красную(R), зеленую (G), синюю (B), каждая из которых имеет значение от 0 до FF.

Примеры записи цвета в формате RGB приведены в таблице:

Таблица 1

Цвет		RRGGBB	Цвет		RRGGBB
black	черный	000000	purple	фиолетовый	FF00FF
white	белый	FFFFFF	yellow	желтый	FFFF00
red	красный	FF0000	brown	коричневый	996633
green	зеленый	00FF00	orange	оранжевый	FF8000
azure	бирюзовый	00FFFF	violet	лиловый	8000FF
blue	синий	0000FF	gray	серый	A0A0A0

1. Внесите изменения в файл RASP.HTM:

  Расписание  >

занятий на вторник

2. Самостоятельно измените размер, цвет, гарнитуру, стиль текста документа.

---

Задание 7. Выравнивание текста по горизонтали

Информация.

С помощью тэгов HTML можно управлять горизонтальным выравниванием текста. Если не оговаривать способ выравнивания, все элементы в документе будут выравниваться по левому краю и иметь неровное правое поле (см. Рис.2).

Современные броузеры для выравнивания текста используется атрибут ALIGN=, который встраивается в теги абзаца или заголовка.

ALIGN=CENTER	Выравнивание по центру
ALIGN=RIGHT	Выравнивание по правому краю
ALIGN=LEFT	Выравнивание по левому краю

1. Внесите изменения в файл RASP.HTM:

 Расписание >

занятий на вторник

Задание 8. Задание цвета фона и текста

Информация.

При изображении фона, текста броузеры используют цвета, установленные по умолчанию, - они заданы параметрами настройки броузера. Эти цвета устанавливаются в начале файла HTML в тэге . Запись цвета аналогична цвету шрифта (см. таблицу 1 п.12 ). Атрибут BGCOLOR= задает цвет фона страницы, TEXT= определяет цвет текста для всей страницы, LINK= и VLINK= определяют цвета соответственно непросмотренных и просмотренных ссылок (последние два параметра будут рассмотрены позже).

1. Внесите изменения в файл RASP.HTM:

BGCOLOR="#FFFFCC" TEXT="#330066">

 Расписание >

занятий на вторник

Задание 9.

1. Проведите экспериментальную работу с созданным документом. Меняя размеры окна, посмотрите, как броузер показывает текст с принудительным разрывом строк. Что происходит, когда окно уменьшается настолько, что в нем не может поместиться целиком даже одно слово?
2. Самостоятельно создайте собственный HTML-документ. Пусть это будет небольшой рассказ о себе и своих увлечениях.

Лабораторная работа № 2

Задание 1. Размещение графики на Web-странице

Информация.

Тэг  позволяет вставить изображение в документ. Изображение появится в том месте документа, в котором записан этот тэг. Команда записывается с одиночным тэгом, т.е. закрывающий тэг не применяется.
Графика в Web, как правило, распространяется в трех форматах: GIF, JPG, PNG. Для выполнения упражнения считаем, что графический файл Wagon.gif хранится в рабочем каталоге HTML, где находится и наша Web-страница.

1. Внесите изменения в файл RASP.HTM:

Расписание

занятий на вторник

Тэг  имеет немало атрибутов (см. таблицу 2), которые можно задавать дополнительно. Они могут располагаться где угодно в тэге после кода IMG.

Атрибуты изображения

Таблица 2

Атрибут	Формат	Описание
ALT		Если броузер не воспринимает изображение, вместо него появляется заменяющий текст.
BORDER		Задает толщину рамки вокруг изображения. Измеряется в пикселах.
ALIGN		Выравнивает изображение относительно текста: по верхней части изображения – TOP, по нижней – BOTTOM, по средней – MIDDLE.
HEIGHT		Задает вертикальный размер изображения внутри окна броузера.
WIDTH		Задает горизонтальный размер изображения внутри окна броузера.
VSPACE		Добавляет верхнее и нижнее пустые поля.
HSPACE		Добавляет левое и правое пустые поля.

Задание 2. Атрибуты изображения.

1. Самостоятельно внесите изменения в файл RASP.HTM, опробовав использование таких атрибутов графики как ALT, BORDER, HEIGHT, WIDTH.

Примечание

Всегда обращайте внимание на размеры (объем в байтах) своего графического файла, т.к. это влияет на время загрузки Web-страницы.

Задание 3. Фоновое изображение графики на Web-странице

Информация.

Фоновое изображение – это графический файл с изображением небольшой прямоугольной плашки. При просмотре в броузере эта плашка многократно повторяется, заполняя все окно, независимо от его размеров.

Графика, используемая в качестве фоновой, задается в тэге в начале файла HTML.

1. Внесите изменения в файл RASP.HTM:

BACKGROUND="BGR.GIF" TEXT="#330066">

Расписание

занятий на вторник

На экране вы увидите:                                 На самом деле графический

файл BGR.GIF выглядит так:

Задание 4. Таблицы.

Информация.

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

Ячейки могут содержать в себе текст, графику или другую таблицу.

Таблица состоит из трех основных частей:

• название таблицы,
• заголовки столбцов,
• ячейки.

Таблица заполняется горизонтальными рядами ячейка за ячейкой слева направо. Заполнение начинается с левого верхнего угла и заканчивается правым нижним. Каждая ячейка должна быть заполнена. Для создания пустых ячеек используются пробелы.

Теги оформления таблиц

текст

Тег	Форма записи	Примечание
TABLE	текст	Объявление таблиц.
TR
Тег строки.
TD		текст	Тег данных.

Атрибуты тега

Атрибут	Форма записи	Примечание
BORDER	Задает рамку вокруг таблицы. WIDTH Задает ширину таблицы как ХХ% от ширины страницы или как ХХ пикселов. BGCOLOR Задает цвет фона таблицы. Атрибуты тегов и Атрибут Форма записи Примечание ALIGN Устанавливает выравнивание по горизонтали (Right, Left, Center) VALIGN Устанавливает выравнивание по вертикали (Top, Middle, Bottom, Baseline) BGCOLOR Задает цвет фона ячейки. 1. Запустите стандартную программу Блокнот (Notepad). 2. Наберите в окне редактора: 5 класс Понедельник Урок 5 А 5 Б 5 В 1 Русский язык Литература История 2 Алгебра Информатика Англ.язык 3 История Информатика Алгебра 3. Сохраните файл под именем 5.HTM. 4. Для просмотра созданной Web-страницы загрузите броузер Microsoft Internet Explorer. Задание 5. 1. Дополните полученную Web-страницу по аналогии расписанием на последующие дни: ВТОРНИК, СРЕДУ, ЧЕТВЕРГ, ПЯТНИЦУ, СУББОТУ. Лабораторная работа № 3 Информация Построение гипертекстовых связей Важнейшим свойством языка HTML является возможность включения в документы ссылок на другие документы. Возможны ссылки: на удаленный HTML файл, на некоторую точку в текущем HTML-документе, на любой файл, не являющийся HTML-документом. В качестве ссылки можно использовать текст или графику. Ссылки в пределах одного документа Такие ссылки требуют наличие двух частей: метки и самой ссылки. Метка определяет точку, к которой происходит переход по ссылке. Ссылка использует имя метки. Ссылки выделяются цветом или подчеркиванием, в зависимости от того, как настроен броузер. Для изменения цвета ссылки используется атрибуты LINK= и VLINK= тэга Ссылка: Понедельник Перед именем метки (ПН), указывающей куда производится ссылка, ставится символ #. Между символами > и < располагается текст (Понедельник), на котором производится щелчок для перехода по ссылке. Метка: Понедельник Задание 1. Ссылки в пределах одного документа. 1. Дополните файл 5.HTM таблицей, содержащей название дней недели, поместив ее в начало Web-страницы: … Понедельник Вторник Среда Четверг Пятница Суббота … 2. Вставьте в файл 5.HTM метку, указывающую ПОНЕДЕЛЬНИК: … Понедельник … 3. Вставьте ссылку для выбранной метки: … … 4. Сохраните файл. 5. Просмотрите полученную Web-страницу. На экране вы должны увидеть: Задание 2. Ссылки на другой HTML-документ. Информация Ссылки на другой HTML-документ Ссылки позволяют щелчком по выделенному слову или фразе перейти к другому файлу. Ссылка: 5 классы После имени файла 5.HTM, указывается между символами > и < текст (5 класс), на котором производится щелчок для перехода на этот файл. 1. Загрузите в броузер файл RASP.HTM. 2. Внесите изменения в файл: Расписание занятий на вторник Понедельник  Вторник Среда 5 класс  6 класс 7 класс 8 класс 9 класс 10 класс 11 класс 2. Сохраните файл. 3. Просмотрите полученную Web-страницу. Подведите курсор к ссылке "5 класс" и по щелчку мыши вы перейдете на другую Web-страницу (файл 5.HTM). Задание 3. Графическая ссылка на другой HTML-документ. 1. Внесите изменения в файл 5.HTM так, чтобы в конце страницы была ссылка на головную страницу "Расписание занятий" (файл RASP.HTM). В качестве ссылки используется графический файл: … В качестве ссылки выступает рисунок ("Стрелка Вверх"), находящийся в файле HOME.GIF. Итоговое задание 1. Разработайте Web-страницы, рассказывающие о вашем классе. На головной странице поместите рассказ о классе, классном руководителе. Рассказ об учениках разместите на отдельных Web-страницах. Укажите ссылки на страницы учеников с головной страница. Не забудьте установить ссылки возврата с Web-страниц учеников на головную страницу. Как подготовить хорошую Web-страницу – несколько советов Следует обратить внимание на простоту и логику расположения информации на ваших страницах. Один из способов сделать информацию более легкой для восприятия – это оставить на странице достаточно свободного места, не содержащего ни текста, ни рисунков. Страница, содержащая много информации, только отпугнет посетителя. Попытайтесь представить информацию в виде списков или таблиц, так чтобы достаточно легко можно было найти наиболее важные сведения. Не размещайте одно изображение сразу за другим. Попробуйте распределить их по документу, оставив достаточно свободного пространства. Информация должна размещаться частями, легкими для восприятия. Обратите внимание на длину абзацев. Если абзац слишком длинный, разбейте его на несколько. Если Web-страница имеет большой объем, то возможно, вам следует вставить ссылки, позволяющие пользователю быстро перемещаться между частями одного документа. Иногда имеет смысл вместо одного документа длиной в пять страниц подготовить одну страницу, содержащую перечень тем, каждая из которых будет раскрыта в отдельных Web-страницах, и установить ссылки на соответствующие страницы. Использование графики может дополнительно привлечь пользователей. Но необходимо помнить о времени загрузки вашей страницы, которое определяется количеством и объемом графической информации. Красивая картинка не произведет никакого впечатления, если для того, чтобы ее увидеть, приходится ждать пять минут, пока они загружаются. По теме: методические разработки, презентации и конспекты Практические работы по HTML В данной документе содержаться 4 первых работы, которые вводят студентов в общий курс пердмета.... Язык HTML: работа с текстом и графическими изображениями Вводные уроки по изучению языка HTML позволяющие-формировать основные базовые понятия информатики: язык HTML, тег,-учить создавать простейшие web-страницы, применять различные теги для текса и графиче... Проверочная работа по теме "Знакомство с языком HTML" задания для проверочной работы... Практическая работа на тему "Язык разметки гипертекста HTML" Практичекая работа для закрепления изученных знаний по теме "Язык разметки гипертекста HTML".... http://www.prodlenka.org/metodichka/mypage.html http://videouroki.net/filecom.php?fileid=98712464 http://videouroki.net/filecom.php?fileid=98711040 http://www.prodlenka.org/svidetelstvo.html http://videouroki.net/filecom.php?fileid=98710201 http://www.pro http://www.prodlenka.org/metodichka/mypage.htmlhttp://videouroki.net/filecom.php?fileid=98712464http://videouroki.net/filecom.php?fileid=98711040http://www.prodlenka.org/svidetelstvo.htmlhttp://videou... Ссылки на мои статьи и публикации в Живом Журнале (LIVEJOURNAL): - 1. https://vladimir-shkola.livejournal.com/376.html 2. https://vladimir-shkola.livejournal.com/919.html Ссылки на мои  статьи и публикации в Живом Журнале (LIVEJOURNAL):https://vladimir-shkola.livejournal.com/376.htmlhttps://vladimir-shkola.livejournal.com/919.html... Практические работы по HTML Практические работы по HTML... Мне нравится  Поделиться: