Добавил:

Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.

Вуз:

Московский государственный университет приборостроения и информатики

Предмет:

[НЕСОРТИРОВАННОЕ]

Файл:

Комолова.doc

Скачиваний:

Добавлен:

27.08.2019

Размер:

1.1 Mб

Скачать

☆

<<< < Предыдущая 1 2 3 4 5 6 7 8 9 10 11 12 13 1415 / 2115 16 17 18 19 20 21 > Следующая >>>

Interfaces Так, например, если проверить связь с сайтом электронной почты www.

mail.ru, необходимо в командной строке написать команду трассировки trace:

C:\>trace www.mail.ru

В результате будет указана трассировка маршрута с указанным числом пунктов

прохождения информации

Подведем итоги

В этом уроке рассказано о подготовке и публикации собственного веб-сайта, пе-

речислены адреса бесплатных веб-хостов, в качестве примера описана процедура

создания сайта на примере сайта Народ Ру Во второй части урока рассказывает-

ся об основах поиска информации в Интернете Урок 15 Еще раз с начала

В этом уроке рассматриваются теги, которые находятся в самом на-

чале веб-страницы, а именно теги <!DOCTYPE>, <LINK> и <META>.

Урок224 Урок 15. Еще раз с начала

Версия языка HTML

Первым тегом созданной начинающим пользователем компьютера веб-страницы

является тег <HTML> Но стоит только сохранить веб-страницу под новым именем,

в ее начале появляется новая строка, начинающаяся с тега <!DOCTYPE>

Тег <!DOCTYPE> предоставляет сведения о версии языка HTML, используемой в те-

кущем документе Эти сведения размещаются в первой строке документа в форме

SGML-объявления Тег <!DOCTYPE> должен быть первым тегом в документе Этот

тег впервые появился в HTML версии 2 0

Теоретически тег <!DOCTYPE> должен помочь веб-серверу выбрать способ обра-

ботки документа, информируя его о том, какие дескрипторы могут находиться на

странице, однако в настоящее время он обычно игнорируется браузерами, поэто-

му, строго говоря, указывать его не обязательно Синтаксис:

<!DOCTYPE HTML элемент_верхнего_уровня уровень_доступа

"Признак_регистрации//организация//тип_объекта//метка//Код_языка""URI">

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">

Ниже перечислены параметры тега <!DOCTYPE>

Элемент верхнего уровня объявляется в определении типа документа

(Document Type Definition, DTD) Так как язык HTML развился из стан-

дартного обобщенного языка описания документов (Standard General Markup

Language, SGML), являясь его производной, созданной для разметки тексто-

вых документов, этим и объясняется необходимость задания типа документа

Документы, в которых могут встречаться те или иные элементы, были отнесе-

ны к различным типам документов (document type) Чтобы описать элементы

разметки документа, достаточно выбрать стандартное определение типа доку-

мента Для HTML-документа используется значение HTML

Поскольку HTML-документы являются общедоступными, в качестве уровня

доступа используется значение PUBLIC

Признак регистрации указывает на то, зарегистрирована (+) или нет (–) дан-

ная организация в ISO Консорциум W3C (World Wide Web Consortium) в

Iso не зарегистрирован, поэтом нужно указывать знак – (минус)

В качестве организации указывается организация, ответственная за создание и

поддержку DTD За поддержку определения типа HTML-документа отвечает

консорциум W3C, поэтом используется значение W3C

В случае языка HTML в качестве типа объекта используется значение DTD

Метка определяет версию языка HTML Для HTML 4 0 используется значение

HTML 4.0, HTML 4.0 Transitional или HTML 4.0 Frameset

Код языка — двухбуквенное обозначение, принятое в ISO Например, код ан-

глийского языка — EN

Идентификатор URI определяет расположение DTD HTML 4 0 поддерживает

следующие идентификаторы URI: META-информация 225

ht tp://www.w3.org/TR/REC-html40/strict.dtd;

http://www.w3.org/TR/REC-html40/loose.dtd ;

ht tp://www.w3.org/TR/REC-html40/frameset.dtd;

http://www.w3.org/TR/REC-html40/HTMLlat1.ent ;

http://www.w3.org/TR/REC-html40/HTMLsymbol.en t;

http://www.w3.org/TR/REC-html40/HTMLspecial.ent

