Основные понятия

Итак гипертекст это текст, в котором имеютя ссылки для автоматического перехода на другие тексты - гиперссылки, а язык HTML (Hyper Text Marcup Language) - это независимый от платформ язык разметки текста. Документы, размеченные при помощи этого языка визуализируются браузерами конечных пользователей в большинстве случаев одинаково , благодаря тому, что "понимают" и правильно обрабатывают структурные элементы HTML. Исходный код представляет собой текст, между строк которого вставляются элементы разметки, посетителю страницы эти элементы не видны, а виден результат их воздействия на документ.

Элементы разметки состоят из заключённых в угловые скобки (< и >) дескрипторов - тэгов(tags) и их атрибутов. Совокупность открывающего (< >) и закрывающего (< / >) дескрипторов - есть контейнер. Элементы HTML подразделяются на структурные - которые организуют текст и на форматирующие - которые задают его стиль. Для создания документа HTML необходимо создать текстовый файл с содержимым, вставить нужные тэги и после внесения изменений текстовый файл сохраняется с расширением .htm или .html.

Синтаксис

Синтаксис задает, как корректно писать тег и его параметры. При описании синтаксиса применяются следующие обозначения:

  • вертикальная черта между значениями (например, absmiddle | baseline) указывает на логическое исключающее ИЛИ, это означает, что надо выбрать только один аргумент из предложенных;
  • многоточие внутри тега (например, <iframe ...>) говорит о том, что для тега существуют дополнительные параметры;
  • многоточие между открывающим и закрывающим тегом сообщает, что внутри контейнера допустимо применять любые другие элементы HTML.

Закрывающий тег

Указывает, нужен закрывающий тег или нет. Возможны три варианта.

  • Обязателен - закрывающий тег обязательно должен присутствовать, иначе это вызовет ошибку в коде.
  • Не обязателен - в этом случае разработчик сам решает, ставить закрывающий тег или нет. Если тег не закрыт, то он автоматически закрывается при начале следующего элемента.
  • Не требуется - закрывающий тег никогда не указывается.

HTML Тэги.

Форматирование шрифта.

<b>Полужирный текст</b>
<i>Выделение текста курсивом</i>
<u>Подчёркнутый текст</u>
<s>Зачёркнутый текст</s>
<small>Маленький шрифт</small>
<big>Большой шрифт</big>
Верхний индекс  <sup>сверху</sup>

Нижний индекс <sub>снизу</sub>
<acronym title="Всплывающая подсказка">Текст со всплывающей подсказкой</acronym>
<font style="font-size:16pt;">Шрифт размером 16 пикселей</font>
Предопределённые размеры шрифта (могут быть от 1-го до 7-го):
<font size="3">Шрифт 3-го размера</font>
<font size="+1">Шрифт на 1 размер больше обычного</font>
<h2>Заголовок 2-го размера</h2>
<font style="font-family:Monotype Corsiva;">Шрифт Monotype Corsiva</font>
<font style="font-family:Tahoma; font-size:15pt;">Tahoma, 15 пикселей</font>                       

<font color="#0000ff">Синий текст</font>
Цифра 0000ff означает синий цвет в RGB палитре.
Также можно пользоваться стандартными словесными обозначениями цветов вот так:
<font color="red">Красный текст</font>
У фона тоже можно менять цвет, вот так:
<div style="background-color:#eeeeff;">голубой фон</div>
<div style="background-color:lightgray; color:#0000ff;">синий текст, серый фон</div>
ВОТ НЕКОТОРЫЕ ПРЕДОПРЕДЕЛЁННЫЕ ЦВЕТА:

Black, White, Red, Green, Blue, Purple, Firebrick, Maroon, Orange, Red, MidnightBlue, CornflowerBlue, Cyan, Yellow, Magenta, DarkGreen, DarkGoldenrod, Gold, Orchid, BlueViolet, Burlywood, PeachPuff.

В шестнадцатиричном коде указывающем интенсивность красного, зелёного и синего (RRGGBB):

#000000 #FFFFFF  #FF0000  #00FF00  #0000FF

 Форматирование параграфов.

Оформить отступы абзацев, легко:

<blockquote>Процитированый в отдельном блоке тексту которого будет небольшой отступ слева. </blockquote>

<p style="text-indent: 40px">

<div style="float:right; margin:8px; padding:6px; border:1px solid #bbbbbb; width:400px;">
Я врезаный, обтекающий другим текстом, текст с правого краю с выравниванием слева, с серой рамкой и отступом от рамки снаружи в 8 пикселей </div>

1. Этот блок вставлен в текст слева перед (!) словом «Привет!»
2. Если блок внутри lj-raw, то переносы строк нужно указывать тэгом <br>

Привет! В этом абзаце первое предложение будет с красной строки, т.е. с отступом. Прямо как в книгопечати. Правда, в интернете это редкая практика. Абзацы должны разделяться просто пустым промежутком. </p>

