Единое окно доступа к образовательным ресурсам

Создание сайтов: HTML, CSS, PHP, MySQL. Учебное пособие. Часть 1

Голосов: 15

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

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




              Создание сайтов:
           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 ...................................................................................... 42
  Лекция 3.1. Основы CSS ................................................................................. 42
  Лекция 3.2. CSS-свойства: размеры, цвета, шрифты, текст......................... 50
  Лекция 3.3. CSS-свойства: поля, заполнение, границы................................ 56
  Лекция 3.4. CSS-свойства: фон, оформление таблиц ................................... 64
  Лекция 3.5. Теги DIV и SPAN, псевдоклассы............................................... 73
  Лекция 3.6. CSS-свойства: позиционирование ............................................. 81
Тема 4. Верстка сайтов. ....................................................................................... 93
  Лекция 4.1. Основы верстки. Табличная верстка. ........................................ 93
  Лекция 4.2. Блочная верстка......................................................................... 103


 4                                                              Введение

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

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



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


 Содержание                                                                      5
дойти к выбору текстового редактора. Использование обычного редактора
замедляет скорость работы, ведет к увеличению количества ошибок в коде.
Необходима специализированная программа для разработчиков с поддерж-
кой подсветки и свертывания синтаксиса HTML, CSS и PHP в одном файле.
Желательно также наличие автодополнения и справки по аргументам функ-
ций, инструмента выбора цвета и т.п. Этим требования отвечают такие бес-
платные          редакторы,           как         Notepad++         (http://notepad-
plus.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.   Установка на каждый компьютер в учебном классе. Наиболее про-
         стой сценарий, но и наименее гибкий. При использовании ОС Win-
         dows для запуска серверов обязательно наличие прав администрато-
         ра.
    2.   Установка на выделенный сервер в локальной сети. В этом случае
         необходимо выделить для каждого учащегося отдельный каталог и
         базу данных на сервере, обеспечить удаленный доступ и разделение
         прав пользователей. Преимуществом данного способа является при-
         ближение к реальным условиям разработки, возможность совмест-
         ной работы учащихся и выполнения задач с любого рабочего места.
    3.   Установка выделенного сервера, аналогичная предыдущему вариан-
         ту, но с доступом через Интернет. Реализуется на круглосуточно ра-
         ботающем сервере с прямым подключением к глобальной сети (с
         выделением внешнего IP-адреса) или покупкой услуги хостинга.


 6                                                             Введение
Наиболее предпочтителен последний сценарий, т.к. при нем возможна уда-
ленная работа учащихся из дома и упрощается презентация результатов на
выставках, конференциях и т.п. Если такой способ является слишком затрат-
ным, то можно комбинировать первые два варианта: при наличии компьюте-
ра дома учащиеся устанавливают на него веб-сервер и СУБД, а в классе поль-
зуются общим выделенным сервером.
Рекомендуется использовать последние стабильные версии Apache, MySQL и
оболочки phpMyAdmin или готовых сборок (WampServer, XAMMP).
Эти программы не предъявляют серьезных требований к аппаратному обес-
печению и могут быть запущены на относительно «слабых» компьютерах.


Условные обозначения, принятые в пособии


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

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


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

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

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


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


 Содержание                                                            7
Тема 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.1. Объединение сетей в Интернет


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


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


 Содержание                                                            9
Некоторые элементы 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                                                                  Тема 1
мается абонентская плата. На бесплатном хостинге предоставляется домен-
ное имя третьего уровня (напр. 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/Список_национальных_доменов_верхнего
           _уровня



    
Яндекс цитирования Яндекс.Метрика