Веб-страница представляет собой текстовый документ, в котором
расставлены команды языка HTML. Они интерпретируются браузером.
Например, эти команды могут указывать, как должно отображаться содержание
страницы на экране.
HTML-документ можно создавать в простейших текстовых редакторах,
например, редакторе Блокнот, а затем сохранять в файле с расширением .htm
или .html. Разметка HTML-документа состоит в расстановке тегов –
заключенных в угловые скобки команд языка HTML. Их можно набирать
строчными или прописными латинскими буквами.
Рассмотрим структуру простейшего HTML-документа:
HTML-документ начинается отрывающим тегом <html>, а заканчивается
закрывающим </html>. Внутри, как в контейнере, расположены два блока.
В блоке <head>…</head> (голова) размещается неотображаемая на
экране служебная информация. Например, текст, заключенный между тегами
<title>…</title>, отображается не на странице, а в заголовке окна браузера.
Вся отображаемая браузером информация: тексты, рисунки, аудио и
видеофрагменты, анимации – размещается в блоке <body>…</body> (тело).
В HTML-документе можно также размещать невидимые комментарии,
заключая их в угловые скобки, например: <! Комментарии>.
<html>
<head>
<title>Заголовок окна</title>
</head>
<body>
Содержание документа
</body>
</html>
Пример 1. В редакторе Блокнот создать HTML-документ, содержащий текст:
Авторская страница
Это мой первый проект.
Фамилия Имя.
Сохранить созданный документ под именем primer1.htm.
Просмотреть в браузере.
Откроем редактор Блокнот. Наберем или скопируем готовый шаблон
HTML-документа из файла шаблон.htm. Наполним его требуемым
содержанием, т.е. введем заданный текст, как показано на рисунке 1.14.
Рис. 1.14
Сохраним документ в формате HTML. Поскольку созданные в редакторе
Блокнот документы по умолчанию сохраняются с расширением .txt,
воспользуемся меню Файл - Сохранить как, в появившемся диалоговом окне
выберем Все файлы и введем имя и расширение: primer1.htm.
Откроем созданный документ в браузере (рис.1.15). Обратим внимание,
что текст отображается в одну строку, хотя набран в три строки с отступами.
Переходы на новые строки, а также все пробелы более одного браузером
игнорируются.
Рис.1.15
Итак, вид веб-страницы в браузере задается тегами HTML, но также
может зависеть от типа браузера. Во всех приведенных примерах используется
браузер MS Explorer.
Займемся оформлением созданной страницы.
Для отображения текста в виде отдельных абзацев используют тег <p>.
При просмотре в браузере абзацы отделяются друг от друга одной пустой
строкой. Для принудительного перехода на новую строку без создания абзаца
используют непарный тег <br>. Нередко между абзацами используют
разделительную линию, которая задается непарным тегом <hr>.
За оформление текста отвечают теги форматирования (приложение 1).
Для отображения заголовков используются теги <h1>…<h6>. Заголовок
уровня 1 самый крупный, а уровня 6 - самый маленький.
Начертание символов задается тегами: <b> - Полужирный, <i> -
Курсивный, <u> - Подчеркнутый шрифт.
Пример 2. Оформить созданную в примере 1 страницу
в соответствии с рисунком
Отредактируем HTML-документ в редакторе Блокнот. Его можно
открыть непосредственно из браузера с помощью меню Страница (или Вид)
Просмотр HTML-кода (рис 1.17).
Расставим теги:
<h2> Авторская страница</h2><hr> <! Заголовок уровня 2 >
<b>Это мой первый проект.</b> <br> <! Жирный шрифт>
<i>Фамилия И.О.</i> <! Курсив>
Сохраним документ в файле с именем avtor.htm. Для просмотра
обновленной страницы нажмем кнопку (или клавишу F5).
Открывающие теги языка HTML могут содержать атрибуты, которыми
задаются параметры разметки документа. Каждый атрибут имеет название
(имя) и определенное значение, которое записывают в кавычках после знака
«равно». Тэг может иметь несколько атрибутов, которые перечисляют через
пробелы, например, <тег атрибут1=”значение” атрибут2=”значение” … >
Порядок следования атрибутов в теге неважен. Если значение атрибута
содержит только буквы английского алфавита, цифры, дефис и не содержит
пробелов, кавычки можно опустить.
Вид всей веб-страницы задается атрибутами тега <body>, в то время как
отдельные ее элементы, например: заголовки, разделы, абзацы, таблицы,
рисунки могут иметь свое особенное оформление.
Цвет фона страницы задается атрибутом bgcolor, а цвет текста -
атрибутом text. Значением этих атрибутов является цвет, который задается
своим названием на английском языке, например, red (красный) или его
шестнадцатеричным кодом #FF0000 (см. приложение 2). По умолчанию цвет
страницы белый, а текста – черный.
Синий цвет страницы можно задать так:
<body bgcolor="blue"> или так <body bgcolor="#0000FF”>
Заметим, что цвета, отображаемые разными браузерами, а также выводи-
мые на печать, могут несколько отличаться от приведенных в приложении 2.
Для выравнивания текста всей страницы, отдельного абзаца, раздела или
заголовка используется атрибут align, который может принимать значения:
center - выравнивание по центру, left - по левому или right - по правому краю.
Выравнивание текста по ширине не рекомендуется, поскольку при
уменьшении окна браузера между словами могут образоваться большие
промежутки.
ZGA 06.08.2010 Глава 1. ОСНОВЫ ВЕБ-КОНСТРУИРОВАНИЯ
Для задания шрифта, цвета и размера символов текста используется
тег <font>. Шрифт задается атрибутом face, значением которого является
название шрифта, например, Arial. Цвет символов задается атрибутом color.
Если шрифт не задан, то по умолчанию используется Times черного цвета.
Размер символов задается атрибутом size и выражается в условных
единицах, которые могут принимать значения от 1 до 6. По умолчанию
принято значение размера 3.
Размер символов может выражаться и в относительных единицах: числах
по отношению к базовому размеру, например, size =”+n” или size= “-n”.
Так, для базового размера 3 атрибут <font size="+2"> задает размер 5,
а <font size="-2"> - размер 1.
Пример 3. Создать веб- страницу в соответствии с рисунком 1.18.
Рис.1.18
Откроем в редакторе Блокнот файл primer3.txt с текстом объявления
и введем HTML-код:
<html>
<head>
<title>Объявление</title>
</head>
<body bgcolor=”gold”>
<font face="Arial" size=”+2” color=”red”><i>Внимание!</i></font>
<h1 align=”center”>НЕДЕЛЯ <br>ИНФОРМАТИКИ</h1>
<font face="Arial" size=”+2” color=”blue”>
КОНКУРСЫ, ТУРНИРЫ, ВИКТОРИНЫ</font>
<p align=”right”> Оргкомитет</p>
</body>
</html>
Заметим, что допускается комбинирование и вложенность тегов. Так, для
отображения слова “Внимание!” шрифтом Arial курсивным начертанием в тег
<font…> вложен тег <i>.
Сохраним документ в файле с именем Primer3.htm. Просмотрим в
браузере.
Фрагмент текста может отображаться в виде бегущей строки с помощью
тега <marquee>. Направления движения указывается атрибутом direction.
Например, движение слова “Внимание!” слева направо задается так:
<Marquee direction = right> Внимание! </marquee>
1. Каким тэгом задается абзац? Переход на новую строку?
2. Какими тегами задается полужирное и курсивное начертание символов?
3. Как задать фон и цвет текста всей веб-страницы?
4. Какими тегами и атрибутами задается шрифт, размер и цвет символов?
Упражнение
Откройте предлагаемый текстовый документ в редакторе Блокнот.
Оформите и сохраните его в виде веб-страницы, изображенной на одном из рисунков.
Для задания цвета фона воспользуйтесь приложением 2.
а) б)
в) г)
?
Комментариев нет:
Отправить комментарий