Руководство по веб-технологиям(включая HTML, CSS и JavaScript)

Автор Филип Уитналл (ocProducts)

ОБЗОР

Composr построен на основе стандартных веб-/интернет-протоколов, языков и API.
Вот основные из них.

Протокол	Описание	Актуальность для вас
Разные протоколы
FTP и SFTP	Это стандарт для загрузки файлов на сервер.	Хорошо настроить SFTP-клиент (FTP небезопасен) и использовать  для загрузки/выгрузки файлов.   Это удобнее и надежнее, чем обычное использование файлового менеджера панели управления хостингом.
IMAP и POP3	Это общие протоколы для доступа к электронной почте.	Если вы не используете веб-почту, вы уже будете использовать их. Особого понимания в них не требуется.
TCP / IP	Это протокол для передачи интернет-данных.	Вам не нужно много знать, кроме как знать, что такое IP-адреса и для чего они используются - Использование IP-адресов для отслеживания пользователей.
DNS	Это протокол для поиска IP-адреса для доменного имени.	Когда вы покупаете и настраиваете доменное имя, вы используете DNS.
Пуникод	Это стандарт для международных доменных имен (IDN).	Когда вы вводите URL-адреса в большинство систем, отличных от Composr, вам необходимо убедиться, что вы используете версию с кодировкой Puny (хотя IDN есть лишь у незначительного меньшинства пользователей).
SMTP	Это протокол для отправки электронной почты.	Если вы не использовали ранее веб-почту, то это в прошлом. Вам не нужно никакого особого понимания этого.
MIME	Это стандарт для составления электронных писем.	Вам не нужно ничего знать конкретно о MIME, но базовое понимание того, что электронные письма могут иметь двойную текстовую и HTML-версию, а также содержать как вложения, так и встроенные изображения, полезно.
ДКИМ	Это стандарт для подписи электронных писем.	Вам не нужно знать об этом, если только вы не настраиваете его для работы с электронной почтой, сгенерированной Composr.
SPF	Это протокол для ограничения того, какие серверы могут отправлять электронную почту для определенного домена.	Рекомендуется настроить это, чтобы уменьшить количество спама и мошенничества.
Интернет
HTTP с некоторыми распространенными расширениями	Это протокол для передачи веб-данных.	Вам не нужно много знать, что веб-URL исходят из стандарта HTTP, как и файлы cookie, как и аутентификация HTTP (не используется на многих сайтах, но иногда полезна).
Веб-сервер	Это программное приложение, которое передает данные через HTTP и связано с PHP; Apache и IIS являются примерами приложений веб-сервера, которые может использовать Composr.	Знание конфигурации веб-сервера может быть важным. Например, как настроить Apache через .htaccess файлы.
XHTML5 , HTML5 (и микроформаты)	Это стандарт для веб-страниц. XHTML — это (во всех смыслах и целях) более формальная версия HTML, и мы гарантируем, что Composr написан с учетом этого, чтобы все было ясно и последовательно. Обычно вы слышите, как люди говорят об HTML, а не о XHTML, и практически вы можете считать их одним и тем же.	Знание (X)HTML имеет решающее значение для определения макетов и общего редактирования шаблонов.
CSS	Это стандарт оформления веб-страниц; он связан с (X)HTML.	Знание CSS имеет решающее значение для настройки стилей темы.
PHP	Это язык программирования, на котором написан Composr.	Знание PHP требуется только при изменении основного кода Composr.
JavaScript, он же ECMAScript (необязательно),  DOM и XMLHttpRequest	Это стандарт для создания интерактивных веб-страниц; он связан с (X)HTML.	Вам нужно будет знать JavaScript только в том случае, если вы занимаетесь особенно сложной тематикой.
SVG	Стандарт векторной графики, используемый для построения графиков статистики.	Вам вряд ли нужно какое-то осознание этого.
robots.txt	Стандарт исключения роботов. Версия спецификации Google наиболее точно соответствует тому, что сейчас поддерживают поисковые системы.	Знание этого может быть важно для SEO.
Метатег Robots и HTTP-заголовок X-Robots-Tag	Указание, какие URL-адреса могут быть проиндексированы. Версия спецификации Google наиболее точно соответствует тому, что сейчас поддерживают поисковые системы.	Знание этого может быть важно для SEO.
Доступность и интернационализация
WCAG 1.0 и 2.0 и WAI-ARIA	Стандарты доступности, особенно для слепых пользователей.	Мы поддерживаем самые высокие уровни соответствия (AAA).
Рекомендация правительства Великобритании по ключам доступа и веб- сайтам Besluit Kwaliteit Rijksoverheids и разделу 508	Подробные стандарты доступности для конкретных стран.	Мы поддерживаем эти стандарты.
АТАГ	Стандарты доступности для авторов сайтов.	Мы полностью соответствуем.
Наборы символов ISO и Unicode (UTF-8)	Это альтернативные стандарты поддержки интернационализации; Composr поддерживает оба.	По умолчанию Composr использует UTF-8, что означает, что вам не нужно много знать о наборах символов. Полезно знать, как работает UTF-8 (в частности, как некоторые символы используют более одного байта).
Данные и фиды
XML (включая RSS , Atom , OPML , XSLT , XML Sitemaps и Google News Sitemaps , а также использование в AJAX)	XML — это стандарт для структурирования данных, используемый для многих веб-форматов, поддерживаемых Composr, а также для некоторых настраиваемых частей Composr. RSS, Atom и OPML — это технологии подачи новостей для экспорта новостей Composr. XSLT — это технология, которую мы используем для отображения RSS, Atom и OPML в веб-браузере.	Вам не нужно много знать XML, если только вы не выполняете конкретную расширенную настройку.
Форматы файлов, такие как iCalendar 2.0 , файлы CSV, JPEG, PNG, Zip, Tar, Gzip	Они используются в определенных областях Composr для чтения и записи файлов специальных типов. PNG — это формат файла изображения. PNG используется вместо GIF, поскольку он поддерживает изображения более 256 цветов, «альфа-прозрачность» (смешанная прозрачность, которая не привязана к фоновому цвету) и не обременен патентами на программное обеспечение.	Возможность использовать редакторы изображений и выбирать нужные типы файлов изображений, полезна.   А также иметь возможность импортировать и экспортировать правильно структурированные CSV-файлы (электронные таблицы).
LDAP 3	Это стандарт для общих логинов в компьютерной сети, который может использовать Composr.	Это имеет значение только в том случае, если вы настраиваете корпоративную интрасеть.
WebDav	Сетевая файловая система.	Это можно использовать с репозиторием для доступа к файловой системе Commandr-fs.
JSON	Это популярная альтернатива XML, которая обычно используется для веб-API между серверами или между серверами и веб-браузерами.	Вам не нужно знать JSON.
SQL	Это стандарт для доступа/управления данными внутри баз данных; Composr использует его для связи с базой данных (например SELECT * FROM table WHERE something='somevalue'), которая обычно является приложением базы данных MySQL.	Базовое понимание SQL полезно. Иногда полезно спуститься на уровень базы данных в обход Composr. Например, чтобы сделать массовое изменение текста в системе, вы можете написать несколько запросов для этого.
Открытый поиск 1.0	Это позволяет интегрировать поиск по сайту (с автозаполнением) непосредственно в веб-браузеры.	Вам вряд ли нужно какое-то осознание этого.
Метаданные
Открыть график	Созданный Facebook стандарт метаданных, в котором данные встраиваются в обычные веб-страницы.	Это автоматически включается в шаблоны Composr. Дополнительная документация находится в учебнике службы поддержки Facebook .
schema.org	Исходный стандарт поисковой системы для предоставления дополнительных данных об объектах на веб-страницах.	Это автоматически включается в шаблоны Composr.
Дублинское ядро и Composr Core	Это стандарт добавления метаданных на веб-страницы; он связан с XHTML.	Это автоматически включается в шаблоны Composr.
hКалендарь	Стандарт для встраивания данных календаря в веб-страницы.	Это автоматически включается в шаблоны Composr (календарь).
hCard	Стандарт для встраивания данных контактов в веб-страницы.	Это автоматически включается в шаблоны Composr (профили участников).
hОбзор	Стандарт для встраивания данных отзывов пользователей в веб-страницы.	Это автоматически включается в шаблоны Composr (комментарии/обзоры контента).
rel-nofollow , rel-enclosure , rel-license , rel-tag	Стандарты для описания поведения ссылок.	Это автоматически включается в шаблоны Composr.
XFN	Стандарт для отображения того, как пользователи сайта дружат друг с другом.	Это автоматически включается в шаблоны Composr (ограниченная поддержка) .
oВставить	Предоставьте дополнительную информацию (например, эскизы) для ссылки на страницу сайта.	Composr может автоматически находить данные oEmbed для включенных ссылок.

 

