Тема: «программирование на html».

Тема: «Программирование на HTML».

Определение цвета

Таблица восприятия цвета. Цвет может применяться к одной из двух сущностей (цвет фона, цвет текста). Задаётся цвет с помощью тэгов color (текст), bgcolor (фона). Бинарный и словарный способы задания цвета.

Бинарный – RGB, начинается с #000000. Синий #0000FF. Удобно в тех случаях, когда знаем какой цвет нам нужен. Есть ограниченная палитра, которая называется Web-палитра (216 цветов), цвета попадающие в Web-палитру называются Web-надежные.

Словарный (имя цвета) – существует 10 цветов, которые задаются словами (англ. алфавит). Пример Color = black.

Логическое форматирование контента (содержимого).

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

Логическое форматирование – разбиение текста на осмысленные логические фрагменты.

Для выделения заголовков в HTML существуют 6 заголовков <h1> …. </h1> и до 6. В разных браузерах отображение заголовков разное, чем выше уровень заголовка, тем крупнее и жирнее текст в заголовке.

Align – выравнивание (center, right, left(по умолчанию)). Пример <H1 align = center> …. </H1>.

Абзац – определяется тэгом <P> … </P>. Атрибуты – выравнивание align. Принудительный разрыв строки: <BR>. Пример:<P> текст<BR> текст</P>. Несколько таких тэгов подряд перенесут только на 1 строку! Запрет разрыва <NOBR>текст …. </NOBR>. Вставка горизонтальных линий (подчеркивание) <HR>.

Физическое форматирование.

Физическое форматирование - Управление начертанием символов. Все тэги парные, могут вкладываться друг в друга.

<B> … </B> - жирный текст.

<I>… </I> - курсив.

<u> … </u> - подчеркнутый

<del>… </del> - зачеркнутый

<big>…</big> - на уровень выше (текст)

<small>…</small> - уменьшенный на 1 пункт

_… - нижний индекс

^… - верхний индекс

<font>…</font> - предполагает обязательное наличие атрибутов:

· Face = «Arial, Curior, …» если у клиента нет заданного шрифта, то откроется со стандартным.

· Size = 1 …. 7 – 3 стандартный размер.

· Color = … - цвет который будет применять в данном блоке.

Формирование списков.

3 вида списков (до начала и и в конце вставляются пустые строки):

· Маркированный. Комбинация тэгов:

<ul>

<li> строка</li>

<li> строка </li>

…

</ul>

· Нумерованный. Атрибуты: type – вид цифры (римские или арабские); start – начальный номер списка (по умолчанию с 1); reversed – обратная нумерация. Для нумерованного списка имеется возможность вставки атрибута в строку value – конкретное значение элемента (явное указание номера строки списка). Пример: <li value=5> … </li>

<ol>

<li> строка</li>

<li> строка </li>

…

</ol>

· Список определений.

<dl>

<dt> название

<dd> значение

<dt>…

…

</dl>

 

Создание карт на странице.

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

<img> само изображение

<map> наложение карты на изображение

<area> выделение активной области

Пример:

<img src=”my.jpg” Usemap=”#mn1” - имя карты >

<map name=”mn1”>

<area shape=”rect” coord=”0,0,5,10” href=”адрес (URL)”>

</map>

 

 

 

Лекция №3

«Создание таблиц HTML».

Таблица – ключевой элемент в веб-программировании.

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

Шаги создания таблиц в HTML:

· дается описание таблицы,

· логическая структуризация

· формирование строки

· разбиение строки на ячейки

· повторение с 3 шага, пока не построена таблица полностью

Ключевые тэги для построения таблицы:

· <TABLE> … </TABLE> - объявление, атрибут: border 0 – нет линий (1,2,3 – толщина линии).

· <CAPTION> … </CAPTION> - заголовок таблицы

· <TR>…</TR> - объявление строки

· <TH>…</TH> - ячейки шапки (заголовочные ячейки)

