Создание web-страниц с помощью языка html

Автор: Пользователь скрыл имя, 08 Февраля 2013 в 08:11, лабораторная работа

Описание работы

Цель: научиться создавать простейшие файлы в HTML, применять ручное форматирование к WEB-страницам: создание абзацев и отступов, использование стилей и установка размеров шрифта

Скачать полностью (24.41 Кб) Сколько стоит заказать работу?

Работа содержит 1 файл

лабораторные поHTML.doc

— 92.00 Кб (Скачать)

ЛАБОРАТОРНАЯ РАБОТА № 1

СОЗДАНИЕ WEB-СТРАНИЦ С ПОМОЩЬЮ ЯЗЫКА HTML

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

создайте папку КУРС, в котором будете сохранять сконструированные WEB-страницы.
запустите программу Блокнот
наберите в окне редактора простейший текст файла HTML

< HTML >

<HEAD>

<TITLE>учебный файл HTML</TITLE>

</HEAD>

<BODY>

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

</BODY>

< /HTML >

сохраните файл под именем RASP.HTM
для просмотра созданной WEB-страницы, загрузите броузер Microsoft Internet Explorer
выполните команду Файл, Открыть, Просмотр найдите в папке КУРС файл RASP.HTM и загрузите его. Убедитесь что название WEB-страницы («учебный файл HTML») отразилось в верхней, статусной, строке броузера

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

при необходимости выполните пункты 5-6 задания 1
откройте первоисточник WEB-страницы, выполнив команду Вид(View), Источник (В виде HTML) . Откроется окно программы Блокнот, в котором ваша WEB-страница будет представлена в командах HTML
внесите изменения в текст файла HTML, расположив слова «расписание», «занятий», «на вторник» на разных строках:

< HTML >

<HEAD>

<TITLE>учебный файл HTML</TITLE>

</HEAD>

<BODY>

расписание

занятий

на вторник

</BODY>

< /HTML >

сохраните текст с внесенными изменениями в файле RASP.HTM с помощью команды Файл, Сохранить. Закройте программу Блокнот
просмотрите с помощью броузера Microsoft Internet Explorer полученную WEB-страницу, используя клавишу F5 или команду Вид, Обновить

примечание: в дальнейшем после внесения изменений в WEB-страницу всегда выполняйте пункты 4-5 задания 2

Задание 3. Использование тегов перевода строки и абзаца.

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

< HTML >

<HEAD>

<TITLE>учебный файл HTML</TITLE>

</HEAD>

<BODY>

расписание

занятий

на вторник

</BODY>

< /HTML >

сохраните текст с внесенными изменениями в файле RASP.HTM
просмотрите с помощью броузера Microsoft Internet Explorer полученную WEB-страницу. Как изменилось изображение текста на экране

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

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

< HTML >

<HEAD>

<TITLE>учебный файл HTML</TITLE>

</HEAD>

<BODY>

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

</BODY>

< /HTML >

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

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

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

< HTML >

<HEAD>

<TITLE>учебный файл HTML</TITLE>

</HEAD>

<BODY>

<H1>расписание</H1> занятий на вторник

</BODY>

< /HTML >

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

Задание 6. Установка размера текущего шрифта

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

< HTML >

<HEAD>

<TITLE>учебный файл HTML</TITLE>

</HEAD>

<BODY>

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

</BODY>

< /HTML >

самостоятельно измените размер шрифта для текста «занятий на вторник», используя, тэг
измените оформление текста HTML-документа, используя тэги выделения фрагментов текста и тэги строки и абзаца

Задание 7. Установка гарнитуры и цвета шрифта.

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

< HTML >

<HEAD>

<TITLE>учебный файл HTML</TITLE>

</HEAD>

<BODY>

расписание

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

</BODY>

< /HTML >

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

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

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

< HTML >

<HEAD>

<TITLE>учебный файл HTML</TITLE>

</HEAD>

<BODY>

расписание<>FONT> занятий на вторник

</Р>

</BODY>

< /HTML >

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

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

< HTML >

<HEAD>

<TITLE>учебный файл HTML</TITLE>

</HEAD>

<BODYBGCOLOR=”#FFFFCC”> TEXT=”3330066”>

расписание<>FONT> занятий на вторник

</Р>

</BODY>

< /HTML >

Задания для самостоятельной работы:

