Операционные системы среды и оболочки Инструменты для создания

Операционные системы, среды и оболочки Инструменты для создания динамических Web-сайтов PHP 5, My. SQL 5, Java. Script, Ajax Лекция 1 Поляруш Александр Юрьевич polyarush@yandex. ru HTML, CSS

План курса HTML+ CSS 2) PHP 3) My. SQL 5 + PHP 4) Java. Script 1) 2

План лекции 1. 2. 3. 4. Доменное имя, хостинг Шаблоны дизайна Язык разметки HTML Язык СSS

4

http: //www. jobinmoscow. ru

Заработок в Интернете http: //www. trustlink. ru/sites/calc

http: //bizinformation. org

Тема, цель создания сайта. Доменное имя Создание сайта Заполнение содержимым, SEO-оптимизация контента. Где его располагать? Хостинг Продвижение, раскрутка 8

9

Доменное имя Документ, сайт в интернете ищется по так называемому адресу URL – (Uniform Resource Locator) универсальный локатор ресурса. Его синтаксис protocol: //host/path/file Вместо protocol может стоять: http – любая гипертекстовая информация ftp – протокол передачи файлов Вместо host может стоять цифровой ip-адрес сервера или его доменное имя. 10

http: //www. nic. ru 11

12

13

14

Веб-дизайн Ю. А. Сырых Современный веб-дизайн. Рисуем сайт, который продает Издательство: Вильямс, 2008 г. Мягкая обложка, 304 стр. 15

16

17

18

19

20

21

22

23

24

25

26

27

28

29 http: //www. antula. ru/colour-associations. htm

http: //colory. ru/colorgenerator/ http: //www. colorsontheweb. com/colorwizard. asp 30

http: //colorscheme. ru/ 31

32

Palette URL: http: //colorscheme. ru/#2 N 31 Tw 0 w 0 *** Основной Цвет: var. 1 = #14 D 100 = rgb(20, 209, 0) var. 2 = #329 D 27 = rgb(50, 157, 39) var. 3 = #0 D 8800 = rgb(13, 136, 0) var. 4 = #4 AE 83 A = rgb(74, 232, 58) var. 5 = #74 E 868 = rgb(116, 232, 104) *** Вторичный Цвет A: var. 1 = #FF 6 F 00 = rgb(255, 111, 0) var. 2 = #BF 6 E 30 = rgb(191, 110, 48) var. 3 = #A 64800 = rgb(166, 72, 0) var. 4 = #FF 9340 = rgb(255, 147, 64) var. 5 = #FFB 073 = rgb(255, 176, 115) *** Вторичный Цвет B: var. 1 = #C 9007 A = rgb(201, 0, 122) var. 2 = #97266 A = rgb(151, 38, 106) var. 3 = #83004 F = rgb(131, 0, 79) var. 4 = #E 439 A 1 = rgb(228, 57, 161) var. 5 = #E 467 B 3 = rgb(228, 103, 179) 33

Создаем простые HTML-страницы Основная единица веб-разработки - это HTML-страница. Она представляет собой простой текстовый документ, в который включены специальные элементы - теги, описывающие данные, которые содержатся на странице. Даже если вы уже знакомы с HTML, имеет смысл освежить ваши навыки, поскольку программирование на РНР неразрывно связано с HTML. Я настоятельно рекомендую с самого начала пользоваться обычным текстовым редактором. Например, это может быть «Блокнот» (Notepad++). Т. к. специальные веб-редакторы (вроде Front. Page или Dream-weaver) создают весьма неуклюжий HTML-код, который станет серьезной помехой, как только вы захотите добавить к своей странице программный код. 34

Создаем на HTML страничку приветствия HTML - это прежде всего текст. Автор страницы добавляет к текстовому документу специальную разметку, которая определяет значение различных элементов. Когда пользователь запрашивает веб-страницу, текстовый документ поступает с сервера в браузер, и тот интерпретирует теги, определяя, как страница должна быть показана на экране. Что такое теги HTML? Тэги HTML сообщают браузеру информацию о структуре и особенностях форматирования Веб-страницы. Все теги языка HTML выделяются символами-ограничителями (< и >), между которыми записывается идентификатор (имя) тега (в нашем примере это в), и, возможно, его параметры. Единственным исключением из этого правила являются теги комментария с более сложными ограничителями (). Названия тегов, а также их параметров можно записывать на любом регистре. Большинство тегов HTML используется попарно, т. е. для определенного тега, назовем его открывающим, в документе имеется соответствующий закрывающий тег. По правилам HTML закрывающий тег записывается так же, как и открывающий, но с символом / (прямой слэш) перед именем тега. Единственным принципиальным различием парных тегов является то, что закрывающие теги не используют параметры. 35

