Структура HTML-документа. Веб-редактор Блокнот. Основные средства языка HTML. Оформление заголовков. Горизонтальная линейка. Управление шрифтом. Цветовое оформление. Дополнительные варианты оформления. Гиперссылки. Внешние гиперссылки. Создание списков на веб-странице. Маркированные и нумерованные списки. Формирование структуры таблицы. Основные атрибуты таблицы. Управление шириной столбцов. Объединение ячеек. Фреймы.
HTML (Hyper Text Markup Language – язык гипертекстовой разметки) – это язык программирования, используемый для создания Web-страниц. Web-страница представляет собой документ, представленный в формате HTML, содержащий текст и специальные инструкции – теги (дескрипторы). Для создания страниц не требуется установленной программной среды, достаточно наличие любого текстового редактора. Самым простым редактором является встроенный в OS Windows Блокнот.
Страницы также можно создавать и в WordPad и в Microsoft Word. Последний имеет дополнительные средства и панели, упрощающие создание страниц.
Созданный в редакторе документ должен быть сохранен с расширением htm или HTML, только тогда при его запуске загрузится программа просмотра – броузер. Web-броузер интерпретирует дескрипторы HTML-документа и отображает его как web-страницу. Если на компьютере установлена OS Windows любой версии, то стандартным броузером является Internet Explorer, в компьютерах с OS Unix – Netscape Navigator.
При разработке сайта необходимо определиться в его структуре и содержании. Боле всего распространена иерархическая структура, когда главная страница имеет ссылки на дополнительные и наоборот. Такая структура упрощает навигацию пользователя. Главная страница обычно имеет название index.htm.
Для создания web-страниц могут оказаться полезными и специализированные HTML редакторы, такие как Home Site, входящее в пакет MS Office приложение Front Page, программа Dreamweaver и Macromedia Fireworks.
Существует несколько основных дескрипторов HTML, которые должны присутствовать в тексте любой страницы, заключаемые в угловые скобки <>.
Большинство тэгов – парные, то есть на каждый открывающийся тэг <tag> есть закрывающий, с тем же именем, но с добавлением «/». Многие метки, помимо имени, могут содержать атрибуты — элементы, дающие дополнительную информацию о том, как браузер должен обработать текущую метку
Обязательные тэги
<HTML>... </HTML>
Метка <HTML> должна открывать HTML-документ. Аналогично, метка </HTML> должна завершать HTML-документ.
<HEAD>... </HEAD> Эта пара меток указывает на начало и конец заголовка документа.
<TITLE>... </TITLE> Все, что находится между метками <TITLE> и </TITLE>, толкуется браузером как название документа. IE, например, показывает название текущего документа в заголовке окна и печатает его в левом верхнем углу каждой страницы при выводе на принтер. Рекомендуется название не длиннее 64 символов.
<BODY>... </BODY> Эта пара меток указывает на начало и конец тела HTML-документа, каковое тело, собственно, и определяет содержание документа.
Создание абзаца
Абзацы, как и в текстовых редакторах, могут иметь различное выравнивание.
<p>... </p> Такая пара меток описывает абзац. Все, что заключено между <P> и </p>, воспринимается как один абзац.
Тэг <p> могут содержать дополнительный атрибут ALIGN (читается «элайн», от английского «выравнивать»), например:
<p align=center>выравниваем абзац по центру</p>
<p align=right>выравниваем по правому краю</p>
<p align=justify>выравниваем по ширине</p>
По умолчанию выравнивание всегда Left (по левому краю)
Некоторые метки не имеют закрывающего тэга — все они непарные, а некоторые к тому же должны вводиться только маленькими буквами. Например <BR> Эта метка используется, если необходимо перейти на новую строку, не прерывая абзаца:
<html>
<head>
<title>Пример 3</title>
</head>
<body>
<p> Большинство html-меток — парные, <br> то есть на каждую открывающую метку вида <tag> <br> есть закрывающая метка вида </tag> <br> с тем же именем, но с добавлением «/». </p>
</body>
</html>
Таблицу основных тэгов можно посмотреть в конце раздела
Заголовки абзаца
<h1>... </h1> — <h6>... </h6> Метки вида <hi> (где i — цифра от 1 до 6) описывают заголовки шести различных уровней. Заголовок первого уровня — самый крупный, шестого уровня, естественно — самый мелкий.
<h1> Самый крупный заголовок </h1>
<h1> Заголовок помельче </h1>
…… и т.д.
Зачастую приходится отделять абзацы друг от друга линиями. Метка <HR> описывает вот такую горизонтальную линию:
Метка может дополнительно включать атрибуты SIZE (определяет толщину линии в пикселах) и/или WIDTH (определяет длину линии в процентах от ширины экрана).
Например: строка <hr size=4 width=50%> поместит линию шириной в 4 экранных пиксела и длиной в половину экрана.
Физические стили.
Под физическом стилем принято понимать прямое указание браузеру на модификацию текущего шрифта. Например, все, что находится между метками <b> и </b>, будет написано жирным шрифтом. Текст между метками <i> и </i> будет написан наклонным шрифтом. Между метками <u> и </u> текст будет подчеркнут:
<b>Жирный текст</b>
<i> Курсивный текст </i>
<u> Подчеркнутый текст </u>
html позволяет определять внешний вид целых абзацев текста. Абзацы можно организовывать в списки, выводить их на экран в отформатированном виде, или увеличивать левое поле.
Маркированные списки: <ul>... </ul>
Текст, расположенный между метками <ul> и </ul>, воспринимается как ненумерованный список. Каждый новый элемент списка следует начинать с метки <li>. Например, чтобы создать вот такой список:
• HTML;
• Dreamwiever;
• Microsoft FrontPage
необходим вот такой HTML-текст:
<ul>
<li> html;
<li> Dreamwiever;
<li> Microsoft FrontPage
</ul>
Обратите внимание: у метки <li> нет парной закрывающей метки.
Примечание. Элемент <ol> имеет атрибуты type=1, или A, или a, или I, или i для задания вида нумерации и start для указания, с какого индекса начинается нумерация списка.
Нумерованные списки: <ol>... </ol>
Нумерованные списки устроены точно так же, как ненумерованные, только вместо тэга <ul> все строки списка помещаются внутри тэга <ol>.
Примечание. Элемент <UL>, по сути, является аналогом <OL> и имеет атрибут type=circle, square, или disc для задания вида маркера.
Предварительное форматирование текста
Текст, заключенный между метками <PRE> и </PRE> (от английского preformatted — предварительно форматированный), выводится браузером на экран как есть — со всеми пробелами, символами табуляции и конца строки. Это очень удобно при создании простых таблиц.
Текст, заключенный между метками <BLOCKQUOTE> и </BLOCKQUOTE>, выводится браузером на экран с увеличенным левым полем.
Форматирование символов
В HTML существует две возможности управлять внешним видом символов. Первый вариант заключается в определении шрифта всего документа при помощи оператора <basrefont size=”значение”>, который управляет размером шрифта. Пример:
<basefont size=”4”>
<p> В данном абзаце и в последующих шрифт будет равным четырем </p>
Второй вариант предусматривает установку размера для каждого абзаца индивидуально:
<P><font size=”1”>”Этот шрифт размера 1</font></p>
<P><font size=”7”>”Этот шрифт размера 7</font></p>
При помощи тэга <text>, помещенного в тело дескриптора <BODY> можно управлять цветом шрифта во всем документе. Например:
<BODY text=”green”> задает зеленый цвет символов во всем документе.
Можно установить различные цвета для отдельных абзацев:
<P><font color=”red”>Это шрифт красного цвета.</font></font>
Связывание web-документов
В html переход от одного документа к другому задается с помощью метки вида:
<a href="[адрес перехода]">выделенный фрагмент текста</a>
В качестве параметра [адрес перехода] может использоваться несколько типов аргументов. Самое простое — это задать имя другого html-документа, к которому нужно перейти. Например: <a href="document1.html">Перейти к оглавлению</a>
Если необходимо дать ссылку на документ, находящийся на другом сервере, вам придется ввести в свой HTML-документ примерно такой фрагмент:
<a href="http://www.yi.com/home/html/index.html"> Практическое руководство по html</a>
Возможны ссылки и на другие виды ресурсов:
<a href="ftp://server/directory/file.ext"> Выгрузить файл</a>
Такая ссылка, если ей воспользоваться, запустит протокол передачи файлов и начнет выгрузку файла file.ext, находящегося в каталоге directory на сервере server, на локальный диск пользователя.
<a href="mailto:[email protected]">Послать письмо</a>
Если пользователь совершит переход по такой ссылке, у него на экране откроется окно ввода исходящего сообщения его почтовой программы. В строке To: ("Куда") окна почтовой программы будет указано [email protected].
Работа с изображениями
Для начала нужно только иметь это самое изображение в формате GIF (файл с расширением *.gif) или JPEG (файл с расширением *.jpg). Допустим, нам нужно включить в документ изображение, записанное в файл picture.gif, находящийся в одном каталоге с html-документом. Тогда строчка будет вот такая: <img src="picture.gif">
Метка <IMG SRC="[имя файла]"> может также включать атрибут ALT="[текст]", например: <IMG SRC="picture.gif" ALT="Картинка">
Встретив такую метку, браузер покажет на экране текст Картинка и начнет загружать на его место картинку из файла picture.gif. Атрибут ALT может оказаться на случай, если у браузера отключена автоматическая загрузка изображений.
Работа с таблицами.
Элемент <TABLE> используется с целью внедрения таблиц в Web страницу. Они удобны тем, что браузер сам прорисовывает рамку таблицы. Размер рамки может задаваться, как фиксировано, так и автоматически согласовываться с размерами окна просмотра браузера и с размерами, находящегося в ячейках текста и рисунков. Кроме того таблицы позволяют решать чисто дизайнерские задачи: выравнивать части таблицы друг относительно друга, размещать рядом рисунки и текст, управлять цветовым оформлением, разбивать текст на колонки и т.д.
Тег <TABLE>. Для описания таблиц служит тег <TABLE>. Тег <TABLR>, как и многие другие, автоматически переводит строку до и после таблицы.
Тег <TR>. Тег <TR>(сокращение от Table Row- строка таблицы) создаёт строку таблицы. Весь текст, другие теги и атрибуты, которые вы хотите поместить в одну строку, должны быть помещены между тегами <TR></TR>.
Тег <TD>. Внутри строки таблицы обычно размещаются ячейки с данными. Каждая ячейка, содержащая текст или изображение, должна быть окружена тегами <TD></TD>. Число тегов <TD></TD> в строке определяет число ячеек.
Тег <TH>. При задании заголовков для столбцов и строк таблицы используется тег заголовка <TH></TH>(Table Header, заголовок таблицы). Эти теги аналогичны <TD></TD>. Отличие состоит в том, что текст, заключённый между тегами <TH></TH>, автоматически записывается жирным шрифтом и по умолчанию располагается посередине ячейки. Центрирование можно отменить и выровнять текст по левому или правому краю. Если воспользоваться <TD></TD> с тегом <B> и атрибутом <ALIGN=CENTER>, текст тоже будет выглядеть как заголовок. Однако следует иметь ввиду, что не все броузеры поддерживают жирный шрифт в таблицах, поэтому лучше задавать заголовки таблиц с помощью <TH>.
Тег <CAPTION>. <CAPTION> позволяет создавать заголовки таблицы. По умолчанию заголовки центрируются и размещаются либо над (<CAPTION ALIGN=TOP>), либо под таблицей (<CAPTION ALIGN=BOTTOM>). Заголовок может состоять из любого текста и изображений. Текст будет разбит на строки, соответствующие ширине таблицы.
Атрибут NOWRAP=. Обычно любой текст в таблице, не помещающийся в одну строку ячейки, переходит на следующую строку. Однако при использовании атрибута NOWARP с тегами <TH> или <TD> длина ячейки расширяется на столько, чтобы, заключённый в ней текст поместился в одну строку.
Атрибут COLSPAN=. Теги <TD> и <TH> модифицируются с помощью атрибута COLSPAN=(Column Span, соединение столбцов). Если вы хотите сделать какую-нибудь ячейку шире, чем верхняя или нижняя, можно воспользоваться атрибутом COLSPAN=, чтобы растянуть её над любым количеством ячеек.
Атрибут ROWSPAN=. Атрибут ROWSPAN=, используемый в тегах <TD> и <TH>, аналогичен атрибуту COLSPAN=, только он задаёт число строк, на которые растягивается ячейка. Если вы указали в атрибуте ROWSPAN= число, большее единицы, то соответствующее количество строк должно находиться под растягиваемой ячейкой. Нельзя поместить её внизу таблицы.
Атрибут WIDTH=. Атрибут WIDTH= применяется в двух случаях. Можно поместить его в тег <TABLE> для задания ширины всей таблицы, а можно использовать в тегах <TR> или <TH> для задания ширины ячейки или группы ячеек. Ширину можно указывать в пикселях или в процентах. Например, если вы задали в теге <TABLE> WIDTH=250, вы получите таблицу шириной 250 пикселей независимо от размера страницы на мониторе. При задании WIDTH=50% в теге <TABLE> таблица будет занимать половину ширины страницы при любом размере изображения на экране.
