Категории:

Дом Здоровье Зоология Информатика Искусство Искусство Компьютеры Кулинария Маркетинг Математика Медицина Менеджмент Образование Педагогика Питомцы Программирование Производство Промышленность Психология Разное Религия Социология Спорт Статистика Транспорт Физика Философия Финансы Химия Хобби Экология Экономика Электроника

Цель работы: Овладеть навыками работы в браузере Internet Explorer. Научиться работать в почтовых клиентах. Знакомство с базовыми понятиями языка гипертекстовой разметки

Задача: Создать web-страничку и разместить в сети.

КРАТКИЕ ТЕОРЕТИЧЕСКИЕ СВЕДЕНИЯ

Глобальная сеть соединяет компьтеры, находящиеся в разных частях города, в разных городах и странах, на разных контин ИНТЕРНЕТ – это всемирная информационная компьютерная сеть, которая объединяет в единое целое множество компьютерных сетей и отдельных компьютеров, предоставляющих обширную информацию в общее пользование и не является коммерческой организацией.

Структура Интернет

Рис.81

Компьютер пользователя с помощью линии связи подключается к компьютеру провайдера, который, в свою очередь подключен к другому компьютеру сети и т.д. Рис.8.1 Информация в сети хранится как на компьютерах провайдера, так и на специальных компьютерах, которые называются информационными серверами. Компьютеры, к которым подключаются многие другие компьютеры называют серверами. Провайдером называется организация, через которую рядовые компьютеры подключаются к глобальной сети.

Протоколы в Интернет

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

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

Протокол – это правила взаимодействия. Сетевой протокол предписывает правила работы компьютерам, которые подключены к сети. Стандартные протоколы заставляют разные компьютеры “говорить на одном языке”. Таким образом осуществляется возможность подключения к Интернет разнотипных компьютеров (IBM, Macintosh), работающих под управлением различных операционных систем (Windows, UNIX, MS DOS).

В Интернет имеется несколько уровней протоколов, которые взаимодействуют друг с другом. На нижнем уровне используются два основных протокола: IP (Internet Protocol) – Протокол Интернета и TCP (Transmission Control Protocol) – Протокол управления передачей. Так как эти два протокола тесно взаимосвязаны, то их часто объединяют, и говорят, что:

В Интернете базовым протоколом является TCP/IP. Все остальные многочисленные протоколы строятся на основе именно протоколов TCP/IP.

Протокол TCP разбивает информацию на порции и нумерует все порции, чтобы при получении можно было правильно собрать информацию (подобно разборке деревянного сруба нумеруют бревна, чтобы быстро собрать дом в другом месте). Далее с помощью протокола IP все части передаются получателю, где с помощью протокола TCP проверяется, все ли части получены. Так как отдельные части могут путешествовать по Интернет самыми разными путями, то порядок прихода частей может быть нарушен. После получения частей TCP располагает их в нужном порядке и собирает в единое целое.

Браузеры

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

Адресная строка. В это строку необходимо ввести доменное имя web-сайта к которому вы хотите перейти и нажать кнопку "Переход" или клавишу "Enter".

Уже посещённые адреса можно выбрать в выпадающем меню при нажатии на стрелку рядом с адресной строкой.

Панель инструментов На панели инструментов располагаются кнопки навигации, а также дополнительные функции браузера. Панель инструментов можно настраивать самостоятельно, добавляя и убирая кнопки.

		Эта кнопка осуществляет возврат к предыдущей посещённой странице. Если нажать на стрелке рядом с кнопкой, можно выбрать нужную страницу из списка.
		Эта кнопка позволяет заново открыть те страницы, после посещения которых вы возвращались назад. Если нажать на стрелке рядом с кнопкой, можно выбрать нужную страницу из списка.
		При нажатии на кнопку происходит остановка загрузки страницы и её элементов.
		Эта кнопка позволяет перегрузить страницу заново. Это необходимо в случае сбоя загрузки или когда информация на странице обновляется часто.
		Домашней называется страница, которая открывается автоматически при запуске браузера. Нажатие на эту кнопку возвращает к домашней странице. Её адрес при желании можно поменять в меню "Сервис" - "Свойства обозревателя".
		При нажатии на эту кнопку сбоку откроется панель с папкой "Избранное". В этой папке можно хранить собственную коллекцию ссылок. Быстрый доступ к избранным ссылкам можно получить из главного меню, пункт "Избранное".
		При нажатии на эту кнопку сбоку откроется панель с папкой "Журнал". В этой папке сохраняются все страницы, которые были посещены. Страницы автоматически группируются по сайтам и дням посещения.

