- 11.05.2017
- 1872
- 10
Практическая работа по HTML № 3
Задание № 1. Задание цвета фона
При изображении фона и цвета браузеры используют цвета, установленные по умолчанию, - они заданы параметрами настройки браузера. Если вы хотите задать другие цвета, то это надо сделать в начале файла HTML в теге <BODY>. Атрибут BGCOLOR= определяет цвет фона страницы, атрибут TEXT= задает цвет текста для всей страницы, атрибуты LINK= и VLINK= определяют соответственно цвета не просмотренных и просмотренных ссылок (последние два примера будут рассмотрены позже).
1. Внесите изменения в файл 1.HTML
Вместо тега <BODY> введите расширенный тег <BODY BGCOLOR="#FFFFCC" TEXT="#330066">;
2. Сохраните изменения и обновите страницу в браузере.
Задание № 2. Размещение графики на Web-странице
Тег <IMG> позволяет вставить изображение на Web-страницу. Оно появится в том месте документа, где находится этот тег. Тег <IMG> является одиночным.
Необходимо помнить, что графические файлы должны находиться в той же папке, что и файл HTML, описывающий страницу. Графика в Web, как правило, распространяется в трех форматах: GIF, JPG, PNG.
Для выполнения следующего задания поместите файл с именем 1.JPG в личную папку.
Следует помнить, что для браузера важно, в каком регистре вы задаете описание имени и типа файла. Выработайте для себя определенное правило и строго следуйте ему. Если вы размещаете файл графического изображения во вложенной папке, то при описании изображения необходимо указывать путь доступа к файлу изображения, отображая вложенность папок.
1. Внесите изменения в файл 1.HTML
…
<P>• E - напряженность электрического поля (векторная величина).
<P>• Δφ=φ1-φ2 - разность потенциалов (рисунок 1).
<IMG SRC="1.jpg ">
<P>Поскольку условием существования тока является…
…
2. Сохраните изменения и обновите страницу в браузере;
3. Рисунок надо расположить на новой строке, для этого перед тегом <IMG SRC="1.jpg "> укажите тег <P>
4. Сохраните изменения и обновите страницу в браузере;
Вид вставленной картинки представлен на рисунке ниже:
Тег <IMG> имеет немало атрибутов, описанных в таблице 1. Эти атрибуты можно задавать дополнительно и располагаться они могут в любом месте тега после кода IMG.
Таблица 1. Атрибуты изображения
|
Атрибут |
Формат |
Описание |
|
ALT |
<IMG SRC="1.JPG" ALT=" Картинка "> |
Задает текст, заменяющий изображение в том случае, если браузер не воспринимает изображение |
|
BORDER |
<IMG SRC="1.JPG" BORDER="3"> |
Задает толщину рамки вокруг изображения. Измеряется в пикселях |
|
ALIGN |
<IMG SRC="1.JPG" ALIGN="TOP"> |
Задает выравнивание изображения относительно текста: • относительно текста выровнена верхняя часть изображения - "TOP", • относительно текста выровнена нижняя часть изображения - "BOTTOM", • относительно текста выровнена средняя часть изображения - "MIDDLE". |
|
HEIGHT |
<IMG SRC="1.JPG" HEIGHT=" 111"> |
Задает вертикальный размер изображения внутри окна браузера |
|
WIDTH |
<IMG SRC="1.JPG" WIDTH="210"> |
Задает горизонтальный размер изображения внутри окна браузера |
|
VSPACE |
<IMG SRC="1.JPG" VSPACE="8"> |
Задает добавление верхнего и нижнего пустых полей |
|
HSPACE |
<IMG SRC="1.JPG" HSPACE="8"> |
Задает добавление левого и правого пустых полей |
Задание № 3. Использование атрибутов изображения
1. Самостоятельно внесите изменения в текст файла 1.HTML: опробуйте использование таких атрибутов графики, как ALT, BORDER, ALIGN, HEIGHT, WIDTH, VSPACE, HSPACE.
Всегда обращайте внимание на размер графического файла (в байтах), так как это влияет на время загрузки Web-страницы.
2. Просматривайте изменения вашей Web-страницы в браузере.
Задание № 4. Установка фонового изображения на Web-странице
Фоновое изображение - это графический файл с небольшим рисунком, который многократно повторяется, заполняя все окно браузера независимо от его размеров.
Для выполнения следующего задания поместите файл с именем FON.GIF в личную папку.
Графика, используемая в качестве фоновой, задается в теге <BODY>.
1. Внесите изменения в текст файла 1. HTML: замените тег <BODY BGCOLOR="#FFFFCC" TEXT="#330066"> тегом <BODY BACKGROUND="FON.GIF" TEXT="#3300 66">.
2. Сохраните изменения и обновите страницу в браузере.
Практическая работа по HTML № 4
Задание № 1. Создание таблицы
Таблица является частью HTML-документа. Она представляет собой прямоугольную сетку, состоящую из вертикальных столбцов и горизонтальных строк. Пересечение строки и столбца называется ячейкой таблицы. Ячейка может содержать в себе текст, графику или другую таблицу.
Таблица состоит из трех основных частей:
• названия таблицы,
• заголовков столбцов,
• ячеек таблицы.
Таблица в Web-документе заполняется по строкам (слева направо по строке, затем переход на новую строку). Каждая ячейка таблицы должна быть заполнена (хотя бы пробелом, которые используются для создания пустых ячеек).
Сделаем перечисление
Ток - Ампер (А)
Напряжение - Вольт (В)
Сопротивление - Ом (Ом).
в виде таблицы.
Для этого в файле 1.HTML под словами: «Основные единицы измерения этих величин следующие:» впишем теги для создания таблицы:
<TABLE BORDER="1" WIDTH=100% BGCOLOR="#99CCCC">
<TR BGCOLOR="#CCCCFF" ALIGN="CENTER"> <TD>Наименование физической величины</TD> <TD> Обозначение физической величины </TD> <TD> Единицы измерения физической величины</TD>
</TR>
<TD>Ток</TD> <TD>I </TD> <TD> Ампер (А) </TD>
</TR>
<TD> Напряжение</TD> <TD>U</TD> <TD> Вольт (В) </TD>
</TR>
<TD > Сопротивление </TD> <TD> R </TD> <TD> Ом (Ом) </TD>
</TR>
</TABLE>
· Сохраните изменения и обновите документ в окне браузера.
· Самостоятельно выровняйте данные внутри таблицы по центру.
Вид получившейся таблицы представлен на рисунке ниже:
Задание № 2. Построение гипертекстовых связей
Важнейшим средством языка HTML является возможность включения в документ ссылок на другие документы.
Возможны ссылки:
• на некоторую точку в текущем HTML-документе,
• на удаленный HTML-файл,
• на любой файл, не являющийся HTML-документом.
В качестве ссылки можно использовать любой текст или графику.
Ссылки в текущем документе
Такие ссылки требуют двух частей: метки и самой ссылки. Метка определяет точку, на которую происходит переход по ссылке. Ссылка использует имя метки. Ссылки выделяют цветом или подчеркиванием в зависимости от того, как настроен браузер. Для изменения цвета ссылки используются атрибуты LINK= и VLINK= тега <BODY>.
1. Вставьте в файл 1.HTML ссылку в заголовке, взяв слово «ТОК» в следующие теги:
<A HREF="#ТОК"> ТОК </А>
Перед именем метки (ТОК), указывающей, куда надо перейти по ссылке, ставится символ #. Между символами “>” и “<” располагается текст (“ТОК ”), на котором должен быть произведен щелчок для перехода по ссылке.
2. Вставьте в файл 1.HTML метку, указывающую на Электрический ток.
<B> <А NAME="ТОК"> Электрический ток </A></B> ( I ) – это…
3. Вставьте в файл 1.HTML ссылку в заголовке, взяв слово «НАПРЯЖЕНИЕ» в следующие теги:
<A HREF="# НАПРЯЖЕНИЕ "> НАПРЯЖЕНИЕ </А>
4. Вставьте в файл 1.HTML метку, указывающую на Напряжение.
<B> <А NAME="НАПРЯЖЕНИЕ"> Напряжение</A></B> …
5. Вставьте самостоятельно ссылку и метку для Сопротивления.
6. Сохраните изменения в файле 1.HTML и просмотрите полученную Web-страницу.
Теперь при нажатии на заголовке по слову ТОК вы переходите в тексте на определение тока, аналогично с напряжением и сопротивлением.
Создание ссылки на другой HTML-документ
Ссылки позволяют щелчком на выделенном слове или фразе перейти к другому файлу.
Опишем ссылку:
<A HREF="1.HTML">…</А>
После имени файла (1.HTML) между символами «>» и «<» располагается текст («ТОК, НАПРЯЖЕНИЕ, СОПРОТИВЛЕНИЕ»), на котором должен быть произведен щелчок для перехода к этому файлу.
1. Внесите изменения в файл baza.TXT
<HTML>
<HEAD>
<TITLE> СПРАВОЧНИК ЭЛЕКТРИКА </TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#330066">
<P ALIGN="CENTER">
<FONT COLOR="#008080" SIZE="7"> <B>СПРАВОЧНИК ЭЛЕКТРИКА</B></FONT><BR>
<P> <FONT SIZE="6"><I> <P> <A rel="nofollow ugc" target="_blank" href="1.HTML">ТОК, НАПРЯЖЕНИЕ, СОПРОТИВЛЕНИЕ </A> </P></I></FONT> <BR>
<P> ЗАКОНЫ ОМА</P>
<P> ЗАКОНЫ КИРХГОФА </P>
</BODY>
</HTML>
2. Сохраните файл под именем baza.HTML
3. Откройте его в браузере и просмотрите, что получилось.
4. Перейдите по ссылке на файл ТОК, НАПРЯЖЕНИЕ, СОПРОТИВЛЕНИЕ
Практическая работа по HTML № 5
Задание № 1. Самостоятельное итоговое задание
Разработайте самостоятельно две Web-страницы, рассказывающие о законах Ома и законах Кирхгофа. С головной страницы (baza.html) сделайте ссылки на эти документы. Не забудьте разместить ссылки возврата на головную страницу.
Рабочие листы
к вашим урокам
Скачать
6 665 936 материалов в базе
Настоящий материал опубликован пользователем Колобук Таисия Сергеевна. Инфоурок является информационным посредником и предоставляет пользователям возможность размещать на сайте методические материалы. Всю ответственность за опубликованные материалы, содержащиеся в них сведения, а также за соблюдение авторских прав несут пользователи, загрузившие материал на сайт
Если Вы считаете, что материал нарушает авторские права либо по каким-то другим причинам должен быть удален с сайта, Вы можете оставить жалобу на материал.
Удалить материал
Ваша скидка на курсы
40%
Курс повышения квалификации
72 ч. — 180 ч.
Курс профессиональной переподготовки
300/600 ч.
Курс повышения квалификации
36 ч. — 180 ч.
Мини-курс
6 ч.
Мини-курс
4 ч.
Оставьте свой комментарий
Авторизуйтесь, чтобы задавать вопросы.