Общая схема документа с тегом <!DOCTYPE> выглядит следующим образом:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html><head><title>ЗАГОЛОВОК ДОКУМЕНТА</title></head>

<body>"Тело" документа, содержащее теги, которые позволяют управлять информацией,

выводимой на экран </body></html>

META-информация

Кроме обычных тегов существуют еще и так называемые META-теги Они не ото-

бражаются браузером, но могут содержать некую служебную информацию, зна-

чимую для поисковых систем (например, ключевое слово, указание на авторство,

описание)

Как и тег <!DOCTYPE>, META-информация может появляться автоматически по-

сле первого сохранения страницы под новым именем, располагаясь между тегами

<HEAD> и </HEAD>:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html><head><title>ЗАГОЛОВОК ДОКУМЕНТА</title>

<body>"Тело" документа, содержащее теги, которые позволяют управлять информацией,

выводимой на экран </body></html>

Тег <META> служит для размещения дополнительной информации о веб-странице,

включая данные о документе, его авторе, дате создания, списки ключевых слов

для поисковых машин и т п Общий синтаксис META-тега:

Еще один вариант:

Разница между этими двумя атрибутами в том, что атрибут NAME не обрабатыва-

ется браузером, а HTTP-EQUIV обрабатывается

Атрибут NAME

Ниже представлены примеры тега <META> с атрибутом NAME

Описание содержимого документа:

Описание ресурса рекомендуется делать небольшим (не более 250–300 симво-

лов), например:

для предоставления справочной информации по html">226 Урок 15. Еще раз с начала

Спи сок ключевых слов для поисковых систем:

Ключевые слова в списке пишутся через пробел или запятую Эти слова нуж-

ны поисковым машинам для индексации страницы в своем каталоге, например:

javascript css CSS VBScript vbscript VRML vrml php

PHP Perl perl теги атрибуты листинг браузер">;

Имя автора документа, адрес его электронной почты, домашний адрес, другие

данные:

Название программы, с использованием которой создан документ:

Время «устаревания» документа (то есть срок годности):

Адрес электронной почты:

Описание авторских прав на документ:

Атрибут HTTP-EQUIV

Ниже представлены примеры тега <META> с атрибутом HTTP-EQUIV

Следующая запись позволяет вернуться через заданный промежуток времени

на определенный адрес

URL=http://www.piter-press.ru">

В данном случае сразу после загрузки страницы браузер перейдет на адрес

http://www.piter-press.ru

MIME-тип содержимого и его кодировка:

charset=windows-1251">

В данном случае в качестве MIME-типа указано значение text/html, то есть ги-

пертекст, а в качестве кодировки — значение windows-1251 Вообще говоря, явно

указывать кодировку не рекомендуется Браузеры и сами неплохо справляются

с ее выбором

Время «устаревания» документа (то есть срок годности):

Срок годности указывается в формате RFC-850 (стандарт электронной почты):

Mon — день недели;

7 Nov — день месяца и месяц;

2004 — год; Связь веб-страницы с дополнительными файлами 227

10:0 0:00 — время (часы, минуты и секунды);

GMT — временной пояс (в данном случае время указано московское)

По истечении указанной даты документ будет удален из локального кэша

и при повторном обращении заново запрошен из сети В этой процедуре уча-

ствуют и браузер, и сервер Если указывается нулевая дата, документ удаля-

ется сразу после загрузки, то есть вообще не сохраняется в кэше

Связь веб-страницы с дополнительными

файлами

Связь текущей страницы с другими файлами задается тегом <LINK> Основное

применение — обращение к описанным в отдельном файле стилям Тег <LINK>

вставляется между тегами <HEAD>:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html lang=en><head><title>Css units</title>

href="mailto:liam@htmlhelp.com"><link href="./" rel=start><link href="properties.

html" rel=up><link href="/glossary/glossary.html" rel=glossary><link href="/

css rel=stylesheet><link media=aural href="css units1.files/aural.css" type=text/css

rel=stylesheet>

name=description>

frequently asked questions, internet help, site creation, page creation, site

design, page design, site layout, page layout, html, hypertext markup language,

hyper text markup language, questions, graphics, www pages, html 3.2, help files,

tutorials, articles, reference material, guide, style, stylesheet, style sheet, css,

cascading style sheets, units, color, colour, colors, colours, length, lengths,

percentage, percentages, value, values, url, uniform resource locator, rgb, answer"

