Файл: "Основы программирования на языке HTML".pdf

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

<table> является контейнером для элементов, определяющих содержимое таблицы;
<tr> является контейнером для создания строки таблицы;
<td> создает ячейку таблицы.

В следующем листинге приведен пример использования таблицы, а на рисунке 4 – результат интерпретации этого кода браузером.

<!DOCTYPE html>

<html>

<head>

<title>Таблицы</title>

</head>

<body>

</table>

</body>

</html>

Рисунок 4 – Теги оформления таблиц

2.3 Блочная верстка

Первые веб-страницы представляли из себя просто набор тегов. Элементы отображались последовательно, в том же порядке, как и HTML коде.

Вторым этапом верстки сайтов стало их построение на основе таблицы. Макет веб-страницы представлял собой таблицу в ячейки которой вставлялись блоки информации. Это позволяло реализовывать подобие колонок и отдельных блоков, однако такие макеты не обладали гибкостью и по-разному отображались различными браузерами[6].

Современный подход к верстке сайтов заключается в построении сайта с помощью блоков, или блочной верстке. Блоки при таком подходе располагаются один под другим, но могут менять порядок отображения, место отображения либо вообще не отображаться в соответствии с правилами, описанными в таблице стилей CSS. Основным элементом блочной верстки является <div>. Он имеет следующие свойства[5]:

Является блочный элементом, поэтому, если не задана ширина, растягивается на всю ширину окна браузера.
Высота блока, если она не задана, равна содержимому. Пустой блок div имеет высоту — 0 px, поэтому не отображается на странице.
Не имеет оформления. Чтобы получить оформление нужно задать их явно в таблице стилей.
Тег не несет смысловой нагрузки, он является способом структурировать сайт.
Тег может содержать любое количество вложенных элементов, другие блоки <div>, заголовки, параграфы, изображения и другие элементы.
Персонификация каждого тега возможна с помощью атрибутов класса или идентификатора.

Рассмотрим простейший шаблон веб-страницы, содержащий блоки шапки, подвала, меню, навигации и основного контента. В следующем листинге приведен пример HTML кода, реализующий такой шаблон:


<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Шаблон Веб-страницы</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="container">
<div id="header">Шапка сайта</div>
<div id="navigation">Блок навигации</div>
<div id="menu">Меню</div>
<div id="content">Контент</div>
<div id="clear"></div>
<div id="footer">Подвал сайта</div>
</div>
</body>
</html>

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

body {

background: #f3f2f3;

color: #000000;

font-family: Trebuchet MS, Arial, Times New Roman;

font-size: 12px;

}

#container {

background: #FFFFFF;

margin: 30px auto;

width: 900px;

height: 1000px;

}

#header {

background: #838283;

height: 200px;

width: 900px;

}

#navigation {

background: #a2a2a2;

width: 900px;

height: 20px;

}

#menu {

background: #333333;

float: left;

width: 200px;

height: 600px;

}

#content {

background: #d2d0d2;

float: right;

width: 700px;

height: 600px;

}

#clear {

clear:both;

}

#footer {

background: #838283;

height: 180px;

width: 900px;

}

В итоге шаблон страницы будет выглядеть следующим образом.

Рисунок 5 – Шаблон веб-страницы

HTML5 предлагает использовать семантическую разметку для описания контента. Такая разметка упрощает понимание контекста информации, размещенной на странице в первую очередь для разработчиков и поисковых роботов. На практике семантическая разметка представляет собой замена тегов <div> с соответствующим идентификатором на более понятные новые теги <section>, <header>, <footer>, <nav>,<menu>[9].

Рисунок 6 – Новые теги HTML5 семантической разметки

3 Взаимодействие HTML c CSS и JavaScript

3.1 CSS и HTML

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

Использование CSS дает следующие преимущества при верстке веб-страниц[1]:

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

Существуют три способа использования CSS в HTML-документе.

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

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

Внутренний HTML тэг <style>, который размещается в блоке <head>, используется при небольших объемах использования стилей.

</style>

Наиболее предпочтительным стособом подключения CSS является внешнее размещение. Внешняя таблица стилей представляет собой текстовый файл с расширением .css. Подключение этого файла к HTML-документу происходит при использовании тега в блоке <head>

При данном методе подключения CSS один css-файл может использоваться для управления отображением множества HTML-документов, а для изменения их отображения достаточно изменить один css-файл.

3.1 JavaScript и HTML

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

JavaScript встраивается в HTML документ, где необходимо взаимодействие с пользователем и способен производить следующие действия[7]:

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

Клиентский JavaScript включает в себя интерпретатор JavaScript и объектную модель документа (Document Object Model, DOM), определяемую веб-браузером. Документы, содержащие JavaScriptсценарии, могут использовать модель DOM для модификации документа или управления способом его отображения. Можно сказать, что клиентский JavaScript позволяет определить поведение статического содержимого веб-страниц.

Клиентский JavaScript имеет следующие ограничения:

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

Подключение JavaScript возможно одним из трех способов.

Произвольное подключение тегом <script> позволяет подключить программный код в любом месте HTML документа. Причем, пока не будет выполнен программный код, интерпретация последующих тегов производиться не будет.

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

Третьим способом подключения JavaScript является подключение внешнего файл со скриптом посредством тега

4 Новые возможности HTML5

4.1 Внедрение видео и аудио

Аудио и видеоматериалы стали неотемлимой частью современного Интернета. В HTML5 появились новые механизмы встраивания аудио и видеофайлов на веб-страницу.

Тег <audio> добавляет, воспроизводит и управляет настройками аудиозаписи на веб-странице. Путь к файлу задается через атрибут src или вложенный тег <source>. Внутри контейнера <audio> можно написать текст, который будет выводиться в браузерах, не работающих с этим тегом. Управление воспроизведением аудио различается между браузерами по своему виду, но основные управляющие элементы совпадают. Это кнопка воспроизведения(паузы), длина трека, прошедшее и суммарное время звучания, а также изменяемый уровень громкости. Синтаксис тега:

<audio>

</audio>

Тег <video> добавляет, воспроизводит и управляет настройками видеоролика на веб-странице. Путь к файлу задается через атрибут src или вложенный тег <source>. Синтаксис тега:

<video>

</video>

4.2 Рисование в окне браузера

Элемент HTML5 <canvas> позволяет создавать графические изображения и анимации в браузере на программном уровне, средствами JavaScript. На выделенной области можно рисовать простые и сложные фигуры, даже строить графики и диаграммы без использования серверных библиотек, Flash или специальных плагинов[4].

Тег <canvas> создает пустой холст, на котором можно рисовать средствами JavaScript. При создании холста указывается его ширина и высота:

Здесь будет рисунок

</canvas>

Например, нарисуем круг средствами этого элемента.

<!DOCTYPE html>

<html>

<head>

<title>canvas</title>

window.onload = function() {

var drawingCanvas = document.getElementById('pic');

if(drawingCanvas && drawingCanvas.getContext) {

var context = drawingCanvas.getContext('2d');

context.strokeStyle = "#000";

context.fillStyle = "#fc0";

context.beginPath();

context.arc(100,100,50,0,Math.PI*2,true);

context.closePath();

context.stroke();

context.fill();

}

</script>

</head>

<body>

<p>Ваш браузер не поддерживает рисование.</p>

</canvas>

</body>

</html>

Рисунок 7 – Рисование в окне браузера

Возможности <canvas> не ограничиваются 2D-графикой. Спецификация <canvas> предусматривает поддержку ЗD-графики, а разработчики браузеров реализуют поддержку аппаратного ускорения. Таким образом, с помощью этой технологии возможно создавать оригинальные пользовательские интерфейсы и игры[4].

Заключение

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

В HTML5 появились новые элементы для определения структуры сайта и встроенного контента, которые избавляют разработчиков от необходимости использовать дополнительные атрибуты, разметку или плагины. CSS3 предоставляет расширенные селекторы, графические усовершенствования и улучшенную поддержку работы со шрифтами, которые позволят сделать сайты более привлекательными без применения графической замены шрифтов и сложного кода.

Динамические клиентские приложения с использованием JavaScript превращают статические веб-страницы в мощные интерактивные приложения, заменяющие различные программы для ПК.

Список использованной литературы

Бен Фрейн HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств / Бен Фрейн – СПб.: Питер, 2014. – 304 с.
Ломов, А.Ю. HTML, CSS, скрипты: практика создания сайтов / А.Ю. Ломов – СПб.: БХВ-Петербург, 2006 – 416 с.
Могилев, А.В Технологии обработки текстовой информации./ А.В. Могилев – БХВ-Петербург, 2010 – 304 с.
Роббинс, Дженнифер. HTML5: карманный справочник, 5-е издание.: Пер. с англ. / Дженнифер Роббинс – М. :ООО "И.Д. Вильямс": 2015. – 192 с.
Сухов, К. HTML5 – путеводитель по технологии. / К. Сухов – М.: ДМК Пресс, 2013. – 352 с.
Ташков, П. А. Веб-мастеринг на 100 %: HTML, CSS, JavaScript, PHP, CMS, AJAX, раскрутка. / П. А. Ташков – СПб.: Питер, 2010. – 512 с.
Флэнаган Д. JavaScript. Подробное руководство. / Д. Флэнаган – Пер. с англ. – СПб: СимволПлюс, 2008. – 992 с.
Хоган, Б. HTML5 и CSS3. Веб-разработка по стандартам нового поколения. 2-е изд / Хоган – СПб.: Питер, 2014. – 320 с.
HTML справочник| Теги HTML[электронный ресурс] – Режим доступа: https://puzzleweb.ru/html/all_tags.php
World Wide Web Consortium (W3C) [электронный ресурс] – Режим доступа: https://www.w3.org/
Для тех, кто делает сайты[электронный ресурс] – Режим доступа: http://htmlbook.ru/
Справочник HTML[электронный ресурс] – Режим доступа: https://webref.ru/html