Чтобы открыть ссылку в новом окне можно сделать одно из следующих действий.

· На ссылке нажать правой кнопкой мыши, и в контекстном меню выбрать "Открыть в новом окне". · На ссылке нажать левой кнопкой мыши, придерживая клавишу Shift.

Чтобы развернуть страницу на весь экран можно выполнить одно из следующих действий.

Нажать на кнопке "Во весь экран", которая находится на панели инструментов. Нажать клавишу F11.

Чтобы вернуться в обычный режим, повторите действие.

В некоторых случаях необходимо изменить размер шрифтов на странице, например, если у пользователя плохое зрение или дизайнер страницы перестарался с размером шрифтов.

Для этого необходимо выбрать в главном меню "Вид"-"Размер шрифта". В появившемся подменю выбрать один из пяти размеров шрифта (Рис. 8.2).

Рис. 8.2

Если вместо русского текста на странице вы видите нечто вроде "МЕЙНРНПШУ ЯКСВЮЪУ МЕНАУНДХЛН", или вообще китайские иероглифы, то необходимо сменить кодировку. Как правило, браузер сам определяет правильную кодировку, но в некторых случаях необходимо установить её самостоятельно.

Для этого необходимо выбрать в главном меню "Вид"-"Кодировка". В появившемся подменю выбрать одну из кириллических кодировок. Как правило это либо Cyrillic (Windows), либо Cyrillic (KOI-8R) (рис. 8.3).

Рис.8.3

Чтобы сохранить страницу на компьютере, можно воспользоваться меню "Файл"-"Сохранить как...". Затем выбрать папку на жестком диске, дать название сохраняемой страничке и тип сохраняемой информации (HTML-документ с картинками в отдельном каталоге, MHT-файл в котором сохраняются и HTML-документ и все картинки, в виде только HTML-документа или текстового файла).

Чтобы сохранить отдельную картинку, необходимо нажать на ней правой кнопкой мыши и в контекстном меню выбрать "Сохранить рисунок как...".

Что такое HTML

Веб-страница представляет собой документ, содержащий описание ее структуры и содержания, создаваемого посредством команд, сформированных на языке HTML. Эти команды выполняются программой-браузером. Интерпретируя команды HTML, браузер создает визуальное изображение документа, собирая его из отдельных объектов. Веб-мастер создает не сам документ, а лишь описывает его структуру на языке гипертекстовой разметки. Сам документ создается браузером, интерпретирующим команды языка HTML. Для каждой веб-страницы на узле должен быть помещен файл, содержащий документ HTML с ее описанием.

Для создания HTML документа можно использовать специальные среды, все приложения MS Office, текстовые редакторы.

HTML расшифровывается как язык гипертекстовой разметки с его помощью создаются Web-страницы.

Язык разметки HTML позволяет определить внешний вид документа. Для этого в текст документа вставляются специальные коды, или дескрипторы.

Перечислим несколько характеристик HTML:

- HTML разработан специально для Web;

- HTML – это открытый стандарт, не являющийся собственностью какой-либо фирмы. Поэтому HTML можно пользоваться бесплатно;

- HTML доступен простым пользователям;

- HTML включен гипертекст.;

- HTML поддерживает мультимедиа.

Текст и заголовок страницы