Сам Composr предоставляет следующие протоколы и языки.

Протокол	Описание
Tempcode	Это технология шаблонов Composr (Composr объединяет данные с шаблонами XHTML для создания веб-страниц XHTML).
Comcode	Это простой в использовании язык содержимого Composr (на нем записываются куски текста, и есть дополнительные способы кодирования сложного поведения; он компилируется в более сложный XHTML/CSS/JavaScript с помощью шаблонов).
Dublin Core extensions	Composr расширяет Dublin Core (описано выше).
Ссылки на страницы	Простая технология создания ссылок между страницами, которые компилируются в URL-адреса HTTP; ссылки на страницы являются локальными для веб-сайта (т. е. они могут работать только для создания ссылок внутри сайта) и непротиворечивы независимо от используемой схемы URL-адресов (Composr поддерживает перезапись URL-адресов, из-за чего внешний вид конечных URL-адресов может значительно различаться).
Код фильтра	Для фильтрации результатов с помощью запроса свойств, проще, чем SQL.
Выберите код	Для выбора конкретных результатов с помощью идентификатора, диапазона идентификаторов, категории или положения в дереве.
Языковые пакеты	Перевод сайта на разные/несколько языков

 

URL-адреса

 

Code

protocol://server:port/path?parameter=value&anotherparameter=anothervalue&anotherparameter=anothervalue

 

