 |
АвтоАвтоматизацияАрхитектураАстрономияАудитБиологияБухгалтерияВоенное делоГенетикаГеографияГеологияГосударствоДомДругоеЖурналистика и СМИИзобретательствоИностранные языкиИнформатикаИскусствоИсторияКомпьютерыКулинарияКультураЛексикологияЛитератураЛогикаМаркетингМатематикаМашиностроениеМедицинаМенеджментМеталлы и СваркаМеханикаМузыкаНаселениеОбразованиеОхрана безопасности жизниОхрана ТрудаПедагогикаПолитикаПравоПриборостроениеПрограммированиеПроизводствоПромышленностьПсихологияРадиоРегилияСвязьСоциологияСпортСтандартизацияСтроительствоТехнологииТорговляТуризмФизикаФизиологияФилософияФинансыХимияХозяйствоЦеннообразованиеЧерчениеЭкологияЭконометрикаЭкономикаЭлектроникаЮриспунденкция
Технология программирования Интернет. Это раздел программирования, ориентированный на разработку веб-приложений (программ, обеспечивающих функционированиединамических сайтов Всемирной паутины)
Это раздел программирования, ориентированный на разработку веб-приложений (программ, обеспечивающих функционированиединамических сайтов Всемирной паутины).
Языки веб-программирования — это языки, которые в основном предназначены для работы с веб-технологиями. Языки веб-программирования можно условно разделить на две пересекающиеся группы: клиентские и серверные.
Языки веб-программирования делятся на две группы
· Клиентские языки
Как следует из названия, программы на клиентских языках обрабатываются на стороне пользователя, как правило, их выполняет браузер. Это и создает главную проблему клиентских языков — результат выполнения программы (скрипта) зависит от браузера пользователя. То есть, если пользователь запретил выполнять клиентские программы, то они исполняться не будут, как бы ни желал этого программист. Кроме того, может произойти такое, что в разных браузерах или в разных версиях одного и того же браузера один и тот же скрипт будет выполняться по-разному. С другой стороны, если программист возлагает надежды на серверные программы, то он может упростить их работу и снизить нагрузку на сервер за счет программ, исполняемых на стороне клиента, поскольку они не всегда требуют перезагрузку (генерацию) страницы.
· Серверные языки
Когда пользователь дает запрос на какую-либо страницу (переходит на неё по ссылке или вводит адрес в адресной строке своего браузера), то вызванная страница сначала обрабатывается на сервере, то есть выполняются все программы, связанные со страницей, и только потом возвращается к посетителю по сети в виде файла. Этот файл может иметь расширения: HTML, PHP, ASP, ASPX, Perl, SSI, XML, DHTML, XHTML.
Работа программ уже полностью зависима от сервера, на котором расположен сайт, и от того, какая версия того или иного языка поддерживается. К серверным языкам программирования можно отнести: PHP, Perl, Python, Ruby, любой.NET язык программирования (технология ASP.NET), Java, Groovy.
Важной стороной работы серверных языков является возможность организации непосредственного взаимодействия с системой управления базами данных (или СУБД) — сервером, на котором упорядоченно хранится информация, которая может быть вызвана в любой момент.
1.1 HTML. Создание и редактирование документов
HTML (HyperText Markup Language) - язык разметки гипертекста - предназначен для создания Web-страниц. Под гипертекстом в этом случае понимается текст, связанный с другими текстами указателями-ссылками.
HTML представляет собой достаточно простой набор кодов, которые описывают структуру документа. HTML позволяет выделить в тексте отдельные логические части (заголовки, абзацы, списки и т.д.), поместить на Web-страницу подготовленную фотографию или картинку, организовать на странице ссылки для связи с другими документами. HTML не задает конкретные и точные атрибуты форматирования документа. Конкретный вид документа окончательно определяет только программа-броузер на компьютере пользователя Интернета. HTML также не является языком программирования, но web-страницы могут включать в себя встроенные программы-скрипты на языках Javascript и Visual Basic Script и программы-апплеты на языке Java.
Пример создания простейшей HTML страницы, которая выводит текстовую информацию, этой самой информацией может быть все что угодно, для примера выведем предложение "Пишем Код - Вершим историю":
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta
content="text/html; charset=Windows-1251"
http-equiv="content-type">
<title>Вывод простого текста</title>
</head>
<body>
Пишем Код - Вершим историю. (c) Sergey Gurov
</body>
</html>
Результат показан на рисунке №1.
Рисунок 1. Простейшая html страница
Основные теги THML используемые при создании web-страниц:
- <html></html> Указывает программе просмотра страниц что это HTML документ.
- <head></head> Определяет место, где помещается различная информация не отображаемая в теле документа. Здесь располагается тег названия документа и теги для поисковых машин.
- <body></body> Определяет видимую часть документа.
- <title></title> Помещает название документа в оглавление программы просмотра страниц
- <h1></h1> Создает самый большой заголовок
- <b></b> Создает жирый текст (нерекомендованный)
- <i></i> Создает наклонный текст (нерекомендованный)
- <cite></cite> Выделение цитат курсивом
- <a href="URL"></a> Создает гиперссылку на другие сайты.
- <ul></ul> Создает ненумерованный список
Создание списков - список определяется тем, что перед каждым элементом списка добавляется небольшой маркер либо номер. Сам список формируется с помощью контейнера <ul>, а каждый пункт списка начинается с тега <li>, к примеру создадим маркированный список известных языков программирования:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Маркированный список</title>
</head>
<body>
<hr>
<ul>
<li>Delphi</li>
<li>C++</li>
<li>C#</li>
<li>GLSL – Шейдерный язык </li>
</ul>
<hr>
</body>
</html>
Результат показан на рисунке №2.
Рисунок №2. Маркированный лист
Форматирование html страницы, а именно ее элементов производится благодаря тегам форматирования, к примеру:
<b>Hello World</b> Создает жирый текст “Hello Word”
<i>Hello Space</i> Создает наклонный текст “Hello Space”
Результат показан на рисунке №3.
Рисунок №3. Форматирование текста
Форматирование текста можно комбинировать, к примеру в этой строке кода:
<i><b>Hello World</b></i> - Говорится, что текст будет наклонным и жирным одновременно.
Для вставки графических элементов служит тэг <IMG>.
Графика должна быть подготовлена предварительно в каком-либо графическом редакторе, либо получена с помощью цифрового аппарата или сканера, а можно просто взять уже готовое изображение.
Простой пример использования графического изображения при создании web-страницы:
<p><center><img src="img/tigr.jpg" alt="Show image "></center></p>
Результат показан на рисунке №4.
Рисунок №4. Форматирование текста
Очень просто заменить белый фон, на любой другой с помощью атрибут Background тэга <body> к примеру:
<body background="img/fon.jpg">
<p><img src="img/teacher.jpg" border="3"></p>
<body>
1.2 Использование фреймов и форм
Frame - рамка, кадр. Фреймы делят пространство окна браузера на независимые разделы, в которых отображается различная информация.
Очень удобно использовать фреймы когда необходимо отображать на экране данные из разных источников. Чтобы сделать фрейм, надо создать новую Вэб-страницу, с тэгами <FRAMESET> <FRAME>.
Дескриптор <FRAMESET> формирует набор фреймов, которые делят пространство окна на строки и столбцы. Далее необходимо задать значения высоты/ширины всех строк/столбцов, выраженные в процентах относительно текущих габаритов окна браузера, пикселях или в виде символа звездочки. Символ звездочки говорит о том, что размеры фреймов зависят от габаритов остальных фреймов страницы.
Дескриптор <FRAME> служит для определения структуры и содержимого конкретного фрейма.
Приведем простейший пример с использованием фрейма:
<html>
<head>
<title>Пример работы с фреймами</title>
</head>
<frameset rows="200,*">
<frame name="frame1" src="lsn017.html">
<frame name="frame2" src="lsn016.html">
</frameset>
</html>
Результат показан на рисунке №5.
Рисунок №5. Использование фрейма
Использование Форм при создании html страницы.
Тег <form> устанавливает форму на веб-странице. Форма предназначена для обмена данными между пользователем и сервером. Область применения форм не ограничена отправкой данных на сервер, с помощью клиентских скриптов можно получить доступ к любому элементу формы, изменять его и применять по своему усмотрению.
Простой пример применения форм при создании html страницы:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Тег FORM</title>
</head>
<body>
<form action="handler.php">
<p><b>Какой язык программирования вы используете чаще всего? </b></p>
<p><input type="radio" name="answer" value="a1">Delphi<Br>
<input type="radio" name="answer" value="a2">C++<Br>
<input type="radio" name="answer" value="a3">Пишу шейдеры на GLSL </p>
<p><input type="submit"></p>
</form>
</body>
</html>
Результат показан на рисунке №6.
Рисунок №6. Использование формы
Гиперссылка на другую html страницу.
Гиперссылка может связывать страницы как в пределах одного сайта, так и указывать на любую страницу в Интернете. При построении ссылки на чужие страницы всегда надо пользоваться абсолютным адресом страницы (http://www.site.com/page.html). Если создается ссылка на страницу в пределах сайта, то предпочтительнее использовать относительный URL (page.html, catalog/page.html).
Пример:
<a href="http://on-line-teaching.com/index.html">Ссылка на главную страницу сайта</a>
<a href="../index.html">Ссылка на главную страницу сайта</a>
Гиперссылка-закладка
При помощи атрибута TARGET можно загрузить страницу в новом окне браузера. Этот атрибут предназначен для задания наименования окна. Имя окна используется в служебных целях. Чтобы открыть страницу в новом окне надо использовать константу _blank.
Пример:
<a href="../index.html" target="_blank"">Ссылка на главную страницу сайта</a>
1.3 Язык JAVA
Исходный файл на языке Java - это текстовый файл, содержащий в себе одно или несколько описаний классов. Транслятор Java предполагает, что исходный текст программ хранится в файлах с расширениями Java. Получаемый в процессе трансляции код для каждого класса записывается в отдельном выходном файле, с именем совпадающем с именем класса, и расширением class.
Язык Java требует, чтобы весь программный код был заключен внутри поименованных классов. Приведенный ниже текст примера надо записать в файл HelloWorld.java. Обязательно проверить соответствие прописных букв в имени файла тому же в названии содержащегося в нем класса. Для того, чтобы оттранслировать наш пример необходимо запустить транслятор Java — javac, указав в качестве параметра имя файла с исходным текстом:
С: \> javac HelloWorld.Java
Простейший пример, написание Java скрипта, который выводит текстовую информацию:
class HelloWorld {
public static void main (String args [])
{
System. out. println ("Hello World");
}
}
JavaScript функции
Функции являются одним из наиболее важных строительных блоков кода в JavaScript. Функции состоят из набора команд и обычно выполняют какую-то одну определенную задачу (например суммирование чисел, вычисление корня и т.д.).
Код помещенный в функцию будет выполнен только после явного вызова этой функции.
<html>
<head>
<script type='text/javascript'>
// Функция выводит текст на страницу
function messageWrite() {
document.write('Hello World. This is my java-script.');
}
</script>
</head>
<body>
<input type='button' value='Click here' onclick='messageWrite()' />
</body>
</html>
Результат показан на рисунке №7.
Рисунок №7. Функция
Сценарии JavaScript в документах HTML
Язык сценариев - это язык программирования, используемый для выполнения функций настройки и автоматизации работы какой-либо существующей системы (например, программы просмотра Интернета, Интернет-сервера, операционной системы). Обычно в подобных системах их функциональность уже доступна через интерфейс пользователя. Языки сценариев раскрывают ее для программного управления. При этом немаловажно то, что сама система обеспечивает специальную среду, обычно состоящую из объектов и подпрограмм, которая дополняет возможности языка сценариев.
Создадим приведенный ниже документ HTML и отобразим его в обозревателе Internet Explorer. Каждый щелчок на кнопкеНовое окно документа будет приводить к отображению еще одного окна обозревателя размером 300x50 пикселей, но без строки меню, полос прокрутки, строки состояния, панели инструментов и адресной строки.
<SCRIPT>
function f(){
newWind = window.open("", "", "width=300,height=50")
}
</SCRIPT>
<BODY>
<FORM>
<INPUT TYPE="button" VALUE="Новое окно" onclick='f()'>
</FORM>
</BODY>
Результат показан на рисунке №8.
Рисунок №8. Сценарий
Поиск по сайту: