Структура документов HTML и CSS

Структура HTML .

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

Теги можно разделить на граничные и унарные. Унарные теги представляют собой определенные операции, предписывающие браузеру совершить определенное действие по достижению данного тега при обработке html - документа. Например, тег <br /> осуществляет перевод на новую строку.

Граничные теги определяют, как будет выглядеть на экране пользователя часть текста, заключенная внутрь этого элемента. Например, тег <p></p> определяет вид абзаца текста.

Элементы могут содержать атрибуты, определяющие те или иные их свойства (например, размер шрифта для тега <font>). Атрибуты указываются в открывающем теге.

В HTML не имеет значения регистр, в котором набраны имена тегов и их атрибутов (в отличие от XHTML). Элементы могут быть вложенными.

Кроме элементов, в HTML-документах есть и сущности (англ. Entities - специальные символы). Сущности имеют следующий вид: "&имя; " или "&#NNNN;", где "NNNN" - код символа в Юникоде в десятеричной системе счисления (например, &nbsp - символ неразрывного пробела).документ, отвечающий спецификации HTML какой-либо версии, должен начинаться со строки объявления версии HTML <! DOCTYPE…>, которая обычно выглядит примерно так:

<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict. dtd">

Указание этой строки помогает добиться корректного отображения документа в браузере.

Теги <html></html>, внутри которых находится вся основная информация HTML-документа. Информация вне этих тегов будет игнорироваться, либо некорректно интерпретироваться.

Внутри этих тегов документ подразделяется на две части:

· заголовок, ограниченный тегами <head></head>; как правило, содержит дополнительные данные о странице, такие как META-теги, заголовок страницы внутри тегов <title></title>, внутренние таблицы стилей внутри тегов <style></style>, скрипты внутри тегов <script></script>;

· тело документа, заключенное внутрь тегов <body></body>, содержит всю несущую страницей информацию, выводимую в главном окне браузера.

Области <head> и <body> не пересекаются. Любая информация вне данных тегов, но внутри <html>-области игнорируется, если не несет с собой управляющий характер (например, является java-скриптом).

Структура CSS .

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

Схематически это можно показать так:

Cелектор, селектор {свойство1: значение; свойство2: значение; свойство3: значение;. }

Тег {свойство1: значение; свойство2: значение;. }

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

Имя класса {свойство1: значение; свойство2: значение;. }

Тег class = ”Имя класса”

Классы применяют, когда необходимо определить стиль для индивидуального элемента веб-страницы или задать разные стили для одного тега.

#Имя идентификатора {свойство 1: значение; свойство2: значение;. }

Тег id = ”идентификатор”

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

Языки сценариев и программирования

Для реализации интерактивных функций на сайте необходимо использовать, так называемые, технологии web-программирования. Технологии web-программирования можно разделить на две базисные группы: работающие на стороне клиента и работающие на стороне сервера. Технологии на стороне клиента запускаются на компьютере пользователя сайта в контексте браузера. Программы, которые запускаются на веб-сервере, относятся к технологиям программирования на стороне сервера.

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

В наше время наиболее часто используют программирование на стороне сервера, реализуемое с помощью языка PHP. Для написания программ на стороне клиента, обычно применяют язык JavaScript.

PHP (англ. Hypertext Preprocessor, Personal Home Page Tools (устар.), препроцессор гипертекста) - скриптовый язык программирования общего назначения, интенсивно применяемый для разработки веб-приложений.

PHP - это мощный кроссплатформенный набор средств, который располагается на сервере и предназначается для обработки кода, встраиваемого в html-документы. В настоящее время поддерживается подавляющим большинством хостинг-провайдеров.представляет собой язык с открытым исходным кодом для выполнения на сервере сценариев, создающих динамические web-страницы. Помимо независимости от браузеров, он предлагает простое и независимое от платформы решение для электронной коммерции и сложных web-приложений, в том числе управляемых базами данных.

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

Структура PHP .

Интерпретатор состоит из ядра и подключаемых модулей-"расширений", представляющих собой динамические библиотеки. Расширения позволяют дополнить базовые возможности языка, предоставляя возможности для работы с базами данных, сокетами, динамической графикой, криптографическими библиотеками, документами формата PDF, а также разработать и подключить свое собственное расширение может любой желающий.

Синтаксис PHP .

