WEB - технологии Вводная лекция
Основные понятия WEB - документ Гиперссылка (релевантный документ) Гипертекст WEB - документы Гиперссылки WEB – узел, WEB - сайты Гиперссылки World Wide Web Всемирная паутина
Основные понятия Язык разметки (Markup Language) HTML – язык разметки гипертекста XHTML – расширяемый язык разметки гипертекста XML – расширяемый язык разметки - для разметки WEB - как средство структуризации - документов информации для обмена между компьютерными программами
Основные понятия Специальные символы метки, дескрипторы, теги (контейнерные и неконтейнерный), атрибуты Специальные символы Правила употребления Язык разметки (Markup Language)
Фрагмент кода на языке разметки <body> <div> <p> WEB-технологии </p> <p> Лекция 1 </p> </div> </body>
Назначение тегов Теги могут - определять структуру и/или документа <p> <i> - определять внешний вид документа и его элементов в окне браузера <h 1>
Атрибуты тегов Атрибуты определяют свойства элемента, определяемого тегом <имя_тега имя_атрибута=“значение”> содержимое тега </имя_тега> <body text=“#ff 0000” bgcolor=“#00 ffee”> содержимое тега </body>
Разработка стандартов Новые теги и атрибуты, различные варианты HTML, различное отображение в браузерах Международная организация World Wide Web Consortium (W 3 C, Консорциум Всемирной паутины): крупнейшие производители ПО для работы в Интернет www. w 3. org ü выпускается проект или черновик спецификации (draft); ü после обсуждения получают рабочий вариант; ü рассматривается, обсуждается и становится рекомендацией официальным вариантом спецификации. Декабрь 1997 г. – HTML 4. 0 Декабрь 1999 г. – HTML 4. 01
Дальнейшее развитие Необходимы - дополнительные возможности визуального представления; Технология каскадных таблиц стилей (CSS – Cascading Style Sheets) - программирование поведения, динамичности и интерактивности документов. Скрипты (сценарии), написанные на специальных языках, например, Java. Script
Языки разметки Язык XML – средство структуризации информации для обмена между программами. В нем есть теги и атрибуты, но они создаются автором и могут определять только структуру документа. Внешний вид элементов задаётся во внешнем файле CSS, ссылка на который указывается в XML- документе. Языки HTML и XHTML ØHTML регистронезависимый, XHTML рекомендует использовать строчные буквы; Ø в HTML большинство тегов контейнерные, но есть и неконтейнерные (пустые). В XHTML для таких тегов необходимо указывать слэш перед закрывающейся угловой скобкой. Например, <br/>. Ø в некоторых тегах HTML имеются атрибуты без значений (булевы или логические атрибуты). В XHTML для таких атрибутов следует явно указывать строковое значение, совпадающее с именем соответствующего атрибута. Например, <option selected=“selected”>/ Ø в XHTML значения атрибутов тегов нужно заключать в кавычки, двойные или одинарные, что в HTML делать необязательно. Ø кодировка файла по умолчанию для HTML – ISO 8859 -1, а для XHTML - UTF – 8.
Языки разметки XHTML – более строг, ближе к универсальному языку XML и должен поддерживаться одинаковым образом всеми современными браузерами; – близок к HTML; – по рекомендации W 3 C в случае ошибки в XHTML – коде браузеры должны сообщать об этом и прекращать дальнейшую обработку. Код подвергается более тщательному анализу до начала его интерпретации – отображения в браузере. HTML 5 – спецификация, призванная стать преемником и HTML 4, и XHTML 1. 0, обеспечивая значительную совместимость с ними.
HTML 5 Øотсутствуют ряд тегов, например, <applet>, <center>, <frameset>, <frame>. Øвводится в оборот ряд новых тегов с отчетливо выраженной семантикой, предназначенный для повышения эффективности разработки WEB – приложений, а также для помощи поисковым системам. Например, <nav> - навигационная панель, <aside> - боковая колонка, <menu>. Ø появляются новые атрибуты некоторых тегов, например, time, url, email и др. тега <input>. Ø более развит элемент <canvas>, предоставляющий область на странице, в которой с помощью скриптов на языке Java. Script можно рисовать изображения. Ø для вставки мультимедиа предусмотрены теги <audio> и <video>.
Каскадные таблицы стилей Таблица стилей – шаблон оформления элемента или группы элементов: Ø разрабатывается отдельно от документа и применяется к нему; Ø модификация содержимого таблицы стилей меняет внешний вид X(HTML)- документов, не затрагивая их структуры и содержания; Ø таблица стилей может применяться к нескольким документам и изменять их одновременно; Ø к одному документу может применяться несколько таблиц стилей, действующих по определенным правилам приоритета; Ø CSS обеспечивает свободное позиционирование элементов; Ø правила CSS можно применить к любому элементу, заданному тегом.
Использование таблицы стилей непосредственно в документе <html> <head> <title>Пример использования CSS</title> <style type=“text/css”> Стилевые параметры: h 1, h 2 {font-size: 28 px} имя: значение Если несколько, то h 1 {font-family: Arial} через “; ” h 2 {font-family: Courier} </style> </head> <body> <h 1> Заголовок 1 -го уровня </h 1> <h 2> Заголовок 2 -го уровня </h 2> </body> </html>
Каскадные таблицы стилей Пусть стилевые параметры заданы во внешнем файле с расширением. css (записывается содержимое тега <style>) Ссылка на внешний файл стилей размещается в теге <head>: <link href=“url_css-файла” rel=“stylesheet” type=“text/css”/> Или в контейнер директива: <style> @import url(“url_css-файла”); добавляется
Скачать презентацию WEB — технологии Вводная лекция Основные понятия
1_WEB_введение.pptx