WWW.DISSERS.RU

БЕСПЛАТНАЯ ЭЛЕКТРОННАЯ БИБЛИОТЕКА

   Добро пожаловать!


Pages:     || 2 | 3 | 4 | 5 |   ...   | 7 |
Московский городской Дворец детского (юношеского) творчества отдел оборонно-массовой работы сектор новых информационных технологий Создание сайтов:

HTML, CSS, PHP, MySQL (часть первая: лекции и практические задания) Москва 2010 г.

УДК 004.438 Росс В. С. Создание сайтов: HTML, CSS, PHP, MySQL. Учебное пособие, ч. 1 — МГДД(Ю)Т, М.:2010 – 107 с.

Литературный редактор: Разуваева А. А.

Учебное пособие предназначено для подготовки учащихся, специализирующихся в области разработки веб-сайтов. Описываются современные технологии создания сайтов: язык разметки гипертекста HTML, каскадные таблицы стилей CSS, язык программирования PHP и СУБД MySQL. Пособие может быть использовано для организации занятий в рамках дополнительного детского образования, факультативных занятий в ВУЗе и т.п.

Первая часть пособия содержит теоретический материал и практические задания по языку HTML и технологии CSS.

Содержание 3 Содержание Тема 1. Основы Web-мастеринга..........................................................................7 Лекция 1.1. Основы WWW...............................................................................7 Тема 2. Язык HTML.............................................................................................12 Лекция 2.1. Основы HTML.............................................................................12 Лекция 2.2. Основные теги, работа с текстом, списки.................................18 Лекция 2.3. Создание ссылок.........................................................................23 Лекция 2.4. Изображения................................................................................25 Лекция 2.5 Создание таблиц...........................................................................31 Лекция 2.6. Кодировки текста и специальные символы..............................37 Тема 3. Технология CSS......................................................................................Лекция 3.1. Основы CSS.................................................................................Лекция 3.2. CSS-свойства: размеры, цвета, шрифты, текст.........................Лекция 3.3. CSS-свойства: поля, заполнение, границы................................Лекция 3.4. CSS-свойства: фон, оформление таблиц...................................Лекция 3.5. Теги DIV и SPAN, псевдоклассы...............................................Лекция 3.6. CSS-свойства: позиционирование.............................................Тема 4. Верстка сайтов........................................................................................Лекция 4.1. Основы верстки. Табличная верстка.........................................Лекция 4.2. Блочная верстка.........................................................................4 Введение Введение Пособие посвящено актуальной теме – разработке сайтов.

В первой и второй части пособия содержатся конспекты лекций с примерами, ссылки на Интернет-источники, посвященные рассматриваемой теме, и практические задания двух уровней сложности. Задания повышенной сложности отмечены знаком (*). В третьей части приводятся решения практических заданий для всех изучаемых тем. Пособие охватывает основные средства разработки современных сайтов. Так как охватить все аспекты веб-технологий в рамках курса не представляется возможным, некоторые теги HTML, правила CSS, функции PHP и т.п. в пособии не рассматриваются.

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

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

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

Сначала учащимся предлагаются задачи нормального уровня сложности.

Учащиеся, успешно их выполнившие, решают задачи повышенного уровня.

Нерешенные на занятии задачи могут быть заданы для выполнения дома.

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

Программное обеспечение Для реализации задач из тем 2-10 необходим установленный на компьютере браузер и текстовый редактор. Для тестирования страниц со сложными CSSстилями желательно просматривать их в различных браузерах, например в Internet Explorer 6-8, Mozilla Firefox и Opera. Особо тщательно следует поСодержание дойти к выбору текстового редактора. Использование обычного редактора замедляет скорость работы, ведет к увеличению количества ошибок в коде.

Необходима специализированная программа для разработчиков с поддержкой подсветки и свертывания синтаксиса HTML, CSS и PHP в одном файле.