name=keywords>

<h2><img height=83 alt="the web design group"

src="css units1.files/wdglogo1.gif" width=250></h2>

Тег <LINK> не имеет закрывающего тега, но имеет обязательные атрибуты: HREF

(целевой адрес), TYPE (тип данных) и либо REL (отношение целевого документа,

заданного атрибутом HREF, к текущей странице), либо REV (обратное отношение)

Подведем итоги

В этом уроке рассказано, что начало программы на языке HTML содержит важ-

ную информацию и иногда может быть довольно сложным Урок 16 Слои

В этом уроке рассматриваются слои и способы их включения в веб-

страницы. Слои впервые появились в программе Adobe Photoshop,

а спустя некоторое время их стали использовать в программах

AutoCAD, CorelDRAW и других.

Урок Понятие слоя 229

Понятие слоя

Понятие слоя (layer) обычно иллюстрируют с помощью листа прозрачной бума-

ги (кальки) На каждом из таких листов может находиться графический или тек-

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

друг на друга Преимущество слоистой структуры состоит в том, что можно редак-

тировать код программы каждого слоя отдельно, не затрагивая других частей кода

на других слоях Стопку слоев также сравнивают с колодой игральных карт Их,

как и карты, можно перетасовывать

Слои украшают веб-страницу С появлением браузера Netscape Communicator

версии 4 технологию слоев стали применять непосредственно для оформления

веб-страниц Слой можно описать тегом <LAYER> (для Netscape Communicator)

или <DIV> (для Internet Explorer) и наполнить нужным содержанием для после-

дующего точного позиционирования на странице Слоям можно задавать абсо-

лютные координаты, относительную глубину, фон и т д Для создания динамиче-

ских слоев используется язык JavaScript Можно, например, нарисовать несколь-

ко картинок, представляющих кадры анимации, расположить их на разных слоях

и затем, поочередно изменяя атрибут видимости слоев, показывать картинки зри-

телю, создавая эффект анимации Для перемещения картинки по экрану можно

просто менять позицию слоя, на котором она расположена

Создание слоя с помощью тега <DIV>

Парный тег <DIV> предназначен для позиционирования текстового или графиче-

ского слоя Для этого служит атрибут ALIGN, который может иметь значения LEFT

(по левому краю), CENTER (по центру) или RIGHT (по правому краю) Кроме этого

атрибута, тег <DIV> может иметь и другие атрибуты

Атрибут CLASS. Атрибут CLASS следует указывать, если при обработке тега

требуется использовать свойства того или иного класса Например, чтобы одну

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

следующий фрагмент кода:

<div class="italicfont"> Отображение текста курсивом </div>

<div class="boldfont"> Отображение текста полужирным шрифтом </div>

Атрибут ID Атрибут ID позволяет использовать глобальные идентификато-

ры Идентификатор похож на класс, но вместо точки перед именем идентифи-

катора указывается символ #:

<head>

<!--

#italicfont {font-weight: bold}

#boldfont {font-style: courier}

-->

</style>

</head>230 Урок 16. Слои

После описания идентификатора его следует включить в состав тега:

<div id="italicfont"> Отображение текста курсивом </div>

<div id="boldfont"> Отображение текста полужирным </div>.

Идентификаторы применяют, если стили должны использоваться в документе

однократно В противном случае лучше задействовать классы

Атрибут STYLE Атрибут STYLE содержит информацию о стиле (отступах сле-

ва, справа, сверху, снизу, о положении на странице), например:

<div style="left: 50px; position: absolute; top: 70px">.

На рис 16 1 показан пример использования слоев (листинг 16 1)

Рис 16 1 Слои на веб-старнице

Листинг 16 1 Пример использования слоев

<html>

<body>

ПЕТРОГРАД ПЕТРОГРАД КРУЖЕВНОЙ УЗОР ОГРАД <br>

</nolayer>

Содержимое слоя

</div>

</nolayer>

</layer>

ПЕТРОГРАД ПЕТРОГРАД КРУЖЕВНОЙ УЗОР ОГРАД <br>

</body>

<html>

На рис 16 2 показан пример наложения двух текстовых слоев друг на друга (лис-

тинг 16 2) Создание слоя с помощью тега <DIV> 231

Рис 16 2 Наложение текстовых слоев друг на друга