· <TD>…</TD> - выделение обычных ячеек

· Тэги TD и TH допускают использовать 2 атрибута: <colspan> - слияние ячеек (строка), <rowspan> - слияние по строкам (столбец). <TD colspan = 2> … </TD>

 

 

Пример простейшей таблицы:

<TABLE border =2>

<CAPTION> Личности</CAPTION>

<TR>

<TH>Фамилия</TH>

<TH>Имя</TH>

</TR>

<TR>

<TD>Петров</TD>

<TD>Вася</TD>

</TR></TABLE>

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

3 дополнительных тэга объявления таблиц:

<THEAD>…</THEAD> - заголовок

<TBODY>…</TBODY> - тело, то что будет прокручиваться

<TFOOT>…</TFOOT> - подвал

Эти тэги должны объявляться в таблице до начала разбиения на строки.

<table >

<caption> … </caption>

<thead>

<TR> <TH> …</TH></TR>

</thead>

<tfoot> … </tfoot>

<tbody>

<TR><TD> … </TD></TR>

</tbody></table>

 

«Блоки или блочные элементы»

Блок – прямоугольная область с произвольным содержимым.

Padding – расстояние от содержимого до рамки в блоке.

Margin – отступ от содержимого страницы до рамки в блоке.

Положением блока на странице можно управлять с точностью до пикселя.

Блок объявляется тэгом: <DIV> … </DIV>, атрибут style – стиль.

«Вставка объектов в документ».

Под объектом понимается любой файл, с которым язык не может работать, как правило это внешние файлы, которые нужно добавить на страничку.

Для вставки используется тэг: <OBJECT атрибуты > замещающий текст </OBJECT>, сам объект описывается в атрибутах тэга.

Атрибуты:

· Height, width – размер, который занимает объект на странице.

· Data – имя ресурса.

· Type - тип данных.

Пример, добавление флэш-ролика:

<object Width = 300 Height = 300 Data = “my.swf”> Не показывает!</object>

Видео-ролики вставляются специальным (отдельным) тэгом: <video атрибуты> замещающий текст </video>.

Атрибуты:

· Height, width

· Autoplay – по кнопке, или автоматический запуск видео

· Controls –

· Loop – цикличное проигрывание (бесконечно, однократно)

· Src - источник, откуда будет браться файл

· Muted – будет ли автоматически сопровождаться звуком, либо надо нажать кнопку

 

Лекция №4

«Стили в HYML».

Для описания стиля веб-страницы создан специальный язык CSS (каскадные таблицы стилей). Стили позволяют более гибко и эффективно управлять положением и поведением элемента веб-страницы.

Синтаксис языка:

· Селектор (имя стиля) – соответствует имени тэга, которому будет применяться

· {имя – свойства: “значения”; имя – свойства: “значения”; …}

Пример: body {background – color: “black”;}

Допускается группирование свойств: P,H1 {background – color: “red”}

3 понятия: класс, псевдокласс и псевдоэлементы.

Класс – вариант оформления элемента. Класс отделяется от имени стиля точкой. Пример: H1.red {text – color: “red”} H1.green {text – color: “green”}

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

Пример:.red {…} в коде <p class = red>

Псевдокласс – определяет вид элемента в зависимости от действия пользователя. В отличие от классов, псевдоклассы прописаны в стандарте (их нельзя создавать, но можно использовать).

Имена псевдоклассов:

· Active: создается для активного элемента

· Focus: для элементов в фокусе

· Hover: для элементов которые под указателем мыши

· Link: для не посещенных ссылок

· Visited: для посещенных ссылок

· First-child:для первого потомка

Пример: H1:hover {…}

Псевдоэлемент – позволяют управлять частью какого-то элемента на веб-страницы.

Псевдоэлементы описываются как псевдоэлементы:

· First-letter: оформление первого элемента строки

· First-line: оформление для первой строки

