Браузер
Информация на веб-странице может быть представлена в различных формах:
текст
статические и анимированные графические изображения
аудио
видео
Информационно значимое содержимое веб-страницы обычно называется контентом.
Несколько веб-страниц, объединенных общей темой и дизайном, а также связанных между собой ссылками и обычно находящихся на одном сервере, образуют веб-сайт.
HTTP (англ. HyperText Transfer Protocol — «протокол передачи гипертекста») — протокол прикладного уровня передачи данных (изначально — в виде гипертекстовых документов).
На что тратит время HTTP запрос
позволяют выбирать информацию из базы данных по заранее неизвестным запросам
дополнительная нагрузка на сервер
загружаются медленнее
1994
HTML 2.0
1991
CERN HTML
24 декабря 1999
HTML 4.01
2000
XHTML 1.0
2014
HTML 5 + CSS 3
Структура Web-страницы
До самого вечера тело с варежками ...
left по левой границе
right по правой границе
center по центру
justify по ширине
атрибут тэга
посещенные ссылки
(visited link)
цвет ссылок
атрибуты тэга
# 0 0 F F F F
# 0 0 0 0 0 0
# A A A A A A
PNG (Portable Network Graphic)
сжатие без потерь
с палитрой (PNG-8) и True Color (PNG-24)
прозрачность и полупрозрачность (альфа-канал)
нет анимации
плохо сжимает мелкие рисунки
толщина рамки вокруг рисунка
если не вплотную к , будет «хвост»
не будет «хвоста»
выйти из текущей папки
метка (якорь)
переход на метку
Этапы создания сайта
3. Верстка. Виды вёрстки при создании сайтов
В HTML файле разбиение на блоки
В CSS файле придание стиля
Блоки верстка с
используется создателями веб-страниц для задания цветов, шрифтов, расположения отдельных блоков и других аспектов представления внешнего вида этих веб-страниц.
предоставляет большую гибкость и возможность управления его представлением
разделение описания логической структуры веб-страницы (которое производится с помощью HTML или других языков разметки) от описания внешнего вида этой веб-страницы (которое теперь производится с помощью формального языка CSS)
Синтаксис CSS
До XIV века кофе произрастал в Эфиопии в диком виде.
Затем, в 1706 году голландские колонисты прислали саженец кофейного дерева в ботанический сад Амстердама, и с этого дерева началось выращивание растения в колониях Нового Света.
Посмотрим на фрагмент HTML-документа
В CSS
#content {
width: 800px;
background: #ccc;
font-size: 14pt}
#select {
width: 800px;
font-size: 20pt;
color: blue; }
.default {
width: 800px;
font-size: 14pt;
}
background-color: rgb(0,0,255);
opacity: 0.5;
background: url(body-top.gif) top left no-repeat, url(banner_fresco.jpg) top 11px no-repeat, url(body-bottom.gif) bottom left no-repeat, url(body-middle.gif) left repeat-y;
div.resize { width: 100px; height: 100px; resize: both; overflow: auto; }
#elem { border-top-left-radius: 1em; border-top-right-radius: 2em; border-bottom-right-radius: 3em; border-bottom-left-radius: 4em; }
border-radius: 55pt 25pt;
span { box-shadow: 0.2em 0.2em 5px #CCC; }
color: #fff; background-color: #fff; text-shadow: 2px 2px 2px #000;
Немного о JavaScript
Проще говоря, DOM - это представление документа в виде дерева тегов. Это дерево образуется за счет вложенной структуры тегов плюс текстовые фрагменты страницы, каждый из которых образует отдельный узел.
Объектная модель DOM
Простейший DOM
Простейший DOM
document.getElementById('dataKeeper').style.color = 'blue'
Обращение к элементам DOM
getElementsByTagName можно вызывать не только для document, но и вообще для любого элемента, у которого есть тег (не текстового).
При этом будут найдены только те объекты, которые находятся под этим элементом.
Например, следующий вызов получает список элементов LI, находящихся внутри первого тега div:
document.getElementsByTagName('DIV')[0].getElementsByTagName('LI')
Пример создания раскрывающего меню:
Возможности, которые даёт DOM
Вставить код JavaScript на страницу
Общий вид
При нажатии
на картинку
Date:
ест первой вкладки
Текст 2 вкладки.
Текст 3 вкладки
текст
текст
#toTop {
width:100px;
border:1px solid #ccc;
background:#f7f7f7;
text-align:center;
padding:5px;
position:fixed;
bottom:10px; /* отступ кнопки от нижнего края страницы*/
right:10px;
cursor:pointer;
display:none;
color:#333;
font-family:verdana;
font-size:11px;
}
Для вызова кнопки добавьте следующий HTML код перед тегом .
Существует несколько языков программирования, на которых могут писать скрипты, которые генерируют "динамические" страницы. Самые распространенные из них:
Perl SSI PHP ASP Python Java
либо
// - не выполняются команды от данных символов до конца строки;
/* комментарий */ - не воспринимаются команды между данными символами независимо от количества строк комментария;
Основы PHP
Основы PHP
Основы PHP
!Чтобы не устанавливать всё отдельно можно воспользоваться Джентльменским набором Web-разработчика
(«Д.н.w.р», читается «Денвер»)
www.denwer.ru
Что необходимо
Денвер
Далее скопировать все ваши файлы с эту папку, переименовать главный файл в index.html и запустить Денвер (файл Run.exe в папке denwer)
PHP в действии
Затем открываем браузер и переходим по адресу praktika.ru. Должен открыться Ваш сайт (т.к. этот запрос обрабатывает Денвер)
Пока вы увидите просто ваши HTML-страницы
Форма открывается тэгом
.Ваш Email:
Сообщение
(поле сообщения)
(кнопка отправки)
(конец формы)Пример формы
http:// - префикс основного протокола передачи данных в web (HTTP)
lphp.ru - домен в котором находится сервер
index.php - имя файла, который будет обрабатывать запрос, то есть кому собственно отправлен GET-запрос
? - разделитель, после которого перечисляются переменные со значениями, которые нужны скрипту обработчику для формирования ответной страницы
page - переменная или имя переменной
= - оператор присваивает значения переменной
4 - значение переменной
& - разделитель в строке запроса, между парами (переменная=значение&переменная=значение) и т.д.
Передача данных методом GET
При передачи методом POST значения помещаются на сервере в глобальный массив $_POST[‘имя элемента’].
При передачи методом GET в глобальный массив $_GET[‘имя элемента’].
где имя элемента указано в атрибуте name
соответствующего элемента формы,
например,
или
Обработка переданных значений
нагрузка на сервер
/* Записывает данные */
$sql = "INSERT INTO message(name, email, message) VALUES ('$name', '$email', '$text_message')";
$result=mysql_query($sql) or die("Ошибка в запросе!".mysql_error());
/* Делаем редирект обратно */
header("Location: ".$_SERVER["HTTP_REFERER"]);
exit;
?>
Как записать данные в MySQL
Содержимое массива $_FILES для нашего примера приведено ниже. Обратите внимание, что здесь предполагается использование имени uploadfile для поля выбора файла, в соответствии с приведенной выше multipart-форме. Разумеется, имя поля может быть любым.
$_FILES['uploadfile']['name'] - имя файла до его отправки на сервер, например, pict.gif;
$_FILES['uploadfile']['size'] - размер принятого файла в байтах;
$_FILES['uploadfile']['type'] - MIME-тип принятого файла (если браузер смог его определить), например: image/gif, image/png, image/jpeg, text/html;
$_FILES['uploadfile']['tmp_name'] (так мы назвали поле загрузки файла) - содержит имя файла во временном каталоге, например: /tmp/phpV3b3qY;
$_FILES['uploadfile']['error'] - Код ошибки, которая может возникнуть при загрузке файла. Ключ ['error'] был добавлен в PHP 4.2.0.
Если не удалось найти и скачать доклад-презентацию, Вы можете заказать его на нашем сайте. Мы постараемся найти нужный Вам материал и отправим по электронной почте. Не стесняйтесь обращаться к нам, если у вас возникли вопросы или пожелания:
Email: Нажмите что бы посмотреть