Для работы программы не требуется описывать какие-либо переменные и используемые модули. Любая программа может начинаться непосредственно с оператора PHP.исполняет код, находящийся внутри ограничителей, таких как <? php? >. В основном, это используется для вставки PHP-кода в HTML-документ. Помимо ограничителей <? php? >, допускается использование дополнительных вариантов, таких как <?? > и <script language="php"> </script>. Всё, что находится вне ограничителей, выводится без изменений.

Имена переменных начинаются с символа $, тип переменной объявлять не нужно. Имена переменных, функций и классов чувствительны к регистру. Константы также чувствительны к регистру.рассматривает переход на новую строку как пробел, так же как HTML и другие языки со свободным форматом. Инструкции разделяются с помощью точки с запятой (;), за исключением некоторых случаев, после объявления конструкции if/else и циклов.

JavaScript - скриптовый язык программирования.

Наиболее широкое применение находит в браузерах в качестве языка сценариев для придания интерактивности .

Текст программы встраивается непосредственно в HTML-документ и интерпретируется самим браузером.

С появлением языка JavaScript у создателей сайтов появляется множество возможностей "оживить" странички (например, бегущая строка, изменяемые рисунки, шлейф за указателем мыши, падающий снег), добавить элемент взаимодействия с пользователем и упростить реализацию некоторых задач, стоящих перед разработчиком. обеспечивает возможность обработки отдельных обращений пользователя к гиперсвязям, распознавания момента перехода на другую страницу и выполнения соответствующих действий при наступлении этого события. Кроме этого, он автоматизирует такие задачи регулярного характера, как проверка достоверности данных, обработка форм, выполнение действий над строковыми и числовыми значениями, т.е. тех задач, которые нельзя решить с помощью языка HTML.

Интерактивные возможности делают просмотр электронных документов гораздо более удобным и позволяют установить свой индивидуальный режим просмотра сайта. Пользователь имеет возможность влиять на некоторые составляющие сайта и, в каком-то смысле, настраивать ресурс под себя.

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

Структура JavaScript.

Структурно JavaScript можно представить в виде объединения трех четко различимых друг от друга частей:

· ядро (англ. ECMAScript), которое описывает типы данных, инструкции, ключевые и зарезервированные слова, операторы, объекты, регулярные выражения;

· объектная модель браузера (англ. Browser Object Model) - специфичная для каждого браузера часть языка, отвечающая за взаимодействие ядра и объектной модели документа. Основное предназначение - управление окнами веб-браузера и обеспечение их взаимодействия, управление фреймами, системные диалоги, управление адресом открытой страницы, управление информацией о браузере, управление информацией о параметрах монитора, ограниченное управление историей просмотра страниц, поддержка работы с HTTP-cookie;

· объектная модель документа (англ. Document Object, DOM) - не зависящий от платформы и языка программный интерфейс, позволяющий программам и скриптам получить доступ к содержимому HTML, XHTML и XML -документов, а также изменять содержимое, структуру и оформление таких документов.

Встраивание программного кода в веб-страницу:

· расположение внутри страницы.

Для добавления JavaScript-кода на страницу используются теги:

· расположение внутри тега.

Спецификация HTML описывает набор атрибутов, используемых для задания обработчиков событий, например:

<a href = "delete. php" onclick = "return confirm ('Вы уверены? '); ">Удалить</a>

В данном случае нажатие на ссылку функция "confirm" вызывает модальное окно с надписью "Вы уверены". Разумеется, этот код будет работать, только если в браузере есть и включена поддержка JavaScript, иначе переход по ссылке произойдёт без предупреждения;

· вынесение в отдельный файл.

Подключение отдельного файла скрипта с помощью конструкции:

Web-сервер

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

Одним из самых популярных серверов Интернет является Apache. Его популярность обусловлена, прежде всего, тем, что он является бесплатным и достаточно быстрым. Основными достоинствами Apache считаются надёжность и гибкость конфигурации. Он позволяет подключать внешние модули для предоставления данных, модифицировать сообщения об ошибках.

Несмотря на то, что первоначально данный сервер разрабатывался для операционных систем UNIX, сейчас он адаптирован под операционную систему Windows. Web-сервер Apache - своего рода стандарт сервера в сети Интернет.

Дата добавления: 2019-01-14; просмотров: 212; Мы поможем в написании вашей работы!

Поделиться с друзьями:

⇐ Предыдущая 1 2 3 4 567 Следующая ⇒

Мы поможем в написании ваших работ!