Веб-страница состоит из двух частей: тела <body> и заголовка <head>. Название веб-страницы определяется при помощи тега <title>, который размещается между начальным и конечным тегом <head>. Название отображается не в окне браузера, а в его заголовке. Название должно запоминаться легко и отображать содержание страниц.

Тело страницы это тот материал, который отображается в окне веб-браузера. Для размещения содержимого в теле страницы существует две возможности. Текст можно вставить непосредственно в тело страницы либо разбить его на параграфы. Для этого используют тег <p>, который определяет параграф текста и <div>- раздел текста. Для перехода на новую строку текста можно использовать тег <br>.

Набор атрибутов в теге <p> позволяет настраивать форматирование абзаца. Наиболее известным является атрибут align, который может принимать следующие значения:

▪ left - выравнивание текста абзаца по левому краю;

▪ right - выравнивание текста абзаца по правому краю;

▪ center - выравнивание текста абзаца по центру

Заголовки

Заголовки имеют огромное значение, и их шесть типов. Различаются они размером букв и <h1> - самые большие, а <h6> - самые мелкие.

Пример:

<h1>Это самый здоровый заголовок :-)</h1> <h6>А это самый мелкий </h6>

Заголовки, как и абзацы можно выравнивать таким же способом, через align.

Создание линий в HTML

Для разделения текста на части можно воспользоваться горизонтальными линиями. Тег <HR> вставляет в текст горизонтальную разделительную линию. Этот тег имеет следующие атрибуты:

WIDTH – определяет длину линии в пикселях или процентах от ширины окна браузера.

SIZE – определяет толщину линии в пикселях.

ALIGN – определяет выравнивание горизонтальной линии. Атрибут может принимать следующие значения:

left – выравнивание по левому краю документа.

right – выравнивание по правому краю документа

center – выравнивание по центру документа (используется по умолчанию).

NOSHADE – определяет способ закраски линии как сплошной. Атрибут является флагом и не требует указания значения. Без данного атрибута линия отображается объемной.

COLOR – определяет цвет линии. Задается либо RGB-значением в шестнадцатеричной системе, либо одним из 16 базовых цветов. Атрибут работает только в Internet Explorer.

Например:

Вставка комментариев

Комментарии служат для того, чтобы можно было проще разобраться в HTML-коде документа. Они служат пояснениями к отдельным фрагментам кода. Для вставки комментариев используется синтаксис:

<! - - Текстовая часть комментария - - >

Комментарии могут занимать несколько строк:

<! - - Этот комментарий

занимает две строки - - >

Типы списков

Списки – это очень мощное средство структурирования документа. С их помощью можно обеспечить четкую и ясную подачу материала.

В HTML существуют следующие типы списков:

Нумерованный список <OL>

Маркированный <UL>

Список определений <DL>

Нумерованные списки называют упорядоченными. Они создаются с помощью тега <OL></OL>. Каждый элемент списка внутри этого тега определяется с помощью тега <LI>. Синтаксис определения списка имеет вид:

<LI> 1-й элемент списка

<LI> 2-й элемент списка

…….

<LI> Последний элемент списка

</OL>

Атрибут TYPE устанавливает стиль форматирования списка арабскими или римскими цифрами, а также буквами алфавита. Параметр "тип" может принимать значения, приведенные ниже.

Для изменения нумерации элемента внутри списка следует установить значение параметра для атрибута TYPE в соответствующем этому элементу теге <LI>, используя конструкцию:

Последующие элементы списка будут иметь нумерацию, указанную в атрибуте TYPE тега <OL>.

Значение параметра "тип"	Стиль отображения
	Нумерация арабскими цифрами (применяется по умолчанию)
а	Строчные буквы латинского алфавита
А	Прописные буквы латинского алфавита
i	Нумерация строчными римскими цифрами
I	Нумерация прописными римскими цифрами

В отличие от нумерованных в маркированных списках перед каждым элементом отображается маркер. Создание маркированных списков производится с помощью HTML-конструкции вида:

<LI TYPE= ТИП_МАРКЕРА>элемент списка

<LI>элемент списка

…

<LI TYPE= ТИП_МАРКЕРА>элемент списка

</UL>

Для маркированных списков могут быть применены различные типы маркеров:

Тип маркера	Изображение в окне браузера
Disk	Заполненный кружок
Square	Заполненный квадратик
Circle	Незаполненный кружок

Списки определений служат для создания абзацев, определяющих термин, указанный в элементе списка. Элементы списка определений состоят из названия элемента и его описания, поэтому такие списки в какой-то мере напоминают толковые словари. Названия элемента устанавливается с помощью тега <DT>, а его определение с помощью тега <DD>. Для определения списка определений применяется следующая синтаксическая конструкция:

<DL>

<DT> Элемент списка (термин)

<DD> Определение элемента списка

<DT> Следующий элемент списка (термин)

<DD>Определение элемента списка

…

<DT> Последний элемент списка (термин)

<DD>Определение элемента списка

</DL>

Таблицы в HTML

Одним из наиболее мощных и широко применяемых в HTML средств являются таблицы. В HTML таблицы используются не только традиционно, как метод представления данных, но и как средство форматирования Web-страниц.Для размещения кода таблицы HTML служит контейнер <TABLE> </TABLE>. При описании таблицы нужно указать количество строк и столбцов, а также их расположение. Строки определяются с помощью теговой пары <TR></TR>.Каждый контейнер <TR> содержит одну строку таблицы. Внутри этого контейнера помещаются описания ячеек. Для этого служит пара <TD></TD>, а также теги <TH></TH> и атрибут COLSPAN. Внутри контейнера TD помещаются данные, записываемые в ячейки, а внутри контейнера TH – заголовки столбцов или названия строк таблицы. Контейнер TD размещается внутри контейнера строк таблицы. Если за тегами <TD> и <TH> следуют другие теги <TD>, <TH> или <TR>, то они считаются закрытыми и закрывать их необязательно.При создании таблицы, кроме определения количество строк и столбцов, следует также определить такие общие характеристики, как надпись, подпись, рамка, интервалы между ячейками.Для определения надписи (названия таблицы) служит контейнер <CAPTION>.Для определения рамки предназначен атрибут BORDER=n, где n – толщина линии рамки, выраженная в количестве пикселей (по умолчанию принимает значение, равное 1).Для определения ширины таблицы служит атрибут WIDTH=ЗНАЧЕНИЕ, где ЗНАЧЕНИЕ указывает абсолютное значение ширины в пикселях или относительное в процентах от ширины экрана, например:<TABLE BORDER=2 WIDTH=600><TABLE BORDER=2 WIDTH="60%">Определение количества столбцов производится посредством атрибута COLS=n, где n – целое число.

Для определения интервалов в таблице служат атрибуты и CELLPANDING. Атрибут CELLSPASING – определяет расстояние между ячейками, выраженное в пикселях, а атрибут устанавливает расстояние между границей ячейки и ее содержимым. Например:

<TABLE BORDER=2 WINDTH=600 CELLSPASING=4 CELLPANDING=5 >

Типы гиперссылок

Существуют три основных типа гиперссылок: внутренние, внешние и относительные.

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

Внешние ссылки – это ссылки на другие Web-сервера.

Относительные ссылки – это на другие Web-страницы, расположенные на одном сервере со страницей.

В каждой ссылке содержится URL (Uniform Resource Locator) – унифицированный локатор ресурсов. URL – это адрес Web-страницы.

URL состоит из двух основных элементов: типа протокола и собственного адреса.

Тип протокола определяет вид ресурса Internet, с которым устанавливается связь. Самым распространенным протоколом является http:// - протокол передачи гипертекста, с помощью которого по Web передаются HTML-документы.

Собственного адреса – это имя файла, каталога или компьютера.

Например:

http://www.huracan-oreiro.narod.ru/read.html