1. выбрать тему для разработки собственного сайта из следующих: «Мой институт», «Мой город», «Специальность, которую я выбрал», «Мое хобби» или придумайте тему самостоятельно. Разработайте проект сайта.

ЛАБОРАТОРНАЯ РАБОТА № 2

ДОБАВЛЕНИЕ ИЗОБРАЖЕНИЙ

Цель: научиться создавать изображения для WEB-страниц, использовать графику на WEB-страницах

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

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

< HTML >

<HEAD>

<TITLE>учебный файл HTML</TITLE>

</HEAD>

<BODYBGCOLOR=”#FFFFFF” TEXT=”3330066”>

расписание<>FONT> занятий на вторник

</Р>

</BODY>

< /HTML >

Задание 2. Установка атрибутов изображения

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

Примечание: всегда обращайте внимание на размер графического файла, т.к. это влияет на время загрузки WEB-страницы

Задание 3 установка фонового изображения на WEB-странице

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

< HTML >

<HEAD>

<TITLE>учебный файл HTML</TITLE>

</HEAD>

расписание<>FONT> занятий на вторник

</Р>

</BODY>

< /HTML >

Задания для самостоятельной работы:

создайте титульную страницу вашего сайта. Поэкспериментируйте с форматированием текста и размещением графики. Задайте для страницы фон.
создайте логотип для вашего сайта и разместите его на титульной странице

ЛАБОРАТОРНАЯ РАБОТА № 3

СОЗДАНИЕ ТАБЛИЦ. ДОБАВЛЕНИЕ ССЫЛОК

Цель: научиться использовать таблицы на WEB-страницах, создавать структуры таблицы;

добавлять ссылки внутри HTML документа и на различные фрагменты другой WEB-страницы

Задание 1. Создание таблицы.

запустите программу Блокнот
наберите следующий текст в окне редактора:

< HTML >

<HEAD>

<TITLE>учебный файл HTML</TITLE>

</HEAD>

институт

понедельник

<TD> EHJR <TD><TD> Л-1</TD><TD> Л-2</TD> Л-3

</TR>

<TR>

<TD>1</TD><TD> русский язык</TD><TD> математика</TD><TD>история</TD>

</TR>

<TR>

TD>2</TD><TD> информатика</TD><TD> английский язык</TD><TD>философия</TD>

</TR>

<TR>

TD>3</TD><TD> история</TD><TD> английский язык</TD><TD>информатика</TD>

</TABLE>

</BODY>

< HTML >

сохраните файл под именем 5. HTML
для просмотра созданной WEB-страницы загрузите броузер Microsoft Internet Explorer

Задание 2. Создание таблицы.

Дополните полученную WEB-страницу по аналогии расписанием на последующие дни: вторник, среду, четверг, пятницу, суббота.

Задание 3. Создание ссылок в пределах одного документа

дополните файл 5. HTML описанием таблицы, содержащей название дней недели, поместив его в начало WEB-страницы:

<TR>

<TD>понедельник</TD>

<TD>вторник</TD>

<TD>среда</TD>

<TD>четверг</TD>

<TD>пятница</TD>

<TD>суббота</TD>

</TR>

</TABLE>

<ВR>

вставьте файл 5. HTML метку , указывающую на понедельник

<A NANE = “пн”>понедельник </A>

Вставьте в файл 5. HTML с названиями дней недели ссылку для выбранной метки:

<TR>

<TD><A HREF=”# ”пн”>понедельник </A></TD>

<TD>вторник</TD>

<TD>среда</TD>

…

сохраните файл
просмотрите полученную WEB-страницу

Задание 4. Создание ссылки на другой HTML-документ

загрузите в буфер файл RASP.HTM
внесите изменения в файл

< HTML >

<HEAD>

<TITLE>учебный файл HTML</TITLE>

</HEAD>

<BODYBGCOLOR=”#FFFFFF” TEXT=”3330066”>

расписание<>FONT> занятий на вторник

</Р>

TABLE WIDTH=100%>

<TR><TD><A HREF=”5. HTML ”>группа Л-1</A></TD>

<TD> группа Л-2</TD></TR>

<TR><TD>группа Т-11</TD><TD> группа Т-12</TD></TR>

<TR><TD>группа Н-13</TD><TD> группа Н-14</TD></TR>

<TR><TD>группа Т-21</TD><TD></TD></TR>

</TABLE>

</BODY>

< HTML >

сохраните файл
просмотрите полученную WEB-страницу

Информация о работе Создание web-страниц с помощью языка html