<html> <head> <title>Привет всем!</title> </head> <body> <center> <h 1>Привет всем!</h 1> </center> </body> </html> 36

Тег Значение Комментарий <b></b> Жирный шрифт Может работать не во всех браузерах <i></i> Курсив Может работать не во всех браузерах <h 1></h 1> Заголовок 1 -го уровня Самые крупные заголовки <h 6></h 6> Заголовок 6 -го уровня Самые мелкие заголовки (также существуют заголовки промежуточных уровней) <ul> <li></li> </ul> Ненумерованный список Должен содержать элементы списка. Может содержать любое число элементов <ol> <li></ol> Нумерованный список Должен содержать элементы списка. Может содержать любое число элементов <а href="another. Page. html” > переход на другую страницу</a> Гиперссылка Ссылка на другую страницу. Текст между тегами <а> и </а> на странице будет виден как гиперссылка. Когда пользователь щелкает мышкой по ссылке браузер переходит на указанную страницу <img src="m 4. jpg” width="41"> Рисунок Размещает на странице рисунок. Поддерживаются графические форматы GIF, JPG и PNG. <font color = "red“> эта надпись красного цвета </font> Изменить шрифт Можно изменять цвет, размер и вид (гарнитуру) шрифта, однако выбранный вид не всегда можно передать на клиентскую машину. Перенос строки в тексте. Не имеет закрывающего тега. <hr> Горизонтальная линия Помещает на страницу горизонтальную линию. Не имеет закрывающего тега. 37

<html> <head> <title>Основные HTML Tags</title> </head> <body> <h 1>Основные HTML Tags</h 1> <h 1>Это h 1 header</h 1> <h 2>Это h 2 header</h 2> <h 3>Это h 3 header</h 3> <h 4>Это h 4 header</h 4> <h 5>Это h 5 header</h 5> <h 6>Это h 6 header</h 6> <center> Этот текст центрирован </center> <b>Это жирный текст</b>  <i>Это italic (курсив)</i> <hr>  </body> </html> 38

Вывод текста заданным шрифтом <FONT <FONT face="Verdana">Ваш текст</FONT> size="4"> Ваш текст </FONT> size="+1"> Ваш текст </FONT> size="-1"> Ваш текст </FONT> color="#FF 0000"> Ваш текст </FONT> color="red"> Ваш текст </FONT> 39

Разделение на абзацы <P <P align="center">Абзац с выравниванием по центру</P> align="left">Абзац с выравниванием по левому краю</P> align="right">Абзац с выравниванием по правому краю</P> align="justify">Абзац с выравниванием по ширине</P> 40

41

<UL> <LI><A <LI><A </UL> <OL> <LI><A <LI><A </OL> href="chapter 1. html">Глава href="chapter 2. html">Глава href="chapter 3. html">Глава href="chapter 4. html">Глава href="chapter 5. html">Глава href="chapter 6. html">Глава 1</A></li> 2</A></li> 3</A></li> 4</A></li> 5</A></li> 6</A></li> 42

43

Изображение на Web-странице <font size=5> <IMG src="vict. jpg"> <IMG src="http: //www. boccati. ru/html-lessons/vict. jpg"> <IMG src="vict. jpg" width="150" height="202"> <IMG src="vict. jpg" width="150" height="202" border="4"> <IMG src="vict. jpg" width="150" height="202" border="0" alt=" Мариза Миллер "> <IMG src="vict. jpg" width="150" height="202" border="0" title="Мариза Миллер"> <P><IMG <P><IMG src="vict. jpg" align="left">Мариза Миллер</P> align="right">Мариза Миллер</P> align="top">Мариза Миллер</P> align="bottom">Мариза Миллер</P> align="middle">Мариза Миллер</P> <P><IMG src="vict. jpg" align="left" hspace="50">Мариза Миллер</P> <P><IMG src="vict. jpg" align="left" vspace="50">Мариза Миллер</P> 44

Группировка элементов страницы <div>Ваш текст</div> <DIV align="center">Элемент с выравниванием по центру</DIV> <DIV align="left">Элемент с выравниванием по левому краю</DIV> <DIV align="right">Элемент с выравниванием по правому краю</DIV> <SPAN class="text 2"> <P>Абзац 3</P> <P>Абзац 4</P> </SPAN> 45

46