Строятся они следующим образом:

• Протокол: для веб-страниц всегда используется протокол «http» или «https» (поскольку страница передается по протоколу HTTP(S)).
• Порт: порт почти всегда «80», который является портом по умолчанию. Если порт 80, то он не записывается (т.е. ":80" фактически отсутствует в URL).
• Имя хоста: сервер определяется либо доменным именем, либо IP-адресом.
• Путь: Путь часто относится к файлу на сервере, но не обязательно: это зависит от веб-сервера, как его обрабатывать. Для сайта Composr путь обычно указывает на файл PHP на сервере (который веб-сервер распознает как то, что он должен запустить, и ретранслирует вывод), за исключением того, что схема URL включена, тогда он может пройти через уровень косвенности (например, для посетителя он выглядит так, как будто он ссылается на .htmфайл, но на самом деле невидимо перенаправляется для прохождения по сложному пути, включающему index.php).
• Параметр(ы): может быть любое количество параметров (включая отсутствие). Первый имеет "?" перед ним и последующими ставится «&».

Вот реальный пример:

Code

http://example.com/somepath/deeper/something?one=1&two=2

 

Это деконструируется следующим образом:

• Протокол : это HTTP URL.
• Порт : поскольку порт не указан, это стандартный порт 80.
• Имя хоста example.com: это на машине, на которую указывает доменное имя.
• Путь : Путь есть somepath/deeper/something.
• Параметр(ы) : у нас есть два параметра one - 1 и two 2.

XHTML

Синтаксис

 

Code (HTML)

<tagname attribute1 = "attribute1value" attribute2 = "attribute2value" > tagcontent < / tagname >

 

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

Code (HTML)

<tagname attribute1 = "attribute1value" attribute2 = "attribute2value" / >

 

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

• Не размещайте в теге лишние пробелы (например, между знаком «меньше» и первым символом имени тега).
• Всегда закрывайте бирку закрывающей частью или самозакрывающейся частью.
• Не ставьте более одного пробела между чем-либо.

Code (Text)

имя_атрибута="значение_атрибута"

 

• Заключить значение атрибута в двойные кавычки.
• Не заключайте знаки равенства пробелами (они должны быть рядом с последним символом имени атрибута и открывающей двойной кавычкой для значения атрибута).
• Держите имя атрибута в нижнем регистре.

 

Code (HTML)

<тег1>         <тег2>                 <тег3> Текст < / тег3>                 <тег4 / >         < / тег2>         <тег2> Текст < / тег2> < / тег1>

 

 Ключевой частью этого является тот факт, что во всех документах XHTML есть некоторая необходимая разметка: три корневых тега. Эти теги ( <html>, <head>и <body>) должны присутствовать в определенном месте в каждом XHTML-документе вместе с допустимым определением типа документа и некоторыми обязательными атрибутами, иначе браузеры не смогут определить начало или конец страницы.

Code (HTML)

<!DOCTYPE html> < html >         < head >                 < meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" / >                 < title > Образец страницы < / title >         < / head >         < тело >         < / тело > < / html >

 

 Это примерно самая маленькая допустимая страница. Однако вам не нужно беспокоиться обо всем этом, так как Composr уже имеет базовую структуру XHTML и отлично работает.
 Одна из приятных особенностей XHTML заключается в том, что вы можете размещать лишние пробелы (пробелы и табуляции) между тегами, чтобы облегчить чтение разметки.

Code (HTML)

<тег1>         <тег2 / > < / тег1>

 

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

 До сих пор мы работали только с теоретическими и вымышленными тегами и атрибутами XHTML. Теперь пришло время познакомить вас с некоторыми из наиболее часто используемых тегов. Однако прежде следует отметить, что XHTML не является языком компоновки! Его не следует использовать с целью создания страницы с особым внешним видом! К кодированию XHTML следует подходить с чисто структурным мышлением. То есть XHTML следует использовать для разметки структуры документа (например, заголовков, абзацев, разделов, ссылок, списков и других подобных структурных элементов). Любой, кто использует XHTML с намерением создать страницу, которая выглядит определенным образом, использует его неправильно. Чтобы узнать, как оформить страницу, см. раздел CSS ниже.

Элементы и атрибуты

Теперь некоторые элементы HTML:

Элемент	Описание
<a>	Гиперссылка. Рекомендуемые атрибуты: href (URL для ссылки), title (текст, отображаемый при наведении курсора).
<body>	Родительский тег для основной части документа. Требуется.
<div>	Определяет раздел документа. (См. раздел CSS ниже.)
<em>	Добавляет акцент к тексту, который он окружает.
<fieldset>	Группы образуют элементы вместе логически. (См. <form> тег ниже.)
<form>	Определяет форму для отправки данных. Обязательные атрибуты: action (URL для отправки данных). Рекомендуемые атрибуты: method (как отправлять данные; либо get, либо post)
<h1> к<h6>	Заголовки документов; <h1> является наиболее важным (у вас должен быть один из них в начале вашей страницы с указанием заголовка страницы), <h6> наименее важным.
<head>	Раздел метаданных документа. Содержит информацию о документе, который не отображается, но используется браузером другими способами. Требуется.
<html>	Основной тег в документе XHTML. Требуется.
<img />	Изображение на странице. Обратите внимание, что этот тег не следует использовать для размещения изображений макета; только изображения для конкретных страниц. (См. раздел CSS ниже.) Обязательные атрибуты: src (URL-адрес изображения), alt (альтернативный текст, который будет отображаться, если изображение не может быть отображено). Рекомендуемые атрибуты: title (текст для отображения при наведении курсора).
<input />	Форма ввода для ввода данных. Рекомендуемые атрибуты: value (отображаемое значение – варьируется от типа к типу), type (тип отображаемого ввода:  button, checkbox, file, hidden, image, password, radio, reset, submit, text), name (имя, с которым следует обращаться к вводу на сервере), id ( уникальный идентификатор для обращения к этому элементу (см. разделы CSS и JavaScript ниже)).
<label>	Метка, связанная с элементом формы. Рекомендуемые атрибуты: for (ID элемента формы, связанного с этим <label>).
<legend>	Надпись для <fieldset>.
<li>	Элемент в списке (см. <ul> и <ol>).
<ol>	Упорядоченный (последовательный и нумерованный ) список.
<optgroup>	Группирует <option>в <select> список. Обязательные атрибуты: label (метка для группы опций).
<option>	Вариант в <select> списке. Рекомендуемые атрибуты: value (значение, которое будет отправлено на сервер при отправке формы).
<p>	Параграф. Этот элемент используется очень часто.
<select>	Выпадающий список. Рекомендуемые атрибуты: name (имя, с которым следует обращаться к вводу на сервере), id ( уникальный идентификатор, с которым следует обращаться к этому элементу (см. разделы CSS и JavaScript ниже)).
<span>	Группирует встроенные элементы. (См. раздел CSS ниже.)
<strong>	Обозначает текст как сильный (обычно отображается жирным шрифтом ).
<sub>	Обозначает текст как нижний индекс.
<sup>	Обозначает текст как верхний индекс.
<table>	Стол. Обратите внимание, что это не должно использоваться для разметки страниц! (См. раздел CSS ниже.) Рекомендуемые атрибуты: summary (краткая сводка содержимого таблицы для невизуальных браузеров).
<td>	Ячейка таблицы.
<textarea>	Область ввода многострочного текста. Обязательные атрибуты: cols (сколько отображаемых столбцов символов), rows (сколько отображаемых строк символов). Рекомендуемые атрибуты: name (имя, с которым следует обращаться к вводу на сервере), id ( уникальный идентификатор, с которым следует обращаться к этому элементу (см. разделы CSS и JavaScript ниже)).
<th>	Ячейка заголовка таблицы.
<title>	Название страницы (например, для отображения в строке заголовка браузера). Требуется .
<tr>	Строка таблицы.
<ul>	Неупорядоченный ( ненумерованный – пустой маркированный) список.

 

 Хотя в приведенной выше таблице перечислены не все элементы XHTML (в ней указана примерно половина из них), остальные используются настолько редко, что проще их найти, когда это необходимо, чем изучать их в первую очередь. В этой таблице также не перечислены все атрибуты всех элементов. Однако в нем перечислены самые важные, а в следующей таблице перечислены все атрибуты, которые можно использовать с любым элементом XHTML; стандартные атрибуты.

 

Атрибут	Описание
class	CSS-класс элемента; привыкший к стилю и яркому внешнему виду. (См. раздел CSS ниже.)
id	Уникальный идентификатор элемента (см. разделы CSS и JavaScript ниже) .
style	Встроенные правила стилей — используются для применения стилей без использования отдельного определения CSS. Обратите внимание, что желательно разделить структуру и стиль, поэтому использование этого атрибута не рекомендуется во всех смыслах и целях. (См. раздел CSS ниже.)
title	Текст, отображаемый во всплывающей подсказке при наведении курсора на элемент.

 

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

Типы элементов:

Пример:

Далее следует пример XHTML-документа, использующего все вышеуказанные принципы:

Code (HTML)

<!DOCTYPE html> < html >         < head >                 < title > Пример HTML-документа < / title >                 < meta http-equiv = "Content-Type" content = "application/xhtml+xml; charset=UTF-8" / >                 < метаимя = "ключевые слова" контент = " пример документа, XHTML, элемент, атрибут" / >                 < метаимя = "автор" контент = " ocProducts "/ >                 <meta name = "description" content = "Пример документа XHTML." / >                 < script src = "http://example.com/script.js" / >                 < link href = "http://example.com/style.css" rel = "таблица стилей" media = "all" / >                 < link href = "http://example.com/favicon.jpg" rel = "icon" type = "image/jpg" / >                 < "http://example.com/" rel = "home" title = "Home" / >         < / head >         < body >                 < div id = "top_bar" >                         < h1 >                                 < a href = "http://example .com/" title = "Главная страница example.com" > example.com < / a >                         < / h1 >                 < / div >                 <Идентификатор div = "main_doc">                         < h2 > Пример содержимого < / h2 >                         < p > Это пример содержимого. < / p >                         < ul >                                 < li > Как насчет < / li >                                 < li > пример < / li >                                 < li > неупорядоченный список? < / li >                         < / ul >                         < div id = "bottom_bar"                                 < a href = "http://www.blogrankings.com" >< img src = "http://www.blogrankings.com/images/blogrankings.gif" alt = "BlogRankings" / >< / a >                                 < a href = "http://www.spreadfirefox.com/?q=user/register&r=23557" >< img src = "http://example.com/firefox.png" alt = "Установите Firefox!" / >< / а >                         < / дел >                 <                 div id = "right_doc" >                         < h3 >Статус входа< / h3 >                         < ul >                                 < li >                                         < a href = "http://example.com/login.html" title = "Войти на example.com" >Логин< / a >                                 < / li >                                 < li >                                         < a href = "http://example.com/register.html" title = "Зарегистрируйте аккаунт на example.com" >Регистрация < / a >                                 < / li >                         < / ul >                 < / div >                 < div id = "left_doc" >                         < h3 > Intro < / h3 >                         < p > Это хорошо написанный < abbr title = "Расширяемая гипертекстовая разметка Язык" > XHTML < / abbr > страница. < / р >                         <> Пример абзаца. < / p >                 < / div >         < / body > < / html >

 

CSS

 CSS (каскадные таблицы стилей) — это язык, используемый для стилизации и расположения элементов на веб-странице. Преимущество отделения содержимого и структуры от стиля и макета заключается в том, что если, например, у вас есть отдельный файл CSS (то есть CSS не встроен в XHTML), вы можете легко применить стандартный стиль ко всему веб-сайту, не дублируя его. CSS снова и снова (что неизбежно приведет к упущениям, ошибкам и проблемам с обслуживанием).

CSS — это простой язык, состоящий из правил , содержащих различные свойства ; индивидуальные параметры для стилизации элемента.

Основной формат правила следующий.

Code (CSS)

selector {         property: property-value; }

 

 Селектор определяет, к каким элементам/классам/идентификаторам XHTML применяются свойства в правиле, свойство — это предопределенное имя свойства, а значение свойства — это значение, присвоенное свойству (допустимые значения варьируются от свойства к свойству). Обратите внимание на пробелы, двоеточия и точку с запятой в конце строки свойства.