В этом примере префикс http:// указывает тип используемой службы Интернета, www.huracan-oreiro - представляет имя сервера. Компонент narod.ru определяет домен, в котором находится сервер.

Создание относительных ссылок

Относительные ссылки – это ссылки на другие Web-страницы, расположенные на том же Web-сервере. Ссылки создаются, как и в предыдущем случае, с помощью контейнерного тега <A>.

Для создания гиперссылки используется формат:

<A HREF=" URL">текст ссылки</A>

При создании относительной ссылки нет необходимости включать URL доменное имя.

СОДЕРЖАНИЕ РАБОТЫ

Ознакомиться с теоретическим материалом.
Загрузить программу Блокнот.
Создать HTML-документ, который в окне Web-браузера отобразится так, как показано на примере.
Сохранить набранный текст в файл с расширением *.html
Открыть файл в окне браузера и, если есть недостатки, устранить их.
Выполнить одно из заданий, выданное преподавателем. Открыть файл в окне браузера.

Задание №1

Создайте HTML-документ, который в окне браузера отображается, как показано на рис.8.4.

Рис.8.4

Листинг задания №1

<HTML>

<HEAD>

<! - - Строка заголовка - - >

<TITLE>Мой первый HTML-документ</TITLE>

</HEAD>

<BODY>

<FONT size=5 color=red><p align=center><b>Типы интернет-рекламы</p></b></FONT>

<br>

<FONT color=red size=5><cite>Медийная</cite><tt> (обычная баннерная)</tt></FONT>

<br>

<FONT size=4 color=blue><em>- Баннерные сети

<br>- Посещаемые сайты<br>- Порталы</em></FONT>

<br>

<FONT color=red size=5><cite>Контекстная</cite> <tt>(баннерная, текстовая)</tt></FONT>

- Узкоспециализированные сайты

- Каталоги

- Тематические баннепные сети</big></PRE>

<FONT color=red size=5><cite>Поисковая</cite> <tt>(обычно текстовая)</tt></FONT>

<P><i style="color:blue">-Поисковые системы<br>

- Системы поиска по сайту

</BODY>

</HTML>

Задание №2.

Создайте HTML-документ, который в окне браузера отображается, как показано на рис.8.5.

Рис.8.5.

Листинг задания №2

<html>

<title>Списки</title>

<h1>Архитектурно строительный институт</h1>

<h2><center>Маркированные списки</center></h2>

<ul>

<li type=disc>290300

<li type=square>290500

<li type=circle>290100

<li>072000

<li>291400

<li>340100

<li>311100

</li>

</ul>

</P>

<p><h1>Архитектурно строительный институт</h1>

<h2><center>Нумерованные списки</center></h2>

<li>290300

<li>290500

<li>290100

<li>072000

<li>291400

<li>340100

<li>311100

</li>

</ul>

</p>

<p><h1>Архитектурно строительный институт</h1>

<h2><center>Списки определений</center></h2>

<dl>

<dt>Институт осуществляет подготовку специалистов по следующим специальностям

<dd>290300

<dd>290500

<dd>290100

<dd>072000

<dd>291400

<dd>340100

<dd>311100

</ul>

</p>

</html>

Задание №3

Создайте HTML-документ, который в окне браузера отображается, как показано на рис.8.6.

Рис. 8.6.

Листинг задания №3

<HTML>

<HEAD>

Базы данных</FONT></CAPTION>

<TR><TD bgColor=orange><DIV align=center><FONT

face="Times New Roman"

color=#800000 size=4>Название БД</FONT></DIV></TD>

<TD bgColor=orange><DIV align=center><FONT face="Times New Roman"

color=#800000 size=4 >Количество документов</FONT></DIV></TD>

<TD bgColor=orange><DIV align=center><FONT face="Times New Roman" color=#800000 size=4>Стоимость поставки ($)</FONT></DIV> </TD></TR>

<DIV align=center><FONT face="Times New Roman" color=#ff0000

size=2>Федеральное и региональное <br>законодательство</FONT></DIV>