Листинг 16 2 Пример наложения текстовых слоев друг на друга

<h1>Заголовок 1-го уровня</h1>

<p>Все надписи сделаны внутри тегов DIV</p>

<i>C помощью каскадных листов стилей можно создать свой стиль для всех страниц сайта,

придающий ему собственное лицо и делающий его узнаваемым.</i> </h2></div>

<font color=#ff69b4 size=3>Это узор страницы Это узор страницы Это

узор страницы Это узор страницы Это узор страницы

Это узор страницы Это узор страницы Это узор страницы

Это узор страницы Это узор страницы

Это узор страницы Это

узор страницы Это узор страницы Это узор страницы

Это узор страницы& nbsp; Это узор

страницы& nbsp; Это узор страницы Это

узор страницы Это узор страницы Это узор

страницы Это узор страницы

Это узор страницы Это узор страницы Это узор страницы

Это узор страницы Это узор страницы Это узор страницы Это узор

страницы Это узор страницы Это узор страницы

Это узор страницы Это узор страницы

Это узор страницы Это узор страницы Это узор страницы

продолжение 232 Урок 16. Слои

Листинг 16 3 (продолжение)

Это узор страницы Это узор страницы Это узор страницы

Это узор страницы Это узор страницы Это узор

страницы Это узор страницы

Это узор страницы Это узор страницы Это узор

страницы Это узор страницы Это узор страницы

Это узор страницы Это узор

страницы Это узор страницы Это узор страницы

Это узор страницы Это узор стран

ицы Это узор страницы Это узор страницы

Это узор страницы Это узор страницы Это узор страницы Это

узор страницы Это узор страницы Это узор страницы Это

узор страницы Это узор страницы Это узор страницы

Это узор страницы Это узор страницы&n

bsp; Это узор страницы Это узор страницы

Это узор страницы Это узор страницы &nbsp

; Это узор страницы Это узор страницы

Это узор страницы Это узор страницы

Это узор страницы Это узор страницы </font></

body></html>

Еще один пример использования тега <DIV> показан на рис 16 3 (листинг 16 3)

Рис 16 3 Пример использования тега <DIV>

Листинг 16 3 Пример использования тега <DIV>

<html><head><title>Работа со структурированным текстом</title></head>

<h1> Каменноостровский проспект </h1>

Фотография, выровненная по центру блока Создание слоя с помощью тега <LAYER> 233

<p align=right>Здесь выравнивание по правому краю

</div>

<font color=#ff69b4 size=3>Это узор страницы Это узор страницы Это

узор страницы Это узор страницы Это узор страницы

Это узор страницы Это узор страницы Это узор страницы

Это узор страницы Это узор страницы

Это узор страницы Это

узор страницы Это узор страницы Это узор страницы

Это узор страницы Это узор

страницы Это узор страницы Это

узор страницы Это узор с раницы Это узор

страницы Это узор страницы

Это узор страницы Это узор страницы Это узор страницы

</font> </body></html>

Создание слоя с помощью тега <LAYER>

Тег <LAYER>, как и тег <DIV>, предназначен для описания слоев, однако он не под-

держивается браузером Internet Explorer А так как доля пользователей Netscape

Navigator неуклонно снижается, применение тега <LAYER> постепенно теряет

смысл Ниже перечислены атрибуты тега <LAYER>

Атрибут BACKGROUND Атрибут BACKGROUND задает фон слоя, например:

background="anyimage.gif"

Атрибут HEIGHT Атрибут HEIGHT определяет высоту слоя в пикселах, напри-

мер:

height="100"

Атрибут WIDTH Атрибут WIDTH определяет ширину слоя в пикселах, напри-

мер:

width="100"

Атрибут ID Атрибут ID является идентификатором (именем) слоя Напри-

мер, следующая запись описывает слой с именем MyLayer1:

id=MyLayer1

Атрибут CLIP Атрибут CLIP задает координаты границ слоя, например:

clip="10,10,50,50"

Атрибут TOP Атрибут TOP задает сдвиг слоя относительно верхнего края стра-

ницы, например:

top=20

Атрибут LEFT Атрибут LEFT задает сдвиг слоя относительно левого края стра-

ницы, например:

left=100234 Урок 16. Слои

Создание динамического слоя

Более сложный код программы, написанный с использованием языка JavaScript,

