2. Задать цвет текста в документе, и цвет фона.
3. Задать шрифт текста Arial и Courier New
4. Загрузите практическую работу №2, где содержится «Классификация ПО для ПК». Создайте гиперссылку для Введения:
5. Задать цвет для непосещаемой, посещаемой и активной гиперссылок.
6. Введение- гиперссылка на соответствующий файл (под именем lab5.html) содержащий информацию:
Введение
Персональные компьютеры – это универсальное устройство для обработки информации. В отличие от телефона, магнитофона или телевизора, осуществляющих только заранее заложенные в них функции, персональные компьютеры могут выполнять любые действия по обработке информации. Для этого необходимо составить для компьютера на понятном ему языке точную и подробную последовательность инструкций выполняемых на компьютере программах. Поэтому часто употребляемое выражение «компьютер сделал» (подсчитал, нарисовал) означает ровно то, что на компьютере была выполнена программа, которая позволила выполнить соответствующее действие. Меняя программы для компьютера, можно превратить его в рабочее место бухгалтера или конструктора, статистика или агронома, редактировать на нем документы или играть в какую-нибудь игру.
Таким образом, для эффективного использования компьютера (т.е. программу), как надо обрабатывать информацию. Сам по себе компьютер не обладает знаниями ни в одной области своего применения, все эти знания сосредоточены в необходимо знать назначение и свойства необходимых при работе с ним программ. Рассмотрим основные разновидности программ для персонального компьютера IBM PC.
Файл практ5 оформите как документ, в котором, в заголовке окна браузера должна быть надпись «Практическая 5» Оформите его :
1. Использовать шрифты Arial и Courier New, применить курсив, жирный подчеркивание согласно тексту.
2. Практическая №1, Практическая №2- гиперссылка на соответствующий файл –должна быть внизу на экране;
3. Практическая №5- заголовок (по центру и соответствующим шрифтом);
4. Вставить рисунок, задав ему размеры с помощью параметра width - ширина самой картинки (в пикселях=300), примените параметр alt - краткое описание картинки.;
5. Расположите картинку по левому краю, а текст обтекает ее справа. Используя параметр align, например:
<img src="pr1.png" align="left">
6. Задайте расстояние между текстом и рисунком (по вертикали и горизонтали). Расстояние задается в пикселях (pixel - минимальная единица изображения, точка. Например разрешение экрана 800х600 - 800 на 600 точек). В нашем примере расстояние равно 30 пикселям.
7. Используя параметр border - рамка вокруг самой картинки (в пикселях), задайте бордюр вокруг картинки.
8. Оформите страницу в едином стиле с практической работой №2 «Классификация ПО для ПК»
Сохранить файл как lab5.txt в блокноте и как lab5.html для просмотра в браузере.
Практическая работа № 6
«Таблицы»
Технология работы:
Теоретическая часть :
При создании сайтов таблицы используются очень часто. Таблица задается тэгом: <table></table>
Таблица состоит из строк и столбцов (ячеек), поэтому нам надо еще и указать их.
<tr></tr> - строчка таблицы
<td></td> - столбец (ячейка) таблицы
Зададим таблицу состоящую из двух строк и трех столбцов (ячеек). Для наглядности ячейки таблицы выделены разными цветами. Границы таблицы не заданы, поэтому вы их не видите
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Заполните получившийся каркас цифрами:
<table>
<tr>
<td>1x1</td>
<td>1x2</td>
<td>1x3</td>
</tr>
<tr>
<td>2x1</td>
<td>2x2</td>
<td>2x3</td>
</tr>
</table>
Фон задается параметром bgcolor="цвет_фона". Фон можно задать для таблицы в целом, для ряда, для столбца (в пределе одного ряда). Задаем фон для каждого столбца. В параметрах height и width - вы можете их задать для всей таблицы, для одного ряда, для ячейки (столбца).
<table>
<tr>
<td height="35" bgcolor="#FFCC33"> <center> 1x1 </center> </td>
<td bgcolor="#336699"> <center> 1x2 </center> </td>
<td bgcolor="#FFCC33"> <center>1x3 </center> </td>
</tr>
<tr>
<td height="35" bgcolor="#336699"> <center> 2x1 </center> </td>
<td bgcolor="#FFCC33"> <center> 2x2 </center> </td>
<td bgcolor="#336699"> <center> 2x3 </center> </td>
</tr>
</table>
Параметры colspan и rowspan. Colspan - определяет количество столбцов, на которые простирается данная ячейка, а rowspan - количество рядов (эти параметры могут принимать значение от 2 и больше, т.е. наша ячейка может растягиваться на два и более столбца (ряда)).
Используем параметр colspan=2, прописав его для ячейки 1х1. Код следующий:
<table>
<tr>
<td height="35" bgcolor="#FFCC33" colspan="2"> <center>1x1</center> </td>
<td bgcolor="#336699"> <center>1x2</center> </td>
</tr>
<tr>
<td height="35" bgcolor="#336699"> <center>2x1</center> </td>
<td bgcolor="#FFCC33"> <center>2x2</center> </td>
<td bgcolor="#336699"> <center>2x3</center> </td>
</tr>
</table>
Попробуйте сами написать код для такой таблицы (у вас должна исчезнуть ячейка 2х3). Для закрепления напишите код для таблицы:
Можно избавиться от пространства между ячейками таблицы.
Это достигается с помощью атрибута cellspacing, равного нулю:
<table cellspacing=0>
<tr>
<td height="35" bgcolor="#FFCC33" colspan="2"> <center>1x1</center> </td>
<td bgcolor="#336699" rowspan="2"> <center>1x2</center> </td>
</tr>
<tr>
<td height="35" bgcolor="#336699"> <center>2x1</center> </td>
<td bgcolor="#FFCC33"> <center>2x2</center> </td>
</tr>
</table>
Можно увеличить пространство между ячейками, допустим пусть cellspacing=5, тогда получим такое:
Обычно атрибут cellspacing, рассматривается в руководствах и учебниках в паре с атрибутом cellpadding, который добаляет свободное пространство между содержимым ячейки и ее границами. Чтобы было видно нагляднее я для начала прижму текст ячеек первого ряда к верху, в нижнего - к низу, используя атрибут valign
<table cellpadding=5>
<tr>
<td height="35" bgcolor="#FFCC33" colspan="2" <center>1x1</center> </td>
<td bgcolor="#336699" rowspan="2" <center>1x2</center> </td>
</tr>
<tr>
<td height="35" bgcolor="#336699" <center>2x1</center> </td>
<td bgcolor="#FFCC33" <center>2x2</center> </td>
</tr>
</table>
Выполните на компьютере:
Задание 1
1. Создайте файл lab6.html оформите как документ, в котором, в заголовке окна браузера должна быть надпись «Практическая 6».