· Before: вставка специального объекта перед элементом

· After: вставка специального объекта после элемента

Пример: P:after {content: url (img.img)}

 

«Оформление фона».

Эти свойства присущи всем элементам для которого существует понятие фон.

Background-position: задает местоположение базовой точки (фонового изображения) через:. “Top left”, “top right”, … “x y”, “x% y%”

Background –attachment: это свойство может принимать одно из двух значений (зафиксировано, либо прокручиваться вместе с основным текстом). “fixed”, “scroll”

Background – color: создается цвет, который желаете. “transparent” - прозрачный

Background – image: размещение картинки

Background – repeat: способ заполнения всю площадь объекта картинкой. “repeat”заполнить, “no-repeat” не заполнить, “repeat x(y)” заполнить по осям.

«Свойства оформления текста».

Color: задание цвета

Letter-spacing: расстояние пробела между буквами, принимает 2 значения: “normal”-нормальный пробел, “length” длинный пробел.

Vertical-align: вертикальное выравнивание текста.

Text-align: горизонтальное выравнивание текста.

Text-ident: красная строка.

Direction: направление текста (горизонтальное (обычное) либо вертикальное).

Word-spasing: расстояние между словами.

Line-height: межстрочное расстояние (поставить нормальное, либо указать в пикселях).

«Свойства работы со шрифтом».

Font-size: задание размера шрифта.

Font-weight: ширина символов.

Font-variant: символы либо заглавными либо строчными. (big, small, normal)

Font-stile: стиль текста.

Font-family: начертание текста (тип шрифта: Times New Roman, Arial и т.д.)

 

Лекция №5

В настоящее время верстка страниц жестко реализуется через блочные элементы. <div> </div>

Свойство позиционирования

Чаще всего позиция задается отступами от границ родительского документа (относительная), либо от окна браузера (абсолютная).

Vertical-align: вертикальное выравнивание, относительно родительского документа. Baseline – элемент располагается на базовой линии родительского объекта, top, bottom, middle.

z-index: которое позволяет видеть 1 картинку перед другой. Auto – автоматическая расстановка, кто последний встретился тот ближе к вам, число – 0, самый низкий.

Cursor: auto – по умолчанию, pointer – рука с пальцем, crosshair – перекрестие, text – вертикальная палочка (как в тексте), wait – песочные часы, help – вопрос помощь, url – адрес картинки, которая будет использоваться в качестве курсора.

«Использование CSS на HTML-странице»

Четыре способа размещение таблиц стилей в веб-документе:

1. Связывание. Это ситуация, когда таблица стилей размещается в отдельном файле (файл.CSS). Преимущества: возможность использования одну таблицу стилей для нескольких страниц. Минимизация размера веб-страниц. Высшая безопасность (не главное, только теория). Как производится вставка таблицы: <head> <link rel=”styleSheet” type=”text/css href=”my.css”> </head>

2. Внедрение. Таблица стилей приводится в заголовочной части самого веб-документа. Рекомендуется: когда на сайте присутствует 1 страница с таким оформлением, либо когда надо выделить одну из страниц оформлением. <head> <style type=”text/css”> <!- … --> </style> </head>

3. Импортирование (комбинация 2-х выше названных). <head> <style=”text/css”> @import: my.css <!- … --> </style> </head>

4. Встраивание в тег. Когда какому-то конкретному элементу нужно сделать соответствующее оформление. <P style=”background – color = red …”> сами свойства взять в кавычки.

Степень приоритета определяется порядком размещения таблиц стилей на странице.

Механизм повышения веса правило (свойства): P {… Color: red! Important;}

Лекция №6

Тема: «Скрытый HTML»

Тэги заголовочной части

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

<title> … </title> - строка из 80 символов, эта строка является ссылкой для перехода на ваш документ в поисковой системе.

<meta …> - описание конкретных свойств документа. Все свойства документа, представляемые данным тэгом делятся на 2 вида, инструкции браузера (http-equip) и для поисковой системы (name). Пример, <meta name = ”…” content = “…”>, <meta http-equip = ”…” content = “…”>.

<base …> - позволяет задать базу для относительного задания адреса. Пример, <base href = “www. ….ru”> … <a href=”/img1.png”>

<link … > - создает связь и её тип с другим документом. пример, <link href = “документ.html” rel = “nofollow”>

<script> … </script> - вставляется в тэг код написанный на ява-скрипт.

Валидация документа HTML

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

http://validator.w3c.org указать адрес, либо загрузить на сайт или копипаст.

 

Лекция №7

События с точки зрения DOM

Программный объект, который создается браузером в момент какого-то происшествия, есть имя EVENT у него есть поля (type – тип события, target – цель) и методы (initevent () – производит генерацию объекта). Событие –как объект, проживает жизненный цикл.

ЖЦ события:

1. происшествие (запуск initevent)

2. создается event – создаются поля

3. инициализация обработчика источника (имя обработчика записывается в поле)

4. инициализация обработчика родителя

5. обработчик цели

6. событие генерирования, запуск

7. уничтожение

 

 

Тема: «Базовые понятия http://».

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

Структура запроса серверу:

· Статусная строка

· Поля заголовка

· Пустая строка

· Тело запроса (может отсутствовать)

Статусная строка состоит 3 поля, которые разделены между собой пробелами, метод (способ воздействия на ресурс к которому обращается клиент [2 способа: GET,POST]), адрес ресурса (не только веб-страница, может быть аудио, видео и т.д.) и версия протокола хттп.

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

Метод POST предполагает передачу информации серверу, передаваемый объем данных шифруется и передается в закрытом, защищенном виде. А в ответ клиент ничего не получает.

Поля:

Host – адрес сервера

Referrer - адрес ресурса

Accept – типы данных

Accept-language – языки клиента

Content-type – тип передаваемых данных

Content-length – число символов передаваемых данных

User-agent – сведения о браузере клиента

Структура ответа сервера:

· Статусная строка

· Поля заголовка

· Пустая строка

· Тело запроса (может отсутствовать)

Ответ формирует уже программист скрипта, статусная строка формируется автоматически сервером.

Статусная строка ответа состоит: версия протокола (на каком языке отвечает сервер), код результата и пояснение. Пример: http/1.0 404 not found. Работа сервера по обработки клиентов разделяются на 5 классов, и 1 цифра определяет класс результата.

Классы результатов:

1. Информационный класс (очень редкий, 100 – получена часть запроса)

2. Успешная обработка (200 – ОК, 201 – ОК и создали новый ресурс, 202 – обработка ресурса ведется, но очень долго)

3. Символизирующий перенаправление запроса (301 – указывалось несколько ресурсов сразу, 302 – ресурс перемещен, запрос перенаправлен)

4. Ошибка клиента (400 – в коде запроса была синтаксическая ошибка, 403 – полномочий не хватает (доступ запрещен данному клиенту к данному ресурсу), 404 – ресурс не найден, 405 – метод запроса не поддерживается)

5. Ошибка сервера (500 – сервер работает неправильно, 501 – функций сервера недостаточно, 503 – сервер временно недоступен, 505 – не поддерживается данная версия http)

Поля заголовка ответа:

· Server – имя и версия сервера

· Content – language – перечень языков необходимых у клиентов

· Content-type – тип данных ответа

· Content-length – длина ответа

· Last-modified – последняя модификация сервера

· Date – время генерации ответа сервером

· Expires – время и дата после которых ответ будет считаться устаревшим

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

Создается папка на сервере CGI-bin (script) куда складываются все скрипты. Если не найден нужный скрипт, то запускается анализ расширения.