Таблицы <table> <tr> <td>ааааааа</td> <td>ввввв</td> </tr> </table> Обычно у тега есть параметры <table width="100%" border="0" cellspacing="0" cellpadding="0"> width="100%" border="0" cellspacing="0" cellpadding="0" - ширина таблицы – толщина рамки ячеек таблицы – расстояние между рамками ячеек – расстояние от данных до рамки Пример сайт Avto. narod. ru - разметка на основе таблиц. 47

Для тега table определены следующие аттрибуты. align - определяет способ горизонтального выравнивания таблицы на странице. Возможные значения: left, center, right. Значение по умолчанию - left. valign - должен определять способ вертикального выравнивания для содержимого таблицы. Возможные значения: top, bottom, middle. border - определяет ширину внешней рамки таблицы (в пикселах). При BORDER="0" или при отсутствии этого параметра рамка отображаться не будет. cellpadding - определяет расстояние (в пикселах) между рамкой каждой ячейки таблицы и содержащимся в ней материалом. cellspacing - определяет расстояние (в пикселах) между границами соседних ячеек. width - определяет ширину таблицы. Ширина задается либо в пикселах, либо в процентном отношении к ширине окна браузера. По умолчанию этот параметр определяется автоматически в зависимости от объема содержащегося в таблице материала. height - определяет высоту таблицы. Высота задается либо в пикселах, либо в процентном отношении к высоте окна браузера. По умолчанию этот параметр определяется автоматически в зависимости от объема содержащегося в таблице материала. bgcolor - определяет цвет фона ячеек таблицы. Задается либо RGB-значением в шестнадцатиричной системе, либо по названию цвета. background - позволяет заполнить фон таблицы рисунком. В качестве значения необходимо указать URL рисунка. 48

Для тегов <td> и <th> очень полезными являются атрибуты colspan и rowspan. Первый показывает сколько ячеек надо объединить по горизонтали, а второй по вертикали. Следует заметить, что если мы применяем объединение ячеек, то общее число ячеек с учетом объединенных должно быть равным. Продемонстрируем на примере. <html> <body> <h 2>Применение colspan: </h 2> <table border="1"> <tr> <td colspan="2">100</td> <td>300</td> </tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table> 49

<TABLE border="1" align="center" width="200"> <CAPTION>Заголовок таблицы</CAPTION> <TR> <TD align="center" rowspan="2">1 и 3 объединены</TD> <TD align="center">2</TD> </TR> <TD align="center">4</TD> </TR> </TABLE> 50

51

<table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="9%"> <div align="right"><img src="m 4. jpg" width="41" height="41"> </div> </td> <td width="91%"><font size="5"> <a href="http: //avto. narod. ru/super. html">Легковые и спортивные</a> </font> </td> </tr> </table> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="18%"> <div align="right"><img src="m 4. jpg" width="41" height="41"> </div> </td> <td width="82%"><font size="5"> <a href="http: //avto. narod. ru/class. html">Старинные</a> </font> </td> </tr> </table> 52

53

<HTML> <HEAD> <TITLE>Форматирование Web-страниц при помощи таблиц</TITLE> </HEAD> <BODY bgcolor="#FFFFFF" bottommargin="0" leftmargin="0" rightmargin="0" topmargin="0"> <TABLE border="0" cellspacing="0" cellpadding="5" width="100%" height="100%" bgcolor="#996600">  <TR> <TD align="center" colspan="3" height="100" bgcolor="silver"> <FONT size="5" face="Tahoma" color="red"><B>"Шапка" документа</B></FONT> </TD> </TR> <TR valign="top"> 54

<TD width="180"> <FONT size="4" face="Tahoma" color="blue">  <BR><H 3 align="center">Оглавление</H 3> <UL type="disk"> <LI><A href="chapter 1. html">Глава 1</A> <LI><A href="chapter 2. html">Глава 2</A> <LI><A href="chapter 3. html">Глава 3</A> <LI><A href="chapter 4. html">Глава 4</A> <LI><A href="chapter 5. html">Глава 5</A> <LI><A href="chapter 6. html">Глава 6</A> </UL> </FONT> </TD> 55

<TD align="center"> <BR><H 2>Откуда есть пошла Русская земля</H 2> <P>773— 774 годы. Во французской поэме об Ожье Датчанине упоминается русский граф Эрно</P>  <TABLE border="1" width="240"> <CAPTION>Заголовок таблицы<CAPTION> <TR> <TD align="center">1</TD> <TD align="center">2</TD> </TR> <TD align="center">3</TD> <TD align="center">4</TD> </TR> </TABLE> 56

