Обязательные теги. Структура документа HTML. Основы языка HTML
Теги
Команды для браузера, говорящие, как отображать текст, вставлять таблицы, изображения и другие объекты, называются тегами (от англ. tag - ярлык, признак ). Сами теги (команды) не отображаются на экране.
Имя тега пишется в треугольных скобках, например, - тег, говорящий браузеру записывать весь последующий текст жирным шрифтом. Имя тега можно записывать на любом регистре (прописными или строчными буквами), то есть будет воспринято браузером так же, как и .
Теги бывают парные и непарные . Например, тег говорит браузеру записывать жирным шрифтом весь последующий текст до команды . В таком случае тег, дающий команду, называют открывающим , а тег, отменяющий команду, закрывающим .
Теги могут иметь параметры (или атрибуты). Например, чтобы задать цвет шрифта, используется тег font с параметром color: - это открывающий тег, который командует браузеру с этого момента отображать шрифт зеленым (в данном примере) цветом до закрывающего тега .
Некоторые параметры требуют обязательного указания их значений. Для некоторых параметров браузер использует значения по умолчанию, если другие значения не заданы.
Если тег имеет несколько параметров, то они прописываются через пробел в любой последовательности. Например: - две аналогичные записи открывающего тега font с параметрами color и size.
Структура HTML страниц
Любая html-страница должна содержать следующие обязательные теги:
html - сообщает браузеру, что страника написана на языке HTML и строчки до закрывающего тега представляют собой единый документ;
head - между открывающим и закрывающим тегами помещается важная информация, описывающая этот документ;
body - между открывающим и закрывающим тегами помещается само содержание страницы.
Таким образом HTML-документ имеет следующую структуру:
Описание документа (не отображается на самой страничке)
Содержание (отображается на страничке с учетом заданной разметки)
Сам раздел не является обязательным и служит для размещения описания документа. Если он есть, то обязательным тегом является только TITLE , содержание которого задает название документа, показываемое обычно в заголовке окна браузера.
Например, такая строчка 1_HTML задаст название документа "1_HTML", которое в Mozilla Firefox будет отражаться в заголовке окна и на закладках (когда открыто несколько страничек):
2. Форматирование текстаШрифты: гарнитура, размер, цвет
Оформление текста
Заголовки
Теги переноса строки и форматирования абзаца
Выравнивание текста
Упражнение
При помощи HTML-разметки можно написать текст разного начертания (гарнитуры), размера и цвета. Для этого используется тег , имеющий несколько параметров:
face – для задания гарнитуры,
size – для задания размера,
color – для задания цвета.
Чтобы задать нужный шрифт, размер или цвет, необходимо соответствующему параметру присвоить нужное значение:
параметр="значение"
Гарнитура
Например, чтобы написать текст шрифтом Times New Roman , необходимо вставить перед нужным текстом тег и присвоить его параметру face значение Times New Roman , а т.к. тег – парный, то после необходимого текста обязательно нужно вставить закрывающий тег:
Текст с начертанием Times New Roman
Текст с начертанием Times New Roman
Параметру face можно присвоить несколько значений через запятую:
face="Times New Roman, Times, serif"
В таком случае, браузер сначала попытается отобразить текст шрифтом Times New Roman . Если такой шрифт отсутствует на компьютере пользователя, то браузер попытается отобразить текст шрифтом Times и т.д.
Размер
Чтобы написать текст размером 4, необходимо вставить перед нужным текстом тег и присвоить его параметру size значение 4:
Текст размера 4
В результате браузер отобразит эту строчку так:
Текст размера 4
Что же означает эта загадочная цифра 4? Параметр size может принимать значения от 1 до 7 . Это условные единицы. Средний размер, используемый по умолчанию, соответствует size="3" .
Следовательно, размер текста 4 – это средний размер, увеличенный на 1 условную единицу, а размер 2 - это средний размер, уменьшенный на 1 условную единицу и т.д. Величина текста, заданная таким способом, называется абсолютной .
Но есть и другой способ уменьшить или увеличить размер текста относительно размера по умолчанию. Для этого нужно присвоить параметру size значение "-1" или "+1" соответственно. При таком способе задания размера величина текста называется относительной .
Итак, чтобы получить размер текста 5, можно воспользоваться двумя способами:
Текст размера 5 или Текст размера 5
Помимо перечисленных существует еще несколько способов задать размер текста.
Увеличить текст можно с помощью тега :
Увеличенный текст
В результате браузер отобразит эту строчку так:
Увеличенный текст
Уменьшить текст можно с помощью тега :
Уменьшенный текст
В результате браузер отобразит эту строчку так:
Уменьшенный текст
Теги и можно повторить несколько раз для усиления эффекта. Например, если в результате строки:
Большой текст
текст недостаточно велик:
Большой текст
можно написать так:
Большой текст
И в результате получится больший текст:
Большой текст
Цвет
Теперь о задании цвета текста. Чтобы написать текст красным цветом, необходимо вставить перед нужным текстом тег и присвоить его параметру color значение red :
Красный текст
В результате браузер отобразит эту строчку так:
Красный текст
Но цвет можно задать не только по названию, но и по цифровому значению в шестнадцатеричном формате, который выглядит как знак # и 6 символов (цифры 0-9 и буквы латинского алфавита A-F ) после него. Например, красному цвету соответствует шестнадцатеричное значение #FF0000 . Т.е. написать текст красным цветом можно двумя способами:
Красный текст или Красный текст
Здесьможно скачать таблицу цветов, в которой приведены основные цвета, их названия и соответствующие им шестнадцатеричные значения.
Я постараюсь вести рассылку по принципу «от простого к сложному». Вести я ее буду именно в таком формате для того, чтобы человек, который захотел бы изучить основы сайтостроения, смог сразу же, после выпуска рассылки, на практике выполнять изложенный материал.
Но сразу же хочу оговориться, что, в частности, язык HTML – это очень обширный язык, который непрерывно развивается. И поэтому, для того, чтобы овладеть этим языком на высоком уровне, Вы должны тщательно изучить основы (т.е. выпуски моей рассылки). И параллельно с этим практиковаться .
Изучая основы языка HTML, мы будем обращаться к CSS стилям. А значит, мы будем изучать и CSS. Но это чуть позже. Также мы будем обращаться за помощью к javascript.
Сегодняшний вступительный урок, мы начнем с изучения структуры HTML документа и основных тегов HTML.
Поехали…
Каждый HTML документ начинается со строчки:
XHTML
|
В общем случае эта строчка говорит браузеру, который открывает нашу страницу, на какие стандарты ему опираться.
Тег весьма разнообразен, и от его модификации зависит то, как будет отображаться содержимое на Вашей странице.
Однако, если умело расположить все элементы и блоки на странице и применить стиль, то все будет одинаково хорошо работать во всех браузерах с нужным .
Но, пока мы не знаем, ни что такое блоки, ни что такое стили и как эту «абрукадабру» применять, считаю нужным вернуться к подробному рассмотрению , когда мы уже будем что-то уметь и сможем реально оценить его работу.
А пока движемся ниже по странице.
Кстати, а почему я начал рассматривать HTML документ с верхней части страницы?
Потому что браузер загружает страницу и «считывает код» сверху вниз, слева направо. (Впрочем, как мы и читаем книги).
Наверное, не совсем понятно слово тег?
Вообще говоря, тег – это инструкция, которая говорит браузеру, что в данном месте документа нужно сделать.
С помощью тегов мы создаем наши страницы. Все теги заключены в так называемые «уголки» ( ). И закрывающий (с косой чертой). Например, жирный текст . Указывает, что текст между открывающим и закрывающим тэгом strong будет выделен жирным.
Что такое тег, надеюсь, понятно.
Предлагаю набрать что-нибудь своими руками.
Итак, приступим.
Запусти блокнот или wordpad в OC WINOWS. Наберем следующие строчки:
XHTML
Заголовок окна браузера
Заголовок окна браузера
|
Сохраним файл под каким-либо именем, например start.html. Теперь разберемся что написали.
Между тегами и располагается информация, не отображаемая на странице.
Например, тег , кстати, он закрывающего тега не требует, может указывать кодировку (charset=windows-1251) или сведения об авторе (name="author" content="Ф.И.О.") , или слова для поисковой машины, тег заставит браузер автоматически через 30 секунд перейти на сайт mysite.ru (пример).
Тег определяет текст в заголовке окна браузера. (Тег закрывающийся).
Также в теге могут располагаться скрипты javascript или vbscript, заключенные в теги …. .
И стили, заключенные в теги …. .
На этом с тегом пожалуй мы закончим.
Это, собственно, тело документа, здесь размещается все то, что мы видим на странице. У тега есть набор параметров, которые мы рассмотрим, но использовать их не рекомендуется.
bgcolor — устанавливает цвет фона документа. ( )
background — указывает на url-адрес изображения — фона документа.
text — устанавливает цвет текста документа.
link — устанавливает цвет гиперссылок.
vlink= — устанавливает цвет гиперссылок на которых вы уже побывали, используя значение.
alink= — устанавливает цвет гиперссылок при нажатии.
bgproperties=fixed
— фоновое изображение прокручиваться не будет. Т.е. текст будет двигаться при нажатии PageDown, а фон — нет.
Данный параметр поддерживается только Internet Explorer.
Эти параметры можно объединять, например, на этой страничке используется:
XHTML
|
Давайте и наберем эту строку в нашем предыдущем примере.
XHTML