Реферат Курсовая Конспект
Структура HTML-документа - Конспект Лекций, раздел Информатика, Конспект лекций по курсу Информационные технологии в предметной области. Основные понятия и определения ИТ Html Является Стандартным Языком, Предназначенным Для Создания Гипертекстовых...
|
HTML является стандартным языком, предназначенным для создания гипертекстовых документов в среде WWW. Первую версию HTML на базе языка SGML разработал сотрудник Европейской лаборатории физики элементарных частиц Тим Бернерс-Ли. Стандартизацией языка HTML занимается международная организация - Консорциум Всемирной Паутины (World Wide Web Consortium).
HTML позволяет:
- издавать сетевые документы с заголовками, текстом, таблицами, списками, фотографиями, и т.п.
- получать информацию из Сети через ссылки гипертекста по нажатию кнопки;
- создавать формы для посылки запросов на удаленные компьютеры, чтобы производить поиск информации, осуществлять бронирование, заказывать товары и т.п.;
- включать электронные таблицы, видео клипы, аудио клипы, и другие программные приложения непосредственно в их документы.
В коде документа HTML находится не только сама информация, которую пользователь увидит на веб-странице, но и некоторые инструкции о том, как браузер пользователя будет обрабатывать эту информацию. Страница, которую пользователь видит в своем браузере, может состоять из множества разных файлов (изображений, анимационных роликов, сценариев JavaScript, апплетов и т. д.)
Документы HTML хранятся в виде файлов с расширением .htm или .html.
В HTML текст размечается тегами (ключевые слова языка, заключенные в угловые скобки «<» и «>»), которые чаще их употребляют парами, чтобы отметить начало и конец некоторого фрагмента текста. Закрывающий тег отличается от открывающего наличием косой черты «/». Тэги HTML сообщают браузеру информацию о структуре и особенностях форматирования web-страницы.
Например, тэг <p>…<⁄p> обозначает, что элемент является абзацем обычного текста, тэг <ul>…<⁄ul> – что элемент является перечнем, теги <h1> … </h1>, … <h6> … </h6> – определяют стили заголовков и т. д.
В HTML есть тэги, управляющие внешним видом отдельных элементов: например, тэг <i>…<⁄i> выделяет текст курсивом, тэг <font>…<⁄font> изменяет различные параметры шрифта, а тэг <br> вставляет разрыв строки.
У открывающего может быть атрибут (дополнительный или обязательный параметр, определяющий способ применения тега), например у тега <p> атрибут align (выравнивание), который принимает значения center, right или значение по умолчанию left.
Например атрибут align задает центрирование абзаца и заголовка для тегов <p align=center> и <h1 align = center>; атрибуты border и width – границу и ширину таблицы, которая определена тегом <Table border="1" width="100%" >…</Table >
Метка <html> должна открывать HTML-документ, а метка </html> – закрывать HTML-документ. Пара меток <head> ... </head> указывает на начало и конец заголовка документа. Пара меток <body>...</body> указывает на начало и конец тела HTML-документа (определяет содержание документа) (рисунок 7).
Рисунок 7 – Структура html-документа
Область <head> ... </head> включает следующее элементы:
<title> …</title> – обязательный элемент (название страницы или краткое описание);
<script>… </script> – необязательный элемент (инструкции на языке Java или VBScript);
<style>… </style> – стилевая таблица;
<meta>… </meta> – областьметаданных – описание документа (задание кодировки, ключевых слов для индексации поисковыми системами, информацию об авторе документа и др.).
Например,
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> – документ хранится в кодировке кириллица – windows-1251;
<meta http-equiv= "Autor" content=" Петров"> – автор Петров.
Область <body>…</body> – тело документа включает: текст, изображения, гипертекстовые ссылки, средства воспроизведения мультимедиа-информации и другие элементы, которые будут отображаться на web-странице в окне браузера.
Теги <ol>...</ol> – означают упорядоченный (нумерованный) список, каждый элемент списка задается с помощью тега <li>. Тег <ol> может включать атрибуты: type (определяющий стиль нумерации) и start (определяющий начальный номер первого элемента в упорядоченном списке).
Пример создания нумерованного списка:
В HTML переход от одного фрагмента текста к другому задается с помощью метки вида:
<a href="[адрес перехода]"> фрагмент текста</a>
Атрибут target (путь) тега <a> – определяет окно, в которое должен быть загружен документ, используется только совместно с параметром href.
Для визуализации подсказки ссылки используется атрибут тега <a> title:
<a href="[адрес перехода]" title=" имя ссылки"> Ссылка</a >
Если ссылка задается на внешний ресурс, тогда значение атрибута href содержит протокол, путь и, если необходимо, полный адрес ресурса:
<a href="протокол://путь/:порт>… </a>
Пример использования гиперссылок в html-документе:
Для встраивания изображения в html-документ используется метка
<img src="[имя файла]">. Метка может также включать атрибуты: alt, align, width и heigh. Например, код включающий в html документ изображения picture.gif, хранящееся в одном каталоге с самим html-документом выглядит следующим образом:
Таблицы в html-документах используют для представления информации в табличном виде, выравнивания частей страницы друг относительно друга (колонки), для решения задач дизайна: управление цветовым оформлением, размещение рядом рисунков, текста и других объектов, выделение фрагментов текста, задание отступов на странице и др.
Таблица начинается с метки <table> и заканчивается меткой </table>. Метка <table> может включать несколько атрибутов:
- align – устанавливает расположение таблицы по отношению к полям документа (допустимые значения: left, center, right);
- width – ширина таблицы (можно задать в пикселах или в процентах от ширины страницы);
- border – устанавливает ширину внешней рамки таблицы и ячеек в пикселах (например, border=4). Если атрибут не установлен, таблица показывается без рамки;
Таблица может иметь заголовок (<caption> ... </caption>), хотя заголовок не является обязательным. Каждая строка таблицы начинается с метки <tr> и заканчивается меткой </tr>. Каждая ячейка таблицы начинается с метки <td> и заканчивается меткой </td>.
Пример кода таблицы:
Использование каскадных таблицы стилей (CSS)
CSS (Cascading Style Sheet) – каскадные таблицы стилей позволяют web-разработчику отделить процесс форматирования html-страницы от заполнения ее конкретным содержанием, возможность подготовить документ, а потом независимо редактировать используемые в нем стили.
Деление стилей по способу применения:
1. Inline Style – задание стилей для отдельного фрагмента документа;
2. Embedding Style – встраивание таблицы стилей в документ при помощи парного тега <style>;
3. Linking Style – связывание документа с таблицей стилей, которая хранится в отдельном файле.
Задание стилей для отдельного фрагмента документа производится установкой атрибута style тега: <tag style = "attribute: value; attribute: value;… "></tag>.
Пример встраивания стиля в теги <div> и <h1>:
Создание html-документа со встроенной таблицей стилей выполняется при помощи парного тега <style>…</style>, который размещается в блоке head.
Синтаксис тега <style>:
<style disabled media=screenïprintïall title=text type="text/css">
Type - единственный обязательный атрибут тега <style>. Этот атрибут задает тип mime (Multipurpose Интернет Mail Extension, стандарт электронной почты). Для того чтобы браузеры, не поддерживающие встроенные таблицы стилей, могли их игнорировать, атрибуту присваивается значение text/css. Инструкции стилей набираются внутри тегов комментариев для того, чтобы браузеры, не распознающие таблицы стилей, не выводили содержимое тега <style> в окне браузера.
Пример встроенной в документ таблицы стилей:
Таблицу стилей можно создать на основе отдельного css-файла, с последующим применением его к документам. Для связывания html-файла с таблицей стилей используется тег <link>, который располагаться в область <head>.
<Link Rel="Stylesheet" Type="Text/css" src="http://имя_сервера/имя_файла/css">
Фрагмент кода стилевого файла (например, styles1.css):
Для форматирования web-страниц с помощью css-файла (styles1.css), следует разместить ссылку на стилевой файл в область head каждого форматируемого html-документа. Например, если стилевой файл styles1.css и html-страницы сохранены в одном каталоге, то ссылка будеть иметь вид:
<link rel="stylesheet" href="styles1.css" type="text/css">.
Если разместить ссылку на стилевой файл на всех web-страницах, к которым необходимо применить данные форматы, тогда при изменении форматов в стилевом файле, выполнится замена форматов на всех связанных страницах.
– Конец работы –
Эта тема принадлежит разделу:
Конспект лекций по курсу Информационные технологии в предметной области для... Составитель ст преподаватель кафедры МЭММБИ В В Ошкало...
Если Вам нужно дополнительный материал на эту тему, или Вы не нашли то, что искали, рекомендуем воспользоваться поиском по нашей базе работ: Структура HTML-документа
Если этот материал оказался полезным ля Вас, Вы можете сохранить его на свою страничку в социальных сетях:
Твитнуть |
Новости и инфо для студентов