Получение аргументов для запуска скрипта. Размещение данных для запуска скрипта зависит от поля которое указано в заголовке запроса. Если используется метод GET в этом случае для запуска скрипта они доступны, если используется метод POST в этом случае нужно обратиться через стандартный поток ввода. Особенности вывода результатов: должны передать клиенту сообщение в формате html и протоколу http, необходимо строго помнить, что поля заголовка ответа формируются программистом. Сначала пишутся поля, затем пропускается строка, а потом только начинает запускаться наш документ. В поле ответа необходимо написать следующее: content-type:text/html

 

Работа с указателем массива

Reset($имя) – устанавливает указатель на первый элемент и возвращает его значение

End($имя) – устанавливает указатель на последний элемент и возвращает его значение

Next($имя) – сдвигает на 1 позицию вперед при этом возвращается значение предыдущего элемента

Prev($имя) – сдвигает курсор на 1 назад и возвращает предыдущее значение элемента

Current($имя) – возвращает значение элемента на котором сейчас курсор

Key($имя) – текущее значение ключа

Обработка формы

<FORM METHOD =”POST” ACTION=”my.php”>

<INPUT type =”text” name=”+1” value=”строка1”>

<INPUT type =”text” name=”+2” value=”строка2”>

<INPUT type =”submit” name=”” value=”строка2”>

</FORM>

Значения полей форм заносятся в массив, ключом является значение поля.

HTTP_POST_VARS [“t1”=>”строка1”]

Foreach[$_SERVER[“HTTP_POST_VARS”]]

Куки это текстовые строки

Язык пчп имеет спец функцию, установки получения кук

Setcookie (имя, значение) куки действуют до закрытия окна браузера

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

Машина пчп определяет по количеству параметров что конкретно вы хотите сделать с куки клиента получить, установить или удалить

Если несколько страниц используют одну и ту же куку, данная запись должна присутствовать для каждой из страниц

 

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

Пример, организация счетчика сессии через куки. В начале нашего скрипта вызываем функцию

<?php

session_start()

if (!isset ($_SESSION[‘count’]))

{$_SESSION[‘count’]=0}

$_SESSION[‘count’]++;

?>

<h1>счетчик посещений</h1>

<p>вы открыли страницу

<?php>echo$_SESSION[‘count’]<?>

Pag</p>

По завершению работы, необходимо сессию уничтожить. При закрытии браузера происходит автоматически. Но при необходимости можно сделать в ходе работы окна, 3 шага: сначала обнулить массив сессия ($_SESSION=array();), далее удалить куку (unset($_cockie(sssion_name());), последний шаг удаление хранилища (session_destroy();).

Как обойтись без кук

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

Необходимо:

<?php

Ini_set(“session.use_trans_sid”,true);

Session_start();

?>

<form method=”post”></form>

При отработке скрипта перед отправкой клиенту, машина пхп добавит в это поле скрытую форму

<input type=hidden name=”phpsessid” value=”…”>

Если не получилось найти идентификатор сессии через куки, то используется данный метод.

 

Обработчики сессии

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

Handler_open(); обработчик вызывается при открытии сессии,

Handler_close(); обработчик вызывается при закрытии,

Handler_read(); обработчик чтения информации из временного хранилища,

Handler_write(); обработчик при записи в хранилище,

Handler_go(); обработчик вызывается при завершении сценария каждой сессии.

 

Тема: «Программирование на HTML».

Определение цвета

Таблица восприятия цвета. Цвет может применяться к одной из двух сущностей (цвет фона, цвет текста). Задаётся цвет с помощью тэгов color (текст), bgcolor (фона). Бинарный и словарный способы задания цвета.

Бинарный – RGB, начинается с #000000. Синий #0000FF. Удобно в тех случаях, когда знаем какой цвет нам нужен. Есть ограниченная палитра, которая называется Web-палитра (216 цветов), цвета попадающие в Web-палитру называются Web-надежные.

Словарный (имя цвета) – существует 10 цветов, которые задаются словами (англ. алфавит). Пример Color = black.