Набор правил css:
Вся структура называется набором правил (но зачастую для краткости "правило" ). Отметим также имена отдельных частей:
Селектор (Selector)
Имя HTML элемента в начале набора правил. Он выбирает элемент(ы) для применения стиля (в данном случае, элементы p ). Для стилизации другого элемента, просто измените селектор.
Объявление (Declaration)
Единственное правило, например color: red; указывает, какие из свойств элемента вы хотите стилизовать.
Свойства (Properties)
Способы, которыми вы можете стилизовать определенный HTML элемент (в данном случае, color является свойством для элементов <p>). В CSS вы выбираете, какие свойства вы хотите затронуть в вашем правиле.
Значение свойства (Property value)
Справа от свойства, после двоеточия, у нас есть значение свойства, который выбирает одно из множества возможных значений для данного свойства (существует множество значений color, помимо red).
Важные части синтаксиса:
Каждый набор правил (кроме селектора) должен быть обернут в фигурные скобки ({}).
В каждом объявлении необходимо использовать двоеточие (:), чтобы отделить свойство от его значений.
В каждом наборе правил вы должны использовать точку с запятой (;), чтобы отделить каждое объявление от следующего.
Таким образом, чтобы изменить несколько значений свойств сразу, вам просто нужно написать их, разделяя точкой с запятой, например так:
p {
color: red;
width: 500px;
border: 1px solid black;
}
Способы подключения css к документу
Правила CSS пишутся на формальном языке CSS. Правила могут располагаться как в самом веб-документе, внешний вид которого они описывают, так и во внешних файлах, имеющих формат CSS. Формат CSS -- это текстовый файл, в котором содержится перечень правил CSS и комментариев к ним.
Стили CSS могут быть подключены или внедрены в описываемый ими веб-документ четырьмя способами:
когда описание стилей находится в отдельном файле, оно может быть подключено к документу посредством элемента <link>, включённого в элемент <head>:
<!DOCTYPE html>
<html>
<head>
.....
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
.....
</body>
</html>
когда файл стилей размещается отдельно от родительского документа, он может быть подключён к документу инструкцией @import в элементе<style>:
<!DOCTYPE html>
<html>
<head>
.....
<style media="all">
@import url(style.css);
</style>
</head>
</html>
когда стили описаны внутри документа, они могут быть включены в элемент <style>, который, включается в элемент <head>:
<!DOCTYPE html>
<html>
<head>
.....
<style>
body {
color: red;
}
</style>
</head>
<body>
.....
</body>
</html>
когда стили описаны в теле документа, они могут располагаться в атрибутах отдельного элемента
<!DOCTYPE>
<html>
<head>
.....
</head>
<body>
<p style="font-size: 20px; color: green; font-family: arial, helvetica, sans-serif">
.....
</p>
</body>
</html>
В первых двух случаях к документу применены внешние стили, а во вторых -- внутренние стили.
Для добавления CSS к XML-документу последний должен содержать специальную ссылку на файл стилей:
<?xml-stylesheet type="text/css" href="style.css"?>
ГЛАВА 2. JAVASCRIPT(JS)
Программы на этом языке называются скриптами. Они могут встраиваться в HTML и выполняться автоматически при загрузке веб-страницы.
Скрипты распространяются и выполняются, как простой текст. Им не нужна специальная подготовка или компиляция для запуска.
Это отличает JavaScript от другого языка - Java.
Современный JavaScript - это «безопасный» язык программирования. Он не предоставляет низкоуровневый доступ к памяти или процессору, потому что изначально был создан для браузеров, не требующих этого. Возможности JavaScript сильно зависят от окружения, в котором он работает. Например, Node.JS поддерживает функции чтения/записи произвольных файлов, выполнения сетевых запросов и т.д. В браузере для JavaScript доступно всё, что связано с манипулированием веб-страницами, взаимодействием с пользователем и веб-сервером.
Например, в браузере JavaScript может:
Добавлять новый HTML-код на страницу, изменять существующее содержимое, модифицировать стили.
Реагировать на действия пользователя, щелчки мыши, перемещения указателя, нажатия клавиш.
Отправлять сетевые запросы на удалённые сервера, скачивать и загружать файлы (технологии AJAX и COMET).
Получать и устанавливать куки, задавать вопросы посетителю, показывать сообщения.
Запоминать данные на стороне клиента («local storage»).
Структура кода
Инструкции - это синтаксические конструкции и команды, которые выполняют действия.
В нашем коде может быть столько инструкций, сколько мы захотим. Инструкции могут отделяться точкой с запятой. Например, здесь мы разделили сообщение «Привет Мир» на два вызова alert:
alert('Привет'); alert('Мир');
Обычно каждую инструкцию пишут на новой строке, чтобы код было легче читать:
alert('Привет');
alert('Мир');
Точка с запятой:
В большинстве случаев точку с запятой можно не ставить, если есть переход на новую строку.
Так тоже будет работать:
alert('Привет')
alert('Мир')
В этом случае JavaScript интерпретирует перенос строки как «неявную» точку с запятой. Это называется автоматическая вставка точки с запятой.
В большинстве случаев новая строка подразумевает точку с запятой. Но «в большинстве случаев» не значит «всегда»!
В некоторых ситуациях новая строка всё же не означает точку с запятой. Например:
alert(3 +
1
+ 2);
Код выведет 6, потому что JavaScript не вставляет здесь точку с запятой. Интуитивно очевидно, что, если строка заканчивается знаком "+", значит, это «незавершённое выражение», поэтому точка с запятой не требуется. И в этом случае всё работает, как задумано.
Но есть ситуации, где JavaScript «забывает» вставить точку с запятой там, где она нужна.
Мы рекомендуем ставить точку с запятой между инструкциями, даже если они отделены переносами строк. Это правило широко используется в сообществе разработчиков. Стоит отметить ещё раз - в большинстве случаев можно не ставить точку с запятой. Но безопаснее, особенно для новичка, ставить её.
Встраивание в веб страницы
Для добавления JavaScript-кода на страницу можно использовать теги <script></script>[Спецификация 6], которые рекомендуется, но не обязательно, помещать внутри контейнера <head>. Контейнеров <script> в одном документе может быть сколько угодно. Атрибут «type='text/javascript'» указывать необязательно, данное значение используется по умолчанию[52].
Скрипт, выводящий модальное окно с классической надписью «Hello, World!» внутри браузера:
<script type="application/javascript">
alert('Hello, World!');
</script>
Спецификация HTML описывает набор атрибутов, используемых для задания обработчиков событий[Спецификация 7]. Пример использования:
<a href="delete.php" onclick="return confirm('Вы уверены?'); return false;">
Удалить
</a>
В приведённом примере при нажатии на ссылку функция confirm('Вы уверены?'); вызывает модальное окно с надписью «Вы уверены?», а return false; блокирует переход по ссылке. Разумеется, этот код будет работать только если в браузере есть и включена поддержка JavaScript, иначе переход по ссылке произойдёт без предупреждения.
Использование кода JavaScript в контексте разметки страницы расценивается в рамках ненавязчивого JavaScript как плохая практика. Аналогом (при условии снабжения ссылки идентификатором alertLink)
<a href="delete.php" id="alertLink">
Удалить
</a>
приведённого примера может являться, например, следующий фрагмент JavaScript:
window.onload = function() {
var linkWithAlert = document.getElementById("alertLink");
linkWithAlert.onclick = function() {
return confirm('Вы уверены?');
};
};
Есть и третья возможность подключения JavaScript -- написать скрипт в отдельном файле, а потом подключить его с помощью конструкции
<head>
<script type="application/javascript" src="http://Путь_к_файлу_со_скриптом">
</script>
</head>
Элемент script, широко используемый для подключения к странице JavaScript, имеет несколько атрибутов.
необязательный атрибут type для указания MIME-типа содержимого.
В запросе комментариев RFC-4329, определяющем[53] MIME-тип, соответствующий JavaScript, указано:
Медиатипы
application/javascript,
application/ecmascript,
которые также определяются в этом документе, предназначены для практического использования, им следует отдавать предпочтение.
необязательный атрибут src, принимающий в качестве значения адрес к файлу со скриптом.
необязательный атрибут charset, используемый вместе с src для указания используемой кодировки внешнего файла.
необязательный атрибут defer указывает, что получение скрипта происходит асинхронно, но выполнение следует отложить до тех пор, пока страница не будет загружена целиком.
необязательный атрибут async указывает, что получение скрипта происходит асинхронно, а выполнение будет произведено сразу по завершении скачивания. Очерёдность выполнения скриптов не гарантируется.
При этом атрибут language (language="JavaScript"), несмотря на его активное использование , относится к не рекомендуемым (deprecated), отсутствует в DTD, поэтому считается некорректным.
ГЛАВА 3. PHP
PHP: переменные, операторы языка, типы данных. Что такое «переменное»? Можно сказать, что это небольшой сейф, который хранит в себе информацию - текст, число, массив или значение другой переменной. Имя переменной в php должно состоять из букв латинского алфавита, имя переменной также может содержать цифры и символы подчеркивания, но имя переменной не должно начинаться с цифр, то - есть переменная может содержать цифры, но не может начинаться с цифр. Это необходимо запомнить и знать.
Переменные в PHP всегда начинаются со знака доллара:
- $name;
- $adonis_alibaev;
- $maradona12.
Переменные $myname и $Myname это разные переменные, то есть учитывается регистр.
Для того чтобы присвоить переменной определенное значение нам нужно использовать оператор присваивания. Оператор присваивания в переменной это знак равенства =, знак равенства в php обозначает присваивание, а не равенства, запомните это навсегда.
Пример:
- $name = «Иванов»;
- $age = 1986.
В языке PHP, как и в других языках программирования, есть операторы. Они выполняют специальные операции в коде PHP. Например, при использовании знака равенства ( = ), чтобы присвоить значение переменной, используется оператор присваивания.
Оператор в языке РНР, как и в любом другом языке программирования, определяет, какие действия необходимо выполнить.
Операторы вывода:
Чтобы вывести что - то на экран мы должны воспользоваться оператором вывода echo.
Давайте рассмотрим конкретный пример, выведем на экран значений переменных.
<?php
$name = "Сергей";
$age = 1986;
echo $name;
echo "<br>";
echo $age;
echo "<br>";
echo "Меня зовут $name, я родился в $age году.";
?>
После выполнения данного скрипта, в браузере мы увидим следующий результат.
PHP поддерживает восемь простых типов данных.
Четыре скалярных типа:
boolean (логический);
integer (целый);
float (с плавающей точкой);
string (строковый).
Два смешанных типа:
array (массив);
object (объект).
И два специальных типа:
resource (ресурс);
NULL.
В PHP не принято явное объявление типов переменных. Предпочтительнее, чтобы это делал сам интерпретатор во время выполнения программы в зависимости от контекста, в котором используется переменная. Рассмотрим по порядку все перечисленные типы данных.
Циклы. В PHP существует несколько конструкций, позволяющих выполнять повторяющиеся действия в зависимости от условия. Это циклы while, do..while. While - простой цикл. Он предписывает PHP выполнять команды блока выполнения до тех пор, пока выражение вычисляется как True (здесь, как и в if, происходит приведение выражения к логическому типу). Значение выражения проверяется каждый раз в начале цикла, так что, даже если его значение изменилось в процессе выполнения блока_выполнения, цикл не будет остановлен до конца итерации (т.е. пока все команды блока_выполнения не будут исполнены).
<?
//эта программа напечатает все четные цифры
$i = 1;
while ($i < 10) {
if ($i % 2 == 0) print $i;
// печатаем цифру, если она четная
$i++;
// и увеличиваем $i на единицу
}
?>
«do...while»
Циклы do…while очень похожи на циклы while, с той лишь разницей, что истинность выражения проверяется в конце цикла, а не в начале. Благодаря этому блок выполнения цикла do...while гарантированно выполняется хотя бы один раз.
Структура:
do {блок_выполнения} while (выражение);
<?
// эта программа напечатает число 12, несмотря на то
// что условие цикла не выполнено
$i = 12;
do{
if ($i % 2 == 0) print $i;
// если число четное, то печатаем его
$i++;
// увеличиваем число на единицу
}while ($i<10)
?>
ГЛАВА 4. СОЗДАНИЕ ИНТЕРАКТИВНОГО САЙТА
Для начала создадим все необходимые файлы, которые будут использоваться в нашем проекте: