Урок I
Общие сведения о сетях ЭВМ
» Кликните сюда для просмотра оффтоп текста.. «
Сама деятельность по созданию сайтов подразумевает работу с компьютерной сетью Internet. Под компьютерной сетью (далее сетью) понимают совокупность цепей передачи данных и коммутирующих устройств,позволяющая осуществить взаимное соединение оконечного оборудования, среди которого есть компьютеры. Всякая сеть подразумевает наличие некоторой иерархии (стека) протоколов, совокупности правил, регламентирующих передачу данных в процессе связи. В частности, в Internet используется иерархия протоколов
TCP/IP. Опишем частично этот стек протоколов.
TCP/IP, DNS
Протокол IP (Internet Protocol) регламентирует передачу пакетов (наборов данных, передаваемых как единое целое) между узлами сети. Протокол TCP (Transmission Control Protocol) обеспечивает прозрачную передачу информации между процессами (программами) с использованием протокола IP. В свою очередь протоколы HTTP и FTP (часто используемые в Internet) используют TCP.
Компьютерам (и некоторым другим устройствам) в IP-сетях присваиваются IP-адреса для уникальной идентификации устройства. В настоящее время чаще всего IP-адрес состоит из 4 байт. Иногда он используется для задания адреса в браузере. В этом случае используется 256-ричная система счисления, в котором цифры отделяются друг от друга точками, а каждая цифра записывается в виде десятичного представления (например, 193.125.254.9). Некоторые адреса используются для служебных целей (в частности, 127.0.0.1, указывает на компьютер, с которого передается информация). Естетственно, 4 294 967 296 адресов может не хватить для нумерации всех устройств, подключенных к Internet, поэтому в скором будущем планируется переход к протоколу IPv6, в котором адрес будет занимать 6 байт.
Естествнно, человеку не удобно использовать IP-адреса компьютеров для работы с ними в сети, вместо них используются доменные имена. Именно, когда человек использует адрес, например, fmsh.miem.edu.ru, программа-браузер обращается к одному из компьютеров, серверов DNS (Domain Name System), который по доменному имени возвращает IP-адрес компьютера, на который потом и посылается запрос. Отмечу, что одному компьютеру может соответствовать несколько доменных имен.
Иногда после IP-адреса или доменного имени компьютера (в адресной строке браузера) используется конструкция состоящая из двоеточия и целого неотрицательного числа. Это число показывает номер порта TCP, к которому производится обращение. Дело в том, что программа, которая посылает ответ на запрос ждёт его именно на каком-то из портов (по умолчанию, 80, для протокола HTTP).
Таким образома, URL (Universal Resource Locators), набираемый в строке браузера, имеет следующий вид:
протокол://адрес:порт/путь ,
где протокол - это обычно HTTP, адрес - IP или доменное имя компьютера, порт (вместе с двоеточием) может отсутствовать.
Компьютер и программу, инициирующие соединение, называют клиентами (компьютер-клиент, программа-клиент), соответственно, компьютер и программа, отвечающие на запрос называют серверами (компьютер-сервер, программа-сервер).Для протоколов HTTP и HTTPS (hypertext Transmission Protocol (Secure)) программа-сервер называется WEB-сервером. Чаще всего используются WEB-серверы Apache (свободно распространяемый, Open Source), IIS (Microsoft). Основные используемые программы-клиенты - это Internet Explorer (Microsoft), Firefox и Mozilla, Opera.
Рассмотрим более подробно работу браузера и WEB-сервера. В простейшем случае браузер посылает запрос WEB-серверу, который возвращает содержимое файла, имя которого содержится в URL (такой сайт называют статическим). Однако, возможен другой случай: WEB-сервер запускает программу (скрипт, запускаемый на стороне сервера) и возвращает результат его работы. В этом случае сайт называется динамическим, так как результат работы скрипта может меняться с течением времени (и в зависимости от пользователя). Кроме того, указанный скрипт может, например, обращаться к базам данных. С другой стороны, не каждое действие пользователя нужно обрабатывать на стороне сервера, поэтому некоторые действия могут выполняться скриптами на стороне клиента (например, проверка правильности ввода даты). Скрипты на стороне клиента пишутся обычно на языках JavaScript, Java. Могут использоваться VBScript, ActionScript (Flash) и вообще любые языки программирования. В некоторых случаях текст скрипта встроен в HTML-документ, в других случаях загружается из отдельного файла. На стороне сервера чаще всего используют PHP, Perl, ASP, но можно использовать любые языки (даже Prolog).
Технологии, используемые при создании сайтов (резюме)
» Кликните сюда для просмотра оффтоп текста.. «
Теперь следует перейти к перечислению тех средств, которые используются при создании сайтов и их краткой характеристике
HTTP. Протокол передачи гипертекста
HTML. Язык разметки гипертекста. Документы именно на этом языке передаются чаще всего через Internet.
CSS. Язык описания стилей, описываются типы шрифтов, способы расположения информации в документе HTML и другие дизайнерские аттрибуты. Информация на языке CSS может быть встроена в документ HTML или загружаться из отдельного файла.
JavaScript (JScript), VBScript, Java, COM-объекты, Flash. Представленные средства (первые три из них языки программирования) предоставляют возможность для написания скриптов, исполняемых на стороне клиента
PHP, Perl, любые другие языки (включая Prolog). Используются для написания скриптов, исполняемых на стороне сервера
СУБД (например, MySQL). Программа, организующая работу с базами данных (на сервере)
WEB-сервер (например, Apache). Программа, обрабатывающая запросы браузеров.
Общие сведения по HTML
» Кликните сюда для просмотра оффтоп текста.. «
Язык HTML (HyperText Markup Language - язык разметки гипертекста) предназначен для описания вида документов (как они будут выглядеть в браузерах), содержащих текст и некоторые дополнительные структуры (такие как таблицы, списки, рисунки). Кроме того, можно вставлять ссылки между частями документа (а также на другие документы), с которыми удобно работать в браузере. Замечу, что HTML не является языком программирования.
Приведу пример простейшего HTML-документа:
Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/frameset.dtd">
<html>
<head>
<title>Приветик</title>
</head>
<body>
<p align="center">
Всем привет!.</p>
</body>
</html>
Первая строка (она необязательна, но желательна) показывает версию языка HTML, которой пользуется автор документа.
Текст, заключённый в угловые скобки является служебным и прямо в документе не появляется. Такой текст вместе с угловыми скобками называется
тэгом. После открывающейся угловой скобки идёт название
элемента (часто говорят также
тэга). Если предварительно поставлен символ / (слэш), то тэг называют
конечным, иначе его называют
начальным. Внутри тэга могут использоваться
атрибуты (в примере в тэге
p, обозначающему абзац). Атрибуты вводятся либо путём использования названия атрибута, либо путём использования конструкции атрибут=значение (значение часто помещают в кавычки, это рекомендуется делать всегда). Названия тэгов и атрибутов не чувствительны к регистру символов, однако, мы будем использовать строчные буквы (согласно стандарту XHTML). Между тэгами <html> и </html> размещают собственно HTML-документ. Он состоит из двух разделов — заголовка (между тэгами <head> и </head> и тела (между тэгами <body> и </body>) (в некоторых случаях раздел body не используется и может быть использован раздел frameset).
Внутри тэга
title указывается название документа (оно используется в заголовке окна браузера, а также является строкой по умолчанию для закладок). Внутри тела документа просто указана строка, которая будет отображаться в основной части окна браузера.
Большинство тэгов языка HTML имеют двойное назначение. С одной стороны, они структурируют части документа, с другой стороны, им соответствует некоторый способ отображения в браузере. Так тэг
ol предназначен для помещения в документ нумерованного списка.
Некоторые тэги предназначены только для описания способа вывода (так, например тэг font позволяет изменять размер шрифта). В последнее время существует тэнденция по разделению этих двух аспектов. Так с помощью тэгов HTML описывают структуру документа, а способ отображения описывают с помощью языка CSS (каскадные таблицы стилей). В результате тэг font относится к разряду нерекомендуемых консорциумом W3C, однако, используется он весьма часто, так как в реальных браузерах он поддерживается всегда, а те же CSS в старых браузерах не поддерживаются.
В мире существует огромное количество версий языка HTML. Во-первых, существуют спецификации языка HTML, принятые консорциумом W3C. Во-вторых, в каждом браузере реализованы не все возможности, имеющиеся в спецификации, однако, существуют свои собственные "фишки". Поэтому профессиональные сайты необходимо тестировать на максимально возможном количество браузеров.
Особенности языка HTML
» Кликните сюда для просмотра оффтоп текста.. «
Текст на языке HTML представляет собой структуру вложенных тэгов, на самом глубоком уровне которой используется обычный текст. Некоторые элементы могут не иметь открывающего и/или закрывающего тэга (или даже их обоих). В первом случае принято (в частности, в XHTML) перед > ставить символ /. Примерами элементов, которые могут не иметь открывающего и закрывающего тэга является
html, head и body, однако, опускать их не стоит. Внутри каждого элемента могут использоваться только те тэги, которые входят в контекст этого элемента. Так, внутри элемента html могут быть расположены только тэги head и body. Если их нету, то по найденному элементу можно понять какой из вышеуказанных тэгов был опущен.
Для обозначения комментариев используется следующая конструкция: <!-- комментарий -->. Если необходимо вставить символ < в текст используется конструкция < (иначе он воспринимается как начало тэга), для вставления символа > — > (иначе он может быть воспринят как конец тэга). Соответственно, символ & обозначают последовательностью &. Внутри значения атрибута (помещенного в кавычки) для обозначения собственно кавычки используют последовательность ".
В ЭВМ каждый символ имеет свой код. Во многих случаях сейчас используются кодовые таблицы, состоящие из 256 символов, однако, такого количества символов часто не хватает. Поэтому, имеются кодовые таблицы, в которых код занимает не 1 байт, а 2 (таков, например, UNICODE). В качестве базовой кодовой таблицы в HTML принят UNICODE. Необходимо отметить, что в HTML-тексте можно вместо названия символа указывать его код следующим способом: &#код символа;.
Приведу практически полный список псевдонимов символов (а также их кодов) в виде "Псевдоним символа код символа символ":
» Кликните сюда для просмотра оффтоп текста.. «
quot 34 "
amp 38 &
lt 60 <
gt 62 >
OElig 338 Œ
oelig 339 œ
Scaron 352 Š
scaron 353 š
Yuml 376 Ÿ
circ 710 ˆ
tilde 732 ˜
ensp 8194
emsp 8195
thinsp 8201
zwnj 8204
zwj 8205
lrm 8206
rlm 8207
ndash 8211 –
mdash 8212 —
lsquo 8216 ‘
rsquo 8217 ’
sbquo 8218 ‚
ldquo 8220 “
rdquo 8221 ”
bdquo 8222 „
dagger 8224 †
Dagger 8225 ‡
permil 8240 ‰
lsaquo 8249 ‹
rsaquo 8250 ›
euro 8364 ?
nbsp 160
iexcl 161 ¡
cent 162 ¢
pound 163 £
curren 164 ¤
yen 165 ¥
brvbar 166 ¦
sect 167 §
uml 168 ¨
copy 169 ©
ordf 170 ª
laquo 171 «
not 172 ¬
shy 173
reg 174 ®
macr 175 ¯
deg 176 °
plusmn 177 ±
sup2 178 ²
sup3 179 ³
acute 180 ´
micro 181 µ
para 182 ¶
middot 183 ·
cedil 184 ¸
sup1 185 ¹
ordm 186 º
raquo 187 »
frac14 188 ¼
frac12 189 ½
frac34 190 ¾
iquest 191 ¿
Agrave 192 À
Aacute 193 Á
Acirc 194 Â
Atilde 195 Ã
Auml 196 Ä
Aring 197 Å
AElig 198 Æ
Ccedil 199 Ç
Egrave 200 È
Eacute 201 É
Ecirc 202 Ê
Euml 203 Ë
Igrave 204 Ì
Iacute 205 Í
Icirc 206 Î
Iuml 207 Ï
ETH 208 Ð
Ntilde 209 Ñ
Ograve 210 Ò
Oacute 211 Ó
Ocirc 212 Ô
Otilde 213 Õ
Ouml 214 Ö
times 215 ×
Oslash 216 Ø
Ugrave 217 Ù
Uacute 218 Ú
Ucirc 219 Û
Uuml 220 Ü
Yacute 221 Ý
THORN 222 Þ
szlig 223 ß
agrave 224 à
aacute 225 á
acirc 226 â
atilde 227 ã
auml 228 ä
aring 229 å
aelig 230 æ
ccedil 231 ç
egrave 232 è
eacute 233 é
ecirc 234 ê
euml 235 ë
igrave 236 ì
iacute 237 í
icirc 238 î
iuml 239 ï
eth 240 ð
ntilde 241 ñ
ograve 242 ò
oacute 243 ó
ocirc 244 ô
otilde 245 õ
ouml 246 ö
divide 247 ÷
oslash 248 ø
ugrave 249 ù
uacute 250 ú
ucirc 251 û
uuml 252 ü
yacute 253 ý
thorn 254 þ
yuml 255 ÿ
fnof 402 ƒ
Alpha 913 Α
Beta 914 Β
Gamma 915 Γ
Delta 916 Δ
Epsilon 917 Ε
Zeta 918 Ζ
Eta 919 Η
Theta 920 Θ
Iota 921 Ι
Kappa 922 Κ
Lambda 923 Λ
Mu 924 Μ
Nu 925 Ν
Xi 926 Ξ
Omicron927 Ο
Pi 928 Π
Rho 929 Ρ
Sigma 931 Σ
Tau 932 Τ
Upsilon 933 Υ
Phi 934 Φ
Chi 935 Χ
Psi 936 Ψ
Omega 937 Ω
alpha 945 α
beta 946 β
gamma 947 γ
delta 948 δ
epsilon 949 ε
zeta 950 ζ
eta 951 η
theta 952 θ
iota 953 ι
kappa 954 κ
lambda 955 λ
mu 956 μ
nu 957 ν
xi 958 ξ
omicron 959 ο
pi 960 π
rho 961 ρ
sigmaf 962 ς
sigma 963 σ
tau 964 τ
upsilon 965 υ
phi 966 φ
chi 967 χ
psi 968 ψ
omega 969 ω
thetasym 977 ϑ
upsih 978 ϒ
piv 982 ϖ
bull 8226 •
hellip 8230 …
prime 8242 ′
Prime 8243 ″
oline 8254 ‾
frasl 8260 ⁄
weierp 8472 ℘
image 8465 ℑ
real 8476 ℜ
trade 8482 ™
alefsym 8501 ℵ
larr 8592 ←
uarr 8593 ↑
rarr 8594 →
darr 8595 ↓
harr 8596 ↔
crarr 8629 ↵
lArr 8656 ⇐
uArr 8657 ⇑
rArr 8658 ⇒
dArr 8659 ⇓
hArr 8660 ⇔
forall 8704 ∀
part 8706 ∂
exist 8707 ∃
empty 8709 ∅
nabla 8711 ∇
isin 8712 ∈
notin 8713 ∉
ni 8715 ∋
prod 8719 ∏
sum 8721 ∑
minus 8722 −
lowast 8727 ∗
radic 8730 √
prop 8733 ∝
infin 8734 ∞
ang 8736 ∠
and 8743 ∧
or 8744 ∨
cap 8745 ∩
cup 8746 ∪
int 8747 ∫
there4 8756 ∴
sim 8764 ∼
cong 8773 ≅
asymp 8776 ≈
ne 8800 ≠
equiv 8801 ≡
le 8804 ≤
ge 8805 ≥
sub 8834 ⊂
sup 8835 ⊃
nsub 8836 ⊄
sube 8838 ⊆
supe 8839 ⊇
oplus 8853 ⊕
otimes 8855 ⊗
perp 8869 ⊥
sdot 8901 ⋅
lceil 8968 ⌈
rceil 8969 ⌉
lfloor 8970 ⌊
rfloor 8971 ⌋
lang 9001 〈
rang 9002 〉
loz 9674 ◊
spades 9824 ♠
clubs 9827 ♣
hearts 9829 ♥
diams 9830 ♦
Замечание: есть и другие символы (не имеющие псевдонима). Отметим отдельно символ
- неразрывный пробел - указывает браузеру по возможности не ставить его в конце или начале строки.
— — тире (в отличие от дефиса),
« и » - левая и правая кавычка (обычно они используются в русских текстах).
тэги HTML, HEAD, BODY
» Кликните сюда для просмотра оффтоп текста.. «
Перейдём к изучению атрибутов тэгов html, head и body. Тэг html поддерживает атрибуты lang и dir для указавания языка, используемого в документе. У lang значением является код языка, например, en, ru, en-US; у dir - направление чтения в языке (LTR (слева направо) или RTL (справа налево)). Эти атрибуты используются редко, однако, dir поддерживается браузерами. Замечу, что эти атрибуты можно использовать почти у всех тэгов (исключения: applet, base, basefont, br, frame, frameset, iframe, param, script).
У тэга body, помимо lang и dir, можно использовать атрибут title, указывающий текст всплывающей подсказки. Этот же атрибут можно также использовать у большинства других тэгов (исключения: base, basefont, head, html, meta, param, script, title). Кроме того, в нём (и большинстве других тэгов используются атрибуты, связанные с CSS и JavaScript, эти атрибуты мы рассмотрим при изучании этих языков. Кроме того, возможно использование нерекомендуемых атрибутов: background для указания фоновой картинки (значение - URL картинки), text для указания цвета текста, link - цвета непосещенных ссылок, vlink - посещенных ссылок, alink - ссылок, на которых наведен курсор, bgcolor - цвета фона (если его не указать таким образом или через CSS то можно сильно испортить дизайн путём изменения значения по умолчанию). Цвет можно указывать текстовым названием (Black, Silver, Gray, White, Maroon, Red, Purple, Fuchsia, Green, Lime, Olive, Yellow, Navy, Blue, Teal, Aqua) или с помощью указания шестнадцатеричного представления (например, #FFDD99), где первые две цифры соответствуют интенсивности красной компоненты цвета, вторые - зеленой, третьи - синей (RGB - Red, Green, Blue).
Внутри тэга head можно использовать только некоторые тэги, один из них - title, атрибутами которого являются dir и lang. Другие тэги, используемые в заголовке мы изучим позднее.
Элементы, используемые в теле документа
Элемент body включает контекст, в котором могут использоваться тэги уровня блока (и уровня текста), а также
ins, del и script (последний используется для вставления скриптов, выполняемых на стороне клиента).
Элементы уровня блока
*Абзац (p)
*Заголовки (h1...h6).
*Списки (ul, ol).
*Преформатированный текст (pre)
*Список определений (dl)
*Группировка на уровне блока (div и center)
*Цитата (blockquote)
*Элементы для работы с формами (form и fieldset)
*Горизонтальная линия (hr)
*Таблица (table)
*Адрес (address)
*другие тэги (noscript, noframes и isindex)
На текстовом уровне используются:
*собственно текст
*Элементы управления шрифтом (tt, i, b, big и small)
*Элементы логического форматирования (em, strong, dfn, code, samp, kbd, var cite, abbr и acronym)
*Специальные элементы (a, img, object, applet, br, script, map, q, sub, sup, span, bdo, iframe, font, basefont)
*Элементы управления в формах (input, select, textarea, label, button)
Структурирование тела HTML-документа
» Кликните сюда для просмотра оффтоп текста.. «
Для указания границ абзаца используется тэг <p>. Внутри него используются элементы текстового уровня. Атрибуты: lang, dir, title, align, указывающий способ выравнивания (left, right, center, justify - по левому краю, по правому краю, по центру и по ширине), он является нерекомендуемым.Закрывающий тэг необязателен, но лучше его использовать.
Для выделения границ заголовков используюстя тэги <h1> - <h6>. В них используюстя те же атрибуты, что и в <p>, эти элементы задают текстовый контекст. Закрывающий тэг обязателен.
Для группирования элементов уровня блока и текста используется элемент <div>. Он позволяет использовать атрибуты dir, lang, title и align. Причём значение align переносится на вложенные тэги <div> и заголовков (если в них не указано противоположное), для группирования элементов уровня текста испоьзуется <span>. Этот элемент имеет те же атрибуты, но практически используется только совместно с CSS. Сокращенная форма <div align="center"> - <center>
Элемент <address> содержит обычно описание (не гиперссылку) адреса автора текста. В браузере, обычно, выделяется курсивом. Имеет те же атрибуты, что и <p>.
Логическое форматирование
» Кликните сюда для просмотра оффтоп текста.. «
Все следующие элементы имеют атрибуты lang, dir, title. Обязательны как открывающий, так и закрывающий тэг. Автор с помощью этих элементов может указать тип содержимого элемента.
<em> Выделение текста (обычно курсив)
<strong> Усиленное выделение текста (обычно полужирный шрифт)
<dfn> Определение
<code> Тексты программ (обычно, моноширинный шрифт)
<samp> Пример (обычно, меньший размер)
<kbd> То, что вводится с клавиатуры (обычно, моноширинный шрифт)
<var> Переменная (обычно, моноширинный шрифт или курсив)
<cite> Текстовая ссылка (обычно, курсив)
<abbr> Аббревиатура (игнорируется многими браузерами)
<acronym> Акроним (слово, составленное из первых букв словосочетания, игнорируется многими браузерами)
Не смотря на то, что некоторые элементы игнорируются браузерами по умолчанию, их можно использовать для форматирования с помощью CSS.
Типографские элементы
» Кликните сюда для просмотра оффтоп текста.. «
Все следующие элементы имеют атрибуты lang, dir, title. Обязательны как открывающий, так и закрывающий тэг. <tt> Моноширинный шрифт
<i>
Курсив<b>
Полужирный шрифт<big>
Увеличенный шрифт<small>
Уменьшенный шрифт<strike>
Зачёркнутый шрифт<s>
Зачёркнутый шрифт<u>
Подчёркнутый шрифт<sup>
Верхний индекс<sub>
Нижний индексВсе эти элементы можно заменить с использованием CSS. Тэги <strike>, <s> и <u> являются нерекомендуемыми.
Элементы <font> и <basefont>
Элемент <font> использует атрибуты lang, dir, title, а также size, задающий размер от 1 до 7 или относительное значение (например, +1 или -3), color (задаёт цвет) и face (задаёт начертание шрифта, например Times New Roman, Times, Arial, несколько шрифтов указываются через запятую в порядке убывания приоритета). Элемент <basefont> задаёт базовый размер шрифта в атрибуте size (по умолчанию, 3).
Цитаты
Элемент <blockquote> задаёт длинную цитату и имеет контекст уровня блока. За исключением атрибутов lang, dir и title используется атрибут cite - адрес цитаты. Элемент <q> задаёт короткую цитату и имеет контекст уровня текста (в остальном он подобен blockquote).
Элемент <br />
задаёт принудительный переход на новую строку. Не имеет закрывающего тэга. Атрибуты: dir, lang и title.