Желательно также наличие автодополнения и справки по аргументам функций, инструмента выбора цвета и т.п. Этим требования отвечают такие бесплатные редакторы, как Notepad++ (http://notepadplus.sourceforge.net/ru/site.htm), SciTE (http://code.google.com/p/scite-ru/) и другие.

Для решения задач из тем 5-10 необходимо организовать доступ учащихся к веб-серверу Apache и серверу СУБД MySQL. Для ОС семейства Unix наиболее простым способом является установка «пакетов» («портов»), для ОС семейства Windows – готовых сборок, таких как WampServer (http://www.wampserver.com/en/) или XAMPP (http://www.apachefriends.org/).



Использование пакета Денвер не рекомендуется, т.к. он более сложен в использовании и настройке. Все вышеперечисленные продукты являются бесплатными.

Возможно несколько вариантов установки:

1. Установка на каждый компьютер в учебном классе. Наиболее простой сценарий, но и наименее гибкий. При использовании ОС Windows для запуска серверов обязательно наличие прав администратора.

2. Установка на выделенный сервер в локальной сети. В этом случае необходимо выделить для каждого учащегося отдельный каталог и базу данных на сервере, обеспечить удаленный доступ и разделение прав пользователей. Преимуществом данного способа является приближение к реальным условиям разработки, возможность совместной работы учащихся и выполнения задач с любого рабочего места.

3. Установка выделенного сервера, аналогичная предыдущему варианту, но с доступом через Интернет. Реализуется на круглосуточно работающем сервере с прямым подключением к глобальной сети (с выделением внешнего IP-адреса) или покупкой услуги хостинга.

6 Введение Наиболее предпочтителен последний сценарий, т.к. при нем возможна удаленная работа учащихся из дома и упрощается презентация результатов на выставках, конференциях и т.п. Если такой способ является слишком затратным, то можно комбинировать первые два варианта: при наличии компьютера дома учащиеся устанавливают на него веб-сервер и СУБД, а в классе пользуются общим выделенным сервером.

Рекомендуется использовать последние стабильные версии Apache, MySQL и оболочки phpMyAdmin или готовых сборок (WampServer, XAMMP).

Эти программы не предъявляют серьезных требований к аппаратному обеспечению и могут быть запущены на относительно «слабых» компьютерах.

Условные обозначения, принятые в пособии Ресурсы Интернета, посвященные материалу, изложенному в лекции.

Материалы, помеченные звездочкой (*), являются дополнительными и содержат сведения, не упомянутые в лекции.

Практические задания. Задания, помеченные звездочкой (*), являются усложненными.

Важное примечание для учащегося.

Важная информация для педагога.

Дополнительная информация для учащегося. При чтении лекции может быть пропущена.

Шрифтом Courier выделяется программный код, а также ключевые слова (теги, атрибуты, свойства, значения, операторы, конструкции, функции и т.д.), HTML, CSS, PHP и SQL.

Замечания и предложения просьба отправлять автору на электронную почту: vladislav.ross@gmail.com.

Содержание Тема 1. Основы Web-мастеринга Лекция 1.1. Основы WWW.

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

Основные понятия WWW (World Wide Web – «всемирная паутина») – глобальное информационное пространство, основанное на физической инфраструктуре Интернета и протоколе передачи данных HTTP.

Понятие WWW часто путают с понятием Интернет – глобальной телекоммуникационной сетью. Интернет состоит из огромного количества компьютеров и сетей, в то время как всемирную паутину составляет множество вебсайтов. Помимо WWW посредством Интернета работает множество различных служб: e-mail, IP-телефония, Интернет-радио и телевидение, файловые серверы, компьютерные игры и др.

Название «Интернет» происходит от англ. Interconnected Networks – объединенные сети. Это объединение можно представить на таком примере: компьютеры в классе объединены в сеть, эта сеть является звеном в сети учреждения, сеть учреждения подключена к сети провайдера Интернет, провайдер – к более крупному городскому или международному провайдеру. Связь между континентами осуществляется через кабели, проложенные по дну океанов.

HTTP (Hypertext Transfer Protocol – «протокол передачи гипертекста») – предназначен для установления связи с веб-сервером и обеспечения доставки HTML-страниц веб-браузеру клиента. Иначе говоря, HTTP – это «язык», на котором общаются браузер и сервер.

Гипертекст – размеченный текст, содержащий в себе ссылки на внешние ресурсы.

8 Тема Рисунок 1.1. Объединение сетей в Интернет Веб-страница – гипертекстовой ресурс Всемирной паутины, обычно написанный на языке HTML. Веб-страница может содержать ссылки для перехода на другие страницы, а также изображения, медиафайлы, например звуковые файлы и видео, Flash-анимацию и т.п.

Программа, демонстрирующая веб-страницу, называется веб-браузер. Несколько веб-страниц, объединенных общей темой и дизайном, образуют вебсайт.

Веб-сервер (HTTP-сервер) – это программное обеспечение (ПО), предоставляющее доступ к сайтам. Наиболее популярными веб-серверами являются Apache (для ОС Windows и Unix) и Microsoft IIS (для Windows). Также вебсервером называют компьютер, на котором установлено такое ПО.

URL (Uniform Resource Locator) – адрес ресурса.

Структура URL:

протокол :// пользователь : пароль @ хост : порт / путь запрос Содержание Некоторые элементы URL могут быть опущены. Чаще всего адрес имеет вид протокол :// хост / путь, где протокол – http, https, ftp, skype и др.

хост – доменное имя (или IP-адрес) путь – местонахождение ресурса на хосте Например: http://www.redut.ru/forum/index.php При помощи URL можно ссылаться на любой открытый ресурс, будь то страница, изображение, файл для загрузки и т.д.

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





Например:

maps.google.com – означает, что домен третьего уровня maps входит в домен второго уровня google, который в свою очередь входит в домен первого (верхнего) уровня com.

Домены верхнего уровня делятся на общие и географические. Общие домены предназначены для определенного класса организаций, например:

.com – для коммерческих сайтов;

.org – для некоммерческих организаций;

.net – для сайтов, чья деятельность связана с Интернетом.

Географические домены выделяются для конкретной страны, например:

.ru – Россия;

.us – США.eu – Европейский союз.de – Германия Использование географического домена не всегда означает то, что сайт размещается в соответствующей стране или имеет к ней какое-либо отношение.

Например, многие телекомпании используют домен.tv островного государства Тувалу.

Помимо доменного имени для работы сайта необходим круглосуточно работающий веб-сервер, способный выдержать большие нагрузки. Услуга размещения веб-сайта на веб-сервере называется хостингом. Хостинг может быть платным или бесплатным. На платном хостинге, как правило, предоставляется доменное имя второго уровня. За пользование хостингом и доменом взи10 Тема мается абонентская плата. На бесплатном хостинге предоставляется доменное имя третьего уровня (напр. example.narod.ru). По сравнению с платным хостингом, бесплатный имеет ограниченную функциональность, возможен принудительный показ рекламы на размещаемом сайте и т.п.

Механизм работы:

1. Браузер открывает соединение с сервером 2. Браузер отправляет серверу запрос на получение страницы 3. Сервер формирует ответ (HTML-код или, например, картинку) браузеру и закрывает соединение 4. Браузер обрабатывает HTML-код и отображает страницу Рисунок 1.2. Механизм взаимодействия Ресурсы в Интернете • Интернет. http://ru.wikipedia.org/wiki/Интернет • Всемирная паутина. http://ru.wikipedia.org/wiki/Www • Доменное имя. http://ru.wikipedia.org/wiki/Доменное_имя • Список национальных доменов верхнего уровня http://ru.wikipedia.org/wiki/Список_национальных_доменов_верхнего _уровня Содержание Задания:

Задания в этой теме рекомендуется сначала выполнить вместе с преподавателем и затем повторить дома.

а) С помощью команды tracert (в Windows) или traceroute (в Linux) определите маршрут передачи данных до удаленных отчественного и зарубежного узлов в Интернете (например, www.yandex.ru и www.google.com). Если работе команды препятствуют настройки брандмауэра, воспользуйтесь аналогичным сервисом в Интернете, например http://ping.eu/.

б) Используя службу Whois, получите регистрационные данные выбранных доменов.

