Методика освоения новых программ




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

Тема: МЕТОДЫИ СРЕДСТВА СОЗДАНИЯ И СОПРОВОЖДЕНИЯ САЙТА.

 

Цель работы: Знакомство с общими положениями создания WEB-страниц и базовыми тегами языка HTML.

1) Ознакомиться Н. Угринович и др. «Практикум по информатике и информационным технологиям», глава 8, п. 8.1, 8.2.

2) Теоретические сведения

HTML — это теговый язык разметки документов. Элементы — это структуры, которые описывают отдельные составляющие HTML-документа. Элемент состоит из трех частей: начального тега, содержимого и конечного тега. Тег — это специальный текст, заключенный в угловые скобки "<" и ">". Конечный тег имеет то же имя, что начальный тег, но начинается с косой черты "/". Атрибуты элемента определяют его свойства. Значение атрибута может быть заключено в одинарные или двойные кавычки. Порядок следования атрибутов в теге не важен. Атрибут действует от открывающего тега, в котором он задан, до закрывающего, или только внутри тега, если тег не имеет парного.

Базисные теги
Тип документа <HTML></HTML> Начало и конец файла атрибуты
Имя документа <TITLE></TITLE> Должно быть в заголовке  
Заголовок <HEAD></HEAD> Описание документа  
Тело <BODY></BODY> Содержимое страницы  

Оформление тела Веб-страницы

Атрибут Действие Значения атрибута
BACKGROUND="URL" Фоновая картинка *.jpg, *.gif,.png, графический файл расположен в одной папке с Вашим документом
BGCOLOR="цвет " Цвет фона  
TEXT=”color” Цвет текста  
LEFTMARGIN="40" Определяет ширину левого и правого полей документа Пикселы
MARGINWIDTH="40" Определяет ширину верхнего и нижнего полей документа Пикселы

Таблица цветов НТМL

pink Розовый blue синий
cyan оттенок бирюзового teal ярко-голубой
orange Оранжевый gray серый
brown Коричневый yellow желтый
fuchsia ярко-фиолетовый olive оливковый
aqua Бирюзовый purple фиолетовый
silver светло-серый red красный
black Черный green зеленый

3) Практическая часть

Задание 1.

1. Создание простейшей Веб-страницы:

Создайте стандартный текстовый файл.

Откройте его редактором "Блокнот".

Сначала напечатайте основные теги:
<HTML>
<HEAD>
<TITLE>Добро пожаловать!!!</TITLE>
</HEAD>
<BODY> Здравствуйте!!!
</BODY>
</HTML>

Сохраните документ с расширением *.htm.

2. Создайте веб-страницу с оформленным фоном и текстом.

HTML-код будет выглядеть следующим образом:

<HTML>
<BODY BACKGROUND="paint1.bmp" BGCOLOR="red" TEXT="cian" LEFTMARGIN="40" MARGINWIDTH="40">
...
Текст документа (5-6 предложений на любую тему).
...
</BODY>
</HTML>

Сохраните документ с расширением *.htm.

3. Самостоятельно создайте две веб-страницы с разными фонами и цветами текстов (5-6 предложений).

Для того, чтобы отформатировать текст, который будет располагаться на вашей веб-странице, необходимо воспользоваться следующими тегами:

Форматирование
Заголовки <H*></H*> * - от 1 до 6 Стандарт определяет 6 уровней заголовков
Конец строки <TR>  
Начало абзаца <P>  
Выравнивание <H* > </H*> *-ALIGN= LEFT|CENTER|RIGHT По левому краю, по правому, по центру
Цитата <BLOCKQUOTE> </BLOCKQUOTE> Обычно выделяется отступом
Шрифт
Жирный <B></B>  
Курсив <I></I>  
Размер шрифта <FONT SIZE=?></FONT> От 1 до 7
Цвет шрифта <FONT COLOR="#$$$$$$"> </FONT>  

Задание 2. Форматирование текста.

1. На базе первой простейшей Веб-страницы создайте текстовый документ, имеющий следующее оформление:

Устройства компьютера (заголовок 1)

Внешние ( заголовок 2)

Принтер, сканер, монитор, клавиатура. (размер - 8, цвет синий, шрифт Arial)

Внутренние (заголовок 2)

Винчестер, материнская плата, видеокарта.

<body>

<h1> Устройство компьютера </h1>

<h2> Внешние </h2>

<P> <font size = -2 face=”arial” color=blue> Принтер, сканер, монитор, клавиатура </font>

<h2> Внутренние </h2>

<p> <b> винчестер </b> <i> материнская плата </i> <U> видеокарта </U>

</body>

2. Самостоятельно создайте Веб-страницу, на которой будет изображен текст в следующем виде:

Методика освоения новых программ

Знакомство с примерами, шаблонами и образцами документов.

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

Эксперименты с пробными документами.

Цель эксперимента – проверка действия команд редактирования.

 

Важнейшую роль в оформлении страницы играют иллюстрации.

Для размещения рисунков в документе служит одиночный тег <IMG>, который должен обязательно содержать атрибут SCR=, значение которого составляет адрес файла изображения.

Изображение переносится на страницу с сохранением размеров. Нужные размеры рисунка можно задать с помощью атрибутов WIDTH= (ширина) и HEIGHT= (высота).

Альтернативный текст – словесное описание изображения задаётся при помощи атрибута ALT=.

Для создания гиперссылки в документе используются теги <A> и </A>. Текст ссылки помещается между этими тегами. Для того, чтобы указать адрес, на который указывает ссылка, необходим атрибут HERF=. Некоторые гиперссылки могут указывать на определённое место внутри страницы (якоря). Для него является обязательным атрибут NAME=. Значением этого атрибута является имя якоря, которое может состоять только из латинских букв и цифр и не должно содержать пробелов.

В качестве гиперссылки можно использовать изображения. Для этого теги разметки изображения должны быть помещены между тегами гиперссылок.

Задание 3.

В своей папке создайте 2 документа в программе Блокнот, на основе которого можно сделать Веб-страницу. (Сделайте заголовок, тело).

В папку скопируйте две картинки (большую для фона и маленькую) и одну анимацию, переименуйте их соответственно paint1.gif, paint2.gif, anim.gif. (Расширения должны быть соответствующими вашим изображениям).

На основе первого документа сделайте страницу, содержащую все скопированные вами изображения. Код для разметки Веб-страницы будет следующим:

<html>

<head>

<title> ИЗОБРАЖЕНИЕ1 </title>

</head >

<body background=paint1.jpg>

<img src=paint2.gif>

<img src=anim.gif>

</body>

</html>

Сохраните этот документ под именем document1.

Второй документ должен содержать ссылку на этот документ, при нажатии на которую появится список. Код тела этой веб-страницы должен иметь вид:

<body>

<A HREF=”document1.htm”>

Ссылка

</A>

</body>

Самостоятельно постройте две Веб-страницы. Первая должна содержать 5-6 предложений, касающихся темы изображений, 3 картинки, 2 анимации и небольшой пояснительный текст. Вторая – гиперссылку на первый документ.



Поделиться:




Поиск по сайту

©2015-2024 poisk-ru.ru
Все права принадлежать их авторам. Данный сайт не претендует на авторства, а предоставляет бесплатное использование.
Дата создания страницы: 2017-06-30 Нарушение авторских прав и Нарушение персональных данных


Поиск по сайту: