Создание web-страниц с помощью языка html
Лабораторная работа, 08 Февраля 2013, автор: пользователь скрыл имя
Описание работы
Цель: научиться создавать простейшие файлы в HTML, применять ручное форматирование к WEB-страницам: создание абзацев и отступов, использование стилей и установка размеров шрифта
Работа содержит 1 файл
лабораторные поHTML.doc
— 92.00 Кб (Скачать)ЛАБОРАТОРНАЯ РАБОТА № 1
СОЗДАНИЕ WEB-СТРАНИЦ С ПОМОЩЬЮ ЯЗЫКА HTML
Цель: научиться создавать простейшие файлы в HTML, применять ручное форматирование к WEB-страницам: создание абзацев и отступов, использование стилей и установка размеров шрифта
Задание 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>
расписание <P>
занятий <BR>
на вторник
</BODY>
< /HTML >
- сохраните текст с внесенными изменениями в файле RASP.HTM
- просмотрите с помощью броузера Microsoft Internet Explorer полученную WEB-страницу. Как изменилось изображение текста на экране
Задание 4. Выделение фрагментов текста.
- внесите изменения в файл RASP.HTM:
< HTML >
<HEAD>
<TITLE>учебный файл HTML</TITLE>
</HEAD>
<BODY>
<B>расписание</B><I> занятий</I><U> на вторник</U>
</BODY>
< /HTML >
2. просмотрите полученную WEB-
Задание 5. Использование стилей заголовка
- внесите изменения в файл RASP.HTM:
< HTML >
<HEAD>
<TITLE>учебный файл HTML</TITLE>
</HEAD>
<BODY>
<H1>расписание</H1><I> занятий</I><U> на вторник</U>
</BODY>
< /HTML >
2. просмотрите полученную WEB-
Задание 6. Установка размера текущего шрифта
1. внесите изменения в файл RASP.HTM:
< HTML >
<HEAD>
<TITLE>учебный файл HTML</TITLE>
</HEAD>
<BODY>
<FONT SIZE=”7”>расписание</FONT> занятий на вторник
</BODY>
< /HTML >
- самостоятельно измените размер шрифта для текста «занятий на вторник», используя, тэг <FONT>
- измените оформление текста HTML-документа, используя тэги выделения фрагментов текста и тэги строки и абзаца
Задание 7. Установка гарнитуры и цвета шрифта.
1. внесите изменения в файл RASP.HTM:
< HTML >
<HEAD>
<TITLE>учебный файл HTML</TITLE>
</HEAD>
<BODY>
<U><I><B><FONT COLOR=”#FF0000”FACE=”ARIAL”
расписание</FONT></B></I></U>
занятий на вторник
</BODY>
< /HTML >
- самостоятельно измените размер, цвет, гарнитуру, стиль текста документа.
Задание 8. Выравнивание текста по горизонтали
1. внесите изменения в файл RASP.HTM:
< HTML >
<HEAD>
<TITLE>учебный файл HTML</TITLE>
</HEAD>
<BODY>
<P ALIGN= CENTER>
<FONT COLOR=”#008080”SIZE=”7”><B>
</Р>
</BODY>
< /HTML >
Задание 9. Установка цвета фона и текста
1. внесите изменения в файл RASP.HTM:
< HTML >
<HEAD>
<TITLE>учебный файл HTML</TITLE>
</HEAD>
<BODYBGCOLOR=”#FFFFCC”> TEXT=”3330066”>
<P ALIGN= CENTER>
<FONT COLOR=”#008080”SIZE=”7”><B>
</Р>
</BODY>
< /HTML >
Задания для самостоятельной работы:
1. выбрать тему для разработки
собственного сайта из
ЛАБОРАТОРНАЯ РАБОТА № 2
ДОБАВЛЕНИЕ ИЗОБРАЖЕНИЙ
Цель: научиться создавать изображения для WEB-страниц, использовать графику на WEB-страницах
Задание 1. Размещение графики на WEB-странице
внесите изменения в файл RASP.HTM:
< HTML >
<HEAD>
<TITLE>учебный файл HTML</TITLE>
</HEAD>
<BODYBGCOLOR=”#FFFFFF” TEXT=”3330066”>
<P ALIGN= CENTER>
<FONT COLOR=”#008080”SIZE=”7”><B>
<IMG SRC=”CLOBUS. JPG”>
</Р>
</BODY>
< /HTML >
Задание 2. Установка атрибутов изображения
Самостоятельно внесите изменения в файл RASP.HTM: попробуйте использование таких атрибутов графики, как ALT BORDER. HEIGHT. WIDTH
Примечание: всегда обращайте внимание на размер графического файла, т.к. это влияет на время загрузки WEB-страницы
Задание 3 установка фонового изображения на WEB-странице
внесите изменения в файл RASP.HTM:
< HTML >
<HEAD>
<TITLE>учебный файл HTML</TITLE>
</HEAD>
<BODY BACKGROUND=”BGR.GIF” TEXT= “#330066”>
<P ALIGN= CENTER>
<FONT COLOR=”#008080”SIZE=”7”><B>
</Р>
</BODY>
< /HTML >
Задания для самостоятельной работы:
- создайте титульную страницу вашего сайта. Поэкспериментируйте с форматированием текста и размещением графики. Задайте для страницы фон.
- создайте логотип для вашего сайта и разместите его на титульной странице
ЛАБОРАТОРНАЯ РАБОТА № 3
СОЗДАНИЕ ТАБЛИЦ. ДОБАВЛЕНИЕ ССЫЛОК
Цель: научиться использовать таблицы на WEB-страницах, создавать структуры таблицы;
добавлять ссылки внутри HTML документа и на различные фрагменты другой WEB-страницы
Задание 1. Создание таблицы.
- запустите программу Блокнот
- наберите следующий текст в окне редактора:
< HTML >
<HEAD>
<TITLE>учебный файл HTML</TITLE>
</HEAD>
<BODY BGCOLOR=”FFFFFF” >
<P ALIGN= CENTER>
<FONT COLOR=” RED” SIZE=”6”FACE=”ARIAL”>
<B>институт<B></ FONT><BR></P>
<FONT COLOR=” BLUE” ”SIZE=”4”FACE=”COURIER”><B>
<TABLE BORDER=”1” WIDTH=100% BGCOLOR=”99CCCC”>
<TR BGCOLOR=”CCCCFF” ALIGN= CENTER>
<TD> EHJR <TD><TD> Л-1</TD><TD> Л-2</TD> Л-3
</TR>
<TR>
<TD>1</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-страницы:
<TABLE WIDTH=100%>
<TR>
<TD>понедельник</TD>
<TD>вторник</TD>
<TD>среда</TD>
<TD>четверг</TD>
<TD>пятница</TD>
<TD>суббота</TD>
</TR>
</TABLE>
<ВR>
- вставьте файл 5. HTML метку , указывающую на понедельник
<FONT COLOR=” BLUE” SIZE=”COURIER” ><B>
<A NANE = “пн”>понедельник </A></B></ FONT ><BR>
- Вставьте в файл 5. HTML с названиями дней недели ссылку для выбранной метки:
<TABLE WIDTH=100%>
<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”>
<P ALIGN= CENTER>
<FONT COLOR=”#008080”SIZE=”7”><B>
<IMG SRC=”CLOBUS. JPG”>
</Р>
<CENTER>
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>
<CENTER>
</BODY>
< HTML >
- сохраните файл
- просмотрите полученную WEB-страницу