в) Измерьте вашу скорость подключения к Интернету с помощью сервиса http://speedtest.net или аналогичного.

г*) В дополнении FireBug для браузера Mozilla или аналогичном инструменте изучите работу протокола HTTP: заголовки запроса браузера, заголовки ответа сервера, MIME-типы ресурсов.

12 Тема Тема 2. Язык HTML Лекция 2.1. Основы HTML Язык HTML (от англ. HyperText Markup Language – «язык разметки гипертекста») служит для создания веб-страниц. Большинство сайтов созданы именно с помощью HTML.

Синтаксис HTML HTML-документы представляют собой файлы с текстом и дополнительными инструкциями языка HTML, называемыми тегами. Теги позволяют задавать форматирование текста, а также размещать в документе мультимедийные файлы (изображения, звук, Flash-анимацию), гипертекстовые ссылки на другие документы, табличные данные, формы ввода данных. HTML-документы имеют расширение имени файла htm или html. Редактирование HTML кода производят в текстовом редакторе (например, в обычном блокноте), а просмотр – в браузере.

Структура тега:

<имя тега атрибут1 атрибут2="значение2"...> Тег состоит из имени тега, за которым может следовать список атрибутов, помещаемых между открывающей и закрывающей угловыми скобками (< и >). Атрибуты позволяют управлять поведением тега. Они могут иметь конкретные значения, задаваемые после знака равенства. Значения атрибутов заключаются в одиночные или двойные кавычки ("). Атрибуты отделяются друг от друга пробелом, порядок следования атрибутов значения не имеет.

Имена тэгов и атрибутов нечувствительны к регистру.

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

Теги подразделяются на парные и непарные. Парные теги имеют закрывающий тег, непарные – не имеют. Закрывающий тег содержит косую черту пеЯзык HTML ред именем и не имеет атрибутов. Между открывающим и закрывающим тегами помещается текст и другие теги. Атрибуты указываются только в открывающем теге.

Для выделения текста жирным используется тег . Пример:

HTML-код: текст жирный текст текст В браузере: текст жирный текст текст Примером непарного тега является тег
– перевод строки. Обычный перевод строки клавишей {Enter} браузер игнорирует (как и несколько поставленных подряд пробелов или знаков табуляции).

Неправильно:

HTML-код:

первая строка вторая строка В браузере:

первая строкавторая строка Правильно:

HTML-код:

первая строка
вторая строка В браузере:

первая строка вторая строка Парный тег обязательно должен иметь закрывающий! Например, если не закрыть тег , весь текст на странице за ним станет жирным.

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

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

Pages:     || 2 | 3 | 4 | 5 |   ...   | 7 |










© 2011 www.dissers.ru - «Бесплатная электронная библиотека»

Материалы этого сайта размещены для ознакомления, все права принадлежат их авторам.
Если Вы не согласны с тем, что Ваш материал размещён на этом сайте, пожалуйста, напишите нам, мы в течении 1-2 рабочих дней удалим его.