<div style="width:300px;">Опачки! Этот абзац будет написан с фиксированой шириной в 300 пикселей. Узенько так типа. А если добавить style="width:300px; float:right;" тогда он ещё и будет висеть справа. Смотрите пример чуть ниже.</div>

<pre>Преформатированый текст сохраняет отступы слева и между  словами
 и устанавливает те что вы укажите пробелами.NB! тэг не делает переноса
строки автоматом!</pre>

<center>отцентрированый текст</center>

<div align=right> текст с правого краю в две строчки с выравниванием справа </div>

<div style="float:right;"> текст с правого краю в две строчки с выравниванием слева </div><br clear=all>

Специальные тэги ML теги

Чтобы ширина окна браузера не влияла на переносы текста:
<nobr>этот текст будет всегда в одну строку</nobr>
<blink>мигающий текст</blink> - не используйте этот тэг :)
Чтобы между двумя словами не&nbsp;было переноса, можно поставить между ними неразрывный&nbsp;пробел.
<br> - перенос строки.
<hr> - линия на всю ширину экрана, вот такая:

Тэги логического форматирования текста

Тэг <ABBR>

Тэг <ABBR> отмечает свой текст как аббревиатуру (ABBReviation). Несмотря на то, что этот тэг включен в спецификацию HTML 4.0, он до настоящего времени не поддерживается ни одним браузером.

Тэг <ACRONYM>

Тэг <ACRONYM>. Так же, как и тэг <ABBR>, используется для отметки аббревиатур. Этим тэгом рекомендуется отмечать так называемые акронимы, т. е. произносимые слова, состоящие из аббревиатур. Тэг <ACRONYM> возможно в будущем станет использоваться для невизуального отображения элементов, например при речевом синтезе.

Тэг <CITE>

Тэг <CITE> используется для отметки цитат или названий книг и статей, ссылок на другие источники и т. д. Браузерами такой текст обычно выводится курсивом.

Тэг <CODE>

Тэг <CODE> отмечает свой текст как небольшой фрагмент программного кода. Как правило, отображается моноширинным шрифтом. Этот тэг не следует путать с тэгом <PRE>, являющимся элементом уровня блока, который следует использовать для отметки больших фрагментов (листингов) кода.

Тэг <DEL>

Тэг <DEL> отмечает свой текст как удаленный. Этот элемент полезно использовать для отметки изменений, вносимых в документ от версии к версии. Тэг <DEL> может использоваться как элемент уровня текста и как элемент уровня блока.

Тэг <DFN>

Тэг <DFN> отмечает свой текстовый фрагмент как определение (DeFinitioN). Например, этим тэгом можно отметить какой-либо термин, когда он встречается в тексте в первый раз.

Тэг <DFN> поддерживается только браузером Microsoft Internet Explorer. Отображается по умолчанию курсивом.

Тэг <INS>

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

Тэг <EM>

Тэг <EM> (EMphasis - выделение, подчеркивание) используется для выделения важных фрагментов текста. Браузеры обычно отображают такой текст курсивом.

Тэг <KBD>

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

Чтобы запустить текстовый редактор, напечатайте: <KBD>notepad</KBD>

Применение данного тэга предпочтительнее применения тэга физического форматирования <TT>.

Тэг <Q>

Тэг <Q> отмечает короткие цитаты в строке текста. В отличие от тэга уровня блока <BLOCKQUOTE> при отображении не выполняется отделение размеченного текста пустыми строками.

Тэг <SAMP>

Тэг <SAMP> отмечает текст как образец (SAMPle). Обычное использование этого тэга - отметка текста, выдаваемого программами (sample output). Используется также для выделения нескольких символов моноширинным шрифтом.

Тэг <STRONG>

Тэг <STRONG>, как правило, используется для выделения важных фрагментов текста. Браузеры обычно отображают такой текст полужирным шрифтом.

Тэг <VAR>

Тэг <VAR> отмечает имена переменных программ. Обычно такой текст отображается курсивом. Пример:

Задайте значение переменной <VAR>N</VAR>

Тэги физического форматирования текста

Приведем описание тэгов физического форматирования. Часть из них не рекомендуется к использованию спецификацией HTML 4.0 по приведенным выше причинам. Некоторые тэги отменены (deprecate) спецификацией HTML 4.0, однако они продолжают поддерживаться браузерами.

Тэг <B>

Тэг <B> отображает текст полужирным шрифтом. В большинстве случаев рекомендуется вместо тэга <B> использовать тэг логического форматирования <STRONG>. Например:

Это <B>полужирный</B> шрифт.

Тэг <I>

Тэг <I> отображает текст курсивом. Для большинства случаев вместо этого тэга рекомендуется использовать тэги <EM>, <DFN>, <VAR> или <CITE>, поскольку последние лучше отражают назначение выделяемого текста. Например:

