Качество документов html
Творческий характер создания документов HTML сродни программированию, так что при этом возможны ошибки, которые могут привести к трудностям или даже полной невозможности прочитать созданный документ в Интернете. Кроме того, огромное разнообразие компьютеров, подключенных к Интернету, приводит к тому, что заранее невозможно предсказать, как именно будет выглядеть документ на экране конкретного пользователя.
Web-страницы предназначаются для широкой аудитории, так что при подготовке документов HTML следует иметь в виду эти особенности. Чтобы создать хороший документ HTML, следует придерживаться ряда достаточно простых правил.
Содержание документа более важно, чем его внешний вид. Страница с интересным содержанием, просто разбитая на абзацы, представленные в логической последовательности, может привлечь читателей, а богато украшенная страница, не несущая полезной информации, навсегда останется курьезом.
Содержание Web-страницы или группы Web-страниц должно быть связанным логически. Хорошо продуманная система ссылок должна позволять переходить от страницы к странице и возвращаться назад практически без использования кнопок навигации Вперед и Назад на панели инструментов браузера.
Для того чтобы документ HTML был доступен самой широкой аудитории, следует «отставать на один шаг» от последних достижений в развитии языка HTML. Последние нововведения не всегда сразу реализуются в браузерах, а новым версиям требуется время на то, чтобы достичь большинства пользователей. Документы с использованием самых свежих новшеств доступны лишь ограниченной аудитории.
Ошибка, которую часто делают новички, состоит в злоупотреблении элементами оформления, особенно разнообразными цветами и шрифтами. Такая страница в лучшем случае будет выглядеть кричащей. В худшем случае, текст вообще нельзя будет прочесть на компьютерах с нестандартной цветовой схемой или при отсутствии необходимых шрифтов.
Не следует злоупотреблять графическими изображениями и мультимедийными файлами. При изобилии таких объектов загрузка страницы может затянуться и читатель может утратить к ней интерес еще до того, как получит возможность что-то прочесть.
Так как создание документов HTML сродни программированию, процесс поиска и исправления ошибок, известный в программировании как отладка, необходим и при создании Web-страницы. Большинство, если не все сделанные ошибки можно обнаружить еще до того, как страница станет доступна посторонним читателям. В число ошибок, которые надо исправлять, входят также грамматические ошибки и опечатки.
Если собственной фантазии недостаточно, чтобы придумать способ оформления Web-страницы, можно воспользоваться службой World Wide Web как справочником. Интернет содержит миллионы Web-страниц, способных предложить идеи оформления, которыми можно пользоваться. Достоинство этого подхода состоит еще и в том, что таким способом можно увидеть, не только что сделано, но и как сделано, если обратиться к исходному тексту Web-страницы.
Фреймы — очень мощное, но и очень опасное средство оформления Web-страниц. С помощью фреймов создано гораздо больше неудачных Web-страниц, чем удачных. Единственный критерий грамотности применения фреймов — удобство пользователя. Если благодаря фреймам страница становится во много раз красивее, но чуть-чуть менее удобной, от фреймов надо отказываться не задумываясь. Ничего, кроме раздражения, у читателей она не вызовет.
Люди ценят заботу и внимание. Размещение самой важной информации в верхней части страницы позволяет им с пользой проводить время, в течение которого происходит загрузка документа. Сопровождение иллюстраций альтернативным текстом не стоит больших трудов, но высоко ценится. Наличие большого количества полезных гиперссылок на странице не только помогает людям плодотворно путешествовать по просторам Интернета, но и побуждает их раз за разом возвращаться на страницу, предоставившую им такую возможность.
Ход работы
Открыть текстовый редактор Блокнот. Набрать следующий HTML-код.
<HTML>
<HEAD>
<Т1ТLЕ>Функциональные разделы документа </Т1ТLЕ >
</HEAD>
<BODY>
<Н1>Главный заголовок</Н1>
<Н2>Подзаголовок</Н2>
<Р>Эти строки изображаются слитно,
несмотря на то, что в документе
они отделены
друг от друга
<Р>Закрывающий тег абзаца не обязателен.<Р>Тег начала абзаца более важен, чем реальный переход на новую строку.
<HR>
Текст после горизонтальной линейки <BR> разбит на две строки.
</BODY>
</HTML>
Сохранить созданный документ под именем doc1.htm. Открыть документ с помощью браузера Internet Explorer. Сравнить с представленным ниже рис. 11
Рисунок 11. Так выглядит текст при отображении его браузером
Создать документ doc2.htm. Просмотреть созданный HTML-код с помощью браузера.
<HTML>
<HEAD>
<ТITLЕ>Ссылки и якоря</ТITLЕ>
</HEAD>
<BODY>
Новые версии стандартных программ операционной системы и самые свежие драйверы можно найти на Web-узле компании
<A HREF="http://www.microsoft.com/"> Microsoft </A>.
<Р>А теперь можно перейти к <А HREF="my.htm"> моей личной
странице </А>.
<Р> О том, как связаться с автором, рассказано в
<А HREF="#address">конце этой страницы</А>
Здесь располагается основное содержание страницы
<А NAME="address">Aдpec электронной почты</А>
</BODY>
</НТМL>
Создать рисунок с помощью графического редактора Paint:
нарисовать красное яблоко с зеленым листком;
сохранить рисунок под именем “яблоко.jpg”.
Создать документ doc3.htm.
<HTML>
<HEAD>
<TITLE>Рисунки на веб-страницах</TITLE>
</HEAD>
<BODY>
<P>Иллюстрации играют важнейшую роль в оформлении веб-страниц
<IMG SCR=”яблоко.jpg” WIDTH=”100” HEIGHT=”200”ALT=”красное яблоко с зеленым листком“>
</BODY>
</HTML>
Создать документ doc4.htm.
<HTML>
<HEAD>
<ТITLЕ>Управление стилем шрифта</ТITLЕ>
</HEAD>
<BODY>
<BASEF0NT SIZE=4 FACE="Arial">
Этот текст использует нестандартный стиль шрифта, заданный по умолчанию.
<P> <FONT SIZE=-2 FACE="Times New Roman" COLOR="GREEN">
Этот текст мельче и использует другой шрифт и другой цвет. </FONT> |
<Р><В>Полужирный шрифт</В> и <I>курсив</I> используют для выделения фрагментов текста.
<Р>Использование <U>подчеркивания</U> не рекомендуется, так как подчеркнутый текст легко перепутать со ссылкой.
<Р><S>Вычеркивание текста </S> иногда применяют для разметки фрагментов, потерявших актуальность, но по каким-то причинам сохраняемых в документе.
</BODY>
</HTML>
Создать документ doc5.htm.
<HTML>
<HEAD>
<TITLE> Элементы фразы </TITLE>
</HEAD>
<BODY>
<Р><СIТЕ>На сайт конгресса США были выложены все 445 страниц доклада специального прокурора Кеннета Стара </СIТЕ> - это цитата из газеты "Московский комсомолец".
<P><CODE>Teксты npoгpaмм </CODE>, команды, <КВD>вводимые с клавиатуры</КВD>, примеры <SAMP> вывода компьютерных программ </SAMP> и программные <VAR> переменные </VAR> обычно отображаются на экране примерно одинаково.
<Р><ЕМ>Выделение</ЕМ> и
<STRONG> сильное выделение </STRONG>
используется как смысловой эквивалент курсивного и полужирного начертания.
</BODY>
</HTML>
Создать список устройств компьютера и компьютерных стандартов. Сохранить документ под именем doc6.htm.
<UL>
<LI>Внешние
<OL>
<LI>Принтер
<LI>Сканер
<LI>Монитор
</0L>
<LI>Внутренние
</UL>
2) <DL>
<DT><STRONG>MIDI (Musical Instrument Digital lnterface)</STRONG>
<DD>Стандарт подключения к компьютеру музыкальных инструментов.
<DT><STRONG>MPC (Multimedia PC)</STRONG>
<DD>Стандарт, описывающий требования к мультимедийному персональному компьютеру.
<DT><STRONG>OLE (Object Linking and Embedding)</STRONG>
<DD>Технология связывания и внедрения объектов, стандарт компании Microsoft.
<DT><STRONG>Plug and Play</STRONG>
<DD>Стандарт, по которому элемент оборудования содержит сведения о модели и компании-изготовителе и допускает настройку программными средствами.
</DL>
Создать документ doc7.htm.
<HTML>
<HEAD>
<TITLE>Мультимедиа в документе</TITLE>
</HEAD>
<BODY>
<Р><А HREF="music.wav">щелкните здесь, чтобы послушать музыку</А>
<Р>Видеоролик, воспроизводимый в рамках страницы <EMBED SRC="File.avi" WIDTH="200" HEIGHT="200">
</BODY>
</НТМL>
Создать таблицу «Основные теги таблицы» (см. табл. 9). Сохранить документ под именем doc8.htm.
<HTML>
<HEAD>
<TITLE>Таблица</TITLE>
</HEAD>
<BODY>
<TABLE WIDTH="90%" BORDER=10 CELLPADDING=2 CELLSPACING=10>
<CAPTION>основные теги таблицы</САРТЮМ>
<ТR><TD<В>Открывающий тег</В><ТD><В>Закрывающий тег</B> <ТD><В>Описание</В>
<TR><TD>TABLE<TD РОWSPAN=2>Обязателен <ТD>Начало и конец таблицы
<TR><TD>CAPTION <TD>Начало и конец заголовка таблицы
<TR><TD>TR <TD ROWSPAN=2>Необязателен <TD>Начало строки таблицы
<TR><TD>TD <TD>Начало ячейки таблицы
</TABLE>
</BODY>
</HTML>
Таблица 9. Основные теги таблицы
Открывающий тег |
Закрывающий тег |
Описание |
TABLE |
Обязателен |
Начало и конец таблицы |
CAPTION |
Начало и конец заголовка таблицы |
|
TR |
Необязателен |
Начало строки таблицы |
TD |
Начало ячейки таблицы |
Создать документ doc9.htm.
<HTML>
<HEAD>
<TITLE>Страница с навигационной панелью></ TITLE >
</HEAD>
<FRAMESET COLS="25%,*">
<FRAME SRC=panel.htm>
<FRAME SRC=home1 .htm>
</FRAMESET>
</HTML>
Разместить на одной веб-странице все созданные документы.
<HTML>
<HEAD>
<TITLE>Сложная структура документа</ TITLE >
</HEAD>
<FRAMESET ROWS="45%,30%,25%">
<FRAMESET COLS="40%,30%,30%">
<FRAMESET ROWS="50%,50%">
<FRAME SRC="doc1.htm">
<FRAME SRC="doc2.htm">
</FRAMESET>
<FRAME SRC="doc3.htm">
<FRAME SRC="doc4.htm">
</FRAMESET>
<FRAMESET COLS="60%,40%">
<FRAME SRC="doc5.htm">
<FRAME SRC="doc6.htm">
</FRAMESET>
<FRAMESET COLS="30%,40%,30%">
<FRAMESRC="doc7.htm">
<FRAMESRC="doc8.htm">
<FRAMESRC="doc9.htm">
</FRAMESET>
</FRAMESET>
</HTML>
Задание
Ознакомиться с краткой теорией.
Выполнить работу по предложенной технологии.
Ответить на контрольные вопросы.
Оформить отчет.
Контрольные вопросы
Дайте определение следующим понятиям:
язык HTML;
структура языка HTML;
синтаксис языка HTML.
Что такое теги?
Сколько уровней внутренних заголовков документа поддерживает язык HTML?
Каким образом можно осуществить переход на новую строку без создания абзаца?
Какими тегами задают вычеркивание текста?
Какие пять видов списков поддерживает язык HTML?
Какие два основных формата используют сегодня графические элементы Web-страниц?
Какой тег служит для размещения рисунков в документе?
Что такое альтернативный текст?
Дайте определение следующим понятиям:
внешние и внутренние ссылки;
якорь.