Существует несколько типов селекторов, определенных стандартом CSS 1, которые мы рассмотрим здесь. Есть также несколько новых селекторов, определенных как в CSS 2, так и в CSS 3, но они выходят за рамки этого руководства.

Самый простой селектор — это селектор типа , и он выбирает все теги XHTML в разметке указанного имени.

Code (CSS)

p {         property: property-value; } div {         property: property-value;         property: property-value; }

 

 Приведенный выше CSS применит указанные свойства к любому <p>или <div> элементу на странице.
Другим базовым селектором является селектор класса, который выбирает все теги XHTML с указанным значением атрибута класса.

Code(CSS)

.warning {         property: property-value; } span.timestamp {         property: property-value; }

 

 В этом примере указанные свойства применяются к любому тегу класса warning, или к любому <span> тегу класса timestamp. Обратите внимание, что вы можете комбинировать селекторы типа и класса вместе (как во втором правиле в приведенном выше примере), чтобы создать селектор класса, который применяет свойства только к тегам с указанным классом, которые также имеют указанное имя тега.
Возможно, здесь потребуется небольшое объяснение атрибута класса XHTML. 

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

Code(HTML)

<div>         <span class="timestamp red">Warning received yesterday.</span>         <p class="warning">I know you know that I've been messing with knowledge. However, I'd like you to forget that I know what you know, and that you don't know what I know. I know more about what you know that you could possibly ever know about my knowledge. My knowledge about your knowledge of what I know regarding now is secret, and I know that you know about the now and then of knowledge, new life, and gibberish.</p> </div>

 

 В этом примере к <span> тегу прикреплены два класса CSS. Однако следует отметить, что при именовании классов CSS вы должны называть их по их функции, а не по внешнему виду. Это необходимо для сопровождения: если вы назовете класс red, а затем измените цвет на синий, вам придется переименовать его и изменить все ссылки на него или оставить его в беспорядке. 
 Селекторы ID — это еще один базовый тип селекторов, которые применяют свойства к элементам на основе их атрибута ID (дополнительную информацию об атрибуте ID см. в разделе JavaScript ниже).

 Обратите внимание, что это правило должно (теоретически) применяться только к одному тегу на всей странице (если вообще применяется), поскольку атрибут ID любого тега должен быть уникальным. Из-за этого селектор ID используется не так часто, как другие селекторы, и когда он используется, он обычно используется для основных правил макета страницы, таких как позиционирование заголовка, основной части и меню. Также обратите внимание, что селекторы ID могут быть связаны с селекторами типа, как с селектором класса.

 Последний базовый селектор — это селектор потомков, который применяет свойства к определенным тегам, но только если они являются потомками другого указанного тега (или тегов). Обратите внимание, что он применяет свойства к последнему тегу в последовательности (то есть к самому правому тегу в селекторе).

 В этом примере указанные свойства применяются к любому <a> тегу, находящемуся под заголовком третьего уровня ( <h3>).

 Теперь, когда основные селекторы рассмотрены, мы переходим к свойствам и значениям свойств. Свойство может принимать только одно из списка предопределенных значений. Некоторые значения являются переменными (например, ширина и другие числовые значения), но большинство из них являются просто текстом.

Некоторые часто используемые свойства перечислены ниже.

 

Свойство	Описание
background	Цвет фона и изображения.
border	Граница; линия (указанной ширины), граничащая (в рамке) с указанным элементом.
display	Используется для изменения режима отображения указанного элемента (т. е. изменения его с блочного на встроенный элемент).
position	Способ размещения элемента.
height	Высота.
width	Ширина.
font	Параметры и конфигурация шрифта.
list-style	Как составить и нарисовать список.
margin	Параметры полей: пространство вокруг элемента снаружи, отделяющее его от других элементов (представьте, что это «рв» для элемента).
padding	Варианты отступов: пространство внутри элемента (между границей и содержимым — думайте об этом как о полости в стене полости).
bottom	Пространство под элементом и над границей родительского элемента.
left	Пространство слева от элемента и справа от границы родительского элемента.
right	Пространство справа от элемента и слева от границы родительского элемента.
top	Пространство над элементом и под границей родительского элемента.
color	Цвет текста.
text-align	Горизонтальное выравнивание текста.
text-decoration	Украшение, применяемое к тексту, например подчеркивание.
text-indent	Отступ применяется к первой строке текста.

 

 Обратите внимание, что большинство этих свойств можно разделить на отдельные свойства (т.е. margin можно разделить на margin-left, margin-right, margin-topи margin-bottom).

 Все эти свойства бесполезны без значений свойств. Хотя большинство элементов принимают значения только из предопределенного списка свойств, некоторые элементы принимают более общие значения, такие как измерения в пикселях или процентах.

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

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

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

 Последняя часть мозаики CSS — наследование или каскад. Это одна из основных особенностей CSS, придающая ему мощь и гибкость. Основной принцип заключается в том, что свойства, примененные к одному тегу, автоматически применяются ко всем тегам - потомкам этого тега (за некоторыми исключениями). Так, например, если бы у вас было правило, которое применяло красный цвет текста к элементу, потомки этого элемента также имели бы красный текст, если только к ним не применялись правила, переопределяющие это.

 Каскад на самом деле является разновидностью наследования в более широком масштабе. В частности, это наследование правил в иерархии таблиц стилей. Хотя это применимо только для очень больших сайтов, важно знать следующее: таблица стилей может импортировать другую таблицу стилей с помощью так называемого правила @import. Каскад — это когда правила и свойства из первой таблицы стилей каскадируются во вторую таблицу стилей и применяются к элементам, если они не отменены.

