Файл: Основы программирования на языке HTML (История развития HTML).pdf
Добавлен: 29.04.2023
Просмотров: 327
Скачиваний: 2
СОДЕРЖАНИЕ
Тема 1. Язык HTML как средство создания гипертекстовых документов
Тема 2. Создание Web-страницы с помощью языка HTML
Создание и просмотр HTML-документа
Использование стилей при создании Web-страницы
Размещение и оформление текста
Форматирование шрифта и текста
- Strict – строгий формат. Не содержит тегов и параметров, помеченных как устаревшие или не одобряемые. Объявление формата отображено в приложении (таб. 1).
- Transitional – переходный формат. Содержит устаревшие теги в целях совместимости и упрощения перехода со старых версий HTML. Объявление формата отображено в приложении (таб. 1).
- Frameset – аналогичен переходному формату, но содержит также теги для создания фреймов. Объявление формата отображено в приложении (таб. 1).
Если тег <!DOCTYPE> не указан, то web-браузер переходит в режим совместимости. В этом режиме отличается тип блочной модели и разные Web-браузеры могут по-разному отображать Web-страницу.[9]
Весь текст HTML-документа расположен между тегами <html> и </html>. HTML-документ состоит из двух разделов – заголовка(<head>) и содержательной части (<body>).
Раздел HEAD содержит техническую информацию о странице – заголовок, ее описание и ключевые слова для поисковых машин, базовом адресе страницы и кодировки. В этот раздел можно включить множество тегов, которые помогут создать уникальную Web-страницу.
При написании Web-страницы с помощью HTML языка необходимо указать заголовок, для этого используются теги <title> и </title>. [10]
<title> Заголовок страницы </title>
Текст, расположенный между ними отображается в строке заголовка Web-браузера. Нужно отметить, что длина заголовка не должна превышать 60 символов, иначе он не поместится в заголовке Web-браузера. Часто заголовок используется в результатах выдаваемых поисковыми системам, что делает теги <title> и </title> обязательными в разделе HEAD.
В разделе HEAD могут быть расположены также следующие теги:
- <base> - предназначен для документов, в которых используется относительный адрес и эти документы могут переноситься в другую папку или даже на другой компьютер без потери связи;
- <link> - устанавливает связь с внешним документом вроде файла со стилями или со шрифтами;
- <script> - предназначен для описания скриптов, может содержать ссылку на программу или ее текст на определенном языке;
- <style> - применяется для определения стилей элементов Web-страницы;
- <meta> - позволяет задать описание содержимого страницы и ключевые слова для поисковых машин.
Основная часть документа располагается между тегами <body> и </body>. В этом разделе определяется содержимое HTML-документа, которое отображается в окне браузера (текст, ссылки, картинки, таблицы, списки и т.д.)
Тег <body> имеет следующие параметры:[11]
- bgcolor – позволяет задать цвет фона Web-страницы;
- background – позволяет задавать фоновый рисунок Web-страницы;
- alink – определяет цвет активной ссылки;
- link – определяет цвет еще не просмотренной ссылки;
- vlink – определяет цвет уже просмотренной ссылки;
- text – устанавливает цвет текста.
Нужно отметить, что с развитием языка HTML, атрибуты, ранее используемые с элементом <body>, считаются устаревшими и запрещены к использованию в HTML5, поэтому для определения цвета заднего фона, цвета текста или ссылок, а так же для добавления фонового изображения и т.д. используются каскадные таблицы стилей (Cascading Style Sheets).[12]
Использование стилей при создании Web-страницы
Тенденция развития языка HTML идет быстрыми шагами, что ставит перед программистами поиск новых возможностей для улучшения и настройки внешнего вида Web-сайтов. Форматирование HTML-документа можно разделить на 2 способа. Первый способ подразумевает все действия над Web-страницей производить непосредственно в самом коде. Этот способ более трудоемкий и сложный для начинающих. Второй способ - это использовать каскадные таблицы стилей.
Каскадные таблицы стилей (Cascading Style Sheets - CSS) – формальный язык описания внешнего вида HTML-документа.
Каскадные таблицы стилей позволяют гибко настроить внешний вид Web-страницы (цвета, шрифты, фоновые изображения, интервалы между строками, отступы, границы, эффекты и даже анимация элементов). Благодаря CSS можно вносить изменения, относящиеся ко всем страницам Web-сайта, редактируя при этом лишь один файл таблицы стилей. Каскадные таблицы стилей могут управлять представлением документов не только в Web-браузерах, но и в документах при выводе их на печать, кроме того, позволяют менять представление документа в зависимости от разрешения и типа используемого экрана, особенно это удобно для различных устройств (компьютеры, планшеты, телефоны и др.).
Задать стиль можно тремя способами:
- Встроить определение стиля в тег;
- Встроить определение стилей в заголовок HTML-документа;
- Вынести в таблицу стилей в отдельный файл.
Первый способ, позволяющий определение стиля встроить в любой тег с помощью параметра «style». Нужно отметить что параметр «style» поддерживают все теги. Для примера можно привести изменение размера шрифта:
<font style = ”font-size: 12pt”> Текст </font>
Прежде чем продолжить, нужно разобраться с основными понятиями, приведенными в примере. Значение параметра «style (font-size: 12pt)» называется определением стиля или стилем. Элемент определения стиля (font-size) называется атрибутом. Каждый атрибут имеет значение (12pt), указываемое после двоеточия.[13]
Если нужно указать несколько атрибутов соответствующих одному элементу, то они указываются через точку с запятой:
<font style = ”font-size: 12pt; color: green”> Текст </font>
Второй способ подразумевает сбор определений стиля в одном месте. Для этого стили указываются между тегами <style> и </style>. Сам тег <style>должен быть расположен в разделе HEAD HTML-документа. А в теге, к которому нужно применить стиль, указывается имя стиля с помощь. Параметра «class». Пример использования данного способа показан на рис. 2.3.1. Атрибуты определения стиля, указанные между тегами <style> и </style>, заключаются в фигурные скобки. Если атрибутов несколько, то они перечисляются через точку с запятой.
(рис. 2.3.1)
Третий способ, вынесение таблицы стилей в отдельный файл, самый часто используемый способ среди программистов. Он помогает уменьшить вес HTML-документа и соответственно повысить скорость загрузки Web-страницы. Файл с таблицей стилей обычно имеет расширение *.css и может редактироваться любым текстовым редактором. Пример использования показан на рис. 2.3.2.
(рис. 2.3.2)
Отдельный файл с таблицей стилей прикрепляется к HTML-документу с помощью одинарного тега <link>. В параметре «href» указывается URL-адрес, а в параметре «rel» указано значение показывающее, что присоединенный документ содержит таблицу стилей.
Размещение и оформление текста
Чтобы поместить простой текст на страницу, достаточно ввести его в теле документа. При этом браузер отобразит текст, используя шрифт и цвет, заданные по умолчанию для текста тела страницы. Пример размещения текста в HTML-документе представлен на рисунке 2.4. Чтобы чтение информации, содержащейся в HTML-документе, стало приятным занятием, применяется форматирование и разбиение документа на логически цельные части (структурирование) с визуальным отделением этих частей друг от друга.
(рис. 2.4)
Форматирование шрифта и текста
Для изменения вида текста, отображаемого браузером, применяется форматирование с использованием специальных HTML-тегов. Форматирование текста HTML-документа сходно с форматированием в любом текстовом редакторе (например, Microsoft Word). Оно позволяет выделить цветом, начертанием, изменением шрифта некоторый текст, подчеркнуть его значимость или просто украсить.
Чтобы выделить информацию в теле HTML-документа используются теги:
- <b> - отображает текст полужирным шрифтом;
- <i> - отображает текст курсивом;
- <u> - отображает текст подчеркнутым;
- <s> - отображает текст перечеркнутым.
Нужно обратить внимание, что теги <u> и <s> использовались в старом формате Transitional. И использование их в формате Strict недопустимо.
Для более гибкого форматирования текста HTML-документа используются каскадные таблицы стилей, позволяющие задать название, цвет и размер шрифта, его стиль и «жирность». Кроме того можно указать несколько имен шрифтов и одно из названий альтернативных семейств.
Основные атрибуты форматирования шрифта при помощи каскадных таблиц стилей:[14]
- font-family – позволяет задать имя шрифта. Пример использования атрибута показан в приложении (таб. 2);
- font-style – позволяет задать стиль шрифта. Пример использования атрибута показан в приложении (таб. 2);
- font-size – позволяет задать размер шрифта. Пример использования атрибута показан в приложении (таб. 2);
- color – позволяет задать цвет шрифта. Пример использования атрибута показан в приложении (таб. 2);
- font-weight – позволяет управлять жирностью шрифта. Пример использования атрибута показан в приложении (таб. 2);
Для текстовых фрагментов, кроме указания характеристик шрифтов, можно задать некоторые дополнительные параметры – расстояние между символами, словами и строками, вертикальное и горизонтальное выравнивание, отступ первой строки.
Основные атрибуты форматирования текста при помощи каскадных таблиц стилей:[15]
- letter-spacing – задает расстояние между символами. Пример использования атрибута показан в приложении (таб. 3);
- word-spacing – задает расстояние между словами. Пример использования атрибута показан в приложении (таб. 3);
- text-index – задает отступ первой строки. Пример использования атрибута показан в приложении (таб. 3);
- text-align – задает горизонтальное выравнивание текста. Пример использования атрибута показан в приложении (таб. 3);
- vertical-align – задает вертикальное выравнивание текста относительно элемента-родителя. Пример использования атрибута показан в приложении (таб. 3);
Работа с таблицами в HTML
HTML-таблицы упорядочивают и выводят на экран данные с помощью строк или столбцов. Таблицы состоят из ячеек, образующихся при пересечении строк и столбцов. Ячейки таблиц могут содержать любые HTML-элементы, такие как заголовки, списки, текст, изображения, элементы форм, а также другие таблицы. Каждой таблице можно добавить связанный с ней заголовок, расположив его перед таблицей или после неё.
В HTML-документе таблицы используются в следующих случаях:
- как средство представления данных;
- как элемент оформления страницы, с помощью которого можно точно разметить на странице текст и графику.
Структура, описывающая таблицу, представлена на рис. 2.5.
(рис. 2.5)
Эта структура описывает таблицу 2х2 с заголовком. Все ячейки пронумерованы от 1 до 4. Таблица вставляется в HTML-документ с помощью парного тега <table>. Отдельная ячейка таблицы описывается тегом <td>, а ряд ячеек – с помощью тега <tr>. Тег <caption> позволяет задать заголовок таблицы. Для более гибкой настройки каждый тег таблицы имеет свой набор атрибутов и параметров.
Тег <table> имеет следующие параметры:
- border – управляет отображением линий сетки таблицы, а также задает толщину рамки вокруг таблицы. Если его не указывать, то сетка не будет отображена на Web-странице;
- cellspacing – задает расстояние между рамками соседних ячеек. По умолчанию имеет значение 2. Чтобы рамка смежных ячеек была одной линией нужно присвоить значение 0;
- cellpadding – указывает размер отступа между рамкой ячейи и данными внутри ячейки;
- width – определяет ширину таблицы в процентах или в пикселях от размера окна;
- align – задает выравнивание таблицы, а также обтекания таблицы текстом. Имеет следующие значения: left (по левому краю), right (по правому краю), center (по центру).
- Bgcolor – указывает цвет фона таблицы.
Парный тег <tr>, описывающий строки таблицы, имеет следующие параметры:
- align – указывает горизонтальное выравнивание текста в ячейках таблицы и принимает следующие значения: left (по левому краю), right (по правому краю), center (по центру), justify (по ширине);
- valign – определяет вертикальное выравнивание текста в ячейке и принимает следующие значения: top (по верхнему краю), middle (по центру), bottom (по нижнему краю), baseline (по базовой линии).
Парный тег <td>, описывающий ячейки таблицы, имеет следующие параметры: