Файл: Основы программирования на языке HTML (Описание языка HTML).pdf
Добавлен: 30.03.2023
Просмотров: 49
Скачиваний: 2
В тег <head> заключается служебная информация для браузера и поисковых систем. Эта информация никак не отображается браузером на экране монитора. Исключение составляет тег <title> </title>. О нем мы поговорим в конце этого урока.
Тег <body> – это основное тело нашего документа. Все, что находится между тегами <body> и </body> будет выводиться браузером на экран монитора [8].
Кратко структура HTML–документа изображена на рисунке 2.
Рисунок 2 Краткая структура HTML–документа
Раздел <head> обычно содержит теги, незаметные для пользователя, но тем не менее способные активно влиять не внешний вид документа. Такие теги приведены в таблице 1 [1].
Таблица 1
Теги раздела <head>
|
Тег |
Назначение |
|
<TITLE |
Определяет имя всего документа. Имя, как правило, отображается в заголовке окна браузера. Данный элемент обязателен для любого HTML-документа и может быть указан не более одного раза. |
|
<А…> |
Указывает базовый адрес текущего документа (URL), который станет отправной точкой для расчета относительных адресов внутри документа. Элемент не имеет конечного тэга. Обязательно присутствие хотя бы одного из аргументов: HREF – определяет базовый адрес (URL) текущего документа. TARGET – определяет имя фрейма, которое будет использоваться в гиперссылках по умолчанию. Это может вам пригодиться, если вы хотите открывать все ссылки документа в другом фрейме. |
|
<STYLE TYPE=«text/css»> |
Используется для вставки в документ каскадных таблиц стилей (CSS − Cascade Style Sheet). TYPE − обязательный атрибут, значением которого, как правило, является «text/css». |
Продолжение таблицы 1
Теги раздела <head>
|
<МЕТА…> |
Элемент МЕТА используется для технического описания документа. С помощью этого элемента в заголовок документа внедряется дополнительная полезная информация, невидимая для пользователя, но порой просто незаменимая для правильной индексации вашей страницы роботами поисковых серверов. Элемент не имеет конечного тега. NAME – определяет имя мета-записи. Существует множество предопределенных имен, некоторые из которых вы можете увидеть в указанном ниже примере. CONTENT – присваивает значение мета-записи, определенной в параметре NAME. |
Раздел <body> включает в себя основное содержание веб-страницы − текст документа, изображения, таблицы и т. п. Элемент BODY должен встречаться в документе не более одного раза и может включать следующие атрибуты (таблица 2 [4]):
Таблица 2
Теги раздела < body >
|
Тег |
Назначение |
|
MARGINHEIGHT=число |
Определяет ширину (в пикселях) верхнего и нижнего полей документа. Работает только в браузерах Netscape |
|
TOPMARGIN= число |
Определяет ширину (в пикселях) верхнего и нижнего полей документа. Работает только в браузерах Internet Explorer |
|
MARGINWIDTH= число |
Определяет ширину (в пикселях) левого и правого полей документа. Работает только в браузерах Netscape |
|
LEFTMARGIN= число |
Определяет ширину (в пикселях) левого и правого полей документа. Работает только в браузерах Internet Explorer |
|
BACKGROUND= URL |
Определяет изображение для «заливки» фона (фонового рисунка). Значение задается в абсолютного или относительного адреса изображения (см. раздел Размещение рисунков) |
Продолжение таблицы 2
Теги раздела < body >
|
BGCOLOR=цвет |
Определяет цвет фона документа. MicrosoftInternetExplorerподдерживает 16 стандартных имен цветов (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, yellow, white) Другим способом является использование кода цвета в виде шестиразрядного шестнадцатеричного числа, задающее интенсивность красной (первые две цифры), зеленой (следующие две цифры) и синей (последние две цифры) составляющей. Интенсивность каждой составляющей в шестнадцатеричной форме изменяется от 00 до FF. При задании цвета в качестве значения атрибута некоторого тега перед шестнадцатеричным числом ставится символ #. Например, запись COLOR=«#0000FF» означает синий цвет Несмотря на принципиальную возможность задать миллионы цветов, надо учитывать, что браузеры отображают лишь 256 цветов, причем у каждого браузера своя цветовая палитра. В этой палитре браузер подберет цвет, наиболее близкий к заданному |
|
TEXT=цвет |
Определяет цвет текста в документе |
|
LINK=цвет |
Определяет цвет гиперссылок в документе |
|
ALINK=цвет |
Определяет цвет подсветки гиперссылок в момент нажатия |
|
VLINK |
Определяет цвет гиперссылок на уже просмотренные документы |
2.2 Синтаксис языка HTML
Базовой составляющей синтаксиса веб–страницы, написанной с применением HTML, выступает элемент. Элементы могут классифицироваться по разным критериям, например, по типу или своему назначению.
- Элементы по типу
- Пустые элементы
К ним относятся элементы, у которых нет закрывающего тега: <area>, <base>, <br>, <col>, <command>,<embed>, <hr>, <img>, <input>, <keygen>, <link>, <meta>, <param>, <source>, <track>, <wbr>.
- Необрабатываемые текстовые элементы
Предназначены для вывода скриптов или стилей, имеющих синтаксис отличный от HTML: <script>, <style>.
- RCDATA
Эти элементы могут содержать любой текст или спецсимволы, за исключением нестандартных спецсимволов, которые называются сомнительным амперсандом, например: &copi; или &T. К этой группе элементов относятся <textarea> и <title> [6].
- Инородные элементы
- Элементы, относящиеся к MathML или SVG.
- Обычные элементы
- Все остальные элементы, которые не входят в предыдущие группы [11].
- Элементы по назначению
- Корневой элемент
Элемент <html>.
- Метаданные документа
<head>, а также элементы, которые располагаются внутри него.
- Скрипты
Скрипты позволяют добавлять интерактивности на веб–страницу, в эту группу входят элементы, управляющие скриптами.
- Структурные элементы
Элементы, управляющие основными разделами веб–страницы, вроде <body>, <section>, <nav>, <article>, <aside> и др.
- Группирование контента
- Элементы, обрамляющие текст, списки, изображения.
- Текст
Элементы, изменяющие вид текста, например, делающие его жирным или курсивным, а также выделяющие текст по смыслу – аббревиатура, цитата, переменная, код и т.д. [12]
- Рецензирование
Элементы <ins> и <del> показывающие редактирования в документе.
- Внедряемый контент
Элементы, вставляемые на страницу в виде разных объектов – изображения, видео, аудио и др.
- Табличные данные
- Элементы для создания и управления видом таблиц.
- Формы
Формы являются одним из важных элементов любого сайта и предназначены для обмена данными между пользователем и сервером. В эту группу входят элементы для создания формы и её полей [14].
- Интерактивные элементы
Специальные виджеты, с помощью которых пользователь может получать дополнительную информацию или управление.
- Ссылки
Элементы <a> и <area>.
Ссылки являются основой гипертекстовых документов и позволяют переходить с одной веб-страницы на другую. Особенность их состоит в том, что сама ссылка может вести не только на HTML-файлы, но и на файл любого типа, причем этот файл может размещаться совсем на другом сайте. Главное, чтобы к документу, на который делается ссылка, был доступ. Иными словами, если путь к файлу можно указать в адресной строке браузера, и файл при этом будет открыт, то на него можно сделать ссылку. Для создания ссылки необходимо сообщить браузеру, что является ссылкой, а также указать адрес документа, на который следует сделать ссылку. Оба действия выполняются с помощью тега <a>. Общий синтаксис создания ссылок следующий [3].
<a href=«URL»>текст ссылки</a>
Атрибут href определяет URL (Universal Resource Locator, универсальный указатель ресурса), иными словами, адрес документа, на который следует перейти, а содержимое контейнера <a> является ссылкой. Текст, расположенный между тегами <a> и </a>, по умолчанию становится синего цвета и подчеркивается [6].
- Теги
Для обозначения начала и конца элемента применяются теги. Внутри тегов могут быть атрибуты со своими значениями, расширяющими возможности тегов, а также содержимое. Закрывающий тег похож на открывающий, но содержит слэш (/) внутри угловых скобок. Пустые элементы не имеют закрывающего тега и содержимого.
Атрибуты тегов расширяют возможности самих тегов и позволяют гибко управлять различными настройками отображения элементов веб–страницы. Общее количество атрибутов достаточно велико, но их значения, как правило, можно сгруппировать по разным типам, например, задающих цвет, размер, адрес и др. Например, элемент <img> добавляет на веб–страницу изображение, при этом адрес графического файла мы указываем через атрибут src [6].
- Доктайп
<!DOCTYPE> предназначен для указания типа текущего документа – DTD (document type definition, описание типа документа) для того, чтобы браузер понимал, с какой версией HTML он имеет дело. Если доктайп не указан, браузеры переходят в режим совместимости, в котором не работают многие возможности HTML5, а также возникают ошибки с отображением документа [8].
Доктайп не чувствителен к регистру и содержит всего два слова: <!DOCTYPE html>. Это ключевой элемент и обычно он располагается в первой строке кода.
- Комментарии
Некоторый текст можно спрятать от показа в браузере, сделав его комментарием. Хотя такой текст пользователь не увидит, он все равно будет передаваться в документе, так что, посмотрев исходный код, можно обнаружить скрытые заметки. Комментарии нужны для внесения в код своих записей, не влияющих на вид страницы. Начинаются они тегом <!– и заканчиваются тегом –>. Все, что находится между этими тегами отображаться на веб–странице не будет [17].
- Необязательные теги
Если какой–то тег не указан, это не означает, что он не представлен вообще. Существуют определённые правила, позволяющие не писать некоторые теги. В табл. 3 представлены теги, которые можно не указывать и условие, при котором это происходит.
Таблица 3
Необязательные теги
|
Тег |
Условие использования |
|
<html> |
|
|
<head> |
Если внутри имеются другие элементы. |
|
</head> |
|
|
<body> |
Если пустой, а также содержит что–то кроме пробела или комментария. |
|
</body> |
|
|
</li> |
Если после элемента следует <li> или он последний у родителя. |
|
</dt> |
Если после элемента следует <dt> или <dd>. |
|
</dd> |
Если после элемента следует <dd>, <dt> или он последний у родителя. |
|
</p> |
Если после элемента следует <address>, <article>, <aside>, <blockquote>,<dir>, <div>, <dl>, <fieldset>, <footer>, <form>, <h1>,...,<h6>, <header>, <hgroup>, <hr>, <menu>, <nav>, <ol>, <p>, <pre>, <section>, <table>, <ul>. |
|
</rt> |
Если после элемента следует <rt> или <rp>. |
Продолжение таблицы 3
Необязательные теги
|
</rp> |
Если после элемента следует <rt> или <rp>. |
|
</optgroup> |
Если после элемента следует <optgroup> или он последний у родителя. |
|
</option> |
Если после элемента следует <option>, <optgroup> или он последний у родителя. |
|
<colgroup> |
Если первым внутри идёт <col> и не следует перед другим элементом <colgroup>. |
|
</thead> |
Если после элемента следует <tbody> или <tfoot>. |
|
<tbody> |
Если первым внутри идёт <tr> и не следует перед <tbody>, <thead> или <tfoot> у которых опущен закрывающий тег. |
|
</tbody> |
Если после элемента следует <tbody> или <tfoot> или он последний у родителя. |
|
</tfoot> |
Если после элемента следует <tbody> или он последний у родителя. |
|
</tr> |
Если после элемента следует <tr> или он последний у родителя. |
|
</td> |
Если после элемента следует <td> или <th> или он последний у родителя. |
|
</th> |
Если после элемента следует <td> или <th> или он последний у родителя. |
Во второй главе работы было определено, какую структуру имеет HTML-документ и какой синтаксис составляет основу работы с ним. Благодаря умению использовать приведенные теги и элементы HTML-документа возможно создание и редактирование элементарных веб-страниц, а также развитие полученных навыков и знаний для более глубокого и разнообразного программирования.
ЗАКЛЮЧЕНИЕ
В ходе выполнения работы была достигнута цель работы – рассмотрены основы программирования на языке HTML. Для достижения данной цели были выполнены следующие задачи:
- Рассмотрена история создания и развития HTML.
- Приведено краткое описание языка HTML.
- Охарактеризована структура HTML документа.
- Проанализирован синтаксис языка HTML.
Обзор основ программирования на языке HTML показал, что данный язык является достаточно простым в освоении. Возможно, частично благодаря этому данный язык разметки гипертекста до сих пор широко распространен. Он используется как в учебных целях для изучения структуры и основ синтаксиса в веб-программировании, так и для создания самостоятельных современных сайтов.
Тем не менее, время не стоит на месте, и к сегодняшнему дню уже создано немало современных средств веб-программирования – новых языков программирования, специальных сред с использованием шаблонов и т.д. В связи с этим в перспективе дальнейшее распространение HTML как языка веб-программирования не просматривается, так как, перестав развиваться, он скоро окончательно уступит место современным технологиям. Несмотря на это, использование HTML в учебных целях для знакомства с основами программирования является неотъемлемой частью обучения любого веб-программиста.