JavaScript (продвинутый)

JavaScript — это последняя часть головоломки веб-разработки. Он обеспечивает динамическую, управляемую событиями,
интерактивную функциональность и является основным компонентом новых технологий, таких как Ajax.

 Было бы бессмысленно вдаваться в подробное объяснение JavaScript и того, как на нем писать сценарии, поскольку весь JavaScript, который может когда-либо понадобиться разработчику, уже доступен в Интернете.
 Однако полезно иметь возможность примерно понимать, что делает тот или иной JavaScript, и лежащие в его основе концепции.

 JavaScript — это язык сценариев на стороне клиента; веб-сервер отправляет необработанный JavaScript в браузер клиента, который проходит через него, выполняя указанные операции. Это очень быстро и может манипулировать веб-страницей в микроскопических деталях.

JavaScript обычно состоит из функции s, которые содержат строки кода.

 Функции должны начинаться с ключевого слова function, затем имя функции и аргументы, которые необходимо передать функции в скобках. За этим должны следовать строки кода в функции, заключенные в фигурные скобки.

 Сами строки кода должны следовать строгим правилам (которые выходят за рамки этого документа) и должны заканчиваться точкой с запятой.

 JavaScript наиболее эффективен при применении к DOM — объектной модели документа, которая представляет собой способ доступа к свойствам и атрибутам каждого узла в дереве документа страницы XHTML (или XML и т. д.). Вам не нужно знать, как использовать DOM в JavaScript, вам просто нужно знать, что DOM широко ссылается на идентификаторы XHTML-элементов, указанные их тегом ID.

 Еще одна особенность JavaScript — его событийная модель. Вы можете указать функции или код JavaScript, которые будут вызываться, например, при нажатии на ссылку. Вы делаете это либо с помощью атрибутов события в документе XHTML, либо с помощью функций прослушивания событий в JavaScript.

 

Атрибут события	Описание
onload	Вызывается при загрузке документа. Можно только поставить в <body> или <frameset> теги.
onchange	Вызывается при изменении ввода. Может быть помещен только в один из тегов формы ( <input>, <select>, и т.д.).
onsubmit	Вызывается при отправке формы. Можно только поставить в <form> тег.
onkeypress	Вызывается, когда клавиша нажата (и отпущена) и элемент имеет фокус. Может быть помещен в любой тег, за несколькими логическими исключениями.
onclick	Вызывается при щелчке элемента. Может быть помещен в любой тег, за несколькими логическими исключениями.

Чтобы использовать эти атрибуты события, просто поместите их в тег.
 

Code(HTML)

<a href="http://example.com/" title="Example website" onclick="log_click('http://example.com/'); ">example.com</a>

 

Вы также можете поместить в атрибуты события больше, чем просто вызов функции.

Code(HTML)

<a href="http://example.com/" title="Example website" onclick="window.alert('You clicked the link!'); log_click('http://example.com/'); ">example.com</a>

 

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

 В заключение следует также подчеркнуть, что JavaScript небезопасен ; если вы напишите систему входа в систему на JavaScript, которая сравнивает введенный пароль с паролем, закодированным в JavaScript, любой может просто просмотреть исходный код JavaScript с помощью своего браузера, просмотреть его и с легкостью извлечь пароль. Это касается и других подобных ситуаций, таких как викторины; ответы, пароли или любую другую важную информацию, которую следует держать в секрете. Он должен храниться, обрабатываться и обрабатываться исключительно на сервере!

Онлайн-инструменты и ссылки

Общие ссылки на веб-платформу:

• http://веб-платформа.org
• http://w3.org
• http://caniuse.com/
• https://developer.micr…oft-edge/platform/status/
• http://webdesign.about.com/
• https://www.udemy.com/…eb-разработчик с нуля
• https://teamtreehouse.com/

Инструменты/справочники XHTML:

• http://www.yourhtmlsource.com/
• http://www.html.net/
• http://www.tizag.com/
• http://www.davesite.com/webstation/html/
• http://www.w3schools.com/html/default.asp
• http://jarmin.com/accessibility/index.html
• http://en.wikiversity.org/wiki/Веб-дизайн

CSS-инструменты/справочники:

• http://net.tutsplus.co… простые для понимания шаги/
• http://www.yourhtmlsource.com/
• http://www.html.net/
• http://www.tizag.com/
• http://www.w3schools.com/css/default.asp
• http://www.blooberry.c…dot/css/propindex/all.htm
• http://www.westciv.com…e_master/house/index.html
• http://www.alistapart.com/
• http://enjoycss.com/start/
• http://www.skybound.ca/
• http://www.layerstyles.org/builder.html
• http://foundation.zurb.com/
• http://getbootstrap.com/
• http://engineering.app…2/11/16/css-архитектура/

Инструменты/справочники JavaScript:

• http://www.tizag.com/
• http://javascriptkit.com/
• https://developer.mozi…en-US/docs/Web/JavaScript
• http://www.devguru.com…gies/javascript/home.html
• http://www.w3schools.com/js/default.asp
• https://developer.mozi…API/Document_Object_Model
• https://jquery.com/

Несколько крутых эффектов:

• http://www.smashingmag…ul-javascript-методы/
• http://www.turnjs.com/
• http://www.chartjs.org/
• http://git.aaronlumsden.com/progression/
• http://inorganik.github.io/countUp.js/
• http://www.zachleat.co…b/bigtext-makes-text-big/
• http://freqdec.github.io/slabText/
• http://tympanus.net/Tutorials/3DHoverEffects/
• http://isotope.metafizzy.co/

Разное:

• http://uitest.com/
• https://dev.twitter.com/cards/getting-started (вы можете реализовать это самостоятельно, если используете Twitter)

Концепции:

XML

Расширяемый язык разметки: формат для структурирования других языков, который хорошо вписывается в древовидную структуру.

HTML

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

XHTML

Расширяемый язык гипертекстовой разметки: HTML, адаптированный к правилам XML.

CSS

Каскадные таблицы стилей: технология, которая позволяет указывать стиль в конфигурационном файле, таком как мода, и сопоставлять со структурой XHTML.

JavaScript

Стандартный клиентский язык сценариев для Интернета, позволяющий веб-страницам быть динамическими без перезагрузки страниц. В стандартизации он известен как ECMA-Script, но этот термин используется редко.

Ярлык

Часть структуры: XML-дерево состоит из тегов.

Элемент

Другое имя для тега на самом деле.

(Тег) Атрибут

Теги могут содержать атрибуты, определяющие свойства тега.

Встроенный (тег)

Тег, который окружает часть HTML, чтобы применить к нему что-то или использовать его.

Блокировать (тег)

Тег, который занимает ограниченную область экрана и может иметь собственный фон. Блочные теги вызывают визуальный разрыв строки после них, если только они не оформлены как встроенные.

(Тег) Класс

Класс тегов обычно используется для присоединения тегов XHTML к стилям CSS.

(XML) идентификатор

Идентификатор обычно используется, чтобы позволить коду JavaScript ссылаться на определенные теги XHTML.

(JavaScript) событие

JavaScript подключается к действиям веб-браузера через модель событий; помечает события 'fire', а JavaScript можно настроить для запуска определенного кода при срабатывании события.

(CSS) селектор

Правила CSS применяются к определенным тегам, а селекторы используются для определения тегов; селекторы очень мощные

(CSS) свойство

Правила CSS определяют значения свойств для стиля

ДОМ

Объектная модель документа. Схема ссылки на документ, основанная на структуре XHRML. Обычно используется с JavaScript.

DHTML

Динамический HTML. Почти синоним JavaScript

Сторона клиента

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

Смотрите также:

• Тематика вашего сайта
• Дизайнерские темы, реализующие дизайн чистой комнаты
• Программирование временного кода
• Помощь в улучшении доступности сайта для пользователей с ограниченными возможностями
• Требования к версии браузера
• Как на самом деле работает интернет
• Составление структуры сайта
• Использование инструментов разработки Chrome для создания тем