4365

Основы языка разметки HTML

Реферат

Информатика, кибернетика и программирование

Основы языка разметки HTML HTML - язык разметки документов, текущая версия 4.01 HTML документы хранятся на сервере. Просмотр документов осуществляется при помощи клиентской программы – браузера. Браузеры (Internet Explorer, Opera, Netscape Comm...

Русский

2012-11-18

179.5 KB

39 чел.

Основы языка разметки HTML

HTML - язык разметки документов, текущая версия 4.01

HTML документы хранятся на сервере. Просмотр документов осуществляется при помощи клиентской программы – браузера.

Браузеры (Internet Explorer, Opera, Netscape Communicator, Mozilla)

HTML документы – текстовые файлы с расширением html, htm

Средства разработки HTML-документов: текстовые редакторы(Notepad), специализированные редакторы(Homesite), WYSIWYG визуальные редакторы (Frontpage)

Разметка осуществляется при помощи тегов, заключенных в угловые скобки. Теги - управляющие коды. Не отображаются браузером.

  •  Простейший документ

<html>

<head>

<meta content=”text/html; charset=windows-1251”>

 <title>Пример простого документа</title>

</head>

<body>Текст документа</body>

</html>

  •  Теги бывают парные и не парные. Теги могут содержать параметры.
  •  HTML не чувствителен к регистру, символам форматирования. Лишние пробелы игнорируются. Пример

<TITLE>

 Пример простого документа

</TITLE>

  •  Документ начинается стартовым тегом <html> и заканчивается стоповым тегом </html>. Документ состоит из заголовочной части и тела
  •  Заголовочная часть (<head></head>). Содержит заголовок, описание связей, описание стилей, мета-информацию (ключевые слова, дата создания, кодировка, тип док-та (для передачи по протоколу HTTP клиенту)), описание базового адреса и шрифта.
  •  Тело документа (<body></body>). Содержит текст, списки, графику, гипертекстовые ссылки, таблицы, формы, фреймы, каскадные стили.
  •  Текст автоматически выравнивается по левому краю. Переносы осуществляются по словам. Разрывы строк определяются браузером. Абзацы <p> отделяются друг от друга пустой строкой и могут содержать параметр, определяющий способ выравнивания текста. Разрывы строк осуществляются тегом <br>. Заголовки <h1> (6 уровней, максимальный 1). Задание шрифтов <font> (7 размеров, максимальный 7, относительные (+,-), гарнитура, цвет RGB). Физические стили <b>,<i>,<u>(полужирный, курсив, подчеркнутый). Специальные символы &lt; (<) &#169; (©)
  •  Пример разметки текста

 <html>

<head>

<meta content=”text/html; charset=windows-1251”>

 <title>Пример простого документа</title>

 </head>

<body>

<h2>Заголовок</h2>

<p>Текст первого абзаца

<p><font face=”Arial” color=”#FF0000” size=”4”>

 <!--красный шрифт -->

Текст второго абзаца

</font>

</body>

</html>

  •  Списки. Упорядоченные <ol>, неупорядоченные <ul>, элементы списка <li>
  •  Пример использования списка

<html>

<head>

<meta content=”text/html; charset=windows-1251”>

 <title>Пример простого документа</title>

 </head>

<body>

<ol>

<li>Иванов

<li>Петров

<li>Сидоров

</ol>

</body>

</html>

  •  Графика (изображения, фон документа, фон ячейки таблицы). Типы графических форматов (JPG, GIF, PNG). Тег <img>. Пример размещения графики на странице.

 <html>

<head>

<meta content=”text/html; charset=windows-1251”>

 <title>Пример простого документа</title>

 </head>

<body>

<img src=”photo.jpg” width=”100” height=”100” align=”left”>

 Текст обтекает<br>изображение справа

</body>

</html>

  •  Ссылки <a> (абсолютные, относительные) Якоря (ссылки <a href=””>, метки <a name=””>). Графические ссылки. Ссылки на почтовый адрес <a href=”mailto:”> 
  •  Пример использования ссылок

<html>

<head>

<meta content=”text/html; charset=windows-1251”>

 <title>Пример простого документа</title>

 </head>

<body>

<a href=”bio/petrov.html”>Петров</a><br>

<a href=”http://www.bio.ru/ivanov/ivanov.html”>Иванов</a><br>

<a href=”sidorov.html”> <img src=”photo.jpg” width=”100” height=”100” align=”left”></a><br>

<a href=”mailto:alexandrov@mail.ru”>Александров</a><br>

<a href=”#semenov”>Семенов</a><br>

…………..

<a name=”semenov”>

</body>

</html>

Приложение. Теория и примеры

HyperText Markup Language (HTML) является стандартным языком, предназначенным для разметки документов. В настоящий момент для разметки документов применяется язык HTML версии 4.0 Разметка документа осуществляется при помощи HTML тегов. Теги – это управляющие коды (метки), заключенные в угловые скобки <...>, определяющие, как будет выглядеть тот или иной фрагмент документа на экране. Программы просмотра HTML-страниц (браузеры), такие как Internet Explorer, при загрузке документа анализируют теги и на основе полученных данных отображают содержимое документа. Сами теги при этом на экран не выводятся.

HTML-документы могут быть созданы при помощи любого текстового редактора, способного сохранить документ в текстовом формате (например Notepad). Так же существуют специализированные HTML-редакторы, такие как HomeSite, предоставляющие разработчику дополнительные сервисы, не предусмотренные в обычных текстовых редакторах.

Помимо редакторов существуют программы, позволяющие создавать HTML документы при помощи визуального графического интерфейса (Microsoft Frontpage, Netscape Composer). Данная технология называется WYSIWYG (What You See Is What You Get) и дает возможность создавать HTML-документы без знания языка HTML.

Все тэги HTML начинаются с "<" (левой угловой скобки) и заканчиваются символом ">" (правой угловой скобки). Как правило, существует стартовый тэг и завершающий тэг. Для примера приведем тэги заголовка, определяющие текст, находящийся внутри стартового и завершающего тэга и описывающий заголовок документа:

<TITLE> Заголовок документа </TITLE>

Завершающий тэг выглядит также, как стартовый, и отличается от него прямым слэшем перед текстом внутри угловых скобок. В данном примере тэг <TITLE> говорит WEB-браузеру о том, что следом за ним начинается текст заголовка, а тэг </TITLE> - о завершении текста заголовка.

Некоторые тэги, такие, как <P> (тэг, определяющий абзац), не требуют завершающего тэга. HTML не реагирует на регистр символов, описывающих тэг, и приведенный ранее пример может выглядеть следующим образом:

<title> Заголовок документа </title>

Дополнительные пробелы, символы табуляции и возврата каретки, добавленные в исходный текст HTML-документа для его лучшей читаемости, будут проигнорированы WEB-браузером при интерпретации документа. Следующий пример с точки зрения конечного результата абсолютно идентичен предыдущему и отличается только способом форматирования текста.

<title>

Заголовок документа

</title>

Каждый HTML документ должен начинаться с тега <html> и заканчиваться тегом </html>. С точки зрения структуры, документ состоит из двух частей – заголовочной части и тела документа. Описание заголовочная части должно следовать сразу после открывающего тега начала документа <html>. Заголовочная часть документа помещается между тегами <head> и </head>. Между этими тегами описывается заголовок документа

<title>Заголовок документа</title>

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

<meta content=”text/html; charset=windows-1251”>

Приведенный выше мета-тег содержит информацию о типе документа и его кодировке.

Некоторые теги помимо названия могут содержать один или несколько параметров. В общем виде запись тега с параметрами выглядит следующим образом:

<название_тега параметр1=”значение1” … параметрN=”значениеN”>

В данном примере meta – название тега, content – его параметр, а ”text/html; charset=windows-1251” – значение, присваиваемое параметру. Следует отметить, что наличие мета-тегов не является обязательным. В случае, если при загрузке документа браузер не обнаруживает мета-теги, он использует значения параметров, заданные по умолчанию. Более подробную информацию о мета-тегах можно почерпнуть в справочном руководстве языка HTML.

Тело документа следует за заголовочной частью и размещается между тегами <body> и </body>. Ниже приведен пример простейшего HTML документа:

При оформлении текстов часто используются теги заголовков. В HTML реализовано шесть типов заголовков, различающихся размером и толщиной шрифта. Заголовок типа <h1> является самым крупным, <h6> - самым маленьким. Каждый открывающий тег заголовка должен иметь соответствующий закрывающий тег.

В HTML-документе игнорируются символы возврата каретки. Физический разрыв абзаца (символ возврата каретки) может находиться в любом месте исходного текста документа, однако браузер разделяет абзацы только при наличии тэга <p>. Если не разделять абзацы тэгом <p>, документ будет выглядеть как один большой абзац. Тег <p> не является парным, т.е. закрывающего тега </p> не существует.

Тег <p> может содержать параметр:

align – выравнивание текста внутри абзаца (действует на текст, располагающийся сразу после тега <p> и прекращается по достижении следующего тега <p>). Может принимать значения:

  •  left – выравнивание по левому краю 
  •  center – выравнивание по центру
  •  right – выравнивание по правому краю

Тег <br> осуществляет разрыв строки. В отличие от тега <p>, <br> не добавляет после разрыва пустую строку, которая зрительно выделяет абзац. Для того, чтобы добиться такого эффекта, необходимо использовать тег <br> дважды. Тег <br> не является парным.

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

Тег шрифта <font> позволяет задавать размер, цвет и гарнитуру текущего шрифта для произвольного фрагмента документа. Данный тег может содержать следующие параметры:

size – размер шрифта. Размеры шрифта могут колебаться в диапазоне от 1 (минимальный) до 7 (максимальный). С помощью символов “+” и ”-” можно управлять изменением размера текущего шрифта относительно размера шрифта, заданного по умолчанию.

face – гарнитура шрифта. Данный параметр может содержать название одного (например “Arial”) или сразу нескольких шрифтов (“Arial, Helvetica, Sans Serif”). Последний вариант актуален в том случае, если браузеру не удается найти на компьютере шрифт Arial. В этом случае программа просмотра будет искать в системе шрифты согласно представленному списку. Задавая список возможных шрифтов, разработчик получает возможность рассчитывать на то, что хотя бы один из перечисленных шрифтов будет найден в системе и документ будет корректно отображен.

сolor – цвет шрифта. Цвет задается указанием в шестнадцатеричном формате трех его составляющих: красной, зеленой и синей. Черному цвету соответствует аргумент “#000000”, белому “#FFFFFF”. Цвет также можно задавать по названиям, поставленным в соответствие цифровым эквивалентам наиболее распространенных цветов (Black, White, Red и т.д.).

В HTML реализована возможность, связанная с форматированием текста так называемыми физическими стилями. Выделяемый фрагмент документа помещается между открывающим и закрывающим тегами стиля. К основным стилям можно отнести следующие:

  •  Полужирный (<b> </b>)
  •  Курсив (<i> </i>)
  •  Подчеркнутый (<u> </u>)

Текстовые ссылки позволяют щелчком по выделенному слову фразе перейти к другому документу. Эта возможность называется гипертекстом. Ссылки выделяются текстом или подчеркиванием. Ссылка задается при помощи парных тегов <a> и </a>. Между этими тегами помещается текст, при нажатии на который осуществляется переход. Для указания адреса, по которому должен совершиться переход, у тега <a> имеется параметр:

href – адрес документа. Адрес может быть абсолютным (http://www.yandex.ru) и относительным (documents/list.html)

Ссылки могут указывать на разделы в пределах документа. Причем такие ссылки могут указывать как на разделы того документа, в котором они описаны, так и на разделы во внешних документах. Такие ссылки требуют наличия двух частей: якоря и самой ссылки. Якорь определяет точку, которой будет осуществлен переход по ссылке. Для описания якоря необходимо в том месте документа, к которому будет осуществлен переход, поместить тег <a> с параметром:

name – название якоря.

Для адресации к якорю в конце адреса ссылки надо добавить символ # и название якоря. Если адресация осуществляется внутри одного документа, достаточно задать только символ # и название якоря без адреса документа.

Некоторые глобальные параметры для всего документа можно задать при описании тега <body>. К глобальным параметрам можно отнести цвет фона, цвет текста, ссылки и ряд других параметров. Для того, чтобы задать глобальные значения для документа, необходимо воспользоваться параметрами тега <body>. Ниже приведен список из нескольких параметров:

bgcolor – цвет фона документа

text – цвет текста документа

link – цвет ссылки

vlink – цвет ссылки, на которую ранее уже был осуществлен переход (по умолчанию браузер настроен таким образом, чтобы запоминать адреса всех просмотренных документов за несколько предыдущих дней)

alink – цвет активируемой ссылки (в момент нажатия левой кнопки мыши)

Более подробную информацию о параметрах тега <body> можно получить в справочном руководстве языка HTML.

HTML документы могут содержать графические изображения в формате JPG, GIF и PNG. Поместить в документ графическое изображение можно при помощи тега <img>. Данный тег обладает следующими параметрами:

src – адрес файла с графическим изображением

width – ширина изображения в пикселах

height – высота изображения в пикселах

border – ширина рамки вокруг изображения в пикселах

alt – текстовое описание рисунка (в браузерах, поддерживающих графику, текст, помещенный в данный параметр будет отображаться при наведении курсора мыши на изображения; текстовые браузеры будут отображать этот текст вместо картинки)

align – способ выравнивание текста относительно изображения. Может принимать следующие значения:

  •  left – изображение располагается слева на странице (текст будет правее)
  •  right – изображение располагается справа на странице (текст будет левее)
  •  top – выравнивание осуществляется по верхней грани изображения
  •  bottom - выравнивание осуществляется по нижней грани изображения
  •  middle - выравнивание осуществляется на одном уровне с центром изображения

vspace – прозрачное поле сверху и снизу изображения в пикселах

hspace - прозрачное поле слева и справа изображения в пикселах

При выводе графического изображения браузер пытается скомпоновать страницу таким образом, чтобы текст обтекал графику. Для того, чтобы запретить обтекание, можно воспользоваться тегом <br> с параметром:

сlear – обрыв текста с указанием поля, от которого начнется первая свободная строка после графического изображения. Может принимать следующие значения:

  •  left – начать строку там, где свободно левое поле страницы
  •  right – начать строку там, где свободно правое поле страницы
  •  all – начать строку там, где свободны оба поля

В приведенном ниже примере использовались следующие графические изображения:

alexandrov.jpg

ivanov.gif

petrov.png

smirnov.jpg

В качестве ссылки помимо текстовой строки может использоваться графическое изображение. Для этого тег <img> должен быть помещен между тегами <a> и </a>

HTML документы допускают использование в качестве ссылки почтового адреса. Ссылка на почтовый адрес формируется из строки mailto: и почтового адреса. При нажатии на такую ссылку будет автоматически открыта программа для отправки почты. В качестве адрес получателя будет указан адрес, описанный в ссылке.

Для визуального разбиения документа на части используют разделительные полосы, описываемые одиночным тегом <hr>. Данный тег может иметь следующие параметры:

size – толщина полосы в пикселах

width – длина полосы в пикселах либо в процентах от ширины экрана

align – выравнивание полосы на экране. Может принимать следующие значения:

  •  left – выравнивание по левому краю
  •  right – выравнивание по правому краю
  •  center – выравнивание по центру

В HTML определены два вида списков – неупорядоченные и упорядоченные. При отображении списков браузер выделяет список из текста отступом от края страницы.

Неупорядоченные списки задаются парным тегом <ul> </ul>. Каждый элемент списка начинается с непарного тега <li>. Тег <ul> имеет следующие параметры:

type – тип маркера. Может принимать значения

  •  disc – круг
  •  circle – окружность
  •  square – квадрат

Упорядоченные списки задаются парным тегом <ol> </ol>. Каждый элемент списка начинается с непарного тега <li>. Тег <ol> имеет следующие параметры:

type – способ индексации. Может принимать значения

  •  1 – арабские цифры
  •  A – прописные буквы английского алфавита
  •  a – строчные буквы английского алфавита
  •  i – римские цифры

start – начальный номер (номер, с которого начнется нумерация элементов списка)

При наборе HTML документа могут использоваться только буквы, цифры и символы, представленные на клавиатуре. Символы, отсутствующие на клавиатуре, могут быть введены при помощи цифрового кода. Для добавления специального символа в текст документа необходимо к строке &# добавить код символа и точку с запятой. Например символ © описывается как &#169;

Также существует несколько служебных символов (“,&,<,>), которые нельзя употреблять в тексте документа. Эти символы могут быть добавлены в текст при помощи буквенного эквивалента, состоящего из символа &, буквенного кода символа и точки с запятой. Например символ < кодируется как &lt;

Более подробную информацию о цифровых и буквенных кодах символов можно получить в справочном руководстве языка HTML.


 

А также другие работы, которые могут Вас заинтересовать

78866. Философия в системе социально-гуманитарного знания 28.5 KB
  Философия в системе социально-гуманитарного знания. При изучении социально-культурных процессов и явлений общество культура человек в современной науке принято делать отличия социально-гуманитарного знания от естественного...
78867. Методы в социально-гуманитарных науках 13 KB
  Методы в социальногуманитарных науках. Разновидностью включенного наблюдения является этнометодология суть которой состоит в том чтобы результаты описания и наблюдения социальных явлений и событий дополнить идеей их понимания. В социальногуманитарных науках широко применяется сравнительный компаративистский метод опять же с учетом специфики их предмета. Так в психологии этот метод реализуется в двух вариантах: а Сопоставление различных групп по возрастам деятельности и другим параметрам метод поперечных срезов.
78868. Место проблемы человека в системе социально-гуманитарного знания 28.5 KB
  Место проблемы человека в системе социальногуманитарного знания Построить социальную онтологию отвлекаясь от человеческих индивидов как субъектов социального процесса невозможно. Поэтому главное внимание социальная философия уделяет исследованию человека как предпосылки и субъекта социальноисторического процесса. Что такое человек Каковы его природа и сущность Каковы характерные особенности и направленность эволюции человека Все это суть проблемы философской антропологии учения о человеке исследующего своеобразие человеческого...
78869. Концепция социальной рациональности Макса Вебера 29 KB
  Концепция социальной рациональности Макса Вебера. Вебер внёс существенный вклад в такие области социального знания как общая социология методология социального познания политическая социология социология права социология религии экономическая социология теория капитализма. Свою концепцию Вебер называл понимающей социологией. Вебер в этом плане решительно расходится с Дюркгеймом полагая что реальным действующим лицом может быть не мифическое коллективное сознание государство или класс а конкретный индивид.
78870. Феноменологическая программа исследования знания 32.5 KB
  Феномен и логос учение о феноменах явлениях это обозначение философского движения появившегося в начале 20 века а также своеобразной практики осмысления пытающейся проникнуть к истокам человеческого опыта и познания. Ее отличительными чертами являются: нацеленность на вскрытие и приведение к непосредственной очевидности тех пластов нашего опыта которые в обыденной жизни остаются незримыми зачастую будучи основанием зримых; экспликация и истолкование смыслового содержания этого опыта и его сущностных структур; преимущественно...
78871. Герменевтический подход в социально-гуманитарном познании 29 KB
  Рикер понимает теорию операций понимания в их соотношении с интерпретацией текстов; слово герменевтика означает не что иное как последовательное осуществление интерпретации. Таким образом нужно установить соотношение между понятиями интерпретации и понимания. Цель понимания совершить переход от этого выражения к тому что является основной интенцией знака и выйти вовне через выражение. Согласно Дильтею виднейшему после Шлейермахера теоретику герменевтики операция понимания становится возможной благодаря способности которой наделено...
78872. Марксистский подход к исследованию социальной реальности 31.5 KB
  Базис или способ производства материальных благ или экономическая формация = производительные силы производственные отношения. Производительные силы ресурсы и средства обеспечивающие процесс производства. Производственные отношения выражается в различных формах собственности на средства производства. Классы в узком смысле слова социальные группы различающиеся по отношению к средствам производства.
78873. Образ науки в постмодернизме 13.99 KB
  Постмодернизм эту проблему пытается решить посвоему быть может осознавая себя не как конец философии а как переходное состояние между закатом и рассветом. На первый план в этой философии выходят проблемы языка новой субъективности иронии культуры цитат и кавычек. Понимание мира как хаоса сопряжено в философии постмодернизма с отказом от установки на целостность закономерность мира. Картина реальности в философии постмодерна состоит из симулякров не имеющих оснований во внешней реальности симулякры точные копии оригинал...
78874. Роль социально-гуманитарных наук в процессе соц трансформаций 13.58 KB
  Напротив ей присуща роль разрушителя мнимого всезнания и фиктивной уверенности. Используя науку по образу обыденного сознания мир с ее помощью заколдовывается вновь. Задача же социального теоретика на сегодняшний день состоит не только в производстве нового знания доставляющего новые возможности но и в разрушении фиктивных ожиданий обыденного сознания от сферы управления. Только разрушая мнимое всезнание наука может осуществить свою функцию производства нового знания.