представлен в листинге 16 4 На рис 16 4 слева показана исходная надпись, а спра-

ва — надпись после наведения на нее указателя мыши Когда указатель оказывает-

ся на надписи, цвет фона, на котором размещается надпись, меняется

Рис 16 4 Изменение цвета фона надписи (слева исходная надпись, справа надпись

после наведения на нее указателя мыши)

Листинг 16 4 Пример создания динамического слоя

<html><head><title>ДИНАМИЧЕСКИЙ СЛОЙ</title></head>

<body>

<layer name=mylayer bgcolor="green" top=50 left=50

onmouseover="colorlayer('blue')"

onmouseout="colorlayer('white')">

</nolayer>

<p><font size="72">динамический слой</font></p>

</div>

</nolayer>

function colorlayer(changeto)

{ bgcolor=changeto }

</script>

</layer>

sub mydiv_onmouseover()

document.all.MyDiv.style.backgroundcolor="blue"

end sub

sub mydiv_onmouseout()

document.all.MyDiv.style.backgroundcolor="green"

end sub

</script>

</body>

</html> Подведем итоги 235

Подведем итоги

В этом уроке рассказано о том, что такое слои и с помощью каких тегов их можно

создавать, в частности показаны примеры использования тегов <LAYER> и <DIV>

Более сложные динамические слои создаются средствами языка JavaScript Урок 17 Каскадные листы

стилей

Этот урок представляет собой введение в большую и сложную тему

каскадных листов стилей (Cascading Style Sheets, CSS).

Урок Поддержка стилей 237

Поддержка стилей

Стиль определяет особенности форматирования и отображения элементов веб-

страниц Можно задать стиль для начертания шрифта, для цвета фона, для цвета

гипертекстовых ссылок, для полей, для расположения объектов на странице и т д

Стили HTML-, XHTML- и XML-документов задаются с помощью каскадных ли-

стов стилей (CSS)

CSS предоставляет разработчику новые возможности:

вместо того чтобы кодировать каждую веб-страницу, можно создать один файл,

содержащий листы стилей, и ссылаться на него из всех HTML-документов;

листы стилей обеспечивают дополнительную степень контроля над шрифта-

ми, цветом фона и другими характеристиками, влияющими на отображение

документа;

листы стилей позволяют достаточно быстро и просто изменять внешний вид

веб-страниц;

поскольку становится меньше объем документов, уменьшается время их за-

грузки

Формат записи стилевых правил CSS похож на табличное представление данных

Заголовок таблицы напоминает описание элемента, класса или идентификатора

стиля, в качестве ячеек и рядов таблицы выступают свойства и значения стилей,

например:

a.menu:link

{

color: #c2a1a0;

font-family: arial;

font-size: 14px;

font-weight: bold;

text-decoration: none

}

В соответствие с правилами HTML при использовании стилей в коде необхо-

димо включать в заголовок документа (в тег <HEAD>) соответствующее META-

определение:

Стили предоставляют разработчику максимальный уровень контроля над особен-

ностями отображения веб-страницы Разработчик может задавать отдельные сти-

ли для каждого абзаца, заголовка, горизонтальной линии, ячейки таблицы и дру-

гих элементов

Уровни CSS

Если история языка HTML уходит корнями в далекий 1989 год, то технология

CSS представляется нам более «молодой» Впервые о ней стало известно в мае 238 Урок 17. Каскадные листы стилей

<<< < Предыдущая 1 2 3 4 5 6 7 8 9 10 11 12 13 1415 / 2115 16 17 18 19 20 21 > Следующая >>>

Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]

#
01.12.2018386.05 Кб18Киса.doc
#
09.04.2015435.71 Кб15Кластеры.doc
#
09.04.2015359.82 Кб26кол.docx
#
20.08.2019200.7 Кб8колеб.контура.doc
#
15.03.2016222.72 Кб48Колебания типа E в прямоугольном объемном резонаторе.docx
#
27.08.20191.1 Mб16Комолова.doc
#
12.07.201960.12 Кб18комп.преступление2.docx
#
09.04.2015463.87 Кб35Компьютерные сети Лабораторная 01.doc
#
20.04.20191.19 Mб47Конспект лекций 4306 - 2007.doc
#
14.03.2016176.13 Кб182Конспект лекций материаловед.2...doc
#
09.04.20154.36 Mб509Конспект лекций от мешка 1.doc