Смекни!
smekni.com

Разработка web сайта на основе HTML с использованием JavaScript (стр. 16 из 18)

В меню «Файл» есть команда «Сохранить как», которая используется для копирования текущей страницы в папку, выбранную пользователем. При этом можно выбрать формат файла: HTML или текстовый. В отличие от MSIE, который позволяет сохранить Web-страницу вместе с рисунком, NN копирует только основной файл страницы. Сохранение файла страницы требуется только в определённых случаях, так как вся страница автоматически записывается в кэш. Текстовый формат удобен в тех случаях, когда надо распечатать только текст страницы, не отягощая его элементами оформления и рисунками. Зато, если откроете страницу в редакторе Netscape Composer, то можно сохранить её в новой папке с рисунками.

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

Терминология

Англоязычное программное обеспечение попадало в нашу страну разными путями, и в вычислительной технике складывалась уникальная лингвистическая ситуация. Существует огромное количество терминов, которые соответствуют по произношению английским словам. Программисты и электронщики разговаривают на своём, хорошо понятном языке. Заимствованные слова имели только одно значение, и это было удобно. Такая система прижилась. Любые попытки вводить отечественную терминологию не имели успеха. Яркий пример- название клавиш. Клавиатура так и осталась нерусифицированной. Подобные феномены объясняются тем, что до недавнего времени никто серьёзно не занимался локализацией фирменного программного обеспечения. Теперь положение изменилось. Появилось много программных продуктов, использующих русский язык. Возникли чисто русские термины: «папка», «карман», «ярлык», «пиктограмма»… В этих случаях теряется однозначность терминов, возникли двойные термины: Internet и Интернет.

В сфере гипертекстовых технологий в этом смысле обстоит иначе. Никто не называет браузер «просматривателем», а для «World Wide Web» есть красивое русское название «Всемирная паутина». Видимо, в каждом случае необходимо своё решение: использовать русское слово или заимствовать английское. Гипертекст породил много специальных терминов.

Элемент (element) - конструкция языка HTML.Это контейнер, содержащий данные и позволяющий отформатировать их определённым образом. Любая Web-страница представляет собой набор элементов. Одна из основных идей гипертекста - возможность вложения элементов.

Тег (tag) – начальный или конечный маркеры элемента. Теги определяют границы действия элементов и отделяют элементы друг от друга. В тексте Web- страницы теги заключаются в угловые скобки, а конечный тег всегда снабжается косой чертой.

Атрибут (attribute) – параметр или свойство элемента. Это переменная, которая имеет стандартное имя и которой может присваиваться определённый набор значений: стандартных или произвольных. Предполагается, что символьные значения атрибутов заключаются в кавычки, но некоторые браузеры позволяют не использовать кавычки. Это объясняется тем, что тип атрибута всегда известен заранее. Атрибуты располагаются внутри начального тега и отделяются друг от друга пробелами.

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

Фрейм (frame) –этот термин имеет два значения. Первое- область документа со своими полосами прокрутки. Второе - одиночное изображение в сложном (анимационном) графическом файле (по аналогии с кадром кинофильма).

Примечание - вместо термина «фрейм» в специальной литературе и локализованных программных продуктах иногда можно встретить термин «кадр» или «рамка».

HTML – файл или HTML страница – документ, созданный в виде гипертекста на основе языка HTML. Такие файлы имеют расширения htm или html. В гипертекстовых редакторах и браузерах эти файлы имеют общее название «документ».

Апплет (applet)- программа, передаваемая на компьютер клиента в виде отдельного файла и запускаемая при просмотре Web- страницы.

Скрипт или сценарий (skript) – программа, включенная в состав Web- страницы для расширения её возможностей. Браузер Internet Explorer в определённых ситуациях выводит сообщение: «Разрешить выполнение сценариев на странице?». В этом случае имеются в виду скрипты.

Расширение (extension) – элемент, не входящий в спецификацию языка, но использующийся, обеспечивая возможность создания нового интересного эффекта форматирования.

CGI ( Common Gateway Interface) – общее название для программ, которые, работая на сервере, позволяют расширить возможности Web- страниц. Например, без таких программ невозможно создание интерактивных страниц.

Программный код или код – аналог понятия «текст программы».

Код HTML- гипертекстовой документ в своём первоначальном виде, когда видны все элементы и атрибуты.

World Wide Web, WWW или WebВсемирная паутина, распределённая система доступа к гипертекстовым документам, существующая в Интернете, HTML является основным языком для создания документов в WWW. Изучая его, мы изучаем часть этой системы, хотя область применения языка намного шире

Web – страница – документ (файл),подготовленный в формате гипертекста и размещённый в World Wide Web.

Сайт (site) – набор Web –страниц, принадлежащих одному владельцу.

Браузер (browser) – программа для просмотра Web – страниц.

Пользовательский агент (user agent) – браузер или другая программа, работающая на компьютере – клиенте.

Загрузка (downloading) – копирование файлов с сервера на компьютер – клиент.

URL ( Uniform Resource Locator ) – универсальный указатель ресурса – адрес некоторого объекта в Интернете. Типичный URL для WWW имеет вид: http:// www, название, домен/ имя файла.

Здесь название – это часть адреса, который часто употребляется для обозначения владельца сайта, а домен – обозначение крупного «раздела» Интернета: страны, области деятельности и т. д. URL используется для того, чтобы указать конкретную Web – страницу или графический файл в гиперссылках, а также везде, где требуется однозначно определить местоположение Web – страницы или файла.

