Язык разметки гипертекста html
HTML (HyperText Markup Language, язык разметки гипертекста) определяет, как и какие элементы должны располагаться на веб-странице. HTML не является языком программирования, это язык разметки документов (гипертекста). HTML определяет логическую структуру документа. Отметим, что в HTML имеются элементы(например font ), отвечающие за внешний вид (отображение) документа. Однако эти элементы крайне не рекомендуется использовать в HTML. Вид отображения документов устанавливается средствами CSS.
HTML отвечает за струстуру, CSS – внешний вид.
Стандарт HTML, как и другие стандарты для веб, разработан под руководством консорциума World Wide Web (World Wide Web Consortium, W3C). Стандарты и спецификации, в том числе и для языка HTML, можно найти на сайте World Wide Web Consortium http://www.3w.org
Сущестует несколько версий HTML. В 1999 году вышла последняя редакция языка - HTML 4.01. Эту версию часто называют динамический HTML (DHTML). DHTML использует объектную модель документа (DOM), которая описывает способ организации и названия объектов в браузере, а также определяет, какие объекты и свойства могут быть изменены и какие значения они могут принимать. Событийная модель описывает способ передачи управления сценариям, для реализации которых может быть использован язык сценариев JavaScript. С использованием динамического HTML сценарии могут вставлять, удалять и заменять блоки HTML. Браузер автоматически обновляет новые свойства и новый HTML-код.
Объявленная версия HTML 5.0 до настоящего времени (2012г.) не сертифицирована, хотя и полностью реализована.
Язык HTML используется для создания самых разных интерактивных документов с гиперссылками и элементами мультимедиа — Web-страниц, интерфейсов, презентаций, электронных книг и учебных пособий. Файлы с HTML-кодом — это обычные текстовые файлы, доступные для чтения, как программе, так и человеку. Благодаря этому HTML-страницы можно редактировать и просматривать на любом компьютере и в любой операционной системе.
HTML-документ создается с помощью HTML-редактора и сохраняется в виде текстового файла со стандартными расширением .html или .htm. Для просмотра HTML-документов используются Web-браузеры, интерпретирующие эти документы.
Разметка гипертекста средствами HTML происходит путем вставки в текст тегов (дескрипторов) — специальных кодовых слов, определяющих элементы форматирования. Для того чтобы теги отличались от остального текста, их заключают между знаками "больше" и "меньше", например: <b>, <a>, <img>. Рассмотрим пример:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Моя первая веб-страница</title>
</head>
<body>
<h1>Заголовок страницы</h1>
<p align=center>Основной текст.</p>
</body>
</html>
Дескрипторы бывают контейнерные (парные) и неконтейнерные (одинарные). Контейнерный дескриптор состоит из двух частей — открывающего(старт-тега) и закрывающего(стоп-тега), — между которыми находится форматируемый текст, например:
<html> текст html документа </html>
Закрывающий тег отличается от открывающего наличием косой черты. Контейнерные теги бывают вложенными, например:
<i> курсив <b> жирный курсив </b> курсив </i>
При использовании вложенных тегов нужно следить за их последовательностью: тег, открытый первым, закрывается последним.
Одинарный тег состоит только из открывающего и не требует закрывающего тега. Встретив, например, такой тег <hr>, браузер выведет на экран горизонтальную разделительную линию. По правилам XHTML присутствие закрывающего тега обязательно, например, в конце тега можно поставить />.
DOCTYPE.
В начале html – документа помещается тег DOCTYPE, содержащий информацию о типе документа и используемой версии HTML. Указание типа документа позволяет браузеру проверить структуру документа на соответствие этим правилам и правильно его отобразить. В HTML существуют три варианта правил (dtd – описаний, загружаемых с сайта w3.org) HTML 4.01, устанавливаемых в DOCTYPE: Strict, HTML 4.01Transitional и HTML 4.01Frameset.
Строгий (Strict)- не содержит элементов, помеченных как «устаревшие» или «не одобряемые» (deprecated), например:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Переходный (Transitional) –может содержать устаревшие теги в целях совместимости для старых версий HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
С фреймами (Frameset) – может содержать теги для создания наборов фреймов:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
Для последней версии HTML5 элемент DOCTYPE выглядит наиболее просто
<!DOCTYPE html>
Теги, атрибуты, значения
За названием тега через пробел могут помещатся атрибуты(параметры) тега и их значения.
<тег атрибут1=”значение” атрибут2=”значение”> Теги или Текст </тег>
Атрибуты добавляют в тег для расширения или модификации его действий. Атрибуты можно подразделить на обязательные, они непременно должны присутствовать, и необязательные, их добавление зависит от цели применения тега. Атрибуты представляют для тега значения параметров. Правила записи атрибутов и значений:
после имени открывающего тега через пробел могут следовать атрибуты
атрибуты отделяют друг от друга пробелами
порядок следования атрибутов произволен
значения атрибутов записывают в ординарных или двойных кавычках после знака равенства
Спецификация html позволяет опускать кавычки, если значение атрибута состоит из одного слова из латинских букв и цифр. Если значение содержит несколько слов, разделенных запятыми или пробелами, либо специальные символы, то кавычки обязательны. В качестве примера приведем атрибут align=left|right| center. Этот атрибут может использоваться вместе с большим числом тегов и используется для выравнивания гипертекста.
В языке HTML безразлично, в каком регистре вы записываете названия тегов и их атрибуты. В одном документе можно использовать для написания тегов и верхний, и нижний регистр. В XML и XHTML используются только строчные буквы.
Структура документа
Любой html-документ заключается между тегами <html> и </html>, т.е. тег <html> открывает документ, а тег </html> закрывает его. Между этими двумя основными тегами располагается заголовочная часть документа <head> и его тело <body>.
<html>
<head>
</head>
<body>
<!--содержание документа, комментарий-->
</body>
</html>
Заголовочная часть документа <head>
Тег заголовочной части документа используется сразу после тега <html>. Данный тег описывает общие правила отображения документа в браузере, содержит вспомогательную информацию о документе, а также информацию для индексирования документа поисковыми машинами. Тег meta содержит служебную информацию, не отображаемую в окне браузера. Подробнее этот тег будет рассмотрен ниже.
Заголовок документа, ограниченный тегами <title> и </title>, отображается вверху экрана, отдельно от содержимого документа. Рассмотрим пример:
<html>
<head>
<title> Иванов И.И. </title>
<meta name=”author” content=”Pivovarov”>
</head>
<body>
Моя первая HTML-страница!
</body>
</html>
Тело документа <body>
Тело документа служит контейнером для контента сайта, а также параметров отображения сайта и размещается между тегами <body> и </body>. Это та часть документа, которая отображается как текстовая и графическая информация документа. Технически стартовые и завершающие теги типа <html>, <head> и <body> необязательны. Но настоятельно рекомендуется их использовать, поскольку использование данных тегов позволяет Web-браузеру разделить заголовочную и смысловую часть документа.
<html>
<head>
<title>Домашняя страница </title>
</head>
<body>
<!-- это комментарий-->
<h1> заголовок </h1>
<hr> <!-- горизонтальная линия -->
<p> абзац </p>
</body>
</html>
Тег <body> может иметь атрибуты, которые в настоящее время являются устаревшими. Вместо них рекомендуется использовать таблицы стилей CSS. Атрибуты тега <body>:
Атрибуты | Описание |
background | Атрибут задает графическое изображение, которое как черепица заполнит фон документа: body background="(url)(путь) имя файла"> Если файл с изображением разместить в том же каталоге, то (путь) указывать не нужно. Файл хранится в формате GIF или JPEG . Допускается использовать анимированное gif-изображение |
bgcolor | задает цвет фона при помощи шестнадцатеричных значений интенсивности цветов RGB, или при помощи литерала. Синтаксис: <body bgcolor="#ff0000"> или <body bgcolor="red"> |
text | задает используемый цвет текста. По умолчанию текст будет черным. Синтаксис: <body text=" цвет "> |
link | задает цвет гиперссылки (по умолчанию темно синий). Синтаксис: <body link="цвет" > |
alink | задает цвет активной гиперссылки, он меняет цвет гиперссылки в момент щелчка по ней мышью. Синтаксис: <body alink="цвет" > |
vlink | задает цвет посещенной гиперссылки: <body vlink="цвет" > |
topmargin | задает верхнюю границу страницы в пикселях: <body topmargin=”число”> |
bottommargin | задает нижнюю границу страницы : <body bottommargin=”число”> |
leftmargin | задает границу страницы слева: <body leftmargin=”число”> |
rightmargin | задает границу страницы справа: <body rightmargin=”число”> |
Структура документа HTML 5
В следующем примере рассматривается документ в формате HTML 5. Отличие от HTML 4.01 начинаются в теге <!DOCTYPE HTML>
<!DOCTYPE html>
<!--Html-5 документ, comment -->
<html>
<head>
<meta charset="utf-8">
<title> Html-5 документ, заголовок</title>
</head>
<body>
<header>...</header>
<nav>Навигация</nav>
<article>
<section>
Секция
</section>
</article>
<aside>...</aside>
<footer>Подвал</footer>
</body>
В HTML5 введено несколько тегов для улучшения структуры документа:
header: в этом теге, конечно, лучше размещать заголовок секции;
footer: футер(подвал);
nav: для навигации появился отдельный тег;
section: тег относится к описанию части документа, и может использоваться с тегами h1-h6, а также быть частью статьи;
article: в теге лучше всего описывать запись в блоге или новостную заметку;
aside: в этом теге предлагается описывать некие данные, которые в целом не связаны с основным контентом страницы;
dialog: этим тегом может быть отмечен какой-либо разговор или интервью;
figure: в этом теге рекомендовано заключать встраиваемый контент – к примеру, видео, графику или аудио.
Чтобы новые элементы HTML5 отображались правильно как элементы уровня блоков, необходимо назначить им стиль:
header, footer, article, section, nav, menu, hgroup {
display: block;
}
HTML 5 вводит несколько новых элементов и атрибутов. Некоторые из них технически являются эквивалентами ‹div› и ‹span›, но имеют своё семантическое значение, например ‹nav› (навигационная панель) и ‹footer›. Другие элементы предоставляют новую функциональность, такие как ‹audio› и ‹video›. HTML 5 разработан так, что не поддерживающие его браузеры могут игнорировать элементы HTML 5. В отличие от четвёртой, пятая версия чётко прописывает правила лексического разбора, чтобы различные браузеры отображали один и тот же результат в случае некорректного синтаксиса. Некоторые устаревшие элементы HTML 4, такие как ‹font› и ‹center›, были удалены из HTML 5. Пример веб-страницы HTML 5
<!DOCTYPE html>
<!--Html-5 документ, comment -->
<html>
<head>
<meta charset="utf-8">
<title> Html-5 документ, заголовок</title>
</head>
<body>
<header>
<a href="/"><img src=img/logo.gif alt="home"></a>
<a href="/"><img src=img/webconf09.gif alt="home"></a>
<hgroup>
<h3>Header - Демонстрация</h3> <h6>Демонстрационный сайт</h6>
</hgroup>
</header>
<nav>
<ul>
<lh>Навигация</lh>
<li> Раз</li>
<li>Два </li>
<li> Три</li>
</ul></nav>
<article> <h1>Article</h1>
<section>
<h1>Секция-session</h1>
</section>
</article>
<aside><h1>Aside</h1></aside>
<footer><h1>Подвал-footer</h1>
<small>©2012 Romanchik Valery<small>
</footer>
</body>
Результат:
- Web – программирование
- Глава 2. Проектирование и разработка сайтов……………………………45
- Глава 3. Информационноый обмен в Веб…………………………………..85
- Глава 4. Язык JavaScript…………………………………………………..….176
- Глава 5. Язык серверных скриптов php……………………………………270
- Глава 6. Лабораторные работы…………………………………………...…358
- Введениев Интернет Коротко об истории Интернет
- Как работает Интернет?
- Система адресации в Интернет
- Способы подключения к сети Интернет
- Сервисы Интернет
- Электронная почта
- Передача файлов по ftp
- Всемирная паутина www
- Коротко о компьютерных сетях, входящих в Интернет
- Локальные сети
- Распределенная сеть (wan) и глобальные сети
- Сеть vpn
- Компьютерные игры
- Задания по теме “Введение в Интернет”
- Глава 1. Протоколы Интернет Адресация в компьютерных сетях
- Ip адрес в компьютерных сетях Ethernet и Интернет
- Понятие и краткое описание протоколов
- Соотношение между tcp/ip и osi/iso
- Межсетевой протокол ip
- Транспортный протокол tcp
- Флаги (управляющие биты) Это поле содержит 6 битовых флагов:
- Протокол дэйтаграмм udp
- Ip-маршрутизация
- Протоколы arp и rarp
- Протоколы сетевого уровня
- Протоколы электронной почты
- Протокол smtp
- Протокол pop3
- Протокол imap4
- Спецификация mime
- Проблемы с кодировкой
- Протокол ftp
- Http – Протокол передачи гипертекстов
- Транзакции http
- Клиентские методы http
- Что возвращается обратно: коды ответа сервера
- Заголовки http
- Развитие прикладных протоколов
- Безопасность в сети
- Протокол ssl
- Анонимный обмен ключами
- Обмен ключами при использовании rsa и аутентификация
- Протокол записи (Record Layer)
- Как работает ssl
- Шифрование данных
- Хэширование
- Установление подлинности участников
- Предупреждения системы безопасности web-браузера.
- Реализация ssl
- Задания по теме «Протоколы Интернет»
- Глава 2. Проектирование и разработка сайтов
- Виды сайтов
- Этапы проектирования и разработки сайта
- Модели проектирования
- Спиральная модель
- Microsoft Solutions Framework (msf)
- Управление проектами
- Веб – дизайн и разработка сайтов
- Логическое проектирование дизайна сайта
- Главная страница сайта
- Внутренние страницы сайта
- Краткий обзор основных технологий разработки Веб приложений
- Язык разметки гипертекста html
- Язык xml
- Правильно построенные и действительные документы xml
- Синтаксис xml
- Объявление xml
- Корневой элемент
- Комментарий
- Спецсимволы
- Сильные и слабые стороны
- Отображение xml во Всемирной паутине
- Применение стилей css.
- Применение xsl.
- Словари xml
- Как выглядит xml-документ?
- Правила создания xml- документа
- Конструкции языка
- Элементы данных
- Комментарии
- Атрибуты
- Cпециальные символы.
- Директивы анализатора.
- Adobe Flash и Adobe Flex
- Вставка флэш в страницу
- Язык ActionScript
- Видео-аудио проигрыватели
- Язык программирования клиентских скриптов JavaScript
- Технология «клиент-сервер» cgi
- Программирование для серверов
- Язык программирования Perl
- Язык Java на клиентской и серверной странице
- Сжатие изображений с помощью фракталов
- Глава 3. Информационноый обмен в Веб
- Язык разметки гипертекста html
- ©2012 Romanchik Valery
- Формы html
- Новые элементы html5
- Email Inputs
- Placeholders
- Вопросы и задания
- Задания для выполнения
- Каскадные таблицы стилей css
- Свойство шрифтов font позволяет задать одну или несколько характеристик шрифта: font-family| font-style | font-variant | font-weight| font-size
- Заголовок1 Заголовок2 Заголовок3
- Свойства текста.
- Цвет и фон.
- Некоторые подсказки по синтаксису css:
- 1. Свойства шрифтов.
- 2. Свойства текста.
- 3. Свойства цвета и фона.
- 4. Свойства рамки.
- 5. Свойства списков.
- 6. Свойства изображений.
- Форматирование блока
- Форматирование псевдоклассов и псевдоэлементов
- Единицы измерения в css
- Новое в css3
- Валидация css
- Глава 4. ЯзыкJavaScript Введение
- Включение скриптов JavaScript в html-код
- Создание простых сценариев
- Комментарии. Скрытие сценариев от браузеров
- Отладка скриптов. Ввод и вывод данных
- Описание языка Типы данных
- Преобразование типа
- Специальные числа
- Булев тип
- Переменные типа Undefined и Null
- Массивы
- Операторы и выражения
- Оператор with
- Оператор switch
- Метод eval()
- Функции
- Передача параметров по значению и по ссылке
- Глобальные и локальные переменные
- Модель событий
- Ключевое слово this
- Перехват события.
- Исключения: throw/catch/finally
- Объектная модель
- Пользовательские объекты
- Прототипы
- Хеш-таблицы в JavaScript
- Встроенные объекты String, Array, Date, Math Объект String
- Объект Array
- Объект Number (Число)
- Объект Date (Дата)
- Методы объекта Date
- Объект Function (Функция)
- Свойства:
- Методы :
- Шаблоны и регулярные выражения.
- Объекты браузера
- Объект window
- Методы объекта window
- Свойства окна, передаваемые методу open
- Свойства и методы объекта navigator
- Свойства объекта screen
- Свойства и методы объекта history
- Свойства и методы объекта document
- Коллекции и подчиненные объекты объекта document Обращение к элементам страницы
- Свойства и методы объекта location
- Свойства и методы объекта style
- Объект layer
- Свойства объекта layer
- Методы объекта layer
- Document Object Model (dom)
- Навигация по дереву документа
- Создание новых узлов
- Добавление узлов в документ
- Копирование: метод cloneNode()
- Удаление и замена узлов в документе
- Использование каскадных таблиц стилей в dom
- Свойство элемента innerHtml и outerHtml
- Работа с атрибутами элементов
- Метод removeAttribute()
- JavaScript и ajax
- Модель ajax:
- Запрос к серверу. Класс xmlHttpRequest
- Методы класса xmlHttpRequest
- Свойства класса xmlHttpRequest
- Создание экземпляра объекта xmlHttpRequest
- Использование dom
- Информируйте пользователя
- Если скрипты отключены
- Объект FormData
- Cookies
- Работа с cookie
- Синтаксис http заголовка для поля Cookie
- Дополнительные сведения
- Способы задания значений cookie
- Примеры на JavaScript
- Тестовые вопросы по языку JavaScript
- Упражнения и задачи поJavaScript
- Глава 5. Язык серверных скриптов php
- Возможности php.
- Инструменты для разработки
- Как phPработает
- Типы данных
- Массивы и инициализация массивов
- Операции и выражения
- Операции сравнения
- Логические операции
- Строковые операции
- Операторы управления
- Функции
- Рекурсивные функции
- Аргументы функции
- Область действия и время жизни переменных
- Изменяемые (динамические) переменные
- Внешние библиотечные функции
- Функции для работы с массивами
- Функции для работы со строками. Базовые строковые функции
- Функции для работы с отдельными символами
- Функции форматных преобразований строк
- Преобразование строк и файлов к формату html и наоборот
- Преобразование html в простой текст
- Преобразование строки к верхнему и нижнему регистру
- Установка локальных настроек
- Регулярные выражения
- Perl-совместимые функции рнр для работы с регулярными выражениями
- Функции даты и времени
- Математические функции
- Объектно-ориентированное программирование в php Основные понятия ооп
- Классы и Объекты
- Конструкторы и деструкторы
- Наследование классов и интерфейсов
- Магические методы
- Обработка ошибок
- Ошибки php и журнал error_reporting
- Чтение и запись бинарных файлов
- Работа с каталогами в рнр
- PhPиMySql
- MySql– сервер: бд1; бд2; бд3; бд4;
- Язык запросов sql
- Операция соединения.
- Команды sql для создания баз данных и таблиц
- Phpmyadmin
- Выборка данных из таблиц бд
- Работа с MySql (сохранение данных в базе данных).
- Работа с MySql занесение и получение данных из базы данных
- Некоторые улучшения в организации работы с данными
- Передача данных от клиента к серверу и обратно. Протокол http
- Клиентские методы http
- Обработка html-форм
- Передача переменных в скрипт.
- Передача значений переменных по методу get
- Передача данных из клиентской формы на сервер по методу get
- Передача данных из клиентской формы на сервер по методу post
- Php и различные формы
- Обработка форм
- Более сложные переменные формы
- Глава 6. Лабораторные работы Лабораторная работа №1 (4 часа). Инструменты и средства создания простых сайтов
- Вопросы по теме:
- Лабораторная работа №2 Работа с документами .Doc, .Pdf, .Html(4 часа).
- Лабораторная работа №3. Применение каскадных таблиц стилей css
- Пример 1. Двухколоночный контейнерный макет сайта с применением css.
- Пример 2. Трехколоночный контейнерный макет сайта с применением css.
- Задания для создания сайтов
- Лабораторная работа №4. Применение каскадных таблиц стилей css
- Лабораторная работа №5 по JavaScript(4 часа). Динамика на Веб –странице. Включение скриптов JavaScript в html-код
- 1. Выполнить следующие задания на JavaScript:
- Пример вывода даты и времени на сайте с помощью JavaScript.
- Пример вывода строки в стиле печатной машинки
- Лабораторная работа №6 по JavaScript(4 часа). Проверка правильности заполнения формы на сайте
- Методы объекта window
- Window.Open()
- Window.Close()
- Методы focus() и blur()
- Лабораторная работа №7. Php Задание 1. Массивы и строки
- Выполнить одно из перечисленных ниже упражнений
- Задание 2. Функции
- Задание 3. Файлы и строки
- Выполнить одно из перечисленных ниже упражнений
- Задание 4. Работа с базами данных Выполнить одно из перечисленных ниже упражнений
- Задание 5. Создание web-объектов Клиентские методы http
- Обработка html-форм
- Передача переменных в скрипт.
- Передача значений переменных по методу get
- Передача данных из клиентской формы на сервер по методу get
- Передача данных из клиентской формы на сервер по методу post
- Список заданий
- Литература
- Приложение 1. Программное обеспечение Adobe Dreamweaver
- Приложение 2. Системы быстрой разработки Веб-приложений и cms
- Администрирование
- Установка модуля
- Создание шаблона в Drupal
- Создание индивидуальных шаблонов
- Движок шаблонирования xTemplate
- Создание нового шаблона
- Основы создания шаблона
- Удаление блока с формой входа на сайт
- Включение блока для отображение популярных статей
- Удаление ссылки "Далее" в отображение статьи
- Drupal: практические примеры
- Часть 1. Введение
- 6 Шагов к тому, чтобы заставить Drupal работать быстрее
- Приложение 3. Основы cgi/Perl
- Типы данных
- Ассоциированные массивы
- Операторы
- Подпрограммы
- Common Gateway Interface
- Приложение 4. Базы данных и язык sql
- Реляционные субд Модель данных в реляционных субд
- Нормализация модели данных
- Язык sql
- Команды sql
- Команды определения структуры данных (DataDefinitionLanguage–ddl)
- Команды манипулирования данными (Data Manipulation Language – dml)
- Команды управления транзакциями (TransactionControlLanguage-tcl)
- Команды управления доступом (DataControlLanguage–dcl)
- Работа с командами sql Извлечение данных, команда select
- Ключевое слово distinct
- Секция from, логическое связывание таблиц
- Секция where
- Секция orderby
- Групповые функции
- Секция group by
- Секция having
- Изменение данных
- Команда insert
- Команда delete
- Команда update
- Определение структуры данных Команда createtable
- Команда altertable
- Курсовая работа №2. Проекты сайтов
- Курсовая работа №3. Технологии разработки Веб – приложений Проекты сайтов
- Перечень заданий