Выделение <I>курсивом</I>

Тэг <TT>

Тэг <TT> отображает текст моноширинным шрифтом. Для большинства случаев вместо этого тэга лучше использовать тэги <CODE>, <SAMP> или <KBD>. Пример:

Это <TT>моноширинный</TT> шрифт.

Тэг <U>

Тэг <U> отображает текст подчеркнутым. Отмененный тэг. Вместо него рекомендуется использовать тэги <STRONG> или <CITE>. Например:

Пример <U>подчеркивания</U> текста.

Тэги <STRIKE> и <S>

Тэги <STRIKE> и <S> отображают текст, перечеркнутый горизонтальной линией. Отмененный тэг. Вместо него следует использовать тэг <DEL>. Например:

Пример <STRIKE>зачеркнутого</STRIKE> текста.

В настоящее время тэг <DEL> поддерживается не всеми браузерами, поэтому пока рекомендуется использовать <DEL> в сочетании с тэгом <STRIKE>. А именно, внутрь тэга-контейнера <DEL> можно вложить пару тэгов

<STRIKE>...</STRIKE>.

Тэг <BIG>

Тэг <BIG> выводит текст шрифтом большего (чем непомеченная часть текста) размера. Вместо данного элемента лучше использовать <STRONG> или тэги заголовков, например, <H3>. Большинство браузеров поддерживают вложенные тэги <BIG>, однако использовать такой подход не рекомендуется. Например:

Шрифт <BIG>большего</BIG> размера.

Тэг <SMALL>

Тэг <SMALL> выводит текст шрифтом меньшего размера. Поскольку в HTML нет тэга, противоположного по действию тэгу <EM>, то для этих целей можно применять тэг <SMALL>. Большинство браузеров поддерживают вложенные тэги <SMALL>, однако использовать такой подход не рекомендуется. Например:

Шрифт <SMALL>меньшего</SMALL> размера.

Тэг <SUB>

Тэг <SUB> сдвигает текст ниже уровня строки и выводит его (если возможно) шрифтом меньшего размера. Удобно использовать для математических индексов. Например:

Пример шрифта для <SUB>нижнего</SUB> индекса.

Тэг <SUP>

Тэг <SUP> сдвигает текст выше уровня строки и выводит его (если возможно) шрифтом меньшего размера. Удобно использовать для задания степеней чисел в математике. Например:

Пример шрифта для <SUP>верхнего</SUP> индекса.

Тэг <BLINK>

Тэг <BLINK> отображает мигающий текст. Этот тэг не входит в спецификацию HTML и поддерживается только браузером Netscape. Опытные разработчики крайне редко прибегают к использованию этого тэга, поскольку наличие на странице мигающих символов раздражает многих пользователей.

Тэг <SPAN>

Тэг-контейнер <SPAN> является аналогом тэга уровня блока <DIV>. Может использоваться в тех случаях, когда требуется отметить фрагмент текста для задания его свойств, и при этом не удается использовать никакой другой структурный тэг форматирования.

Тэг <FONT>

Тэг <FONT> указывает параметры шрифта. Он относится к тэгам физического форматирования уровня текста.

FACE

Параметр FACE служит для указания типа шрифта, которым программа просмотра пользователя будет выводить текст (если такой шрифт имеется на компьютере).

Приведем пример использования параметра FACE:

<HTML> <HEAD>

<TITLE>Назначение шрифтов</TITLE>

</HEAD>

<BODY>

Текст, записанный шрифтом по умолчанию.

<BR>

<FONT FACE="Verdana", "Arial", "Helvetica">

Пример задания названия шрифта.

</FONT>

</BODY>

</HTML>

SIZE

Этот параметр служит для указания размеров шрифта в условных единицах от 1 до 7. Конкретный размер шрифта зависит от используемой программы просмотра. Принято считать, что размер "нормального" шрифта соответствует значению 3.

<FONT SIZE=1>Шрифт размера 1</FONT><BR>

COLOR

Этот параметр устанавливает цвет шрифта, который может задаваться с помощью стандартных имен или в формате #RRGGBB. Приведем пример документа с разноцветным текстом.

<BODY>

<FONT COLOR=green>Текст зеленого цвета</FONT><BR>

</BODY>

</HTML>

Тэг <BASEFONT>

Тэг <BASEFONT> используется для указания размера, типа и цвета шрифта, используемого в документе по умолчанию. Эти значения обязательны для всего документа, однако могут в нужных местах переопределяться с помощью тэга <FONT>. После закрывающего тэга </FONT> действие тэга <BASEFONT> восстанавливается. Значения параметров шрифтов, используемых по умолчанию, могут неоднократно переопределяться в документе, т. е. тэг <BASEFONT> может появляться в документе любое количество раз.

 

© gruppa-43im2009

Конструктор сайтов - uCoz