Файл: Основы программирования на языке HTML (ПО для создания и просмотра HTML документа).pdf

Тег <area> описывает только одну активную область в составе карты изображений на стороне клиента. Элемент не имеет закрывающего тега. Если одна активная область перекрывает другую, то будет реализована первая ссылка из списка областей.

    <map name="имя_карты">

        <area атрибуты>

    </map>

Таблицы

Благодаря универсальности таблиц, большому числу параметров, управляющих их видом, таблицы надолго стали определенным стандартом для верстки веб-страниц. Таблица с невидимой границей представляет собой словно модульную сетку, в блоках которой удобно размещать элементы веб-страницы. Тем не менее, это не совсем правильный подход, ведь каждый объект HTML определен для своих собственных целей и если он используется не по назначению, причем повсеместно, это значит, что альтернатив нет. Так оно и было долгое время, пока на смену таблицам при верстке сайтов не пришли слои. Это не значит, что слои теперь используются сплошь и рядом, но тенденция уже наметилась четко — таблицы применяются для размещения табличных данных, а слои — для верстки и оформления.

Создание таблицы

Таблицы состоят из строк и столбцов ячеек, которые могут содержать текст рисунки и другие элементы. Обычно таблицы используются для упорядочения и представления данных, однако возможности таблиц этим не ограничиваются. C помощью таблиц можно верстать макеты страниц, расположив нужным образом фрагменты текста и изображений. В настоящее время «табличная» верстка лидирует при создании различных E-mail рассылок и для оформления электронных писем, т.к. поддерживается практически всеми почтовыми программами.

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

Внутри тега <table> можно использовать целую группу различных тегов, которые структурируют содержимое таблицы.

Тэги <thead>, <tbody>, <tfoot>. В современной спецификации HTML, таблицу принято разделять на 3 логические части: заголовок, тело и нижний колонтитул. При этом заголовок будет отображаться всегда в верхней части таблицы, нижний колонтитул в нижней, а тело таблицы между ними, вне зависимости от их положения в коде.

Содержимое таблицы в гипертекстовых документах подразделяется на строки, а строки, в свою очередь делятся на ячейки. Строки обозначают тегами <tr></tr>. Ячейки обозначают тегами <td></td>. В секции заголовка ячейки принято обозначать тегами <th></th> в таких ячейках текст выделяется полужирным начертание.

Атрибуты тегов ячеек таблицы:

colspan – позволяет объединить определенное количество ячеек по горизонтали. Значением атрибута должно являться целое число, определяющее количество этих ячеек.

rowspan – аналогично атрибуту colspan задает количество объединяемых ячеек по вертикали.

Тег <caption><caption> позволяет создать подпись к таблице.

Тег <colgroup></colgroup> используется для объединения одного или нескольких столбцов, выделяя логически однородные сегменты.

Пример кода таблицы:

<table>

    <caption>Рыбы в речке</caption>

    <thead>

        <tr>

            <th>№ п/п</th>

            <th>Наименование</th>

            <th>Количество</th>

        </tr>

    </thead>

    <tfoot>

        <tr>

            <td colspan="2">Итого:</td>

            <td>58</td>

        </tr>

    </tfoot>

    <tbody>

        <tr>

            <tr>

                <td colspan="3">Хищники</td>

            </tr>

            <tr>

                <td>1</td>

                <td>Щука</td>

                <td>1</td>

            </tr>

            <tr>

                <td>2</td>

                <td>Окунь</td>

                <td>5</td>

            </tr>

            <tr>

                <td colspan="3">Мирные</td>

            </tr>

            <tr>

                <td>3</td>

                <td>Карась</td>

                <td>2</td>

            </tr>

            <tr>

                <td>4</td>

                <td>Уклейка</td>

                <td>50</td>

            </tr>

        </tr>

    </tbody>

</table>

Результат открытия такого документа в браузере можно увидеть на рисунке (Рисунок 4):

Рисунок 4

Блоки

В спецификации языка до HTML5 использовался только один блочный элемент: <div></div>. Данный тег обладает свойствами блочных элементов, описанными выше. Используется для разметки информации, представленной в документе. В спецификации HTML5 количество блочных элементов было существенно расширено за счет семантических тегов.

Формы

Формы – это часть документа HTML позволяющая пользователю взаимодействовать с программным обеспечением сервера. При помощи форм можно передавать на сервер различную информацию, файлы, картинки и т.п. Все элементы формы в документе HTML располагаются между парными тегами: <form></form>. Для тега <form> существует два атрибута: action и method. Первый указывает на адрес скрипта, который будет обрабатывать отправленные пользователем данные. Второй указывает метод передачи данных на сервер (GET или POST). Метод GET используется по умолчанию и передает данные непосредственно в строке URI. В этом случае данные открыты и видны пользователю, а так же ограниченны длинной строки URL (2048 символов). Метод POST передает данные в теле запроса браузера к серверу.

Внутри формы используются следующие элементы: <input>, <label> и <fieldset>. Так же в спецификации языка HTML5 можно использовать внутри формы элемент <button>, данный элемент, при использовании в форме, тождественен по своему действию элементу <input type=”submite”>.

Тег <input> - основной элемент формы. Позволяет указывать тип передаваемой информации и ассоциировать ее с определенной переменной. Основным атрибутом тега является атрибут type. Этот атрибут указывает не только тип передаваемой информации, но и особенности внешнего отражения элемента внутри формы. Основными значениями type являются:

• text – текстовое поле для ввода
• radio - радиокнопка
• checkbox – кнопка флажок
• submit – кнопка отправки формы
• reset – кнопка сброса введенной информации
• file – кнопка открытия диалога выбора файла для загрузки
• hidden – скрытое поле ввода.

В стандарте HTML5 количество значений типов было серьезно расширено, появились такие значения type как:

• color – выбор цвета в палитре
• date – ввод даты в формате день, месяц, год
• datetime-local - ввод даты и времени
• email – поле для ввода электронной почты
• range – бегунок выбора значения
• tel - поле для ввода телефона
• и другие

Тэг <fieldset> - позволяет визуально разделять элементы формы на группы и присваивать им общее описание. Общее описание задается внутри тега <fieldset> при помощи парного тега <legend></legend>. Например следующий код покажет результат, приведенный на рисунке (Рисунок 5).

<form action="script.php" method="POST">

        <fieldset>

            <legend>Введите имя и фамилию</legend>

            <label for="fname">Ваше имя:</label>

            <input type="text" name="fname" id="fname"

placeholder="Имя">

            <label for="lname">Ваша фамилия:</label>

            <input type="text" name="lname" id="lname"

placeholder="Фамилия">

        </fieldset>

Рисунок 5

Тэг <label> - парный тег заключающий в себе текстовое описание поля. По сути, является обычным текстом, единственным отличием от которого является атрибут for. В значении данного атрибута указывают уникальный идентификатор поля input, к которому относится метка. При клике по тексту метки фокус автоматически устанавливается на соотнесенное с ним поле.

Краткое описание HTML5

В 2014 году консорциум всемирной сети выпустил последнюю на текущий момент спецификацию языка гипертекстовой разметки – HTML5. Как я уже говорил, данная версия была существенно расширена. Появилось две дополнительные группы тегов: семантические и мультимедийные.

Семантические теги

Данная группа тегов предназначена для указания назначения той или иной части документа, как для браузера или поисковой системы, так и для разработчика веб-ресурса. Ранее для разметки страницы было принято использовать блочные элементы div, а их назначение указывалось при помощи селекторов каскадных таблиц стилей. Например, следующий код указывал? что документ состоит из заголовка, панели навигации, основной части с секцией «хлебных крошек» и основным текстовым содержанием, и нижнего колонтитула.

    <div class="header"></div>

    <div class="nav"></div>

    <div class="main">

        <div class="breadcrumbs"></div>

        <div class="article"></div>

    </div>

    <div class="footer"></div>

Используя семантические теги HTML5, данный фрагмент можно записать так:

    <header></header>

    <nav></nav>

    <main>

        <section class="breadcrumbs"></section>

        <article></article>

    </main>

    <footer></footer>

Далее, в таблице, указано назначение семантических тегов HTML5.

Мультимедийные теги

В спецификации языка HTML5 появилась возможность использовать в документе мультимедийный контент (видео и аудио файлы).для этого используются парные теги <video> или <audio>.

Первый используется для вставки в документ видео файлов. Имеет следующие атрибуты:

Второй используется для вставки на страницу аудиофайлов и поддерживает аналогичный видео набор атрибутов.

Следует помнить, что разные браузеры поддерживают разные форматы сжатия видео и аудио (т.н. кодеки). Поэтому, для обеспечения корректно работы этих элементов в разных браузерах, необходимо использовать источники мультимедиа в разных форматах. Например, для аудио целесообразно одновременно использовать форматы wav и mp3.

Краткое описание каскадных таблиц стилей CSS

По мере развития языка HTML визуальное оформление документов становилось все более сложным. Появилась потребность в универсальном инструменте для работы с оформлением веб-документов. Таким инструментом стали каскадные таблицы стилей.