Главная страница
qrcode

Н., хаи, 2013 11. Введение в веб-программирование. Html-разметка


Скачать 11.83 Mb.
НазваниеН., хаи, 2013 11. Введение в веб-программирование. Html-разметка
Дата10.09.2019
Размер11.83 Mb.
Формат файлаpdf
Имя файлаВведение в веб-программирование.pdf
оригинальный pdf просмотр
ТипРеферат
#64805
страница1 из 12
Каталог
  1   2   3   4   5   6   7   8   9   ...   12
9 лекций по веб-программированию (c) Пономаренко Н.Н., ХАИ, 2013
1
1. Введение в веб-программирование. HTML-разметка
В ходе данного краткого курса мы изучим основы вебпрограммирования, которых, тем не менее, будет достаточно для полноценной разработки сайтов Интернета. Будут рассмотрены: HTML разметка веб-страниц и каскадные таблицы стилей (CSS), программирование клиентской части сайтов на JavaScript, программирование серверной части сайтов на PHP, использование системы управления базами данных MySQL, построение сайтов на базе систем управления содержимым (CMS) на примере CMS Joomla.
Курс рассчитан на слушателя, который уже знает один из языков программирования (например, C/C++, Pascal, Matlab) и понимает, что такое массивы, циклы и операторы условного перехода, а также какие бывают типы переменных.
В связи с тем, что данный курс является комплексным, нет необходимости рассказать вначале все о HTML, затем все о JavaScript и т.д. Поэтому, несмотря на то, что в целом содержание лекций является достаточно жестко структурированным, о многих вещах будет рассказываться именно в тот момент, когда слушатель будет наиболее готов к этому. Например, элементы форм HTML будут рассмотрены на 4-й лекции одновременно с основами PHP, которые позволят сразу же продемонстрировать обработку полученных от HTML-страницы данных формы на сервере.
Первая лекция посвящена вступлению в вебпрограммирование и основам HTML.
На второй лекции будут рассмотрены каскадные таблицы стилей, которые позволят нам отделить содержание веб-страницы (HTML) от ее оформления (CSS).
На третьей лекции мы изучим основы языка программирования JavaScript, узнаем, как с его помощью можно автоматически генерировать текст веб-страницы, обрабатывать события и “на лету” изменять текст вебстраницы.
Четвертая лекция посвящена основам языка PHP. Мы узнаем, в чем его преимущество перед JavaScript при генерировании текста страниц, а также как обрабатывать запросы HTML-страницы к серверу, рассмотрим отладку
PHP-программ на локальном компьютере.
На пятой лекции мы узнаем, как пользоваться базами данных с помощью MySQL, как ими управлять, как сохранять в них данные, искать и извлекать по запросам.
На шестой лекции будет несколько глубже рассмотрен язык программирования JavaScript, в частности, работа с cookies, формирование запросов к серверу без перегрузки веб-страницы, библиотека JQuery.
Седьмая лекция будет посвящена некоторым тонкостям программирования на PHP, в частности, работе с регулярными выражениями, графикой, криптографическими функциями.
На восьмой лекции будут рассмотрены CMS и построение сайта на примере CMS Joomla.
Последняя, девятая, лекция будет посвящена тонкостям и трюкам веб-программирования, объектноориентированному программированию на PHP, вопросам продвижения сайтов и заработка на рекламе.
Все примеры страниц и программ в лекциях для удобства использования дублируются в отдельных файлах.
1.1. Базовые знания о сети Интернет
На рисунке 1.1 приведена упрощенная структурная схема взаимодействия компьютера пользователя с Интернетом или с локальной сетью.
Пользователь
Браузер
(JavaScript,
HTML,
CSS)
Adobe Flash Player
(FLASH анимация, Action
Script)
Один из
DNS серверов
Registars
Компьютер пользователя
Интернет или локальная сеть
Сервер
(PHP, Python, Perl, Ruby, JAVA,
ASP.NET, MySQL, любые программы)
Интернет или локальная сеть
DNS сервер, где хранится IPадрес домена
Рисунок 1.1 - Взаимодействие компьютера пользователя с сетью при загрузке и просмотре веб-страницы
Для просмотра веб-страниц в Интернете пользователи используют специальные программы, называемые
браузерами. К наиболее распространенным относятся
Mozilla FireFox, Opera, Internet Explorer (не рекомендуется использовать), Google Chrome.
Пользователь набирает в своем браузере адрес вебстраницы интернета. Если он набирает его в цифровом виде
(IP-адрес вида 74.125.232.248), то браузер непосредственно связывается с сайтом Интернета, который находится по этому адресу. Если же адрес задан в текстовом виде, например «google.ru», то браузер связывается с DNS-
сервером (прописанным в настройках сети компьютера), который заменяет текстовое имя на соответствующий ему
IP-адрес.
Имя сайта в текстовом виде еще называют доменным
именем. Так «google.ru» является доменом второго уровня в домене первого уровня «.ru». К наиболее распространенным доменным именам первого уровня относятся «.com», «.org»,
«.net», «.ru».
Каждый DNS сервер хранит данные (таблицу соответствия всех известных текстовых доменных имен цифровым IP-адресам). Это большой массив информации.
Поэтому DNS сервера разбиты на несколько уровней, каждый из которых регулярно (примерно 2 раза в сутки) получает обновление от DNS-сервера старшего уровня. DNS сервера самого старшего уровня получают данные от
Registars (компаний, отвечающих за регистрацию доменных имен). Registars за плату хранят информацию о том, какое доменное имя принадлежит какому человеку (или компании), а также регистрируют новые (незанятые) доменные имена.
Стоимость регистрации доменных имен второго уровня может составлять от 2 долларов за год для домена .info до 710 долларов за год для доменов .com, .org, .net. Доменные имена третьего уровня (например, ponom.pusku.com) не требуют регистрации в компаниях Registars и иногда раздаются бесплатно. Каждый год требуется продлевать регистрацию доменного имени. Такая процедура называется
renew и обычно стоит дороже, чем регистрация (плата за первый год).
9 лекций по веб-программированию (c) Пономаренко Н.Н., ХАИ, 2013
2
Процедура регистрации доменного имени состоит в выполнении следующих шагов. Среди компаний Registars выбираем ту, чьи расценки на регистрацию и продление доменных имен в выбранной зоне являются наиболее подходящими. На сайте этой компании проверяем, чтобы то доменное имя, которое мы регистрируем, было не занято в данный момент. Платим деньги (из Украины можно заплатить через Интернет с помощью любой зарплатой карточки). На сайте компании Registars указываем IP-адрес
DNS-сервера (или серверов), который знает, где физически находится веб-страница, соответствующая нашему домену.
При условии, что DNS-сервер правильно настроен и страница существует, она станет доступной для пользователей всего мира (которые наберут в своем браузере наше только что зарегистрированное доменное имя) приблизительно через день.
Человек, которому нужно создать свой сайт, может организовать сервер, где будут находиться веб-страницы и данные сайта, самостоятельно. Для этого требуется выделенный ip-адрес, зарегистрированное доменное имя и компьютер, подключенный к сети Интернет. Другим путем создания сайта является заказ платного или бесплатного
хостинга у компаний, предоставляющих такие услуги (в этом случае требуется только зарегистрированное доменное имя или же бесплатно предоставляемое некоторыми хостингами доменное имя третьего уровня).
Хостинг может быть виртуальным (это дешевле). В таком случае на одном компьютере одновременно работают несколько сайтов разных владельцев. Хостинг может быть
выделенным (это намного дороже). В этом случае для сайта выделяется отдельный компьютер. Для виртуального
хостинга на веб-страницу накладываются ограничения по использованию ресурсов процессора (чтобы она не замедляла работу чужих сайтов).
Основные характеристики хостинга:
- Выделенный или виртуальный хостинг;
- Наличие и величина ограничений на объем трафика;
- Объем выделяемого места на диске;
- Наличие поддержки PHP (важно какая именно версия PHP установлена) и других языков программирования;
- Наличие поддержки MySQL и сколько баз данных разрешено создать;
- Количество доменов, которые можно привязать к своему
аккаунту на хостинге.
Большинство хостингов предоставляют доступ к сайту и управление им как через веб-интерфейс, так и через ftp.
После того, как хостинг настроен, к нему привязано доменное имя, стартовая веб-страница сайта создана, пользователи могут заходить на этот сайт. Если набрать в браузере только имя сайта без указания конкретной вебстраницы, например, http://ponomarenko.info
, то по умолчанию будет загружена страница index.html или index.htm или index.php (если хотя бы одна из страниц с таким именем есть на сайте).
1.2. Основы HTML
Цель данной лекции - рассказать о основах HTML, не претендуя на полную справочную информацию (в качестве справочника по тегам HTML можно порекомендовать, например, сайт http://htmlbook.ru/html
).
HTML (HyperText Markup Language) переводится как
“язык разметки гипертекста”. Под разметкой здесь понимается структурирование, форматирование и оформление документов.
HTML-страница представляет собой текстовый файл, который можно набрать в любом текстовом редакторе
(например, в редакторе notepad++) и, который имеет расширение *.html или *.htm.
HTML-страница состоит из элементов, которые начинаются и заканчиваются специальными пометками - тегами. Теги - это ключевые слова, взятые в угловые скобки
(символы меньше “<” и “больше” “>”). Например, тег
означает, что в этом месте веб-страницы нужно вставить горизонтальную линию. Большинство тегов в отличие от тега
применяются парами (обрамляют фрагмент текста). Например “Привет, мир! означает, что текст “Привет мир” должен быть выделен жирным шрифтом. Здесь тег означает включение жирного шрифта, а тег - окончание действия тега . В данном случае говорят, что тег - открывающий, а тег - закрывающий.
В общем случае открывающий тег заключается в угловые скобки вот так: <тег>, а закрывающий тег заключается в такие же скобки, но перед ключевым словом ставится еще наклонная черта “/” вот так: .
Веб-страница просматривается в браузере, который интерпретирует встречающиеся теги и выполняет нужные действия по разметке текста. Если какой-то тег неизвестен данному браузеру, то он просто игнорирует его. Язык HTML является стандартизированным и в теории действия всех браузеров должны соответствовать стандарту, однако на практике одна и та же веб-страница в разных браузерах может выглядеть по-разному. Причем отличия могут быть очень сильными и, иногда, даже противоречить стандарту
(особенно это касается браузера Internet Explorer). Поэтому разработчик веб-страницы должен тестировать ее
(предварительно просматривать) по возможности на всех основных браузерах.
На рисунке 1.2 приведен пример текста самой простой веб-страницы (файл ex1_01.html) и окна браузера при просмотре данной веб-страницы (в любом файловом менеджере кликните по файлу страницы мышкой и она откроется в Интернет-браузере).


Здравствуй, цифровой мир!
9 лекций по веб-программированию (c) Пономаренко Н.Н., ХАИ, 2013
3
..
Здравствуй, цифровой мир!
Здравствуй, цифровой мир!
Здравствуй, цифровой
   
мир!
А вот так выглядит греческая буква кси: ξ
9 лекций по веб-программированию (c) Пономаренко Н.Н., ХАИ, 2013
4
На рисунке 1.6 приведен пример использования тегов

Здравствуй, цифровой
   
мир!
А вот так выглядит греческая буква кси: ξ
). Браузер просто игнорирует эти пустые строки и их может быть сколько угодно много.
В следующем примере (файл ex1_06.htm) в заголовок добавлена информация еще и об иконке страницы
(отображается в заголовке вкладки браузера, в закладках, в журнале посещений). Иконка должна иметь размеры 16x16 пикселей и может быть как статичной (в формате *.ico), так и анимированной (в формате *.gif). В данном примере в заголовок добавлены иконки обоих типов (см. рисунок 1.7).
Информация об иконках страницы передается браузеру внутри тега с помощью одиночного тега
. Этому тегу не нужно закрывающего тега, однако впервые мы сталкиваемся с необходимостью устанавливать
атрибуты тега, которые задаются внутри него.


Здравствуй, цифровой
   
мир!
А вот так выглядит греческая буква кси: ξ
9 лекций по веб-программированию (c) Пономаренко Н.Н., ХАИ, 2013
5


Ссылка на сайт википедии
А это ссылка на предыдущий примерГлавный корпус ХАИ
ХАИ
Вы видели когда-нибудь главный корпус ХАИ?
9 лекций по веб-программированию (c) Пономаренко Н.Н., ХАИ, 2013
6
показан при наведении на изображение курсора мышки.
И, наконец, атрибут align задает выравнивание последующего текста (в данном примере - “ХАИ”) относительно изображения.
На рисунке 1.10 приведен пример использования тегов
, и , которые позволяют добавлять таблицы на веб-страницу (файл ex1_09.html).



Номер Комментарий


Задача

День неделиВторникСредаЧетвергКупить молокоДаПосетить курсы английского языкаДа
9 лекций по веб-программированию (c) Пономаренко Н.Н., ХАИ, 2013
7
же атрибут в теге Атрибуты align и valign тега И, наконец, атрибут style (его мы подробно рассмотрим на следующей лекции) задает стиль оформления таблицы
(жирную рамку и одинарные линии внутри таблицы вместо сдвоенных).
Последним примером лекции (file ex1_11.html) проиллюстрируем действие некоторых тегов, использующихся при оформлении текста (см. рисунок 1.12).


  1   2   3   4   5   6   7   8   9   ...   12

перейти в каталог файлов


связь с админом