Базовый URL – часть адреса, которая является общей для всех ссылок текущей Web –страницы.

Базовый цвет – каждый цветовой оттенок на экране монитора получается соединением трёх базовых цветов: красного, зелёного, синего.

Цветовой канал – интенсивность красного, зелёного, синего цвета на экране монитора. Цвет каждого пиксела определяется как комбинация этих трёх величин.

Гамма – коррекция – создание нелинейной зависимости между реальной интенсивностью базового цвета и полученной яркостью на экране монитора. Изображения, полученные без гамма – коррекции, оказываются более тёмными, так как монитор воспроизводит различные градации яркости не линейно по отношению к их числовому выражению. Изменение параметра «гамма» часто используют в графических редакторах при работе с изображением.

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

Листинг сайта:

<html>

<HEAD>

<TITLE>Школа №100</title>

<META content="text/html; charset=windows-1251" http-equiv=Content-Type>

<META content="" name=Description>

<META content="" name=Keywords>

<META content=Nikolay name=Author>

<SCRIPT language=JavaScript1.2

src="search/search.js"></SCRIPT>

<SCRIPT language=JavaScript1.2

src="search/searchEngine.js"></SCRIPT>

<STYLE>

p,span,form,input,hr,textarea{

font-family: Tahoma, Verdana, Arial, Sans serif;

font-size: 11px;

margin: 0px;padding: 0px;

vertical-align: middle;

}

.vmarg{margin-top:4px;}

.hmarg{margin-left:5px;margin-right:5px;}

.userData {BEHAVIOR: url(newhome0.htm)}

img {margin: 0px;padding: 0px;}

.checkbox{border:none;width:17px;height: 11px;vertical-align: middle;text-align: left;margin:2px;}

.b{font-weight:bold;}

.select{height: 21px; vertical-align:top;border:#A2B1C9 1px solid;background-color: #FFFFFF;}

.button{height: 21px; vertical-align:top; font-family: Verdana, Arial, Sans serif; font-size:10px;}

.but{height: 21px; vertical-align:bottom;font-family: Verdana, Arial, Sans serif; font-size:10px;}

input,textarea{border:#A2B1C9 1px solid;height: 21px; vertical-align:bottom;font-family: Verdana, Arial, Sans serif; font-size:11px;}

.head{background-color: #084D6C;}

.height1{height: 1px;}

.headline{background: #A7C1DD; padding: 0px; margin-top:2px;margin-bottom:2px;}

.headline_m{padding: 0px; margin:0px;}

.headline1{text-align: left; color: #FFFFFF; font-weight: bold; margin: 2px; margin-left:3px;}

.text{text-align:justify;padding: 2px; margin: 2px; color: #26486E;}

a{text-decoration:none;}

a:hover {text-decoration:none;}

a.nav{color:#FFFFFF;}

a.nav:hover{color:#FF0000;}

a.copyr:visited{color:#074C6B;text-decoration:none;}

a.copyr:hover{color:#074C6B;text-decoration:underline;}

a.copyr{color:#074C6B;}

.w{color:#FFFFFF;}

.r{color:#FF0000;}

a.podrobnee{color: #AB7A2C; padding: 10px;}

a.podrobnee:hover{ text-decoration: underline; }

.mi1{padding: 4px; background-color: #5FA4DE;}

.mi{padding: 2px; background-color: #4D81BA; border-bottom: 1px solid White; padding-left: 4px; }

.mi2{padding: 2px; padding-left: 4px; }

.mlink{padding: 0px; background-color: #529ADA;}

a.al{

color:#FFFFFF;

background-image:none;

width:181px;

height:43px;

text-align:left;

font-weight:bold;

padding: 2px 5px 0px 10px;

border-bottom: 1px solid #FFFFFF;

}

a.al:hover{color:#771C00; background-image:url(but_on00.gif); height:43px; width:180px;}

.ramka{margin: 3px; border: 1px solid #A2B1C9; background-color: #3273bb; text-align: center;}

.copyright{margin-left: 5px; color:#FFFFFF;}

div.win{

overflow: scroll;

overflow-x: hidden;

scrollbar-face-color: #306CAD;

scrollbar-shadow-color: #A7C1DD;

scrollbar-highlight-color: #A7C1DD;

scrollbar-3dlight-color: #306CAD;

scrollbar-darkshadow-color: #306CAD;

scrollbar-track-color: #ffffff;

scrollbar-arrow-color: #ffffff;

}

body{

scrollbar-face-color: #306CAD;

scrollbar-shadow-color: #A7C1DD;

scrollbar-highlight-color: #A7C1DD;

scrollbar-3dlight-color: #306CAD;

scrollbar-darkshadow-color: #306CAD;

scrollbar-track-color: #ffffff;

scrollbar-arrow-color: #ffffff;

}

</STYLE>

</head>

<body aLink=#006699 link=#000066 bgColor=#ffffff leftMargin=0 topMargin=0 marginheight="0" marginwidth="0" text="black" vlink="purple" style="skrolling:no">

<table align=center border=0 bordercolor=black border="0" cellspacing="0" cellpadding="0">

<tr>

<td colspan=3>

<table background="img&bsol;fon1.gif" border=0 >

<tr >

<td><img src="img&bsol;admin.jpg">&nbsp;</td>

<td width="100%" align=center> <img src="img&bsol;adnin1.gif" align=center> &nbsp;</td>