2. Программа курса
PHP является одним из самых популярных языков для создания Web приложений, при этом обладает большой гибкостью в использовании и легкостью в изучении. Курс создан для людей, которые хотели бы начать карьеру в ИТ в сфере разработки Web приложений. В данном уроке вы ознакомитесь основами написания Web программирования и подготовите среду разработки.
3. Структура курса
1.Что такое программа и как это работает.
2.Браузер
3.Для чего я могу использовать HTML?
4.Теги
5.Где писать?
6.Стандартный шаблон
7.Первая страница
8.Что не решает HTML?
9.PHP
10.Первая программа
11.Сервер
12.LAMP
4. Все процессы, которые происходят на компьютере, были бы не возможны без программ. Загрузка операционной системы происходит с помощью программы, сама операционная система – это программа, любая игра – это программа. Вы смотрите видео или слушаете музыку – всё это происходит с помощью программы. Браузер - не исключение.
1. Что такое программа и как это работает
5. Браузер используют для запроса, обработки, манипулирования и отображения содержания веб-сайтов.
Повар, имея необходимые инструменты, получив необходимые ингредиенты (мука, яйца, мясорубка...) и рецепт, своего рода инструкцию, может приготовить чебурек. Немного изменив рецепт мы можем получить от повара пельмени. Аналогичная ситуация с браузером.
2. Браузер своего рода “повар”
6. Получив данные (текст, изображение,...) и инструкции их расположения, браузер может отобразить изображение слева от которого разместит текст. И лишь немного изменив инструкции мы можем получить страницу фоном которой будет изображение и на нем разместится текст.
Инструкции описывающие расположение - это HTML.
7. Стандарты HTML разработаны
World Wide Web Consortium (W3C) – «Консорциумом Всемирной паутины» http://www.w3.org/
8. •HTML это сокращение от "HyperText Mark-up Language/язык гипертекстовой разметки"
•Если вы хотите создавать web-сайты, Вы не обойдётесь без HTML. Даже если Вы используете для создания web-сайтов такие программы, как Dreamweaver, знание основ HTML значительно упростит вам жизнь.
•Хорошей новостью является то, что HTML легко изучать и использовать.
3. Для чего я могу использовать HTML?
9. Весь HTML состоит из тегов.
Все теги имеют одинаковый формат: они начинаются знаком "<" и заканчиваются знаком">". Обычно имеются два тега - открывающий: <html> и закрывающий: </html>. Различие в том, что в закрывающем имеется слеш "/". Всё содержимое, помещённое между открывающим и закрывающим тегами, является содержимым тега.
Но, как говорится, из каждого правила есть исключения, и в HTML также имеются теги, которые являются и открывающими, и закрывающими.
4. Теги.
10. Теги могут быть непарными и парными (контейнеры)
Пример непарных тегов: <img src=“path” height=“80” width=“100”> <br>
Пример парных:
<head> </head> <div> </div>
Свойства тегов
11. Парных: <tag attribute1="value" attribute2="value"> ... </tag> Например: <h1 style="text-align: center;">HTML loves you if you love it back</h1>
Общая структура тегов
Непарных:
<tag attribute1="value" attribute2="value">
Например:
<meta http-equiv= ‘’content type” content=“text/html; charset=utf-8” >
Синтаксис тегов
12. Структура документа HTML
HTML Head («голова») Название Мета-теги Body («тело») Заголовки Абзацы Картинки Ссылки
<html>
<head>
<title>
<meta name= ‘’..” content= “..” > </head>
<body>
<h1.. h6>
<p>
<img>
<a href=“..”>
</body>
</html>
Логическая структура
Исходный код
13. Структура документа HTML
<html>
<head>
<title> Sample page</title>
<meta http-equiv= ‘’Content type” content=“text/html; charset=utf-8” > </head>
<body>
<h1>Heading</h1> <!– Comments -->
<p>Paragraph 1</p>
<p>
<a href=“/address”>Paragraph 2</a>
</p>
<img src=“/image.jpg” >
</body> </html>
В исходном коде
В браузере
14. 5. Где писать?
•Наиболее приемлемое расширение файла с содержанием HTML интуитивно и очевидно - .html
•Редактирование файла с HTML, возможно в любом текстовом редакторе.
15. Как создать HTML-файл
Откройте текстовый редактор
Напишите ваш код
Сохраните как .htm или .html
16. Если у вас нет возможности сохранить в HTML, можете сохранить файл .TXT, а позднее переименовать его в .HTML*
*(В Windows, может потребоваться изменить настройки папок, дабы отображать расширения для известных типов файлов).
Как создать HTML-файл
17. 6. Итак, стандартный шаблон
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Тег <html> является контейнером, который заключает в себе все содержимое веб-страницы, включая теги<head> и <body>. Открывающий и закрывающий теги <html> в документе необязательны, но хороший стиль диктует непременное их использование.
18. 6. Итак, стандартный шаблон
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Тег <head> предназначен для хранения других элементов, цель которых — помочь браузеру в работе с данными. Также внутри контейнера <head> находятся метатеги, которые используются для хранения информации предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных.
19. 6. Итак, стандартный шаблон
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Элемент <body> предназначен для хранения содержания веб- страницы (контента), отображаемого в окне браузера. Информацию, которую следует выводить в документе, следует располагать именно внутри контейнера <body>. К такой информации относится текст, изображения, теги, скрипты JavaScript и т.д.
20. Создаем файл с содержимым:
<html>
<head>
<title>Пробная страница</title>
</head>
<body>
Добро пожаловать!
</body>
</html>
Открываем в браузере.
7. Создаем HTML-файл: Задание
21. 8. Что не решает HTML?
Используя в Веб-разработке только HTML мы отлично можем отображать информацию, но наступает момент когда необходимо ее принять, обработать, агрегировать…
•Отправка отзывов с сайта прямо на почтовый ящик
•Загрузка файлов через веб-страницу
•Создание уменьшенных копий из больших изображений
•Чтение и запись в файлы
•Динамическое отображение и обновление информации
•Использование базы данных для отображения и хранения информации
•Поиск веб-сайта
•И многое другое
22. Официально PHP расшифровывается как PHP: Hypertext Preprocessor. На данный момент PHP — это самый распространенный язык WEB-программирования. Подавляющее большинство хостингов позволят разместить ваш сайт написанный на PHP.
9. Итак - PHP.
23. Изначально PHP был создан Расмусом Лердорфдом как язык для отображения его домашней странички, назвав творение “Personal Home Page Tools”, но со временем стал самым популярны языком WEB-программирования. Сейчас на нем написано достаточное количество больших проектов вроде yahoo, facebook, vkontakte и т.п.
9. Итак - PHP.
24. С момента создания в PHP основной его особенностью была возможность вставлять в HTML код команды на языке PHP для изменения внешнего вида страницы.
9. Итак - PHP.
25. 10. Первая программа
<html>
<head>
<title>Пробная страница</title>
</head>
<body>
<?php
$name = “Саша”;
echo “Добро пожаловать, ” . $name!
?>
</body>
</html>
Добавьте этот код в ваш файл. Не стоит пытаться открыть файл с этим кодом в браузере. Он пониманиет только HTML. И для того чтобы преобразовать код заключенный в <?php ?>, необходим интерпретатор.
26. 11. Сервер - Задание
Видео по установке
•на английском - https://www.youtube.com/watch?v=QkJmahizwO4
•на русском - https://www.youtube.com/watch?v=e4--_eR11bg
Вся информация в интернете, в том числе и код, написанный на PHP, размещается на серверах, чаще всего предоставляемых хостинг провайдерами.
Для размещения своего кода, развернем свой сервер на основе Ubuntu, используя систему виртуализации VirtualBox.
27. 12. LAMP - Задание
После всех манипуляций, по адресу http://YOUR_SERVER_IP, должна быть доступна страница приветствия, где YOUR_SERVER_IP-адресу назначенному серверу при установке.
Получив рабочую ОС (Ubuntu), необходимо дополнить её минимальным набором, необходимым для Веб-разработки.
Установка LAMP (Linux-Apache-MySQL-PHP)
Минимальная и достаточна инструкция http://howtoubuntu.org/how-to- install-lamp-on-ubuntu#install-apache