</TD> <TD align="center" width="170"> <BR> <IMG src="deva. jpg" width="140" border="0" alt="Описание картинки"> </TD> </TR> <TD align="center" colspan="3" height="50" bgcolor="silver"> Информация об авторе </TD> </TR> </TABLE> </BODY> </HTML> 57

58

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

<form name="input" action="registration. php" method="post" > Имя: <input type="text" name="firstname"> Фамилия: <input type="text" name="lastname"> <input type="submit" value="Отослать"> <input type="reset " value="Очистить"> </form> 60

Описание элементов управления <INPUT <INPUT <INPUT type="text"> type="password"> type="file"> type="checkbox"> type="radio"> type="reset"> type="submit"> type="button"> type="hidden"> 61

Текстовое поле и поле ввода пароля <FORM action="scripte. php" method="POST"> <INPUT type="text" name="pole 1" value="ваш текст"> <INPUT type="text" name="pole 2" value="ваш текст" maxlength="100"> <INPUT type="text" name="pole 3" value="ваш текст" maxlength="12" size="10"> <INPUT type="password"> <INPUT type="reset" value="Очистить"> <INPUT type="submit" value="Отправить"> </FORM> 62

63

Элемент-переключатель <FORM action="scripte. php" method="POST"> Укажите ваш пол: <BR> <INPUT type="radio" name="radio 1" value="male" >Мужской <INPUT type="radio" name="radio 1" value="female « CHECKED>Женский <INPUT type="reset" value="Очистить"> <INPUT type="submit" value="Отправить"> </FORM> radio - зависимые переключатели 64

65

Формы <FORM action=vote. php method=post> <TABLE> <TR> <TD bg. Color=#003699>Кaкой дизайн вам больше нравится? </TD></TR> <TD><INPUT type=radio value=1 name=answer>Hoвый</TD></TR> <TD><INPUT type=radio value=2 name=answer>Старый</TD></TR> <TD><INPUT type=radio value=3 name=answer>Никакой</TD></TR> <TD><INPUT type=radio value=4 name=answer>Мне все равно </TD> </TR> <TD><INPUT type=submit value="Голосовать!" name=vote></TD></TR> <TD><INPUT type=submit value="Результат" name=result></TD></TR> </TABLE> </TD> </TR> </TABLE> </FORM> 66

67

checkbox - независимые переключатели <form action="scripte. php" method="POST"> <font size="4"> <INPUT type="checkbox" name="check 1" value="yes"> Да, я хочу получать рассылку <INPUT type="checkbox" name="check 2" value="yes" CHECKED> Да, я хочу получать новости </font> </form> 68

69

Список с предопределенными значениями SELECT Тег <SELECT> создает внутри формы список с заранее определенными Значениями выбора <SELECT> <OPTION>Элемент1 <OPTION>Элемент2 </SELECT> Имеет параметры: <SELECT name="select 1"> Задает имя списка <SELECT name="select 1" size="3"> Задает сколько строк видно <SELECT name="select 1" size="3" MULTIPLE> Множественный выбор 70

Параметр value - задает какое значение будет послано <SELECT name="select 1"> <OPTION value="val 1">Элемент1 <OPTION>Элемент2 </SELECT> SELECTED - какой элемент выбран изначально, по дефолту <SELECT name="select 1"> <OPTION value="val 1">Элемент1 <OPTION SELECTED>Элемент2 Какой элемент выбран изначально </SELECT> 71

72

<form action="scripte. php" method="POST"> <select name="male"> <option>Элемент1</option> <option>Элемент2</option> </select> <select name="month" size="3"> <option value="1">Элемент1</option> <option value="2“ selected="selected">Элемент2</option> <option value="3">Элемент3</option> </select> <select name="month" size="3" multiple="multiple"> <option>Элемент1 </option> <option> Элемент2</option> <option >Элемент3</option> <option selected="selected">Элемент4</option> </select> <select name="month"> <option selected="selected">Элемент1</option> <option>Элемент2</option> </select> <select name="month"> <option >Элемент1</option> <option selected>Элемент2</option> </select> <input value="Очистить" type="reset"> <input value="Отправить" type="submit"> </form> 73

<FORM action="file. php" method="POST" enctype="multipart/form-data"> Логин: <BR> <INPUT type="text" name="pole 1"><BR> Пароль: <BR> <INPUT type="password" name="pole 2" value="Пароль"><BR> URL-адрес сайта: <BR> <INPUT type="text" name="pole 3" value="http: //" size="20"><BR> Название сайта: <BR> <INPUT type="text" name="pole 4" size="20"><BR> Описание сайта: <BR> <TEXTAREA name="pole 5" rows=“ 6" cols="15"> </TEXTAREA><BR> Тема сайта: <BR> <SELECT name="pole 6"> <OPTION value="0" selected>Тема не выбрана <OPTION value="1">Тема 1 <OPTION value="2">Тема 2 <OPTION value="3">Тема 3 </SELECT><BR> Баннер 88*31: <BR> <INPUT type="file" name="pole 7" size="20"><BR> <INPUT type="reset" value="Очистить"> <INPUT type="submit" value="Отправить"> </FORM> </BODY> </HTML> 74

75

Создание собственного сайта Бесплатный хостинг http: //narod. yandex. ru Сайт " Что человеку надо? " rostovari. narod. ru Сайт " Исторические усадьбы " hist-usadba. narod. ru 76

<html> <head> <title>Усадьба Гремячка. Исторические усадьбы России</title> </head> <body background="kofta 3. jpg" bgcolor="#f 8 e 8 c 7" link="#993300" vlink="#006600" alink="#000000" text="#000033"> <center> <a href="http: //hist-usadba. narod. ru/links 10 -1. html"> <img src="kusk-ban 3. jpg" alt="Кусково" align="top"></a> <font color="#dfb 47 a" face="Times" size="4"> <b>Исторические усадьбы России</b> </font> <font color="#b 77 a 00" face="Times" size="5"> <b>Усадьбы Рязанской области</b> </font> <img src="brown-compl-6. gif" width="600" height="5"> <font color="#993300" face="Times"> <b> <h 1>Усадьба Гремячка</h 1></b> </font> 77

<table align=center border=0 color="#993300" width="600"> <b> <tr> <td align=center> <a href="http: //hist-usadba. narod. ru/news 0 -0. html"> <b><font size="3">новости сайта</font></b></a> </td> <td align=center> <a href="http: //hist-usadba. narod. ru/doska-obiav. html"> <b><font size="3">доска объявлений</font></b></a> </td> <td align=center> <a href="http: //hist-usadba. narod. ru/links-art. html"> <b><font size="3">статьи по теме</font></b></a> </td> <td align=center > <a href="http: //narod. yandex. ru/userforum/? owner=hist-usadba"> <b><font size="3">форум</font></b></a> </td> <td align=center > <a href="http: //www. narod. ru/guestbook/? owner=6588884"> <b><font size="3">книга отзывов</font></b></a> </td> </tr> </b> </table> 78

<table width="600"> <tr> <td> <font size="3" color="#000033"> <b>Владельцы усадьбы: </b> Чулковы, Семеновы-Тян-Шанские <b>Архитектор усадьбы: </b> <b>Местоположение усадьбы: </b> Милославский район <b>Сохранность усадьбы: </b> <b>Усадьбу посещали: </b> </font> <font size="3" color="#000033" face="Courier">  </font> </td> </table> <img src="brown-compl-6. gif" width="600" height="5"> 79

<table width="600"> <tr> <td valign="top" align="left"> <font size="3">  <b> <img src="li. gif" height="20"> <a href="http: //geo. 1 september. ru/2002/16/7. htm">усадьба <текст + 3 фото></a> <img src="li. gif" height="20"> <a href=""></a> <img src="li. gif" height="20"> <a href="http: //hist-usadba. narod. ru/index. html">все усадьбы</a> </b> </font> </td> <td valign="top" align="right"> <a href="http: //hist-usadba. narod. ru/links 10 -1. html"> <img src="kusk-3. jpg" alt="Кусково" align="top"></a> </td> </tr> </table> 80

<img src="brown-compl-6. gif" width="600" height="5">  <center> <a href="http: //hist-usadba. narod. ru/links 6 -1. html"><img src="rb. gif" border="0" alt=""> </a> <a href="http: //hist-usadba. narod. ru/links 6 -0. html"><img src="rh. gif" border="0" alt="Усадьбы Рязанской области"> </a> <a href="http: //hist-usadba. narod. ru/links 6 -3. html"><img src="rf. gif" border="0" alt=""> </a> </center> <img src="brown-compl-6. gif" width="600" height="5"> <!–- счетчик посещений --> <img SRC=http: //www. narod. ru/counter. xhtml> </body> </html> 81

Ставим на свой компьютер так называемый Денвер - программу для полноценного тестирования сайтов. Официальный сайт программы: http: //www. denwer. ru/ Товарищ внятно объяснил как размещать сайт на денвере: http: //www. creativecult. org/rubriki/soft/denver-masterskaya-webrazrabotchika-za-15 -min. html 82

83

переименовываем test 1. ru 84

85

86