HTML - язык разметки гипертекста
HTML как средство разметки документов, главные задачи использования. Порядок использования таблицы стилей. Сущность тегов, их классификация. Значение элементов и структура HTML-документа. Создание заголовка, гипертекстовых ссылок и тела документа.
| Рубрика | Программирование, компьютеры и кибернетика |
| Вид | контрольная работа |
| Язык | русский |
| Дата добавления | 17.03.2013 |
| Размер файла | 19,4 K |
Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже
Студенты, аспиранты, молодые ученые, использующие базу знаний в своей учебе и работе, будут вам очень благодарны.
Размещено на http://www.allbest.ru/
Содержание
Введение
1. Термины
2. Заголовок документа
3. Тело документа
4. Гипертекстовые ссылки
Заключение
Список литературы
Введение
HTML - это не язык оформления документов, это, в первую очередь, средство их разметки. Первоочередная задача - разметить текст, описать с помощью - «tag» (тэгов или тагов, как больше нравится) его структуру, определив: «Это - параграф, это - цитата, это - список, а это - раздел».
В HTML для того чтобы, например, создать заголовок абзаца, недостаточно выделить слово жирным шрифтом. Нужно с помощью соответствующего HTML-кода определить, что это слово - заголовок, возложив задачу оформления на браузер.
Дело в том, что документы HTML предназначены не только для отображения на экране. Нет. Вся прелесть заключается в возможности его отправки практически на любое устройство вывода. Представьте, что будет с обычным текстом при попытке, скажем, прочитать его вслух с помощью карманного голосового компьютера. Куда денется оформление? Наверняка исчезнет - ведь машина не в состоянии отобразить голосом слово подчеркнутым, увеличенным или курсивным шрифтом.
Но если вместо оформления документа будет описана его структура, то текст заголовков будет произнесен правильно (например, с изменением интонации), между абзацами компьютер выдержит паузу, а цитаты прочитает другим голосом.
Язык HTML содержит достаточное количество элементов, позволяющих оформить документ по вашему вкусу. Если вас не устраивает способ оформления документа браузером (хочется изменить шрифт, предложенный по умолчанию, или сделать его помельче - добавьте HTML-тэги форматирования текста.
Если и после этого внешний вид документа вас не устраивает, нанесите последний штрих: воспользуйтесь таблицами стилей (CSS).
Hyper Text Markup Language (HTML) - Язык Гиперактивной Текстовой Разметки, является стандартным языком, предназначенным для создания документов в WEB.
HTML большой. Поэтому в реферате рассматриваются только вопросы создания заголовков, оформления тела документа и добавления гиперссылок.
1. Термины
Тэг - оформленная единица HTML-кода.
Например, <HTML>, <TITLE>, <HEAD>, <BODY>, <FONT ...>, <SPAN ...>, <P> и т.д.
Тэги бывают начальными (открывающими) и конечными (закрывающими, начинающимися со слэша - знака «/»).
Например, вышеуказанным тэгам соответствуют закрывающие тэги </HTML>, </TITLE>, </HEAD>, </BODY>, </FONT>, </SPAN>, </P>.
Элемент - понятие, введенное для удобства.
Например, элемент HEAD состоит из двух тэгов - открывающего <HEAD> и закрывающего </HEAD>.
Следовательно, элемент - более емкое понятие, обозначающее пару тэгов и участок документа между тэгами, на который распространяется их влияние.
Структура HTML документа
Для того, чтобы текстовый файл преобразовался в HTML-файл, поменять его расширение с «*.txt» на «*.html» недостаточно. Надо применить «правило первой строки»:
Все что находится между скобками комментария (<!--) и (-->), браузером не отображается.
Каждый HTML-документ, отвечающий спецификации HTML какой-либо версии, обязан начинаться со строки декларации версии HTML <!DOCTYPE>, которая обычно выглядит так:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN>
Это поможет браузеру определить, как правильно интерпретировать документ.
В данном случае мы говорим браузеру, что наш документ HTML соответствует международной спецификации «версии 4.0».
На самом деле одной строки для создания документа мало. После объявления версии и типа документа необходимо обозначить его начало и конец.
Это делается с помощью тэга-контейнера <HTML>. Необходимо отметить, что любой HTML-документ открывется тэгом <HTML> и им же закрывается </HTML>.
Затем, между тэгами <HTML> и </HTML> следует разместить заголовок и тело:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN>
<HTML>
<HEAD>
<TITLE>Заголовок документа</TITLE>
<!--... Техническая информация ...-->
</HEAD>
<BODY>
Тело документа - «Полезная нагрузка: информация, графика, таблицы и т. д.»
</BODY>
</HTML>
Из схемы видно, что документ состоит из двух основных блоков - «заголовка» и «тела документа». Заголовок определяется с помощью элемента HEAD, а тело - элементом BODY.
Заголовок содержит «техническую» информацию о документе, хотя чаще всего используется только для обозначения его названия.
Тело документа - содержит все то, что отображается на странице: текст, картинки, таблицы.
Вывод такой: большинство ваших HTML-экспериментов будет проводиться в пространстве между тэгами <BODY> и </BODY>.
Cхематически, приведенный выше пример будет выглядеть так:
Одной из наиболее распространенных ошибок было и остается размещение заголовка в теле документа или наоборот, что совершенно недопустимо.
Сначала закрываем заголовок </HEAD>, затем открываем тело <BODY>.
2. Заголовок документа
Заголовок cоздается с помощью элемента HEAD, между тэгами которого размещаются элементы, содержащие техническую информацию о документе.
Элементы, относящиеся к заголовку: HEAD, TITLE, BASE, STYLE, LINK, META.
H E A D
Определяет начало и конец заголовка документа. Является контейнером для элементов, содержащих техническую информацию о документе.
Пример:
<HTML>
<!-- Начинаем заголовок... -->
<HEAD>
<TITLE>Учебник HTML</TITLE>
</HEAD>
<!-- ...закончили. Дальше тело документа -->
<BODY>
... Текст, инфо, картинки, таблицы и т. д...
</BODY>
</HTML>
Все что находится между скобками комментария (<!--) и (-->), браузером не отображается.
T I T L E
Определяет имя всего документа. Имя, как правило, отображается в заголовке окна браузера. Данный элемент обязателен для любого HTML-документа и может быть указан не более одного раза.
Пример:
<HTML>
<HEAD>
<TITLE>Учебник HTML</TITLE>
</HEAD>
<BODY>
... Текст, инфо, картинки, таблицы и т. д....
</BODY>
</HTML>
B A S E
Указывает базовый адрес текущего документа, который станет отправной точкой для расчета относительных адресов внутри документа.
Тэг ВАSЕ связан с формой представления гипертекстовой ссылки в форме URL. Дело в том, что спецификация URL определяет две формы адресации документов: полную и неполную.
НТМL разрешает использовать как полную форму адреса URL, так и неполную. Но для того, чтобы использовать вторую форму спецификации, ее надо на чем-то базировать, т.е. задавать базовый адрес, который можно было бы использовать для формирования полной формы URL из неполной.
Тэг ВАSЕ позволяет определить эту базу.
Пример:
<HTML>
<HEAD>
<TITLE>Учебник HTML</TITLE>
<BASE HREF="http://name.domen.ru/">
</HEAD>
<BODY>
<!--гипертекстовая ссылка вида:-->
<A HREF="/uchebnik/kniga.html">Учебник</a>
<!--будет расширена до:-->
<A HREF="http://name.domen.ru/uchebnik/kniga.html">Учебник</a>
<!--Это же касается и других импортируемых в документ тэгов.
Графический образ, монтируемый в документ по команде:-->
<IMG SRC="/image/kartinka.gif">
<!--будет найден по адресу:-->
<A HREF="http://name.domen.ru/image/kartinka.gif">Картинка</a>
</BODY>
</HTML>
Содержание тэга ВАSЕ интерфейсом пользователя прямо не отображается.
Параметр TARGET, позволяет открывать в документе все переходы по ссылкам в новом (отдельном) окне или в одном и том же фрейме.
<HTML>
<HEAD>
<TITLE>Учебник HTML</TITLE>
<BASE HREF="http://name.domen.ru/" target=_blank>
</HEAD>
<BODY>
</BODY>
</HTML>
S T Y L E
Используется для вставки в документ
таблицы стилей (CSS - Cascade Style Sheet).
Пример:
<HTML>
<HEAD>
<TITLE>Учебник HTML</TITLE>
<!-- Вставляем таблицу стилей... -->
<style type="text/css"><!--
.p { font-size:11; color:#0000FF; font-family:Verdana; }
.h2 { font-family:Times New Roman, serif; color:#FF0000; }
.a { text-decoration:none; }
--></style>
<!-- Вставка таблицы закончена... -->
</HEAD>
<BODY>
... Текст, инфо, картинки, таблицы и т. д...
</BODY>
</HTML>
L I N K
Элемент LINK описывает взаимосвязь документа с другими документами на сайте, указывая его место в иерархической структуре сайта. Элемент не имеет конечного тэга.
В заголовке может содержаться несколько элементов LINK.
Элемент LINK используется Web-мастерами чаще всего только для внедрения CSS из отдельного файла.
Почти все браузеры игнорируют информацию о положении документа в структуре сайта.
Пример:
<HTML>
<HEAD>
<TITLE>Учебник HTML</TITLE>
<LINK REL="stylesheet" TYPE="text/css" HREF="name.css">
</HEAD>
<BODY>
... Текст, инфо, картинки, таблицы и т. д...
</BODY>
</HTML>
М Е Т А
Элемент МЕТА используется для техописания документа, которое представляет собой метаданные в виде пары «имя-значение».
С помощью этого элемента в заголовок документа внедряется дополнительная полезная информация, невидимая для пользователя, но порой просто незаменимая для правильной индексации страницы роботами поисковых серверов.
Элемент не имеет конечного тэга.
Параметры:
NAME - определяет имя мета-записи.
HTTP-EQUIV - определяет имя мета-записи. Практически аналогичен параметру NAME, но используется лишь в случае необходимости передачи дополнительной информации в HTTP-заголовке.
CONTENT - присваивает значение мета-записи, определенной в параметре NAME (или HTTP-EQUIV).
Пример:
<HTML>
<HEAD>
<TITLE>Учебник HTML</TITLE>
< META http-equiv="Content-Type" content="text/html; charset=Windows-1251">
< META http-equiv="Content-Language" content="ru">
< META http-equiv="Cache-Control" content="no-cache">
< META name="Keywords" content="Ключевые слова">
< META name="Description" content="Описание страницы">
< META name="Copyright" content="© 01.01.200? by Администратор">
</HEAD>
<BODY>
... Текст, инфо, картинки, таблицы и т. д...
</BODY>
</HTML>
3. Тело документа
BODY - указывает начало и конец тела HTML-документа.
Между начальным и конечным тэгами содержится текст документа, изображения и таблицы, все HTML-элементы, отвечающие за отображение документа, управление им и гипертекстовые ссылки.
Элемент BODY должен встречаться в документе не более одного раза.
TOPMARGIN - определяет ширину верхнего и нижнего полей документа.
LEFTMARGIN - определяет ширину левого и правого полей документа.
MARGINHEIGHT - определяет ширину верхнего и нижнего полей документа.
MARGINWIDTH - определяет ширину левого и правого полей документа.
BACKGROUND - определяет изображение для «заливки» фона. Значение задается в виде полного URL или имени файла с картинкой в формате gif или jpg.
BGCOLOR - определяет цвет фона документа.
TEXT - определяет цвет текста в документе.
LINK - определяет цвет гиперссылок в документе.
ALINK - определяет цвет подсветки гиперссылок в момент нажатия.
VLINK - определяет цвет гиперссылок на документы, которые вы уже просмотрели.
Значения параметров BGCOLOR, TEXT, LINK, ALINK и VLINK задаются либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов.
Пример:
<HTML>
<HEAD>
<TITLE>Учебник HTML</TITLE>
<!--... Техническая информация...-->
</HEAD>
<BODY BACKGROUND="images/kartinka.jpg"
BGCOLOR="#202020"
TEXT="#FFFFFF"
LINK="#FF0000"
VLINK="#505050"
MARGINHEIGHT="30"
TOPMARGIN="30"
LEFTMARGIN="40"
MARGINWIDTH="40">
</BODY>
тег гипертекстовый html
4. Гипертекстовые ссылки
Ссылки на другие документы в HTML создаются с помощью элемента - A:
<A HREF="URL(адрес)">ссылка</A>.
Элемент A применяется, если ссылкой планируется сделать часть текста или целое изображение. Навигационные карты имеет смысл применять, если ссылкой будет часть изображения. Элемент A, самый необходимый элемент, без которого глобальная сеть Интернет просто немыслима в силу своей глобальности.
Для записи гипертекстовой ссылки используется контейнер <А ***> ... </А>, который называют «якорь» (аnchor).
Якорь имеет несколько атрибутов, главным из которых является НREF (НуреrТехt Reference).
Простую ссылку можно записать в виде:
<А НREF="http://login.domen/file.html">Это ссылка</А>
Где значением атрибута HREF является адрес документа «file.html» на машине
«login.domen.ru», доступ к которой осуществляется по протоколу НТТР.
Форма записи этого адреса называется универсальным локатором ресурсов (Universe Resource Locator) и является составной частью технологии WWW.
Содержание контейнера А, заключенное между тэгом начала и тэгом конца, выделяется в цветом, определенным для контекстных гипертекстовых ссылок.
Одной из особенностей создания Web-сервера является то, что представленную на нем информацию желательно разбить на отдельные части, которые могут быть выведены на экран без необходимости его прокрутки.
Связи между отдельными частями и осуществляются с помощью гипертекстовых ссылок.
Другой формой использования тэга А является определение точек внутри текста, на которые можно сослаться: Такой метод используется в случае когда документ нельзя поделить на части и необходимо быстро передвигаться из оглавления по тексту. Параметр NAME дает нам такую возможность.
Необходимо латиницей или цифрами создать слово-указатель там, куда надо сделать переход внутри документа: <А NАМЕ="ukazatel">.
Затем в ссылке для перехода сделать пометку на указатель:
<А НREF="file.html#ukazatel">Переход</A>
В результате по одной и той же странице передвигаемся с помощью ссылок.
Параметр TARGET, позволяет открыть содержимое документа в новом окне:
<А НREF="file.html" target=_blank>Ссылка</A>
Элемент A не может быть вложенным в себе подобные, то есть недопустимы конструкции:
<A HREF="ссылка-1.html">
<A HREF="ссылка-2.html">Вторая ссылка</A>
</A>
Заключение
В данном реферате рассмотрено далеко не всё, что может HTML, но для ознакомления этого вполне достаточно.
Конечно, можно не писать код вручную, а воспользоваться специальными программами, которые автоматически генерируют код страниц, в то время как вы только лишь "рисуете" их. Но такие программы не всегда делают то, что нужно, и зачастую в их коде содержится множество ошибок. А для того, чтобы проверить HTML документ на наличие ошибок, всегда можно воспользоваться валидацией. Достаточно зайти на http://validator.w3.org/ и ввести адрес проверяемой страницы.
Список литературы
1. Учебник HTML http://www.reatron.com/retron/online/html/glava.php
2. Э.Шафран Самоучитель: Создание WEB-страниц. Питер, 2001г.
3. Как создать свой сайт? http://www.html-consult.net/
4. Учебник HTML http://sitehelp.ru/htmlbook.php
Размещено на Allbest.ru
...Подобные документы
Понятие об html. Структура файла в формате html. Отличительный признак html-документа. Гипертекстовые ссылки. Создание документов в стандарте html. Заголовки. Форматирование текста и изменение стилей. Фреймы.
реферат [23,7 K], добавлен 17.08.2007Общая характеристика языка разметки гипертекста Hypertext Markup Language. Структура HTML-документа. Обзор основных возможностей HTML. Элементы современного дизайна Web-страниц. Анализ практического применения HTML (на примере обучающих программ).
курсовая работа [47,9 K], добавлен 24.11.2012Цель и место размещения документа Web. Язык гипертекстовой разметки. Сценарий и структура Web-документа. Основные редакторы гипертекста. Создание документов в стандарте HTML. Создание заголовков, форматирование и изменение стиля, нумерация списков.
реферат [34,4 K], добавлен 22.11.2009Определение понятия гипертекста. Основные части документа SGML. История создания стандартного языка разметки документов HTML. Отличия синтаксиса XHTML от HTML. RSS - семейство XML-форматов для описания лент новостей. Применение языка разметки KML.
презентация [4,3 M], добавлен 15.02.2014Понятие, сущность и особенности применения языка HTML, а также структура его документа. Рекомендации по созданию сайтов в интернете. Общая структура и порядок оформления гипертекстов, записанных в языке HTML, примеры отображения их в браузере компьютера.
контрольная работа [29,4 K], добавлен 12.09.2010Структура HTML–документа. Синтаксис записи тега. Обозначение цветов в шестнадцатеричной системе счисления. Формат задания и параметры таблицы в документе, параметры её заголовка, строк и ячеек, группирование столбцов. Наследование свойств выравнивания.
курсовая работа [318,8 K], добавлен 03.01.2014Специальные разметочные указатели (теги) языка HTML. Основные правила написания тегов. Структура HTML-файлов. Внесение изменений и способы обновления Web-сайта. Необходимые атрибуты для создания на Web-странице бегущей строки и вставки рисунков.
презентация [439,3 K], добавлен 29.01.2014Создание сайта при помощи HTML и CSS. Язык гипертекстовой разметки HTML и таблица стилей CSS. Основные понятия об этих языках, этапы и алгоритмы программного обеспечения. Добавление стилей в документ. Свойства элементов, принцип построения Web-страницы.
курсовая работа [2,9 M], добавлен 12.01.2016Цели, задачи и компоненты информационной технологии управления. Разработка структуры сайта и программный код работы в HTML–редакторе: создание титульной страницы, документа с фреймами, связь информационных документов с помощью гипертекстовых ссылок.
курсовая работа [34,3 K], добавлен 11.08.2011HTML - язык разметки гипертекста как набор инструкций для программы-просмотрщика (броузера). Понятие и назначение тэгов, их функции и параметры. Смысл понятий "параметр" и "значение параметра". Правила работы с тэгами, создание ссылок с их помощью.
статья [16,8 K], добавлен 10.05.2009Hyper Text Markup Language (html) как стандартный язык для создания гипертекстовых документов в среде web. Тэги списков, гипертекстовые ссылки, графика внутри документа, специальные тэги html и таблицы. Планирование фреймов. Этапы создания сайтов.
контрольная работа [126,9 K], добавлен 18.11.2010HTML как язык разметки гипертекста, его структура, элементы. Каскадные таблицы стилей, их разработка. Верстка: страницы как мы их видим. Новые технологии – HTML5, CSS3. LESS. Динамический язык стилевой разметки. Технологии упрощенной разметки HAML, SASS.
дипломная работа [3,4 M], добавлен 19.04.2013Разработки британского учёного Тима Бернерсом-Ли. HTML как язык для обмена научной и технической документацией, пригодный для использования людьми, не являющимися специалистами в области вёрстки. Структура HTML-документов и основные теги на языке HTML.
курсовая работа [820,3 K], добавлен 03.03.2011Основные теги и атрибуты языка HTML. Создание web-сайта, который должен представлять собой несколько связанных между собой страниц. Рассмотрение различных значений атрибутов и тегов на страницах и в других документах. Экранные формы разработанных страниц.
лабораторная работа [1,2 M], добавлен 16.04.2014Язык разметки гипертекстовых страниц HTML. Обеспечение доступности Web-страницы, представление текста и графики. Основные правила и этапы создания сайта, выбор структуры страницы. Оценка экономической целесообразности использования HTML-редакторов.
дипломная работа [86,7 K], добавлен 25.03.2013Новый язык разметки гипертекста XHTML. Валидация XHTML-документов, определение их типа. Распространённые ошибки в XHTML-разметке. Конформность пользовательских агентов. Использование XHTML с другими пространствами имен. Расширение семантики HTML.
курсовая работа [44,1 K], добавлен 14.07.2009Суть и составные части Web технологии, ее базовые элементы. Стандартный язык, предназначенный для создания гипертекстовых документов: HyperText Markup Language (HTML). HTML-тэги, определяющие, как будет отображаться WEB-броузером тело документа в целом.
реферат [19,4 K], добавлен 01.04.2010Характеристика принципов создания html-страниц и связывания их ссылками так, чтобы можно было произвольным образом переходить от одной страницы к другой. Применение тегов форматирования текста и заголовка окна. Этапы создания html-страницы с таблицей.
контрольная работа [16,0 K], добавлен 19.06.2014Современные Интернет-технологии, Web-дизайн и браузеры. Язык разметки гипертекстовых страниц HTML. Представление текста и графики на Web-страницах. Правила и этапы создания сайта. Влияние дисплеев на Web-дизайн. Сравнительный анализ HTML-редакторов.
дипломная работа [3,3 M], добавлен 21.06.2013Изучение алгоритма рекурсивного спуска и системы построения грамматики с помощью лексического анализатора Lex. Написание программы интерпретатора языка разметки HTML. Проверка входной последовательности на корректность входа как общая функция программы.
контрольная работа [226,7 K], добавлен 25.12.2012
